/* global React, Button, Icon, SiteNav, SiteFooter, AgentModal, LetsTalk, LogoLockup, BlueprintGrid */
/* /work/[client] detail page — mirrors the current-website case-study format
   (hero → outcomes → challenge → what we built → calendar CTA). All ink, like
   the existing /case-studies pages. */
const WORK_CANVAS = 1200;

const wkEyebrow = {
  fontSize: 11, fontWeight: 600, letterSpacing: "0.16em",
  textTransform: "uppercase", color: "var(--bm-accent)", lineHeight: 1,
};
const wkDisplayL = {
  fontFamily: "var(--bm-font-display)", fontSize: "clamp(36px, 4.4vw, 56px)",
  fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.06, color: "var(--bm-text)", margin: 0,
};
const wkBodyL = { fontSize: 19, lineHeight: 1.6, color: "var(--bm-text-muted)", fontWeight: 400, margin: 0 };
const wkBodyM = { fontSize: 16, lineHeight: 1.6, color: "var(--bm-text-muted)", fontWeight: 400, margin: 0 };

function WorkBackLink() {
  return (
    <div style={{ maxWidth: WORK_CANVAS, margin: "0 auto", padding: "24px 32px 0" }}>
      <a
        href="/#results"
        style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 500, color: "var(--bm-text-muted)", textDecoration: "none", transition: "color 120ms var(--bm-ease)" }}
        onMouseEnter={(e) => { e.currentTarget.style.color = "var(--bm-accent)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.color = "var(--bm-text-muted)"; }}
      >
        <Icon name="arrow-left" size={14} color="currentColor" />
        Back to work
      </a>
    </div>
  );
}

function WorkHero({ data }) {
  return (
    <section data-bm-section="hero" className="bm-section--ink" style={{ position: "relative", padding: "48px 32px 56px", overflow: "hidden" }}>
      <BlueprintGrid />
      <div style={{ position: "relative", maxWidth: WORK_CANVAS, margin: "0 auto" }}>
        {data.logo
          ? <img src={data.logo} alt={data.name} style={{ height: data.logoH || 30, width: "auto", maxWidth: 200, display: "block" }} />
          : <LogoLockup name={data.name} initials={data.initials} size={44} />}
        <div style={{ ...wkEyebrow, marginTop: 22 }}>{data.label}</div>
        <p style={{ ...wkBodyM, marginTop: 12, maxWidth: 720 }}>{data.descriptor}</p>
        <h1 style={{ ...wkDisplayL, marginTop: 18, maxWidth: 1000 }}>{data.headline}</h1>
      </div>
    </section>
  );
}

function WorkOutcomes({ heroStat, outcomes }) {
  return (
    <section data-bm-section="mid" className="bm-section--ink" style={{ padding: "40px 32px" }}>
      <div style={{ maxWidth: WORK_CANVAS, margin: "0 auto" }}>
        <div style={wkEyebrow}>Outcomes</div>
        <div className="bm-neon-blue" style={{
          fontFamily: "var(--bm-font-display)", fontSize: "clamp(40px, 5vw, 68px)",
          fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.02, marginTop: 18,
        }}>
          {heroStat}
        </div>
        <ul style={{ marginTop: 36, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14, maxWidth: 900 }}>
          {outcomes.map((o, i) => (
            <li key={i} style={{
              display: "flex", gap: 14, alignItems: "flex-start", paddingBottom: 14,
              borderBottom: i < outcomes.length - 1 ? "1px solid var(--bm-hairline)" : "none",
            }}>
              <Icon name="check" size={18} color="var(--bm-accent)" style={{ marginTop: 3, flexShrink: 0 }} />
              <div style={{ fontSize: 16, lineHeight: 1.55 }}>
                <span style={{ color: "var(--bm-text)", fontWeight: 600 }}>{o.metric}</span>
                <span style={{ color: "var(--bm-text-muted)" }}> — {o.context}</span>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function WorkChallenge({ text }) {
  return (
    <section data-bm-section="mid" className="bm-section--ink" style={{ padding: "48px 32px" }}>
      <div style={{ maxWidth: WORK_CANVAS, margin: "0 auto" }}>
        <div style={wkEyebrow}>The Challenge</div>
        <p style={{ ...wkBodyL, marginTop: 18, maxWidth: 760 }}>{text}</p>
      </div>
    </section>
  );
}

function WorkSolution({ items, tags }) {
  return (
    <section data-bm-section="mid" className="bm-section--ink" style={{ padding: "48px 32px 72px" }}>
      <div style={{ maxWidth: WORK_CANVAS, margin: "0 auto" }}>
        <div style={wkEyebrow}>What We Built</div>
        <ul style={{ marginTop: 28, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14, maxWidth: 860 }}>
          {items.map((t, i) => (
            <li key={i} style={{ display: "flex", gap: 14, fontSize: 16, lineHeight: 1.6, color: "var(--bm-text)" }}>
              <span style={{
                flexShrink: 0, width: 26, height: 26, borderRadius: 999,
                background: "rgba(109,145,242,0.12)", border: "1px solid rgba(109,145,242,0.28)",
                color: "var(--bm-accent)", fontSize: 12, fontWeight: 600,
                display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 2,
              }}>{i + 1}</span>
              <span>{t}</span>
            </li>
          ))}
        </ul>
        {tags && tags.length > 0 && (
          <div data-bm-tags style={{ marginTop: 36, display: "flex", flexWrap: "wrap", gap: 10 }}>
            {tags.map((t) => (
              <span key={t} style={{
                display: "inline-flex", alignItems: "center", padding: "8px 14px", borderRadius: 999,
                fontSize: 12, fontWeight: 500, lineHeight: 1,
                background: "rgba(109,145,242,0.15)", color: "var(--bm-accent)", border: "1px solid rgba(109,145,242,0.28)",
              }}>{t}</span>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function WorkPage({ data }) {
  return (
    <>
      <SiteNav />
      <WorkBackLink />
      <main>
        <WorkHero data={data} />
        <WorkOutcomes heroStat={data.heroStat} outcomes={data.outcomes} />
        <WorkChallenge text={data.challenge} />
        <WorkSolution items={data.solution} tags={data.tags} />
        <LetsTalk />
      </main>
      <SiteFooter />
      <AgentModal />
    </>
  );
}

Object.assign(window, { WorkPage });