// ─── CEIA Ingeniería — Landing (basada en ceiaingenieria.com) ───────
// Mezcla intencional de bandas light/dark con paleta night/deep/steel + accent

function ServiceIcon({ name, size = 22 }) {
  const map = {
    gauge: IconGauge, flame: IconFlame, layers: IconLayers, wrench: IconWrench,
    chart: IconChart, book: IconBook, circuit: IconCircuit, branch: IconBranch,
    alert: IconAlert, pipe: IconPipe, shield: IconShield, droplet: IconDroplet,
    atom: IconAtom, clipboard: IconClipboard, folder: IconFolder,
  };
  const C = map[name] || IconAtom;
  return <C size={size} />;
}

// ─── 1. HERO v2 — Digital-twin industrial scene ──────────────────────
function LandingHero({ onCTA, variant }) {
  const canvasRef  = React.useRef(null);
  const rafRef     = React.useRef(null);
  const [activeSpot, setActiveSpot] = React.useState(null);

  const isMob = window.innerWidth <= 640;
  const isTab = window.innerWidth > 640 && window.innerWidth <= 1024;
  const isDsk = !isMob && !isTab;

  // Value-flow hotspots — mobile:true = visible on mobile strip/tap; tablet:true = show on tablet
  const HOTSPOTS = [
    { id:'h1', x:59.5, y:44,   label:'Arquitectura web comercial',  rgb:'240,165,55', delay:'0s',   cls:'',           mobile:true  },
    { id:'h2', x:78.5, y:40.5, label:'Agente IA para WhatsApp',      rgb:'65,210,180', delay:'0.4s', cls:'',           mobile:true  },
    { id:'h3', x:65,   y:67,   label:'Captura de oportunidades',     rgb:'240,165,55', delay:'0.8s', cls:'',           mobile:true  },
    { id:'h4', x:82.5, y:55,   label:'Automatización operativa',     rgb:'65,210,180', delay:'0.2s', cls:'align-right',mobile:false },
    { id:'h5', x:56.5, y:30,   label:'Confianza para decidir',       rgb:'240,165,55', delay:'1.2s', cls:'below',      mobile:true  },
    { id:'h6', x:70.5, y:24,   label:'Ingeniería aplicada',          rgb:'65,210,180', delay:'0.6s', cls:'below',      mobile:false },
  ];

  // Micro-cards — commercial and operational telemetry; tablet:true = show on tablet (2 cards max)
  const MICRO_CARDS = [
    { id:'mc1', x:73, y:14, label:'Claridad comercial',      val:'Alta',      unit:'',          bar:0.82, status:'Priorizada',      rgb:'65,210,180', delay:'1.5s', anchor:'',            tablet:true  },
    { id:'mc2', x:91, y:26, label:'Fricción de compra',      val:'Baja',      unit:'',          bar:0.22, status:'Reducida',        rgb:'240,165,55', delay:'1.9s', anchor:'anchor-right', tablet:true  },
    { id:'mc3', x:91, y:60, label:'Leads calificados',       val:'Activos',   unit:'',          bar:0.74, status:'En captura',      rgb:'65,210,180', delay:'2.2s', anchor:'anchor-right', tablet:false },
    { id:'mc4', x:54, y:72, label:'Horas manuales',          val:'-',         unit:'retrabajo', bar:0.54, status:'Automatizable',   rgb:'240,165,55', delay:'2.5s', anchor:'',            tablet:false },
    { id:'mc5', x:74, y:76, label:'Oportunidad comercial',   val:'Detectada', unit:'',          bar:0.68, status:'Lista para activar', rgb:'65,210,180', delay:'2.8s', anchor:'',         tablet:false },
  ];

  // Indicator strip data for mobile (same telemetry as micro-cards)
  const INDICATORS = [
    { label:'Claridad web',       val:'Alta',      status:'Priorizada', rgb:'65,210,180'  },
    { label:'WhatsApp IA',        val:'Activo',    status:'Filtra leads', rgb:'240,165,55'  },
    { label:'Captura comercial',  val:'Lista',     status:'Sin fuga', rgb:'65,210,180'  },
    { label:'Trabajo manual',     val:'Reducible', status:'Automatizable', rgb:'240,165,55'  },
    { label:'Operación',          val:'Medible',   status:'Con criterio', rgb:'65,210,180'  },
  ];

  // Canvas — advanced digital-twin HUD
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let w, h;
    const resize = () => { w = canvas.width = canvas.offsetWidth; h = canvas.height = canvas.offsetHeight; };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    const isMobileVP = window.innerWidth <= 640;
    const isTabletVP = window.innerWidth > 640 && window.innerWidth <= 1024;

    const RC  = { x:0.618, y:0.455 }; // main reticle — commercial web architecture panel
    const RC2 = { x:0.785, y:0.408 }; // mini reticle — AI conversation panel

    // Digital ecosystem wireframe outlines
    const ZONES = [
      { x:.50, y:.13, w:.26, h:.73 }, // main digital architecture area
      { x:.73, y:.30, w:.15, h:.32 }, // automation and lead-flow area
    ];

    const FLOWS = [
      { pts:[{x:.44,y:.79},{x:.55,y:.72},{x:.64,y:.66},{x:.73,y:.62}], spd:.00040 },
      { pts:[{x:.76,y:.27},{x:.76,y:.41},{x:.76,y:.55},{x:.76,y:.68}], spd:.00054 },
      { pts:[{x:.54,y:.55},{x:.62,y:.49},{x:.70,y:.43}], spd:.00032 },
    ];

    // Particles constrained to right half where the digital ecosystem is visible
    const particleCount = isMobileVP ? 8 : isTabletVP ? 14 : 22;
    const PARTS = Array.from({ length: particleCount }, () => ({
      x: .46 + Math.random()*.50,
      y: Math.random(),
      vx: (Math.random()-.5)*.00013, vy: (Math.random()-.5)*.00013,
      r: .3 + Math.random()*.8, a: .04 + Math.random()*.10,
    }));

    const GRID = 56;
    let t0 = null, intro = 0;

    const easeOut = (t) => 1 - Math.pow(1 - t, 3);

    // ── Slow scan line — reads the asset top-to-bottom ──────────
    const drawScan = (el, alpha) => {
      if (alpha < .01) return;
      const period = 9500;
      const t      = (el % period) / period;
      const scanY  = t * (h * 1.15) - h * .08;
      if (scanY < -52 || scanY > h + 52) return;
      const grad = ctx.createLinearGradient(0, scanY-30, 0, scanY+30);
      grad.addColorStop(0,   'rgba(240,165,55,0)');
      grad.addColorStop(.42, 'rgba(240,165,55,.035)');
      grad.addColorStop(.5,  'rgba(240,165,55,.062)');
      grad.addColorStop(.58, 'rgba(240,165,55,.035)');
      grad.addColorStop(1,   'rgba(240,165,55,0)');
      ctx.fillStyle = grad;
      ctx.fillRect(0, scanY-30, w, 60);
      ctx.strokeStyle = `rgba(240,165,55,${.12*alpha})`;
      ctx.lineWidth = .8;
      ctx.beginPath(); ctx.moveTo(0, scanY); ctx.lineTo(w, scanY); ctx.stroke();
    };

    // ── Digital ecosystem wireframes ─────────────────────────────
    const drawZones = (alpha) => {
      if (alpha < .01) return;
      ZONES.forEach(z => {
        const zx=z.x*w, zy=z.y*h, zw=z.w*w, zh=z.h*h;
        ctx.strokeStyle = `rgba(70,140,220,${.07*alpha})`;
        ctx.lineWidth = .8;
        ctx.setLineDash([3,5]);
        ctx.strokeRect(zx, zy, zw, zh);
        ctx.setLineDash([]);
        const cl = 11;
        const corners = [[zx,zy,1,1],[zx+zw,zy,-1,1],[zx,zy+zh,1,-1],[zx+zw,zy+zh,-1,-1]];
        ctx.strokeStyle = `rgba(70,140,220,${.22*alpha})`;
        ctx.lineWidth = 1;
        corners.forEach(([cx2,cy2,sx,sy]) => {
          ctx.beginPath();
          ctx.moveTo(cx2+sx*cl, cy2); ctx.lineTo(cx2, cy2); ctx.lineTo(cx2, cy2+sy*cl);
          ctx.stroke();
        });
      });
    };

    // ── Blueprint grid ───────────────────────────────────────────
    const drawGrid = (el) => {
      ctx.strokeStyle = 'rgba(80,130,215,.032)';
      ctx.lineWidth = .5;
      const ox = (el * .007) % GRID;
      for (let x = ox - GRID; x < w + GRID; x += GRID) {
        ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,h); ctx.stroke();
      }
      for (let y = 0; y < h + GRID; y += GRID) {
        ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(w,y); ctx.stroke();
      }
    };

    // ── Corner brackets ──────────────────────────────────────────
    const drawCorners = (alpha) => {
      const m = 24, l = 20;
      ctx.strokeStyle = `rgba(240,165,55,${.24*alpha})`;
      ctx.lineWidth = 1.2;
      ctx.beginPath(); ctx.moveTo(m,m+l); ctx.lineTo(m,m); ctx.lineTo(m+l,m); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(w-m,m+l); ctx.lineTo(w-m,m); ctx.lineTo(w-m-l,m); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(m,h-m-l); ctx.lineTo(m,h-m); ctx.lineTo(m+l,h-m); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(w-m,h-m-l); ctx.lineTo(w-m,h-m); ctx.lineTo(w-m-l,h-m); ctx.stroke();
    };

    // ── Main targeting reticle ───────────────────────────────────
    const drawReticle = (cx, cy, el, alpha) => {
      const a   = easeOut(Math.min(1, alpha * 2));
      const r   = 68 + 7 * Math.sin(el * .0006);
      const rot = el * .00038;

      ctx.lineWidth = 1.3;
      for (let i = 0; i < 4; i++) {
        const a0 = rot + i * Math.PI * .5 + .22;
        const a1 = rot + i * Math.PI * .5 + Math.PI * .5 - .22;
        ctx.strokeStyle = `rgba(240,155,45,${.56*a})`;
        ctx.beginPath(); ctx.arc(cx,cy,r,a0,a1); ctx.stroke();
      }
      for (let i = 0; i < 24; i++) {
        const ang   = rot * 1.6 + (i/24)*Math.PI*2;
        const isMaj = i%6===0;
        const ll    = isMaj ? 8 : 4;
        ctx.strokeStyle = `rgba(240,155,45,${(isMaj ? 0.44 : 0.16)*a})`;
        ctx.lineWidth   = isMaj ? 1.2 : .6;
        const xi1 = cx+Math.cos(ang)*(r-ll), yi1 = cy+Math.sin(ang)*(r-ll);
        const xi2 = cx+Math.cos(ang)*r,       yi2 = cy+Math.sin(ang)*r;
        ctx.beginPath(); ctx.moveTo(xi1,yi1); ctx.lineTo(xi2,yi2); ctx.stroke();
      }
      ctx.strokeStyle = `rgba(240,155,45,${.19*a})`;
      ctx.lineWidth = .7;
      ctx.beginPath(); ctx.arc(cx,cy,r*.54,-rot*.8,-rot*.8+Math.PI*2); ctx.stroke();
      ctx.strokeStyle = `rgba(240,155,45,${.27*a})`;
      ctx.lineWidth = .8;
      ctx.setLineDash([4,6]);
      const ext = r * 1.9;
      ctx.beginPath(); ctx.moveTo(cx-ext,cy); ctx.lineTo(cx-r*.82,cy); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(cx+r*.82,cy); ctx.lineTo(cx+ext,cy); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(cx,cy-ext); ctx.lineTo(cx,cy-r*.82); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(cx,cy+r*.82); ctx.lineTo(cx,cy+ext); ctx.stroke();
      ctx.setLineDash([]);
      ctx.fillStyle = `rgba(240,165,55,${.88*a})`;
      ctx.beginPath(); ctx.arc(cx,cy,2.8,0,Math.PI*2); ctx.fill();
      ctx.strokeStyle = `rgba(240,165,55,${.40*a})`;
      ctx.lineWidth = .7;
      ctx.beginPath(); ctx.arc(cx,cy,7,0,Math.PI*2); ctx.stroke();
      if (a > .5) {
        ctx.fillStyle = `rgba(240,155,45,${.50*a})`;
        ctx.font = '500 7.5px ui-monospace, monospace';
        const lbl = 'ANÁLISIS · ACTIVO';
        const lw  = ctx.measureText(lbl).width;
        ctx.fillText(lbl, cx - lw/2, cy + r + 17);
      }
    };

    // ── Mini reticle on instrument panel ────────────────────────
    const drawMiniReticle = (cx, cy, el, alpha) => {
      const a   = easeOut(alpha);
      const r   = 30 + 3*Math.sin(el*.0009);
      const rot = -el*.00055;
      ctx.lineWidth = .9;
      for (let i = 0; i < 2; i++) {
        const a0 = rot + i*Math.PI + .30;
        const a1 = rot + i*Math.PI + Math.PI - .30;
        ctx.strokeStyle = `rgba(65,210,180,${.38*a})`;
        ctx.beginPath(); ctx.arc(cx,cy,r,a0,a1); ctx.stroke();
      }
      ctx.strokeStyle = `rgba(65,210,180,${.22*a})`;
      ctx.lineWidth = .6;
      ctx.beginPath(); ctx.arc(cx,cy,r*.55,0,Math.PI*2); ctx.stroke();
      ctx.fillStyle = `rgba(65,210,180,${.72*a})`;
      ctx.beginPath(); ctx.arc(cx,cy,2,0,Math.PI*2); ctx.fill();
    };

    // ── Pipe flow animation ──────────────────────────────────────
    const drawFlow = (flow, el, alpha) => {
      const pts = flow.pts;
      ctx.strokeStyle = `rgba(90,165,240,${.11*alpha})`;
      ctx.lineWidth = 1.5;
      ctx.setLineDash([4,3]);
      ctx.beginPath(); ctx.moveTo(pts[0].x*w, pts[0].y*h);
      for (let i=1; i<pts.length; i++) ctx.lineTo(pts[i].x*w, pts[i].y*h);
      ctx.stroke(); ctx.setLineDash([]);
      const seg = ((el*flow.spd)%1)*(pts.length-1);
      const si  = Math.min(Math.floor(seg), pts.length-2);
      const sf  = seg-si;
      const px2 = pts[si].x*w+(pts[si+1].x*w-pts[si].x*w)*sf;
      const py2 = pts[si].y*h+(pts[si+1].y*h-pts[si].y*h)*sf;
      ctx.fillStyle = `rgba(90,220,255,${.78*alpha})`;
      ctx.beginPath(); ctx.arc(px2,py2,2.8,0,Math.PI*2); ctx.fill();
      ctx.fillStyle = `rgba(90,220,255,${.22*alpha})`;
      ctx.beginPath(); ctx.arc(px2,py2,5.5,0,Math.PI*2); ctx.fill();
    };

    // ── Frame loop ───────────────────────────────────────────────
    const frame = (ts) => {
      if (!t0) t0 = ts;
      const el = ts - t0;
      intro = Math.min(1, el / 2400);
      ctx.clearRect(0,0,w,h);

      drawGrid(el);
      drawScan(el, intro);                                              // scan: immediate

      if (!isMobileVP && el > 400)  drawZones(Math.min(1,(el-400)/1200)*intro); // wireframes: 0.4s
      drawCorners(intro);

      const rcx=RC.x*w, rcy=RC.y*h;
      drawReticle(rcx, rcy, el, intro);                                 // reticle: immediate

      if (!isMobileVP && el > 800) {                                    // mini reticle: 0.8s
        drawMiniReticle(RC2.x*w, RC2.y*h, el, Math.min(1,(el-800)/900)*intro);
      }

      if (!isMobileVP && el > 1300) {                                   // pipe flows: 1.3s
        const fa = Math.min(1,(el-1300)/900)*intro;
        FLOWS.forEach(f => drawFlow(f, el, fa));
      }

      PARTS.forEach(p => {
        p.x+=p.vx; p.y+=p.vy;
        if(p.x<.44||p.x>1) p.vx*=-1; if(p.y<0||p.y>1) p.vy*=-1;
        ctx.fillStyle=`rgba(130,170,225,${p.a*intro})`;
        ctx.beginPath(); ctx.arc(p.x*w,p.y*h,p.r,0,Math.PI*2); ctx.fill();
      });

      rafRef.current = requestAnimationFrame(frame);
    };
    rafRef.current = requestAnimationFrame(frame);
    return () => { cancelAnimationFrame(rafRef.current); ro.disconnect(); };
  }, []);

  return (
    <section id="hero" onClick={() => setActiveSpot(null)}
      style={{
        position:'relative', minHeight: isMob ? '82svh' : '84svh',
        display:'flex', flexDirection:'column', justifyContent:'center',
        overflow:'hidden', background:'#070c18',
      }}>
      {/* Photo layer 1 — dark base texture; position controlled by CSS class */}
      <div className="hero-photo-layer" style={{
        position:'absolute', inset:0,
        backgroundImage:"url('assets/hero-ceia-commercial.png')",
        filter:'brightness(.30) saturate(.60) sepia(.10)',
      }} />

      {/* Photo layer 2 — bright reveal; on mobile reveals from center outward */}
      <div className="hero-photo-layer" style={{
        position:'absolute', inset:0,
        backgroundImage:"url('assets/hero-ceia-commercial.png')",
        filter:'brightness(.68) saturate(.90)',
        maskImage: isMob
          ? 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 38%, black 65%)'
          : 'linear-gradient(to right, transparent 0%, transparent 10%, rgba(0,0,0,.42) 28%, black 48%)',
        WebkitMaskImage: isMob
          ? 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 38%, black 65%)'
          : 'linear-gradient(to right, transparent 0%, transparent 10%, rgba(0,0,0,.42) 28%, black 48%)',
      }} />

      {/* Gradient overlays — left panel dark for text, right opens to show machine */}
      <div style={{ position:'absolute', inset:0, zIndex:1,
        background: isMob
          ? 'linear-gradient(180deg,rgba(5,9,20,.82) 0%,rgba(5,9,20,.60) 48%,rgba(5,9,20,.20) 100%)'
          : 'linear-gradient(108deg,rgba(5,9,20,.90) 0%,rgba(5,9,20,.78) 34%,rgba(5,9,20,.30) 52%,rgba(5,9,20,.04) 68%)' }} />
      <div style={{ position:'absolute', inset:0, zIndex:1,
        background:'radial-gradient(ellipse at 14% 58%,rgba(18,52,125,.22) 0%,transparent 50%)' }} />
      <div style={{ position:'absolute', inset:0, zIndex:1,
        background:'radial-gradient(ellipse at 50% 50%,transparent 48%,rgba(0,0,0,.32) 100%)' }} />
      <div style={{ position:'absolute', bottom:0, left:0, right:0, height:'20%', zIndex:1,
        background:'linear-gradient(to top,rgba(7,12,24,1),transparent)' }} />

      {/* Canvas — digital-twin HUD layer */}
      <canvas ref={canvasRef} style={{
        position:'absolute', inset:0, width:'100%', height:'100%',
        zIndex:2, pointerEvents:'none',
      }} />

      {/* Hotspots — interactive commercial and operational zones; touch on tablet, hover on desktop */}
      <div role="group" aria-label="Zonas comerciales y operativas"
        style={{ position:'absolute', inset:0, zIndex:3, pointerEvents:'none' }}>
        {HOTSPOTS.map(hs => (
          <button key={hs.id}
            className="hero-hotspot"
            aria-label={hs.label}
            style={{ left:`${hs.x}%`, top:`${hs.y}%`, pointerEvents:'auto' }}
            onClick={(e) => { e.stopPropagation(); setActiveSpot(prev => prev === hs.id ? null : hs.id); }}
            onMouseEnter={isDsk ? () => setActiveSpot(hs.id) : undefined}
            onMouseLeave={isDsk ? () => setActiveSpot(null) : undefined}>
            <span className="hero-hotspot-ring"
              style={{ borderColor:`rgba(${hs.rgb},.55)`, animationDelay:hs.delay }} />
            <span className="hero-hotspot-dot"
              style={{ background:`rgba(${hs.rgb},.90)`, boxShadow:`0 0 8px rgba(${hs.rgb},.5)` }} />
            {activeSpot===hs.id && (
              <div className={`hero-hotspot-label ${hs.cls}`}
                style={{ borderColor:`rgba(${hs.rgb},.28)`, color:`rgba(${hs.rgb},.88)` }}>
                {hs.label}
              </div>
            )}
          </button>
        ))}
      </div>

      {/* Micro-cards — floating value readouts; desktop all, tablet 2 only */}
      <div aria-hidden="true" style={{ position:'absolute', inset:0, zIndex:3, pointerEvents:'none' }}>
        {MICRO_CARDS.filter(mc => isDsk || (isTab && mc.tablet)).map(mc => (
          <div key={mc.id}
            className={`hero-mc${mc.anchor ? ` ${mc.anchor}` : ''}`}
            style={{ left:`${mc.x}%`, top:`${mc.y}%`, animationDelay:mc.delay }}>
            <div className="hero-mc-card" style={{ borderColor:`rgba(${mc.rgb},.30)` }}>
              <div className="hero-mc-lbl" style={{ color:`rgba(${mc.rgb},.72)` }}>{mc.label}</div>
              <div className="hero-mc-val">
                {mc.val}
                {mc.unit && (
                  <span style={{ fontSize:9, fontWeight:400, opacity:.58, marginLeft:2 }}>{mc.unit}</span>
                )}
              </div>
              <div className="hero-mc-bar-track">
                <div className="hero-mc-bar-fill"
                  style={{ width:`${Math.round(mc.bar*100)}%`, background:`rgba(${mc.rgb},.70)` }} />
              </div>
              <div className="hero-mc-status" style={{ color:`rgba(${mc.rgb},.68)` }}>
                <span className="hero-mc-dot" style={{ background:`rgba(${mc.rgb},1)` }} />
                {mc.status}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Static content layer keeps text crisp while the background remains expressive. */}
      <div style={{
        position:'relative', zIndex:4,
        padding:'48px 0 36px',
      }}>
        <div className="container">
          <div className="hero-text">

            <div className="hero-eyebrow mono">
              <span className="hero-eyebrow-line" />
              Web comercial · IA · Automatización · Ingeniería
            </div>

            <h1 className="hero-h1 display">
              Convertimos tu web y tus procesos<br />
              <em style={{ fontStyle:variant==='schematic'?'italic':'normal', color:'#F07822' }}>
                en activos que capturan valor
              </em>
            </h1>

            <p className="hero-sub">
              Diseñamos páginas web comerciales, agentes IA para WhatsApp y automatizaciones operativas para que empresas técnicas, restaurantes, consultorios e industrias capten más oportunidades, respondan más rápido y reduzcan trabajo manual.
            </p>

            <p className="hero-support">
              Captura de valor significa más oportunidades, más confianza, menos mensajes perdidos, menos reprocesos y mejores decisiones comerciales u operativas.
            </p>

            <div className="hero-ctas">
              <button className="btn btn-primary hero-btn-main" onClick={() => onCTA('contact')}>
                Solicitar diagnóstico comercial <IconArrowRight size={16} />
              </button>
              <button className="btn hero-btn-ghost"
                onClick={() => document.getElementById('servicios')?.scrollIntoView({ behavior:'smooth' })}>
                Ver líneas de trabajo
              </button>
            </div>

            {/* Indicator strip — mobile only, replaces floating micro-cards */}
            {isMob && (
              <div className="hero-indicator-strip">
                <div className="hero-indicator-scroll">
                  {INDICATORS.map((ind, i) => (
                    <div key={i} className="hero-indicator-card"
                      style={{ borderColor:`rgba(${ind.rgb},.22)` }}>
                      <div className="hero-indicator-lbl">{ind.label}</div>
                      <div className="hero-indicator-val"
                        style={{ color:`rgba(${ind.rgb},.95)` }}>{ind.val}</div>
                      <div className="hero-indicator-status"
                        style={{ color:`rgba(${ind.rgb},.60)` }}>
                        <span className="hero-indicator-dot"
                          style={{ background:`rgba(${ind.rgb},1)` }} />
                        {ind.status}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

    </section>
  );
}

function CountStatCard({ n, lbl, sub, variant, delay }) {
  return (
    <div className="card fade-up" style={{
      padding: "var(--pad-2) var(--pad-3)",
      display: "grid", gridTemplateColumns: "auto 1fr", gap: "var(--gap-3)", alignItems: "center",
      animationDelay: `${delay}ms`,
    }}>
      <div className="display" style={{
        fontSize: 56, fontWeight: 400, lineHeight: 1,
        color: "var(--accent)", letterSpacing: "-.04em",
      }}>{n}</div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--fg)", marginBottom: 2 }}>{lbl}</div>
        <div className="mono" style={{ fontSize: 10.5, color: "var(--fg-soft)", letterSpacing: ".06em" }}>{sub}</div>
      </div>
    </div>
  );
}

// ─── 2. PROBLEM / NOSOTROS ─────────────────────────────────────────
function LandingProblem({ variant }) {
  const items = [
    { icon: "chart",  title: "Web que no explica valor",
      desc: "El visitante llega, pero no entiende por qué confiar, qué problema resuelve la empresa ni cuál es el siguiente paso comercial." },
    { icon: "atom",  title: "Atención dispersa en WhatsApp",
      desc: "Las conversaciones se mezclan entre curiosos, clientes reales, pedidos, cotizaciones y seguimientos sin filtro ni trazabilidad." },
    { icon: "wrench",  title: "Trabajo operativo repetido",
      desc: "Tareas manuales, reprocesos y datos duplicados consumen tiempo que debería estar dedicado a venta, servicio y ejecución." },
  ];
  return (
    <section id="nosotros"  style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)" }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: "var(--gap-3)" }}>Qué cambia CEIA</div>
        <h2 className="display" style={{
          fontSize: "clamp(26px, 3.4vw, 44px)", fontWeight: 500, margin: 0,
          lineHeight: 1.2, maxWidth: 900, color: "var(--fg)",
        }}>
          Cuando una empresa técnica no comunica bien su valor, la venta depende de explicar lo mismo una y otra vez: pierde{" "}
          <em style={{
            color: "var(--accent)",
            fontStyle: variant === "schematic" ? "italic" : "normal",
            fontWeight: variant === "brutalist" ? 800 : "inherit",
          }}>
            confianza, tiempo y oportunidades calificadas.
          </em>
        </h2>

        <div className="problem-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "var(--gap-2)", marginTop: "var(--gap-5)" }}>
          {items.map((it, i) => (
            <article key={it.title} className="card fade-up"
              style={{ padding: "var(--pad-3)", animationDelay: `${i * 80}ms`, position: "relative" }}>
              <div style={{ color: "var(--accent)", marginBottom: "var(--gap-2)" }}>
                <ServiceIcon name={it.icon} size={28} />
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 600, margin: "0 0 8px", letterSpacing: "-.01em" }}>{it.title}</h3>
              <p style={{ margin: 0, fontSize: 13.5, color: "var(--fg-muted)", lineHeight: 1.55 }}>{it.desc}</p>
            </article>
          ))}
        </div>

        <div className="problem-cta" style={{
          marginTop: "var(--gap-5)",
          padding: "var(--pad-3)",
          borderLeft: "3px solid var(--accent)",
          background: "var(--bg-soft)",
        }}>
          <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: "var(--fg)" }}>
            En CEIA ordenamos la forma en que una empresa se presenta, responde y opera:{" "}
            <b style={{ color: "var(--accent)" }}>arquitectura web comercial, agentes IA, automatización e ingeniería aplicada.</b>{" "}
            El objetivo es que el cliente correcto entienda la oferta, deje sus datos y avance con menos fricción.
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── 3. SERVICIOS — 4 pilares ───────────────────────────────────────
function LandingServices({ variant }) {
  const SERVICES = [
    { n: "01", title: "Arquitectura web comercial",
      desc: "Estructuramos la web para explicar valor, generar confianza, responder objeciones y convertir visitas en oportunidades comerciales claras para empresas y negocios.",
      tag: "CONFIANZA / LEADS / DECISION", icon: "branch", href: "/arquitectura-web-comercial/" },
    { n: "02", title: "Agentes IA para WhatsApp",
      desc: "Diseñamos agentes IA para WhatsApp que responden, filtran y escalan clientes reales; además registran datos útiles para venta, pedidos o seguimiento operativo.",
      tag: "META / WHATSAPP / FILTRO", icon: "atom", href: "/agentes-ia-whatsapp/" },
    { n: "03", title: "Automatización de procesos",
      desc: "Reducimos trabajo manual, errores, reprocesos y pérdida de tiempo operativo conectando formularios, datos y rutinas repetitivas.",
      tag: "MENOS RETRABAJO / MAS CONTROL", icon: "circuit", href: "/automatizacion-de-procesos/" },
    { n: "04", title: "Ingeniería industrial y eficiencia energética",
      desc: "Diagnóstico técnico para eficiencia energética, confiabilidad y sostenibilidad industrial con oportunidades priorizadas y medibles.",
      tag: "ENERGIA / CONFIABILIDAD / EJECUCION", icon: "flame", href: "/ingenieria-industrial-eficiencia-energetica/" },
  ];
  return (
    <section id="servicios"  style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)" }}>
      <div className="container">
        <div style={{ marginBottom: "var(--gap-5)" }}>
          <div className="eyebrow">Líneas de negocio</div>
          <h2 className="display" style={{ fontSize: "clamp(26px, 3.4vw, 44px)", fontWeight: 500, marginTop: "var(--gap-2)", color: "var(--fg)" }}>
            Cuatro líneas para{" "}
            <em style={{ color: "var(--accent)", fontStyle: variant === "schematic" ? "italic" : "normal" }}>capturar valor con más oportunidades, confianza y menos trabajo manual</em>.
          </h2>
          <p style={{ color: "var(--fg-muted)", fontSize: 15.5, lineHeight: 1.65, maxWidth: 720, marginTop: "var(--gap-2)" }}>
            La prioridad comercial es que la empresa sea entendida, contactada y atendida mejor.
            La línea industrial queda como ruta especializada para diagnósticos técnicos con impacto medible.
          </p>
        </div>

        <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "var(--gap-2)" }}>
          {SERVICES.map((s, i) => (
            <a key={s.n} href={s.href} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <article className="card fade-up"
              style={{ padding: "var(--pad-3)", animationDelay: `${i * 70}ms`, position: "relative", overflow: "hidden",
                       display: "flex", flexDirection: "column", gap: "var(--gap-2)", minHeight: 320 }}>
              <header style={{ display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }}>
                <div style={{ color: "var(--accent)" }}><ServiceIcon name={s.icon} size={28} /></div>
              </header>
              <div style={{ marginTop: "auto" }}>
                <h3 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 8px", letterSpacing: "-.01em" }}>{s.title}</h3>
                <p className="service-desc" style={{ margin: 0, fontSize: 13.5, color: "var(--fg-muted)", lineHeight: 1.55 }}>{s.desc}</p>
              </div>
              <div className="hairline-h" />
              <span className="mono service-tag-mono" style={{
                fontSize: 10.5, color: "var(--accent)", letterSpacing: ".14em",
                textTransform: "uppercase", fontWeight: 600,
              }}>{s.tag}</span>
              <span className="mono" style={{ color: "var(--accent)", fontSize: 12.5, fontWeight: 600, marginTop: "auto" }}>
                Ver línea →
              </span>
            </article>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function LandingAppliedCases({ variant }) {
  const cases = [
    {
      n: "01",
      title: "McLink Industrial",
      subtitle: "De página genérica a activo de confianza B2B.",
      text: "Se reorganizó la comunicación comercial para explicar líneas de negocio, autoridad técnica, marcas representadas y propuesta de valor para decisores industriales y aeronáuticos.",
      cta: "Ver caso de arquitectura web",
      href: "/arquitectura-web-comercial/",
      icon: "branch",
    },
    {
      n: "02",
      title: "Restaurante multisede",
      subtitle: "De WhatsApp saturado a pedidos organizados.",
      text: "Agente IA con tono personalizado, formulario de pedidos, registro automático en Excel/Drive y envío operativo a cocina.",
      cta: "Ver caso de agentes IA",
      href: "/agentes-ia-whatsapp/",
      icon: "atom",
    },
    {
      n: "03",
      title: "Laboratorio de inyectores diésel",
      subtitle: "De informes técnicos confusos a reportes claros y automatizados.",
      text: "Foto del informe físico, explicación por audio o texto, generación automática de PDF, envío al cliente y recordatorio por WhatsApp.",
      cta: "Ver caso de automatización",
      href: "/automatizacion-de-procesos/",
      icon: "circuit",
    },
    {
      n: "04",
      title: "Sistema de vapor industrial",
      subtitle: "De pérdidas energéticas invisibles a oportunidades de ahorro medibles.",
      text: "Diagnóstico técnico de sistema térmico, identificación de pérdidas, priorización de acciones y plan de ejecución.",
      cta: "Ver caso industrial",
      href: "/ingenieria-industrial-eficiencia-energetica/",
      icon: "flame",
    },
  ];

  return (
    <section id="casos-aplicados" style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)", background: "var(--bg-elev)", borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)" }}>
      <div className="container">
        <div style={{ marginBottom: "var(--gap-5)" }}>
          <div className="eyebrow">Casos aplicados</div>
          <h2 className="display" style={{ fontSize: "clamp(26px, 3.4vw, 44px)", fontWeight: 500, marginTop: "var(--gap-2)", color: "var(--fg)", lineHeight: 1.12, maxWidth: 980 }}>
            Casos aplicados: problemas reales convertidos en{" "}
            <em style={{ color: "var(--accent)", fontStyle: variant === "schematic" ? "italic" : "normal" }}>activos comerciales y operativos</em>
          </h2>
          <p style={{ color: "var(--fg-muted)", fontSize: 15.5, lineHeight: 1.65, maxWidth: 760, marginTop: "var(--gap-2)" }}>
            La captura de valor se aterriza en resultados: más confianza, menos mensajes perdidos, menos trabajo manual, menos reprocesos y mejor decisión comercial u operativa.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "10px 22px", marginTop: "var(--gap-2)" }}>
            <a
              href="/casos/termacol-arquitectura-web-seo-industrial/"
              className="mono"
              style={{ color: "var(--accent)", fontSize: 12.5, fontWeight: 700, textDecoration: "none", letterSpacing: ".04em" }}
            >
              Caso principal: Termacol, arquitectura web y SEO industrial →
            </a>
            <a
              href="/casos/ecofrenos-web-seo-local-cali/"
              className="mono"
              style={{ color: "var(--fg-muted)", fontSize: 12.5, fontWeight: 700, textDecoration: "none", letterSpacing: ".04em" }}
            >
              Caso SEO local en seguimiento: EcoFrenos →
            </a>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "var(--gap-2)" }}>
          {cases.map((item, i) => (
            <article key={item.title} className="card fade-up" style={{ padding: "var(--pad-3)", animationDelay: `${i * 80}ms`, display: "flex", flexDirection: "column", gap: "var(--gap-2)", minHeight: 330 }}>
              <header style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "flex-start" }}>
                <span style={{ color: "var(--accent)" }}><ServiceIcon name={item.icon} size={26} /></span>
              </header>
              <div>
                <h3 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 8px", letterSpacing: "-.01em", color: "var(--fg)" }}>{item.title}</h3>
                <p style={{ margin: 0, color: "var(--fg)", fontSize: 14.5, lineHeight: 1.45, fontWeight: 600 }}>{item.subtitle}</p>
              </div>
              <p style={{ margin: 0, color: "var(--fg-muted)", fontSize: 13.5, lineHeight: 1.58 }}>{item.text}</p>
              <div className="hairline-h" style={{ marginTop: "auto" }} />
              <a href={item.href} className="mono" style={{ color: "var(--accent)", fontSize: 12.5, fontWeight: 700, textDecoration: "none", letterSpacing: ".04em" }}>
                {item.cta} →
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 4. ESPECIALIDADES ──────────────────────────────────────────────
function LandingSpecialties({ variant }) {
  const items = [
    { title: "Empresas técnicas, negocios y servicios",
      desc: "Arquitectura web para explicar servicios complejos, ordenar evidencia, responder objeciones y capturar solicitudes calificadas.",
      list: ["Propuesta de valor clara", "Rutas de conversión", "Confianza antes de la llamada"],
      icon: "branch" },
    { title: "Restaurantes, consultorios y servicios especializados",
      desc: "Agentes IA y flujos de WhatsApp para responder, filtrar, tomar datos, registrar pedidos o solicitudes y reducir tareas repetidas.",
      list: ["WhatsApp comercial", "Captura de datos", "Seguimiento operativo"],
      icon: "atom" },
    { title: "Industrias y operaciones técnicas",
      desc: "Automatización, optimización de procesos e ingeniería industrial para reducir errores, tiempos muertos y pérdidas medibles.",
      list: ["Eficiencia energética", "Sistemas térmicos", "Confiabilidad y sostenibilidad"],
      icon: "flame" },
  ];
  return (
    <section id="especialidades"  style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)", position: "relative" }}>
      <div className="bp-grid" aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        maskImage: "linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%)",
        opacity: .4,
      }} />
      <div className="container" style={{ position: "relative" }}>
        <div className="eyebrow">Dónde generamos valor</div>
        <h2 className="display" style={{ fontSize: "clamp(26px, 3.4vw, 44px)", fontWeight: 500, marginTop: "var(--gap-2)", maxWidth: 720, lineHeight: 1.1 }}>
          Empresas que venden confianza, servicio y{" "}
          <em style={{ color: "var(--accent)", fontStyle: variant === "schematic" ? "italic" : "normal" }}>decisiones bien explicadas</em>.
        </h2>
        <p style={{ color: "var(--fg-muted)", maxWidth: 640, marginTop: "var(--gap-2)", lineHeight: 1.6 }}>
          CEIA trabaja donde la compra requiere confianza: servicios técnicos, negocios locales,
          negocios con atención frecuente e industrias con procesos que deben medirse.
        </p>

        <div className="carousel-hint" aria-hidden="true">
          <span className="carousel-hint-arrow">→</span>
          Desliza para ver más
        </div>

        <div className="specialties-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--gap-2)", marginTop: "var(--gap-5)" }}>
          {items.map((it, i) => (
            <article key={it.title} className="card fade-up"
              style={{ padding: "var(--pad-3)", animationDelay: `${i * 100}ms`, position: "relative", overflow: "hidden" }}>
              <div style={{
                position: "absolute", top: 0, left: 0, right: 0, height: 3,
                background: "var(--accent)",
              }}/>
              <div style={{ color: "var(--accent)", marginBottom: "var(--gap-2)" }}>
                <ServiceIcon name={it.icon} size={32} />
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 600, margin: "0 0 8px", letterSpacing: "-.01em" }}>{it.title}</h3>
              <p style={{ margin: "0 0 var(--gap-2)", fontSize: 13.5, color: "var(--fg-muted)", lineHeight: 1.55 }}>{it.desc}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 6, borderTop: "1px dashed var(--line-soft)", paddingTop: 12 }}>
                {it.list.map(li => (
                  <li key={li} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--fg)" }}>
                    <span className="mono" style={{ color: "var(--accent)", marginTop: 2, flexShrink: 0 }}>—</span>
                    <span>{li}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        {/* Sectores */}
        <div style={{ marginTop: "var(--gap-5)" }}>
          <div className="eyebrow-muted" style={{ marginBottom: "var(--gap-2)" }}>Sectores objetivo</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {[
              "Empresas técnicas", "Restaurantes", "Consultorios",
              "Servicios especializados", "Industrias", "Operaciones con WhatsApp activo",
            ].map(s => (
              <span key={s} style={{
                padding: "8px 14px",
                border: "1px solid var(--line)",
                borderRadius: variant === "brutalist" ? 0 : 999,
                background: "var(--bg-elev)",
                fontSize: 13, color: "var(--fg)",
                fontWeight: 500,
              }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── 5. METHODOLOGY — 6 pasos ──────────────────────────────────────
function LandingMethodology({ variant }) {
  const STEPS = [
    { n: "01", title: "Diagnóstico comercial y operativo",
      desc: "Revisamos oferta, clientes, fricciones de venta, canales de contacto, tareas manuales y datos que hoy se pierden entre web, WhatsApp y operación." },
    { n: "02", title: "Arquitectura de decisión",
      desc: "Ordenamos mensajes, rutas de navegación, objeciones, pruebas de confianza y llamados a la acción para que el comprador avance con criterio." },
    { n: "03", title: "Diseño del flujo de captura",
      desc: "Definimos qué datos pedir, cuándo pedirlos, cómo clasificar interesados y qué debe pasar después de cada formulario o conversación." },
    { n: "04", title: "Automatización e integración",
      desc: "Conectamos agentes IA, formularios, hojas de cálculo, Drive u otros sistemas para reducir digitación, olvidos y reprocesos." },
    { n: "05", title: "Implementación controlada",
      desc: "Publicamos cambios por etapas, probamos mensajes, rutas, WhatsApp, formularios y entrega de datos antes de escalar." },
    { n: "06", title: "Medición y ajuste comercial",
      desc: "Revisamos señales reales: consultas recibidas, perfil del lead, preguntas frecuentes, tiempos de respuesta y oportunidades de automatización." },
  ];
  return (
    <section id="metodologia"  style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)" }}>
      <div className="container">
        <div style={{ marginBottom: "var(--gap-5)" }}>
          <div className="eyebrow">Método CEIA</div>
          <h2 className="display" style={{ fontSize: "clamp(26px, 3.4vw, 44px)", fontWeight: 500, marginTop: "var(--gap-2)", lineHeight: 1.1 }}>
            De una web informativa a un{" "}
            <em style={{ color: "var(--accent)", fontStyle: variant === "schematic" ? "italic" : "normal" }}>sistema de captura</em>.
          </h2>
          <p style={{ color: "var(--fg-muted)", fontSize: 15.5, lineHeight: 1.65, maxWidth: 720, marginTop: "var(--gap-2)" }}>
            La metodología conserva criterio técnico, pero lo aplica al recorrido comercial:
            explicar valor, capturar datos, responder mejor y reducir trabajo operativo.
          </p>
        </div>

        {/* Timeline */}
        <div style={{ position: "relative" }}>
          {/* Vertical line decoration */}
          <div className="method-vline" style={{
            position: "absolute", left: 24, top: 24, bottom: 24,
            width: 1, background: "linear-gradient(180deg, var(--accent) 0%, transparent 100%)",
            opacity: .3, pointerEvents: "none",
          }} aria-hidden />

          <div style={{ display: "grid", gap: 0 }}>
            {STEPS.map((s, i) => (
              <article key={s.n} className="fade-up method-step"
                style={{
                  display: "grid", gridTemplateColumns: "auto 1fr auto",
                  gap: "var(--gap-3)", alignItems: "center",
                  padding: "var(--pad-3) 0",
                  borderTop: i > 0 ? "1px solid var(--line-soft)" : "none",
                  animationDelay: `${i * 60}ms`,
                }}>
                <div className="method-node" style={{
                  width: 48, height: 48,
                  border: "1.5px solid var(--accent)",
                  borderRadius: variant === "brutalist" ? 0 : 999,
                  background: "var(--bg-elev)",
                  color: "var(--accent)",
                  display: "grid", placeItems: "center",
                  fontSize: 14, fontWeight: 600,
                  position: "relative", zIndex: 1,
                  boxShadow: "0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent)",
                }}>
                  <IconCheck size={16} strokeWidth={2.3} />
                </div>
                <div>
                  <h3 style={{ fontSize: 19, fontWeight: 600, margin: "0 0 6px", letterSpacing: "-.01em" }}>{s.title}</h3>
                  <p style={{ margin: 0, fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.55, maxWidth: 720 }}>{s.desc}</p>
                </div>
                <span className="mono" style={{ fontSize: 10, color: "var(--fg-soft)", letterSpacing: ".14em", display: "none" }}>
                  PASO
                </span>
              </article>
            ))}
          </div>
        </div>

        {/* Result banner */}
        <div className="method-result" style={{
          marginTop: "var(--gap-5)",
          padding: "var(--pad-3)",
          border: "1px solid var(--accent)",
          background: "var(--accent-soft)",
          display: "flex", gap: 16, alignItems: "center",
          borderRadius: variant === "brutalist" ? 0 : 12,
        }}>
          <span style={{ color: "var(--accent)", flexShrink: 0 }}><IconCheckCirc size={28}/></span>
          <p style={{ margin: 0, fontSize: 15, color: "var(--fg)", lineHeight: 1.55 }}>
            <span style={{ color: "var(--accent)", fontWeight: 600 }}>Resultado esperado:</span>{" "}
            una ruta comercial más clara, menos tareas repetidas y mejores datos para decidir a quién atender primero.
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── 6. DIFERENCIADORES — Por qué CEIA ─────────────────────────────
function LandingDifferentiators({ variant }) {
  const ITEMS = [
    { title: "Arquitectura antes que apariencia",
      desc: "Ordenamos mensaje, oferta, objeciones y rutas de contacto antes de hablar de secciones visuales. La web debe ayudar a vender." },
    { title: "IA conectada al proceso real",
      desc: "Un agente no sirve si solo responde bonito. Debe filtrar, pedir datos útiles y dejar información lista para seguimiento." },
    { title: "Menos trabajo manual",
      desc: "Buscamos reducir copias, mensajes repetidos, registros duplicados y seguimientos que hoy dependen de memoria o chats sueltos." },
    { title: "Criterio técnico-comercial",
      desc: "Combinamos claridad de venta, lógica de procesos y experiencia industrial para decidir qué automatizar y qué mantener humano." },
    { title: "Implementación por etapas",
      desc: "Priorizamos cambios que se puedan probar rápido: mensaje, formulario, WhatsApp, clasificación de leads y entrega de datos." },
    { title: "Medición de señales comerciales",
      desc: "La mejora se revisa con señales concretas: consultas, ajuste de interesados, preguntas frecuentes y tiempos de respuesta." },
  ];
  return (
    <section id="diferenciadores"  style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)" }}>
      <div className="container">
        <div className="eyebrow">Por qué CEIA</div>
        <blockquote className="display diff-blockquote" style={{
          fontSize: "clamp(22px, 2.6vw, 32px)", fontWeight: 500,
          margin: "var(--gap-3) 0 var(--gap-5)",
          maxWidth: 880, lineHeight: 1.3,
          color: "var(--fg)",
          fontStyle: variant === "schematic" ? "italic" : "normal",
          borderLeft: "3px solid var(--accent)",
          paddingLeft: "var(--pad-3)",
        }}>
          “La confianza comercial no se gana con una página decorativa.
          Se gana cuando el comprador entiende <em style={{ color: "var(--accent)", fontStyle: "inherit" }}>qué haces, por qué creerte y cómo avanzar</em>
          sin perseguirte por información básica.”
        </blockquote>

        <div className="carousel-hint" aria-hidden="true">
          <span className="carousel-hint-arrow">→</span>
          Desliza para ver más
        </div>

        <div className="diff-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--gap-2)" }}>
          {ITEMS.map((it, i) => (
            <article key={it.title} className="card fade-up"
              style={{ padding: "var(--pad-3)", animationDelay: `${i * 60}ms`, position: "relative" }}>
              <span className="mono" style={{
                fontSize: 11, color: "var(--accent)", letterSpacing: ".14em",
                fontWeight: 600, marginBottom: 12, display: "block",
              }}>CEIA</span>
              <h3 style={{ fontSize: 17, fontWeight: 600, margin: "0 0 8px", letterSpacing: "-.01em" }}>{it.title}</h3>
              <p style={{ margin: 0, fontSize: 13.5, color: "var(--fg-muted)", lineHeight: 1.55 }}>{it.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 6.5 CEIA EN ACCIÓN — Video showcase ───────────────────────────
function LandingInAction({ variant }) {
  return (
    <section id="ceia-accion" style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)", position: "relative" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: "var(--gap-5)" }}>
          <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>
            <span style={{ display: "inline-block", width: 24, height: 1, background: "var(--accent)", marginRight: 12, verticalAlign: "middle" }} />
            Línea industrial en acción
          </div>
          <h2 className="display" style={{
            fontSize: "clamp(26px, 3.4vw, 44px)", fontWeight: 500,
            marginTop: "var(--gap-2)", marginBottom: "var(--gap-2)",
          }}>
            Ingeniería <em style={{ color: "var(--accent)", fontStyle: variant === "schematic" ? "italic" : "normal" }}>con resultados medibles</em>
          </h2>
          <p style={{ color: "var(--fg-muted)", fontSize: 15, maxWidth: 560, marginInline: "auto", lineHeight: 1.6 }}>
            La experiencia industrial de CEIA se conserva como cuarta línea: eficiencia energética,
            sistemas térmicos, confiabilidad y sostenibilidad con criterio técnico.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "var(--gap-3)", maxWidth: 1100, marginInline: "auto" }}>
          <VideoSlot
            sources={[
              "/Videos/Video%201.mp4?v=20260520-2",
              "https://cdn.jsdelivr.net/gh/JuanC403/ceia-web@2937bb5/CEIA%20web/Videos/Video%201.mp4",
            ]}
            label="Video 01 · Diagnóstico en planta"
            variant={variant}
          />
          <VideoSlot
            sources={[
              "/Videos/Video%202.mp4?v=20260520-2",
              "https://cdn.jsdelivr.net/gh/JuanC403/ceia-web@2937bb5/CEIA%20web/Videos/Video%202.mp4",
            ]}
            label="Video 02 · Optimización energética"
            variant={variant}
          />
        </div>
      </div>
    </section>
  );
}

function VideoSlot({ sources, label, variant }) {
  const [failed, setFailed] = React.useState(false);
  const [sourceIndex, setSourceIndex] = React.useState(0);
  const activeSrc = sources[sourceIndex];
  const hasFallback = sourceIndex < sources.length - 1;

  const handleError = React.useCallback(() => {
    if (hasFallback) {
      setSourceIndex(sourceIndex + 1);
      return;
    }
    setFailed(true);
  }, [hasFallback, sourceIndex]);

  return (
    <div className="card" style={{
      padding: 0, overflow: "hidden",
      position: "relative",
      background: "linear-gradient(135deg, #0D1117 0%, #141B24 60%, #1C2A38 100%)",
    }}>
      {!failed ? (
        <>
          <div style={{ position: "relative", aspectRatio: "16/9" }}>
            <video
              key={activeSrc}
              controls
              preload="metadata"
              playsInline
              onError={handleError}
              style={{ width: "100%", height: "100%", display: "block", objectFit: "cover", background: "#0D1117" }}
            >
              <source src={activeSrc} type="video/mp4" />
            </video>
          </div>

          <div style={{
            display: "flex",
            justifyContent: "space-between",
            gap: 12,
            padding: "12px 14px",
            borderTop: "1px solid rgba(240,135,30,.12)",
            background: "rgba(13,17,23,.92)",
            flexWrap: "wrap",
          }}>
            <span className="mono" style={{ fontSize: 10.5, color: "#c4d2e2", letterSpacing: ".08em" }}>
              {label}
            </span>
            <a href={activeSrc} target="_blank" rel="noreferrer" style={{ color: "#F0871E", fontWeight: 600, textDecoration: "none" }}>
              Abrir video
            </a>
          </div>
        </>
      ) : (
        <div style={{
          minHeight: 320,
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          gap: 16, color: "#94a3b8", padding: 24, textAlign: "center",
          position: "relative",
        }}>
          {/* Subtle grid overlay */}
          <div aria-hidden style={{
            position: "absolute", inset: 0,
            backgroundImage: "linear-gradient(rgba(240,135,30,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(240,135,30,.06) 1px, transparent 1px)",
            backgroundSize: "24px 24px",
            maskImage: "radial-gradient(ellipse at center, black 0%, transparent 70%)",
          }} />
          {/* Play icon */}
          <div style={{
            width: 64, height: 64, borderRadius: variant === "brutalist" ? 0 : 999,
            border: "1.5px solid rgba(240,135,30,.5)",
            display: "grid", placeItems: "center",
            color: "#F0871E", position: "relative",
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
              <path d="M6 4l14 8-14 8V4z"/>
            </svg>
          </div>
          <div className="mono" style={{
            fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase",
            color: "#F0871E", fontWeight: 600, position: "relative",
          }}>
            {label}
          </div>
          <div style={{ fontSize: 12.5, color: "#c4d2e2", maxWidth: 320, lineHeight: 1.5, position: "relative" }}>
            Si el navegador no reproduce el video embebido, puede{" "}
            <a href={activeSrc} target="_blank" rel="noreferrer" style={{ color: "#F0871E", fontWeight: 600 }}>
              abrirlo directamente aquí
            </a>.
          </div>
        </div>
      )}
    </div>
  );
}
function LandingAIAgents({ onCTA, variant }) {
  return (
    <section id="expertsteam"  style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)", position: "relative", overflow: "hidden" }}>
      <div className="bp-grid-fine" aria-hidden style={{
        position: "absolute", inset: 0, opacity: .4, pointerEvents: "none",
        maskImage: "radial-gradient(ellipse at 80% 50%, black 0%, transparent 70%)",
      }} />
      <div className="container" style={{ position: "relative" }}>
        <div className="landing-2col" style={{ display: "grid", gridTemplateColumns: "minmax(0,1.1fr) minmax(0,1fr)", gap: "var(--gap-5)", alignItems: "center" }}>
          <div>
            <div className="eyebrow">Producto principal</div>
            <h2 className="display" style={{ fontSize: "clamp(26px, 3.4vw, 44px)", fontWeight: 500, marginTop: "var(--gap-3)", marginBottom: "var(--gap-3)", lineHeight: 1.05 }}>
              Agentes IA para WhatsApp<br/>
              <em style={{ fontStyle: variant === "schematic" ? "italic" : "normal", color: "var(--accent)" }}>
                que responden, filtran y escalan clientes reales.
              </em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--fg-muted)", maxWidth: 540, marginBottom: "var(--gap-3)" }}>
              CEIA diseña agentes IA para WhatsApp y canales oficiales de Meta. Atienden 24/7, responden con criterio comercial, filtran interesados reales, capturan solicitudes, toman pedidos y entregan datos listos para seguimiento comercial u operativo.
            </p>

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: "var(--gap-1)", marginBottom: "var(--gap-3)" }}>
              {[
                "Respuestas 24/7 para preguntas frecuentes y primeras consultas",
                "Filtro de interesados por intención de compra, urgencia, ubicación o tipo de servicio",
                "Registro de solicitudes, pedidos o datos en Excel, Drive u otros sistemas",
                "Escalamiento a una persona cuando la conversación ya está calificada",
              ].map(t => (
                <li key={t} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14 }}>
                  <span style={{ marginTop: 6, color: "var(--accent)" }}><IconCheck size={14}/></span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>

            <div style={{ display: "flex", gap: "var(--gap-2)", flexWrap: "wrap", marginTop: "var(--gap-2)" }}>
              <button className="btn btn-primary" onClick={() => onCTA("diagnostico-agente-whatsapp")}>
                Diagnosticar agente WhatsApp <IconArrowRight size={16} />
              </button>
            </div>

            <div style={{ display: "flex", gap: "var(--gap-2)", flexWrap: "wrap", marginTop: "var(--gap-2)" }}>
              <span className="tag" style={{ fontSize: 11 }}>WhatsApp y canales digitales</span>
              <span className="mono" style={{ fontSize: 11, color: "var(--fg-soft)", letterSpacing: ".08em" }}>
                Enfoque en captura, filtro y seguimiento
              </span>
            </div>
          </div>

          <AIAgentVisual />
        </div>
      </div>
    </section>
  );
}

function AIAgentVisual() {
  return (
    <figure className="card" style={{
      aspectRatio: "5/4",
      padding: 0,
      overflow: "hidden",
      background: "var(--bg-elev)",
      position: "relative",
      margin: 0,
    }}>
      <img
        src="assets/agentes-ia-whatsapp.png"
        alt="Agente IA conectado a WhatsApp, clasificación de oportunidades y registro de datos comerciales"
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
      />
    </figure>
  );
}


function LandingContact({ onCTA, variant }) {
  const [form, setForm] = React.useState({
    nombre: "", empresa: "", email: "", telefono: "",
    sector: "", consulta: "arquitectura-web-comercial", mensaje: "",
  });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          access_key: "be97dc1c-86c1-49fd-99d2-61358651d284",
          subject: `Nueva consulta CEIA: ${form.consulta} — ${form.empresa}`,
          from_name: "CEIA Web",
          name: form.nombre,
          email: form.email,
          phone: form.telefono,
          empresa: form.empresa,
          sector: form.sector || "No especificado",
          tipo_consulta: form.consulta,
          mensaje: form.mensaje,
        }),
      });
      if (res.ok) {
        setSent(true);
        setForm({ nombre: "", empresa: "", email: "", telefono: "", sector: "", consulta: "arquitectura-web-comercial", mensaje: "" });
      } else {
        setError("No se pudo enviar. Intenta de nuevo o escríbenos directamente.");
      }
    } catch {
      setError("Error de conexión. Intenta de nuevo.");
    } finally {
      setSending(false);
    }
  };

  const SECTORS = ["Empresa técnica", "Restaurante", "Consultorio o salud", "Servicios especializados", "Industria", "Comercio", "Otro"];
  const CONSULTAS = [
    { id: "arquitectura-web-comercial", label: "Arquitectura web comercial" },
    { id: "agente-ia-whatsapp", label: "Agente IA / WhatsApp" },
    { id: "automatizacion-de-procesos", label: "Automatización de procesos" },
    { id: "ingenieria-industrial-eficiencia-energetica", label: "Ingeniería industrial / eficiencia energética" },
    { id: "no-estoy-seguro-diagnostico", label: "No estoy seguro, quiero diagnóstico" },
  ];

  return (
    <section id="contacto" style={{ paddingTop: "var(--pad-5)", paddingBottom: "var(--pad-5)", position: "relative" }}>
      <div className="container">
        {/* Header */}
        <div className="landing-2col" style={{ display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)", gap: "var(--gap-5)", alignItems: "start", marginBottom: "var(--gap-5)" }}>
          <div>
            <div className="eyebrow">Hablemos</div>
            <h2 className="display" style={{
              fontSize: "clamp(26px, 3.4vw, 44px)", fontWeight: 500,
              marginTop: "var(--gap-2)", marginBottom: 0, lineHeight: 1.08,
            }}>
              ¿Su web, WhatsApp u operación pierden<br/>
              <em style={{ fontStyle: variant === "schematic" ? "italic" : "normal", color: "var(--accent)" }}>
                oportunidades o tiempo?
              </em>
            </h2>
            <p style={{ fontSize: 16, color: "var(--fg-muted)", marginTop: "var(--gap-3)", maxWidth: 560, lineHeight: 1.6 }}>
              Un diagnóstico comercial inicial identifica si el problema está en el mensaje,
              la captura de datos, la atención por WhatsApp, las tareas manuales o un proceso técnico.
              Respondemos en menos de <b style={{ color: "var(--accent)" }}>24 horas hábiles</b>.
            </p>
          </div>

          {/* Side stats — hidden on mobile via CSS */}
          <div className="mono contact-stats" style={{ display: "grid", gap: 10 }}>
            {[
              { k: "Respuesta", v: "< 24 h" },
              { k: "Diagnóstico comercial", v: "Sin costo" },
              { k: "Confidencialidad", v: "NDA disponible" },
            ].map((r, i) => (
              <div key={i} style={{
                display: "flex", justifyContent: "space-between", alignItems: "baseline",
                padding: "10px 0",
                borderBottom: "1px dashed var(--line-soft)",
              }}>
                <span style={{ fontSize: 11, color: "var(--fg-soft)", letterSpacing: ".14em", textTransform: "uppercase" }}>{r.k}</span>
                <span style={{ fontSize: 14, color: "var(--accent)", fontWeight: 600 }}>{r.v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Main grid: Form (left) + Direct contact (right) */}
        <div className="landing-2col" style={{ display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)", gap: "var(--gap-3)" }}>
          {/* FORM */}
          <form onSubmit={handleSubmit} className="card" style={{ padding: "var(--pad-4)", display: "grid", gap: "var(--gap-3)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <h3 className="display" style={{ fontSize: 24, fontWeight: 400, margin: 0 }}>Formulario de contacto</h3>
              <span className="mono" style={{ fontSize: 10, color: "var(--fg-soft)", letterSpacing: ".18em", textTransform: "uppercase" }}>
                Doc-08.A
              </span>
            </div>

            {/* Nombre + Empresa */}
            <div className="landing-form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--gap-2)" }}>
              <Field label="Nombre completo *" required value={form.nombre} onChange={set("nombre")} placeholder="Ing. Juan Pérez" />
              <Field label="Empresa *"          required value={form.empresa} onChange={set("empresa")} placeholder="Industria S.A." />
            </div>

            {/* Email + Teléfono */}
            <div className="landing-form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--gap-2)" }}>
              <Field type="email" label="Correo corporativo *" required value={form.email}    onChange={set("email")}    placeholder="juan@empresa.com" />
              <Field type="tel"   label="Teléfono"                       value={form.telefono} onChange={set("telefono")} placeholder="+57 300 123 4567" />
            </div>

            {/* Sector */}
            <FieldWrap label="Tipo de empresa">
              <select className="input" value={form.sector} onChange={set("sector")}>
                <option value="">Seleccione una categoría…</option>
                {SECTORS.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </FieldWrap>

            {/* Tipo de consulta — radio cards */}
            <FieldWrap label="Tipo de consulta">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 8 }}>
                {CONSULTAS.map(c => {
                  const checked = form.consulta === c.id;
                  return (
                    <label key={c.id} style={{
                      display: "flex", gap: 10, alignItems: "center",
                      padding: "10px 12px",
                      border: "1px solid",
                      borderColor: checked ? "var(--accent)" : "var(--line)",
                      borderRadius: variant === "brutalist" ? 0 : 8,
                      background: checked ? "var(--accent-soft)" : "transparent",
                      cursor: "pointer", transition: "all .15s",
                    }}>
                      <input type="radio" name="consulta" value={c.id} checked={checked} onChange={set("consulta")}
                        style={{ accentColor: "var(--accent)", flexShrink: 0 }} />
                      <span style={{ fontSize: 12.5, color: "var(--fg)" }}>{c.label}</span>
                    </label>
                  );
                })}
              </div>
            </FieldWrap>

            {/* Mensaje */}
            <FieldWrap label="Cuéntenos brevemente el reto comercial u operativo">
              <textarea className="input" rows={4}
                value={form.mensaje} onChange={set("mensaje")}
                placeholder="Ej: recibimos consultas por WhatsApp pero no filtramos interesados reales; o la web no explica bien por qué deberían elegirnos..."
                style={{ resize: "vertical", fontFamily: "inherit", lineHeight: 1.5 }} />
            </FieldWrap>

            {/* Submit row */}
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              paddingTop: "var(--gap-2)", borderTop: "1px solid var(--line-soft)",
              flexWrap: "wrap", gap: "var(--gap-2)",
            }}>
              <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 12, color: "var(--fg-muted)" }}>
                <input type="checkbox" required style={{ accentColor: "var(--accent)" }} />
                <span>Acepto el tratamiento de datos para responder esta solicitud.</span>
              </label>
              <button type="submit" className="btn btn-primary" disabled={sent || sending}>
                {sent ? <><IconCheck size={16}/> Solicitud enviada</> : sending ? "Enviando…" : <>Enviar solicitud <IconArrowRight size={16}/></>}
              </button>
            </div>

            {sent && (
              <div style={{
                padding: "12px 16px",
                background: "color-mix(in oklch, var(--good) 12%, transparent)",
                border: "1px solid var(--good)",
                borderRadius: variant === "brutalist" ? 0 : 8,
                display: "flex", gap: 12, alignItems: "center", fontSize: 13,
              }}>
                <IconCheckCirc size={18} style={{ color: "var(--good)" }}/>
                <span><b>¡Recibido!</b> Le responderemos al correo indicado en menos de 24 horas hábiles.</span>
              </div>
            )}

            {error && (
              <div style={{
                padding: "12px 16px",
                background: "color-mix(in oklch, #ef4444 10%, transparent)",
                border: "1px solid #ef4444",
                borderRadius: variant === "brutalist" ? 0 : 8,
                fontSize: 13, color: "#fca5a5",
              }}>
                {error}
              </div>
            )}
          </form>

          {/* DIRECT CONTACT */}
          <aside style={{ display: "grid", gap: "var(--gap-2)", alignContent: "start" }}>
            <ContactCard
              eyebrow="Correo directo"
              value="lperez.ceia@outlook.com"
              icon={<IconAtom size={20}/>}
              href="mailto:lperez.ceia@outlook.com"
            />
            <ContactCard
              eyebrow="WhatsApp comercial"
              value="+57 315 325 1082"
              meta="Luis Fernando Pérez · Director comercial y de transformación"
              icon={<IconWhatsApp size={20}/>}
              href="https://wa.me/573153251082?text=Hola%20CEIA%2C%20me%20gustar%C3%ADa%20solicitar%20un%20diagn%C3%B3stico%20comercial."
            />
            <a
              className="btn btn-primary"
              href="https://wa.me/573153251082?text=Hola%20CEIA%2C%20me%20gustar%C3%ADa%20solicitar%20un%20diagn%C3%B3stico%20comercial."
              target="_blank"
              rel="noopener"
              style={{ justifySelf: "start", textDecoration: "none" }}
            >
              Escribir por WhatsApp <IconWhatsApp size={16}/>
            </a>
            <ContactCard
              eyebrow="Sede principal"
              value="Cali, Valle del Cauca"
              icon={<IconLayers size={20}/>}
              meta="Colombia"
            />
            <ContactCard
              eyebrow="Cobertura"
              value="Nacional"
              icon={<IconShield size={20}/>}
              meta="Atención remota y visitas técnicas cuando el proyecto lo requiere"
            />

            {/* What to expect — mini timeline */}
            <div className="card" style={{ padding: "var(--pad-3)" }}>
              <div className="eyebrow-muted" style={{ marginBottom: "var(--gap-2)" }}>Qué esperar</div>
              <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
                {[
                  { t: "Recepción y revisión técnica de su consulta",  d: "0 – 24 h" },
                  { t: "Llamada exploratoria con un ingeniero de CEIA", d: "Día 1 – 2" },
                  { t: "Propuesta de visita técnica o alcance inicial", d: "Día 3 – 5" },
                ].map((s, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, alignItems: "flex-start" }}>
                    <span className="mono" style={{
                      width: 22, height: 22,
                      borderRadius: variant === "brutalist" ? 0 : 999,
                      background: "var(--accent)", color: "white",
                      display: "grid", placeItems: "center",
                      fontSize: 11, fontWeight: 600, flexShrink: 0, marginTop: 2,
                    }}>{i+1}</span>
                    <div>
                      <div style={{ fontSize: 13, color: "var(--fg)", lineHeight: 1.4 }}>{s.t}</div>
                      <div className="mono" style={{ marginTop: 3, fontSize: 10.5, color: "var(--fg-soft)", letterSpacing: ".08em", textTransform: "uppercase" }}>{s.d}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>

            {/* Internal product CTA removed from public home */}
          </aside>
        </div>
      </div>
    </section>
  );
}

