// ============ HOME PAGE ============
function Home({ onNav }) {
  useReveal();
  const cases = [
    {
      label: 'AI Agent Design',
      year: '2026',
      title: 'Imprint',
      desc: 'Helping non-technical teams set up AI agents in plain language. Making powerful tools accessible for everyone.',
      tags: ['AI', 'Conversational UI', 'Onboarding', 'Figma'],
      thumb: 'thumb-imprint',
      thumbTag: 'In progress',
    },
    {
      label: 'Data Visualisation, SaaS Design',
      year: '2025',
      title: 'Stackd',
      desc: "SaaS costs spiral fast when no one has the full picture. Stackd visualises your entire stack to see every tool your company pays for, what's being used, what's overlapping, and where the waste is.",
      tags: ['Data Viz', 'SaaS', 'Design Systems'],
      thumb: 'thumb-tbc1',
      thumbTag: 'Concept',
    },
    {
      label: 'Mobile, UX Design',
      year: '2025',
      title: 'Nudge',
      desc: 'A habit tracker with no streaks and no rigid schedules, just gentle nudges forward. Built with ADHD in mind, designed for anyone who needs a push.',
      tags: ['Mobile', 'Interaction Design', 'Accessibility'],
      thumb: 'thumb-tbc2',
      thumbTag: 'Concept',
    },
  ];

  const experience = [
    {
      label: 'End-to-End Product Design, Enterprise',
      year: '2026',
      title: 'Water Management Platform',
      desc: 'Hydrogeologists were juggling 3 broken tools across 7 mine sites. I led end-to-end design to consolidate them into one, taking the SUS score from the 50s to the 80s.',
      tags: ['User Research', 'Usability Testing', 'Figma', 'Responsive Design', 'WCAG'],
    },
    {
      label: 'UI Design, Data Visualisation',
      year: '2025',
      title: 'Custom Chart Suite',
      desc: 'Hours of manual Excel work every week. I designed a custom chart suite including complex line charts, bar charts, and treemaps, making critical data visible and readable in real time for hydrogeologists.',
      tags: ['Interaction Design', 'Data Visualisation', 'Figma', 'Design Systems'],
    },
    {
      label: 'UI Design, Internal Tooling',
      year: '2024',
      title: 'Operational Dashboards',
      desc: 'Complex failures were going undetected for weeks. I designed dashboards that turned dense operational data into clear, readable visuals, cutting detection time from weeks to daily.',
      tags: ['Dashboard Design', 'Data Visualisation', 'Figma'],
    },
  ];

  const bubbles = ['Figma Make', 'MCP + Figma', 'Claude Code', 'Figma AI Features', 'Prompt to UI', 'Claude for Design', 'Maze', 'AI Research Synthesis', 'Figma Prototyping'];

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="orbs">
          <div className="orb o1"></div>
          <div className="orb o2"></div>
          <div className="orb o3"></div>
          <div className="orb o4"></div>
        </div>
        <div className="shell hero-grid">
          <div className="hero-left">
            <div className="hero-marker reveal">
              <span className="mono">(01)</span>
              <span className="hero-marker-line"></span>
              <span className="mono">Portfolio · 2026</span>
            </div>
            <div className="hero-greet reveal">
              <svg className="spark" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <defs>
                  <linearGradient id="hg-bloom" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse">
                    <stop offset="0" stopColor="#C9B5F2" />
                    <stop offset="1" stopColor="#EFA6BF" />
                  </linearGradient>
                </defs>
                <g transform="translate(8 8)">
                  <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#hg-bloom)" />
                  <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#hg-bloom)" transform="rotate(72)" />
                  <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#hg-bloom)" transform="rotate(144)" />
                  <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#hg-bloom)" transform="rotate(216)" />
                  <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#hg-bloom)" transform="rotate(288)" />
                </g>
              </svg>
              Hi, I'm
            </div>
            <h1 className="hero-name reveal">
              <span className="hero-name-vicky">Vicky</span>
              <span className="hero-name-tran serif">Tran</span>
            </h1>
            <h2 className="hero-tagline reveal">
              A <strong>Product Designer</strong> where thinking and making <span className="serif" style={{fontStyle:'italic'}}>finally</span> meet.
            </h2>
            <p className="hero-sub reveal">
              Engineering taught me how things get built. Business analysis taught me why. Design is where I finally get to decide what.
            </p>
            <div className="hero-ctas reveal">
              <button className="btn-pill" onClick={()=>onNav('contact')}>Get in touch <span>→</span></button>
              <button className="btn-ghost" onClick={()=>onNav('about')}>About me</button>
            </div>
          </div>

          <div className="hero-right reveal">
            <div className="hero-portrait">
              <div className="hero-portrait-inner">
                <div className="placeholder-mono">[ portrait photo ]</div>
                <div className="hero-portrait-caption">
                  <span className="mono">vicky · brisbane, au</span>
                </div>
              </div>
              <div className="hero-portrait-tape"></div>
            </div>
            <div className="hero-badge" aria-hidden="true">
              <svg viewBox="0 0 200 200">
                <defs>
                  <path id="hb-circle" d="M 100, 100 m -78, 0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0" />
                </defs>
                <text fontSize="13" letterSpacing="3" fontWeight="600" fill="#2A2235">
                  <textPath href="#hb-circle">
                    ✦ AVAILABLE FOR HIRE  ✦ PRODUCT DESIGNER  ✦ BRISBANE  ✦ AVAILABLE FOR HIRE  ✦ PRODUCT DESIGNER  ✦ BRISBANE  
                  </textPath>
                </text>
              </svg>
              <div className="hero-badge-core">
                <svg viewBox="0 0 40 40" fill="none">
                  <defs>
                    <linearGradient id="hb-bloom" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse">
                      <stop offset="0" stopColor="#C9B5F2" />
                      <stop offset="1" stopColor="#EFA6BF" />
                    </linearGradient>
                  </defs>
                  <g transform="translate(20 20)">
                    <path d="M0 -16 C 6 -10, 6 -6, 0 0 C -6 -6, -6 -10, 0 -16 Z" fill="url(#hb-bloom)" />
                    <path d="M0 -16 C 6 -10, 6 -6, 0 0 C -6 -6, -6 -10, 0 -16 Z" fill="url(#hb-bloom)" transform="rotate(72)" />
                    <path d="M0 -16 C 6 -10, 6 -6, 0 0 C -6 -6, -6 -10, 0 -16 Z" fill="url(#hb-bloom)" transform="rotate(144)" />
                    <path d="M0 -16 C 6 -10, 6 -6, 0 0 C -6 -6, -6 -10, 0 -16 Z" fill="url(#hb-bloom)" transform="rotate(216)" />
                    <path d="M0 -16 C 6 -10, 6 -6, 0 0 C -6 -6, -6 -10, 0 -16 Z" fill="url(#hb-bloom)" transform="rotate(288)" />
                  </g>
                </svg>
              </div>
            </div>
          </div>
        </div>

        <div className="hero-marquee" aria-hidden="true">
          <div className="hero-marquee-track">
            {Array.from({length: 3}).map((_, k) => (
              <div key={k} className="hero-marquee-group">
                <span>Currently obsessed with</span>
                <span className="hero-marquee-dot">✦</span>
                <span className="serif">vietnamese salted coffee</span>
                <span className="hero-marquee-dot">✦</span>
                <span>making jewellery</span>
                <span className="hero-marquee-dot">✦</span>
                <span className="serif">figma make</span>
                <span className="hero-marquee-dot">✦</span>
                <span>claude code</span>
                <span className="hero-marquee-dot">✦</span>
                <span className="serif">coconut matcha cloud</span>
                <span className="hero-marquee-dot">✦</span>
                <span>teaching myself to sew</span>
                <span className="hero-marquee-dot">✦</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CASE STUDIES */}
      <section>
        <div className="shell">
          <div className="reveal">
            <div className="eyebrow">Selected work</div>
            <h2 className="section-title">Case studies, the long version.</h2>
            <p className="section-sub">A closer look at a few projects I've been working on. More writeups coming soon.</p>
          </div>
          <div className="case-grid">
            {cases.map((c, i) => (
              <a key={i} className="case-tile reveal" href="#" onClick={e=>e.preventDefault()}>
                <div className="shimmer"></div>
                <div>
                  <div className="case-meta">
                    <span>{c.label}</span>
                    <span className="mono">{c.year}</span>
                  </div>
                  <h3 className="case-title">{c.title}</h3>
                  <p className="case-desc">{c.desc}</p>
                  <div className="chip-group">
                    {c.tags.map((t, j) => <span key={j} className="chip">{t}</span>)}
                  </div>
                </div>
                <div className={'case-thumb ' + c.thumb}>
                  <span className="thumb-tag">{c.thumbTag}</span>
                  <div className="thumb-label">
                    <span>{'> case-thumbnail'}</span>
                    <span>{(i+1).toString().padStart(2,'0')}/03</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* EXPERIENCE */}
      <section>
        <div className="shell">
          <div className="reveal">
            <div className="eyebrow">Highlights</div>
            <h2 className="section-title">From the field</h2>
            <p className="section-sub">A small snapshot of what I have worked on.</p>
          </div>
          <div className="exp-list">
            {experience.map((e, i) => (
              <div key={i} className="exp-card reveal">
                <div className="case-meta">
                  <span>{e.label}</span>
                  <span className="mono">{e.year}</span>
                </div>
                <h3 className="exp-title">{e.title}</h3>
                <p className="exp-desc">{e.desc}</p>
                <div className="chip-group">
                  {e.tags.map((t, j) => <span key={j} className="chip">{t}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AI SECTION */}
      <section className="section-ai">
        <div className="shell">
          <div className="ai-section">
            <div className="ai-header reveal">
              <div className="eyebrow" style={{justifyContent:'center'}}>AI x Design</div>
              <h2 className="section-title">Curious about AI and design?</h2>
              <p className="section-sub" style={{margin:'4px auto 0'}}>
                <span className="serif" style={{fontSize:'22px', color:'var(--ink)'}}>Well, so am I.</span><br />
                Things I am currently into.
              </p>
            </div>
            <div className="shell">
              <BubbleStage items={bubbles} />
            </div>
          </div>
        </div>
      </section>

      <Footer onNav={onNav} />
    </main>
  );
}

// ============ ABOUT ============
function FunFacts() {
  const facts = [
    {
      n: '8',
      label: 'Countries visited',
      text: "Countries I have visited. 8 and counting, Japan has my heart. Still waiting to see snow for the first time.",
      tag: 'travel',
      art: 'fact-art-travel',
    },
    {
      n: '50+',
      label: 'Bag charms handmade',
      text: "Bag charms hand made and given to friends and family. Making things for the people I love is my love language.",
      tag: 'crafts',
      art: 'fact-art-crafts',
    },
    {
      n: '40+',
      label: 'Playlists curated',
      text: "Spotify playlists created. A good playlist is non negotiable for a gym session or a run.",
      tag: 'music',
      art: 'fact-art-music',
    },
    {
      n: '33',
      label: 'Cafés bookmarked',
      text: "Cafes bookmarked in Google Maps. Currently on a mission to find the most perfect cappuccino and Vietnamese salted cream coffee in Brisbane.",
      tag: 'coffee',
      art: 'fact-art-coffee',
    },
  ];
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setI((i + 1) % facts.length), 5500);
    return () => clearTimeout(t);
  }, [i, paused, facts.length]);

  return (
    <div className="funfacts" onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}>
      <div className="funfacts-head">
        <div className="eyebrow">A few fun facts</div>
        <div className="funfacts-pager">
          <span className="mono">{(i+1).toString().padStart(2,'0')}</span>
          <span className="mono funfacts-pager-divider">/</span>
          <span className="mono">{facts.length.toString().padStart(2,'0')}</span>
        </div>
      </div>
      <div className="funfacts-stage">
        {facts.map((f, idx) => (
          <div key={idx} className={'funfact' + (idx === i ? ' active' : '')} aria-hidden={idx !== i}>
            <div className={'funfact-art ' + f.art}>
              <div className="placeholder-mono">[ {f.tag} photo ]</div>
              <span className="funfact-tape"></span>
            </div>
            <div className="funfact-body">
              <div className="mono funfact-label">{f.label}</div>
              <div className="funfact-number">{f.n}</div>
              <p className="funfact-text">{f.text}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="funfacts-dots" role="tablist">
        {facts.map((_, idx) => (
          <button key={idx}
            className={'funfacts-dot' + (idx === i ? ' active' : '')}
            onClick={()=>setI(idx)}
            aria-label={'Show fun fact ' + (idx+1)}>
            <span className="funfacts-dot-fill" style={{animationPlayState: (idx === i && !paused) ? 'running' : 'paused'}}></span>
          </button>
        ))}
      </div>
    </div>
  );
}

function About({ onNav }) {
  useReveal();
  const skillGroups = [
    {label: 'Design', items: ['Figma','Figma Make','High-fidelity UI','Interaction Design','Prototyping','User Flows','Responsive Design','Design Systems','Figma Prototyping']},
    {label: 'UX Methods', items: ['User Research','Usability Testing','Heuristic Evaluation','Information Architecture','Accessibility (WCAG)','Affinity Mapping','Journey Mapping','Competitive Analysis','Persona Creation','A/B Testing','Prototype Testing']},
    {label: 'Tools and Methods', items: ['Agile / Scrum','Backlog Management','User Story Writing','Miro','ADO','Cross-functional Collaboration','Claude','Claude Code','Maze']},
  ];

  return (
    <main>
      {/* INTRO */}
      <section className="about-intro">
        <div className="orbs">
          <div className="orb o1"></div>
          <div className="orb o3"></div>
        </div>
        <div className="shell about-intro-grid">
          <div className="about-portrait-wrap reveal">
            <div className="hero-portrait">
              <div className="hero-portrait-inner">
                <div className="placeholder-mono">[ portrait photo ]</div>
                <div className="hero-portrait-caption">
                  <span className="mono">vicky · brisbane, au</span>
                </div>
              </div>
              <div className="hero-portrait-tape"></div>
            </div>
          </div>
          <div className="about-intro-body reveal">
            <div className="hero-marker">
              <span className="mono">(02)</span>
              <span className="hero-marker-line"></span>
              <span className="mono">About me</span>
            </div>
            <p className="about-lead">
              I am a passionate <span className="serif" style={{fontStyle:'italic'}}>Product Designer</span> driven by <strong>curiosity</strong> and <strong>creativity</strong>. While I am early in my professional journey, my love for design runs deep, from shaping user experiences to crafting the <span className="serif" style={{fontStyle:'italic'}}>smallest</span> of details.
            </p>
            <p className="about-lead about-lead-mute">
              I thrive in teams where ideas flow freely, feedback is welcomed, and there is room to grow.
            </p>
          </div>
        </div>
      </section>

      {/* FUN FACTS */}
      <section className="about-facts-section">
        <div className="shell">
          <div className="reveal" style={{marginBottom: 36}}>
            <div className="eyebrow">Beyond the screen</div>
            <h2 className="section-title">A few <span className="serif" style={{fontStyle:'italic'}}>fun</span> facts.</h2>
            <p className="section-sub">A small snapshot of what I get up to when I am not designing.</p>
          </div>
          <div className="reveal">
            <FunFacts />
          </div>
        </div>
      </section>

      {/* SKILLS */}
      <section className="about-skills-section">
        <div className="shell">
          <div className="reveal" style={{marginBottom: 32}}>
            <div className="eyebrow">Toolkit</div>
            <h2 className="section-title">Skills and tools.</h2>
            <p className="section-sub">The methods and software I reach for most often.</p>
          </div>
          <div className="skills-grid">
            {skillGroups.map((row, i) => (
              <div key={i} className="skills-card reveal">
                <div className="skills-card-num mono">0{i+1}</div>
                <div className="skills-card-label">{row.label}</div>
                <div className="chip-group">
                  {row.items.map((t,j) => <span key={j} className="chip">{t}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer onNav={onNav} />
    </main>
  );
}

// ============ RESUME ============
function Resume({ onNav }) {
  useReveal();
  const roles = [
    {
      co: 'Rio Tinto', title: 'UI/UX Product Designer', date: 'Feb 2025 – Present · Brisbane',
      bullets: [
        'Consolidated 3 fragmented tools into a single water management platform across 7 mine sites, taking the SUS score from the 50s to the 80s.',
        'Led end-to-end design across multiple features including user interviews, Figma prototypes, usability testing, and iteration, ensuring every solution reflected how hydrogeologists actually work.',
        'Designed responsive desktop and tablet layouts maintaining WCAG colour standards, enabling field workers to log downtimes, view live updates, and access files from the field.',
        'Replaced hours of manual Excel work by designing a custom chart suite built directly into the platform, making bore downtimes visible in real time.',
      ]
    },
    {
      co: 'Rio Tinto', title: 'Business Analyst', date: 'Aug 2024 – Feb 2025 · Brisbane',
      bullets: [
        'Conducted discovery sessions with end users, synthesising findings into features that reflected real needs, growing platform adoption from 40 to 200+ active users.',
        'Built a structured feedback system that consolidated and categorised user input, cutting duplicate support tickets by 70%.',
        'Wrote clear user stories and epics, facilitated backlog refinement, and applied estimation techniques including Planning Poker and Fibonacci Sequence.',
        'Facilitated collaborative workshops and presented current and future state workflows using Miro and Figma.',
      ]
    },
    {
      co: 'Rio Tinto', title: 'Software Engineer', date: 'Feb 2024 – Aug 2024 · Brisbane',
      bullets: [
        'Built real-time monitoring dashboards for Logic Apps and APIs using SQL, reducing failure detection from weeks to daily.',
        'Automated .NET version updates and built CI/CD templates, reducing manual effort by 80% and improving deployment efficiency.',
        'Implemented API security using OAuth and subscription keys, ensuring compliance and preventing unauthorised access.',
      ]
    },
    {
      co: 'Deloitte', title: 'Undergraduate Cloud Engineer', date: 'Nov 2022 – Sep 2023 · Brisbane',
      bullets: [
        'Analysed cloud infrastructure costs across AWS and Azure, identifying opportunities to reduce client operational costs by 15%.',
        'Resolved API tickets and automated workflows using MuleSoft and Java, reducing manual interventions.',
      ]
    },
    {
      co: 'Swyftx', title: 'Software Engineering Intern', date: 'Jun 2022 – Jul 2022 · Brisbane',
      bullets: [
        'Co-built an internal events platform with Flask and React, consolidating 5 separate tools into one.',
        'Led usability testing and design iteration based on staff feedback, improving platform usability and adoption.',
      ]
    },
    {
      co: 'UQCS Hackathon', title: 'Team Lead', date: '2022',
      bullets: [
        'Led a team to build a real-time collaboration platform with video calling, live multi-user code editing, and LaTeX support.',
        'Won 1st place in the People\u2019s Choice category.',
      ]
    },
  ];

  return (
    <main>
      <section style={{paddingTop:140, paddingBottom:60}}>
        <div className="shell">
          <div className="resume-head reveal">
            <div>
              <div className="eyebrow">Resume</div>
              <h1 style={{margin:'12px 0 0', fontSize:'56px', fontWeight:700, letterSpacing:'-0.03em', lineHeight:1}}>Vicky Tran</h1>
              <div className="subtitle">Product Designer · Brisbane</div>
            </div>
            <button className="btn-pill" onClick={()=>window.print()}>Download PDF <span>↓</span></button>
          </div>

          <div className="resume-body">
            <div>
              <div className="resume-section-title">Experience</div>
              {roles.map((r, i) => (
                <div key={i} className="role reveal">
                  <div className="role-header">
                    <div className="role-title">{r.title} <span className="at">at {r.co}</span></div>
                    <div className="role-meta">{r.date}</div>
                  </div>
                  <ul className="role-bullets">
                    {r.bullets.map((b, j) => <li key={j}>{b}</li>)}
                  </ul>
                </div>
              ))}

              <div className="resume-section-title" style={{marginTop:40}}>Education</div>
              <div className="role">
                <div className="role-header">
                  <div className="role-title">Bachelor of Computer Science <span className="at">at The University of Queensland</span></div>
                  <div className="role-meta">2020 – 2023</div>
                </div>
              </div>
              <div className="role">
                <div className="role-header">
                  <div className="role-title">UX Design Certificate <span className="at">at Google</span></div>
                  <div className="role-meta">Nov 2025</div>
                </div>
              </div>
            </div>

            <aside className="resume-side">
              <div className="resume-side-card">
                <h4>Design tools</h4>
                <div className="chip-group">
                  {['Figma','Figma Make','High-fidelity UI','Prototyping','Design Systems'].map((t,i)=><span key={i} className="chip">{t}</span>)}
                </div>
              </div>
              <div className="resume-side-card">
                <h4>UX Methods</h4>
                <div className="chip-group">
                  {['User Research','Usability Testing','Heuristic Evaluation','Information Architecture','Accessibility (WCAG)'].map((t,i)=><span key={i} className="chip">{t}</span>)}
                </div>
              </div>
              <div className="resume-side-card">
                <h4>Technical</h4>
                <div className="chip-group">
                  {['SQL','CI/CD','AWS and Azure','ADO','Miro','Agile / Scrum'].map((t,i)=><span key={i} className="chip">{t}</span>)}
                </div>
              </div>
              <div className="resume-side-card">
                <h4>Contact</h4>
                <div style={{fontSize:14, color:'var(--ink-soft)', lineHeight:1.8}}>
                  <div>vickyyttran@gmail.com</div>
                  <div>0431 967 888</div>
                  <div>linkedin.com/in/vicky-t-tran</div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>
      <Footer onNav={onNav} />
    </main>
  );
}

// ============ CONTACT ============
function Contact({ onNav }) {
  useReveal();
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Please add your name.';
    if (!form.email.trim()) errs.email = 'Please add your email.';
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = 'That email looks off.';
    if (!form.message.trim()) errs.message = 'A message would be lovely.';
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  return (
    <main>
      <section style={{paddingTop:140, paddingBottom:80}}>
        <div className="orbs">
          <div className="orb o2"></div>
          <div className="orb o4"></div>
        </div>
        <div className="shell contact-grid">
          <div className="reveal">
            <div className="eyebrow">Get in touch</div>
            <h1 className="contact-heading">Let's <span className="serif gradient-text">work</span> together.</h1>
            <p className="contact-sub">Open to roles in product, UX, and UI design. If it feels like a fit, I would love to hear from you.</p>
            <div className="contact-links">
              <a className="contact-link" href="mailto:vickyyttran@gmail.com">
                <span className="ic">✉</span>
                <div>
                  <div className="lbl">Email</div>
                  <div className="val">vickyyttran@gmail.com</div>
                </div>
              </a>
              <a className="contact-link" href="tel:0431967888">
                <span className="ic">☎</span>
                <div>
                  <div className="lbl">Phone</div>
                  <div className="val">0431 967 888</div>
                </div>
              </a>
              <a className="contact-link" href="https://linkedin.com/in/vicky-t-tran" target="_blank" rel="noreferrer">
                <span className="ic">in</span>
                <div>
                  <div className="lbl">LinkedIn</div>
                  <div className="val">linkedin.com/in/vicky-t-tran</div>
                </div>
              </a>
            </div>
          </div>

          <div className="form-card reveal">
            {!sent ? (
              <form onSubmit={submit} noValidate>
                <div className="form-field">
                  <label>Name <span className="req">*</span></label>
                  <input type="text" value={form.name} onChange={e=>setForm({...form, name: e.target.value})} placeholder="Full name" />
                  {errors.name && <div className="err">{errors.name}</div>}
                </div>
                <div className="form-field">
                  <label>Email <span className="req">*</span></label>
                  <input type="email" value={form.email} onChange={e=>setForm({...form, email: e.target.value})} placeholder="you@somewhere.com" />
                  {errors.email && <div className="err">{errors.email}</div>}
                </div>
                <div className="form-field">
                  <label>Message <span className="req">*</span></label>
                  <textarea value={form.message} onChange={e=>setForm({...form, message: e.target.value})} placeholder="Tell me about the role, project, or just say hi" />
                  {errors.message && <div className="err">{errors.message}</div>}
                </div>
                <button type="submit" className="btn-pill form-submit">Send message <span>→</span></button>
              </form>
            ) : (
              <div className="form-success">
                <div className="form-success-mark">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12.5L10 17.5L19 7.5" stroke="#5A3F8C" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em', marginBottom:10}}>Message sent!</div>
                <div style={{fontSize:15, color:'var(--ink-soft)', maxWidth: '36ch', margin:'0 auto'}}>
                  Thanks for reaching out. I will get back to you within 1 to 2 business days.
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
      <Footer onNav={onNav} />
    </main>
  );
}

// ============ APP ROOT ============
function App() {
  const [page, setPage] = React.useState('home');

  const nav = (id) => {
    setPage(id);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  React.useEffect(() => {
    document.body.classList.toggle('on-contact', page === 'contact');
  }, [page]);

  return (
    <>
      <Nav page={page} onNav={nav} />
      {page === 'home'    && <Home onNav={nav} />}
      {page === 'about'   && <About onNav={nav} />}
      {page === 'resume'  && <Resume onNav={nav} />}
      {page === 'contact' && <Contact onNav={nav} />}
      {page !== 'contact' && <StickyContact onClick={()=>nav('contact')} />}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);