// home-sections.jsx — main home page sections (v2)

function Hero() {
  return (
    <section className="hero-section">
      <img className="hero-squiggle" src="assets/path-illustration-3.png" alt="" aria-hidden="true" />
      <div className="hero-grid">
        <div className="hero-text">
          <span className="eyebrow">Marketer · Creator · Speaker · Builder</span>
          <h1 className="h-display wordmark-display">
            <span className="wm-blue">Hannah</span><span className="wm-burgundy">Zhang.</span>
          </h1>
          <p className="hero-mission">
            I help ambitious 20- and 30-somethings build careers, businesses, and wealth across multiple lanes.
          </p>
          <p className="hero-sub">
            Based in NYC.
          </p>
          <div className="hero-ctas">
            <a className="btn primary" href="#contact">
              Work with me <span className="arrow"><IconArrow /></span>
            </a>
            <a className="btn ghost" href={SOCIAL.newsletter} target="_blank" rel="noopener">
              Subscribe to my newsletter
            </a>
          </div>
        </div>
        <div className="hero-photo-wrap">
          <div className="hero-photo">
            <img src="assets/photo-hannah-hero.jpg" alt="Hannah Zhang" />
          </div>
          <div className="hero-sticker">
            <span>NYC, May 2026</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Mission() {
  return (
    <section className="section mission-section" id="mission">
      <div className="section-inner">
        <div className="mission-grid">
          <div>
            <span className="eyebrow">My work</span>
            <h2 className="h-1">
              The old career playbook assumes one job, one path, one identity.
              {' '}
              <em className="blue">I think that's how you get stuck.</em>
            </h2>
          </div>
          <div className="mission-body">
            <p className="lead">
              I left investment banking and spent the years since building a nonlinear career across many lanes. <strong>Startup operator. B2B marketer. Creator. Writer. Speaker. AI builder.</strong>
            </p>
            <a className="link-arrow" href={SOCIAL.linkedin} target="_blank" rel="noopener">
              Connect with me on LinkedIn <IconArrow />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stats() {
  const stats = [
    { label: 'Total followers', value: '245K+', big: true },
    { label: 'Instagram · @itshannahzhang', value: '183K' },
    { label: 'LinkedIn · @hannahzhang0', value: '26K', badge: 'Top Voice' },
    { label: 'TikTok · @itshannahzhang', value: '31K' },
    { label: 'YouTube · @itshannahzhang', value: '5K' },
    { label: 'Newsletter · Nonlinear News', value: '15K+' },
    { label: 'Avg engagement rate', value: '5%+', accent: true },
  ];
  return (
    <section className="section stats-section">
      <img className="path-bg stats-path" src="assets/path-illustration-1.png" alt="" aria-hidden="true" />
      <div className="section-inner">
        <div className="stats-head stats-head-with-photo">
          <div>
            <span className="eyebrow">Reach</span>
            <h2 className="h-1">
              My audience is ambitious operators, creatives, and founders building <em className="blue">nonlinear</em> careers, businesses, and lives.
            </h2>
          </div>
          <div className="stats-photo">
            <img src="assets/photo-hannah-reach.jpg" alt="Hannah filming content" />
          </div>
        </div>
        <div className="stats-grid">
          {stats.map((s, i) => (
            <div key={i} className={'stat-card' + (s.big ? ' big' : '') + (s.accent ? ' accent' : '')}>
              <div className="stat-value">{s.value}</div>
              <div className="stat-label">
                {s.label}
                {s.badge && <span className="stat-badge">{s.badge}</span>}
              </div>
            </div>
          ))}
        </div>
        <p className="stats-foot">
          Full media kit available on request. <a href="mailto:hannah@careerhannah.com?subject=Media%20kit%20request">Request</a>.
        </p>
      </div>
    </section>
  );
}

function Partnerships() {
  // 12 brands, alphabetical
  const brands = [
    'Adobe', 'Amazon', 'Anthropic', 'Asana',
    'Fiverr', 'Grammarly', 'HubSpot', 'LinkedIn',
    'Microsoft', 'Notion', 'OpenAI', 'Perplexity',
  ];
  return (
    <section className="section partnerships-section">
      <div className="section-inner">
        <div className="partnerships-head">
          <span className="eyebrow">Partnerships</span>
          <h2 className="h-1">Brands I've <em>worked with.</em></h2>
          <p className="lead" style={{ marginTop: 24 }}>
            Selective brand partnerships that deliver real value to a discerning audience who trusts my recommendations.
          </p>
        </div>
        <div className="brand-strip">
          {brands.map((b, i) => (
            <div key={i} className="brand-tile">{b}</div>
          ))}
        </div>
        <div style={{ marginTop: 40 }}>
          <a className="btn primary" href="brand-partnerships.html">
            See full partnerships page <span className="arrow"><IconArrow /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Speaking() {
  const past = [
    'Draper Startup House', 'Women Who Get It',
    'Gen Z Tea', 'MOXIEPOD', 'Get Hired',
  ];
  const topics = [
    'Personal branding for professionals and founders (LinkedIn Top Voice)',
    'Building a 5-9 alongside a 9-5',
    'Career strategy in the age of AI',
    'Creator-led marketing for tech and startups',
  ];
  return (
    <section className="section dark speaking-section">
      <div className="section-inner">
        <div className="speaking-grid">
          <div className="speaking-photo">
            <img src="assets/photo-hannah-talks.jpg" alt="Hannah speaking" />
          </div>
          <div>
            <span className="eyebrow">Speaking</span>
            <h2 className="h-1">Talks, panels, podcasts, and <em style={{ color: 'var(--hz-yellow)' }}>workshops.</em></h2>
            <p className="lead" style={{ marginTop: 22, color: 'rgba(255,251,243,0.85)' }}>
              I speak about personal branding, creator-led marketing, and how AI is rewiring early-career work, mostly at conferences, off-sites, universities, and on podcasts.
            </p>
            <div className="topics-list">
              {topics.map((t, i) => (
                <div key={i} className="topic-row">
                  <span className="topic-num">0{i + 1}</span>
                  <span className="topic-label">{t}</span>
                </div>
              ))}
            </div>
            <div className="past-engagements">
              <span className="eyebrow" style={{ color: 'var(--hz-yellow)', marginBottom: 12 }}>Past engagements</span>
              <p style={{ color: 'rgba(255,251,243,0.9)', fontSize: 16, lineHeight: 1.7, maxWidth: 600 }}>
                {past.join(' · ')}
              </p>
            </div>
            <a className="btn ghost-light" href="#contact" style={{ marginTop: 28 }}>
              Contact me <span className="arrow"><IconArrow /></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Mission, Stats, Partnerships, Speaking });