// Shared case-study page renderer.
// Reads ?id= from URL (or window.CASE_ID set inline) and renders a detail page
// that matches direction-a's editorial style.

const CS_BG       = "#0B0F14";
const CS_INK      = "#F5EFE3";
const CS_INK_DIM  = "rgba(245,239,227,0.55)";
const CS_INK_FAINT= "rgba(245,239,227,0.18)";
const CS_ACCENT   = "#D9B27C";
const CS_RULE     = "rgba(245,239,227,0.12)";

const csFonts = {
  display: "'Playfair Display', 'Times New Roman', serif",
  ui: "'Inter', system-ui, sans-serif",
  italic: "'Instrument Serif', 'Playfair Display', serif",
};

function CSNav() {
  const { isMobile } = window.useViewport();
  return (
    <nav style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      gap: 16, flexWrap: "wrap",
      padding: isMobile ? "20px 20px" : "28px 64px", borderBottom: `1px solid ${CS_RULE}`,
    }}>
      <a href="../index.html" style={{
        fontFamily: csFonts.display, fontWeight: 500, fontSize: 22, color: CS_INK,
        textDecoration: "none", letterSpacing: -0.3,
      }}>
        rahim<span style={{ color: CS_ACCENT }}>.ae</span>
      </a>
      <a href="../index.html#works" style={{
        fontFamily: csFonts.ui, fontSize: 11, letterSpacing: 1.4, color: CS_INK_DIM,
        textTransform: "uppercase", textDecoration: "none",
      }}>← Back to works</a>
    </nav>
  );
}

