/* Industries hub + per-industry detail */
const { Container: NC, Reveal: NR, Eyebrow: NE, Mono: NM, PageHeader: NPH, CTABand: NCTA, HeroArt: NHA, PolygonAccent: NPA, Breadcrumbs, PALETTE: NP } = window;

function IndustriesHub({ onNavigate, onOpenIndustry }) {
  return (
    <main data-page-root>
      <NPH
        num="09"
        eyebrow="Industries · Where we work"
        title={<>SECTORS,<br/>NOT SLOGANS.</>}
        lede="Senior practice rooted in real category knowledge. We pick categories where buyers research deeply, choose carefully, and where AI visibility actually moves the deal."
        color={NP.teal}
        art="industries"
        breadcrumbs={[
          { label:'Home', onClick: () => onNavigate('home') },
          { label:'Industries' },
        ]}
      />

      {/* Industries list */}
      <section className="py-16 md:py-24">
        <NC>
          <ul className="border-2 border-ink">
            {INDUSTRIES.map((ind, i, arr) => {
              const textColor = ind.color === NP.yellow ? '#0A0A0A' : '#FFFFFF';
              return (
                <li key={ind.slug} className={`grid grid-cols-12 gap-0 ${i<arr.length-1?'border-b-2 border-ink':''}`}>
                  {/* Color block left */}
                  <button
                    onClick={() => onOpenIndustry(ind.slug)}
                    className="group col-span-12 md:col-span-4 relative p-7 md:p-9 text-left overflow-hidden md:border-r-2 md:border-ink"
                    style={{background: ind.color, color: textColor, minHeight: 200}}
                  >
                    <div className="absolute -right-12 -bottom-12 opacity-20 pointer-events-none">
                      <NPA size={240} />
                    </div>
                    <div className="relative">
                      <div className="num font-bold" style={{color: textColor, opacity:0.85}}>{String(i+1).padStart(2,'0')} · INDUSTRY</div>
                      <h2 className="display text-[40px] md:text-[52px] mt-3 leading-[0.92]" style={{color: textColor}}>
                        {ind.name.toUpperCase()}
                      </h2>
                      <p className="text-[14px] mt-3 max-w-[36ch]" style={{color: textColor, opacity: 0.92}}>{ind.lede}</p>
                      <div className="mt-4 num font-bold inline-flex items-center gap-2 group-hover:translate-x-1 transition-transform" style={{color: textColor}}>
                        Open detail <span aria-hidden="true">→</span>
                      </div>
                    </div>
                  </button>

                  {/* Right side preview */}
                  <div className="col-span-12 md:col-span-8 p-7 md:p-9 bg-paper">
                    <div className="grid grid-cols-1 md:grid-cols-[1fr_220px] gap-6">
                      <div>
                        <NM>How we help</NM>
                        <p className="display-mix text-[18px] md:text-[20px] font-medium leading-[1.4] mt-2 text-ink/90 max-w-[60ch]">{ind.help}</p>
                        <div className="mt-5 flex flex-wrap gap-2">
                          {ind.services.map(s => <span key={s} className="tag-chip" style={{borderColor: ind.color, color: ind.color}}>{s.toUpperCase()}</span>)}
                        </div>
                      </div>
                      <div className="md:border-l-2 md:border-ink md:pl-6">
                        <NM>Sample outcome</NM>
                        <p className="text-[14px] text-ink/80 leading-[1.55] mt-2 max-w-[34ch]">{ind.outcome}</p>
                      </div>
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        </NC>
      </section>

      {/* Don't-see-yours */}
      <section className="py-16 bg-paper2 border-y-2 border-ink">
        <NC>
          <div className="grid grid-cols-12 gap-8 items-center">
            <div className="col-span-12 md:col-span-8">
              <h3 className="display display-tight text-[32px] md:text-[64px] max-w-[22ch]">
                DON'T SEE YOUR <span style={{color: NP.red}}>SECTOR</span>?
              </h3>
              <p className="text-[16px] text-ink/80 mt-4 max-w-[52ch] leading-[1.55]">
                We work across categories where buyers research deeply. If your industry isn't listed, that's fine — the operating system is the same. Send a brief.
              </p>
            </div>
            <div className="col-span-12 md:col-span-4 md:text-right">
              <button onClick={() => onNavigate('contact')} className="btn btn-primary btn-sq">Talk to us →</button>
            </div>
          </div>
        </NC>
      </section>

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

/* ---------- Industry Detail ---------- */
function IndustryDetail({ slug, onNavigate, onOpenIndustry, onOpenCase }) {
  const ind = INDUSTRIES.find(i => i.slug === slug) || INDUSTRIES[0];
  const others = INDUSTRIES.filter(i => i.slug !== ind.slug);
  const textColor = ind.color === NP.yellow ? '#0A0A0A' : '#FFFFFF';
  const relatedCases = CASES.filter(c => {
    if (slug === 'pro-services') return c.slug === 'crystal-tax' || c.slug === 'cf-parea';
    if (slug === 'saas') return c.slug === 'apium';
    if (slug === 'dtc') return c.slug === 'iceborn' || c.slug === 'fast-coffee';
    if (slug === 'agri-export') return c.slug === 'mbsoy';
    if (slug === 'education') return c.slug === 'kidsup';
    return false;
  });

  return (
    <main data-page-root>
      <div className="pt-[68px]">
        <Breadcrumbs trail={[
          { label:'Home',       onClick: () => onNavigate('home') },
          { label:'Industries', onClick: () => onNavigate('industries') },
          { label:ind.name },
        ]} />
      </div>

      {/* Hero — colored */}
      <section className="pb-16 md:pb-20 border-b-2 border-ink relative overflow-hidden" style={{background: ind.color, color: textColor}}>
        <div className="absolute -right-24 top-10 opacity-25 pointer-events-none">
          <NPA size={500} />
        </div>
        <NC className="relative pt-10 md:pt-14">
          <NE num="09" label="Industry" color={textColor === '#FFFFFF' ? NP.yellow : NP.purple} dark={textColor === '#FFFFFF'} />
          <h1 className="display display-tight text-[48px] sm:text-[72px] md:text-[104px] lg:text-[128px] xl:text-[144px] mt-6" style={{color: textColor}}>
            {ind.name.toUpperCase()}
          </h1>
          <p className="display-mix text-[20px] md:text-[28px] font-medium leading-[1.3] max-w-[42ch] mt-8" style={{color: textColor}}>
            {ind.lede}
          </p>
        </NC>
      </section>

      {/* How we help */}
      <section className="py-20 md:py-24">
        <NC>
          <div className="grid grid-cols-12 gap-10">
            <div className="col-span-12 md:col-span-4">
              <NE num="01" label="How we help" color={ind.color} />
            </div>
            <div className="col-span-12 md:col-span-8">
              <p className="display-mix text-[24px] md:text-[34px] font-medium leading-[1.25] max-w-[42ch]">{ind.help}</p>
              <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-5">
                {[
                  ['Diagnose',  'Map the current funnel, channels, AI visibility, and the gap to the desired state.', NP.red],
                  ['Engineer',  'Build the surface, content, schema, automation, and measurement stack.',            NP.blue],
                  ['Compound',  'Operate the system on a monthly cadence. Iterate based on model and market signals.', NP.green],
                ].map(([t,d,c],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:c}}></div>
                    <span className="num font-bold mt-3 inline-block" style={{color:c}}>{String(i+1).padStart(2,'0')}</span>
                    <h4 className="display text-[24px] mt-2">{t.toUpperCase()}</h4>
                    <p className="text-[14.5px] text-ink/80 mt-2 leading-[1.55]">{d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </NC>
      </section>

      {/* Services we deploy */}
      <section className="py-20 md:py-24 bg-paper2 border-y-2 border-ink">
        <NC>
          <div className="grid grid-cols-12 gap-10 items-start">
            <div className="col-span-12 md:col-span-4">
              <NE num="02" label="Services we deploy" color={NP.orange} />
              <h3 className="display display-tight text-[32px] md:text-[48px] mt-6">FOR <span style={{color: ind.color}}>{ind.name.toUpperCase()}</span>.</h3>
            </div>
            <div className="col-span-12 md:col-span-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {ind.services.map((s, i) => (
                  <div key={s} className="border-2 border-ink bg-paper p-4 flex items-center gap-4">
                    <span className="num font-bold w-8" style={{color: ind.color}}>{String(i+1).padStart(2,'0')}</span>
                    <span className="display text-[20px]">{s.toUpperCase()}</span>
                  </div>
                ))}
              </div>
              <button onClick={() => onNavigate('services')} className="mt-6 ed-link num font-bold text-ink">See all services →</button>
            </div>
          </div>
        </NC>
      </section>

      {/* Sample outcome */}
      <section className="py-20 md:py-24">
        <NC>
          <div className="grid grid-cols-12 gap-10">
            <div className="col-span-12 md:col-span-4">
              <NE num="03" label="Sample outcome" color={NP.green} />
            </div>
            <div className="col-span-12 md:col-span-8">
              <p className="display-mix text-[24px] md:text-[34px] font-medium leading-[1.25] max-w-[40ch]">{ind.outcome}</p>
              <div className="num text-mute mt-4">Sample copy · directional only. Per-engagement outcomes vary.</div>
            </div>
          </div>
        </NC>
      </section>

      {/* Related cases */}
      {relatedCases.length > 0 && (
        <section className="py-20 bg-paper2 border-y-2 border-ink">
          <NC>
            <NE num="04" label="Related cases" color={NP.blue} />
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10">
              {relatedCases.map(c => {
                const tc = c.color === NP.yellow ? '#0A0A0A' : '#FFFFFF';
                return (
                  <button key={c.slug} onClick={() => onOpenCase(c.slug)} className="text-left group">
                    <div className="aspect-[4/3] border-2 border-ink overflow-hidden relative" style={{background: c.color}}>
                      <div className="absolute inset-0 grid place-items-center">
                        <span className="display text-[32px] md:text-[44px]" style={{color: tc}}>{c.name.toUpperCase()}</span>
                      </div>
                    </div>
                    <h4 className="display text-[22px] mt-4">{c.name.toUpperCase()}</h4>
                    <p className="text-[14.5px] text-ink/75 mt-1">{c.line}</p>
                  </button>
                );
              })}
            </div>
          </NC>
        </section>
      )}

      {/* Other industries */}
      <section className="py-16">
        <NC>
          <NE num="05" label="Other sectors" color={NP.purple} />
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 mt-8">
            {others.map(o => (
              <button key={o.slug} onClick={() => onOpenIndustry(o.slug)} className="text-left group border-2 border-ink p-4 hover:bg-paper2 transition-colors">
                <span className="w-2.5 h-2.5 inline-block" style={{background: o.color}}></span>
                <h4 className="display text-[18px] mt-2 group-hover:translate-x-1 transition-transform">{o.name.toUpperCase()}</h4>
              </button>
            ))}
          </div>
        </NC>
      </section>

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

Object.assign(window, { IndustriesHub, IndustryDetail });