// About page — Bhavya Parashar. Reuses portfolio-a tokens + nav.
const HOME = 'index.html';

// Minimal, modern line-icon set (circles / lines / simple shapes only)
const Icon = ({ name, size = 22 }) => {
  const s = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'work': // stacked cards
      return <svg {...s}><rect x="3" y="7" width="18" height="13" rx="2.5" /><path d="M8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7" /><path d="M3 12h18" /></svg>;
    case 'collab': // two people
      return <svg {...s}><circle cx="9" cy="8" r="2.6" /><circle cx="17" cy="9.5" r="2.1" /><path d="M3.5 19v-1a4.5 4.5 0 0 1 9 0v1" /><path d="M15 13.4a4 4 0 0 1 5.5 3.7V18" /></svg>;
    case 'skills': // connected nodes
      return <svg {...s}><circle cx="6" cy="6" r="2.4" /><circle cx="18" cy="9" r="2.4" /><circle cx="9" cy="18" r="2.4" /><path d="M8 7.2 16 8.2M8 16 8 8.4" /></svg>;
    case 'edu': // mortarboard (triangle + line)
      return <svg {...s}><path d="M2 8.5 12 4l10 4.5-10 4.5z" /><path d="M6 10.5V15c0 1.4 2.7 2.6 6 2.6s6-1.2 6-2.6v-4.5" /><path d="M22 8.5v5" /></svg>;
    case 'art': // vessel / pottery
      return <svg {...s}><path d="M8 4h8" /><path d="M9 4c0 2-2 3-2 7a5 5 0 0 0 10 0c0-4-2-5-2-7" /></svg>;
    case 'design': // pen nib
      return <svg {...s}><path d="M12 3 6 9l-2 8 8-2 6-6z" /><path d="m9 12 3 3" /><circle cx="13.5" cy="10.5" r="1.1" fill="currentColor" stroke="none" /></svg>;
    case 'ai': // sparkle
      return <svg {...s}><path d="M12 4c.6 4 1.8 5.2 6 6-4.2.8-5.4 2-6 6-.6-4-1.8-5.2-6-6 4.2-.8 5.4-2 6-6z" /></svg>;
    case 'cert': // medal
      return <svg {...s}><circle cx="12" cy="9" r="5" /><path d="M9 13.5 7.5 21 12 18.5 16.5 21 15 13.5" /></svg>;
    case 'arrow':
      return <svg width={size} height={size} viewBox="0 0 16 16" fill="none"><path d="M3 13L13 3M13 3H6M13 3V10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>;
    case 'doc':
      return <svg {...s}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><path d="M14 3v5h5" /></svg>;
    case 'linkedin':
      return <svg {...s}><rect x="3" y="3" width="18" height="18" rx="3" /><path d="M7 10v7M7 7v.01M11 17v-4a2 2 0 0 1 4 0v4M11 17v-7" /></svg>;
    default:return null;
  }
};

// Highlight helpers used inside copy
const H = ({ children }) => <span className="ab-hl">{children}</span>;
const Hi = ({ children }) => <span className="ab-hl-ink">{children}</span>;

