/* Cases hub + Case Detail */
const { Container: CC, Reveal: CR, Eyebrow: CE, Mono: CM, PageHeader: CPH, CTABand: CCTA, PolygonAccent: CPA, Breadcrumbs, PALETTE: CP } = window;

function CasesHub({ onNavigate, onOpenCase }) {
  const [filter, setFilter] = useState('All');
  const filters = ['All','Build','Promote','Optimize for AI','Strategy'];
  const tagToBucket = (tag) => {
    if (['Web','CRM','App'].some(t => tag.includes(t))) return 'Build';
    if (['SEO','PPC','SMM','Performance','Content'].some(t => tag.includes(t))) return 'Promote';
    if (['GEO','AEO','LLM','AI','Analytics'].some(t => tag.includes(t))) return 'Optimize for AI';
    return 'Strategy';
  };
  const filtered = filter === 'All' ? CASES : CASES.filter(c => c.tags.some(t => tagToBucket(t) === filter));

  return (
    <main data-page-root>
      <CPH
        num="04"
        eyebrow="Cases · Selected"
        title={<>WORK, NOT<br/>DELIVERABLES.</>}
        lede="Each engagement is a system, not a campaign. Placeholder thumbnails will be replaced with production screenshots and outcomes confirmed by clients."
        color={CP.red}
        art="cases"
        breadcrumbs={[
          { label:'Home', onClick: () => onNavigate('home') },
          { label:'Cases' },
        ]}
      />

      <section className="py-8 md:py-10 border-b-2 border-ink sticky-strip bg-paper">
        <CC>
          <div className="flex items-center justify-between gap-6 flex-wrap">
            <div className="flex items-center gap-2 flex-wrap">
              {filters.map((f,i) => {
                const color = [CP.red, CP.blue, CP.orange, CP.purple, CP.green][i] || CP.red;
                const active = filter === f;
                return (
                  <button key={f} onClick={() => setFilter(f)}
                    className={`num font-bold px-3.5 py-2 border-2 transition-colors ${active?'border-ink text-paper':'border-ink text-ink hover:bg-ink hover:text-paper'}`}
                    style={active?{background:color, borderColor: CP.ink}:{}}
                  >
                    {f}
                  </button>
                );
              })}
            </div>
            <div className="num text-mute">{filtered.length} of {CASES.length} cases</div>
          </div>
        </CC>
      </section>

      <section className="py-16 md:py-24">
        <CC>
          <div className="grid grid-cols-12 gap-x-8 gap-y-14">
            {filtered.map((c, idx) => {
              const span = (idx % 4 === 0 || idx % 4 === 3) ? 'md:col-span-7' : 'md:col-span-5';
              const aspect = idx % 3 === 0 ? 'aspect-[16/10]' : idx % 3 === 1 ? 'aspect-[4/3]' : 'aspect-[5/4]';
              const textColor = c.color === CP.yellow ? '#0A0A0A' : '#FFFFFF';
              return (
                <CR key={c.slug} className={`col-span-12 ${span}`} delay={idx*50}>
                  <button onClick={() => onOpenCase(c.slug)} className="case-tile group block w-full text-left">
                    <div className={`relative ${aspect} overflow-hidden border-2 border-ink`}
                         style={{ background: c.color }}
                         data-asset={`case-thumbnail-${c.slug}`}>
                      <div className="case-thumb absolute inset-0">
                        <div className="absolute inset-0 pointer-events-none opacity-90" style={{
                          backgroundImage: 'linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)',
                          backgroundSize: '32px 32px'
                        }}></div>
                        <div className="absolute -right-16 -bottom-16 opacity-25">
                          <CPA size={260} />
                        </div>
                        <div className="absolute inset-0 grid place-items-center p-6">
                          <div className="display text-[44px] md:text-[88px] text-center leading-[0.9]" style={{color: textColor}}>
                            {c.name.toUpperCase()}
                          </div>
                        </div>
                      </div>
                      <div className="absolute top-4 left-4 num font-bold" style={{color: textColor, opacity:0.85}}>{String(idx+1).padStart(2,'0')}</div>
                      <div className="absolute top-4 right-4 flex gap-1.5 flex-wrap justify-end max-w-[60%]">
                        {c.tags.map(t => <span key={t} className="tag-chip tag-chip-dark" style={{color: textColor, borderColor: textColor+'90'}}>{t}</span>)}
                      </div>
                    </div>
                    <div className="mt-5 grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4">
                      <div>
                        <div className="flex items-center gap-3">
                          <span className="w-2.5 h-2.5 inline-block" style={{background:c.color}}></span>
                          <h3 className="display text-[28px] md:text-[34px]">{c.name.toUpperCase()}</h3>
                        </div>
                        <p className="mt-2 text-[15.5px] text-ink/80 max-w-[52ch] leading-[1.55]">{c.line}</p>
                      </div>
                      <div className="md:text-right">
                        <div className="num text-mute">{c.industry}</div>
                        <div className="num text-ink font-bold mt-3">OPEN →</div>
                      </div>
                    </div>
                  </button>
                </CR>
              );
            })}
          </div>
        </CC>
      </section>

      <CCTA onNavigate={onNavigate} />
    </main>
  );
}

