/* ============================================================
   Use Cases page
   ============================================================ */

function UseCases({ go, focus, setFocus }) {
  const active = VERTICALS.find(v => v.id === focus) || VERTICALS[0];

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 80, paddingBottom: 0 }}>
        <div className="shell">
          <div className="bracketed" style={{ marginBottom: 28 }}>USE CASES · BY VERTICAL</div>
          <h1 className="heading-xl" style={{ maxWidth: "22ch", marginBottom: 24 }}>
            Where the cost of an <em style={{ color: "var(--accent)", fontStyle: "italic" }}>unexplained</em> decision is the highest, the Axiom does its sharpest work.
          </h1>
          <p className="lede" style={{ marginBottom: 40 }}>
            Nine domains where pattern-matching is no longer enough. Select a vertical to see the
            situation we keep finding, the applications, and the outcomes from real deployments.
          </p>
          <div className="rule"></div>
        </div>
      </section>

      <section>
        <div className="shell">
          <div className="uc-layout">
            <aside className="uc-sidebar">
              <div className="uc-sidebar-label uppercase-label">Verticals · 09</div>
              <div className="uc-vert-list">
                {VERTICALS.map(v => (
                  <button
                    key={v.id}
                    className={`uc-vert ${v.id === focus ? "active" : ""}`}
                    onClick={() => setFocus(v.id)}
                  >
                    <span>{v.name}</span>
                    <span className="v-num">{v.num}</span>
                  </button>
                ))}
              </div>
            </aside>

            <div className="uc-content" key={active.id}>
              <div className="page-enter">
                <div className="uc-vertical-num">VERTICAL {active.num} · {active.short.toUpperCase()}</div>
                <h2 className="uc-title">{renderTitle(active.title)}</h2>
                <p className="uc-lede">{active.lede}</p>

                <div className="uc-block">
                  <div className="uc-block-label uppercase-label">— The situation we keep finding</div>
                  {active.situation.map((s, i) => (
                    <p className="uc-block-text" key={i}>{s}</p>
                  ))}
                </div>

                <div className="uc-block">
                  <div className="uc-block-label uppercase-label">— Applications</div>
                  <div className="uc-applications">
                    {active.applications.map(app => (
                      <div className="uc-app" key={app.num}>
                        <div className="a-num">{app.num}</div>
                        <div className="a-title">{app.title}</div>
                        <div className="a-text">{app.text}</div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="uc-block">
                  <div className="uc-block-label uppercase-label">— Outcomes in deployment</div>
                  <div className="uc-metrics">
                    {active.metrics.map((m, i) => (
                      <div className="uc-metric" key={i}>
                        <div className="m-value">
                          {m.value[0]}
                          {m.value[1] && <em>{m.value[1].em}</em>}
                        </div>
                        <div className="m-label">{m.label}</div>
                        <div className="m-note">{m.note}</div>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{
                  marginTop: 80,
                  padding: "40px 0",
                  borderTop: "1px solid var(--rule)",
                  display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20
                }}>
                  <div>
                    <div className="uppercase-label" style={{ marginBottom: 8 }}>Engage</div>
                    <p style={{ fontFamily: "var(--serif)", fontSize: 24, margin: 0, letterSpacing: "-0.01em" }}>
                      Forty-minute briefing tailored to {active.name.toLowerCase()}.
                    </p>
                  </div>
                  <button className="btn" onClick={() => go("contact")}>
                    Book a briefing <span className="arrow">→</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.UseCases = UseCases;