/* Genesis DMA — Expansion pages: subservice, industry, work, case study, blog */

/* ---------- SUBSERVICE ---------- */
function SubservicePage({ parent, slug }) {
  const sub = window.SUBSERVICES[slug];
  const parentSvc = window.SERVICES[parent];
  const crumbs = [
    { path: '/', label: 'Home' },
    { path: '/capabilities/' + parent, label: parentSvc.title },
    { path: `/capabilities/${parent}/${slug}`, label: sub.title },
  ];
  useSEO({
    title: sub.metaTitle,
    description: sub.metaDesc,
    path: `/capabilities/${parent}/${slug}`,
    jsonLd: [
      ldOrganization(),
      {
        "@context": "https://schema.org",
        "@type": "Service",
        "name": sub.h1,
        "serviceType": sub.title,
        "provider": { "@id": SITE.url + "#organization" },
        "areaServed": { "@type": "Country", "name": "United States" },
        "description": sub.metaDesc,
        "url": SITE.url + `/capabilities/${parent}/${slug}`,
      },
      ldBreadcrumb(crumbs),
    ],
  });

  const siblings = Object.values(window.SUBSERVICES).filter(x => x.parent === parent && x.slug !== slug);

  return (
    <main>
      <section className="relative pt-40 pb-16 md:pt-48 md:pb-20 overflow-hidden">
        <div aria-hidden="true" className="absolute inset-0 dot-grid opacity-60 pointer-events-none" />
        <div className="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal className="text-teal text-xs tracking-[0.25em] uppercase mt-10 mb-6">{parentSvc.title} · Subservice</Reveal>
          <Reveal as="h1" className="font-semibold text-white max-w-5xl" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.5rem)', lineHeight: 1.02, letterSpacing: '-0.035em' }}>
            {sub.h1}
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-2xl leading-relaxed">{sub.lede}</Reveal>
          <Reveal delay={200} className="flex flex-wrap gap-3 mt-10">
            <BtnPrimary href="/contact/">Start a conversation</BtnPrimary>
            <BtnGhost href={`/capabilities/${parent}/`}>All {parentSvc.title.toLowerCase()} →</BtnGhost>
          </Reveal>
        </div>
      </section>

      <Section label="Overview" title="How we run this.">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
          <div className="md:col-span-8 text-lg text-sub leading-relaxed" style={{ textWrap: 'pretty' }}>
            <Reveal as="p">{sub.intro}</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">Stack</div>
              <ul className="space-y-2 text-sub text-sm">
                {sub.stack.map(t => (
                  <li key={t} className="flex items-center gap-2"><span className="w-1.5 h-1.5 bg-teal rounded-full"/>{t}</li>
                ))}
              </ul>
            </Reveal>
          </aside>
        </div>
      </Section>

      <Section label="Focus areas" title="What we actually ship.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
          {sub.focus.map(([t, d], i) => (
            <Reveal key={t} delay={i*50} className="bg-bg p-8 h-full">
              <div className="text-teal mb-5"><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>
          ))}
          <HairlineFillers count={sub.focus.length} cols={3} />
        </div>
      </Section>

      {siblings.length > 0 && (
        <Section label="Siblings" title={`More in ${parentSvc.title}.`}>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
            {siblings.slice(0,6).map((s, i) => (
              <Reveal key={s.slug} delay={i*50}>
                <a href={`/capabilities/${parent}/${s.slug}/`} className="cap-card block h-full">
                  <div className="text-teal text-xs tracking-[0.2em] uppercase">Subservice</div>
                  <h3 className="text-white font-semibold text-xl mt-3">{s.title}</h3>
                  <p className="text-sub mt-3 leading-relaxed text-sm">{s.lede}</p>
                  <div className="mt-6 text-teal text-sm">Read more →</div>
                </a>
              </Reveal>
            ))}
            <HairlineFillers count={Math.min(siblings.length, 6)} cols={3} />
          </div>
        </Section>
      )}

      <section className="py-20 md:py-28 hairline-t">
        <div className="container-x">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-10 items-end">
            <div className="md:col-span-8">
              <Reveal as="h2" className="text-white font-semibold" style={{ fontSize: 'clamp(2rem, 4vw, 3rem)', letterSpacing: '-0.03em', lineHeight: 1.05 }}>
                Want this run by the same team that writes about it?
              </Reveal>
            </div>
            <div className="md:col-span-4 md:text-right">
              <BookCallButton>Book a scoping call</BookCallButton>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------- INDUSTRY ---------- */
function IndustryPage({ slug }) {
  const ind = window.INDUSTRIES[slug];
  const crumbs = [
    { path: '/', label: 'Home' },
    { path: '/industries', label: 'Industries' },
    { path: '/industries/' + slug, label: ind.title },
  ];
  useSEO({
    title: ind.metaTitle,
    description: ind.metaDesc,
    path: '/industries/' + slug,
    jsonLd: [
      ldOrganization(),
      ldBreadcrumb(crumbs),
    ],
  });

  const relatedServices = ind.services
    .map(s => window.SUBSERVICES[s])
    .filter(Boolean);

  const relatedCases = window.CASE_STUDIES
    ? Object.values(window.CASE_STUDIES).filter(c => {
        const map = { medspa: 'Medspa', dental: 'Dental', 'home-services': 'Home services', healthcare: 'Healthcare', 'b2b-services': 'B2B Professional services', franchises: 'Franchises' };
        return c.vertical === map[slug];
      })
    : [];

  return (
    <main>
      <section className="relative pt-40 pb-16 md:pt-48 md:pb-20 overflow-hidden">
        <div aria-hidden="true" className="absolute inset-0 dot-grid opacity-60 pointer-events-none" />
        <div className="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal className="text-teal text-xs tracking-[0.25em] uppercase mt-10 mb-6">Industry · {ind.title}</Reveal>
          <Reveal as="h1" className="font-semibold text-white max-w-5xl" style={{ fontSize: 'clamp(2.5rem, 6vw, 5rem)', lineHeight: 1, letterSpacing: '-0.035em' }}>
            {ind.h1}
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-3xl leading-relaxed">{ind.lede}</Reveal>
        </div>
      </section>

      <Section label="What we see" title="The three problems that keep coming up.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
          {ind.problems.map(([t, d], i) => (
            <Reveal key={t} delay={i*60} className="bg-bg p-8">
              <div className="text-muted text-sm mb-4">Problem 0{i+1}</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>
          ))}
          <HairlineFillers count={ind.problems.length} cols={3} />
        </div>
      </Section>

      <Section label="How we solve it" title="The way we engage this vertical.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
          {ind.solutions.map(([t, d], i) => (
            <Reveal key={t} delay={i*60} className="bg-bg p-8">
              <div className="text-teal mb-4"><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>
          ))}
          <HairlineFillers count={ind.solutions.length} cols={3} />
        </div>
      </Section>

      <Section label="Capabilities in play" title="Services we deploy for this vertical.">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-px bg-line">
          {relatedServices.map((s, i) => (
            <Reveal key={s.slug} delay={i*30}>
              <a href={`/capabilities/${s.parent}/${s.slug}/`} className="block bg-bg p-6 h-full hover:bg-surface transition-colors">
                <div className="text-teal text-xs tracking-[0.2em] uppercase mb-2">{window.SERVICES[s.parent].title}</div>
                <div className="text-white text-sm font-medium">{s.title}</div>
              </a>
            </Reveal>
          ))}
          <HairlineFillers count={relatedServices.length} cols={5} />
        </div>
      </Section>

      <Section label="Representative results" title="What it looks like when it works.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
          {ind.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>
          ))}
          <HairlineFillers count={ind.results.length} cols={3} />
        </div>
      </Section>

      {relatedCases.length > 0 && (
        <Section label="Case studies" title="Engagements in this vertical.">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
            {relatedCases.map((cs, i) => (
              <Reveal key={cs.slug} delay={i*60}>
                <a href={`/work/${cs.slug}/`} className="cap-card block h-full">
                  <div className="text-teal text-xs tracking-[0.2em] uppercase">{cs.vertical}</div>
                  <h3 className="text-white font-semibold text-xl mt-3">{cs.title}</h3>
                  <p className="text-sub mt-3 leading-relaxed text-sm">{cs.lede}</p>
                  <div className="mt-6 text-teal text-sm">Read case study →</div>
                </a>
              </Reveal>
            ))}
            <HairlineFillers count={relatedCases.length} cols={3} />
          </div>
        </Section>
      )}

      <section className="py-20 md:py-28 hairline-t">
        <div className="container-x">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-10 items-end">
            <div className="md:col-span-8">
              <Reveal as="h2" className="text-white font-semibold" style={{ fontSize: 'clamp(2rem, 4vw, 3rem)', letterSpacing: '-0.03em', lineHeight: 1.05 }}>
                Run a {ind.title.toLowerCase()} business? Let's talk.
              </Reveal>
            </div>
            <div className="md:col-span-4 md:text-right">
              <BookCallButton>Request a scoping call</BookCallButton>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------- INDUSTRIES INDEX ---------- */
function IndustriesIndexPage() {
  const crumbs = [{ path: '/', label: 'Home' }, { path: '/industries', label: 'Industries' }];
  useSEO({
    title: 'Industries we serve — Genesis DMA',
    description: 'Genesis DMA works with medspas, dental practices, home services, healthcare, B2B professional services and franchise operators.',
    path: '/industries',
    jsonLd: [ldOrganization(), ldBreadcrumb(crumbs)],
  });
  const inds = Object.values(window.INDUSTRIES);
  return (
    <main>
      <section className="relative pt-40 pb-16 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="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal as="h1" className="mt-10 font-semibold text-white max-w-5xl" style={{ fontSize: 'clamp(3rem, 7vw, 6rem)', lineHeight: 1, letterSpacing: '-0.035em' }}>
            Industries we <span className="text-teal">know cold</span>.
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-2xl leading-relaxed">
            We do not take every engagement. These are the verticals where we can move in week one because the problems — marketing, sales, ops — are ones we have already solved.
          </Reveal>
        </div>
      </section>
      <Section label="By vertical" title="Pick the one closest to yours.">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-line">
          {inds.map((ind, i) => (
            <Reveal key={ind.slug} delay={i*60}>
              <a href={`/industries/${ind.slug}/`} className="cap-card block h-full">
                <div className="text-teal text-xs tracking-[0.2em] uppercase">Industry</div>
                <h3 className="text-white font-semibold text-xl mt-3">{ind.title}</h3>
                <p className="text-sub mt-3 leading-relaxed text-sm">{ind.lede}</p>
                <div className="mt-6 text-teal text-sm">Read more →</div>
              </a>
            </Reveal>
          ))}
        </div>
      </Section>
    </main>
  );
}

/* ---------- WORK INDEX ---------- */
function WorkIndexPage() {
  const crumbs = [{ path: '/', label: 'Home' }, { path: '/work', label: 'Work' }];
  useSEO({
    title: 'Work & case studies — Genesis DMA',
    description: 'Engagements where we owned the outcome. Case studies from home services, medspa and B2B professional service clients.',
    path: '/work',
    jsonLd: [ldOrganization(), ldBreadcrumb(crumbs)],
  });
  const cases = Object.values(window.CASE_STUDIES);
  return (
    <main>
      <section className="relative pt-40 pb-16 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="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal as="h1" className="mt-10 font-semibold text-white max-w-5xl" style={{ fontSize: 'clamp(3rem, 7vw, 6rem)', lineHeight: 1, letterSpacing: '-0.035em' }}>
            Work we can <span className="text-teal">show</span>.
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-2xl leading-relaxed">
            Fewer than we could have listed. We only publish the engagements where the client cleared us to tell the story in full — numbers, tradeoffs and all.
          </Reveal>
        </div>
      </section>
      <Section label="Case studies" title="Real engagements, real numbers.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
          {cases.map((cs, i) => (
            <Reveal key={cs.slug} delay={i*60} className="h-full">
              <a href={`/work/${cs.slug}/`} className="block h-full bg-bg p-8 hover:bg-surface transition-colors">
                <div className="text-teal text-xs tracking-[0.2em] uppercase mb-3">{cs.vertical}</div>
                <h3 className="text-white font-semibold" style={{ fontSize: 'clamp(1.35rem, 2vw, 1.75rem)', letterSpacing: '-0.02em', lineHeight: 1.15 }}>{cs.title}</h3>
                <p className="text-sub mt-4 leading-relaxed text-[15px]">{cs.lede}</p>
                <div className="mt-6 grid grid-cols-3 gap-4 pt-5 border-t border-line">
                  {cs.headline.map(([n, c], j) => (
                    <div key={j}>
                      <div className="text-teal font-semibold" style={{ fontSize: 'clamp(1.125rem, 1.5vw, 1.5rem)', letterSpacing: '-0.02em' }}>{n}</div>
                      <div className="text-muted text-[11px] mt-1 leading-snug">{c}</div>
                    </div>
                  ))}
                </div>
                <div className="mt-6 text-teal text-sm">Read full case study →</div>
              </a>
            </Reveal>
          ))}
          <HairlineFillers count={cases.length} cols={3} />
        </div>
      </Section>
    </main>
  );
}

/* ---------- CASE STUDY ---------- */
function CaseStudyPage({ slug }) {
  const cs = window.CASE_STUDIES[slug];
  const crumbs = [
    { path: '/', label: 'Home' },
    { path: '/work', label: 'Work' },
    { path: '/work/' + slug, label: cs.title },
  ];
  useSEO({
    title: cs.metaTitle,
    description: cs.metaDesc,
    path: '/work/' + slug,
    jsonLd: [
      ldOrganization(),
      {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": cs.title,
        "description": cs.metaDesc,
        "publisher": { "@id": SITE.url + "#organization" },
        "url": SITE.url + "/work/" + slug,
      },
      ldBreadcrumb(crumbs),
    ],
  });
  const relatedSubs = cs.services
    .map(s => window.SUBSERVICES[s])
    .filter(Boolean);

  return (
    <main>
      <section className="relative pt-40 pb-16 md:pt-48 md:pb-20 overflow-hidden">
        <div aria-hidden="true" className="absolute inset-0 dot-grid opacity-60 pointer-events-none" />
        <div className="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal className="text-teal text-xs tracking-[0.25em] uppercase mt-10 mb-6">Case study · {cs.vertical}</Reveal>
          <Reveal as="h1" className="font-semibold text-white max-w-5xl" style={{ fontSize: 'clamp(2.75rem, 6.5vw, 5.5rem)', lineHeight: 1, letterSpacing: '-0.035em' }}>
            {cs.title}
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-3xl leading-relaxed">{cs.lede}</Reveal>
        </div>
      </section>

      <section className="hairline-t hairline-b">
        <div className="container-x py-12">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
            {cs.headline.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, 6vw, 5rem)', letterSpacing: '-0.03em', lineHeight: 1 }}>{n}</div>
                <div className="text-sub mt-5 leading-relaxed">{c}</div>
              </Reveal>
            ))}
            <HairlineFillers count={cs.headline.length} cols={3} />
          </div>
        </div>
      </section>

      <Section label="Challenge" title="Where they started.">
        <div className="max-w-3xl text-lg text-sub leading-relaxed" style={{ textWrap: 'pretty' }}>
          <Reveal as="p">{cs.challenge}</Reveal>
        </div>
      </Section>

      <Section label="Approach" title="What we actually did.">
        <ol className="divide-y divide-line border-t border-b border-line">
          {cs.approach.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-xl md: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>

      <Section label="Outcome" title="What it looks like today.">
        <div className="max-w-3xl text-lg text-sub leading-relaxed" style={{ textWrap: 'pretty' }}>
          <Reveal as="p">{cs.outcome}</Reveal>
        </div>
      </Section>

      <Section label="Services in play" title="Capabilities deployed.">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-line">
          {relatedSubs.map((s, i) => (
            <Reveal key={s.slug} delay={i*40}>
              <a href={`/capabilities/${s.parent}/${s.slug}/`} className="block bg-bg p-6 h-full hover:bg-surface transition-colors">
                <div className="text-teal text-xs tracking-[0.2em] uppercase mb-2">{window.SERVICES[s.parent].title}</div>
                <div className="text-white text-sm font-medium">{s.title}</div>
              </a>
            </Reveal>
          ))}
          <HairlineFillers count={relatedSubs.length} cols={4} />
        </div>
      </Section>

      <section className="py-20 md:py-28 hairline-t">
        <div className="container-x">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-10 items-end">
            <div className="md:col-span-8">
              <Reveal as="h2" className="text-white font-semibold" style={{ fontSize: 'clamp(2rem, 4vw, 3rem)', letterSpacing: '-0.03em', lineHeight: 1.05 }}>
                Want outcomes like these? Let's see if we are a fit.
              </Reveal>
            </div>
            <div className="md:col-span-4 md:text-right">
              <BookCallButton>Book a scoping call</BookCallButton>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------- BLOG INDEX ---------- */
function BlogIndexPage() {
  const crumbs = [{ path: '/', label: 'Home' }, { path: '/blog', label: 'Blog' }];
  useSEO({
    title: 'Blog — Genesis DMA',
    description: 'Notes from the field. Practical writing on growth, paid media, CRM, automation and attribution for service businesses.',
    path: '/blog',
    jsonLd: [
      ldOrganization(),
      ldBreadcrumb(crumbs),
      {
        "@context": "https://schema.org",
        "@type": "Blog",
        "url": SITE.url + "/blog",
        "name": "Genesis DMA Blog",
        "publisher": { "@id": SITE.url + "#organization" },
      },
    ],
  });
  const posts = Object.values(window.BLOG_POSTS).sort((a,b) => b.date.localeCompare(a.date));
  return (
    <main>
      <section className="relative pt-40 pb-16 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="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal as="h1" className="mt-10 font-semibold text-white max-w-5xl" style={{ fontSize: 'clamp(3rem, 7vw, 6rem)', lineHeight: 1, letterSpacing: '-0.035em' }}>
            Notes from <span className="text-teal">the field</span>.
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-2xl leading-relaxed">
            Practical writing from the accounts we actually run — not think-pieces. If it helps one operator make a better decision this quarter, it earned its place.
          </Reveal>
        </div>
      </section>
      <Section label="Latest" title="Recent articles.">
        <div className="divide-y divide-line border-t border-b border-line">
          {posts.map((p, i) => (
            <Reveal as="a" key={p.slug} href={`/blog/${p.slug}/`} delay={i*50} className="block py-8 md:py-10 group hover:bg-surface transition-colors -mx-6 md:-mx-8 px-6 md:px-8">
              <div className="grid grid-cols-12 gap-6 items-baseline">
                <div className="col-span-12 md:col-span-3 text-xs uppercase tracking-[0.2em] text-muted">
                  <div>{p.category}</div>
                  <div className="mt-1 text-muted/80 normal-case tracking-normal">{p.date} · {p.readingTime}</div>
                </div>
                <div className="col-span-12 md:col-span-9">
                  <h2 className="text-white font-semibold group-hover:text-teal transition-colors" style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', letterSpacing: '-0.02em', lineHeight: 1.1 }}>{p.title}</h2>
                  <p className="text-sub mt-3 max-w-3xl leading-relaxed">{p.excerpt}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>
    </main>
  );
}

/* ---------- BLOG POST ---------- */
function BlogPostPage({ slug }) {
  const p = window.BLOG_POSTS[slug];
  const crumbs = [
    { path: '/', label: 'Home' },
    { path: '/blog', label: 'Blog' },
    { path: '/blog/' + slug, label: p.title },
  ];
  useSEO({
    title: p.metaTitle,
    description: p.metaDesc,
    path: '/blog/' + slug,
    jsonLd: [
      ldOrganization(),
      {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": p.title,
        "description": p.metaDesc,
        "datePublished": p.date,
        "author": { "@type": "Organization", "name": "Genesis DMA" },
        "publisher": { "@id": SITE.url + "#organization" },
        "mainEntityOfPage": SITE.url + "/blog/" + slug,
        "url": SITE.url + "/blog/" + slug,
      },
      ldBreadcrumb(crumbs),
    ],
  });
  const others = Object.values(window.BLOG_POSTS).filter(x => x.slug !== slug).slice(0,3);
  return (
    <main>
      <section className="relative pt-40 pb-12 md:pt-48 md:pb-16 overflow-hidden">
        <div aria-hidden="true" className="absolute inset-0 dot-grid opacity-60 pointer-events-none" />
        <div className="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal className="text-teal text-xs tracking-[0.25em] uppercase mt-10 mb-4">{p.category} · {p.date} · {p.readingTime}</Reveal>
          <Reveal as="h1" className="font-semibold text-white max-w-4xl" style={{ fontSize: 'clamp(2.5rem, 5.5vw, 4.5rem)', lineHeight: 1.02, letterSpacing: '-0.035em' }}>
            {p.title}
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-2xl leading-relaxed">{p.excerpt}</Reveal>
        </div>
      </section>

      <article className="py-12 md:py-16">
        <div className="container-x">
          <div className="max-w-3xl space-y-6 text-lg text-sub leading-relaxed" style={{ textWrap: 'pretty' }}>
            {p.paragraphs.map((para, i) => <Reveal as="p" key={i} delay={i*40}>{para}</Reveal>)}
          </div>
        </div>
      </article>

      <Section label="More from the blog" title="Keep reading.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line">
          {others.map((o, i) => (
            <Reveal key={o.slug} delay={i*60}>
              <a href={`/blog/${o.slug}/`} className="cap-card block h-full">
                <div className="text-teal text-xs tracking-[0.2em] uppercase">{o.category}</div>
                <h3 className="text-white font-semibold text-xl mt-3">{o.title}</h3>
                <p className="text-sub mt-3 leading-relaxed text-sm">{o.excerpt}</p>
                <div className="mt-6 text-teal text-sm">Read →</div>
              </a>
            </Reveal>
          ))}
          <HairlineFillers count={others.length} cols={3} />
        </div>
      </Section>
    </main>
  );
}

Object.assign(window, { SubservicePage, IndustryPage, IndustriesIndexPage, WorkIndexPage, CaseStudyPage, BlogIndexPage, BlogPostPage });