// pw-cases.jsx — case study cards, the full library page, and the home teaser.
const PWC = window.PW_CASES;
// Only the published subset reaches the page; the rest stay in pw-cases.js.
const PWC_LIVE = PWC.items.filter(i => PWC.shown.includes(i.n));

function CaseStat({ s }) {
  return (
    <div className="pw-case-stat">
      <span className="pw-case-stat-l">{s.l}</span>
      <span className="pw-case-stat-v">{s.v}</span>
    </div>
  );
}

// Full detail lives behind a toggle rather than on 22 separate pages — the
// library is meant to be scanned, then opened where a prospect objection matches.
function CaseCard({ c, open: startOpen = false }) {
  const [open, setOpen] = React.useState(startOpen);
  return (
    <article className={`pw-case ${open ? "is-open" : ""}`}>
      <div className="pw-case-top">
        <span className="pw-case-num">{c.n}</span>
        <span className="pw-case-cat">{c.cat}</span>
      </div>
      <h3 className="pw-case-h">{c.client}: <span>{c.t}</span></h3>
      <p className="pw-case-sub">{c.sub}</p>
      <div className="pw-case-stats">{c.stats.map((s, i) => <CaseStat s={s} key={i}/>)}</div>
      <p className="pw-case-take">{c.takeaway}</p>

      {open && (
        <div className="pw-case-body">
          <h4>The business problem</h4>
          <p>{c.problem}</p>
          <h4>What we did</h4>
          <ul>{c.strategy.map((x, i) => <li key={i}><span><Tick c="#2EB5B4"/></span>{x}</li>)}</ul>
          <h4>Results</h4>
          <ul>{c.results.map((x, i) => <li key={i}><span><Tick c="#146C34"/></span>{x}</li>)}</ul>
          <h4>Services shown</h4>
          <p>{c.services}</p>
          <h4>Best-fit businesses</h4>
          <p>{c.fit}</p>
        </div>
      )}

      <button className="pw-case-toggle" onClick={() => setOpen(v => !v)} aria-expanded={open}>
        {open ? "Hide the detail" : "Read the full study"}
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"
             style={{ transition: "transform .2s", transform: open ? "rotate(180deg)" : "none" }}>
          <path d="M2 4.5L6 8.5L10 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
    </article>
  );
}

// ── Home page teaser ──────────────────────────────────────────────────────
function HomeCases() {
  const picks = PWC.featured.map(n => PWC_LIVE.find(i => i.n === n)).filter(Boolean);
  return (
    <section className="sec sec-grey">
      <div className="container">
        <div className="sec-head reveal">
          <h2 className="h2">Featured <span className="accent">Case Studies</span></h2>
          <p className="lead">Real businesses, real results. From local service businesses to national ecommerce brands, we've helped companies across industries turn digital marketing into measurable growth.</p>
        </div>
        <div className="pw-case-grid pw-case-grid-3 reveal">
          {picks.map(c => <CaseCard c={c} key={c.n}/>)}
        </div>
        <div className="process-cta reveal">
          <a href="pw-case-studies.html" className="btn btn-primary btn-arr">View all case studies <Arr/></a>
        </div>
      </div>
    </section>
  );
}

// ── Full library page ─────────────────────────────────────────────────────
function CaseStudiesPage() {
  const [g, setG] = React.useState("all");
  const shown = g === "all" ? PWC_LIVE : PWC_LIVE.filter(i => i.g === g);
  const active = PWC.groups.find(x => x.id === g);
  return (
    <>
      <PwNav active="cases"/>

      <section className="hero pw-hero">
        <video className="hero-bg-video" autoPlay loop muted playsInline preload="auto" aria-hidden="true">
          <source src="images/header-bg/ai-bg-video.mp4" type="video/mp4"/>
        </video>
        <div className="hero-bg-overlay" aria-hidden="true"/>
        <div className="container">
          <div className="hero-grid pw-hero-solo">
            <div>
              <h1 className="h1" style={{ margin: "16px 0 22px" }}>Proof, <span className="accent">Not Promises.</span></h1>
              <p className="lead" style={{ maxWidth: 760 }}>
                {PWC_LIVE.length} campaigns, with the numbers attached. Search visibility, cost per lead,
                online revenue — what changed, what we did, and which kind of business it applies to.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="container">
          <div className="pw-case-filters reveal" role="tablist" aria-label="Filter case studies">
            <button role="tab" aria-selected={g === "all"} className={`pw-case-filter ${g === "all" ? "is-on" : ""}`}
                    onClick={() => setG("all")}>All <span>{PWC_LIVE.length}</span></button>
            {PWC.groups.map(x => (
              <button role="tab" key={x.id} aria-selected={g === x.id}
                      className={`pw-case-filter ${g === x.id ? "is-on" : ""}`} onClick={() => setG(x.id)}>
                {x.l} <span>{PWC_LIVE.filter(i => i.g === x.id).length}</span>
              </button>
            ))}
          </div>
          {active && <p className="pw-case-groupnote reveal">{active.d}</p>}

          <div className="pw-case-grid reveal">
            {shown.map(c => <CaseCard c={c} key={c.n}/>)}
          </div>

          <p className="pw-case-disclaimer">{PWC.disclaimer}</p>
        </div>
      </section>

      <FinalCta img={(window.PW_ASSETS || {}).home && window.PW_ASSETS.home.finalCta}/>
      <PwFooter/>
    </>
  );
}

Object.assign(window, { CaseStudiesPage, HomeCases, CaseCard });