// V1 — Quiet Scholar.
// Single column, serif-led. Generous whitespace, restrained accent.

function V1Scholar() {
  const styles = scholarStyles;
  return (
    <div className="v1" style={styles.page}>
      <style>{scholarCSS}</style>

      <main style={styles.main}>
        {/* Intro */}
        <section style={styles.intro}>
          <div style={styles.introHead}>
            <h1 style={styles.name}>{PROFILE.name}</h1>
            <div style={styles.introSub}>
              <span>{PROFILE.employer}</span>
              <span style={styles.metaSep}>·</span>
              <span>{PROFILE.location}</span>
            </div>
          </div>

          <div style={styles.blurb}>
            <p style={styles.lede}>
              Backend engineer. <span style={styles.accent}>AI agent builder.</span> Loop finder.
            </p>
            <p style={styles.cta}>
              {PROFILE.cta}
            </p>
          </div>

          <ul style={styles.linksRow}>
            {PROFILE.links.map(l => (
              <li key={l.label}><a href={l.href}>{l.label}<span style={styles.arrow}>↗</span></a></li>
            ))}
          </ul>

          {/* Subtle open-source signal: org chips lead, contribution graph trails. */}
          <GHBlock />
        </section>

        {/* Experience */}
        <section id="experience" style={styles.section}>
          <SectionHead n="01" label="Experience" />
          


          <ol style={styles.experienceList}>
            {EXPERIENCE.map((exp, i) => (
              <li key={i} style={styles.experienceItem}>
                <div style={styles.experienceMeta}>
                  <span style={styles.experienceCompany}>
                    {exp.companyLink ? <a href={exp.companyLink} target="_blank" rel="noreferrer">{exp.company}</a> : exp.company}
                  </span>
                  <span style={styles.experienceDate}>{exp.date}</span>
                </div>
                <h3 style={styles.experienceRole}>{exp.role}</h3>
                <ul style={styles.experiencePoints}>
                  {exp.points.map((pt, idx) => (
                    <li key={idx} style={styles.experiencePointItem}>{pt}</li>
                  ))}
                </ul>
              </li>
            ))}
          </ol>
        </section>

        {/* Cool Things */}
        <section id="cool" style={styles.section}>
          <SectionHead n="02" label="Cool Things" />
          <ul style={styles.achievementsList}>
            {ACHIEVEMENTS.map((ach, i) => (
              <li key={i} style={styles.achievementItem}>{ach}</li>
            ))}
          </ul>
        </section>

        {/* Projects */}
        <section id="projects" style={styles.section}>
          <SectionHead n="03" label="Projects" />
          <ol style={styles.projectList}>
            {PROJECTS.map((proj, i) => (
              <li key={i} style={styles.projectItem}>
                <div style={styles.projectMeta}>
                  <span style={styles.projectSubtitle}>{proj.subtitle}</span>
                  <div style={styles.projectLinks}>
                    {proj.links.map(l => (
                      <a key={l.label} href={l.href} target="_blank" rel="noreferrer" style={styles.projectLink}>
                        {l.label}<span style={styles.projectArrow}>↗</span>
                      </a>
                    ))}
                  </div>
                </div>
                <h3 style={styles.projectTitle}>{proj.title}</h3>
                <p style={styles.projectDesc}>{proj.desc}</p>
                <ul style={styles.projectFeatures}>
                  {proj.features.map((f, idx) => (
                    <li key={idx} style={styles.projectFeatureItem}>{f}</li>
                  ))}
                </ul>
                <div style={styles.techTags}>
                  {proj.tech.map(t => (
                    <span key={t} style={styles.techTag}>{t}</span>
                  ))}
                </div>
              </li>
            ))}
          </ol>
        </section>

        {/* Skills & Education */}
        <section id="skills" style={styles.section}>
          <SectionHead n="04" label="Skills &amp; Education" />
          
          <div style={styles.skillsContainer}>
            {SKILLS.map((cat, i) => (
              <div key={i} style={styles.skillsCategoryRow}>
                <h4 style={styles.skillsCategoryTitle}>{cat.category}</h4>
                <div style={styles.skillsCategoryItems}>
                  {cat.items.map(s => (
                    <span key={s} style={styles.skillsCategoryItemChip}>{s}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={styles.subSectionDivider} />

          <h4 style={styles.skillsCategoryTitle}>Education</h4>
          <div style={styles.educationBlock}>
            <div style={styles.educationHeader}>
              <span style={styles.educationSchool}>Pune Institute of Computer Technology (PICT)</span>
              <span style={styles.educationLoc}>Pune, MH</span>
            </div>
            <div style={styles.educationDegree}>Bachelor of Engineering (B.E.)</div>
          </div>
        </section>


      </main>

      <footer style={styles.footer}>
        <span>© 2026 {PROFILE.name}</span>
        <span style={styles.footerDot}>·</span>
        <FooterClock />
      </footer>
    </div>
  );
}

function SectionHead({ n, label }) {
  return (
    <div style={scholarStyles.sectionHead}>
      <span style={scholarStyles.sectionN}>{n}</span>
      <h2 style={scholarStyles.sectionLabel}>{label}</h2>
      <span style={scholarStyles.sectionRule} />
    </div>
  );
}

function FooterClock() {
  const [time, setTime] = React.useState('');
  React.useEffect(() => {
    function update() {
      const now = new Date();
      const options = {
        hour: '2-digit', minute: '2-digit', second: '2-digit',
        hour12: true, timeZone: 'Asia/Kolkata'
      };
      setTime(now.toLocaleTimeString('en-US', options) + ' IST');
    }
    update();
    const id = setInterval(update, 1000);
    return () => clearInterval(id);
  }, []);
  return <span style={{ fontFamily: "'JetBrains Mono', monospace" }}>{time}</span>;
}

function GHBlock() {
  const [count, setCount] = React.useState(null);
  React.useEffect(() => {
    async function fetchCount() {
      try {
        const res = await fetch('data/contributions.json?_=' + Date.now());
        if (!res.ok) return;
        const data = await res.json();
        if (data.count != null) setCount(data.count);
      } catch (err) {
        console.error('Failed to fetch contributions count:', err);
      }
    }
    fetchCount();
  }, []);

  const styles = scholarStyles;

  return (
    <a href="https://github.com/ameysr" target="_blank" rel="noreferrer" style={styles.ghBlock}>
      <div style={styles.ghHead}>
        <span style={styles.ghLabel}>Open source contributions</span>
        <span style={styles.ghSep}/>
        <span style={styles.ghHandle}>
          @ameysr{count !== null ? (
            <span> · <span style={{ color: ACCENT }}>{count} commits in the last year</span></span>
          ) : ''}
        </span>
        <span style={styles.ghHint}>github ↗</span>
      </div>

      <div style={styles.orgRow}>
        {OSS.map(o => (
          <span key={o.org} style={styles.orgChip}>
            <img
              src={`https://github.com/${o.org}.png?size=64`}
              alt={o.label}
              style={styles.orgLogo}
              loading="lazy"
            />
            <span style={styles.orgLabel}>@{o.org}</span>
          </span>
        ))}
        <span style={styles.orgMore}>+ more</span>
      </div>

      <div style={styles.ghChartWrap}>
        <img
          src="https://ghchart.rshah.org/c96442/ameysr"
          alt="GitHub contributions for Ameysr"
          style={styles.ghChart}
          loading="lazy"
        />
      </div>
    </a>
  );
}

const INK = '#1d1a14';
const INK_2 = '#4a443a';
const INK_3 = '#7a7264';
const BG = '#f6f3ec';
const PAPER = '#fbf9f3';
const ACCENT = 'oklch(0.55 0.12 35)';
const RULE = '#d9d2c2';

const scholarCSS = `
.v1 a { color: inherit; text-decoration: none; border-bottom: 1px solid ${RULE}; transition: border-color .15s, color .15s; }
.v1 a:hover { color: ${ACCENT}; border-bottom-color: ${ACCENT}; }
.v1 *::selection { background: ${ACCENT}; color: ${PAPER}; }
.v1 #skills a, .v1 #experience a, .v1 #cool a { color: ${ACCENT}; border-bottom-color: ${ACCENT}; font-weight: 500; }
.v1 section ol li:first-child, .v1 section ul li:first-child { border-top: none !important; padding-top: 0 !important; }

/* Custom thin scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: ${ACCENT} ${BG};
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: ${BG};
}
::-webkit-scrollbar-thumb {
  background-color: ${ACCENT};
  border-radius: 4px;
  border: 2px solid ${BG};
}
::-webkit-scrollbar-thumb:hover {
  background-color: oklch(0.48 0.11 35);
}
`;

const scholarStyles = {
  page: {
    background: BG,
    color: INK,
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontFeatureSettings: '"ss01","onum"',
    width: '100%', minHeight: '100%',
    padding: '56px 96px 80px',
    boxSizing: 'border-box',
  },
  nav: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    maxWidth: 880, margin: '0 auto 120px',
  },
  navMark: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: '0.16em',
    color: INK_2,
  },
  navLinks: {
    display: 'flex', gap: 28, fontFamily: "'IBM Plex Sans', sans-serif",
    fontSize: 14, color: INK_2,
  },

  main: { maxWidth: 720, margin: '0 auto' },

  intro: { marginBottom: 120 },
  introHead: { display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 48 },
  introPre: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11,
    color: ACCENT,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    fontWeight: 600,
    marginBottom: 4,
  },
  name: {
    fontFamily: "'DM Sans', sans-serif",
    fontWeight: 600,
    fontSize: 42,
    margin: 0,
    letterSpacing: '-0.03em',
    lineHeight: 1.1,
    color: INK,
  },
  introSub: {
    fontFamily: "'DM Sans', sans-serif",
    fontSize: 15,
    color: INK_2,
    letterSpacing: '-0.005em',
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap: 8,
    marginTop: 4,
  },
  metaSep: {
    color: INK_3,
    fontSize: 14,
  },

  blurb: { marginBottom: 40 },
  lede: {
    fontFamily: "'DM Sans', sans-serif",
    fontSize: 21, lineHeight: 1.55, margin: '0 0 16px',
    color: INK, fontWeight: 400, textWrap: 'pretty',
    letterSpacing: '-0.005em',
  },
  accent: { color: ACCENT, fontWeight: 500 },
  cta: {
    fontFamily: "'DM Sans', sans-serif",
    fontSize: 16, lineHeight: 1.5, margin: '20px 0 0',
    color: INK_2, fontWeight: 400, fontStyle: 'italic',
  },

  linksRow: {
    display: 'flex', gap: 24, listStyle: 'none', padding: 0, margin: 0,
    fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14, color: INK_2,
  },
  arrow: { marginLeft: 4, fontSize: 11, color: INK_3 },

  ghBlock: {
    display: 'block', marginTop: 44,
    paddingTop: 0, borderTop: 'none',
    borderBottom: 'none', color: 'inherit',
    transition: 'opacity .15s',
  },
  ghHead: {
    display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14,
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    color: INK_3, letterSpacing: '0.08em', textTransform: 'uppercase',
  },
  ghLabel: { color: INK_2 },
  ghSep: { width: 1, height: 11, background: RULE, display: 'inline-block', alignSelf: 'center' },
  ghHandle: { color: INK },
  ghHint: { marginLeft: 'auto', color: INK_3, textTransform: 'none', letterSpacing: '0.04em' },

  orgRow: {
    display: 'flex', alignItems: 'center', flexWrap: 'wrap',
    gap: 10, marginBottom: 20,
  },
  orgChip: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '6px 12px 6px 6px',
    border: `1px solid ${RULE}`, background: PAPER,
    fontFamily: "'DM Sans', sans-serif", fontSize: 13,
    color: INK, letterSpacing: '-0.005em',
  },
  orgLogo: {
    width: 22, height: 22, borderRadius: '50%', display: 'block',
    background: BG,
  },
  orgLabel: { fontWeight: 500 },
  orgMore: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    color: INK_3, letterSpacing: '0.06em', padding: '0 6px',
  },

  ghChartWrap: {
    width: '100%', overflow: 'hidden',
    filter: 'saturate(0.85) hue-rotate(-8deg)',
    opacity: 0.7,
  },
  ghChart: { width: '100%', height: 'auto', display: 'block' },

  section: { marginBottom: 96 },
  sectionHead: {
    display: 'flex', alignItems: 'center', gap: 16, marginBottom: 36,
  },
  sectionN: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 15,
    color: ACCENT, letterSpacing: '0.08em', fontWeight: 600,
  },
  sectionLabel: {
    fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600,
    fontSize: 14, letterSpacing: '0.12em', textTransform: 'uppercase',
    color: INK, margin: 0,
  },
  sectionRule: { flex: 1, height: 1, background: RULE },

  // Metrics Row Styling
  metricsRow: {
    display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))',
    gap: 18, marginBottom: 44,
  },
  metricItem: {
    background: PAPER, border: `1px solid ${RULE}`,
    padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 4,
    boxShadow: '0 1px 0 rgba(0,0,0,.02)',
  },
  metricNumber: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 24, fontWeight: 'bold',
    color: ACCENT,
  },
  metricLabel: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: INK_2,
    letterSpacing: '-0.005em',
  },

  // Experience List Styling
  experienceList: { listStyle: 'none', padding: 0, margin: 0 },
  experienceItem: { borderTop: `1px solid ${RULE}`, padding: '28px 0' },
  experienceMeta: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8,
  },
  experienceCompany: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: ACCENT,
    letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600,
  },
  experienceDate: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: INK_3,
    letterSpacing: '0.06em',
  },
  experienceRole: {
    fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: 20,
    lineHeight: 1.3, margin: '0 0 12px', letterSpacing: '-0.01em',
    color: INK,
  },
  experiencePoints: {
    paddingLeft: 18, margin: 0, display: 'flex', flexDirection: 'column', gap: 6,
  },
  experiencePointItem: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 15, lineHeight: 1.55,
    color: INK_2, textWrap: 'pretty',
  },

  // Project List Styling
  projectList: { listStyle: 'none', padding: 0, margin: 0 },
  projectItem: { borderTop: `1px solid ${RULE}`, padding: '32px 0' },
  projectMeta: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10,
    flexWrap: 'wrap', gap: 10,
  },
  projectSubtitle: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: INK_3,
    letterSpacing: '0.06em', textTransform: 'uppercase',
  },
  projectLinks: { display: 'flex', gap: 14 },
  projectLink: {
    fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12,
    borderBottom: `1px solid ${RULE}`, color: INK_2,
  },
  projectArrow: { marginLeft: 3, fontSize: 9, color: INK_3 },
  projectTitle: {
    fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: 20,
    lineHeight: 1.3, margin: '0 0 10px', letterSpacing: '-0.01em',
    color: INK,
  },
  projectDesc: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 15, lineHeight: 1.55,
    color: INK, margin: '0 0 16px', fontWeight: 500,
  },
  projectFeatures: {
    paddingLeft: 18, margin: '0 0 20px', display: 'flex', flexDirection: 'column', gap: 6,
  },
  projectFeatureItem: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, lineHeight: 1.5,
    color: INK_2, textWrap: 'pretty',
  },
  techTags: { display: 'flex', flexWrap: 'wrap', gap: 8 },
  techTag: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
    background: PAPER, border: `1px solid ${RULE}`,
    padding: '3px 8px', color: INK_2,
  },

  // Skills & Education Styling
  skillsContainer: { display: 'flex', flexDirection: 'column', gap: 16 },
  skillsCategoryRow: {
    display: 'grid', gridTemplateColumns: '130px 1fr', gap: 20, alignItems: 'baseline',
  },
  skillsCategoryTitle: {
    fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13,
    letterSpacing: '0.08em', textTransform: 'uppercase',
    color: INK_2, margin: 0, fontWeight: 500,
  },
  skillsCategoryItems: { display: 'flex', flexWrap: 'wrap', gap: 8 },
  skillsCategoryItemChip: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 14,
    background: PAPER, border: `1px solid ${RULE}`,
    padding: '5px 10px', color: INK,
  },
  subSectionDivider: {
    height: 1, background: RULE, margin: '36px 0', opacity: 0.6,
  },
  achievementsList: {
    paddingLeft: 18, margin: 0, display: 'flex', flexDirection: 'column', gap: 8,
  },
  achievementItem: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, lineHeight: 1.55,
    color: INK_2, textWrap: 'pretty',
  },
  educationBlock: {
    display: 'flex', flexDirection: 'column', gap: 4, marginTop: 12,
  },
  educationHeader: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
  },
  educationSchool: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 16, fontWeight: 500,
    color: INK,
  },
  educationLoc: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: INK_3,
  },
  educationDegree: {
    fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, color: INK_2,
    fontStyle: 'italic',
  },

  footer: {
    maxWidth: 880, margin: '0 auto', paddingTop: 32,
    borderTop: `1px solid ${RULE}`,
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    color: INK_3, letterSpacing: '0.08em', textTransform: 'uppercase',
    display: 'flex', gap: 10, justifyContent: 'center', alignItems: 'center',
  },
  footerDot: { color: INK_3 },
};

Object.assign(window, { V1Scholar, SectionHead });