// press-page.jsx — text list, no thumbnails (v2)

function PressHero() {
  return (
    <section className="bp-hero">
      <img className="bp-hero-squiggle" src="assets/path-illustration-6.png" alt="" aria-hidden="true" />
      <div className="bp-hero-inner">
        <a className="back-link" href="index.html">
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><IconArrow /></span>
          Back to home
        </a>
        <span className="eyebrow">Press &amp; speaking</span>
        <h1 className="h-display">Press &amp; <em className="blue">speaking.</em></h1>
        <p className="bp-sub">Coverage, podcasts, panels, and talks.</p>
      </div>
    </section>
  );
}

function PressList() {
  const items = [
    { outlet: 'M7A', title: 'Building a personal brand after business school', date: 'January 2026', cta: 'Watch', href: 'https://www.youtube.com/watch?v=tkjYsUSYUsc' },
    { outlet: 'Gen Z Tea', title: 'Personal branding panel speaker', date: 'August 2025', cta: 'View', href: 'https://partiful.com/e/k5UZtIJ6fLGlq9WCNMuI' },
    { outlet: 'Draper Startup House', title: 'Panel host', date: 'July 2025', cta: 'View', href: 'https://www.linkedin.com/posts/hannahzhang0_how-did-you-pivot-from-finance-to-a-tech-activity-7341796981528297473-29jh' },
    { outlet: 'MOXIEPOD', title: 'How to pivot your career into tech', date: 'July 2025', cta: 'Listen', href: 'https://podcasts.apple.com/us/podcast/ep-06-how-to-pivot-your-career-into-tech-and-should/id1818069996?i=1000717285851' },
    { outlet: 'Women Who Get It', title: 'Panel speaker', date: 'March 2025', cta: 'View', href: 'https://womenwhogetit.com/fail-better-the-art-of-imperfect-progress-nyc/' },
    { outlet: 'Forbes', title: 'How to answer behavioral interview questions as a career switcher', date: 'March 2025', cta: 'Read', href: 'https://www.forbes.com/sites/juliakorn/2025/03/27/how-to-answer-behavioral-interview-questions-as-a-career-switcher/' },
    { outlet: 'Get Hired', title: 'Podcast guest', date: 'April 2025', cta: 'Listen', href: 'https://open.spotify.com/show/73upvJWtDzq7RjEiMp0ESS' },
  ];
  return (
    <section className="section press-page-section">
      <div className="section-inner">
        <ul className="press-list">
          {items.map((it, i) => (
            <li key={i} className="press-row">
              <a className="press-row-link" href={it.href} target="_blank" rel="noopener">
                <span className="pr-outlet">{it.outlet}</span>
                <span className="pr-title">{it.title}</span>
                <span className="pr-date">{it.date}</span>
                <span className="pr-cta">{it.cta} <IconArrow /></span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function PressCTA() {
  return (
    <section className="section dark bp-cta-section">
      <div className="section-inner" style={{ textAlign: 'center' }}>
        <span className="eyebrow">Get in touch</span>
        <h2 className="h-1" style={{ color: 'var(--hz-cream)' }}>
          For press, podcasts, and <em style={{ color: 'var(--hz-yellow)' }}>speaking.</em>
        </h2>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
          <a className="btn primary" href="mailto:hannah@careerhannah.com?subject=Press%20inquiry">
            Press inquiry <span className="arrow"><IconArrow /></span>
          </a>
          <a className="btn ghost-light" href="mailto:hannah@careerhannah.com?subject=Speaking%20inquiry">
            Speaking inquiry
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PressHero, PressList, PressCTA });