// All marketing middle sections per the brandbook's 16-section structure.
// Order: TrustStrip → Problem → Solutions → Sectors → Differentials →
//        Products → Process → Team → Coverage → Testimonials → FAQ →
//        FinalCTA → Contact

/* =========================================================================
   3. Trust strip — gris-claro, 4 attribute cards
   ========================================================================= */
function TrustStrip() {
  const items = [
    { icon: 'assets/icons/higiene-profesional.webp', title: 'Higiene profesional', desc: 'Productos pensados para espacios de alto uso y operación diaria.' },
    { icon: 'assets/icons/atencion-cercana.webp', title: 'Atención cercana', desc: 'Acompañamiento para entender la necesidad de cada negocio.' },
    { icon: 'assets/icons/soluciones-quimicas.webp', title: 'Soluciones químicas', desc: 'Alternativas para limpieza, desinfección, grasa, superficies y mantenimiento.' },
    { icon: 'assets/icons/enfoque-industrial.webp', title: 'Enfoque comercial e industrial', desc: 'Diseñado para empresas que necesitan resultados consistentes.' },
  ];

  return (
    <section style={{ background: 'var(--bg-page)', padding: '64px 0', borderTop: '1px solid var(--border-soft)' }}>
      <div className="container">
        <div className="grid-4">
          {items.map((item, i) => (
            <div key={item.title} style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start', padding: '4px 18px 4px 0', borderRight: i < 3 ? '1px solid var(--border-soft)' : 'none' }}>
              <img src={item.icon} alt={item.title} width={52} height={52} loading="lazy" style={{ display: 'block', width: 52, height: 52, objectFit: 'contain' }} />
              <h3 style={{ fontSize: 16, fontWeight: 700, color: 'var(--fg1)', lineHeight: 1.3 }}>{item.title}</h3>
              <p style={{ fontSize: 13, color: 'var(--fg2)', lineHeight: 1.55 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   4. Problem — white, image left + checklist right + closing band
   ========================================================================= */
function Problem() {
  const items = [
    'Grasa difícil de remover.',
    'Olores persistentes.',
    'Superficies de alto contacto.',
    'Reposición constante de productos.',
    'Falta de asesoría para elegir la solución correcta.',
    'Productos genéricos que no rinden lo suficiente.',
    'Necesidad de mantener espacios limpios y seguros.',
  ];

  return (
    <section className="section section--white" style={{ paddingTop: 96, paddingBottom: 96 }}>
      <div className="container">
        <div className="sec-head" style={{ marginBottom: 48 }}>
          <h2 className="sec-head__title">Cuando la limpieza falla, también se afecta la operación</h2>
          <p className="sec-head__subtitle">En restaurantes, oficinas, comercios e industrias, la limpieza no es solo una tarea operativa. Influye en la percepción del cliente, la seguridad del equipo, el cumplimiento interno y la eficiencia diaria. Por eso, elegir productos adecuados y un proveedor confiable es clave.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
          {/* Image placeholder — clean industrial / kitchen surface */}
          <div style={{
            aspectRatio: '1 / 1.05',
            borderRadius: 24,
            background: 'linear-gradient(135deg, #1916A8 0%, #152FBE 50%, #1299D5 100%)',
            position: 'relative', overflow: 'hidden',
            boxShadow: 'var(--shadow-lg)',
          }}>
            <Molecule width={240} style={{ position: 'absolute', top: 40, right: 30, opacity: 0.3 }} color="#20E7AF" />
            <Bubble size={140} filled style={{ position: 'absolute', bottom: 60, left: 40, opacity: 0.4 }} />
            <Bubble size={70} filled={false} style={{ position: 'absolute', top: 80, left: 60, opacity: 0.6 }} />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end', padding: 32 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: '#fff' }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(8px)' }}>
                  <Icon name="sparkles" color="#20E7AF" />
                </div>
                <div style={{ fontSize: 13, opacity: 0.85, lineHeight: 1.4 }}>Limpieza profesional<br/><strong>en superficies industriales</strong></div>
              </div>
            </div>
          </div>

          {/* Checklist */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {items.map(text => (
              <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 20px', background: '#fff', border: '1px solid var(--border-soft)', borderRadius: 14, boxShadow: 'var(--shadow-sm)' }}>
                <div style={{ width: 28, height: 28, borderRadius: 999, border: '1.5px solid var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', color: 'var(--accent-strong)' }}>
                  <Icon name="check" size={14} stroke={2.5} />
                </div>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--fg1)' }}>{text}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Closing band */}
        <div style={{
          marginTop: 48,
          padding: '24px 32px',
          borderRadius: 18,
          background: 'linear-gradient(135deg, rgba(32,231,175,0.12) 0%, rgba(18,153,213,0.10) 100%)',
          border: '1px solid var(--border-aqua)',
          display: 'flex', alignItems: 'center', gap: 22,
        }}>
          <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--bg-dark)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
            <Logo variant="mark" height={36} />
          </div>
          <div style={{ fontSize: 18, color: 'var(--fg1)', fontWeight: 600, lineHeight: 1.45 }}>
            <strong style={{ fontWeight: 800 }}>DISPROQUILIM</strong> ayuda a convertir esa necesidad diaria en un proceso más claro, confiable y profesional.
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   5. Solutions — gris-claro, 6 cards
   ========================================================================= */
function Solutions() {
  const items = [
    { icon: 'sparkles', title: 'Desengrasantes', desc: 'Para cocinas, áreas de preparación, superficies con grasa y espacios de alto uso.' },
    { icon: 'shieldCheck', title: 'Desinfectantes', desc: 'Para apoyar rutinas de higiene en superficies, áreas comunes y espacios de trabajo.' },
    { icon: 'droplet', title: 'Limpiadores multiuso', desc: 'Soluciones prácticas para mantenimiento diario en oficinas, comercios y negocios.' },
    { icon: 'flask', title: 'Productos concentrados', desc: 'Opciones pensadas para rendimiento, reposición y uso frecuente.' },
    { icon: 'factory', title: 'Limpieza industrial', desc: 'Alternativas para entornos de mayor exigencia operativa y superficies técnicas.' },
    { icon: 'bottle', title: 'Insumos de limpieza', desc: 'Complementos para mantener rutinas de higiene más organizadas y consistentes.' },
  ];

  return (
    <section className="section section--page" id="soluciones" style={{ position: 'relative' }}>
      <DotGrid rows={5} cols={4} color="#1299D5" opacity={0.4} style={{ position: 'absolute', top: 80, right: 40 }} />
      <DotGrid rows={3} cols={4} color="#1299D5" opacity={0.4} style={{ position: 'absolute', bottom: 100, left: 40 }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="sec-head">
          <EyebrowRule />
          <h2 className="sec-head__title">Soluciones de limpieza para diferentes <span className="accent">necesidades</span> de tu negocio</h2>
          <p className="sec-head__subtitle">Organizamos nuestras soluciones para ayudarte a encontrar el producto adecuado según el tipo de uso, superficie o entorno.</p>
        </div>

        <div className="grid-6">
          {items.map(item => (
            <div key={item.title} className="card-light" style={{ padding: '28px 24px' }}>
              <div className="orb orb--soft"><Icon name={item.icon} color="var(--color-azul-cientifico)" /></div>
              <h3 style={{ fontSize: 18, fontWeight: 700, color: 'var(--fg1)' }}>{item.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--fg2)', lineHeight: 1.55, flex: 1 }}>{item.desc}</p>
              <a style={{ fontSize: 13.5, color: 'var(--color-azul-cian)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', marginTop: 4 }}>
                Consultar solución <Icon name="arrowRight" size={14} />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   6. Sectors — DARK background per brandbook
   ========================================================================= */
function Sectors() {
  const items = [
    { icon: 'chefHat', title: 'Restaurantes y cocinas profesionales', desc: 'Apoyo para rutinas de limpieza en zonas de preparación, grasa, superficies de contacto, baños y áreas comunes.' },
    { icon: 'briefcase', title: 'Oficinas y empresas', desc: 'Productos para mantener espacios de trabajo limpios, organizados y adecuados para equipos y visitantes.' },
    { icon: 'shoppingCart', title: 'Comercios y locales', desc: 'Soluciones para limpieza diaria, presentación del espacio y mantenimiento de zonas de alto tránsito.' },
    { icon: 'factory', title: 'Industrias y operaciones', desc: 'Alternativas para procesos de limpieza más exigentes, con enfoque en orden, seguridad y continuidad operativa.' },
  ];

  return (
    <section className="section section--dark" id="sectores" style={{ position: 'relative' }}>
      <Molecule width={300} style={{ position: 'absolute', top: 60, left: 20, opacity: 0.25 }} />
      <Molecule width={260} style={{ position: 'absolute', bottom: 60, right: 40, opacity: 0.25 }} />
      <DotGrid rows={5} cols={6} color="#20E7AF" opacity={0.35} style={{ position: 'absolute', top: 120, right: 80 }} />
      <Bubble size={240} filled style={{ position: 'absolute', top: -80, right: -80, opacity: 0.3 }} />
      <Bubble size={180} filled style={{ position: 'absolute', bottom: -60, left: -40, opacity: 0.25 }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="sec-head">
          <EyebrowRule />
          <h2 className="sec-head__title">Soluciones para empresas que necesitan <span className="grad">limpieza constante y confiable</span></h2>
          <p className="sec-head__subtitle">Cada operación tiene necesidades distintas. Por eso, DISPROQUILIM acompaña a negocios que requieren productos profesionales, reposición y orientación clara.</p>
        </div>

        <div className="grid-4">
          {items.map(item => (
            <div key={item.title} className="card-dark" style={{ padding: '24px 22px', alignItems: 'flex-start', gap: 14 }}>
              <div className="orb orb--outline on-dark"><Icon name={item.icon} /></div>
              <h3 style={{ fontSize: 17, fontWeight: 700, color: '#fff', lineHeight: 1.3 }}>{item.title}</h3>
              <div style={{ height: 2, width: 28, background: 'var(--accent)', borderRadius: 2 }} />
              <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.75)', lineHeight: 1.55, flex: 1 }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   7. Differentials / Beneficios — white, 3 + 2 layout
   ========================================================================= */
function Differentials() {
  const items = [
    { icon: 'clipboardSearch', title: 'Respaldo técnico', desc: 'Ayudamos a orientar la elección del producto según necesidad, uso y tipo de espacio.' },
    { icon: 'award', title: 'Calidad profesional', desc: 'Soluciones pensadas para negocios que necesitan resultados consistentes.' },
    { icon: 'headset', title: 'Atención cercana', desc: 'Comunicación clara para resolver dudas, cotizar y acompañar la decisión de compra.' },
    { icon: 'sparkles', title: 'Imagen moderna y confiable', desc: 'Una marca ordenada, profesional y alineada con las exigencias actuales del mercado.' },
    { icon: 'shield', title: 'Enfoque en higiene y seguridad', desc: 'Productos y comunicación orientados a espacios más limpios, cuidados y funcionales.' },
  ];

  const Card = ({ item }) => (
    <div className="card-light" style={{ alignItems: 'center', textAlign: 'center', padding: '36px 24px 32px', position: 'relative' }}>
      <DotGrid rows={3} cols={4} spacing={6} size={1} color="#1299D5" opacity={0.35} style={{ position: 'absolute', top: 16, left: 16 }} />
      <div className="orb orb--gradient orb--lg"><Icon name={item.icon} size={32} color="#fff" /></div>
      <h3 style={{ fontSize: 18, fontWeight: 700, color: 'var(--fg1)', marginTop: 6 }}>{item.title}</h3>
      <p style={{ fontSize: 13.5, color: 'var(--fg2)', lineHeight: 1.55 }}>{item.desc}</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }}>
        <div style={{ height: 2, width: 24, background: 'var(--accent)', borderRadius: 2 }} />
        <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--accent)' }} />
      </div>
    </div>
  );

  return (
    <section className="section section--white" id="beneficios">
      <div className="container">
        <div className="sec-head">
          <EyebrowRule />
          <h2 className="sec-head__title">Más que productos: <span className="accent">soluciones claras</span> para limpiar mejor</h2>
          <p className="sec-head__subtitle">DISPROQUILIM combina productos profesionales, atención cercana y una imagen moderna para ayudar a negocios que buscan confianza en cada compra.</p>
        </div>

        <div className="grid-3" style={{ marginBottom: 24 }}>
          {items.slice(0, 3).map(item => <Card key={item.title} item={item} />)}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, maxWidth: '66%', margin: '0 auto' }}>
          {items.slice(3, 5).map(item => <Card key={item.title} item={item} />)}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   8. Products — gris-claro, photo + product grid
   ========================================================================= */
function Products() {
  const items = [
    { icon: 'flask', title: 'Desengrasante industrial', use: 'Para superficies con grasa, cocinas profesionales y áreas operativas.' },
    { icon: 'shieldCheck', title: 'Desinfectante multiuso', use: 'Para apoyar rutinas de higiene en superficies y espacios de trabajo.' },
    { icon: 'droplet', title: 'Limpiador concentrado', use: 'Pensado para rendimiento, reposición y uso frecuente.' },
    { icon: 'sparkles', title: 'Limpiador de superficies', use: 'Ideal para mantenimiento diario en áreas de atención y operación.' },
    { icon: 'bottle', title: 'Jabón líquido industrial', use: 'Para rutinas de higiene en manos y estaciones de servicio.' },
    { icon: 'package', title: 'Detergente profesional', use: 'Para limpieza constante en negocios con alta rotación de uso.' },
  ];

  return (
    <section className="section section--page" id="productos" style={{ position: 'relative' }}>
      <DotGrid rows={4} cols={4} color="#1299D5" opacity={0.4} style={{ position: 'absolute', top: 80, left: 40 }} />

      <div className="container" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '0.85fr 1.3fr', gap: 56, alignItems: 'center' }}>
        {/* Left — copy + product visual */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <EyebrowRule />
          <h2 className="sec-head__title" style={{ textAlign: 'left', fontSize: 38 }}>
            Productos profesionales para rutinas de limpieza <span className="accent">más eficientes</span>
          </h2>
          <p style={{ fontSize: 15.5, color: 'var(--fg2)', lineHeight: 1.6 }}>
            Desde limpieza diaria hasta necesidades de mayor exigencia, nuestras soluciones están pensadas para negocios que necesitan orden, rendimiento y confianza.
          </p>

          {/* Product line-up illustration */}
          <div style={{
            marginTop: 14, height: 260, borderRadius: 24,
            background: 'linear-gradient(135deg, #FFFFFF 0%, #E0FBF1 100%)',
            border: '1px solid var(--border-soft)',
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center', gap: 12, padding: '24px 18px 18px',
            boxShadow: 'var(--shadow-md)', position: 'relative', overflow: 'hidden',
          }}>
            <DotGrid rows={3} cols={4} color="#1299D5" opacity={0.4} style={{ position: 'absolute', top: 14, left: 18 }} />
            {/* Three bottle silhouettes */}
            {[
              { h: 200, w: 70, color: '#1916A8' },
              { h: 170, w: 60, color: '#FFFFFF', stroke: true },
              { h: 220, w: 80, color: '#152FBE' },
            ].map((b, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{ width: b.w * 0.5, height: 14, background: b.stroke ? '#20E7AF' : '#1299D5', borderRadius: '4px 4px 0 0', marginBottom: -2 }} />
                <div style={{
                  width: b.w, height: b.h,
                  background: b.color,
                  border: b.stroke ? '1.5px solid var(--border-soft)' : 'none',
                  borderRadius: 8,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 8px 18px rgba(25,22,168,0.18)',
                }}>
                  <div style={{ width: b.w - 16, height: b.h * 0.65, background: '#fff', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 6 }}>
                    <Logo variant="mark" height={20} />
                    <div style={{ fontSize: 6, fontWeight: 700, color: '#1916A8', letterSpacing: 0.3 }}>DISPROQUILIM</div>
                    <div style={{ width: '60%', height: 2, background: '#1299D5' }} />
                    <div style={{ width: '70%', height: 8, background: '#152FBE', borderRadius: 2, marginTop: 6 }} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right — 6 product cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map(item => (
            <div key={item.title} className="card-light" style={{ padding: '20px 18px', textAlign: 'center', alignItems: 'center', gap: 10 }}>
              <div className="orb orb--soft orb--sm"><Icon name={item.icon} size={20} color="var(--color-azul-cientifico)" /></div>
              <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--fg1)', lineHeight: 1.3, minHeight: 36 }}>{item.title}</h3>
              <p style={{ fontSize: 12, color: 'var(--fg2)', lineHeight: 1.5, flex: 1 }}>{item.use}</p>
              <button style={{
                padding: '8px 14px',
                border: '1.5px solid var(--color-azul-cian)',
                color: 'var(--color-azul-cian)',
                borderRadius: 999,
                fontSize: 12,
                fontWeight: 600,
                cursor: 'pointer',
                background: '#fff',
              }}>Consultar disponibilidad</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   9. Process — white, 4 timeline steps
   ========================================================================= */
function Process() {
  const steps = [
    { n: '01', icon: 'messageCircle', title: 'Cuéntanos qué necesitas', desc: 'Identificamos el tipo de espacio, frecuencia de uso, problema principal y volumen aproximado.' },
    { n: '02', icon: 'clipboardSearch', title: 'Revisamos la mejor opción', desc: 'Orientamos la selección de productos según superficie, uso y necesidad operativa.' },
    { n: '03', icon: 'fileDollar', title: 'Cotizamos o recomendamos', desc: 'Te entregamos una propuesta clara para que puedas tomar una decisión informada.' },
    { n: '04', icon: 'truck', title: 'Coordinamos el suministro', desc: 'Acompañamos la entrega o reposición según disponibilidad y cobertura.' },
  ];

  return (
    <section className="section section--white" style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', top: 80, right: 60 }}><DotGrid rows={4} cols={5} color="#1299D5" opacity={0.35} /></div>

      <div className="container" style={{ position: 'relative' }}>
        <div className="sec-head">
          <EyebrowRule />
          <h2 className="sec-head__title">Así te ayudamos a elegir la <span className="accent">solución adecuada</span></h2>
          <p className="sec-head__subtitle">Queremos que el proceso sea claro desde el primer contacto.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, position: 'relative' }}>
          {/* Timeline line behind orbs */}
          <div style={{ position: 'absolute', top: 60, left: '12.5%', right: '12.5%', height: 1.5, background: 'linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent)', opacity: 0.5, zIndex: 0 }} />
          {steps.map(step => (
            <div key={step.n} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 14, position: 'relative', zIndex: 1 }}>
              <div className="orb orb--lg orb--soft">
                <Icon name={step.icon} size={28} />
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, background: 'linear-gradient(135deg, #152FBE 0%, #20E7AF 100%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', lineHeight: 1 }}>{step.n}</div>
              <h3 style={{ fontSize: 16, fontWeight: 700, color: 'var(--fg1)', lineHeight: 1.3, padding: '0 8px' }}>{step.title}</h3>
              <p style={{ fontSize: 13, color: 'var(--fg2)', lineHeight: 1.55, padding: '0 4px' }}>{step.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   10. Team — white, photo grid + 4 attribute pills
   ========================================================================= */
function Team() {
  const pills = [
    { icon: 'user', title: 'Uniforme corporativo' },
    { icon: 'sparkles', title: 'Procesos limpios' },
    { icon: 'headset', title: 'Atención profesional' },
    { icon: 'package', title: 'Entornos organizados' },
  ];

  // Photo placeholders — 4 tiles in a grid showing the brand visual culture
  const tiles = [
    { label: 'Equipo en uniforme', color: 'linear-gradient(135deg, #1916A8, #152FBE)' },
    { label: 'Producto en uso', color: 'linear-gradient(135deg, #152FBE, #1299D5)' },
    { label: 'Bodega ordenada', color: 'linear-gradient(135deg, #1299D5, #16C7C5)' },
    { label: 'Asesoría técnica', color: 'linear-gradient(135deg, #16C7C5, #20E7AF)' },
  ];

  return (
    <section className="section section--white" style={{ position: 'relative' }}>
      <Molecule width={220} style={{ position: 'absolute', top: 80, left: 20, opacity: 0.3 }} />
      <Bubble size={120} filled style={{ position: 'absolute', bottom: 80, right: 60, opacity: 0.3 }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="sec-head">
          <EyebrowRule />
          <h2 className="sec-head__title">Un equipo preparado para acompañar la <span className="accent">limpieza de tu negocio</span></h2>
          <p className="sec-head__subtitle">Creemos en una atención profesional, clara y cercana. Por eso, nuestra marca se presenta con personas reales, procesos organizados y una cultura visual basada en higiene, seguridad y confianza.</p>
        </div>

        {/* Photo grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 16, height: 480, marginBottom: 40 }}>
          {tiles.map((t, i) => (
            <div
              key={t.label}
              style={{
                gridColumn: i === 0 ? 'span 1' : 'span 1',
                gridRow: i === 0 ? 'span 2' : 'span 1',
                borderRadius: 20,
                background: t.color,
                position: 'relative',
                overflow: 'hidden',
                boxShadow: 'var(--shadow-md)',
                display: 'flex', alignItems: 'flex-end',
                padding: 22,
                color: '#fff',
              }}
            >
              <DotGrid rows={3} cols={4} color="#20E7AF" opacity={0.35} style={{ position: 'absolute', top: 18, right: 18 }} />
              <Bubble size={i === 0 ? 100 : 60} filled style={{ position: 'absolute', top: i === 0 ? 60 : 30, left: i === 0 ? 40 : 20, opacity: 0.35 }} />
              <div style={{ position: 'relative', zIndex: 2 }}>
                <div style={{ fontSize: 11, opacity: 0.75, marginBottom: 4, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Placeholder</div>
                <div style={{ fontSize: i === 0 ? 22 : 15, fontWeight: 700, lineHeight: 1.25 }}>{t.label}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Pills */}
        <div className="grid-4" style={{ marginBottom: 36 }}>
          {pills.map(p => (
            <div key={p.title} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', background: '#fff', border: '1px solid var(--border-soft)', borderRadius: 14, boxShadow: 'var(--shadow-sm)' }}>
              <div className="orb orb--sm orb--soft"><Icon name={p.icon} size={20} color="var(--color-azul-cian)" /></div>
              <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg1)' }}>{p.title}</span>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center' }}>
          <button className="btn btn--primary">
            <Icon name="messageCircle" size={18} />
            Hablar con un asesor
          </button>
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   11. Coverage — light, 2-column with abstract map
   ========================================================================= */
function Coverage() {
  return (
    <section className="section section--white" style={{ position: 'relative' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <Logo variant="dark" height={36} />
          <EyebrowRule />
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.015em', color: 'var(--fg1)' }}>
            Atención para negocios que buscan un proveedor <span className="text-grad">cercano y confiable</span>
          </h2>
          <p style={{ fontSize: 15, color: 'var(--fg2)', lineHeight: 1.65, maxWidth: 480 }}>
            DISPROQUILIM atiende necesidades comerciales e industriales con enfoque local. Consulta disponibilidad, cobertura y condiciones de suministro según tu ubicación y tipo de producto.
          </p>

          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', background: 'var(--bg-page)', border: '1px solid var(--border-soft)', borderRadius: 14, maxWidth: 360 }}>
            <Icon name="mapPin" size={20} color="var(--color-azul-cian)" />
            <div>
              <div style={{ fontSize: 11, color: 'var(--fg3)' }}>Ubicación de referencia</div>
              <div style={{ fontSize: 15, color: 'var(--fg1)', fontWeight: 700 }}>San Francisco, Zulia</div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 12, marginTop: 4, flexWrap: 'wrap' }}>
            {[
              { icon: 'truck', title: 'Entrega confiable' },
              { icon: 'headset', title: 'Asesoría especializada' },
              { icon: 'calendarCheck', title: 'Disponibilidad garantizada' },
            ].map(item => (
              <div key={item.title} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: '#fff', border: '1px solid var(--border-soft)', borderRadius: 12 }}>
                <Icon name={item.icon} size={18} color="var(--color-azul-cian)" />
                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg1)' }}>{item.title}</span>
              </div>
            ))}
          </div>

          <button className="btn btn--primary" style={{ alignSelf: 'flex-start', marginTop: 8 }}>
            <Icon name="messageCircle" size={18} />
            Consultar cobertura
          </button>
        </div>

        {/* Abstract map */}
        <div style={{
          aspectRatio: '1.1 / 1',
          borderRadius: 24,
          background: 'linear-gradient(160deg, #F2F4F7 0%, #E0FBF1 100%)',
          position: 'relative', overflow: 'hidden',
          border: '1px solid var(--border-soft)',
          boxShadow: 'var(--shadow-lg)',
        }}>
          <svg viewBox="0 0 400 360" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
            <defs>
              <radialGradient id="map-pulse" cx="0.5" cy="0.5" r="0.5">
                <stop offset="0%" stopColor="#20E7AF" stopOpacity="0.5" />
                <stop offset="100%" stopColor="#20E7AF" stopOpacity="0" />
              </radialGradient>
            </defs>
            {/* Abstract region outlines */}
            <g fill="none" stroke="#B5BCC6" strokeWidth="0.8" opacity="0.6">
              <path d="M40 140 L120 90 L180 110 L260 80 L340 130 L350 220 L300 280 L220 290 L140 270 L60 250 Z" />
              <path d="M180 110 L220 200" /><path d="M120 90 L140 170 L180 110" />
              <path d="M260 80 L240 180 L180 110" /><path d="M340 130 L300 200 L260 80" />
              <path d="M140 170 L240 180" /><path d="M220 200 L300 200" />
              <path d="M140 170 L130 240" /><path d="M240 180 L250 270" />
            </g>
            {/* Connection lines from center */}
            <g stroke="#20E7AF" strokeWidth="1" strokeDasharray="3 3" opacity="0.7">
              <line x1="200" y1="180" x2="80" y2="220" /><line x1="200" y1="180" x2="320" y2="120" />
              <line x1="200" y1="180" x2="340" y2="240" /><line x1="200" y1="180" x2="120" y2="120" />
              <line x1="200" y1="180" x2="240" y2="290" />
            </g>
            {/* Node dots */}
            <g fill="#20E7AF">
              <circle cx="80" cy="220" r="3" /><circle cx="320" cy="120" r="3" />
              <circle cx="340" cy="240" r="3" /><circle cx="120" cy="120" r="3" />
              <circle cx="240" cy="290" r="3" />
            </g>
            {/* Central pin */}
            <circle cx="200" cy="180" r="50" fill="url(#map-pulse)" />
          </svg>

          {/* Pin */}
          <div style={{ position: 'absolute', left: '50%', top: '46%', transform: 'translate(-50%, -50%)' }}>
            <div style={{ width: 60, height: 60, borderRadius: '50% 50% 50% 0', background: 'linear-gradient(135deg, #1299D5 0%, #20E7AF 100%)', transform: 'rotate(-45deg)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 12px 28px rgba(18,153,213,0.4)' }}>
              <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#fff' }} />
            </div>
          </div>

          {/* Bottom info pill */}
          <div style={{ position: 'absolute', left: 24, right: 24, bottom: 24, background: '#fff', borderRadius: 14, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, boxShadow: 'var(--shadow-md)' }}>
            <div style={{ width: 30, height: 30, borderRadius: 999, background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent-strong)', flex: 'none' }}>
              <Icon name="checkCircle" size={16} stroke={2} />
            </div>
            <div style={{ fontSize: 13, color: 'var(--fg2)', lineHeight: 1.4 }}>
              Cobertura local con atención cercana, soluciones confiables y entregas eficientes.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   12. Testimonials / Trust — gris-claro, 4 attribute cards with placeholder
   ========================================================================= */
function Testimonials() {
  const items = [
    { icon: 'shieldCheck', title: 'Claridad en la recomendación', desc: 'Explicamos las opciones de forma sencilla para facilitar la compra.' },
    { icon: 'clipboard', title: 'Orden en el suministro', desc: 'Buscamos que cada negocio pueda planificar mejor sus productos de limpieza.' },
    { icon: 'messageMore', title: 'Comunicación cercana', desc: 'Acompañamos el proceso desde la consulta hasta la entrega o reposición.' },
    { icon: 'messageCircle', title: 'Espacio para testimonio de cliente', desc: 'Placeholder editable para incorporar prueba social real cuando esté disponible.', placeholder: true },
  ];

  return (
    <section className="section section--page" style={{ position: 'relative' }}>
      <Molecule width={220} style={{ position: 'absolute', top: 60, left: 30, opacity: 0.3 }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="sec-head">
          <EyebrowRule />
          <h2 className="sec-head__title">Confianza construida con claridad, atención y <span className="accent">soluciones profesionales</span></h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 22 }}>
          {items.map(item => (
            <div key={item.title} style={{
              background: item.placeholder ? 'repeating-linear-gradient(45deg, #fff, #fff 8px, #F7FAFC 8px, #F7FAFC 16px)' : '#fff',
              borderRadius: 18, padding: '24px 28px',
              border: '1px solid var(--border-soft)',
              boxShadow: 'var(--shadow-md)',
              display: 'flex', gap: 18, alignItems: 'flex-start',
            }}>
              <div className="orb orb--outline" style={{ background: '#fff' }}><Icon name={item.icon} size={24} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--accent)' }} />
                  <h3 style={{ fontSize: 16, fontWeight: 700, color: 'var(--fg1)' }}>{item.title}</h3>
                </div>
                <p style={{ fontSize: 13.5, color: 'var(--fg2)', lineHeight: 1.55 }}>{item.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   13. FAQ — white, 6 accordion items
   ========================================================================= */
function FAQ() {
  const items = [
    { q: '¿DISPROQUILIM vende productos para empresas o también para hogares?', a: 'DISPROQUILIM está orientado principalmente a negocios, empresas, comercios, restaurantes e industrias que necesitan soluciones de limpieza profesional.' },
    { q: '¿Puedo solicitar asesoría para elegir el producto correcto?', a: 'Sí. Puedes contarnos el tipo de espacio, superficie o necesidad, y el equipo te orientará sobre la solución más adecuada según disponibilidad.' },
    { q: '¿Manejan productos para limpieza industrial?', a: 'Sí, la marca contempla soluciones para entornos comerciales e industriales. La recomendación específica dependerá del tipo de uso y necesidad.' },
    { q: '¿Puedo cotizar productos para mi negocio?', a: 'Sí. La home permite solicitar una cotización o asesoría mediante formulario o botón de contacto.' },
    { q: '¿Atienden restaurantes, oficinas y comercios?', a: 'Sí. DISPROQUILIM puede orientar soluciones para diferentes tipos de negocios con necesidades recurrentes de limpieza e higiene.' },
    { q: '¿Dónde puedo consultar disponibilidad?', a: 'Puedes solicitar información mediante el formulario de contacto o el botón de asesoría.' },
  ];

  const [open, setOpen] = React.useState(new Set([0, 2]));
  const toggle = (i) => {
    const next = new Set(open);
    next.has(i) ? next.delete(i) : next.add(i);
    setOpen(next);
  };

  return (
    <section className="section section--white" style={{ position: 'relative' }}>
      <Molecule width={220} style={{ position: 'absolute', top: 60, left: 0, opacity: 0.3 }} />
      <Bubble size={90} filled style={{ position: 'absolute', top: 120, right: 80, opacity: 0.35 }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="sec-head">
          <EyebrowRule />
          <h2 className="sec-head__title">Preguntas <span className="accent">frecuentes</span></h2>
          <p className="sec-head__subtitle">Resolvemos algunas dudas comunes sobre nuestras soluciones de limpieza profesional.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, maxWidth: 1100, margin: '0 auto' }}>
          {items.map((item, i) => {
            const isOpen = open.has(i);
            return (
              <div key={i} style={{ background: '#fff', borderRadius: 16, padding: '18px 22px', border: '1px solid var(--border-soft)', boxShadow: 'var(--shadow-sm)', cursor: 'pointer', transition: 'border-color 150ms' }} onClick={() => toggle(i)}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                  <div className="orb orb--outline" style={{ width: 32, height: 32, background: '#fff', flex: 'none' }}>
                    <Icon name="chevronDown" size={14} stroke={2.5} style={{ transition: 'transform 200ms', transform: isOpen ? 'rotate(180deg)' : 'rotate(0)' }} />
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--fg1)', flex: 1, lineHeight: 1.4, paddingTop: 5 }}>{item.q}</div>
                  <div style={{ color: 'var(--accent-strong)', fontSize: 22, fontWeight: 400, lineHeight: 1, paddingTop: 4 }}>{isOpen ? '−' : '+'}</div>
                </div>
                {isOpen && (
                  <div style={{ paddingLeft: 46, paddingTop: 12, marginTop: 12, borderTop: '1px solid var(--border-soft)', fontSize: 13.5, lineHeight: 1.6, color: 'var(--fg2)' }}>
                    {item.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   14. Final CTA — DARK per brandbook, with product imagery
   ========================================================================= */
function FinalCTA() {
  return (
    <section className="section section--dark" style={{ position: 'relative', paddingTop: 80, paddingBottom: 80, background: 'var(--grad-dark-cta)' }}>
      <Molecule width={260} style={{ position: 'absolute', top: 60, right: 40, opacity: 0.3 }} />
      <Molecule width={180} style={{ position: 'absolute', bottom: 80, left: 60, opacity: 0.25 }} />
      <Bubble size={180} filled style={{ position: 'absolute', top: 80, left: 100, opacity: 0.4 }} />
      <Bubble size={80} filled style={{ position: 'absolute', bottom: 80, left: '38%', opacity: 0.4 }} />
      <DotGrid rows={5} cols={5} color="#20E7AF" opacity={0.4} style={{ position: 'absolute', top: 80, right: 'calc(50% - 70px)' }} />

      <div className="container" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <EyebrowRule />
          <h2 style={{
            fontFamily: 'var(--font-display)', fontSize: 50, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.02em', color: '#fff',
          }}>
            ¿Necesitas productos de limpieza <span style={{
              background: 'linear-gradient(135deg, #1299D5 0%, #20E7AF 100%)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>confiables</span> para tu negocio?
          </h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.78)', lineHeight: 1.6, maxWidth: 520 }}>
            Cuéntanos qué tipo de espacio manejas y qué necesidad quieres resolver. Te ayudaremos a encontrar una solución clara, profesional y adecuada.
          </p>

          <div style={{ display: 'flex', gap: 14, marginTop: 4 }}>
            <button className="btn btn--primary">
              <Icon name="messageCircle" size={18} />
              Solicitar asesoría
            </button>
            <button className="btn btn--ghost-white">
              <Icon name="fileText" size={18} />
              Cotizar productos
            </button>
          </div>
        </div>

        {/* Product visual */}
        <div style={{ position: 'relative', minHeight: 420, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            width: 320, aspectRatio: '0.78 / 1', borderRadius: 24,
            background: 'linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(32,231,175,0.08) 100%)',
            border: '1px solid rgba(140,200,255,0.18)',
            position: 'relative', overflow: 'hidden',
            display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 24,
            backdropFilter: 'blur(8px)',
          }}>
            <Bubble size={50} filled style={{ position: 'absolute', top: 60, left: 40, opacity: 0.6 }} />
            <Bubble size={30} filled style={{ position: 'absolute', top: 30, right: 50, opacity: 0.6 }} />
            <Molecule width={120} color="#20E7AF" style={{ position: 'absolute', top: 18, right: 18, opacity: 0.45 }} />

            <svg viewBox="0 0 200 280" width="78%" style={{ filter: 'drop-shadow(0 24px 36px rgba(0,0,0,0.4))' }}>
              <defs>
                <linearGradient id="cta-bottle" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#152FBE" /><stop offset="100%" stopColor="#1916A8" />
                </linearGradient>
              </defs>
              <rect x="76" y="20" width="48" height="32" rx="6" fill="#20E7AF" />
              <rect x="84" y="48" width="32" height="14" fill="#152FBE" />
              <path d="M50 70 Q50 60 60 60 H140 Q150 60 150 70 V250 Q150 270 130 270 H70 Q50 270 50 250 Z" fill="url(#cta-bottle)" />
              <rect x="58" y="110" width="84" height="120" rx="4" fill="#FFFFFF" />
              <circle cx="100" cy="138" r="14" fill="#20E7AF" />
              <circle cx="100" cy="138" r="6" fill="#152FBE" />
              <rect x="72" y="166" width="56" height="3" rx="1.5" fill="#1916A8" />
              <rect x="68" y="174" width="64" height="3" rx="1.5" fill="#1299D5" />
              <rect x="60" y="216" width="80" height="10" rx="2" fill="#152FBE" />
              <text x="100" y="223" fill="#fff" fontFamily="Montserrat, sans-serif" fontSize="6" fontWeight="700" textAnchor="middle">USO PROFESIONAL</text>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================================
   15. Contact — light/gradient, form
   ========================================================================= */
function Contact() {
  const [submitted, setSubmitted] = React.useState(false);

  return (
    <section className="section section--page" style={{ paddingTop: 80, paddingBottom: 96 }} id="contacto">
      <div className="container">
        <div style={{
          background: '#fff',
          borderRadius: 32,
          boxShadow: 'var(--shadow-lg)',
          border: '1px solid var(--border-soft)',
          display: 'grid', gridTemplateColumns: '1fr 1.2fr',
          overflow: 'hidden',
          minHeight: 580,
        }}>
          {/* Left panel — pitch */}
          <div style={{ padding: '56px 48px', position: 'relative', background: 'linear-gradient(160deg, #FFFFFF 0%, #E0FBF1 100%)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <Molecule width={200} style={{ position: 'absolute', bottom: 40, left: 30, opacity: 0.5 }} />
            <Bubble size={100} filled={false} style={{ position: 'absolute', top: 60, right: 30, opacity: 0.6 }} />
            <Bubble size={50} filled style={{ position: 'absolute', top: 180, left: 60, opacity: 0.5 }} />

            <EyebrowRule />
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--fg1)', marginTop: 16 }}>
              Solicita <span className="text-grad">información</span>
            </h2>
            <p style={{ fontSize: 15, color: 'var(--fg2)', lineHeight: 1.65, marginTop: 18, maxWidth: 320 }}>
              Te contactaremos para conocer mejor tu necesidad y orientarte según disponibilidad.
            </p>
          </div>

          {/* Right panel — form */}
          <div style={{ padding: '48px 44px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="field"><Icon name="user" size={20} /><div className="field-content"><input className="field-input" placeholder="Nombre" /></div></div>
            <div className="field"><Icon name="briefcase" size={20} /><div className="field-content"><input className="field-input" placeholder="Empresa" /></div></div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div className="field"><Icon name="phone" size={20} /><div className="field-content"><input className="field-input" placeholder="Teléfono / WhatsApp" /></div></div>
              <div className="field"><Icon name="mail" size={20} /><div className="field-content"><input className="field-input" placeholder="Correo electrónico" /></div></div>
            </div>
            <div className="field"><Icon name="building" size={20} /><div className="field-content"><select className="field-input" defaultValue=""><option value="" disabled>Tipo de negocio</option><option>Restaurante</option><option>Oficina / empresa</option><option>Comercio</option><option>Industria</option><option>Otro</option></select></div><Icon name="chevronDown" size={16} /></div>
            <div className="field"><Icon name="bottle" size={20} /><div className="field-content"><input className="field-input" placeholder="Producto o necesidad" /></div></div>
            <div className="field" style={{ alignItems: 'flex-start' }}>
              <Icon name="messageCircle" size={20} />
              <div className="field-content"><textarea className="field-input" placeholder="Mensaje" rows="3" /></div>
            </div>

            <button className="btn btn--primary" onClick={() => setSubmitted(true)} style={{ marginTop: 4, padding: '16px 24px', justifyContent: 'center', fontSize: 16 }}>
              <Icon name={submitted ? 'check' : 'send'} size={20} />
              {submitted ? 'Solicitud enviada' : 'Enviar solicitud'}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  TrustStrip, Problem, Solutions, Sectors, Differentials, Products,
  Process, Team, Coverage, Testimonials, FAQ, FinalCTA, Contact,
});