const Deliverables = () => {
  const items = [
    {
      tag: "Find your citation gaps", name: "The Store Visibility Report",
      desc: "A custom report showing where your products are skipped, mentioned, or cited across AI shopping answers, with the priority fixes that can move your store up.",
      meta: ["AI citation score", "Category benchmark", "Priority fixes"],
      accent: "teal", cta: "See where your store stands",
    },
    {
      tag: "See who AI cites", name: "The Cited Index",
      desc: "A category index showing which stores AI engines cite, which ones are gaining ground, and what citation patterns are shaping your market.",
      meta: ["Category leaders", "Citation movement", "Competitive benchmarks"],
      accent: "amber", cta: "See category leaders",
    },
    {
      tag: "Fix what AI needs", name: "The Citation Engine",
      desc: "A fix system for turning citation gaps into page, schema, and content improvements that help your products become easier for AI to cite.",
      meta: ["Ranked fixes", "Citation-ready pages", "Track movement"],
      accent: "teal", cta: "Join early access", soon: true,
    },
  ];

  return (
    <section id="deliverables" style={{ background: "var(--bg)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end", marginBottom: 56 }} className="del-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>
              <span className="dot"></span>What we ship
            </div>
            <h2 className="display section-title" style={{ marginBottom: 0 }}>
              The path from skipped to cited.
            </h2>
          </div>
          <p style={{ fontSize: 17.5, color: "var(--muted)", maxWidth: "48ch", margin: 0, lineHeight: 1.55 }}>
            Start with your store's citation gaps. Compare them against the category. Then fix the pages and signals AI needs before it can cite your products.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="del-grid">
          {items.map((it, i) => (
            <article key={it.name} style={{
              background: "var(--card)", border: "1px solid var(--border)",
              borderRadius: 14, padding: "28px 28px 24px",
              display: "flex", flexDirection: "column",
              minHeight: 380, position: "relative", overflow: "hidden",
            }}>
              <div style={{
                position: "absolute", top: 0, left: 0, right: 0, height: 3,
                background: it.accent === "teal" ? "var(--teal)" : "var(--amber)",
                opacity: it.soon ? 0.4 : 1,
              }} />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--muted)" }}>
                  0{i + 1} · {it.tag}
                </span>
                {it.soon && (
                  <span className="pill" style={{ background: "var(--bg)", color: "var(--muted)", border: "1px solid var(--border)" }}>Soon</span>
                )}
              </div>
              <h3 className="display" style={{ fontSize: 30, margin: "0 0 14px", maxWidth: "16ch", fontVariationSettings: '"opsz" 60' }}>
                {it.name}
              </h3>
              <p style={{ color: "var(--muted)", fontSize: 15, lineHeight: 1.6, margin: "0 0 24px" }}>{it.desc}</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 28 }}>
                {it.meta.map((m) => (
                  <span key={m} className="mono" style={{
                    fontSize: 11, padding: "4px 9px",
                    background: "var(--bg)", border: "1px solid var(--border)",
                    borderRadius: 999, color: "var(--muted)",
                  }}>{m}</span>
                ))}
              </div>
              <a href="#" style={{
                marginTop: "auto", display: "inline-flex", alignItems: "center", gap: 6,
                fontSize: 14.5, fontWeight: 500,
                color: it.accent === "teal" ? "var(--teal)" : "var(--amber)",
                opacity: it.soon ? 0.7 : 1, textDecoration: "none",
              }}>
                {it.cta} <span style={{ transition: "transform .15s ease" }}>→</span>
              </a>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .del-head { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
          .del-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Deliverables = Deliverables;