const Hero = ({ variant = "Become", ladderStyle = "bars" }) => {
  const headlines = {
    Become: {
      eyebrow: "AI Visibility Index for e-commerce",
      h: <React.Fragment>Become a <em style={{ fontStyle: "italic", fontFamily: "Fraunces, serif", fontVariationSettings: '"opsz" 144, "SOFT" 100' }}>Cited Store</em>.</React.Fragment>
    },
    "Invisible→Cited": {
      eyebrow: "AI Visibility Index for e-commerce",
      h: <React.Fragment>From <span style={{ color: "var(--invisible)" }}>invisible</span><br/>to <span style={{ color: "var(--teal)" }}>cited</span>.</React.Fragment>
    },
    Index: {
      eyebrow: "Q1 2026 · 1,082,441 stores scored",
      h: <React.Fragment>The index of stores AI <em style={{ fontStyle: "italic" }}>recommends</em>.</React.Fragment>
    },
  };
  const head = headlines[variant] || headlines.Become;

  return (
    <section style={{ paddingTop: 88, paddingBottom: 100 }}>
      <div className="wrap" style={{
        display: "grid", gridTemplateColumns: "minmax(0, 1.55fr) minmax(0, 1fr)",
        gap: 72, alignItems: "center",
      }} className="hero-grid">
        <div>
          <div className="eyebrow"><span className="dot"></span>{head.eyebrow}</div>
          <h1 className="display" style={{
            fontSize: "clamp(48px, 7.6vw, 96px)",
            margin: "26px 0 24px", maxWidth: "13ch",
          }}>
            {head.h}
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--muted)", maxWidth: "46ch", margin: "0 0 36px" }}>
            Cited Store shows whether ChatGPT, Claude, Gemini, and Perplexity skip, mention, or cite your products — then gives you the fixes to move up.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#" className="btn btn-primary">
              Get the Store Visibility Report <span className="arrow">→</span>
            </a>
            <a href="#how" className="btn btn-ghost">See how it works</a>
          </div>
          <div style={{
            marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--border)",
            display: "flex", flexWrap: "wrap", gap: 36, color: "var(--muted)", fontSize: 13.5,
          }}>
            <span className="mono"><strong style={{ color: "var(--text)" }}>1,082,441</strong> stores indexed</span>
            <span className="mono"><strong style={{ color: "var(--text)" }}>4</strong> AI engines tracked</span>
            <span className="mono"><strong style={{ color: "var(--text)" }}>200+</strong> categories scored</span>
          </div>
        </div>
        <div>
          <Ladder style={ladderStyle} active="cited" />
          <div style={{
            marginTop: 18, fontSize: 13, color: "var(--muted)",
            display: "flex", alignItems: "center", gap: 8,
          }}>
            <span className="mono" style={{ color: "var(--teal)" }}>↑</span>
            <span>Cited is where AI hands shoppers your URL. We help you climb.</span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
};

window.Hero = Hero;