// Ledger deep-dive
function Ledger({ tweaks }) {
  const ref = useRef(null);
  const progress = useScrollProgress(ref);

  const modules = [
    { k: "ASSESS", t: "Taxpayer registry & assessment", d: "Unified taxpayer records with automated assessment against 200+ rule types — income, property, VAT, customs, utilities." },
    { k: "INVOICE", t: "Billing & notices", d: "Generate bills in bulk or on demand. Multi-channel delivery (SMS, email, post, e-gov inbox) with delivery receipts." },
    { k: "COLLECT", t: "Payments & channels", d: "Accept payments across banks, wallets, kiosks, and branches. Real-time reconciliation to the penny." },
    { k: "ENFORCE", t: "Arrears & enforcement", d: "Aging, penalties, installment plans, and lawful enforcement workflows — all audited." },
    { k: "REPORT", t: "Audit & disclosure", d: "Parliament-ready reports, open-data disclosure feeds, and immutable audit trails." },
  ];

  return (
    <section ref={ref} id="ledger" style={{
      padding: "160px 0", position: "relative",
      background: "linear-gradient(180deg, transparent, rgba(230,163,74,0.03), transparent)",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "0 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start", marginBottom: 100 }}
             className="deepdive-header">
          <div>
            <Reveal>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
                <div style={{ width: 14, height: 14, borderRadius: 3, background: "var(--amber)" }} />
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--amber)" }}>
                  01 — {tweaks.product1_name.toUpperCase()}
                </span>
              </div>
            </Reveal>
            <Reveal delay={100}>
              <h2 className="serif" style={{ fontSize: "clamp(56px, 7vw, 104px)", lineHeight: 1.02, marginBottom: 36 }}>
                The <span style={{ color: "var(--amber)", fontStyle: "italic" }}>nervous system</span><br/>
                of public revenue.
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ fontSize: 18, color: "var(--ink-dim)", maxWidth: 520, lineHeight: 1.55 }}>
                Most tax systems are paper workflows wearing a database. {tweaks.product1_name} replaces
                the stack — assessment, billing, collection, enforcement, and disclosure — with one coherent spine
                built for fiscal scale.
              </p>
            </Reveal>
          </div>

          <Reveal delay={300}>
            <LedgerDashboard progress={progress} name={tweaks.product1_name} />
          </Reveal>
        </div>

        {/* Module list */}
        <div style={{ marginBottom: 100 }}>
          <Reveal>
            <Eyebrow color="var(--amber)">Five modules · one platform</Eyebrow>
            <h3 className="serif" style={{ fontSize: "clamp(32px, 4vw, 56px)", marginTop: 16, marginBottom: 48, maxWidth: "18ch" }}>
              From first assessment to final audit — covered.
            </h3>
          </Reveal>
          <div>
            {modules.map((m, i) => (
              <ModuleRow key={m.k} {...m} i={i} total={modules.length} />
            ))}
          </div>
        </div>

        {/* Quote + story */}
        <Reveal>
          <div style={{
            padding: "60px 80px",
            border: "1px solid var(--line)",
            borderRadius: 20,
            position: "relative", overflow: "hidden",
            background: "var(--bg-2)",
          }}>
            <div style={{
              position: "absolute", top: -80, right: -80,
              width: 300, height: 300, borderRadius: "50%",
              background: "radial-gradient(circle, var(--amber), transparent 70%)",
              opacity: 0.12, filter: "blur(40px)",
            }} />
            <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 60, alignItems: "center" }}
                 className="quote-grid">
              <div>
                <div className="serif" style={{ fontSize: 64, color: "var(--amber)", lineHeight: 0.5, marginBottom: 16 }}>“</div>
                <p className="serif" style={{ fontSize: 28, lineHeight: 1.3, marginBottom: 28 }}>
                  We moved 3.1 million taxpayers onto {tweaks.product1_name} in 11 months. Collection
                  rates climbed 14 points and we closed our first fiscal year without a single
                  reconciliation exception.
                </p>
                <div className="mono" style={{ fontSize: 12, color: "var(--ink-dim)", letterSpacing: "0.1em" }}>
                  DIRECTOR GENERAL · MINISTRY OF FINANCE · REGION IV
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                <StatBox v="+14 pts" l="collection rate" color="var(--amber)" />
                <StatBox v="11 mo" l="to go-live" color="var(--amber)" />
                <StatBox v="3.1M" l="taxpayers migrated" />
                <StatBox v="0" l="reconciliation exceptions" />
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function StatBox({ v, l, color = "var(--ink)" }) {
  return (
    <div style={{
      padding: 20, background: "var(--bg-3)", border: "1px solid var(--line)", borderRadius: 12,
    }}>
      <div className="serif" style={{ fontSize: 36, color, lineHeight: 1 }}>{v}</div>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.12em", marginTop: 6, textTransform: "uppercase" }}>{l}</div>
    </div>
  );
}