/* ---------- Case Detail ---------- */
function CaseDetail({ slug, onNavigate, onOpenCase }) {
  const c = CASES.find(x => x.slug === slug) || CASES[0];
  const others = CASES.filter(x => x.slug !== c.slug).slice(0,3);
  const textColor = c.color === CP.yellow ? '#0A0A0A' : '#FFFFFF';

  return (
    <main data-page-root>
      <div className="pt-[68px]">
        <Breadcrumbs trail={[
          { label:'Home',  onClick: () => onNavigate('home') },
          { label:'Cases', onClick: () => onNavigate('cases') },
          { label:c.name },
        ]} />
      </div>
      {/* Hero — colored full-width band w/ case color */}
      <section className="pt-12 md:pt-16 pb-16 md:pb-20 border-b-2 border-ink relative overflow-hidden" style={{background: c.color, color: textColor}}>
        <div className="absolute -right-24 top-10 opacity-25 pointer-events-none">
          <CPA size={500} />
        </div>
        <CC className="relative">
          <button onClick={() => onNavigate('cases')} className="num font-bold mb-8 hover:underline" style={{color: textColor, opacity:0.8}}>← All cases</button>
          <div className="grid grid-cols-12 gap-8 items-end">
            <div className="col-span-12 md:col-span-8">
              <div className="num font-bold mb-4" style={{color: textColor, opacity:0.8}}>{c.industry}</div>
              <h1 className="display display-tight text-[48px] sm:text-[72px] md:text-[112px] lg:text-[136px] xl:text-[152px]" style={{color: textColor}}>
                {c.name.toUpperCase()}
              </h1>
              <p className="display-mix text-[20px] md:text-[28px] leading-[1.3] mt-8 max-w-[42ch] font-medium" style={{color: textColor}}>
                {c.line}
              </p>
            </div>
            <div className="col-span-12 md:col-span-4 md:pl-8 md:border-l-2" style={{borderColor: textColor + '40'}}>
              <dl className="space-y-5">
                {[
                  ['Client',     c.name],
                  ['Industry',   c.industry],
                  ['Services',   c.tags.join(' · ')],
                  ['Engagement', 'Project + retainer'],
                  ['Year',       '2024 — present'],
                ].map(([k,v]) => (
                  <div key={k}>
                    <dt className="num font-bold" style={{color: textColor, opacity:0.7}}>{k}</dt>
                    <dd className="display-mix text-[17px] font-medium mt-1" style={{color: textColor}}>{v}</dd>
                  </div>
                ))}
              </dl>
            </div>
          </div>
        </CC>
      </section>

      {/* Hero screenshot */}
      <section className="py-16 bg-paper2 border-b-2 border-ink">
        <CC>
          <div className="relative aspect-[16/9] border-2 border-ink overflow-hidden placeholder-thumb" data-asset={`case-screenshot-${c.slug}-hero`}>
            <div className="absolute inset-0 grid place-items-center">
              <div className="display text-[64px] md:text-[140px]" style={{color: c.color, opacity: 0.25}}>{c.name.toUpperCase()}</div>
            </div>
            <div className="label">data-asset · case-screenshot-{c.slug}-hero</div>
          </div>
        </CC>
      </section>

      {/* Context / Problem / What we did */}
      <section className="py-24 md:py-28">
        <CC>
          <div className="grid grid-cols-12 gap-10">
            <div className="col-span-12 md:col-span-3">
              <CE num="01" label="Client context" color={CP.blue} />
            </div>
            <div className="col-span-12 md:col-span-9">
              <p className="display-mix text-[26px] md:text-[36px] leading-[1.2] font-medium max-w-[34ch]">
                An established practice with strong referral business, weak digital presence, and zero visibility in <span style={{color:c.color}}>AI search</span>.
              </p>
              <p className="mt-8 text-[16.5px] text-ink/80 leading-[1.65] max-w-[60ch]">
                The team had grown by reputation and word-of-mouth. New buyer behavior — searching, asking ChatGPT, comparing on Google before calling — was not reflected in inbound. The mandate: build a digital surface that actually represents the practice, and instrument it so AI tools can find and recommend it.
              </p>
            </div>
          </div>

          <hr className="my-20 border-ink/15" />

          <div className="grid grid-cols-12 gap-10">
            <div className="col-span-12 md:col-span-3">
              <CE num="02" label="The problem" color={CP.red} />
            </div>
            <div className="col-span-12 md:col-span-9">
              <ul className="border-2 border-ink">
                {[
                  ['Invisibility',     'No share-of-voice in local search or AI answers.',          CP.red],
                  ['Outdated surface', 'Existing site predated current buyer expectations.',       CP.orange],
                  ['No measurement',   'No conversion tracking, no funnel, no attribution.',       CP.blue],
                  ['No system',        'Sales relied entirely on referrals — un-scalable.',        CP.purple],
                ].map(([t,d,col],i,arr) => (
                  <li key={t} className={`grid grid-cols-[20px_180px_1fr] md:grid-cols-[24px_240px_1fr] py-5 px-5 md:px-7 gap-6 items-baseline ${i<arr.length-1?'border-b-2 border-ink':''}`}>
                    <span className="w-3 h-3 inline-block" style={{background:col}}></span>
                    <span className="display text-[20px] md:text-[24px]">{t.toUpperCase()}</span>
                    <span className="text-[15.5px] text-ink/80 leading-[1.55]">{d}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <hr className="my-20 border-ink/15" />

          <div className="grid grid-cols-12 gap-10">
            <div className="col-span-12 md:col-span-3">
              <CE num="03" label="What we did" color={CP.green} />
            </div>
            <div className="col-span-12 md:col-span-9">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                {[
                  ['Audit & strategy',     'Diagnostic of channels, AI visibility, and competitive surface. Mapped the buyer journey end-to-end.',         CP.red],
                  ['New site',             'A bilingual editorial site engineered for retrieval — entity-grade pages, schema, internal authority structure.', CP.orange],
                  ['Local SEO system',     'Place pages, structured data, citation graph, and review velocity program.',                                   CP.yellow],
                  ['AI visibility layer',  'Per-model monitoring for ChatGPT, Claude, Gemini, Perplexity. Iteration loop established.',                    CP.green],
                  ['Lead funnel',          'Form to CRM to outreach sequence. Calendly booking layer. Analytics on every step.',                          CP.blue],
                  ['Operating cadence',    'Monthly review with the partner; quarterly playbook update.',                                                  CP.purple],
                ].map(([t,d,col],i) => (
                  <div key={t} className="border-2 border-ink p-5 relative">
                    <div className="absolute top-0 left-0 right-0 h-1.5" style={{background: col}}></div>
                    <span className="num font-bold mt-2 block" style={{color: col}}>W{String(i+1).padStart(2,'0')}</span>
                    <h4 className="display text-[22px] mt-3">{t.toUpperCase()}</h4>
                    <p className="mt-2 text-[14.5px] text-ink/80 leading-[1.55]">{d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </CC>
      </section>

      {/* Screenshots */}
      <section className="py-16 bg-paper2 border-y-2 border-ink">
        <CC>
          <div className="flex items-end justify-between mb-10">
            <CE num="04" label="System delivered" color={CP.orange} />
            <span className="num text-mute hidden md:inline">Screenshots · placeholders</span>
          </div>
          <div className="grid grid-cols-12 gap-6">
            <div className="col-span-12 md:col-span-8 aspect-[16/10] border-2 border-ink overflow-hidden placeholder-thumb relative" data-asset={`case-screenshot-${c.slug}-1`}>
              <div className="absolute inset-0 grid place-items-center"><span className="display text-[44px] md:text-[64px]" style={{color: c.color, opacity:0.25}}>HOME / HERO</span></div>
              <div className="label">data-asset · case-screenshot-{c.slug}-1</div>
            </div>
            <div className="col-span-12 md:col-span-4 aspect-[16/10] border-2 border-ink overflow-hidden placeholder-thumb relative" data-asset={`case-screenshot-${c.slug}-2`}>
              <div className="absolute inset-0 grid place-items-center"><span className="display text-[36px]" style={{color: c.color, opacity:0.25}}>SERVICES</span></div>
              <div className="label">data-asset · case-screenshot-{c.slug}-2</div>
            </div>
            <div className="col-span-12 md:col-span-5 aspect-[4/5] border-2 border-ink overflow-hidden placeholder-thumb dark relative" data-asset={`case-screenshot-${c.slug}-3`}>
              <div className="absolute inset-0 grid place-items-center"><span className="display text-[32px] text-paper/30">MOBILE / BOOKING</span></div>
              <div className="label">data-asset · case-screenshot-{c.slug}-3</div>
            </div>
            <div className="col-span-12 md:col-span-7 aspect-[16/10] border-2 border-ink overflow-hidden placeholder-thumb relative" data-asset={`case-screenshot-${c.slug}-4`}>
              <div className="absolute inset-0 grid place-items-center"><span className="display text-[40px]" style={{color: c.color, opacity:0.25}}>AI VISIBILITY DASHBOARD</span></div>
              <div className="label">data-asset · case-screenshot-{c.slug}-4</div>
            </div>
          </div>
        </CC>
      </section>

      {/* Results — rainbow grid */}
      <section className="py-24 md:py-28">
        <CC>
          <CE num="05" label="Signals" color={CP.green} />
          <h2 className="display display-tight text-[40px] md:text-[80px] mt-6 max-w-[20ch]">
            OUTCOMES FROM A SYSTEM THAT <span style={{color: c.color}}>COMPOUNDS</span>.
          </h2>
          <div className="mt-10 grid grid-cols-2 md:grid-cols-4 border-2 border-ink">
            {[
              ['3.4×', 'Qualified inbound',  'vs. 6-month baseline',                              CP.red],
              ['4',    'LLM citations',      'across GPT / Claude / Gemini / Perplexity',         CP.green],
              ['67%',  'Form-to-booking',    'after funnel rebuild',                              CP.blue],
              ['1st',  'Local map pack',     'for core service queries',                          CP.purple],
            ].map(([n,l,s,col],i,arr) => (
              <div key={l} className={`bg-paper p-6 md:p-8 relative ${i<arr.length-1?'border-r-0 md:border-r-2':''} ${i<2?'border-b-2 md:border-b-2':'md:border-b-0'} ${i%2===0?'border-r-2':''} border-ink`}>
                <div className="absolute top-0 left-0 right-0 h-1.5" style={{background: col}}></div>
                <div className="display text-[48px] md:text-[80px] mt-2" style={{color: col}}>{n}</div>
                <div className="display text-[18px] md:text-[22px] mt-4">{l.toUpperCase()}</div>
                <div className="num text-mute mt-2">{s}</div>
              </div>
            ))}
          </div>
          <div className="num text-mute mt-4">Sample outcomes · directional figures, subject to client confirmation.</div>
        </CC>
      </section>

      {/* Services used */}
      <section className="py-12 border-y-2 border-ink bg-paper2">
        <CC>
          <div className="grid grid-cols-12 gap-8 items-center">
            <div className="col-span-12 md:col-span-3"><CE num="06" label="Services used" color={CP.blue} /></div>
            <div className="col-span-12 md:col-span-9 flex flex-wrap gap-2">
              {['Web development','Local SEO','LLM visibility','CRM integration','Analytics','Content system'].map(s => (
                <span key={s} className="tag-chip">{s.toUpperCase()}</span>
              ))}
            </div>
          </div>
        </CC>
      </section>

      {/* More cases */}
      <section className="py-24 md:py-28">
        <CC>
          <div className="flex items-end justify-between mb-10">
            <CE num="07" label="Next cases" color={CP.magenta} />
            <button onClick={() => onNavigate('cases')} className="ed-link num font-bold text-ink">All cases →</button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-10">
            {others.map(o => {
              const tc = o.color === CP.yellow ? '#0A0A0A' : '#fff';
              return (
                <button key={o.slug} onClick={() => onOpenCase(o.slug)} className="text-left group">
                  <div className="relative aspect-[4/3] border-2 border-ink overflow-hidden" style={{background: o.color}} data-asset={`case-thumbnail-${o.slug}`}>
                    <div className="absolute inset-0 grid place-items-center">
                      <span className="display text-[32px] md:text-[44px]" style={{color: tc}}>{o.name.toUpperCase()}</span>
                    </div>
                  </div>
                  <h4 className="display text-[22px] mt-4 group-hover:translate-x-1 transition-transform">{o.name.toUpperCase()}</h4>
                  <p className="text-[14.5px] text-ink/75 mt-1">{o.line}</p>
                </button>
              );
            })}
          </div>
        </CC>
      </section>

      <CCTA onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { CasesHub, CaseDetail });