/* eslint-disable */
// Work, case studies index + a single representative detail view.

const CASES = [
{
  slug: "national-building-proposals",
  acc: "agents",
  pillar: "build",
  industry: "Construction",
  headline: "From 4-hour proposal drafts to 12 minutes.",
  client: "National building services firm",
  size: "60 staff",
  summary: "An end-to-end proposal generator pulling from CRM, project history, and a content library, drafts ready in minutes.",
  metric: { value: "20×", label: "faster proposals" },
  featured: true
},
{
  slug: "architecture-knowledge-search",
  acc: "knowledge",
  pillar: "build",
  industry: "Architecture",
  headline: "One search bar across 7 years of project files.",
  client: "Regional architecture practice",
  size: "22 staff",
  summary: "A natural-language search layer over Drive, Notion and the project archive. The team stopped re-asking colleagues for the same files.",
  metric: { value: "6 hrs", label: "saved per week, per architect" }
},
{
  slug: "dtc-demand-forecasting",
  acc: "decision",
  pillar: "build",
  industry: "DTC retail",
  headline: "Weekly demand forecasts the ops team actually use.",
  client: "DTC pet-food brand",
  size: "14 staff",
  summary: "A forecasting model trained on 3 years of order data, surfaced as a Monday-morning dashboard the ops team trusts.",
  metric: { value: "31%", label: "drop in stockouts" }
},
{
  slug: "claims-triage-agent",
  acc: "agents",
  pillar: "build",
  industry: "Insurance",
  headline: "AI agent triages 70% of inbound claims at intake.",
  client: "AU general insurer",
  size: "120 staff",
  summary: "An agent that classifies, prioritises, and routes inbound claims by severity. Humans still handle the edge cases, but fewer of them.",
  metric: { value: "70%", label: "of claims auto-triaged" }
},
{
  slug: "sales-tool-adoption",
  acc: "tool",
  pillar: "build",
  industry: "B2B services",
  headline: "30-person sales team using Copilot, not just paying for it.",
  client: "B2B SaaS reseller",
  size: "32 staff",
  summary: "Tool-selection, configuration, and a structured adoption program. Six months later, 28 of 30 reps use Copilot daily.",
  metric: { value: "93%", label: "active daily usage" }
},
{
  slug: "ocean-lovers-blueprint",
  acc: "decision",
  pillar: "strategy",
  industry: "Not-for-profit",
  headline: "A blueprint for AI without losing what made the festival ours.",
  client: "Ocean Lovers Festival",
  size: "Volunteer-led",
  summary: "A practical AI Blueprint that mapped real opportunities to the festival's mission and capacity, without recommending tools they didn't need.",
  metric: { value: "Real plan", label: "to implement, not a deck" }
},
{
  slug: "regional-firm-literacy",
  acc: "tool",
  pillar: "enable",
  industry: "Professional services",
  headline: "From AI-curious to AI-confident in 8 workshops.",
  client: "Regional accounting firm",
  size: "45 staff",
  summary: "A full AI Literacy program across Fundamentals, Skills, and Application, paired with role-based playbooks for partners, seniors and admin.",
  metric: { value: "8 wks", label: "program length" }
},
{
  slug: "health-governance",
  acc: "tool",
  pillar: "enable",
  industry: "Healthcare",
  headline: "An AI governance practice, stood up and embedded.",
  client: "AU allied health network",
  size: "85 staff",
  summary: "A working AI use policy, carrot and stick, with a data classification model and an accountability map for automated decisions, sized to a 5-clinic network and aligned to VAISS.",
  metric: { value: "VAISS", label: "aligned across 5 sites" }
}];


const ACC_FILTERS = [
{ key: "all", label: "All work" },
{ key: "agents", label: "Agentic AI", dotCls: "acc-dot--agents", tone: "agents" },
{ key: "knowledge", label: "Knowledge AI", dotCls: "acc-dot--knowledge", tone: "knowledge" },
{ key: "decision", label: "Data AI", dotCls: "acc-dot--decision", tone: "decision" },
{ key: "tool", label: "Task AI", dotCls: "acc-dot--tool", tone: "tool" }];


const PILLAR_FILTERS = [
{ key: "all", label: "All pillars" },
{ key: "strategy", label: "Strategy", tone: "strategy" },
{ key: "enable", label: "Foundations", tone: "enable" },
{ key: "build", label: "Build", tone: "build" }];


