// home-sections-2.jsx — press list, newsletter (with featured issue), contact (4 lanes, no plain email)

function Press() {
  const items = [
    { outlet: 'CAPS LOCK', title: 'How To Build a Fulfilling Career and NOT Get Replaced by AI', date: 'March 2026', cta: 'Watch', href: 'https://www.youtube.com/watch?v=0qMabbUNeQg' },
    { 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: 'M7A', title: 'Building a personal brand after business school', date: 'January 2026', cta: 'Watch', href: 'https://www.youtube.com/watch?v=tkjYsUSYUsc' },
    { outlet: 'Get Hired', title: 'Podcast guest', date: 'April 2025', cta: 'Listen', href: 'https://open.spotify.com/show/73upvJWtDzq7RjEiMp0ESS' },
  ];
  return (
    <section className="section press-section">
      <div className="section-inner">
        <div className="press-head">
          <div>
            <span className="eyebrow">Press</span>
            <h2 className="h-1">Recent <em>coverage.</em></h2>
          </div>
          <a className="btn ghost" href="press.html">
            See all press <span className="arrow"><IconArrow /></span>
          </a>
        </div>
        <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 Newsletter() {
  return (
    <section className="section newsletter-section" id="newsletter">
      <div className="section-inner">
        <div className="newsletter-card">
          <div className="newsletter-content">
            <span className="eyebrow" style={{ color: 'var(--hz-yellow)', opacity: 1 }}>Writing</span>
            <h2 className="h-1" style={{ color: 'var(--hz-cream)' }}>
              Nonlinear <em style={{ color: 'var(--hz-yellow)' }}>News.</em>
            </h2>
            <p className="lead" style={{ color: 'rgba(255,251,243,0.88)', marginTop: 22 }}>
              A weekly newsletter on personal branding, behind-the-scenes of building as a creatorpreneur, and career strategy for the ambitious.
            </p>
            <p style={{ color: 'rgba(255,251,243,0.7)', fontSize: 15, marginTop: 12 }}>
              <strong style={{ color: 'var(--hz-cream)' }}>15,000+ readers</strong> in finance, tech, and startups.
            </p>
            <a className="btn primary" href={SOCIAL.newsletter} target="_blank" rel="noopener" style={{ marginTop: 28 }}>
              Subscribe at nonlinearnews.com <span className="arrow"><IconArrow /></span>
            </a>
          </div>
          <div className="newsletter-feature">
            <div className="nf-tag">Latest issue · May 2026</div>
            <h3 className="h-3 nf-title">
              How I grew 70K followers in 4 months as a 5-9 creatorpreneur
            </h3>
            <a className="nf-link" href="https://nonlinearnews.com/p/how-i-grew-70k-followers-in-4-months" target="_blank" rel="noopener">
              Read it <IconArrow />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const lanes = [
    {
      title: 'Brand partnerships',
      sub: 'Sponsorships, integrations, ongoing partnerships.',
      cta: 'Partnership inquiry',
      href: 'mailto:hannah@careerhannah.com?subject=Partnership%20inquiry',
    },
    {
      title: 'Press',
      sub: 'Quotes, interviews, podcast guesting.',
      cta: 'Press inquiry',
      href: 'mailto:hannah@careerhannah.com?subject=Press%20inquiry',
    },
    {
      title: 'Speaking',
      sub: 'Conferences, company off-sites, universities, panels, podcasts.',
      cta: 'Speaking inquiry',
      href: 'mailto:hannah@careerhannah.com?subject=Speaking%20inquiry',
    },
    {
      title: 'Everything else',
      sub: "General questions, collaborations, anything that doesn't fit above.",
      cta: 'Get in touch',
      href: 'mailto:hannah@careerhannah.com?subject=General%20inquiry',
    },
  ];
  return (
    <section className="section dark contact-section" id="contact">
      <img className="path-bg contact-path" src="assets/path-illustration-5.png" alt="" aria-hidden="true" />
      <div className="section-inner">
        <div className="contact-head contact-head-with-photo">
          <div>
            <span className="eyebrow">Contact</span>
            <h2 className="h-display" style={{ color: 'var(--hz-cream)' }}>
              Let's <em style={{ color: 'var(--hz-yellow)' }}>work together.</em>
            </h2>
            <p className="lead" style={{ color: 'rgba(255,251,243,0.85)', maxWidth: 540, marginTop: 26, fontSize: 19 }}>
              For brand partnerships, press, speaking, and everything else.
            </p>
          </div>
          <div className="contact-photo">
            <img src="assets/photo-hannah-contact.jpg" alt="Hannah on the move in NYC" />
          </div>
        </div>
        <div className="contact-lanes contact-lanes-4">
          {lanes.map((l, i) => (
            <a key={i} className="lane-card" href={l.href}>
              <div className="lane-num">0{i + 1}</div>
              <h3 className="h-3" style={{ color: 'var(--hz-cream)' }}>{l.title}</h3>
              <p style={{ color: 'rgba(255,251,243,0.72)', fontSize: 15, margin: '10px 0 24px' }}>{l.sub}</p>
              <div className="lane-cta">
                {l.cta} <IconArrow />
              </div>
            </a>
          ))}
        </div>
        <ContactForm />
      </div>
    </section>
  );
}

function ContactForm() {
  const [form, setForm] = React.useState({ name: '', email: '', kind: 'Brand partnerships', msg: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const subjectMap = {
    'Brand partnerships': 'Partnership inquiry',
    'Press inquiry': 'Press inquiry',
    'Speaking inquiry': 'Speaking inquiry',
    'Everything else': 'General inquiry',
  };
  function submit(e) {
    e.preventDefault();
    setStatus('sending');
    const data = new FormData();
    data.append('name', form.name);
    data.append('email', form.email);
    data.append('_subject', subjectMap[form.kind] || 'Inquiry');
    data.append('inquiry_type', form.kind);
    data.append('message', form.msg);
    data.append('_captcha', 'false');
    data.append('_template', 'table');
    fetch('https://formsubmit.co/ajax/hannah@careerhannah.com', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    })
      .then(r => r.json())
      .then(r => setStatus(r.success ? 'sent' : 'error'))
      .catch(() => setStatus('error'));
  }
  if (status === 'sent') {
    return (
      <div className="contact-form contact-form-success">
        <span className="form-sent-icon">✓</span>
        <h3 className="h-3" style={{ color: 'var(--hz-cream)', marginTop: 16 }}>Message sent.</h3>
        <p style={{ color: 'rgba(255,251,243,0.75)', marginTop: 10, fontSize: 16 }}>
          Hannah will get back to you soon.
        </p>
      </div>
    );
  }
  return (
    <form className="contact-form" onSubmit={submit}>
      <div className="form-row">
        <label>
          <span>Name</span>
          <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Your name" required />
        </label>
        <label>
          <span>Email</span>
          <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="you@company.com" required />
        </label>
      </div>
      <label>
        <span>Inquiry type</span>
        <select value={form.kind} onChange={e => setForm({ ...form, kind: e.target.value })}>
          <option>Brand partnerships</option>
          <option>Press inquiry</option>
          <option>Speaking inquiry</option>
          <option>Everything else</option>
        </select>
      </label>
      <label>
        <span>Message</span>
        <textarea rows="4" value={form.msg} onChange={e => setForm({ ...form, msg: e.target.value })} placeholder="A few sentences on what you have in mind, timing, and budget if relevant." required />
      </label>
      <div className="form-foot">
        <button className="btn primary" type="submit" disabled={status === 'sending'}>
          {status === 'sending' ? 'Sending…' : <><span>Send</span> <span className="arrow"><IconArrow /></span></>}
        </button>
        {status === 'error' && <span className="form-sent" style={{ color: 'rgba(255,100,100,0.9)' }}>Something went wrong — try emailing directly.</span>}
      </div>
    </form>
  );
}

Object.assign(window, { Press, Newsletter, Contact });