/* global React, Icon, SiteNav, SiteFooter, AgentModal */
const { useState: useCSIState } = React;

/* Re-use the homepage's CaseCard look, but adapted to link into the subpage. */
function CSIndexCard({ slug, tag, title, metric, body, wide, neon = "blue" }) {
  const [hover, setHover] = useCSIState(false);
  const neonClass = neon === "blue" ? "bm-neon-blue" : "bm-neon-white";
  return (
    <a
      href={`/case-studies/${slug}`}
      data-bm-case-card
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--bm-surface-2)" : "#000B45",
        border: `1px solid ${hover ? "var(--bm-hairline-strong)" : "var(--bm-hairline)"}`,
        borderRadius: 18,
        padding: 36,
        gridColumn: wide ? "1 / -1" : "auto",
        display: "flex",
        flexDirection: "column",
        gap: 20,
        transition: "background 220ms var(--bm-ease-standard), border-color 220ms var(--bm-ease-standard)",
        position: "relative",
        minHeight: 260,
        textDecoration: "none",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <span
          style={{
            fontSize: 11, fontWeight: 600,
            letterSpacing: "0.16em", textTransform: "uppercase",
            color: "var(--bm-accent)",
          }}
        >
          {tag}
        </span>
        <span style={{ fontSize: 13, color: "var(--bm-text-muted)", fontWeight: 500 }}>{title}</span>
      </div>

      <div
        className={neonClass}
        style={{
          fontFamily: "var(--bm-font-display)",
          fontSize: wide ? "clamp(44px, 5.2vw, 72px)" : "clamp(36px, 4vw, 56px)",
          fontWeight: 700,
          letterSpacing: "-0.03em",
          lineHeight: 1.02,
        }}
      >
        {metric}
      </div>

      <div
        style={{
          fontSize: 15, lineHeight: 1.6,
          color: "var(--bm-text-muted)",
          maxWidth: wide ? 780 : "none",
          flex: 1,
        }}
      >
        {body}
      </div>

      <span
        style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          fontSize: 13,
          fontWeight: 500,
          color: hover ? "var(--bm-accent-hover)" : "var(--bm-accent)",
          marginTop: 4,
          letterSpacing: 0,
          alignSelf: "flex-start",
          transition: "color 120ms var(--bm-ease-standard)",
        }}
      >
        Read the case study
        <Icon name="arrow-up-right" size={14} color="currentColor" />
      </span>
    </a>
  );
}

function CaseStudyIndexPage() {
  const data = window.CASE_STUDIES;
  const order = window.CASE_STUDIES_ORDER;
  const CASE_TAGS = {
    "ai-voice-agent":       "Sales · Voice",
    "ai-email-engine":      "Sales · Email",
    "ai-sales-manager":     "Sales · Coaching",
    "content-repurposing":  "Lead Gen · Content",
    "ai-qa-clone":          "Delivery · Coaching",
  };

  return (
    <>
      <SiteNav />
      <main>
        <section data-bm-section="hero" style={{ position: "relative", padding: "96px 32px 48px", overflow: "hidden" }}>
          <div aria-hidden style={{
            position: "absolute", inset: 0, pointerEvents: "none",
            background:
              "radial-gradient(ellipse 55% 50% at 0% 100%, rgba(0,24,125,0.72), rgba(0,11,69,0.28) 38%, rgba(0,3,34,0) 70%)",
          }} />
          <div style={{ position: "relative", maxWidth: 1200, margin: "0 auto" }}>
            <div style={{
              fontSize: 11, fontWeight: 600,
              letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--bm-accent)", lineHeight: 1,
            }}>Case Studies</div>
            <h1 style={{
              fontFamily: "var(--bm-font-display)",
              fontSize: "clamp(40px, 5.4vw, 72px)",
              fontWeight: 700,
              letterSpacing: "-0.03em",
              lineHeight: 1.04,
              color: "var(--bm-text)",
              margin: "20px 0 0",
              maxWidth: 960,
            }}>
              Proof, not pitch.
            </h1>
            <p style={{
              fontSize: 19, lineHeight: 1.55,
              color: "var(--bm-text-muted)",
              margin: "24px 0 0",
              maxWidth: 720,
            }}>
              Each system below was deployed inside a real operating business.
              Every number is sourced from the client's own CRM, revenue, or
              tooling — not projections.
            </p>
          </div>
        </section>

        <section data-bm-section="mid" style={{ padding: "48px 32px 128px" }}>
          <div
            data-bm-stack="cols-2"
            style={{
              maxWidth: 1200,
              margin: "0 auto",
              display: "grid",
              gridTemplateColumns: "repeat(2, 1fr)",
              gap: 16,
            }}
          >
            {order.map((slug, i) => {
              const d = data[slug];
              const wide = i === order.length - 1 && order.length % 2 === 1;
              return (
                <CSIndexCard
                  key={slug}
                  slug={slug}
                  tag={CASE_TAGS[slug]}
                  title={d.cardTitle}
                  metric={d.cardMetric}
                  body={d.cardBody}
                  wide={wide}
                />
              );
            })}
          </div>
        </section>
      </main>
      <SiteFooter />
      <AgentModal />
    </>
  );
}

Object.assign(window, { CaseStudyIndexPage });