function CaseStudy() {
  const { isMobile, isCompact } = window.useViewport();
  const id = window.CASE_ID || new URLSearchParams(location.search).get("id");
  const p = (window.RAHIM_DATA?.projects || []).find(x => x.id === id);
  if (!p) {
    return (
      <div style={{ padding: 96, color: CS_INK, fontFamily: csFonts.ui }}>
        <CSNav />
        <h1 style={{ fontFamily: csFonts.display, fontSize: 56 }}>Case study not found</h1>
        <a href="../index.html" style={{ color: CS_ACCENT }}>← Back home</a>
      </div>
    );
  }

  const meta = [
    ["Client", p.client],
    ["Sector", p.sector || p.tag],
    ["Year", p.year],
    ["Role", p.role_did || "—"],
    ["Timeline", p.timeline || "—"],
    ["Result", p.result || "—"],
  ];

  return (
    <div style={{ background: CS_BG, color: CS_INK, fontFamily: csFonts.ui, minHeight: "100vh" }}>
      <CSNav />

      <header style={{
        padding: isMobile ? "64px 20px 40px" : isCompact ? "88px 40px 56px" : "120px 64px 64px",
        borderBottom: `1px solid ${CS_RULE}`,
      }}>
        <div style={{ fontFamily: csFonts.ui, fontSize: 11, letterSpacing: 2.4, color: CS_INK_DIM, textTransform: "uppercase", marginBottom: 24 }}>
          Case study · {p.year}
        </div>
        <h1 style={{
          fontFamily: csFonts.display, fontWeight: 500,
          fontSize: isMobile ? "clamp(34px, 9vw, 52px)" : isCompact ? 68 : 96,
          lineHeight: 1.02, margin: 0, letterSpacing: isMobile ? -1 : -2,
          maxWidth: 1100,
        }}>
          {p.title} <span style={{ fontFamily: csFonts.italic, fontStyle: "italic", color: CS_ACCENT, fontWeight: 400 }}>for {p.client}</span>
        </h1>
        <p style={{ marginTop: isMobile ? 24 : 32, fontSize: isMobile ? 17 : 22, lineHeight: 1.5, color: CS_INK_DIM, maxWidth: 880 }}>
          {p.blurb}
        </p>
      </header>

      {p.image && (
        <div style={{ padding: isMobile ? "32px 20px 0" : isCompact ? "48px 40px 0" : "64px 64px 0" }}>
          <div style={{
            width: "100%", overflow: "hidden", borderRadius: 4,
            border: `1px solid ${CS_INK_FAINT}`,
            background: "#0F1620",
          }}>
            <img src={`../${p.image}`} alt={p.client} style={{ width: "100%", display: "block" }} />
          </div>
        </div>
      )}

      <section style={{
        padding: isMobile ? "56px 20px" : isCompact ? "72px 40px" : "96px 64px",
        display: "grid",
        gridTemplateColumns: isCompact ? "1fr" : "1fr 2fr",
        gap: isMobile ? 48 : isCompact ? 56 : 96,
        borderBottom: `1px solid ${CS_RULE}`,
      }}>
        <aside>
          <div style={{
            border: `1px solid ${CS_RULE}`,
          }}>
            {meta.map(([k, v], i) => (
              <div key={k} style={{
                padding: "20px 24px", borderBottom: i < meta.length - 1 ? `1px solid ${CS_RULE}` : "none",
              }}>
                <div style={{ fontSize: 10, letterSpacing: 1.8, color: CS_INK_DIM, textTransform: "uppercase", marginBottom: 6 }}>{k}</div>
                <div style={{ fontSize: 15, color: CS_INK }}>{v}</div>
              </div>
            ))}
          </div>
          {p.stack && (
            <div style={{ marginTop: 32 }}>
              <div style={{ fontSize: 10, letterSpacing: 1.8, color: CS_INK_DIM, textTransform: "uppercase", marginBottom: 16 }}>Stack</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {p.stack.map(s => (
                  <span key={s} style={{
                    fontSize: 12, color: CS_INK_DIM, border: `1px solid ${CS_INK_FAINT}`,
                    padding: "6px 12px", borderRadius: 999,
                  }}>{s}</span>
                ))}
              </div>
            </div>
          )}
        </aside>
        <div>
          <h2 style={{ fontFamily: csFonts.display, fontWeight: 400, fontSize: isMobile ? 28 : 36, margin: "0 0 16px", letterSpacing: -0.4 }}>Overview</h2>
          <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.65, color: CS_INK, marginTop: 0 }}>{p.summary}</p>

          <h2 style={{ fontFamily: csFonts.display, fontWeight: 400, fontSize: isMobile ? 28 : 36, margin: isMobile ? "40px 0 16px" : "48px 0 16px", letterSpacing: -0.4 }}>The challenge</h2>
          <p style={{ fontSize: isMobile ? 16 : 17, lineHeight: 1.7, color: CS_INK_DIM, marginTop: 0 }}>{p.challenge}</p>

          <h2 style={{ fontFamily: csFonts.display, fontWeight: 400, fontSize: isMobile ? 28 : 36, margin: isMobile ? "40px 0 16px" : "48px 0 16px", letterSpacing: -0.4 }}>The approach</h2>
          <p style={{ fontSize: isMobile ? 16 : 17, lineHeight: 1.7, color: CS_INK_DIM, marginTop: 0 }}>{p.approach}</p>

          <div style={{
            marginTop: isMobile ? 48 : 64, padding: isMobile ? "24px 22px" : "32px 36px",
            border: `1px solid ${CS_INK_FAINT}`,
            display: "flex",
            flexDirection: isMobile ? "column" : "row",
            justifyContent: "space-between",
            alignItems: isMobile ? "flex-start" : "center",
            gap: isMobile ? 20 : 16,
          }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: 1.8, color: CS_INK_DIM, textTransform: "uppercase", marginBottom: 6 }}>Outcome</div>
              <div style={{ fontFamily: csFonts.display, fontSize: isMobile ? 22 : 28, color: CS_INK }}>{p.result}</div>
            </div>
            <a href={`mailto:${window.RAHIM_DATA.email}?subject=Project enquiry — like ${p.client}`}
              style={{
                fontSize: 11, letterSpacing: 1.4, color: CS_BG, background: CS_ACCENT,
                padding: "12px 18px", borderRadius: 999, textDecoration: "none", textTransform: "uppercase",
              }}>Start a project like this →</a>
          </div>
        </div>
      </section>

      <footer style={{
        padding: isMobile ? "36px 20px" : "48px 64px", display: "flex",
        justifyContent: "space-between", flexWrap: "wrap", gap: 12,
        fontSize: 12, color: CS_INK_DIM, letterSpacing: 0.4,
      }}>
        <span>© Rahim 2026 — Abu Dhabi, UAE</span>
        <a href="../index.html" style={{ color: CS_INK_DIM, textDecoration: "none" }}>← Back home</a>
      </footer>
    </div>
  );
}

window.CaseStudy = CaseStudy;