// Side-by-side product comparison
function Showcase({ tweaks }) {
  const ref = useRef(null);
  const progress = useScrollProgress(ref);

  return (
    <section ref={ref} id="products" style={{ padding: "140px 0 120px", position: "relative" }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64, gap: 40, flexWrap: "wrap" }}>
            <div>
              <Eyebrow>02 — Our products</Eyebrow>
              <h2 className="serif" style={{ fontSize: "clamp(44px, 6vw, 84px)", marginTop: 18, maxWidth: "14ch" }}>
                Two products. <span style={{ fontStyle: "italic", color: "var(--ink-dim)" }}>Two different problems.</span>
              </h2>
            </div>
            <p style={{ maxWidth: 420, fontSize: 16, color: "var(--ink-dim)", lineHeight: 1.6 }}>
              {tweaks.product1_name} digitizes how governments assess, bill, and collect public
              revenue. {tweaks.product2_name} brings AI-native governance and insight to enterprise
              data teams. Different customers, different stacks — same engineering standard.
            </p>
          </div>
        </Reveal>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24,
        }} className="showcase-grid">
          <ProductCard
            accent="var(--amber)"
            index="01"
            name={tweaks.product1_name}
            category="Revenue · Compliance · Public sector"
            headline="Run the collection of every dirham, dinar, or dollar."
            description="A full-stack platform for tax authorities, utilities, and municipalities to assess, invoice, collect, and reconcile revenue across millions of taxpayers."
            metrics={[
              { v: "3.2B", l: "transactions processed / yr" },
              { v: "42", l: "public institutions" },
              { v: "99.98%", l: "reconciliation accuracy" },
            ]}
            visual={<LedgerCardVisual progress={progress} />}
            anchor="#ledger"
          />
          <ProductCard
            accent="var(--indigo)"
            index="02"
            name={tweaks.product2_name}
            category="AI · Governance · Enterprise data"
            headline="Govern, automate, and reason over your data."
            description="An AI-native platform for enterprise data teams: policy-driven governance, workflow automation, semantic data modeling, and agentic insight generation — all in one runtime."
            metrics={[
              { v: "4", l: "capabilities in one platform" },
              { v: "280+", l: "native connectors" },
              { v: "SOC 2 II", l: "on-prem & cloud" },
            ]}
            visual={<KernelCardVisual progress={progress} />}
            anchor="#kernel"
          />
        </div>
      </div>
    </section>
  );
}

function ProductCard({ accent, index, name, category, headline, description, metrics, visual, anchor }) {
  const [hover, setHover] = useState(false);
  const [ref, vis] = useInView();
  return (
    <Reveal>
      <a href={anchor}
        ref={ref}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          display: "block",
          position: "relative",
          padding: 40,
          borderRadius: 20,
          background: "var(--bg-2)",
          border: "1px solid var(--line)",
          overflow: "hidden",
          transition: "transform 400ms cubic-bezier(.2,.7,.1,1), border-color 400ms",
          transform: hover ? "translateY(-6px)" : "translateY(0)",
          borderColor: hover ? accent : "var(--line)",
          minHeight: 600,
          display: "flex", flexDirection: "column",
        }}>
        {/* glow */}
        <div style={{
          position: "absolute", inset: 0, opacity: hover ? 1 : 0.4,
          background: `radial-gradient(circle at 80% 0%, ${accent}22, transparent 50%)`,
          transition: "opacity 400ms", pointerEvents: "none",
        }} />

        <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 32 }}>
          <div>
            <span className="mono" style={{
              fontSize: 11, color: accent, letterSpacing: "0.18em",
            }}>{index} / {name.toUpperCase()}</span>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", marginTop: 6, letterSpacing: "0.1em" }}>
              {category}
            </div>
          </div>
          <div style={{
            width: 44, height: 44, borderRadius: 999,
            border: "1px solid var(--line-strong)",
            display: "flex", alignItems: "center", justifyContent: "center",
            transition: "background 300ms, transform 300ms",
            background: hover ? accent : "transparent",
            color: hover ? "#000" : accent,
            transform: hover ? "rotate(-45deg)" : "rotate(0deg)",
          }}>→</div>
        </div>

        <h3 className="serif" style={{ fontSize: 44, lineHeight: 1.05, marginBottom: 22, position: "relative" }}>
          {headline}
        </h3>
        <p style={{ fontSize: 15, color: "var(--ink-dim)", lineHeight: 1.55, maxWidth: 440, marginBottom: 28, position: "relative" }}>
          {description}
        </p>

        {/* visual */}
        <div style={{ position: "relative", marginBottom: 28, flex: 1, minHeight: 160 }}>
          {visual}
        </div>

        {/* metrics */}
        <div style={{
          position: "relative",
          display: "grid", gridTemplateColumns: `repeat(${metrics.length},1fr)`, gap: 0,
          borderTop: "1px solid var(--line)", paddingTop: 20,
        }}>
          {metrics.map((m, i) => (
            <div key={i} style={{
              borderLeft: i === 0 ? "none" : "1px solid var(--line)",
              paddingLeft: i === 0 ? 0 : 16,
            }}>
              <div className="serif" style={{ fontSize: 30, color: "var(--ink)" }}>{m.v}</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.12em", marginTop: 4, textTransform: "uppercase" }}>
                {m.l}
              </div>
            </div>
          ))}
        </div>
      </a>
    </Reveal>
  );
}