function Field({ label, type = "text", required, value, onChange, placeholder }) {
  return (
    <FieldWrap label={label}>
      <input className="input" type={type} required={required} value={value} onChange={onChange} placeholder={placeholder} />
    </FieldWrap>
  );
}

function FieldWrap({ label, children }) {
  return (
    <label style={{ display: "grid", gap: 6 }}>
      <span className="mono" style={{
        fontSize: 10, color: "var(--fg-muted)", letterSpacing: ".18em",
        textTransform: "uppercase", fontWeight: 500,
      }}>{label}</span>
      {children}
    </label>
  );
}

function ContactCard({ eyebrow, value, meta, icon, href }) {
  const Wrapper = href ? "a" : "div";
  return (
    <Wrapper {...(href ? { href } : {})}
      className="card"
      style={{
        padding: "var(--pad-2) var(--pad-3)",
        display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "center",
        textDecoration: "none", color: "var(--fg)",
        transition: "border-color .15s, transform .15s",
      }}
      onMouseEnter={href ? e => { e.currentTarget.style.borderColor = "var(--accent)"; } : undefined}
      onMouseLeave={href ? e => { e.currentTarget.style.borderColor = ""; } : undefined}
    >
      <div style={{ color: "var(--accent)" }}>{icon}</div>
      <div>
        <div className="mono" style={{ fontSize: 10, color: "var(--fg-soft)", letterSpacing: ".18em", textTransform: "uppercase" }}>
          {eyebrow}
        </div>
        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--fg)", marginTop: 2 }}>{value}</div>
        {meta && <div className="mono" style={{ fontSize: 10.5, color: "var(--fg-soft)", marginTop: 3, letterSpacing: ".06em" }}>{meta}</div>}
      </div>
    </Wrapper>
  );
}