function WorkScreen({ go, t }) {
  const [acc, setAcc] = React.useState("all");
  const [pillar, setPillar] = React.useState("all");
  const [detail, setDetail] = React.useState(null);

  const filtered = React.useMemo(() => {
    return CASES.filter((c) => {
      if (acc !== "all" && c.acc !== acc) return false;
      if (pillar !== "all" && c.pillar !== pillar) return false;
      return true;
    });
  }, [acc, pillar]);

  const accCounts = React.useMemo(() => {
    const o = { all: CASES.length };
    CASES.forEach((c) => {o[c.acc] = (o[c.acc] || 0) + 1;});
    return o;
  }, []);

  if (detail) {
    return <WorkDetail caseStudy={detail} onBack={() => setDetail(null)} go={go} t={t} />;
  }

  const featured = filtered.find((c) => c.featured) || filtered[0];
  const rest = filtered.filter((c) => c !== featured);

  return (
    <div data-screen-label="12 Work">
      {/* HERO */}
      <section className="section section--white" style={{ paddingTop: 80, paddingBottom: 32 }}>
        <div className="container">
          <Crumbs items={["Intelligence Assist", "Case studies"]} />
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr .8fr", gap: 64, alignItems: "end", marginTop: 22 }}>
            <div>
              <Tag tone="strategy" dot>Case studies</Tag>
              <h1 className="h-display" style={{ marginTop: 16, maxWidth: "16ch" }}>
                Our <em>work</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                Every organisation's AI journey looks a little different. Here are some of the ones
                we've been part of, along with our thinking on what makes AI adoption work.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* TOOLBAR, filters */}
      <section style={{ position: "sticky", top: 68, zIndex: 20, background: "rgba(250,250,247, .92)", backdropFilter: "blur(12px)", borderBottom: "1px solid var(--hairline)" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 12, padding: "18px 28px" }}>
          <div className="filter-row">
            <span className="filter-row-lbl">Accelerator</span>
            <div className="filter-chips">
              {ACC_FILTERS.map((f) =>
              <button
                key={f.key}
                onClick={() => setAcc(f.key)}
                className={`filter-chip ${acc === f.key ? "filter-chip--active" : ""}`}>
                
                  {f.dotCls && <span className={`acc-dot ${f.dotCls}`} style={{ width: 8, height: 8 }} />}
                  <span>{f.label}</span>
                  <span className="filter-count">{accCounts[f.key] || 0}</span>
                </button>
              )}
            </div>
          </div>
          <div className="filter-row">
            <span className="filter-row-lbl">Pillar</span>
            <div className="filter-chips">
              {PILLAR_FILTERS.map((f) =>
              <button
                key={f.key}
                onClick={() => setPillar(f.key)}
                className={`filter-chip ${pillar === f.key ? "filter-chip--active" : ""}`}>
                
                  {f.tone && <span style={{ width: 8, height: 8, borderRadius: 999, background: `var(--pl-${f.tone}-fg)` }} />}
                  <span>{f.label}</span>
                </button>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* GRID */}
      <section className="section section--paper" style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, fontSize: 13, color: "#5C6172" }}>
            <span>{filtered.length} {filtered.length === 1 ? "study" : "studies"}</span>
            {(acc !== "all" || pillar !== "all") &&
            <button
              onClick={() => {setAcc("all");setPillar("all");}}
              style={{ background: 0, border: 0, color: "var(--ia-blue)", fontFamily: "inherit", fontSize: 13, fontWeight: 500, cursor: "pointer", padding: 0 }}>
              Clear filters</button>
            }
          </div>

          {filtered.length === 0 ?
          <div style={{ background: "#fff", border: "1px dashed var(--hairline)", borderRadius: 18, padding: 56, textAlign: "center", color: "#5C6172", fontSize: 15 }}>
              No studies match those filters. We probably have private work that does, <span style={{ color: "var(--ia-blue)", cursor: "pointer" }} onClick={() => go("contact")}>ask us</span>.
            </div> :

          <>
              {featured &&
            <div style={{ marginBottom: 20 }}>
                  <FeaturedCaseCard caseStudy={featured} onOpen={() => setDetail(featured)} />
                </div>
            }
              <div className="case-grid">
                {rest.map((c) =>
              <CaseStudyCard key={c.slug} caseStudy={c} onOpen={() => setDetail(c)} />
              )}
              </div>
            </>
          }
        </div>
      </section>

      {/* BOTTOM SOFT-CTA */}
      <section className="section section--paper" style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="Got a problem that looks like one of these?"
            title={<span>Tell us the outcome. We'll tell you which engagement shape fits, and whether we've shipped something similar.</span>}
            cta="Talk to us"
            onCta={() => go("contact")}
            variant="primary"
          />
        </div>
      </section>
    </div>);

}