const jobs = [
{
  co: 'Amazon Music',
  url: 'https://music.amazon.com/',
  role: 'UX Designer I → II',
  loc: 'California',
  dates: "Jun 2023 — Present",
  badge: 'Current',
  points: [
  <>Currently <H>lead designer</H> for in-app artist merchandise, owning the end-to-end shopping experience.</>,
  <>Defined <H>interaction design patterns for AI-driven experiences</H>, setting the bar for how intelligence surfaces across the app.</>,
  <><H>Launched</H> gamified marketing experiences, the TV Games app, and international long-form content, lifting acquisition, retention, and fandom.</>,
  <>Raised the bar on visual and motion design, keeping UX consistent and intuitive across devices, tiers, and content types.</>,
  <><Hi>Led</Hi> third-party events &amp; ticketing UX, redesigned the German Audioplays experience, and partnered with Luna Games to <Hi>redesign the Luna TV app</Hi>.</>]

},
{
  co: 'Amazon Music',
  url: 'https://music.amazon.com/',
  role: 'UX Design Intern',
  loc: 'California',
  dates: 'May 2022 — Aug 2022',
  points: [
  <>Redesigned the podcast listening experience and prototyped transcript improvements, grounded in <Hi>self-led user research</Hi>.</>]

},
{
  co: 'Airtel',
  url: 'https://www.airtel.in/',
  role: 'Senior UX Designer',
  loc: 'Gurugram',
  dates: 'Sep 2020 — Dec 2020',
  points: [
  <><Hi>Led</Hi> customer-acquisition design across mobile, TV, and broadband services.</>,
  <>Managed the design lifecycle from initiation to <Hi>launch</Hi> in partnership with cross-functional stakeholders.</>]

},
{
  co: 'Rivigo',
  url: 'https://www.rivigo.com/',
  role: 'UX Designer',
  loc: 'Gurugram',
  dates: 'Jun 2019 — Apr 2020',
  points: [
  <>Owned client- and customer-facing design deliverables across the product suite.</>,
  <>Designed digital <Hi>expense-management systems</Hi> used daily by truck drivers in the field.</>]

},
{
  co: 'Think Design',
  url: 'https://think.design/',
  role: 'UI/UX Designer',
  loc: 'New Delhi',
  dates: 'Jun 2018 — May 2019',
  points: [
  <><Hi>Led</Hi> interface design across client projects.</>,
  <>Improved visuals, navigation, content discovery, and information architecture for a TV app.</>]

},
{
  co: 'Freelance',
  role: 'UX Designer & Design Consultant',
  loc: 'Remote',
  dates: '2020 — 2021',
  points: [
  <>Designed web and mobile products for early-stage <Hi>EdTech startups</Hi>, from concept through delivery.</>]

}];


const skills = [
{ ic: 'skills', name: 'User Research & Testing' },
{ ic: 'design', name: 'Prototyping & Motion' },
{ ic: 'ai', name: 'Design Strategy & Vision' },
{ ic: 'collab', name: 'Cross-functional Collaboration' }];


