/* ============================================================
   Bento product grid — one statement + one crafted visual per card
   ============================================================ */

function GoChip() {
  return (
    <span className="bcard-go" aria-hidden>
      <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M4.5 11.5 11.5 4.5M11.5 4.5H5.8M11.5 4.5v5.7" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </span>
  );
}

function BCard({ span = 3, title, href, children }) {
  return (
    <Reveal as="a" href={href} className={`bcard bcard--${span} lift`} style={{ textDecoration: "none", color: "inherit" }}>
      <div className="bcard-head">
        <h3 className="bcard-title">{title}</h3>
        <GoChip />
      </div>
      <div className="bcard-body">{children}</div>
    </Reveal>
  );
}

/* ---- tiny mockup atoms ---- */
function Toggle({ on }) {
  return (
    <span style={{ width: 38, height: 22, borderRadius: 999, flex: "none", position: "relative",
      background: on ? "var(--primary)" : "var(--ink-4)", transition: "background .2s", opacity: on ? 1 : .45 }}>
      <span style={{ position: "absolute", top: 3, left: on ? 19 : 3, width: 16, height: 16, borderRadius: 999, background: "#fff", boxShadow: "0 1px 3px rgba(22,38,63,.3)" }}></span>
    </span>
  );
}

/* ---- Card A: draft from order data ---- */
function ShotDraft() {
  const { L } = useT();
  const d = L.bento.draft;
  return (
    <div style={{ position: "absolute", inset: "14px 30px -60px 30px" }}>
      <div className="shot" style={{ position: "absolute", left: 0, right: 76, top: 24, bottom: 0, display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "13px 16px", borderBottom: "1px solid var(--line)" }}>
          <span style={{ width: 28, height: 28, borderRadius: 999, background: "var(--bg-tint)", display: "grid", placeItems: "center", fontSize: 10.5, fontWeight: 700, color: "var(--primary)" }}>AB</span>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink)" }}>{d.reSubject}</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{d.to}</div>
          </div>
          <span style={{ marginLeft: "auto", fontSize: 10.5, fontWeight: 600, color: "var(--primary-ink)", background: "var(--sky)", padding: "3px 9px", borderRadius: 999 }}>{d.badge}</span>
        </div>
        <div style={{ padding: "14px 16px", fontSize: 13, lineHeight: 1.55, color: "var(--ink-2)" }}>
          <div style={{ borderLeft: "2px solid var(--line-2)", paddingLeft: 10, marginBottom: 12, color: "var(--ink-3)", fontSize: 12.5 }}>
            {d.quote}
          </div>
          <p style={{ marginBottom: 10, color: "var(--ink)" }}>{d.line1}</p>
          <p>{d.line2pre}<strong style={{ color: "var(--ink)", fontWeight: 600 }}>{d.line2strong}</strong>{d.line2post}</p>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderTop: "1px solid var(--line)" }}>
          <span style={{ background: "var(--contrast-bg)", color: "var(--contrast-fg)", fontSize: 12, fontWeight: 600, padding: "7px 16px", borderRadius: 999 }}>{d.send}</span>
          <span style={{ fontSize: 11, color: "var(--ink-3)" }}>{d.builtFrom}</span>
        </div>
      </div>
      {/* order card overlay */}
      <div className="shot" style={{ position: "absolute", right: 0, top: 0, width: 196, padding: "14px 15px", borderRadius: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
          <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink)" }}>#NF-48319</span>
          <span style={{ marginLeft: "auto", fontSize: 9, fontWeight: 700, letterSpacing: ".05em", color: "var(--auto)", background: "var(--auto-tint)", padding: "2px 7px", borderRadius: 5 }}>SHIPPED</span>
        </div>
        {[[d.carrier, d.carrierVal], [d.eta, d.etaVal], [d.items, d.itemsVal]].map(([k, v]) => (
          <div key={k} style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5, color: "var(--ink-3)", padding: "4px 0", borderTop: "1px solid var(--line)" }}>
            <span>{k}</span><span style={{ fontWeight: 600, color: "var(--ink)" }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- Card B: category rules ---- */
function ShotRules() {
  const { L } = useT();
  const r = L.bento.rules;
  return (
    <div className="shot" style={{ position: "absolute", left: 30, right: 30, top: 14, bottom: -54, overflow: "hidden" }}>
      <div style={{ padding: "15px 18px 12px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "baseline", gap: 10 }}>
        <span style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>{r.title}</span>
        <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--ink-3)" }}>{r.automated}</span>
      </div>
      <div>
        {r.rows.map((row, i) => (
          <div key={row.name} style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 18px", borderBottom: "1px solid var(--line)", background: i === 0 ? "var(--sky)" : "transparent" }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>{row.name}</div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{row.desc}</div>
            </div>
            <span style={{ marginLeft: "auto", fontSize: 11, fontWeight: 600, color: row.on ? "var(--primary-ink)" : "var(--ink-3)" }}>{row.on ? r.auto : r.human}</span>
            <Toggle on={row.on} />
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- Card C: pre-send checks ---- */
function ShotChecks() {
  const { L } = useT();
  const c = L.bento.checks;
  return (
    <div className="shot" style={{ position: "absolute", left: 26, right: 26, top: 14, bottom: -48, overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 18px 14px", borderBottom: "1px solid var(--line)" }}>
        <Gauge value={92} size={56} stroke={5} color="var(--primary)" />
        <div>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>{c.trust}</div>
          <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{c.threshold}</div>
        </div>
      </div>
      <div style={{ padding: "8px 18px 16px" }}>
        {c.items.map((item) => (
          <div key={item} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 0", borderBottom: "1px solid var(--line)", fontSize: 12.5, color: "var(--ink-2)" }}>
            <span style={{ width: 18, height: 18, flex: "none", borderRadius: 6, background: "var(--auto-tint)", color: "var(--auto)", display: "grid", placeItems: "center" }}>
              <Icon.check style={{ width: 11, height: 11 }} />
            </span>{item}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- Card D: human handoff ---- */
function ShotHandoff() {
  const { L } = useT();
  const h = L.bento.handoff;
  return (
    <div style={{ position: "absolute", inset: "18px 26px -40px 26px" }}>
      <div className="shot" style={{ position: "absolute", left: 14, right: 14, top: 34, bottom: 0, opacity: .55 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "190px 18px 0", opacity: .8 }}>
          <span style={{ width: 28, height: 28, borderRadius: 999, background: "var(--bg-tint)", flex: "none" }}></span>
          <div style={{ flex: 1 }}>
            <div style={{ height: 9, width: "42%", borderRadius: 5, background: "var(--bg-tint)", marginBottom: 7 }}></div>
            <div style={{ height: 8, width: "68%", borderRadius: 5, background: "var(--surface-2)" }}></div>
          </div>
          <span className="pill pill-approve" style={{ opacity: .7 }}><span className="dot"></span>{h.held}</span>
        </div>
      </div>
      <div className="shot" style={{ position: "absolute", left: 0, right: 0, top: 0, padding: "16px 18px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 11 }}>
          <span style={{ width: 28, height: 28, borderRadius: 999, background: "var(--bg-tint)", display: "grid", placeItems: "center", fontSize: 10.5, fontWeight: 700, color: "var(--primary)" }}>LM</span>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink)" }}>{h.subject}</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)" }}>{h.who}</div>
          </div>
          <span className="pill pill-approve" style={{ marginLeft: "auto" }}><span className="dot"></span>{h.held}</span>
        </div>
        <div style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--ink-2)", background: "var(--surface-2)", borderRadius: 10, padding: "10px 12px", marginBottom: 12 }}>
          {h.body}
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <span style={{ flex: 1, textAlign: "center", fontSize: 12, fontWeight: 600, padding: "8px 0", borderRadius: 9, background: "var(--contrast-bg)", color: "var(--contrast-fg)" }}>{h.approve}</span>
          <span style={{ flex: "none", fontSize: 12, fontWeight: 600, padding: "8px 16px", borderRadius: 9, boxShadow: "inset 0 0 0 1px var(--line-2)", color: "var(--ink-2)" }}>{h.edit}</span>
        </div>
      </div>
    </div>
  );
}

/* ---- Card E: integrations ---- */
function ShotStack() {
  const { L } = useT();
  const apps = [
    ["Gmail", "#ea4335", 18, 16], ["Outlook", "#0a6fd6", 190, 6],
    ["Zendesk", "#03363d", 6, 196], ["Shopify", "#5a8d2f", 186, 206],
  ];
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", justifyContent: "center" }}>
      <div style={{ position: "relative", width: 300, height: 290, marginTop: 12 }}>
        <svg width="300" height="290" style={{ position: "absolute", inset: 0 }} aria-hidden>
          {[[60,38],[228,28],[52,212],[226,222]].map(([x,y],i) => (
            <line key={i} x1={x} y1={y} x2="150" y2="128" stroke="var(--sky-2)" strokeWidth="1.5" />
          ))}
        </svg>
        {apps.map(([name, c, x, y]) => (
          <div key={name} className="shot" style={{ position: "absolute", left: x, top: y, display: "flex", alignItems: "center", gap: 8, padding: "9px 14px", borderRadius: 999 }}>
            <span style={{ width: 9, height: 9, borderRadius: 999, background: c, flex: "none" }}></span>
            <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink)" }}>{name}</span>
          </div>
        ))}
        <div style={{ position: "absolute", left: 150, top: 128, transform: "translate(-50%,-50%)" }}>
          <div style={{ width: 58, height: 58, borderRadius: 17, background: "linear-gradient(150deg, var(--primary), var(--primary-deep))", display: "grid", placeItems: "center", boxShadow: "0 16px 36px -12px rgba(29,78,216,.55)" }}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
              <path d="M12 3.2 19.4 7.5v9L12 20.8 4.6 16.5v-9L12 3.2Z" stroke="#fff" strokeWidth="1.8" strokeLinejoin="round"/>
              <path d="M8.4 12.1l2.5 2.5 4.7-4.9" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>
        <div style={{ position: "absolute", left: 0, right: 0, bottom: -4, textAlign: "center", fontSize: 11.5, color: "var(--ink-3)" }}>{L.bento.stack.caption}</div>
      </div>
    </div>
  );
}

function Bento() {
  const { L } = useT();
  const c = L.bento.cards;
  return (
    <section id="product" className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="bento">
          <BCard span={3} href="detail?topic=drafts" title={c.drafts}><ShotDraft /></BCard>
          <BCard span={3} href="detail?topic=categories" title={c.categories}><ShotRules /></BCard>
          <BCard span={2} href="detail?topic=checks" title={c.checks}><ShotChecks /></BCard>
          <BCard span={2} href="detail?topic=handoff" title={c.handoff}><ShotHandoff /></BCard>
          <BCard span={2} href="detail?topic=integrations" title={c.integrations}><ShotStack /></BCard>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Bento, ShotDraft, ShotRules, ShotChecks, ShotHandoff, ShotStack });