import { useState } from 'react';
import {
  ArrowRight,
  BadgeCheck,
  Building2,
  CalendarCheck,
  CalendarClock,
  Check,
  CheckCircle2,
  ClipboardCheck,
  HelpCircle,
  Play,
  Shield,
  Thermometer,
  TrendingDown,
  UsersRound,
  X,
} from 'lucide-react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import ScrollReveal from '@/components/ScrollReveal';
import { type SectorPageConfig } from '@/components/industries/SectorPageTemplate';
import { useJsonLd, usePageMeta } from '@/hooks/usePageMeta';
import classicRoofImage from '@/assets/industrie/logistique-solution-classic.webp';
import coolRoofImage from '@/assets/industrie/logistique-solution-coolroof.webp';

const SITE_URL = 'https://www.covalba.fr';

const inputClass =
  'w-full rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white placeholder:text-white/40 transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50';

const selectClass =
  'w-full appearance-none rounded-xl border border-white/[0.12] bg-white/[0.07] px-4 py-3 font-body text-sm text-white transition-all duration-300 focus:border-white/25 focus:outline-none focus:ring-2 focus:ring-primary/50';

const lightFieldClass =
  'w-full rounded-xl border border-foreground/10 bg-white px-4 py-3 font-body text-sm text-foreground outline-none transition-all focus:border-teal-vivid/40 focus:ring-2 focus:ring-teal-vivid/15';

const Seo = ({ config }: { config: SectorPageConfig }) => {
  const pageUrl = `${SITE_URL}${config.canonicalPath}`;
  usePageMeta({ title: config.title, description: config.description, canonical: pageUrl });
  useJsonLd(`${config.slug}-es-breadcrumb-schema`, {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Inicio', item: `${SITE_URL}/es` },
      { '@type': 'ListItem', position: 2, name: 'Sectores', item: `${SITE_URL}/es` },
      { '@type': 'ListItem', position: 3, name: config.serviceName, item: pageUrl },
    ],
  });
  useJsonLd(`${config.slug}-es-service-schema`, {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: config.serviceName,
    serviceType: 'Pintura reflectante para cubiertas',
    provider: { '@type': 'Organization', name: 'Covalba', url: SITE_URL },
    areaServed: { '@type': 'Country', name: 'España' },
    description: config.serviceDescription,
    audience: { '@type': 'BusinessAudience', audienceType: config.audience },
  });
  return null;
};

