/* Genesis DMA — service page template (used by all 6 capabilities) */
const { useMemo: _um3 } = React;

function ServicePage({ slug }) {
  const svc = SERVICES[slug];
  const crumbs = [
    { path: '/',             label: 'Home' },
    { path: '/capabilities/' + slug, label: svc.title },
  ];

  useSEO({
    title: svc.metaTitle,
    description: svc.metaDesc,
    path: '/capabilities/' + slug,
    jsonLd: [
      ldOrganization(),
      ldService(svc),
      ldFAQ(svc),
      ldBreadcrumb(crumbs),
    ],
  });

  return (
    <main>
      {/* Page header */}
      <section className="relative pt-40 pb-20 md:pt-48 md:pb-24 overflow-hidden">
        <div aria-hidden="true" className="absolute inset-0 dot-grid opacity-60 pointer-events-none" />
        <div className="absolute -top-32 -right-32 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
             style={{ background: 'radial-gradient(circle, rgba(45,212,191,0.18), transparent 70%)', filter: 'blur(60px)' }} />
        {/* Planet system — themed per capability */}
        <ServicePlanets slug={slug} />
        <div className="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <div className="mt-10 grid grid-cols-1 lg:grid-cols-12 gap-10 items-end">
            <div className="lg:col-span-8">
              <Reveal className="text-teal text-xs tracking-[0.25em] uppercase mb-6">Capability · {svc.title}</Reveal>
              <Reveal as="h1" className="font-semibold text-white" style={{ fontSize: 'clamp(2.75rem, 6.5vw, 5.5rem)', lineHeight: 1, letterSpacing: '-0.035em' }}>
                {svc.h1}
              </Reveal>
              <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-2xl leading-relaxed">{svc.lede}</Reveal>
            </div>
            <div className="lg:col-span-4">
              <Reveal delay={200} className="flex flex-wrap gap-3 lg:justify-end">
                <BtnPrimary href="#/contact">Start a conversation</BtnPrimary>
                <BtnGhost href="#/about">About Genesis DMA</BtnGhost>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* What we do */}
      <Section id="what-we-do" label="What we do" title={`What ${svc.title.toLowerCase()} actually means here.`}>
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
          <div className="md:col-span-8 space-y-6 text-lg text-sub leading-relaxed" style={{ textWrap: 'pretty' }}>
            {svc.whatWeDo.map((p, i) => <Reveal as="p" key={i} delay={i*60}>{p}</Reveal>)}
          </div>
          <aside className="md:col-span-4">
            <Reveal className="border border-line2 p-6 bg-surface">
              <div className="text-xs uppercase tracking-[0.2em] text-teal mb-4">Built for</div>
              <ul className="space-y-3 text-sub">
                <li className="flex gap-3"><span className="text-teal mt-1"><Ico.Check /></span>Service businesses doing $1M–$30M in annual revenue.</li>
                <li className="flex gap-3"><span className="text-teal mt-1"><Ico.Check /></span>Operators who care about CAC, LTV and payback — not vanity metrics.</li>
                <li className="flex gap-3"><span className="text-teal mt-1"><Ico.Check /></span>Teams willing to run tests, not argue about opinions.</li>
              </ul>
              <div className="mt-6 pt-6 border-t border-line text-xs uppercase tracking-[0.2em] text-muted mb-3">Not a fit for</div>
              <ul className="space-y-2 text-muted text-sm">
                <li>— Companies looking for a guaranteed ROI in 30 days.</li>
                <li>— Teams that want an agency to replace their operators.</li>
              </ul>
            </Reveal>
          </aside>
        </div>
      </Section>

      {/* Deliverables */}
      <Section id="deliverables" label="Deliverables" title="What you actually get." intro="Specific, tangible artifacts — not abstractions.">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-line">
          {svc.deliverables.map(([t, d], i) => (
            <Reveal key={t} delay={i*50} className="bg-bg p-8">
              <div className="text-teal mb-6"><Ico.Check /></div>
              <h3 className="text-white font-semibold text-xl" style={{ letterSpacing: '-0.015em' }}>{t}</h3>
              <p className="text-sub mt-3 leading-relaxed">{d}</p>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Process */}
      <Section id="process" label="Process" title="How this engagement runs.">
        <ol className="divide-y divide-line border-t border-b border-line">
          {svc.process.map(([t, d], i) => (
            <Reveal as="li" key={t} delay={i*50} className="grid grid-cols-12 gap-6 py-8 md:py-10">
              <div className="col-span-2 md:col-span-1 step-num pt-2">0{i+1}</div>
              <div className="col-span-10 md:col-span-4">
                <h3 className="text-white font-semibold text-2xl" style={{ letterSpacing: '-0.02em' }}>{t}</h3>
              </div>
              <div className="col-span-12 md:col-span-7 text-sub leading-relaxed max-w-xl">{d}</div>
            </Reveal>
          ))}
        </ol>
      </Section>

      {/* Stack */}
      <Section id="stack" label="Tools" title="The stack we use." intro="Boring tools used well beat exotic tools used poorly.">
        <div className="flex flex-wrap gap-3">
          {svc.stack.map((tool, i) => (
            <Reveal key={tool} delay={i*30} className="inline-block">
              <span className="inline-flex items-center gap-2 px-4 py-2 border border-line2 text-sm text-sub hover:border-teal hover:text-white transition-colors">
                <span className="w-1.5 h-1.5 bg-teal rounded-full" />{tool}
              </span>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Results */}
      <Section id="results" label="Results" title="Representative outcomes." intro="Anonymized numbers from recent engagements. Your mileage will vary — ours usually does.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
          {svc.results.map(([n, c], i) => (
            <Reveal key={i} delay={i*80} className="bg-bg p-10">
              <div className="text-teal font-semibold" style={{ fontSize: 'clamp(3rem, 5vw, 4.5rem)', letterSpacing: '-0.03em', lineHeight: 1 }}>{n}</div>
              <div className="text-sub mt-5 leading-relaxed">{c}</div>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* FAQ */}
      <Section id="faq" label="FAQ" title="Questions we get, answered plainly." intro="If it is not here, ask us on a call.">
        <div className="max-w-3xl">
          <FAQ items={svc.faqs} />
        </div>
      </Section>

      {/* Related */}
      <Section id="related" label="Related" title="What pairs well with this.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
          {svc.related.map((rs, i) => {
            const r = SERVICES[rs];
            return (
              <Reveal key={rs} delay={i*60}>
                <a href={`#/capabilities/${rs}`} className="cap-card block h-full">
                  <div className="text-teal text-xs tracking-[0.2em] uppercase">Capability</div>
                  <h3 className="text-white font-semibold text-2xl mt-4" style={{ letterSpacing: '-0.02em' }}>{r.title}</h3>
                  <p className="text-sub mt-3 leading-relaxed">{r.lede}</p>
                  <div className="mt-8 flex items-center gap-3 text-teal text-sm font-medium">
                    <span>Explore</span><span className="arrow"><Ico.Arrow /></span>
                  </div>
                </a>
              </Reveal>
            );
          })}
          <Reveal delay={svc.related.length * 60}>
            <a href="#/contact" className="cap-card block h-full" style={{ background: '#0f1f1c' }}>
              <div className="text-teal text-xs tracking-[0.2em] uppercase">Next step</div>
              <h3 className="text-white font-semibold text-2xl mt-4" style={{ letterSpacing: '-0.02em' }}>Get a plan built for your numbers.</h3>
              <p className="text-sub mt-3 leading-relaxed">A 30-minute call. Bring your spend, CRM and CAC. Leave with a plan.</p>
              <div className="mt-8 flex items-center gap-3 text-teal text-sm font-medium">
                <span>Start a conversation</span><span className="arrow"><Ico.Arrow /></span>
              </div>
            </a>
          </Reveal>
        </div>
      </Section>
    </main>
  );
}

Object.assign(window, { ServicePage });
