/* ============================================================
   Stat band (big numbers) + customer quote + footer
   ============================================================ */

function Stats() {
  const { L } = useT();
  const s = L.stats;
  const num = { fontSize: "clamp(56px,7vw,104px)", fontWeight: 700, letterSpacing: "-0.05em", lineHeight: 1, color: "var(--ink)" };
  const lbl = { fontSize: 15.5, color: "var(--ink-2)", marginTop: 18, maxWidth: 240, marginLeft: "auto", marginRight: "auto", lineHeight: 1.5 };
  return (
    <section className="section section--paper ruled">
      <div className="wrap" style={{ textAlign: "center" }}>
        <Reveal>
          <h2 className="h-section" style={{ maxWidth: 760, margin: "0 auto 84px" }}>{s.title}</h2>
        </Reveal>
        <Reveal className="rise-d1 stat-row" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 0 }}>
          <div className="stat-cell" style={{ padding: "0 28px" }}>
            <div style={num}><CountUp to={82} suffix="%" /></div>
            <div style={lbl}>{s.l1}</div>
          </div>
          <div className="stat-cell" style={{ padding: "0 28px" }}>
            <div style={{ ...num, color: "var(--primary)" }}>5 → 1</div>
            <div style={lbl}>{s.l2}</div>
          </div>
          <div className="stat-cell" style={{ padding: "0 28px" }}>
            <div style={num}><CountUp to={18} suffix="s" /></div>
            <div style={lbl}>{s.l3}</div>
          </div>
        </Reveal>
        <Reveal className="rise-d2">
          <p style={{ marginTop: 64, fontSize: 13.5, color: "var(--ink-3)" }}>{s.note}</p>
        </Reveal>
      </div>
      <style>{`@media (max-width:760px){ .stat-row{ grid-template-columns:1fr !important; gap:44px !important; } }`}</style>
    </section>
  );
}

function Customers() {
  const { L } = useT();
  const pr = L.proof;
  return (
    <section id="customers" className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <Reveal className="quote-card" style={{ background: "var(--bg-2)", borderRadius: 26, overflow: "hidden" }}>
          <div className="quote-pad" style={{ padding: "72px 72px", display: "flex", flexDirection: "column", justifyContent: "center", maxWidth: 920 }}>
            <blockquote style={{ fontSize: "clamp(26px,2.8vw,42px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.22, color: "var(--ink)", marginBottom: 36 }}>
              “{pr.quote.pre}<span style={{ color: "var(--primary)" }}>{pr.quote.hi}</span>{pr.quote.post}”
            </blockquote>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <span style={{ width: 46, height: 46, borderRadius: 999, background: "var(--sky)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 14, color: "var(--primary-ink)" }}>CN</span>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{pr.name}</div>
                <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{pr.role}</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 940px){ .quote-pad{ padding:44px 32px !important; } }`}</style>
    </section>
  );
}

function SiteFooter() {
  const { L } = useT();
  const f = L.footer;
  return (
    <footer className="ruled" style={{ paddingTop: 72 }}>
      <div className="wrap foot-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }}>
        <div style={{ maxWidth: 300 }}>
          <Logo />
          <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-3)", margin: "20px 0 18px" }}>
            {f.tagline}
          </p>
          <a href="mailto:hello@sanddo.ai" style={{ fontSize: 14, fontWeight: 600, color: "var(--primary)" }}>hello@sanddo.ai</a>
        </div>
        {f.cols.map(([head, items]) => (
          <div key={head}>
            <div className="mono-label" style={{ marginBottom: 18 }}>{head}</div>
            <div style={{ display: "grid", gap: 13 }}>
              {items.map(([t, h]) => (
                <a key={t} href={h} style={{ fontSize: 14, color: "var(--ink-2)", transition: "color .15s" }}
                   onMouseEnter={e => { e.currentTarget.style.color = "var(--ink)"; }}
                   onMouseLeave={e => { e.currentTarget.style.color = "var(--ink-2)"; }}>{t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="wrap foot-base" style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 52, paddingTop: 26, paddingBottom: 52, borderTop: "1px solid var(--line)" }}>
        <span style={{ fontSize: 13, color: "var(--ink-3)" }}>{f.copyright}</span>
        <span className="mono-label" style={{ marginLeft: "auto", color: "var(--ink-4)" }}>{f.madeSafe}</span>
      </div>
      <style>{`@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr !important; } .foot-base{ flex-direction:column; align-items:flex-start; gap:10px; } .foot-base .mono-label{ margin-left:0 !important; } }`}</style>
    </footer>
  );
}

Object.assign(window, { Stats, Customers, SiteFooter });