// ---------- Featured case (large hero card) ----------
function FeaturedCaseCard({ caseStudy, onOpen }) {
  const c = caseStudy;
  return (
    <article className="case-feature" onClick={onOpen}>
      <div className="case-feature-img">
        <image-slot
          id={`work-feature-${c.slug}`}
          placeholder={`Hero image for "${c.headline}"`}
          shape="rect"
          fit="cover"
          style={{ height: "100%", width: "100%" }} />
        
      </div>
      <div className="case-feature-body">
        <div className="row">
          <Tag tone={c.acc} dot>{accLabel(c.acc)}</Tag>
          <Tag tone={c.pillar}>{pillarLabel(c.pillar)}</Tag>
          <span style={{ fontSize: 12, color: "#9BA0AE", letterSpacing: ".06em", }}>Featured</span>
        </div>
        <h2 style={{ margin: "16px 0 12px", fontSize: 36, fontWeight: 600, letterSpacing: "-0.022em", lineHeight: 1.1, maxWidth: "20ch" }}>
          {c.headline}
        </h2>
        <p style={{ margin: 0, color: "#4A4F60", fontSize: 16, lineHeight: 1.55, maxWidth: "60ch" }}>{c.summary}</p>
        <div className="case-feature-meta">
          <div className="case-meta-block">
            <span className="case-meta-lbl">Client</span>
            <span className="case-meta-val">{c.client}</span>
          </div>
          <div className="case-meta-block">
            <span className="case-meta-lbl">Industry</span>
            <span className="case-meta-val">{c.industry}</span>
          </div>
          <div className="case-meta-block">
            <span className="case-meta-lbl">Outcome</span>
            <span className="case-meta-val case-meta-val--big">{c.metric.value}</span>
            <span className="case-meta-sub">{c.metric.label}</span>
          </div>
        </div>
        <div style={{ marginTop: 20 }}>
          <Button variant="primary">Read the study <Icon name="arrow-right" size={14} className="arrow" /></Button>
        </div>
      </div>
    </article>);

}

// ---------- Standard case card ----------
function CaseStudyCard({ caseStudy, onOpen }) {
  const c = caseStudy;
  return (
    <article className="work-card" onClick={onOpen}>
      <div className="work-card-img">
        <image-slot
          id={`work-${c.slug}`}
          placeholder={`Hero image for "${c.headline}"`}
          shape="rect"
          fit="cover"
          style={{ height: "100%", width: "100%" }} />
        
        <div className="work-card-pillar">
          <Tag tone={c.pillar}>{pillarLabel(c.pillar)}</Tag>
        </div>
      </div>
      <div className="work-card-body">
        <Tag tone={c.acc} dot>{accLabel(c.acc)}</Tag>
        <h3 className="work-card-headline">{c.headline}</h3>
        <p className="work-card-summary">{c.summary}</p>
        <div className="work-card-foot">
          <div className="work-card-client">
            <strong>{c.client}</strong>
            <span>{c.industry} · {c.size}</span>
          </div>
          <div className="work-card-metric">
            <span className="work-card-metric-val">{c.metric.value}</span>
            <span className="work-card-metric-lbl">{c.metric.label}</span>
          </div>
        </div>
      </div>
    </article>);

}

