/* ============================================================
   The problem — narrative + calm inbox visual
   ============================================================ */

function InboxShot() {
  const { L } = useT();
  const p = L.problem;
  return (
    <div className="shot" style={{ position: "relative", overflow: "hidden", borderRadius: 20 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "16px 20px", borderBottom: "1px solid var(--line)" }}>
        <span style={{ fontSize: 14, fontWeight: 700, color: "var(--ink)" }}>{p.inbox.title}</span>
        <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>{p.inbox.today}</span>
        <span style={{ marginLeft: "auto", fontSize: 12, fontWeight: 600, color: "var(--primary-ink)", background: "var(--sky)", padding: "4px 11px", borderRadius: 999 }}>{p.inbox.unassigned}</span>
      </div>
      <div style={{ position: "relative" }}>
        {p.queue.map((r) => (
          <div key={r.who} style={{ display: "flex", alignItems: "center", gap: 13, padding: "14px 20px", borderBottom: "1px solid var(--line)" }}>
            <span style={{ width: 32, height: 32, flex: "none", borderRadius: 999, background: "var(--bg-tint)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, color: "var(--ink-3)" }}>{r.init}</span>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink)" }}>{r.who}</span>
                <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--ink-3)", background: "var(--surface-2)", padding: "1px 8px", borderRadius: 999, whiteSpace: "nowrap" }}>{r.cat}</span>
              </div>
              <div style={{ fontSize: 12.5, color: "var(--ink-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", marginTop: 2 }}>{r.q}</div>
            </div>
            <span style={{ fontSize: 11, color: "var(--ink-4)", flex: "none" }}>{r.t}</span>
          </div>
        ))}
        <div aria-hidden style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 110, background: "linear-gradient(to bottom, transparent, var(--surface) 92%)", pointerEvents: "none" }}></div>
      </div>
      <div style={{ padding: "10px 20px 16px", textAlign: "center", fontSize: 12, color: "var(--ink-3)" }}>{p.inbox.more}</div>
    </div>
  );
}

function Problem() {
  const { L } = useT();
  const p = L.problem;
  const em = { fontStyle: "normal", fontWeight: 600, color: "var(--ink)" };
  return (
    <section id="why" className="section">
      <div className="wrap">
        <div className="why-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "center" }}>
          <Reveal>
            <h2 className="h-section" style={{ marginBottom: 32, fontSize: "clamp(32px,3.6vw,52px)" }}>{p.title}</h2>
            <div style={{ fontSize: "clamp(18px,1.5vw,22px)", lineHeight: 1.6, color: "var(--ink-2)", letterSpacing: "-0.006em", maxWidth: 480 }}>
              <p style={{ marginBottom: 22 }}>
                {p.bodyPre}<em style={em}>{p.bodyEm}</em>{p.bodyPost}
              </p>
              <p style={{ fontWeight: 700, color: "var(--ink)", fontSize: "1.15em", letterSpacing: "-0.015em" }}>{p.punch}</p>
            </div>
          </Reveal>
          <Reveal className="rise-d1"><InboxShot /></Reveal>
        </div>
      </div>
      <style>{`
        .why-grid > * { min-width: 0; }
        @media (max-width: 940px){ .why-grid{ grid-template-columns:1fr !important; gap:44px !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Problem, InboxShot });