// Visual for Ledger card — stacked invoice/receipt cards
function LedgerCardVisual({ progress }) {
  const rows = [
    { id: "TAX-2026-00184521", amt: "$48,230.00", status: "RECONCILED", t: "Corporate Income Tax" },
    { id: "TAX-2026-00184522", amt: "$12,440.00", status: "PENDING", t: "VAT · Q1" },
    { id: "TAX-2026-00184523", amt: "$203,900.00", status: "POSTED", t: "Property · Municipality 4" },
    { id: "TAX-2026-00184524", amt: "$1,120.00", status: "OVERDUE", t: "Water · Residential" },
  ];
  const statusColor = (s) => s === "RECONCILED" ? "var(--amber)"
    : s === "POSTED" ? "var(--ink-dim)"
    : s === "OVERDUE" ? "#e06658"
    : "var(--ink-mute)";
  return (
    <div style={{
      position: "absolute", inset: 0,
      display: "flex", flexDirection: "column", gap: 6,
      maskImage: "linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent)",
    }}>
      {rows.map((r, i) => (
        <div key={r.id} style={{
          display: "grid", gridTemplateColumns: "1.6fr 1fr auto auto", gap: 12, alignItems: "center",
          padding: "14px 16px",
          background: "var(--bg-3)",
          border: "1px solid var(--line)",
          borderRadius: 10,
          fontSize: 12,
          transform: `translateY(${Math.sin(progress * 3 + i) * 2}px)`,
          transition: "transform 0.2s",
        }}>
          <div style={{ display: "flex", flexDirection: "column" }}>
            <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)" }}>{r.id}</span>
            <span style={{ color: "var(--ink)", marginTop: 2 }}>{r.t}</span>
          </div>
          <div className="mono" style={{ color: "var(--ink)", textAlign: "right" }}>{r.amt}</div>
          <div style={{
            width: 8, height: 8, borderRadius: 999, background: statusColor(r.status),
          }} />
          <div className="mono" style={{ fontSize: 10, color: statusColor(r.status), letterSpacing: "0.1em" }}>
            {r.status}
          </div>
        </div>
      ))}
    </div>
  );
}

// Visual for Kernel card — data graph
function KernelCardVisual({ progress }) {
  const nodes = [
    { x: 50, y: 40, label: "warehouse" },
    { x: 180, y: 30, label: "crm" },
    { x: 310, y: 60, label: "billing" },
    { x: 120, y: 110, label: "semantic" },
    { x: 250, y: 110, label: "policy" },
    { x: 80, y: 175, label: "agent" },
    { x: 200, y: 180, label: "agent" },
    { x: 320, y: 170, label: "chat" },
  ];
  const edges = [[0,3],[1,3],[2,4],[3,4],[3,5],[3,6],[4,6],[4,7]];
  const t = progress * 2;
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <svg viewBox="0 0 380 220" style={{ width: "100%", height: "100%" }}>
        {edges.map(([a, b], i) => {
          const A = nodes[a], B = nodes[b];
          const phase = (t + i * 0.3) % 1;
          return (
            <g key={i}>
              <line x1={A.x} y1={A.y} x2={B.x} y2={B.y}
                stroke="var(--line-strong)" strokeWidth="0.6" />
              <circle
                cx={A.x + (B.x - A.x) * phase}
                cy={A.y + (B.y - A.y) * phase}
                r="1.8" fill="var(--indigo)" />
            </g>
          );
        })}
        {nodes.map((n, i) => (
          <g key={i}>
            <rect x={n.x - 26} y={n.y - 10} width="52" height="20" rx="4"
              fill="var(--bg-3)" stroke="var(--line-strong)" />
            <text x={n.x} y={n.y + 3.5} fontSize="8" textAnchor="middle"
              fill="var(--ink-dim)" fontFamily="Geist Mono, monospace">
              {n.label}
            </text>
          </g>
        ))}
      </svg>
    </div>
  );
}

Object.assign(window, { Showcase });