// ─── 9. FOOTER ────────────────────────────────────────────────────
function LandingFooter({ onCTA }) {
  return (
    <footer  style={{ paddingTop: "var(--pad-4)", paddingBottom: "var(--pad-3)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "var(--gap-4)", paddingBottom: "var(--pad-3)", borderBottom: "1px solid var(--line-soft)" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <img src="assets/ceia-mark.png" alt="CEIA" width={40} height={40} style={{ display: "block" }} />
              <span className="display" style={{ fontSize: 18, fontWeight: 600 }}><span style={{ letterSpacing: '-.055em' }}>CE<span style={{ fontSize: '1.22em', color: '#1B5E99', lineHeight: .86 }}>IA</span></span> Ingeniería</span>
            </div>
            <p style={{ fontSize: 13, color: "var(--fg-muted)", lineHeight: 1.55, margin: 0 }}>
              CEIA convierte web, IA, automatización e ingeniería en activos para capturar valor comercial: más oportunidades, más confianza y menos trabajo manual.
            </p>
          </div>

          {[
            { h: "Navegación",      links: [
              { label: "Web comercial", href: "/arquitectura-web-comercial/" },
              { label: "IA/WhatsApp", href: "/agentes-ia-whatsapp/" },
              { label: "Automatización", href: "/automatizacion-de-procesos/" },
              { label: "Ingeniería industrial", href: "/ingenieria-industrial-eficiencia-energetica/" },
              { label: "Contacto", href: "/contacto/" },
            ] },
            { h: "Líneas CEIA",     links: [
              { label: "Arquitectura web comercial", href: "/arquitectura-web-comercial/" },
              { label: "Agentes IA para WhatsApp", href: "/agentes-ia-whatsapp/" },
              { label: "Automatización de procesos", href: "/automatizacion-de-procesos/" },
              { label: "Ingeniería industrial / eficiencia energética", href: "/ingenieria-industrial-eficiencia-energetica/" },
            ] },
            { h: "Contacto",        links: [
              { label: "lperez.ceia@outlook.com", href: "mailto:lperez.ceia@outlook.com" },
              { label: "+57 315 325 1082", href: "tel:+573153251082" },
              { label: "Cali, Valle del Cauca", href: "/contacto/" },
            ] },
          ].map(col => (
            <div key={col.h}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 12, fontWeight: 600 }}>
                {col.h}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 6 }}>
                {col.links.map((item) => (
                  <li key={item.label}>
                    <a
                      href={item.href}
                      className="link-anim"
                      style={{ fontSize: 13, color: "var(--fg-muted)", textDecoration: "none" }}
                    >
                      {item.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "var(--gap-2)", paddingTop: "var(--pad-2)" }}>
          <span className="mono" style={{ fontSize: 11, color: "var(--fg-soft)", letterSpacing: ".14em", textTransform: "uppercase" }}>
            © 2026 CEIA Ingeniería · Todos los derechos reservados
          </span>
          <span className="mono" style={{ fontSize: 11, color: "var(--fg-soft)", letterSpacing: ".14em", textTransform: "uppercase" }}>
            ceiaingenieria.com
          </span>
        </div>
      </div>
    </footer>
  );
}

// ─── LANDING ASSEMBLY ──────────────────────────────────────────────
function Landing({ onCTA, variant }) {
  // Scroll-reveal: sections fade in as they enter the viewport
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const els = document.querySelectorAll('section[id]:not(#hero)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08 });
    els.forEach(el => { el.classList.add('reveal-section'); io.observe(el); });
    return () => io.disconnect();
  }, []);

  return (
    <div data-screen-label="Landing CEIA">
      <LandingHero onCTA={onCTA} variant={variant} />
      <LandingProblem variant={variant} />
      <LandingServices variant={variant} />
      <LandingSpecialties variant={variant} />
      <LandingDifferentiators variant={variant} />
      <LandingFooter onCTA={onCTA} />
    </div>
  );
}

window.Landing = Landing;