// ---------- Case study detail view ----------
function WorkDetail({ caseStudy, onBack, go, t }) {
  const c = caseStudy;
  return (
    <div data-screen-label={`Case · ${c.client}`}>
      {/* Back bar */}
      <section className="section section--white" style={{ paddingTop: 32, paddingBottom: 24 }}>
        <div className="container">
          <button
            onClick={onBack}
            style={{ background: 0, border: 0, padding: 0, cursor: "pointer", color: "#5C6172", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontSize: 13.5 }}>
            
            <Icon name="arrow-left" size={14} /> All case studies
          </button>
        </div>
      </section>

      {/* Hero */}
      <section className="section section--white" style={{ paddingTop: 0, paddingBottom: 64 }}>
        <div className="container">
          <div className="row" style={{ gap: 8, marginBottom: 16 }}>
            <Tag tone={c.acc} dot>{accLabel(c.acc)}</Tag>
            <Tag tone={c.pillar}>{pillarLabel(c.pillar)}</Tag>
          </div>
          <h1 className="h-display" style={{ maxWidth: "20ch" }}>{c.headline}</h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: "60ch" }}>{c.summary}</p>

          <div style={{ marginTop: 36, borderRadius: 22, overflow: "hidden", minHeight: 460, background: "#F2F2EE", border: "1px solid var(--hairline)" }}>
            <image-slot
              id={`work-detail-${c.slug}`}
              placeholder={`Hero image for "${c.headline}"`}
              shape="rect"
              fit="cover"
              style={{ height: 460, width: "100%" }} />
            
          </div>
        </div>
      </section>

      {/* Meta strip */}
      <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 32 }}>
        <div className="container">
          <div className="case-detail-meta">
            <DetailMeta label="Client" value={c.client} />
            <DetailMeta label="Industry" value={c.industry} />
            <DetailMeta label="Team size" value={c.size} />
            <DetailMeta label="Engagement" value={c.pillar === "build" ? "Custom Build" : c.pillar === "strategy" ? "AI Blueprint" : "Foundations"} />
            <DetailMeta label="Outcome" value={c.metric.value} sub={c.metric.label} highlight />
          </div>
        </div>
      </section>

      {/* Story body (placeholder structure) */}
      <section className="section section--white" style={{ paddingTop: 64, paddingBottom: 80 }}>
        <div className="container container--narrow">
          <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 48 }}>
            <div className="case-section-eyebrow">The brief</div>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ink)", margin: 0 }}>
              A short, plain-English description of what {c.client.toLowerCase()} came to us with, the friction in their day-to-day, what they'd already tried, and what good looked like.
            </p>
          </div>

          <hr className="divider" style={{ margin: "48px 0" }} />

          <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 48 }}>
            <div className="case-section-eyebrow">What we did</div>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink)", margin: 0 }}>
                The actual work, written for someone deciding whether to buy something similar, not for a portfolio reviewer. Tools chosen and why. Decisions taken. Where we said no.
              </p>
              <ul className="bullet-list" style={{ marginTop: 18 }}>
                <li>Phase 1, a focused discovery with the team doing the work.</li>
                <li>Phase 2, pilot built around the highest-leverage opportunity.</li>
                <li>Phase 3, rollout and a post-launch support window.</li>
              </ul>
            </div>
          </div>

          <hr className="divider" style={{ margin: "48px 0" }} />

          <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 48 }}>
            <div className="case-section-eyebrow">The outcome</div>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink)", margin: 0 }}>
                What changed for the business, measured in hours saved, errors avoided, or revenue unlocked. We try to keep this honest, including what didn't work.
              </p>
              <div className="case-outcome-stat">
                <span className="case-outcome-val">{c.metric.value}</span>
                <span className="case-outcome-lbl">{c.metric.label}</span>
              </div>
            </div>
          </div>

          <hr className="divider" style={{ margin: "48px 0" }} />

          <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 48 }}>
            <div className="case-section-eyebrow">In their words</div>
            <blockquote className="ia-quote" style={{ margin: 0, fontSize: 22, fontStyle: "normal", fontFamily: "var(--font-body)", lineHeight: 1.4, color: "var(--ink)", borderLeft: "3px solid var(--ia-blue)", paddingLeft: 24, fontWeight: 500 }}>
              "A short client quote goes here, ideally one sentence about what changed, not a generic endorsement of us."
              <footer style={{ marginTop: 14, fontSize: 14, color: "#5C6172", fontWeight: 400 }}>,  Client name, role at {c.client}</footer>
            </blockquote>
          </div>
        </div>
      </section>

      {/* SOFT-CTA */}
      <section className="section section--paper" style={{ paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="Got a problem that rhymes with this one?"
            title={<span>A scoping call is the fastest way to find out. 45 minutes, no deck, no pitch.</span>}
            cta="Talk to us"
            onCta={() => go("contact")}
            variant="primary"
          />
        </div>
      </section>
    </div>);

}

function DetailMeta({ label, value, sub, highlight }) {
  return (
    <div className={`case-detail-meta-block ${highlight ? "case-detail-meta-block--hl" : ""}`}>
      <span className="case-meta-lbl">{label}</span>
      <span className={`case-meta-val ${highlight ? "case-meta-val--big" : ""}`}>{value}</span>
      {sub && <span className="case-meta-sub">{sub}</span>}
    </div>);

}

function accLabel(key) {
  return {
    agents: "Agentic AI",
    knowledge: "Knowledge AI",
    decision: "Data AI",
    tool: "Task AI"
  }[key] || key;
}
function pillarLabel(key) {
  return { strategy: "Strategy", enable: "Foundations", build: "Build" }[key] || key;
}

window.WorkScreen = WorkScreen;