function ModuleRow({ k, t, d, i, total }) {
  const [hover, setHover] = useState(false);
  const [ref, vis] = useInView();
  return (
    <div ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid", gridTemplateColumns: "80px 1fr 2fr auto",
        gap: 40, alignItems: "center",
        padding: "32px 0",
        borderTop: "1px solid var(--line)",
        borderBottom: i === total - 1 ? "1px solid var(--line)" : "none",
        transition: "background 300ms, padding 400ms",
        background: hover ? "rgba(230,163,74,0.04)" : "transparent",
        paddingLeft: hover ? 24 : 0,
        opacity: vis ? 1 : 0,
        transform: vis ? "translateX(0)" : "translateX(-20px)",
        transitionProperty: "opacity, transform, background, padding",
        transitionDuration: "800ms, 800ms, 300ms, 400ms",
        transitionDelay: `${i * 80}ms`,
      }}>
      <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.2em" }}>
        0{i + 1}
      </span>
      <span className="mono" style={{
        fontSize: 13, color: hover ? "var(--amber)" : "var(--ink)", letterSpacing: "0.15em", transition: "color 300ms",
      }}>{k}</span>
      <div>
        <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 4 }}>{t}</div>
        <div style={{ fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.5, maxWidth: 560 }}>{d}</div>
      </div>
      <span style={{
        color: hover ? "var(--amber)" : "var(--ink-mute)",
        transform: hover ? "translateX(6px)" : "none",
        transition: "all 300ms",
      }}>→</span>
    </div>
  );
}

function LedgerDashboard({ progress, name }) {
  // Animated metric
  const collected = (3.21 + progress * 0.02).toFixed(3);
  return (
    <div style={{
      background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 16,
      padding: 24, position: "relative", overflow: "hidden",
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
        <div style={{ display: "flex", gap: 6 }}>
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#3a3a3d" }} />
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#3a3a3d" }} />
          <div style={{ width: 10, height: 10, borderRadius: 999, background: "#3a3a3d" }} />
        </div>
        <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.14em" }}>
          {name.toUpperCase()} / TREASURY CONSOLE
        </span>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--amber)", boxShadow: "0 0 6px var(--amber)" }} />
          <span className="mono" style={{ fontSize: 10, color: "var(--amber)" }}>LIVE</span>
        </div>
      </div>

      <div style={{ marginBottom: 20 }}>
        <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.14em" }}>
          REVENUE COLLECTED · FY 2026
        </span>
        <div className="serif" style={{ fontSize: 56, color: "var(--ink)", lineHeight: 1.1, marginTop: 6 }}>
          ${collected}B
          <span className="mono" style={{ fontSize: 12, color: "var(--amber)", marginLeft: 12 }}>
            +18.4% YoY
          </span>
        </div>
      </div>

      {/* Sparkline */}
      <svg viewBox="0 0 320 80" width="100%" height="80" style={{ marginBottom: 20 }}>
        <defs>
          <linearGradient id="ledger-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--amber)" stopOpacity="0.4" />
            <stop offset="100%" stopColor="var(--amber)" stopOpacity="0" />
          </linearGradient>
        </defs>
        {(() => {
          const pts = Array.from({ length: 24 }, (_, i) => {
            const base = 40 + Math.sin(i * 0.4) * 14 - i * 0.7;
            return [i * (320 / 23), base];
          });
          const d = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ");
          const area = `${d} L 320 80 L 0 80 Z`;
          return (
            <>
              <path d={area} fill="url(#ledger-grad)" />
              <path d={d} fill="none" stroke="var(--amber)" strokeWidth="1.5" />
              {pts.map((p, i) => i % 4 === 0 && (
                <circle key={i} cx={p[0]} cy={p[1]} r="2" fill="var(--amber)" />
              ))}
            </>
          );
        })()}
      </svg>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
        {[
          { l: "Open cases", v: "284,102" },
          { l: "Collected today", v: "$41.2M" },
          { l: "On-time rate", v: "87.3%" },
        ].map((s) => (
          <div key={s.l} style={{
            padding: 12, background: "var(--bg-3)", borderRadius: 8, border: "1px solid var(--line)",
          }}>
            <div className="mono" style={{ fontSize: 9, color: "var(--ink-mute)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{s.l}</div>
            <div style={{ fontSize: 18, marginTop: 4, fontWeight: 500 }}>{s.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Ledger });