/* Hero */
function Hero({ headline, subhead }) {
  return (
    <section className="po-hero" id="top">
      <div className="po-hero-glow" aria-hidden="true"></div>
      <div className="wrap po-hero-grid">
        <div className="po-hero-copy">
          <span className="pill po-hero-pill reveal">
            <span className="dot"></span> Built for developers who relocated to Canada
          </span>
          <h1 className="po-hero-h1 reveal" style={{ transitionDelay: ".05s" }}>{headline}</h1>
          <p className="po-hero-sub reveal" style={{ transitionDelay: ".12s" }}>{subhead}</p>
          <div className="po-hero-actions reveal" style={{ transitionDelay: ".18s" }}>
            <a href="/learn/module-1" className="btn btn-primary">Start free - Module 1 <Icon name="arrow" size={18} /></a>
            <a href="#roadmap" className="btn btn-ghost"><Icon name="spark" size={16} /> See the program</a>
          </div>
          <ul className="po-hero-assure mono reveal" style={{ transitionDelay: ".21s" }}>
            <li><Icon name="check" size={13} stroke={2.8} /> Module 1 is free</li>
            <li><Icon name="check" size={13} stroke={2.8} /> No sign-up to start</li>
            <li><Icon name="check" size={13} stroke={2.8} /> 30-day guarantee</li>
          </ul>
        </div>

        <div className="po-hero-visual reveal" style={{ transitionDelay: ".1s" }}>
          <OfferCard />
        </div>
      </div>

    </section>
  );
}

/* Floating offer card visual - an ILLUSTRATIVE example, clearly labeled as such.
   The company, salary, scores and timeline are a hypothetical sample, not a real
   client outcome. Swap in a real, consented case study if/when you have one. */
function OfferCard() {
  return (
    <div className="po-offer">
      <div className="po-offer-main">
        <div className="po-offer-sample mono" style={{ fontSize: 11, letterSpacing: ".04em", textTransform: "uppercase", opacity: 0.7, marginBottom: 8 }}>
          Illustrative example - not a real client outcome
        </div>
        <div className="po-offer-top">
          <div className="po-offer-co" aria-hidden="true">N</div>
          <div className="po-offer-role">
            <strong>Senior Frontend Engineer</strong>
            <span>Northgrid · Toronto, ON · Hybrid</span>
          </div>
          <span className="po-offer-badge"><Icon name="check" size={13} stroke={2.6} /> Offer</span>
        </div>
        <div className="po-offer-rows">
          <div className="po-offer-row"><span>Base salary</span><b>$138,000 CAD</b></div>
          <div className="po-offer-row"><span>Signing bonus</span><b>$12,000</b></div>
          <div className="po-offer-row"><span>Equity</span><b>RSU</b></div>
        </div>
        <div className="po-offer-foot">
          <span className="po-tag po-tag-grow"><Icon name="globe" size={13} /> PR-friendly · LMIA-exempt</span>
          <span className="po-tag"><Icon name="badge" size={13} /> Express Entry +50 pts</span>
        </div>
      </div>

      <div className="po-chip po-chip-1">
        <Icon name="target" size={16} />
        <div><b>96</b><span>ATS resume score</span></div>
      </div>
      <div className="po-chip po-chip-2">
        <span className="po-chip-ring" aria-hidden="true"></span>
        <div><b>4 / 4</b><span>interviews cleared</span></div>
      </div>
      <div className="po-chip po-chip-3">
        <Icon name="bolt" size={16} />
        <div><b>9 wks</b><span>to first offer</span></div>
      </div>
    </div>
  );
}

window.Hero = Hero;