function Hero({ headline, subhead, ctaLabel }) {
  const headlineParts = headline.split('.').filter(Boolean);
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero__kicker">
          <span className="pill">DEFINED INTELLIGENCE</span>
          <span>Now in beta — design partners shaping v1</span>
        </div>
        <h1 className="display hero__h1">
          {headline.split('.').map((part, i, arr) => part && (
            <React.Fragment key={i}>
              {headlineParts.length > 1 && i === arr.length - 2 ? <span className="serif-it accent">{part}.</span> : part + (i < arr.length - 1 ? '.' : '')}
            </React.Fragment>
          ))}
        </h1>
        <p className="hero__sub">{subhead}</p>
        <div className="hero__actions">
          <a href={BOOK_DEMO_URL} onClick={openBookDemo} className="btn btn--primary btn--lg">{ctaLabel} <Arrow/></a>
          <a href="/#platform" className="btn btn--ghost btn--lg">See the platform</a>
        </div>

        <div className="hero__visual">
          <div className="hv">
            <div className="hv__def">
              <div className="label">Definition · Metric</div>
              <div className="name">Monthly Recurring Revenue <span className="badge">SSOT</span></div>
              <div className="desc">Sum of normalized subscription revenue for all active, paying customers — excluding one-time charges, credits, and tax.</div>
              <div className="meta">
                <span>Owner · Finance</span>
                <span>v2.4 · approved</span>
              </div>
            </div>
            <div className="hv__reports">
              <div className="hv__report">
                <div className="t"><span className="ic">FN</span>Board Report · Finance</div>
                <div className="v">$4.82M <span className="same">✓ same</span></div>
              </div>
              <div className="hv__report">
                <div className="t"><span className="ic">GTM</span>Sales Dashboard · Revenue Ops</div>
                <div className="v">$4.82M <span className="same">✓ same</span></div>
              </div>
              <div className="hv__report">
                <div className="t"><span className="ic">AI</span>AI Assistant · via MCP</div>
                <div className="v">$4.82M <span className="same">✓ same</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;