const HowItWorks = () => {
  const steps = [
    {
      tier: "invisible", idx: "01", eyebrow: "Where most stores are", title: "Skipped",
      body: "AI doesn't know your brand exists. When a shopper asks for the best running shorts under $80, your products are nowhere in the answer.",
      sample: <React.Fragment>"Best running shorts under $80?"<br/><span style={{ color: "var(--invisible)" }}>— answer doesn't mention your store —</span></React.Fragment>,
    },
    {
      tier: "mentioned", idx: "02", eyebrow: "The middle ground", title: "Mentioned",
      body: "AI knows your brand name. It might list you alongside competitors. But there's no link, no citation, no traffic — and no purchase intent captured.",
      sample: <React.Fragment>"Brands like <span style={{ color: "var(--amber)", fontWeight: 500 }}>YourStore</span>, Tracksmith, Bandit are popular for…"</React.Fragment>,
    },
    {
      tier: "cited", idx: "03", eyebrow: "The summit", title: "Cited",
      body: "AI surfaces your URL as a source. Your product page is the citation. The shopper clicks. The traffic is qualified — they came in mid-decision.",
      sample: <React.Fragment>"…the <span style={{ color: "var(--teal)", fontWeight: 500, borderBottom: "1px dashed var(--teal)" }}>YourStore Trail Short</span> is recommended by runners for its…"</React.Fragment>,
    },
  ];

  return (
    <section id="how" style={{ background: "var(--card)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "end", marginBottom: 64 }} className="hiw-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>
              <span className="dot"></span>The three tiers
            </div>
            <h2 className="display section-title" style={{ marginBottom: 0 }}>
              Every store sits on one of three rungs.
            </h2>
          </div>
          <p style={{ fontSize: 17.5, color: "var(--muted)", lineHeight: 1.55, maxWidth: "44ch", margin: 0 }}>
            We score over a million stores for AI visibility — analyzing how they rank, what signals they expose, and where they sit in our index.
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1, background: "var(--border)",
          border: "1px solid var(--border)", borderRadius: 14, overflow: "hidden",
        }} className="tier-grid">
          {steps.map((s) => (
            <div key={s.tier} style={{
              background: "var(--card)", padding: "36px 32px 32px",
              display: "flex", flexDirection: "column", gap: 20,
            }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span className={"pill " + s.tier}>
                  <span className={"tdot " + s.tier} style={{ marginRight: 0 }}></span>
                  {s.title.toLowerCase()}
                </span>
                <span className="mono" style={{ color: "var(--lt)", fontSize: 12 }}>{s.idx}</span>
              </div>
              <div className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--muted)" }}>
                {s.eyebrow}
              </div>
              <h3 className="display" style={{ fontSize: 36, margin: 0, fontVariationSettings: '"opsz" 60' }}>
                {s.title}
              </h3>
              <p style={{ color: "var(--muted)", margin: 0, fontSize: 15.5, lineHeight: 1.6 }}>{s.body}</p>
              <div style={{
                marginTop: "auto", padding: "14px 16px", background: "var(--bg)",
                border: "1px solid var(--border)", borderRadius: 10,
                fontFamily: "JetBrains Mono, monospace", fontSize: 12.5, lineHeight: 1.6, color: "var(--text)",
              }}>
                {s.sample}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr",
          gap: 0, borderTop: "1px solid var(--border)",
        }} className="method-grid">
          {[
            ["Engines checked", "ChatGPT · Claude · Gemini · Perplexity"],
            ["Shopping prompts tested", "1,200+ per category"],
            ["Citation verdict", "Skipped · Mentioned · Cited"],
            ["Fix path", "Concrete fixes that get your products cited"],
          ].map(([k, v]) => (
            <div key={k} style={{ padding: "28px 24px 0", borderRight: "1px solid var(--border)" }}>
              <div className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--muted)", marginBottom: 8 }}>{k}</div>
              <div style={{ fontSize: 15, lineHeight: 1.45 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .hiw-head { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
          .tier-grid { grid-template-columns: 1fr !important; }
          .method-grid { grid-template-columns: 1fr 1fr !important; }
          .method-grid > div:nth-child(2n) { border-right: 0 !important; }
          .method-grid > div { border-bottom: 1px solid var(--border); padding-bottom: 24px !important; }
        }
      `}</style>
    </section>
  );
};

window.HowItWorks = HowItWorks;