const ReassuranceBand = ({ items }: { items?: string[] }) => {
  if (!items?.length) return null;

  return (
    <section className="border-y border-foreground/[0.06] bg-white py-4">
      <div className="container mx-auto px-4 lg:px-8">
        <ul className="flex flex-col items-start justify-center gap-3 font-body text-sm font-semibold text-foreground/62 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-6 sm:gap-y-2">
          {items.map((item) => (
            <li key={item} className="flex items-center gap-2.5">
              <CheckCircle2 className="h-4 w-4 shrink-0 text-teal-vivid" strokeWidth={1.8} />
              <span>{item}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

const SectorHero = ({ config }: { config: SectorPageConfig }) => {
  const [form, setForm] = useState({ type: '', climate: '', surface: '', year: '', email: '' });
  const [submitted, setSubmitted] = useState(false);
  const surfaceNum = parseFloat(form.surface) || 0;
  const estimMin = surfaceNum * 18;
  const estimMax = surfaceNum * 25;
  const fmt = (n: number) => new Intl.NumberFormat('es-ES').format(n);

  return (
    <section
      aria-labelledby={`${config.slug}-hero-title`}
      className="relative isolate flex min-h-[100svh] flex-col overflow-hidden bg-navy text-cream"
    >
      <img
        src={config.hero.image}
        alt={config.hero.imageAlt}
        className="absolute inset-0 -z-10 size-full scale-[1.02] object-cover"
        loading="eager"
        decoding="async"
      />
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 hidden bg-gradient-to-r from-navy/[0.92] via-navy/55 to-navy/25 lg:block"
      />
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 bg-gradient-to-b from-navy/80 via-navy/22 to-navy/95 lg:hidden"
      />
      <div
        aria-hidden="true"
        className="absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent"
      />

      <div className="container relative z-10 mx-auto flex flex-1 items-center px-6 pb-10 pt-24 lg:px-12 lg:pb-16 lg:pt-28">
        <div className="grid w-full grid-cols-1 items-center gap-10 lg:grid-cols-[55fr_45fr] lg:gap-12">
          <div className="max-w-2xl space-y-6 lg:space-y-8">
            {config.hero.eyebrow && (
              <div className="flex items-center gap-3">
                <span className="h-px w-9 bg-teal-vivid" aria-hidden="true" />
                <span className="font-body text-[11px] font-semibold uppercase tracking-[0.22em] text-teal-vivid">
                  {config.hero.eyebrow}
                </span>
              </div>
            )}

            <h1
              id={`${config.slug}-hero-title`}
              className="font-satoshi font-bold leading-[1.02] text-white"
              style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}
            >
              {config.hero.h1}
            </h1>

            <p
              className="max-w-xl font-satoshi font-medium leading-[1.3] text-cream/65"
              style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}
            >
              {config.hero.sub}
            </p>

            <ul className="hidden gap-4 pt-1 sm:flex sm:flex-wrap lg:gap-6" aria-label="Beneficios clave">
              {config.hero.stats.map((stat, index) => {
                const Icon = stat.icon;
                return (
                  <li
                    key={stat.label}
                    className={`flex items-start gap-3 ${
                      index !== 0 ? 'sm:border-l sm:border-white/10 sm:pl-6' : ''
                    }`}
                  >
                    <Icon className="mt-0.5 h-[18px] w-[18px] shrink-0 text-teal-vivid" strokeWidth={1.5} />
                    <div className="leading-tight">
                      <p className="font-satoshi text-[15px] font-bold text-white lg:text-base">{stat.value}</p>
                      <p className="mt-1 font-body text-[12.5px] text-cream/55 lg:text-[13px]">{stat.label}</p>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>

          <div className="animate-hero-stats">
            <div className="rounded-[1.5rem] border border-white/[0.08] bg-white/[0.04] p-1.5 backdrop-blur-sm">
              <div className="rounded-[calc(1.5rem-6px)] border border-white/[0.06] bg-[#0b1a2b]/80 p-4 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-xl lg:p-7">
                {!submitted ? (
                  <>
                    <h2 className="mb-1 text-center font-satoshi text-xl font-bold text-white lg:text-2xl">
                      {config.hero.formTitle}
                    </h2>
                    <p className="mb-4 text-center font-body text-[12px] text-white/50">
                      {config.hero.formSubtitle}
                    </p>
                    <form
                      onSubmit={(event) => {
                        event.preventDefault();
                        setSubmitted(true);
                      }}
                      className="space-y-2.5 lg:space-y-3"
                    >
                      <select
                        required
                        value={form.type}
                        onChange={(e) => setForm({ ...form, type: e.target.value })}
                        className={selectClass}
                      >
                        <option value="" disabled className="bg-card text-foreground">
                          {config.hero.formFields.typeLabel}
                        </option>
                        {config.hero.formFields.typeOptions.map((option) => (
                          <option key={option} value={option} className="bg-card text-foreground">
                            {option}
                          </option>
                        ))}
                      </select>
                      <select
                        required
                        value={form.climate}
                        onChange={(e) => setForm({ ...form, climate: e.target.value })}
                        className={selectClass}
                      >
                        <option value="" disabled className="bg-card text-foreground">
                          {config.hero.formFields.climateLabel}
                        </option>
                        {config.hero.formFields.climateOptions.map((option) => (
                          <option key={option} value={option} className="bg-card text-foreground">
                            {option}
                          </option>
                        ))}
                      </select>
                      <input
                        type="number"
                        placeholder="Superficie de cubierta (m²)"
                        required
                        min="1"
                        value={form.surface}
                        onChange={(e) => setForm({ ...form, surface: e.target.value })}
                        className={inputClass}
                      />
                      <input
                        type="number"
                        placeholder={config.hero.formFields.yearLabel}
                        required
                        min="1900"
                        value={form.year}
                        onChange={(e) => setForm({ ...form, year: e.target.value })}
                        className={inputClass}
                      />
                      <input
                        type="email"
                        placeholder="Correo electrónico profesional"
                        required
                        value={form.email}
                        onChange={(e) => setForm({ ...form, email: e.target.value })}
                        className={inputClass}
                      />

                      <button
                        type="submit"
                        className="group mt-1 flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-3 font-semibold text-white active:scale-[0.98]"
                      >
                        <span className="text-[15px]">{config.hero.formFields.cta}</span>
                        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5">
                          <ArrowRight className="h-4 w-4" />
                        </span>
                      </button>
                    </form>

                    <p className="mt-3 text-center font-body text-[11px] text-white/35">
                      {config.hero.formFields.microcopy}
                    </p>
                  </>
                ) : (
                  <div className="py-4 text-center">
                    <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/20">
                      <Shield className="h-6 w-6 text-primary" />
                    </div>
                    <p className="mb-1 font-body text-sm text-white/60">Presupuesto orientativo para {fmt(surfaceNum)} m²</p>
                    <p className="mb-4 font-satoshi text-2xl font-bold text-white">
                      {fmt(estimMin)} € - {fmt(estimMax)} €
                    </p>
                    <p className="mb-4 font-body text-[13px] text-white/50">
                      Un asesor se pondrá en contacto contigo en 24 h con una estimación detallada.
                    </p>
                    <button
                      onClick={() => setSubmitted(false)}
                      className="font-body text-sm font-semibold text-primary hover:underline"
                    >
                      Modificar mi solicitud
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="relative z-10 mt-auto hidden lg:block">
        <div className="border-t border-white/10 bg-navy/78 py-5 backdrop-blur-md">
          <p className="mb-3 text-center font-body text-[10px] font-semibold uppercase tracking-[0.2em] text-white/35">
            {config.logos.title}
          </p>
          <div className="mx-auto flex max-w-6xl flex-nowrap items-center justify-center gap-x-8 px-8 xl:gap-x-12">
            {config.logos.items.map((logo) =>
              logo.url ? (
                <span key={logo.name} className="flex h-8 w-28 items-center justify-center">
                  <img
                    src={logo.url}
                    alt={logo.name}
                    className="max-h-7 max-w-full object-contain opacity-45 transition-opacity duration-300 hover:opacity-75"
                    style={{ filter: 'brightness(0) invert(1)' }}
                    loading="lazy"
                    decoding="async"
                  />
                </span>
              ) : (
                <span key={logo.name} className="flex h-8 items-center justify-center whitespace-nowrap px-3 font-satoshi text-sm font-bold text-white/60 xl:text-base">
                  {logo.name}
                </span>
              )
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const ProblemSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-cream py-20 lg:py-32">
    <div className="container mx-auto px-4 lg:px-8">
      <div className="mb-10 grid grid-cols-1 items-end gap-8 lg:mb-16 lg:grid-cols-[1.05fr_0.95fr] lg:gap-20">
        <div className="space-y-6 lg:space-y-9">
          <ScrollReveal>
            <div className="flex items-center gap-3">
              <span className="h-px w-9 bg-terracotta/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-terracotta-dark">
                {config.problem.eyebrow}
              </span>
            </div>
          </ScrollReveal>
          <ScrollReveal>
            <h2
              className="font-satoshi font-bold text-foreground !leading-[1.05]"
              style={{ fontSize: 'clamp(1.875rem, 3.6vw, 2.875rem)', letterSpacing: '-0.025em' }}
            >
              {config.problem.title}
              <br />
              <span className="text-foreground/40">{config.problem.mutedTitle}</span>
            </h2>
          </ScrollReveal>
        </div>
        <ScrollReveal>
          <p className="max-w-[560px] font-body text-base leading-relaxed text-foreground/65 lg:ml-auto lg:text-[16px]">
            {config.problem.intro}
          </p>
        </ScrollReveal>
      </div>

      <ScrollReveal stagger>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-5 xl:gap-6">
          {config.problem.cards.map((problem) => {
            const Icon = problem.icon;
            return (
              <article
                key={problem.title}
                className="group overflow-hidden rounded-2xl bg-white shadow-[0_18px_45px_-34px_hsl(var(--navy)/0.28)] ring-1 ring-foreground/[0.05]"
              >
                <div className="relative aspect-[4/3] overflow-hidden bg-foreground/[0.04]">
                  <img src={problem.image} alt={problem.alt} className="size-full object-cover" loading="lazy" decoding="async" />
                  <div aria-hidden="true" className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-navy/45 to-transparent" />
                  <span className="absolute left-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-cream/90 text-terracotta-dark shadow-sm">
                    <Icon className="h-5 w-5" strokeWidth={1.7} />
                  </span>
                </div>
                <div className="px-6 py-7 lg:px-6 lg:py-8">
                  <h3 className="mb-3 font-satoshi text-[18px] font-bold !leading-tight text-foreground lg:text-[19px]">
                    {problem.title}
                  </h3>
                  <p className="font-body text-[14px] leading-relaxed text-foreground/62 lg:text-[14.5px]">
                    {problem.desc}
                  </p>
                </div>
              </article>
            );
          })}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        {config.problem.transition && (
          <p className="mx-auto mt-10 max-w-3xl border-t border-foreground/10 pt-6 text-center font-body text-sm leading-relaxed text-foreground/58 lg:mt-14 lg:text-base">
            {config.problem.transition}
          </p>
        )}
      </ScrollReveal>
    </div>
  </section>
);

const SolutionSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-[#142333] py-20 text-white lg:py-32">
    <div
      aria-hidden="true"
      className="absolute inset-0 opacity-[0.55]"
      style={{ backgroundImage: 'linear-gradient(115deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 120px)' }}
    />
    <div className="container relative mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto mb-12 grid max-w-6xl grid-cols-1 items-end gap-8 lg:mb-16 lg:grid-cols-[0.88fr_1.12fr] lg:gap-16">
          <div>
            <div className="mb-6 inline-flex items-center gap-3">
              <span className="h-px w-8 bg-teal-vivid/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
                {config.solution.eyebrow}
              </span>
            </div>
            <h2
              className="font-satoshi font-bold !leading-[1.04] text-white"
              style={{ fontSize: 'clamp(2rem, 3.4vw, 3rem)', letterSpacing: '-0.03em' }}
            >
              {config.solution.title}
              <br />
              <span className="text-white/45">{config.solution.mutedTitle}</span>
            </h2>
          </div>
          <p className="max-w-2xl font-body text-base leading-relaxed text-white/74 lg:text-[17px]">
            {config.solution.intro}
          </p>
        </div>
      </ScrollReveal>

      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:gap-6">
        {[
          {
            title: 'Cubierta convencional',
            image: config.solution.beforeImage ?? classicRoofImage.src,
            metric: 'hasta 80 °C',
            metricLabel: 'en superficie',
            points: ['Superficie oscura', 'Absorbe el calor', 'Sobrecarga el aire acondicionado'],
            cool: false,
          },
          {
            title: 'Cubierta cool roof',
            image: config.solution.afterImage ?? coolRoofImage.src,
            metric: 'hasta el 90 %',
            metricLabel: 'de la radiación reflejada',
            points: ['Superficie clara', 'Se mantiene más fresca', 'Reduce la carga térmica'],
            cool: true,
          },
        ].map((item) => (
          <article key={item.title} className="overflow-hidden rounded-2xl border border-white/10 bg-white/[0.045]">
            <div className="relative aspect-[1.1] overflow-hidden bg-[#0f1d2a] md:aspect-[1.18]">
              <img src={item.image} alt={item.title} className="size-full object-cover" loading="lazy" decoding="async" />
              <div aria-hidden="true" className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#142333] via-[#142333]/20 to-transparent" />
            </div>
            <div className="p-5 lg:p-7">
              <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                <h3 className="font-satoshi text-xl font-bold !leading-tight text-white lg:text-2xl">
                  {item.title}
                </h3>
                <div className={`shrink-0 rounded-xl border px-4 py-3 ${item.cool ? 'border-teal-vivid/18 bg-teal-vivid/10 text-teal-vivid' : 'border-terracotta/18 bg-terracotta/12 text-[#f0a084]'}`}>
                  <span className="block font-satoshi text-2xl font-bold leading-none lg:text-3xl">{item.metric}</span>
                  <span className="mt-1 block font-body text-[10px] font-bold uppercase tracking-[0.14em] opacity-75">
                    {item.metricLabel}
                  </span>
                </div>
              </div>
              <ul className="grid gap-2.5">
                {item.points.map((point) => (
                  <li key={point} className="flex items-start gap-2.5">
                    <CheckCircle2 className={`mt-0.5 h-4 w-4 shrink-0 ${item.cool ? 'text-teal-vivid' : 'text-[#f0a084]'}`} strokeWidth={2} />
                    <span className="font-body text-sm leading-relaxed text-white/66">{point}</span>
                  </li>
                ))}
              </ul>
            </div>
          </article>
        ))}
      </div>

      {(config.solution.points.length > 0 || config.solution.transition) && (
        <ScrollReveal>
          <div className="mx-auto mt-10 max-w-6xl lg:mt-14">
            {config.solution.points.length > 0 && (
              <ul className="grid grid-cols-1 gap-3 md:grid-cols-4">
                {config.solution.points.map((point) => (
                  <li key={point} className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.055] px-5 py-4">
                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-teal-vivid/12">
                      <Check className="h-4 w-4 text-teal-vivid" strokeWidth={1.8} />
                    </span>
                    <span className="font-body text-sm font-semibold leading-snug text-white/78">{point}</span>
                  </li>
                ))}
              </ul>
            )}
            {config.solution.transition && (
              <p className="mx-auto mt-8 max-w-2xl text-center font-body text-sm leading-relaxed text-white/52">
                {config.solution.transition}
              </p>
            )}
          </div>
        </ScrollReveal>
      )}
    </div>
  </section>
);

const DurabilitySection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-[#F6FAFB] py-16 lg:py-28">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto mb-12 max-w-2xl text-center lg:mb-16">
          <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55">
            Durabilidad
          </p>
          <h2
            className="mb-5 font-satoshi font-bold text-foreground !leading-[1.05]"
            style={{ fontSize: 'clamp(2rem, 3.2vw, 2.85rem)', letterSpacing: '-0.03em' }}
          >
            {config.durability.title}
            {config.durability.mutedTitle && (
              <>
                <br />
                <span className="text-foreground/35">{config.durability.mutedTitle}</span>
              </>
            )}
          </h2>
          <p className="font-body text-base leading-relaxed text-foreground/62 lg:text-[17px]">
            {config.durability.intro}
          </p>
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <div className="mx-auto grid max-w-5xl grid-cols-1 items-stretch gap-5 lg:grid-cols-2 lg:gap-0">
          {[
            {
              title: 'Pintura acrílica estándar',
              subtitle: 'Bajo coste de aplicación',
              price: '~10 €',
              life: '2-5 años',
              realCost: '25-30 €',
              covalba: false,
              points: ['La reflectividad baja rápido', 'Pulverulencia y amarilleo', 'Reaplicación más frecuente'],
            },
            {
              title: 'Sistema poliuretano Covalba',
              subtitle: config.durability.covalbaLabel,
              price: '18-20 €',
              life: '8-10 años',
              realCost: '18-20 €',
              covalba: true,
              points: ['Resina de poliuretano duradera', 'Barniz de acabado anti-UV', 'Reflectividad conservada más tiempo'],
            },
          ].map((option) => (
            <article
              key={option.title}
              className={`relative rounded-2xl px-7 py-9 shadow-[0_20px_60px_rgba(26,42,58,0.08)] lg:px-10 lg:py-12 ${
                option.covalba ? 'z-10 bg-foreground text-white lg:-ml-5 lg:scale-[1.03]' : 'bg-white text-foreground lg:scale-[0.97] lg:opacity-90'
              }`}
            >
              {option.covalba && (
                <span className="absolute -top-4 left-1/2 inline-flex -translate-x-1/2 items-center rounded-full bg-teal-vivid px-4 py-2 font-body text-[11px] font-bold uppercase tracking-[0.15em] text-white">
                  La opción duradera
                </span>
              )}
              <h3 className="mb-2 font-satoshi text-2xl font-bold leading-tight lg:text-[1.7rem]">{option.title}</h3>
              <p className={`mb-8 font-body text-sm ${option.covalba ? 'text-white/52' : 'text-foreground/50'}`}>
                {option.subtitle}
              </p>
              <div className="mb-8 grid grid-cols-3 gap-4">
                {[
                  ['Precio por m²', option.price],
                  ['Vida útil', option.life],
                  ['A 10 años', option.realCost],
                ].map(([label, value]) => (
                  <div key={label}>
                    <p className={`mb-1 font-body text-[10px] uppercase tracking-widest ${option.covalba ? 'text-white/42' : 'text-foreground/38'}`}>
                      {label}
                    </p>
                    <p className={`font-satoshi text-2xl font-bold leading-none lg:text-3xl ${label === 'A 10 años' ? (option.covalba ? 'text-teal-vivid' : 'text-terracotta') : ''}`}>
                      {value}
                    </p>
                  </div>
                ))}
              </div>
              <ul className="space-y-3 border-t border-current/10 pt-7">
                {option.points.map((point) => {
                  const Icon = option.covalba ? Check : X;
                  return (
                    <li key={point} className="flex items-start gap-2.5">
                      <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${option.covalba ? 'text-teal-vivid' : 'text-terracotta/70'}`} />
                      <span className={`font-body text-sm leading-relaxed ${option.covalba ? 'text-white/70' : 'text-foreground/60'}`}>
                        {point}
                      </span>
                    </li>
                  );
                })}
              </ul>
            </article>
          ))}
        </div>
      </ScrollReveal>

      <ScrollReveal>
        <p className="mx-auto mt-10 max-w-3xl text-center font-body text-sm leading-relaxed text-foreground/55 lg:text-[15px]">
          {config.durability.note}
        </p>
      </ScrollReveal>
    </div>
  </section>
);

const SpecialSection = ({ config }: { config: SectorPageConfig }) => {
  const [submitted, setSubmitted] = useState(false);
  const isFunding = config.special.kind === 'funding';

  return (
    <section className="relative overflow-hidden bg-white py-16 lg:py-28">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="mx-auto mb-10 grid max-w-6xl grid-cols-1 items-end gap-7 lg:mb-14 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16">
            <div>
              <div className="mb-5 flex items-center gap-3">
                <span className="h-px w-10 bg-teal-vivid" aria-hidden="true" />
                <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
                  {config.special.eyebrow}
                </span>
              </div>
              <h2
                className="font-satoshi font-bold !leading-[1.04] text-foreground"
                style={{ fontSize: 'clamp(1.95rem, 3vw, 2.75rem)', letterSpacing: '-0.03em' }}
              >
                {config.special.title}
              </h2>
            </div>
            <p className="max-w-2xl font-body text-base leading-relaxed text-foreground/68 lg:text-[16px]">
              {config.special.intro}
            </p>
          </div>
        </ScrollReveal>

        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-5 lg:grid-cols-[0.82fr_1.18fr] lg:gap-7">
          <ScrollReveal>
            <div className="h-full rounded-2xl bg-cream/70 p-6 ring-1 ring-foreground/[0.06] lg:p-7">
              {!submitted ? (
                <>
                  <h3 className="mb-5 font-satoshi text-xl font-bold leading-tight text-foreground">
                    {isFunding ? 'Comprobar mi elegibilidad' : 'Estimar mi ahorro'}
                  </h3>
                  <form
                    className="grid gap-3"
                    onSubmit={(event) => {
                      event.preventDefault();
                      setSubmitted(true);
                    }}
                  >
                    <select required className={lightFieldClass} defaultValue="">
                      <option value="" disabled>
                        Tipo de edificio
                      </option>
                      {config.hero.formFields.typeOptions.map((option) => (
                        <option key={option}>{option}</option>
                      ))}
                    </select>
                    <input required min="1" type="number" className={lightFieldClass} placeholder="Superficie de cubierta (m²)" />
                    <input required type="email" className={lightFieldClass} placeholder="Correo electrónico profesional" />
                    <button className="group mt-1 inline-flex items-center justify-center gap-2 rounded-full bg-teal-vivid py-2.5 pl-6 pr-2 font-semibold text-white">
                      <span className="text-sm">{config.special.cta}</span>
                      <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 group-hover:translate-x-0.5">
                        <ArrowRight className="h-3.5 w-3.5" />
                      </span>
                    </button>
                  </form>
                </>
              ) : (
                <div className="flex min-h-[260px] flex-col items-center justify-center text-center">
                  <CheckCircle2 className="mb-4 h-12 w-12 text-teal-vivid" strokeWidth={1.7} />
                  <h3 className="mb-3 font-satoshi text-2xl font-bold text-foreground">Solicitud recibida.</h3>
                  <p className="max-w-sm font-body text-sm leading-relaxed text-foreground/62">
                    Covalba se pondrá en contacto contigo con una respuesta personalizada.
                  </p>
                </div>
              )}
            </div>
          </ScrollReveal>

          <ScrollReveal>
            <div className="rounded-2xl bg-foreground p-6 text-white lg:p-8">
              {config.special.kind === 'decret' ? (
                <div className="grid gap-4 sm:grid-cols-3">
                  {config.special.milestones.map((milestone) => (
                    <div key={milestone.value} className="rounded-xl border border-white/10 bg-white/[0.04] p-5">
                      <p className="font-satoshi text-4xl font-bold leading-none text-teal-vivid">{milestone.value}</p>
                      <p className="mt-3 font-body text-sm text-white/62">{milestone.label}</p>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="grid gap-4 sm:grid-cols-2">
                  {config.special.points.map((point) => (
                    <div key={point.label} className="rounded-xl border border-white/10 bg-white/[0.04] p-5">
                      <p className="font-satoshi text-3xl font-bold leading-none text-teal-vivid">{point.value}</p>
                      <p className="mt-3 font-body text-sm text-white/62">{point.label}</p>
                    </div>
                  ))}
                </div>
              )}
              {config.special.kind === 'decret' && (
                <div className="mt-6 grid gap-3">
                  {config.special.points.map((point) => (
                    <div key={point} className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-teal-vivid" />
                      <span className="font-body text-sm leading-relaxed text-white/68">{point}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <p className="mt-5 rounded-2xl bg-cream/70 p-5 font-body text-xs leading-relaxed text-foreground/58 lg:text-[13px]">
              {config.special.note}
            </p>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
};

const BenefitsSection = ({ config }: { config: SectorPageConfig }) => (
  <>
    <section className="relative overflow-hidden bg-cream pb-12 pt-16 lg:min-h-[640px] lg:pb-8 lg:pt-20">
      <figure className="absolute right-0 top-0 hidden h-full min-h-[640px] w-[58vw] overflow-hidden lg:block">
        <img src={config.benefits.image} alt="" className="size-full object-cover" loading="lazy" decoding="async" />
        <div aria-hidden="true" className="absolute inset-y-0 left-0 w-[56%] bg-gradient-to-r from-cream via-cream/88 to-transparent" />
      </figure>
      <div className="container relative z-10 mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <div className="max-w-[760px]">
            <div className="mb-5 flex items-center gap-3 lg:mb-7">
              <span className="h-px w-10 bg-primary/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                {config.benefits.eyebrow}
              </span>
            </div>
            <h2
              className="mb-6 font-satoshi font-bold !leading-[1.04] text-foreground"
              style={{ fontSize: 'clamp(2.15rem, 3vw, 3rem)' }}
            >
              {config.benefits.title}
            </h2>
            <p className="max-w-[540px] font-body text-base leading-relaxed text-foreground/72 lg:text-[16px]">
              {config.benefits.desc}
            </p>
            <div className="relative z-10 mt-7 max-w-[540px] rounded-2xl bg-white/96 p-6 shadow-[0_22px_70px_-45px_hsl(var(--navy)/0.35)] ring-1 ring-foreground/[0.05]">
              <div className="grid grid-cols-[48px_minmax(0,1fr)] items-center gap-5">
                <Thermometer className="h-12 w-12 text-primary" strokeWidth={1.55} />
                <div>
                  <p className="mb-3 font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                    Desde el primer verano
                  </p>
                  <p className="font-satoshi text-[3.1rem] font-bold leading-[0.88] text-primary">{config.benefits.metric}</p>
                  <p className="mt-2 font-satoshi text-xl font-bold leading-tight text-foreground">{config.benefits.metricLabel}</p>
                </div>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>

    <section className="relative overflow-hidden bg-white py-14">
      <div className="container relative mx-auto px-4 lg:px-8">
        <ScrollReveal stagger>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5 lg:gap-4">
            {config.benefits.cards.map((benefit, index) => {
              const Icon = benefit.icon;
              return (
                <article key={benefit.title} className="min-h-[184px] rounded-2xl bg-cream/65 p-5 ring-1 ring-foreground/[0.05] lg:p-6">
                  <div className="mb-7 flex h-11 w-11 items-center justify-center rounded-xl bg-white text-primary">
                    <Icon className="h-5 w-5" strokeWidth={1.55} />
                  </div>
                  <span className="mb-3 block font-body text-[11px] font-bold uppercase tracking-[0.18em] text-primary/70">
                    0{index + 1}
                  </span>
                  <h3 className="font-satoshi text-lg font-bold leading-tight text-foreground lg:text-[19px]">{benefit.title}</h3>
                  <p className="mt-2 font-body text-sm leading-snug text-foreground/62">{benefit.desc}</p>
                </article>
              );
            })}
          </div>
        </ScrollReveal>
        <p className="mx-auto mt-10 max-w-2xl text-center font-body text-sm leading-relaxed text-foreground/54">
          {config.benefits.transition}
        </p>
      </div>
    </section>
  </>
);

const ApplicationsSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-cream py-16 lg:py-24">
    <div className="container relative mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto mb-10 grid max-w-6xl grid-cols-1 gap-6 lg:mb-12 lg:grid-cols-[0.9fr_1.1fr] lg:items-end lg:gap-16">
          <div>
            <div className="mb-5 flex items-center gap-3">
              <span className="h-px w-10 bg-primary/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">
                {config.applications.eyebrow}
              </span>
            </div>
            <h2
              className="font-satoshi font-bold !leading-[1.05] text-foreground"
              style={{ fontSize: 'clamp(2rem, 3vw, 3rem)' }}
            >
              {config.applications.title}
            </h2>
          </div>
          <p className="max-w-[540px] border-l border-primary/30 pl-6 font-body text-base leading-relaxed text-foreground/68 lg:text-[16px]">
            {config.applications.intro}
          </p>
        </div>
      </ScrollReveal>
      <ScrollReveal stagger>
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-5 lg:gap-5">
          {config.applications.cards.map((card, index) => {
            const Icon = card.icon;
            return (
              <article key={card.title} className="overflow-hidden rounded-2xl bg-white shadow-[0_16px_46px_-38px_hsl(var(--navy)/0.34)] ring-1 ring-foreground/[0.06]">
                <div className="aspect-[4/3] overflow-hidden bg-foreground/[0.04]">
                  <img src={card.image} alt="" className="size-full object-cover" loading="lazy" decoding="async" />
                </div>
                <div className="p-5">
                  <div className="mb-4 flex items-center justify-between gap-3">
                    <span className="inline-flex items-center gap-2 font-body text-[11px] font-bold uppercase tracking-[0.18em] text-primary">
                      <Icon className="h-5 w-5" strokeWidth={1.55} />
                      {card.label}
                    </span>
                    <span className="font-body text-xs font-bold text-foreground/22">0{index + 1}</span>
                  </div>
                  <h3 className="font-satoshi text-xl font-bold leading-tight text-foreground">{card.title}</h3>
                  <p className="mt-2 font-body text-sm leading-snug text-foreground/60">{card.desc}</p>
                </div>
              </article>
            );
          })}
        </div>
      </ScrollReveal>
      {config.applications.transition && (
        <p className="mx-auto mt-10 max-w-2xl text-center font-body text-sm leading-relaxed text-foreground/54">
          {config.applications.transition}
        </p>
      )}
    </div>
  </section>
);

const MethodSection = ({ config }: { config: SectorPageConfig }) => {
  const [videoOpen, setVideoOpen] = useState(false);
  const icons = [ClipboardCheck, CalendarClock, Shield, TrendingDown];
  return (
    <section className="bg-white py-16 lg:py-32">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="flex flex-col items-start gap-12 lg:flex-row lg:gap-20">
          <div className="lg:sticky lg:top-[120px] lg:w-[40%]">
            <ScrollReveal>
              <p className="mb-6 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/50">
                {config.method.eyebrow}
              </p>
              <h2
                className="mb-6 font-satoshi text-3xl font-bold text-foreground !leading-[1.05] sm:text-4xl lg:text-[3rem]"
                style={{ letterSpacing: '-0.03em' }}
              >
                {config.method.title}
                <span className="text-foreground/30"> {config.method.mutedTitle}</span>
              </h2>
              <p className="mb-8 font-body text-base leading-relaxed text-muted-foreground lg:text-lg">
                {config.method.intro}
              </p>
              <button onClick={() => setVideoOpen(true)} className="group flex items-center gap-3 text-primary">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <Play className="h-5 w-5" />
                </div>
                <span className="font-body text-sm font-semibold">Ver una obra en 2 minutos</span>
              </button>
            </ScrollReveal>
          </div>
          <div className="relative lg:w-[60%]">
            <div className="absolute bottom-4 left-5 top-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent lg:left-6" />
            {config.method.steps.map((step, index) => {
              const Icon = icons[index] ?? ClipboardCheck;
              return (
                <ScrollReveal key={step.title}>
                  <div className="group relative flex items-start gap-5 py-8 lg:gap-7 lg:py-10">
                    <div className="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/20 bg-primary/10 lg:h-12 lg:w-12">
                      <Icon className="h-4 w-4 text-primary lg:h-5 lg:w-5" />
                    </div>
                    <div className="pt-1">
                      <span className="mb-2 block font-body text-xs font-bold uppercase tracking-widest text-primary/50">
                        Paso 0{index + 1}
                      </span>
                      <h3 className="mb-2 text-xl text-foreground lg:text-2xl">{step.title}</h3>
                      <p className="max-w-md font-body text-sm leading-relaxed text-muted-foreground lg:text-base">{step.text}</p>
                    </div>
                  </div>
                  {index < config.method.steps.length - 1 && <div className="ml-5 h-px bg-border lg:ml-6" />}
                </ScrollReveal>
              );
            })}
            <p className="ml-16 mt-4 font-body text-xs font-medium text-muted-foreground/50 lg:ml-20">
              {config.method.duration}
            </p>
          </div>
        </div>
      </div>
      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>
        <DialogContent className="max-w-4xl overflow-hidden border-none bg-black p-0">
          <div className="aspect-video">
            <iframe
              src="https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1"
              className="h-full w-full"
              allow="autoplay; encrypted-media"
              allowFullScreen
              title="Covalba Cool Roof, una obra en 2 minutos"
            />
          </div>
        </DialogContent>
      </Dialog>
    </section>
  );
};

const ProofSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="relative overflow-hidden bg-[#192A3A] py-24 lg:py-36">
    <div className="container relative mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mb-9 flex items-center gap-3 lg:mb-12">
          <span className="h-px w-12 bg-teal-vivid/70" aria-hidden="true" />
          <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
            {config.proof.eyebrow}
          </span>
        </div>
        <div className="mb-14 grid grid-cols-1 items-start gap-8 lg:mb-20 lg:grid-cols-[3fr_2fr] lg:gap-16">
          <h2
            className="font-satoshi font-bold text-white !leading-[1.05]"
            style={{ fontSize: 'clamp(1.875rem, 3.8vw, 3rem)', letterSpacing: '-0.03em' }}
          >
            {config.proof.title}
            <br />
            <span className="text-teal-vivid">{config.proof.mutedTitle}</span>
          </h2>
          <p className="max-w-[470px] font-body text-base leading-relaxed text-white/65 lg:mt-2 lg:text-[16px]">
            {config.proof.intro}
          </p>
        </div>
      </ScrollReveal>
      <ScrollReveal stagger>
        <div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-3 lg:gap-5">
          {config.proof.figures.map((figure) => {
            const Icon = figure.icon;
            return (
              <div key={figure.label} className="rounded-2xl border border-white/10 bg-white/[0.04] p-8 lg:p-9">
                <div className="mb-6 flex h-11 w-11 items-center justify-center rounded-full bg-teal-vivid/[0.12]">
                  <Icon className="h-5 w-5 text-teal-vivid" strokeWidth={1.6} />
                </div>
                <p className="mb-3 font-satoshi text-4xl font-bold leading-none text-white">{figure.value}</p>
                <p className="font-body text-sm leading-relaxed text-white/60">{figure.label}</p>
              </div>
            );
          })}
        </div>
      </ScrollReveal>
      {config.proof.cases && (
        <div className="mb-12 grid gap-4 md:grid-cols-2">
          {config.proof.cases.map((item) => (
            <div key={item.name} className="rounded-2xl border border-white/10 bg-white/[0.04] p-6">
              <h3 className="mb-2 font-satoshi text-xl font-bold text-white">{item.name}</h3>
              <p className="font-body text-sm leading-relaxed text-white/60">{item.desc}</p>
            </div>
          ))}
        </div>
      )}
      <div className="border-t border-white/10 pt-10">
        <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-7 lg:gap-x-14">
          {config.proof.logos.map((logo) =>
            logo.url ? (
              <span key={logo.name} className="flex h-8 w-28 items-center justify-center">
                <img
                  src={logo.url}
                  alt={logo.name}
                  className="max-h-7 max-w-full object-contain opacity-45"
                  style={{ filter: 'brightness(0) invert(1)' }}
                  loading="lazy"
                  decoding="async"
                />
              </span>
            ) : (
              <span key={logo.name} className="flex h-8 w-28 items-center justify-center font-satoshi text-lg font-bold text-white/50">{logo.name}</span>
            )
          )}
        </div>
        <p className="mx-auto mt-9 max-w-2xl text-center font-body text-sm leading-relaxed text-white/70">
          {config.proof.transition}
        </p>
      </div>
    </div>
  </section>
);

const FaqSection = ({ config }: { config: SectorPageConfig }) => (
  <section className="bg-cream py-20 lg:py-32">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="grid items-start gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16">
          <div className="lg:sticky lg:top-24">
            <div className="mb-5 flex items-center gap-3">
              <span className="h-px w-10 bg-primary/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">FAQ</span>
            </div>
            <h2 className="mb-5 font-satoshi font-bold text-foreground !leading-[1.05]" style={{ fontSize: 'clamp(2rem, 3.3vw, 3rem)', letterSpacing: '-0.03em' }}>
              Tus preguntas,
              <br />
              <span className="text-foreground/40">nuestras respuestas.</span>
            </h2>
            <p className="max-w-[420px] font-body text-base leading-relaxed text-foreground/65 lg:text-[15.5px]">
              {config.faq.intro}
            </p>
            <a href={`#contact-${config.slug}`} className="group mt-8 inline-flex items-center gap-2 text-sm font-semibold text-primary">
              ¿Otra pregunta? Hablemos
              <ArrowRight className="h-4 w-4" />
            </a>
          </div>
          <Accordion type="single" collapsible className="space-y-3">
            {config.faq.items.map((faq, index) => (
              <AccordionItem key={faq.q} value={`${config.slug}-faq-${index}`} className="rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] lg:px-6">
                <AccordionTrigger className="py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]">
                  {faq.q}
                </AccordionTrigger>
                <AccordionContent className="pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]">
                  {faq.a}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

const FinalCta = ({ config }: { config: SectorPageConfig }) => (
  <section id={`contact-${config.slug}`} className="overflow-hidden bg-[#182A3A] py-20 lg:py-32">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="mx-auto max-w-4xl text-center">
          <div className="mb-6 inline-flex items-center gap-3">
            <span className="h-px w-8 bg-teal-vivid/70" aria-hidden="true" />
            <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-teal-vivid">
              {config.finalCta.eyebrow}
            </span>
            <span className="h-px w-8 bg-teal-vivid/70" aria-hidden="true" />
          </div>
          <h2 className="mb-6 font-satoshi font-bold text-white !leading-[1.04]" style={{ fontSize: 'clamp(2rem, 3.8vw, 3.5rem)', letterSpacing: '-0.03em' }}>
            {config.finalCta.title}
          </h2>
          <p className="mx-auto mb-9 max-w-2xl font-body text-base leading-relaxed text-white/[0.72] lg:text-[17px]">
            {config.finalCta.desc}
          </p>
          <div className="flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
            <a href="/es" className="group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white">
              <span className="text-sm">Solicitar presupuesto</span>
              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20">
                <ArrowRight className="h-3.5 w-3.5" />
              </span>
            </a>
            <a href="/es" className="group inline-flex items-center justify-center gap-2 rounded-full border border-white/[0.22] py-2.5 pl-6 pr-2 font-semibold text-white/[0.88]">
              <span className="text-sm">Hablar con un experto</span>
              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/[0.12]">
                <ArrowRight className="h-3.5 w-3.5" />
              </span>
            </a>
          </div>
        </div>
      </ScrollReveal>
      <ul className="mx-auto mt-12 grid max-w-3xl gap-3 sm:grid-cols-3">
        {config.finalCta.reassurances.map((item, index) => {
          const icons = [CalendarCheck, BadgeCheck, Shield];
          const Icon = icons[index] ?? BadgeCheck;
          return (
            <li key={item} className="flex items-center justify-center gap-2.5 rounded-lg border border-white/[0.12] bg-white/[0.045] px-4 py-3">
              <Icon className="h-4 w-4 shrink-0 text-teal-vivid" strokeWidth={1.8} />
              <span className="font-body text-sm text-white/[0.76]">{item}</span>
            </li>
          );
        })}
      </ul>
    </div>
  </section>
);

const SeoContent = ({ config }: { config: SectorPageConfig }) => (
  <section className="bg-cream py-16 lg:py-28">
    <div className="container mx-auto px-4 lg:px-8">
      <div className="mx-auto max-w-5xl">
        <p className="mb-5 font-body text-[10px] font-semibold uppercase tracking-[0.25em] text-primary/55">
          {config.seo.eyebrow}
        </p>
        <h2 className="mb-5 font-satoshi text-3xl font-bold text-foreground !leading-[1.05] lg:text-5xl">
          {config.seo.title}
        </h2>
        <p className="mb-12 max-w-3xl font-body text-base leading-relaxed text-foreground/64">
          {config.seo.intro}
        </p>
        <div className="grid gap-10 md:grid-cols-2">
          {config.seo.sections.map((section) => (
            <article key={section.title}>
              <h3 className="mb-3 font-satoshi text-xl font-bold text-foreground">{section.title}</h3>
              <p className="font-body text-sm leading-relaxed text-foreground/68">{section.body}</p>
            </article>
          ))}
        </div>
        <div className="mt-12 border-t border-foreground/10 pt-8">
          <p className="mb-4 font-body text-[11px] font-bold uppercase tracking-[0.18em] text-foreground/38">Fuentes</p>
          <ul className="grid gap-2 font-body text-xs leading-relaxed text-foreground/50 md:grid-cols-2">
            {config.seo.sources.map((source) => (
              <li key={source}>{source}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

export const SectorPageTemplateES = ({ config }: { config: SectorPageConfig }) => (
  <>
    <Seo config={config} />
    <SectorHero config={config} />
    <ReassuranceBand items={config.reassurance} />
    <ProblemSection config={config} />
    <SolutionSection config={config} />
    <DurabilitySection config={config} />
    <SpecialSection config={config} />
    <BenefitsSection config={config} />
    <ApplicationsSection config={config} />
    <MethodSection config={config} />
    <ProofSection config={config} />
    <FaqSection config={config} />
    <FinalCta config={config} />
    <SeoContent config={config} />
  </>
);

export const defaultIconsES = {
  Building2,
  HelpCircle,
  Shield,
  Thermometer,
  TrendingDown,
  UsersRound,
};