const ReportCard = () => (
  <div style={{
    background: "var(--card)", border: "1px solid var(--border)",
    borderRadius: 16, boxShadow: "0 1px 0 rgba(0,0,0,0.02), 0 32px 60px -36px rgba(13,107,88,0.22)",
    overflow: "hidden", position: "relative",
  }}>
    <div style={{
      padding: "20px 28px", borderBottom: "1px solid var(--border)",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      background: "var(--bg)",
    }}>
      <span style={{ fontFamily: "Fraunces, serif", fontWeight: 600, fontSize: 16 }}>
        <span style={{ color: "var(--teal)", fontWeight: 700 }}>[</span> Store Visibility Report <span style={{ color: "var(--teal)", fontWeight: 700 }}>]</span>
      </span>
      <span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>Sample · trailrunco.com</span>
    </div>

    <div style={{ padding: "32px 28px 24px", display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "center" }}>
      <div>
        <div className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--muted)", marginBottom: 8 }}>
          AI Citation Score
        </div>
        <div className="display" style={{ fontSize: 96, lineHeight: 0.9, fontVariationSettings: '"opsz" 144, "SOFT" 100', color: "var(--amber)" }}>
          34<span style={{ fontSize: 36, color: "var(--lt)" }}>/100</span>
        </div>
        <div style={{ marginTop: 10 }}>
          <span className="pill mentioned"><span className="tdot mentioned" style={{ marginRight: 0 }}></span>Mentioned</span>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {[["ChatGPT", 41, "var(--amber)"], ["Claude", 28, "var(--amber)"], ["Gemini", 12, "var(--invisible)"], ["Perplexity", 55, "var(--teal)"]].map(([name, val, col]) => (
          <div key={name} style={{ display: "grid", gridTemplateColumns: "70px 1fr 32px", alignItems: "center", gap: 10 }}>
            <span style={{ fontSize: 13, color: "var(--muted)" }}>{name}</span>
            <div style={{ height: 8, background: "var(--bg)", borderRadius: 999, overflow: "hidden" }}>
              <div style={{ height: "100%", width: val + "%", background: col, borderRadius: 999 }}></div>
            </div>
            <span className="mono" style={{ fontSize: 12, textAlign: "right", color: "var(--text)" }}>{val}</span>
          </div>
        ))}
      </div>
    </div>

    <div style={{ height: 1, background: "var(--border)", margin: "0 28px" }}></div>

    <div style={{ padding: "24px 28px 28px" }}>
      <div className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--muted)", marginBottom: 14 }}>
        Citation fixes — ranked by impact
      </div>
      <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
        {[
          ["Add product schema to priority PDPs", "+18 pts est."],
          ["Build comparison pages for high-intent queries", "+9 pts est."],
          ["Strengthen category pages with citation-ready answers", "+6 pts est."],
        ].map(([t, lift], i) => (
          <li key={i} style={{
            display: "grid", gridTemplateColumns: "24px 1fr auto",
            alignItems: "center", gap: 14, padding: "12px 14px",
            border: "1px solid var(--border)", borderRadius: 10,
          }}>
            <span className="mono" style={{ fontSize: 13, color: "var(--lt)" }}>0{i + 1}</span>
            <span style={{ fontSize: 14.5 }}>{t}</span>
            <span className="mono" style={{ fontSize: 11.5, color: "var(--teal)", background: "var(--teal-light)", padding: "3px 8px", borderRadius: 999 }}>{lift}</span>
          </li>
        ))}
      </ol>
    </div>

    <div style={{
      padding: "14px 28px", background: "var(--bg)", borderTop: "1px solid var(--border)",
      display: "flex", justifyContent: "space-between",
      fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--muted)",
    }}>
      <span>Generated 2026-04-22</span>
      <span>Powered by Cited Store</span>
    </div>

    <div style={{
      position: "absolute", top: 14, right: -10, transform: "rotate(8deg)",
      background: "var(--teal)", color: "white",
      padding: "4px 10px", borderRadius: 4,
      fontFamily: "JetBrains Mono, monospace", fontSize: 10.5,
      letterSpacing: ".08em", textTransform: "uppercase",
      boxShadow: "0 6px 18px -8px rgba(0,0,0,0.3)",
    }}>Sample</div>
  </div>
);

const SampleReport = () => (
  <section id="report">
    <div className="wrap">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 72, alignItems: "center" }} className="report-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            <span className="dot"></span>The Store Visibility Report
          </div>
          <h2 className="display section-title">
            Find out where your products appear in AI answers.
          </h2>
          <p style={{ fontSize: 17.5, color: "var(--muted)", lineHeight: 1.6, maxWidth: "44ch", marginBottom: 28 }}>
            Custom-built for your store. We test the shopping prompts your buyers ask across ChatGPT, Claude, Gemini, and Perplexity, then show where your products are skipped, mentioned, or cited, and what to fix first.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: "0 0 36px", display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              ["Citation verdict across 4 engines", "See whether AI skips, mentions, or cites your products"],
              ["Product citation gaps", "Find the missing signals keeping your pages out of AI answers"],
              ["Competitor citation delta", "See which stores get cited where yours does not"],
            ].map(([t, d]) => (
              <li key={t} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 14 }}>
                <span style={{
                  width: 18, height: 18, borderRadius: 4, background: "var(--teal-light)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: "var(--teal)", fontSize: 12, fontWeight: 700, marginTop: 3,
                }}>✓</span>
                <div>
                  <div style={{ fontWeight: 500 }}>{t}</div>
                  <div style={{ color: "var(--muted)", fontSize: 14.5 }}>{d}</div>
                </div>
              </li>
            ))}
          </ul>
          <a href="#" className="btn btn-primary">
            See where your store stands <span className="arrow">→</span>
          </a>
          <div className="mono" style={{ marginTop: 14, fontSize: 12, color: "var(--muted)" }}>
            Built from real AI shopping prompts · Customized to your store
          </div>
        </div>
        <ReportCard />
      </div>
    </div>
    <style>{`
      @media (max-width: 860px) {
        .report-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
      }
    `}</style>
  </section>
);

window.SampleReport = SampleReport;