const AboutPage = () => {
  const [scrollY, setScrollY] = React.useState(0);
  const [navHidden, setNavHidden] = React.useState(false);
  const [revealed, setRevealed] = React.useState(new Set());
  const rootRef = React.useRef(null);
  const lastY = React.useRef(0);

  // Robust reveal: bounding-box check on scroll + rAF (no IntersectionObserver dependency)
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const checkReveal = () => {
      const h = root.clientHeight;
      const add = [];
      root.querySelectorAll('[data-reveal]').forEach((el) => {
        const r = el.getBoundingClientRect();
        const rootTop = root.getBoundingClientRect().top;
        const relTop = r.top - rootTop;
        if (relTop < h * 0.92 && r.bottom - rootTop > 0) add.push(el.dataset.reveal);
      });
      if (add.length) setRevealed((prev) => {
        const next = new Set(prev);
        let changed = false;
        add.forEach((k) => {if (!next.has(k)) {next.add(k);changed = true;}});
        return changed ? next : prev;
      });
    };
    const onScroll = () => {
      const y = root.scrollTop;
      setScrollY(y);
      setNavHidden(y > lastY.current && y > 120);
      lastY.current = y;
      checkReveal();
    };
    root.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', checkReveal);
    // initial passes (after fonts/images settle)
    checkReveal();
    const t1 = setTimeout(checkReveal, 120);
    const t2 = setTimeout(checkReveal, 400);
    return () => {
      root.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', checkReveal);
      clearTimeout(t1);clearTimeout(t2);
    };
  }, []);

  return (
    <div ref={rootRef} className="pa-root ab-root">
      {/* NAV */}
      <nav className={`pa-nav ${navHidden ? 'is-hidden' : ''} ${scrollY > 40 ? 'is-scrolled' : ''}`}>
        <div className="pa-nav-inner">
          <a className="pa-mark" href={HOME}>
            <span className="pa-mark-avatar">
              <img className="pa-mark-photo" src="images/bhavya-portrait.jpg" alt="Bhavya Parashar" />
            </span>
            <span className="pa-mark-name">Bhavya Parashar</span>
          </a>
          <div className="pa-nav-links">
            <a href={`${HOME}#work`}>Work</a>
            <a href="about.html" className="pa-nav-link-end">About</a>
            <a href="arts.html">Art</a>
          </div>
        </div>
      </nav>

      {/* HERO */}
      <section className="ab-hero" id="top">
        <div className="ab-hero-grid">
          <div className="ab-hero-text">
            <span className="ab-eyebrow pa-mono" data-reveal="eb" data-on={revealed.has('eb')}>About</span>
            <h1 className="ab-h1" data-reveal="h1" data-on={revealed.has('h1')} style={{ '--reveal-delay': '60ms' }}>
              I'm Bhavya, I lead design <span className="ab-h1-accent">that ships.</span>
            </h1>
            <p className="ab-lede" data-reveal="lede" data-on={revealed.has('lede')} style={{ '--reveal-delay': '140ms' }}>
              A product designer with six years of experience in tech. I <strong>lead programs end-to-end</strong>, from vision to launch, and <strong>build with AI</strong> to move from idea to working prototype in hours.
            </p>
            <div className="ab-hero-facts" data-reveal="facts" data-on={revealed.has('facts')} style={{ '--reveal-delay': '220ms' }}>
              <span className="ab-fact">UX Designer, Amazon</span>
              <span className="ab-fact">California</span>
              <span className="ab-fact">Vibe-coder</span>
            </div>
            <div className="ab-hero-cta-row" data-reveal="cta" data-on={revealed.has('cta')} style={{ '--reveal-delay': '300ms' }}>
              <a href="resume.html" target="_blank" rel="noopener noreferrer" className="pa-cta pa-cta-primary"><Icon name="doc" size={15} /><span>Download résumé (PDF)</span></a>
              <a href="https://www.linkedin.com/in/bparashar96/" target="_blank" rel="noopener noreferrer" className="pa-cta pa-cta-ghost"><Icon name="linkedin" size={15} /><span>LinkedIn</span></a>
            </div>
          </div>
          <div className="ab-hero-photo" data-reveal="photo" data-on={revealed.has('photo')} style={{ '--reveal-delay': '120ms' }}>
            <div className="ab-photo-frame">
              <img src="images/bhavya-portrait.jpg" alt="Portrait of Bhavya Parashar" style={{ objectFit: "cover" }} />
              <div className="ab-photo-cap">
                <strong>Bhavya Parashar</strong>
                <span className="pa-mono">Product Designer</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WORK */}
      <div className="ab-band">
        <section className="ab-section" id="work">
          <header className="ab-section-head" data-reveal="work-head" data-on={revealed.has('work-head')}>
            <span className="ab-section-ic"><Icon name="work" /></span>
            <div>
              <h2 className="ab-section-title">Work Experience</h2>
            </div>
          </header>
          <div className="ab-work-list">
            {jobs.map((j, i) =>
            <article
              key={i}
              className={`ab-job ${j.feature ? 'ab-job-feature' : ''}`}
              data-reveal={`job-${i}`}
              data-on={revealed.has(`job-${i}`)}
              style={{ '--reveal-delay': `${Math.min(i, 4) * 60}ms` }}>
              
                <div className="ab-job-aside">
                  {j.url
                    ? <a className="ab-job-co" href={j.url} target="_blank" rel="noopener noreferrer">{j.co}</a>
                    : <span className="ab-job-co">{j.co}</span>}
                  <span className="ab-job-role">{j.role}</span>
                  <div className="ab-job-meta">
                    <span className="ab-job-dates">{j.dates}</span>
                    <span className="ab-job-loc">{j.loc}</span>
                  </div>
                  {j.badge && <span className="ab-badge"><span className="ab-fact-dot is-live"></span>{j.badge}</span>}
                </div>
                <ul className="ab-job-points">
                  {j.points.map((p, k) => <li key={k}>{p}</li>)}
                </ul>
              </article>
            )}
            <div className="ab-earlier" data-reveal="earlier" data-on={revealed.has('earlier')}>
              <span className="ab-earlier-label">Earlier</span>
              <span className="ab-earlier-item"><a href="https://www.2626.today/" target="_blank" rel="noopener noreferrer" className="ab-earlier-link">2626 Creative Studio</a> <span>· Graphic Design Intern, 2018</span></span>
              <span className="ab-earlier-sep">/</span>
              <span className="ab-earlier-item"><a href="https://www.ogilvy.com/" target="_blank" rel="noopener noreferrer" className="ab-earlier-link">Ogilvy</a> <span>· Creative Intern, 2017</span></span>
            </div>
          </div>
        </section>
      </div>

      {/* SKILLS */}
      <section className="ab-section" id="skills">
        <header className="ab-section-head" data-reveal="sk-head" data-on={revealed.has('sk-head')}>
          <span className="ab-section-ic"><Icon name="skills" /></span>
          <div>
            <h2 className="ab-section-title">Skills &amp; Tools</h2>
          </div>
        </header>
        <div className="ab-skills-grid">
          <div className="ab-skill-cards">
            {skills.map((s, i) =>
            <div key={i} className="ab-skill" data-reveal={`sk-${i}`} data-on={revealed.has(`sk-${i}`)} style={{ '--reveal-delay': `${i * 60}ms` }}>
                <span className="ab-skill-ic"><Icon name={s.ic} size={19} /></span>
                <span className="ab-skill-name">{s.name}</span>
              </div>
            )}
          </div>
          <div className="ab-tools" data-reveal="tools" data-on={revealed.has('tools')} style={{ '--reveal-delay': '120ms' }}>
            <div className="ab-tools-block">
              <span className="ab-tools-label"><Icon name="design" size={15} />Design</span>
              <div className="ab-chips">
                <span className="ab-chip">Figma</span>
                <span className="ab-chip">Adobe Creative Suite</span>
              </div>
            </div>
            <div className="ab-tools-block">
              <span className="ab-tools-label"><Icon name="ai" size={15} />AI &amp; Vibe-coding</span>
              <div className="ab-chips">
                <span className="ab-chip ab-chip-accent"><Icon name="ai" size={13} />Claude Code</span>
                <span className="ab-chip ab-chip-accent"><Icon name="ai" size={13} />Claude Design</span>
                <span className="ab-chip ab-chip-accent"><Icon name="ai" size={13} />Figma Make</span>
              </div>
            </div>
            <div className="ab-tools-block">
              <span className="ab-tools-label"><Icon name="cert" size={15} />Certificate</span>
              <div className="ab-chips">
                <span className="ab-chip">Vibe Coding: Rapid Prototyping with AI · EdX</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* EDUCATION */}
      <div className="ab-band">
        <section className="ab-section" id="education">
          <header className="ab-section-head" data-reveal="ed-head" data-on={revealed.has('ed-head')}>
            <span className="ab-section-ic"><Icon name="edu" /></span>
            <div>
              <h2 className="ab-section-title">Education</h2>
            </div>
          </header>
          <div className="ab-edu-grid">
            <div className="ab-edu" data-reveal="ed-0" data-on={revealed.has('ed-0')}>
              <span className="ab-edu-dates">Aug 2021 — May 2023</span>
              <span className="ab-edu-deg">M.S. Computer Graphics &amp; UX Design</span>
              <span className="ab-edu-school">Purdue University · Indiana, USA</span>
            </div>
            <div className="ab-edu" data-reveal="ed-1" data-on={revealed.has('ed-1')} style={{ '--reveal-delay': '80ms' }}>
              <span className="ab-edu-dates">Jul 2014 — May 2018</span>
              <span className="ab-edu-deg">Bachelor of Design</span>
              <span className="ab-edu-school">National Institute of Fashion Technology · India</span>
            </div>
          </div>
        </section>
      </div>

      {/* FOOTER */}
      <footer className="pa-footer" id="contact">
        <div className="pa-footer-cols">
          <div>
            <span className="pa-mono pa-foot-h6">Sitemap</span>
            <ul>
              <li><a href={`${HOME}#work`}>Work</a></li>
              <li><a href="#top">About</a></li>
              <li><a href="arts.html">Art</a></li>
            </ul>
          </div>
          <div>
            <span className="pa-mono pa-foot-h6">Contact me</span>
            <ul>
              <li><a href="mailto:bhavya.parashar96@gmail.com">Email ↗</a></li>
              <li><a href="https://www.linkedin.com/in/bparashar96/" target="_blank" rel="noopener noreferrer">LinkedIn ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="pa-footer-base">
          <span className="pa-foot-wordmark">Made with Claude Code and Claude Design, with a dash of human brain power.</span>
          <span className="pa-mono">© 2026 · Bhavya Parashar</span>
        </div>
      </footer>
    </div>);

};

window.AboutPage = AboutPage;