/* Geishia — Sections: Soluciones, Servicios, Diagnostico, Diferenciadores, Confiaron */
const { useEffect: useEffectS, useRef: useRefS, useState: useStateS } = React;

/* Spotlight cursor effect helper */
function useSpotlight() {
  const ref = useRefS(null);
  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    const move = (e) => {
      const rect = el.getBoundingClientRect();
      el.style.setProperty('--mx', `${e.clientX - rect.left}px`);
      el.style.setProperty('--my', `${e.clientY - rect.top}px`);
    };
    el.addEventListener('mousemove', move, { passive: true });
    return () => el.removeEventListener('mousemove', move);
  }, []);
  return ref;
}

/* ---------- Soluciones (refined: 2x2, more breathing, featured visible) ---------- */
const Soluciones = () => {
  const cards = [
    {
      icon: window.Icons.FileText,
      title: 'Facturación y cobranzas',
      desc: 'Extracción automática de facturas, validación AFIP, recordatorios de cobro inteligentes y conciliación bancaria con Claude.',
      integrations: ['AFIP', 'MercadoPago', 'WhatsApp', 'Gmail', 'Sheets', 'Tango'],
      href: './soluciones/facturacion.html',
      featured: false,
    },
    {
      icon: window.Icons.ShoppingCart,
      title: 'Operaciones de ecommerce',
      desc: 'Sincronización en tiempo real entre tu marketplace, tu tienda y tu catálogo. Alertas de reposición priorizadas y respuestas automáticas.',
      integrations: ['MercadoLibre', 'Tiendanube', 'WooCommerce', 'Shopify', 'n8n', 'Claude'],
      href: './soluciones/pedidos.html',
      featured: true,
    },
    {
      icon: window.Icons.MessagesSquare,
      title: 'Atención al cliente',
      desc: 'Clasificación inteligente de consultas. Las repetitivas las responde Claude en segundos, las complejas llegan a tu equipo con contexto.',
      integrations: ['WhatsApp', 'Gmail', 'Instagram', 'Notion', 'Slack', 'Claude'],
      href: './soluciones/clientes.html',
      featured: false,
    },
    {
      icon: window.Icons.BarChart,
      title: 'Reportes y dashboards',
      desc: 'Datos consolidados de todos tus sistemas, analizados por Claude. Reportes ejecutivos automáticos los lunes 8 AM en tu inbox.',
      integrations: ['Sheets', 'BigQuery', 'Looker', 'Metabase', 'Slack', 'Claude'],
      href: './soluciones/reportes.html',
      featured: false,
    },
  ];

  return (
    <section id="soluciones" className="section" data-screen-label="04 Soluciones">
      <div className="section-glow violet" data-parallax="0.25"
           style={{ top: '20%', left: '50%', transform: 'translateX(-50%)' }}/>
      <div className="container">
        <div className="section-header">
          <FadeUp><span className="eyebrow-mono eyebrow-violet">Soluciones</span></FadeUp>
          <FadeUp delay={80}><h2 className="h2-display">Nuestras soluciones</h2></FadeUp>
          <FadeUp delay={160}>
            <p className="body-lead">
              Cuatro categorías core de automatización para Empresas.
              Si tu caso es distinto, también lo resolvemos.
            </p>
          </FadeUp>
        </div>
        <div className="sol-grid">
          {cards.map((c, i) => (
            <FadeUp key={c.title} delay={i * 60}>
              <SolCard {...c}/>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
};

const SolCard = ({ icon: Icon, title, desc, integrations, href, featured }) => {
  const ref = useSpotlight();
  return (
    <a ref={ref} href={href} className={`sol-card ${featured ? 'is-featured' : ''}`}>
      <div className="sol-icon"><Icon size={32}/></div>
      <h3 className="sol-title">{title}</h3>
      <div className="sol-rule"/>
      <p className="sol-desc">{desc}</p>
      <div className="sol-integrations-label">Integraciones</div>
      <div className="sol-integrations">
        {integrations.map(name => <span key={name} className="int-chip">{name}</span>)}
      </div>
      <span className="sol-cta">Conocer más <window.Icons.ArrowRight size={13}/></span>
    </a>
  );
};

/* ---------- Servicios (4 cards: Web · IA · Soluciones · Estrategia) ---------- */
const Servicios = () => (
  <section id="servicios-extra" className="section" data-screen-label="05 Servicios">
    <div className="section-glow violet" data-parallax="0.2"
         style={{ top: '10%', right: '-200px' }}/>
    <div className="container">
      <div className="section-header">
        <FadeUp><span className="eyebrow-mono eyebrow-muted">QUÉ HACEMOS</span></FadeUp>
        <FadeUp delay={80}><h2 className="h2-display">Nuestros servicios</h2></FadeUp>
        <FadeUp delay={160}>
          <p className="body-lead">
            Cuatro frentes complementarios para que tu Empresa tenga la presencia digital, la inteligencia y los sistemas operativos que necesita.
          </p>
        </FadeUp>
      </div>
      <div className="serv-grid">
        <FadeUp>
          <ServCard
            icon={window.Icons.Globe}
            title="Página Web a Medida"
            subtitle="Construida para convertir"
            desc="Sitios profesionales optimizados para conversión. Performance, SEO técnico y posicionamiento de marca alineados a tus objetivos comerciales."
            href="./servicios/pagina-web.html"
            decor="web"
          />
        </FadeUp>
        <FadeUp delay={80}>
          <ServCard
            icon={window.Icons.Sparkles}
            title="Inteligencia Artificial"
            subtitle="Agentes IA y automatizaciones"
            desc="Agentes inteligentes y workflows automatizados que ejecutan tareas reales de tu equipo: investigación, contenido, análisis y decisiones operativas."
            href="./servicios/inteligencia-artificial.html"
            decor="ai"
          />
        </FadeUp>
        <FadeUp delay={160}>
          <ServCard
            icon={window.Icons.Layers}
            title="Nuestras Soluciones"
            subtitle="Sistemas listos para tu back-office"
            desc="Sistemas listos para resolver problemas específicos: facturación, pedidos, atención al cliente y reportes. Diseñados para la operación cotidiana de tu Empresa."
            href="./soluciones/index.html"
            decor="sol"
            cta="Ver soluciones"
          />
        </FadeUp>
        <FadeUp delay={240}>
          <ServCard
            icon={window.Icons.Compass}
            title="Estrategia Comercial"
            subtitle="Marca, canales y autonomía"
            desc="Alineamos tu marca, tus redes y tus puntos de venta bajo una sola estrategia. Te dejamos los sistemas armados y capacitamos a tu equipo. Cero dependencia."
            href="./servicios/estrategia-comercial.html"
            decor="strat"
          />
        </FadeUp>
      </div>
    </div>
  </section>
);

const ServCard = ({ icon: Icon, title, subtitle, desc, href, decor, cta = 'Conocer más' }) => {
  const ref = useSpotlight();
  const DecorEl = decor === 'web' ? WebDecor
              : decor === 'ai'  ? AiDecor
              : decor === 'sol' ? SolDecor
              : decor === 'strat' ? StratDecor
              : WebDecor;
  return (
    <a ref={ref} href={href} className="serv-card">
      <div className="serv-decor" aria-hidden="true">
        <DecorEl/>
      </div>
      <div className="serv-content">
        <div className="serv-icon-wrap"><Icon size={28}/></div>
        <h3 className="serv-title">{title}</h3>
        <p className="serv-subtitle">{subtitle}</p>
        <p className="serv-desc">{desc}</p>
        <span className="serv-cta">{cta} <window.Icons.ArrowRight size={13}/></span>
      </div>
    </a>
  );
};

const WebDecor = () => (
  <svg width="100%" height="100%" viewBox="0 0 200 200" fill="none">
    <defs>
      <radialGradient id="wd-glow" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stopColor="rgba(124,92,255,0.35)"/>
        <stop offset="100%" stopColor="rgba(124,92,255,0)"/>
      </radialGradient>
    </defs>
    <circle cx="120" cy="100" r="90" fill="url(#wd-glow)"/>
    <g stroke="rgba(255,255,255,0.45)" strokeWidth="1" fill="none">
      <rect x="50" y="40" width="120" height="120" rx="6"/>
      <line x1="50" y1="60" x2="170" y2="60"/>
      <circle cx="60" cy="50" r="2.5" fill="rgba(255,255,255,0.4)"/>
      <circle cx="68" cy="50" r="2.5" fill="rgba(255,255,255,0.4)"/>
      <circle cx="76" cy="50" r="2.5" fill="rgba(255,255,255,0.4)"/>
      <rect x="60" y="72" width="60" height="6" rx="2" fill="rgba(124,92,255,0.5)" stroke="none"/>
      <rect x="60" y="84" width="100" height="3" rx="1.5" fill="rgba(255,255,255,0.18)" stroke="none"/>
      <rect x="60" y="92" width="80" height="3" rx="1.5" fill="rgba(255,255,255,0.14)" stroke="none"/>
      <rect x="60" y="110" width="35" height="35" rx="4" stroke="rgba(255,255,255,0.25)"/>
      <rect x="103" y="110" width="35" height="35" rx="4" stroke="rgba(255,255,255,0.25)"/>
      <rect x="146" y="110" width="20" height="35" rx="4" stroke="rgba(255,255,255,0.18)"/>
    </g>
  </svg>
);

const AiDecor = () => (
  <svg width="100%" height="100%" viewBox="0 0 200 200" fill="none">
    <defs>
      <radialGradient id="ai-glow" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stopColor="rgba(251,113,133,0.25)"/>
        <stop offset="60%" stopColor="rgba(124,92,255,0.18)"/>
        <stop offset="100%" stopColor="rgba(124,92,255,0)"/>
      </radialGradient>
    </defs>
    <circle cx="120" cy="100" r="90" fill="url(#ai-glow)"/>
    <g stroke="rgba(124,92,255,0.55)" strokeWidth="1" fill="none">
      <line x1="120" y1="100" x2="60" y2="50"/>
      <line x1="120" y1="100" x2="170" y2="40"/>
      <line x1="120" y1="100" x2="180" y2="120"/>
      <line x1="120" y1="100" x2="60" y2="160"/>
      <line x1="120" y1="100" x2="160" y2="170"/>
      <line x1="120" y1="100" x2="40" y2="100"/>
    </g>
    <g fill="rgba(255,255,255,0.6)">
      <circle cx="60" cy="50" r="3"/>
      <circle cx="170" cy="40" r="3"/>
      <circle cx="180" cy="120" r="3"/>
      <circle cx="60" cy="160" r="3"/>
      <circle cx="160" cy="170" r="3"/>
      <circle cx="40" cy="100" r="3"/>
    </g>
    <circle cx="120" cy="100" r="10" fill="rgba(124,92,255,0.85)"/>
    <circle cx="120" cy="100" r="5" fill="#FAFAFA"/>
  </svg>
);

const SolDecor = () => (
  <svg width="100%" height="100%" viewBox="0 0 200 200" fill="none">
    <defs>
      <radialGradient id="sol-glow" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stopColor="rgba(251,113,133,0.22)"/>
        <stop offset="60%" stopColor="rgba(124,92,255,0.15)"/>
        <stop offset="100%" stopColor="rgba(124,92,255,0)"/>
      </radialGradient>
    </defs>
    <circle cx="120" cy="100" r="90" fill="url(#sol-glow)"/>
    <g stroke="rgba(255,255,255,0.4)" strokeWidth="1" fill="none">
      {/* stacked layered blocks suggesting modular solutions */}
      <rect x="62" y="48" width="74" height="22" rx="4"/>
      <rect x="74" y="78" width="74" height="22" rx="4"/>
      <rect x="86" y="108" width="74" height="22" rx="4"/>
      <rect x="98" y="138" width="74" height="22" rx="4"/>
    </g>
    <g fill="rgba(124,92,255,0.55)">
      <rect x="62" y="48" width="6" height="22" rx="2"/>
      <rect x="74" y="78" width="6" height="22" rx="2"/>
      <rect x="86" y="108" width="6" height="22" rx="2"/>
      <rect x="98" y="138" width="6" height="22" rx="2"/>
    </g>
    <g fill="rgba(255,255,255,0.55)">
      <circle cx="142" cy="59" r="2"/>
      <circle cx="154" cy="89" r="2"/>
      <circle cx="166" cy="119" r="2"/>
      <circle cx="178" cy="149" r="2"/>
    </g>
  </svg>
);

const StratDecor = () => (
  <svg width="100%" height="100%" viewBox="0 0 200 200" fill="none">
    <defs>
      <radialGradient id="strat-glow" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stopColor="rgba(124,92,255,0.28)"/>
        <stop offset="60%" stopColor="rgba(251,113,133,0.15)"/>
        <stop offset="100%" stopColor="rgba(124,92,255,0)"/>
      </radialGradient>
    </defs>
    <circle cx="120" cy="100" r="90" fill="url(#strat-glow)"/>
    {/* concentric target rings */}
    <g stroke="rgba(255,255,255,0.35)" strokeWidth="1" fill="none">
      <circle cx="120" cy="100" r="68"/>
      <circle cx="120" cy="100" r="50"/>
      <circle cx="120" cy="100" r="32"/>
      <circle cx="120" cy="100" r="14"/>
    </g>
    {/* cross-hair */}
    <g stroke="rgba(124,92,255,0.55)" strokeWidth="1.2" strokeLinecap="round">
      <line x1="120" y1="20" x2="120" y2="40"/>
      <line x1="120" y1="160" x2="120" y2="180"/>
      <line x1="40" y1="100" x2="58" y2="100"/>
      <line x1="182" y1="100" x2="200" y2="100"/>
    </g>
    {/* center dot */}
    <circle cx="120" cy="100" r="5" fill="rgba(251,113,133,0.85)"/>
    {/* small channel pins around */}
    <g fill="rgba(255,255,255,0.6)">
      <circle cx="78" cy="58" r="2.5"/>
      <circle cx="166" cy="64" r="2.5"/>
      <circle cx="60" cy="138" r="2.5"/>
      <circle cx="172" cy="142" r="2.5"/>
    </g>
  </svg>
);

/* ---------- Diagnóstico interactivo ---------- */
const Diagnostico = () => {
  const [step, setStep] = useStateS(0);
  const [answers, setAnswers] = useStateS({ proceso: null, equipo: null, horas: null });
  const [showResult, setShowResult] = useStateS(false);
  const [analyzing, setAnalyzing] = useStateS(false);
  const [hasSeenAnalyzing, setHasSeenAnalyzing] = useStateS(false);
  const [animatedHours, setAnimatedHours] = useStateS({ low: 0, high: 0 });
  const [animatedArs, setAnimatedArs] = useStateS(0);

  const procesos = [
    { key: 'facturacion', label: 'Facturación', factor: 0.70 },
    { key: 'pedidos', label: 'Carga de pedidos', factor: 0.65 },
    { key: 'clientes', label: 'Respuesta a clientes', factor: 0.55 },
    { key: 'reportes', label: 'Reportes', factor: 0.80 },
  ];
  const equipos = [
    { key: '1', label: '1', mult: 1.0 },
    { key: '2-3', label: '2 a 3', mult: 1.15 },
    { key: '4-6', label: '4 a 6', mult: 1.3 },
    { key: '6+', label: 'Más de 6', mult: 1.45 },
  ];
  const horasOptions = [
    { key: '<5', label: 'Menos de 5', value: 3 },
    { key: '5-15', label: '5 a 15', value: 10 },
    { key: '15-30', label: '15 a 30', value: 22 },
    { key: '30+', label: 'Más de 30', value: 40 },
  ];

  const workflowsByProceso = {
    facturacion: [
      { name: 'Extractor de facturas con validación AFIP', href: './soluciones/facturacion.html#extractor-facturas' },
      { name: 'Recordatorios de cobranza con tono adaptado', href: './soluciones/facturacion.html#recordatorios-cobranza' },
      { name: 'Conciliación bancaria con Claude', href: './soluciones/facturacion.html#conciliacion-bancaria' },
    ],
    pedidos: [
      { name: 'Sincronización stock multicanal', href: './soluciones/pedidos.html#sincronizacion-stock' },
      { name: 'Alertas inteligentes de reposición', href: './soluciones/pedidos.html#alertas-reposicion' },
      { name: 'Respondedor en MercadoLibre', href: './soluciones/pedidos.html#preguntas-publicaciones' },
    ],
    clientes: [
      { name: 'Clasificador de consultas', href: './soluciones/clientes.html#clasificador-consultas' },
      { name: 'Base de conocimiento conversacional', href: './soluciones/clientes.html#base-conocimiento' },
      { name: 'Seguimiento de tickets y SLAs', href: './soluciones/clientes.html#seguimiento-tickets' },
    ],
    reportes: [
      { name: 'Reporte ejecutivo semanal automático', href: './soluciones/reportes.html#dashboard-ejecutivo' },
      { name: 'Alertas de desvíos en tiempo real', href: './soluciones/reportes.html#alertas-desvios' },
      { name: 'Consolidación multi-fuente', href: './soluciones/reportes.html#consolidacion-multifuente' },
    ],
  };

  function calculate(a = answers) {
    const proc = procesos.find(p => p.key === a.proceso);
    const eq = equipos.find(e => e.key === a.equipo);
    const hr = horasOptions.find(h => h.key === a.horas);
    if (!proc || !eq || !hr) return null;
    const base = hr.value * proc.factor * eq.mult * 4.33;
    const low = Math.round(base * 0.85);
    const high = Math.round(base * 1.15);
    const mid = Math.round(base);
    const ars = mid * 12000;
    return { low, high, mid, ars, procesoLabel: proc.label.toLowerCase(), workflows: workflowsByProceso[a.proceso] || [] };
  }

  function handleAnswer(field, value) {
    const next = { ...answers, [field]: value };
    setAnswers(next);
    if (step < 2) {
      setTimeout(() => setStep(step + 1), 280);
    } else {
      if (!hasSeenAnalyzing) {
        setAnalyzing(true);
        setTimeout(() => {
          setAnalyzing(false);
          setShowResult(true);
          setHasSeenAnalyzing(true);
        }, 1200);
      } else {
        setShowResult(true);
      }
    }
  }

  function reset() {
    setAnswers({ proceso: null, equipo: null, horas: null });
    setStep(0);
    setShowResult(false);
    setAnimatedHours({ low: 0, high: 0 });
    setAnimatedArs(0);
  }

  useEffectS(() => {
    if (!showResult) return;
    const result = calculate();
    if (!result) return;
    const start = performance.now();
    const duration = 800;
    let raf;
    function tick(now) {
      const t = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - t, 4);
      setAnimatedHours({
        low: Math.floor(result.low * eased),
        high: Math.floor(result.high * eased),
      });
      setAnimatedArs(Math.floor(result.ars * eased));
      if (t < 1) raf = requestAnimationFrame(tick);
      else {
        setAnimatedHours({ low: result.low, high: result.high });
        setAnimatedArs(result.ars);
      }
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [showResult, answers]);

  const result = showResult ? calculate() : null;

  return (
    <section id="diagnostico" className="section" data-screen-label="06 Diagnóstico">
      <div className="section-glow violet" data-parallax="0.25"
           style={{ top: '15%', left: '50%', transform: 'translateX(-50%)' }}/>
      <div className="container">
        <div className="section-header">
          <FadeUp><span className="eyebrow-mono eyebrow-violet">Diagnóstico</span></FadeUp>
          <FadeUp delay={80}>
            <h2 className="h2-display">Tres preguntas. Una estimación honesta.</h2>
          </FadeUp>
          <FadeUp delay={160}>
            <p className="body-lead">
              Respondé en 60 segundos y te decimos qué automatizar primero, con estimación de ahorro concreto.
            </p>
          </FadeUp>
        </div>

        <div className="diag-card liquid-glass">
          {!analyzing && !showResult && (
            <>
              <div className="diag-progress">
                {[0,1,2].map(i => (
                  <span key={i} className={`diag-progress-bar ${i <= step ? 'is-active' : ''}`}/>
                ))}
              </div>
              <div className="diag-step-label mono">Paso {step+1} de 3</div>

              {step === 0 && (
                <div className="diag-step">
                  <h3 className="diag-question">¿Cuál proceso repetitivo te consume más horas por semana?</h3>
                  <div className="diag-options">
                    {procesos.map(p => (
                      <button key={p.key} className="diag-option"
                              onClick={() => handleAnswer('proceso', p.key)}>
                        <span>{p.label}</span>
                        <window.Icons.ArrowRight size={16}/>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {step === 1 && (
                <div className="diag-step">
                  <h3 className="diag-question">¿Cuántas personas de tu equipo lo ejecutan?</h3>
                  <div className="diag-options">
                    {equipos.map(e => (
                      <button key={e.key} className="diag-option"
                              onClick={() => handleAnswer('equipo', e.key)}>
                        <span>{e.label}</span>
                        <window.Icons.ArrowRight size={16}/>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {step === 2 && (
                <div className="diag-step">
                  <h3 className="diag-question">¿Cuántas horas semanales se van en eso?</h3>
                  <div className="diag-options">
                    {horasOptions.map(h => (
                      <button key={h.key} className="diag-option"
                              onClick={() => handleAnswer('horas', h.key)}>
                        <span>{h.label}</span>
                        <window.Icons.ArrowRight size={16}/>
                      </button>
                    ))}
                  </div>
                </div>
              )}
            </>
          )}

          {analyzing && (
            <div className="diag-analyzing">
              <span className="eyebrow-mono eyebrow-violet">Analizando tu caso</span>
              <div className="diag-analyzing-lines">
                <div className="diag-anal-line" style={{animationDelay: '0ms'}}>
                  <span className="diag-dot"/> Calculando impacto en tu proceso
                </div>
                <div className="diag-anal-line" style={{animationDelay: '300ms'}}>
                  <span className="diag-dot"/> Cruzando con casos comparables
                </div>
                <div className="diag-anal-line" style={{animationDelay: '600ms'}}>
                  <span className="diag-dot"/> Ajustando por tamaño del equipo
                </div>
              </div>
            </div>
          )}

          {showResult && result && (
            <div className="diag-result">
              <div className="diag-result-eyebrow mono">TU RESULTADO</div>
              <h3 className="diag-result-title">
                Con tu proceso de <span className="text-violet">{result.procesoLabel}</span> automatizado, tu equipo recupera
              </h3>
              <div className="diag-result-number">
                <span className="diag-result-range">entre {animatedHours.low} y {animatedHours.high}</span>
                <span className="diag-result-unit">horas mensuales</span>
              </div>
              <p className="diag-result-ars">
                Equivale a aproximadamente <strong>ARS {animatedArs.toLocaleString('es-AR')}</strong> mensuales en horas de equipo recuperadas.
              </p>

              <div className="diag-result-divider"/>

              <div className="diag-result-workflows">
                <div className="eyebrow-mono eyebrow-muted">3 automatizaciones recomendadas para tu caso</div>
                {result.workflows.map((wf, i) => (
                  <a key={i} href={wf.href} className="diag-workflow-card">
                    <span className="diag-workflow-name">{wf.name}</span>
                    <window.Icons.ArrowUpRight size={16} className="diag-workflow-arrow"/>
                  </a>
                ))}
              </div>

              <p className="diag-disclaimer">
                Estimación basada en implementaciones comparables. El resultado real depende de tus sistemas actuales y la complejidad específica de tu proceso.
              </p>

              <div className="diag-result-actions">
                <a href="#contacto" className="btn-primary btn-warm-shimmer">
                  Agendar reunión profundo <window.Icons.ArrowRight size={15}/>
                </a>
                <button onClick={reset} className="btn-glass">
                  Volver a empezar
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

/* ---------- Diferenciadores 2x2 ---------- */
const Diferenciadores = () => {
  const items = [
    { title: 'Arquitectura visible', desc: 'Te mostramos cómo funciona cada workflow. Diagramas, código, decisiones técnicas. Nada de cajas negras.' },
    { title: 'Contexto argentino',   desc: 'AFIP, MercadoPago, Tiendanube, WhatsApp Business. Conocemos el terreno y las particularidades fiscales.' },
    { title: 'Criterio técnico',     desc: 'Modelos adecuados para cada tarea. Claude Haiku para extracción masiva, Sonnet para razonamiento. No usamos GPT-4 para contar palabras.' },
    { title: 'Foco en back-office',  desc: 'No hacemos chatbots de ventas. Hacemos que tu operación funcione sola. Cobranzas, facturación, reportes, atención.' },
  ];

  return (
    <section id="diferenciadores" className="section" data-screen-label="10 Diferenciadores">
      <div className="container">
        <div className="section-header">
          <FadeUp><span className="eyebrow-mono eyebrow-violet">Lo que nos diferencia</span></FadeUp>
          <FadeUp delay={80}>
            <h2 className="h2-display">No somos una agencia de chatbots.</h2>
          </FadeUp>
          <FadeUp delay={160}>
            <p className="body-lead">
              Cuatro decisiones que tomamos por defecto y que cambian todo el resultado.
            </p>
          </FadeUp>
        </div>
        <div className="diff-grid-2x2">
          {items.map((it, i) => (
            <FadeUp key={i} delay={i * 80}>
              <article className="diff-2-card liquid-glass">
                <div className="diff-2-number mono">0{i+1}</div>
                <h4 className="diff-2-title">{it.title}</h4>
                <p className="diff-2-desc">{it.desc}</p>
              </article>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Confiaron (refined: real-client cards + industry chips) ---------- */
const Confiaron = () => {
  const realClients = [
    { mark: 'Kusaga Argentina', industry: 'Servicios B2B',     project: 'Integración Microsoft Teams + workflows internos' },
    { mark: 'PL Deco',          industry: 'Retail / Ecommerce', project: 'Media Buyer Agent + automatización Meta Ads' },
  ];
  const industries = [
    { name: 'Estudio Contable',         icon: window.Icons.Calculator },
    { name: 'Distribuidora B2B',        icon: window.Icons.Truck },
    { name: 'Retail Online',            icon: window.Icons.ShoppingBag },
    { name: 'Consultora',               icon: window.Icons.Briefcase },
    { name: 'Servicios Profesionales',  icon: window.Icons.UserCheck },
    { name: 'Industria',                icon: window.Icons.Factory },
  ];

  return (
    <section id="confiaron" className="section" data-screen-label="11 Confiaron">
      <div className="container">
        <div className="section-header">
          <FadeUp><span className="eyebrow-mono eyebrow-violet">Confiaron en nosotros</span></FadeUp>
          <FadeUp delay={80}>
            <h2 className="h2-display">Clientes y proyectos</h2>
          </FadeUp>
          <FadeUp delay={160}>
            <p className="body-lead">
              Marcas e industrias con las que hemos trabajado en proyectos de automatización.
            </p>
          </FadeUp>
        </div>

        <div className="real-clients-grid">
          {realClients.map((c, i) => (
            <FadeUp key={i} delay={i * 100}>
              <article className="real-client-card liquid-glass">
                <div className="real-client-header">
                  <span className="real-client-tag mono">CLIENTE</span>
                  <h3 className="real-client-name">{c.mark}</h3>
                </div>
                <div className="real-client-meta">
                  <span className="real-client-industry">{c.industry}</span>
                </div>
                <p className="real-client-project">{c.project}</p>
              </article>
            </FadeUp>
          ))}
        </div>

        <div className="industries-section">
          <FadeUp>
            <div className="eyebrow-mono eyebrow-muted" style={{textAlign: 'center', marginBottom: 24}}>
              También trabajamos con
            </div>
          </FadeUp>
          <div className="industries-chips">
            {industries.map((ind, i) => {
              const Icon = ind.icon;
              return (
                <FadeUp key={i} delay={i * 60}>
                  <div className="industry-chip">
                    <Icon size={16}/>
                    <span>{ind.name}</span>
                  </div>
                </FadeUp>
              );
            })}
          </div>
        </div>

        <p className="confiaron-disclaimer">
          Las industrias representadas son perfiles de proyectos abordados. Por confidencialidad, no todos los nombres específicos pueden listarse públicamente.
        </p>
      </div>
    </section>
  );
};

window.Soluciones = Soluciones;
window.Servicios = Servicios;
window.Diagnostico = Diagnostico;
window.Diferenciadores = Diferenciadores;
window.Confiaron = Confiaron;