// Hero — editorial display with optional mock draft visual or stats block.

const HERO_HEADLINES = {
  default: (
    <>The jobs that aren't&nbsp;posted, <em>found and drafted</em> for you.</>
  ),
  hidden: (
    <>The hidden job market, <em>opened up</em>.</>
  ),
  outreach: (
    <>Cold outreach that <em>actually&nbsp;lands</em>.</>
  ),
};

const HERO_SUBS = {
  default: "Upload your CV. Describe the firms you're after. Sendorai finds the right person at each, researches them, and writes a personalised email, ready in your Gmail drafts.",
  hidden: "The roles worth working at don't get posted. Sendorai finds them, identifies the right contact, and drafts the email, so you reach partners and founders before anyone else does.",
  outreach: "Generic templates get ignored. Sendorai reads your CV, researches each firm, and writes one specific email per contact. The kind that gets a reply.",
};

function Hero({
  layout = "split",
  headline = "default",
  ctaStyle = "ink",
  eyebrow = "launch",
  showFloatNotes = true,
}) {
  const eyebrowText = {
    launch: "Launching soon · Join the waitlist",
    hidden: "Built for the hidden job market",
    students: "For students aiming at competitive industries",
  }[eyebrow] || "Launching soon · Join the waitlist";

  const ctaClass = "snd-btn lg " + (ctaStyle === "fern" ? "fern" : "primary");

  return (
    <section className={"hero layout-" + layout} id="top">
      <div className="hero-copy">
        <div className={"hero-eyebrow " + (eyebrow === "launch" ? "launch" : "")}>
          <span className="dot"/>{eyebrowText}
        </div>
        <h1>{HERO_HEADLINES[headline] || HERO_HEADLINES.default}</h1>
        <p className="sub">{HERO_SUBS[headline] || HERO_SUBS.default}</p>
        <div className="hero-actions">
          <a
            className={ctaClass}
            href={window.WAITLIST_URL}
            target="_blank"
            rel="noopener noreferrer"
            style={{ textDecoration: "none" }}
          >
            Join the waitlist <Icon.Arrow size={18}/>
          </a>
          <a className="snd-btn ghost lg" href="#sample" style={{ textDecoration: "none" }}>
            See a draft
          </a>
        </div>
        <div className="hero-meta-line">
          <span>Early access opens in waves</span>
          <span className="dot"/>
          <span>No spam, just a launch note</span>
        </div>
      </div>

      <div className="hero-visual">
        <div className="draft-mock-wrap">
          {showFloatNotes && (
            <div className="float-note tl">
              <span className="sparkle"/>
              <span>Drafted from research</span>
              <span className="meta">12s</span>
            </div>
          )}
          <div className="draft-mock">
          <div className="head">
            <div className="dot" style={{ background: "#E16767" }}/>
            <div className="dot" style={{ background: "#E6C067" }}/>
            <div className="dot" style={{ background: "var(--fern-400)" }}/>
            <div className="title">draft · gmail</div>
            <div className="badge">
              <span className="snd-badge fern"><span className="dot"/>Ready</span>
            </div>
          </div>
          <div className="meta-row"><span className="k">To</span><span className="v">a.morrison@thompsoncapital.co.uk</span></div>
          <div className="meta-row"><span className="k">Subj</span><span className="v subj">Question about your M&amp;A advisory work, would love to chat</span></div>
          <div className="body">
            <p>Dear Alexandra,</p>
            <p>I came across Thompson Capital after reading about your work advising Whitman &amp; Reid on the Reuters deal. A remarkable outcome for a boutique on the buy-side.</p>
            <p>I'm a third-year economics undergraduate at LSE, with a summer at PwC in their UK M&amp;A practice. I'm interested specifically in firms that operate the way Thompson does: partner-led, sub-50, mid-cap mandates where you actually see the deal end-to-end.</p>
            <p style={{ color: "var(--fg-3)" }}>…</p>
          </div>
          <div className="foot">
            <span style={{ fontSize: 12, color: "var(--fg-3)", flex: 1 }}>Deposited to Gmail · 2m ago</span>
            <button className="snd-btn ghost sm">Edit</button>
            <button className="snd-btn primary sm">Open in Gmail</button>
          </div>
        </div>
        {showFloatNotes && (
            <div className="float-note br">
              <span className="sparkle"/>
              <span>CV attached automatically</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });