// Altavia main app
const { useEffect, useState, useRef } = React;

const WhatsAppIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
);

const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);

const ArrowDown = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <line x1="12" y1="5" x2="12" y2="19" />
    <polyline points="5 12 12 19 19 12" />
  </svg>
);

const Logomark = () => (
  <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <path d="M2 24 L14 4 L26 24" stroke="#0F2117" strokeWidth="1.6" strokeLinejoin="round" />
    <path d="M9 24 L14 14 L19 24" stroke="#C7973C" strokeWidth="1.6" strokeLinejoin="round" />
  </svg>
);

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={'top' + (scrolled ? ' scrolled' : '')}>
      <div className="row">
        <a href="#" className="lockup">
          <span className="glyph"><Logomark /></span>
          Altavia
        </a>
        <div className="links">
          <a href="#problema">Problema</a>
          <a href="#proceso">Proceso</a>
          <a href="#servicios">Servicios</a>
          <a href="#caso">Ámbitos</a>
          <a href="#equipo">Equipo</a>
          <a href="#fundador">Fundador</a>
          <a href="https://wa.me/50688869436" className="btn btn-accent" target="_blank" rel="noreferrer">
            <WhatsAppIcon /> Conversemos
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="hero container">
      <div className="hero-grid">
        <div>
          <div className="eyebrow reveal" style={{ marginBottom: 28 }}>
            ⌁&nbsp;&nbsp;Software a la medida · Costa Rica
          </div>
          <h1 className="reveal d1">
            Software que <em>trabaja</em><br />
            mientras usted<br />
            atiende su negocio.
          </h1>
          <p className="lede reveal d2">
            Somos una consultoría de inteligencia artificial y desarrollo a la medida.
            Identificamos el proceso que más le cuesta a su empresa, lo automatizamos,
            y medimos el resultado. Entregamos valor cada dos semanas, no en seis meses.
          </p>
          <div className="reveal d3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href="https://wa.me/50688869436" className="btn btn-primary" target="_blank" rel="noreferrer">
              <WhatsAppIcon /> Primera llamada gratis
            </a>
            <a href="#proceso" className="btn btn-ghost">
              Ver cómo funciona <ArrowDown />
            </a>
          </div>
        </div>

        <div className="reveal d2">
          <HeroDiagram />
        </div>
      </div>

      <div className="stat-strip">
        <div className="stat reveal d1">
          <div className="num">2 <em>semanas</em></div>
          <div className="lbl">Cada sprint entrega algo funcional que puede usar de inmediato. Sin sorpresas al final.</div>
        </div>
        <div className="stat reveal d2">
          <div className="num">10<em>+</em></div>
          <div className="lbl">Años de ingeniería en organizaciones globales. Ahora al servicio de empresas en Costa Rica.</div>
        </div>
        <div className="stat reveal d3">
          <div className="num">CR</div>
          <div className="lbl">Costarricense. Sin tercerizar offshore. Si hay un problema, respondemos ese mismo día.</div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    'Automatización de WhatsApp',
    'Agentes de IA',
    'Integraciones con sistemas existentes',
    'Apps internas',
    'Reportes en tiempo real',
    'Inventarios sincronizados',
    'CRM a la medida',
    'Bots de atención',
  ];
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((it, i) => (
          <span key={i} className="item">
            <span className="dot"></span>
            {it}
          </span>
        ))}
      </div>
    </div>
  );
}

function Problem() {
  const rows = [
    {
      cat: 'Operaciones',
      t: 'Las operaciones viven en hojas de cálculo',
      d: 'Pedidos por teléfono, inventarios en Excel, coordinación por WhatsApp. Información que se pierde, versiones que se pisan, y errores que cuestan dinero real cada semana.',
    },
    {
      cat: 'Ventas',
      t: 'Las ventas se escapan en silencio',
      d: 'Clientes que preguntan a las 7pm y reciben respuesta a las 10am del día siguiente. Seguimientos que se olvidan. Oportunidades que se van con quien respondió primero.',
    },
    {
      cat: 'Datos',
      t: 'Los reportes llegan tarde y nadie los lee',
      d: 'Tableros de Excel que se actualizan los lunes con los datos del viernes anterior. Para cuando la información llega, la decisión ya se tomó por intuición.',
    },
    {
      cat: 'Crecimiento',
      t: 'Crecer significa contratar más gente',
      d: 'Cada nuevo cliente o tienda multiplica la carga manual. Su negocio crece, pero el margen se va detrás de personal que solo administra el caos.',
    },
    {
      cat: 'Marketing',
      t: 'El marketing depende de usted',
      d: 'Publicaciones manuales, mensajes uno por uno, sin manera de saber qué funciona. Si no lo hace usted, no se hace. Y cada hora suya vale más que eso.',
    },
  ];
  return (
    <section id="problema" className="section container" style={{ paddingTop: '180px' }}>
      <div className="section-head">
        <span className="num reveal">01 · PROBLEMA</span>
        <div className="reveal d1">
          <h2>Lo manual no escala.<br /><em>Lo invisible no se mejora.</em></h2>
          <p className="intro">
            La mayoría de empresas en Costa Rica gestionan ventas, operaciones y datos
            de forma manual. No por falta de voluntad, sino porque nunca han tenido acceso
            a herramientas diseñadas para su tamaño y su sector.
          </p>
        </div>
      </div>

      <div className="pain-list-header reveal">
        <span className="eyebrow">/ Lo que escuchamos cada semana</span>
      </div>

      <div className="pain-list">
        {rows.map((r, i) => (
          <div key={i} className="pain-row reveal" style={{ transitionDelay: `${i * 0.06}s` }}>
            <div className="idx">
              <span className="idx-num">0{i + 1}</span>
              <span className="idx-cat">{r.cat}</span>
            </div>
            <h3>{r.t}</h3>
            <p>{r.d}</p>
            <div className="arrow"><Arrow size={20} /></div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    {
      n: '01',
      t: 'Primera llamada',
      d: 'En 30 minutos validamos si hay encaje: qué procesos le están costando más, qué tan lista está su operación para automatizar, y si tiene sentido seguir. Sin compromiso de ningún lado.',
      meta: '30 min · sin costo',
    },
    {
      n: '02',
      t: 'Diagnóstico a fondo',
      d: 'Si hay encaje, hacemos un diagnóstico de dos semanas: mapeamos sus procesos actuales, identificamos las oportunidades con mayor retorno, y le entregamos un plan concreto con alcance, costo y cronograma. Usted decide si continúa.',
      meta: '2 semanas · con costo',
    },
    {
      n: '03',
      t: 'Implementación por sprints',
      d: 'Si el plan le convence, comenzamos. Cada dos semanas entregamos algo funcional. El precio variable se ata a la métrica acordada: fill rate, tiempo de respuesta, ventas recuperadas. Si no se mueve, no paga el componente variable.',
      meta: 'sprints · costo por resultado',
    },
  ];
  return (
    <section id="proceso" className="section section-dark">
      <div className="container">
        <div className="section-head">
          <span className="num reveal">02 · PROCESO</span>
          <div className="reveal d1">
            <h2>Primero entender.<br /><em>Luego construir.</em></h2>
            <p className="intro">
              No empezamos a programar en la primera reunión. Primero validamos que hay
              encaje, luego hacemos un diagnóstico real, y solo entonces proponemos
              qué construir y a qué costo.
            </p>
          </div>
        </div>

        <div className="process-steps reveal">
          {steps.map((s, i) => (
            <div key={i} className="process-step">
              <span className="step-num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="meta">{s.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section id="servicios" className="section container" style={{ paddingTop: '180px' }}>
      <div className="section-head">
        <span className="num reveal">03 · SERVICIOS</span>
        <div className="reveal d1">
          <h2>Qué construimos.</h2>
          <p className="intro">
            Soluciones técnicas a la medida. No paquetes pre-armados — cada proyecto se diseña
            sobre el proceso real de su empresa, con la tecnología más simple que resuelva el problema.
          </p>
        </div>
      </div>

      <div className="services-grid reveal">
        <div className="svc featured">
          <div>
            <div className="svc-tag">/ Insignia</div>
            <h3>Agentes de IA<br />que conversan, deciden y actúan.</h3>
            <p>
              Asistentes que responden a clientes en WhatsApp, califican leads, coordinan citas,
              consultan su inventario y pasan al humano cuando hace falta. Entrenados con
              su catálogo, su tono, su forma de vender.
            </p>
          </div>
          <div className="svc-bottom">
            <span className="chip">WhatsApp Cloud API</span>
            <span className="chip">Claude</span>
            <span className="chip">RAG</span>
            <span className="chip">Voz</span>
          </div>
        </div>

        <div className="svc">
          <div>
            <div className="svc-tag">/ Operaciones</div>
            <h3>Apps internas a la medida</h3>
            <p>Flujos de aprobación, inventario, coordinación. Menos WhatsApp operativo, más control real.</p>
          </div>
          <div className="svc-bottom">
            <span className="chip">Web</span>
            <span className="chip">Móvil</span>
            <span className="chip">Offline</span>
          </div>
        </div>

        <div className="svc">
          <div>
            <div className="svc-tag">/ Integración</div>
            <h3>Conectamos lo que ya tiene</h3>
            <p>Su ERP, su POS, su contabilidad, sus hojas de cálculo. Que todos los sistemas hablen entre sí.</p>
          </div>
          <div className="svc-bottom">
            <span className="chip">ERP</span>
            <span className="chip">POS</span>
            <span className="chip">APIs</span>
          </div>
        </div>

        <div className="svc">
          <div>
            <div className="svc-tag">/ Datos</div>
            <h3>Reportes que se leen</h3>
            <p>Tableros en tiempo real con las 5 métricas que importan, no las 50 que distraen.</p>
          </div>
          <div className="svc-bottom">
            <span className="chip">Dashboards</span>
            <span className="chip">Alertas</span>
          </div>
        </div>

        <div className="svc">
          <div>
            <div className="svc-tag">/ Marketing</div>
            <h3>Marketing automatizado</h3>
            <p>Publicaciones, email, seguimiento de leads y reportes. Sin intervención manual.</p>
          </div>
          <div className="svc-bottom">
            <span className="chip">Meta</span>
            <span className="chip">Email</span>
            <span className="chip">Reportes</span>
          </div>
        </div>

        <div className="svc wms wms-dark">
          <div className="wms-inner">
            <div>
              <div className="svc-tag">/ Sistemas · WMS · ERP</div>
              <h3>Gestión de almacén e inventario conectado</h3>
              <p>
                Diseñamos e implementamos sistemas WMS que conectan su CEDI con tiendas, proveedores
                y sistemas de pedidos. Fill rate, trazabilidad de lotes, reposición automática Min/Max,
                conteo cíclico ABC y despacho por olas. Para distribuidoras y retail con operaciones
                físicas que hoy viven en Excel o en un ERP que no habla con el piso.
              </p>
            </div>
            <div className="svc-bottom">
              <span className="chip">WMS</span>
              <span className="chip">ERP</span>
              <span className="chip">CEDI → Tienda</span>
              <span className="chip">Inventario en tiempo real</span>
              <span className="chip">Reposición automática</span>
              <span className="chip">Trazabilidad</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CaseDiagram() {
  const targets = [
    { x: 280, y: 40, n: 'retail' },
    { x: 330, y: 100, n: 'ventas' },
    { x: 350, y: 160, n: 'datos' },
    { x: 330, y: 220, n: 'inventario' },
    { x: 280, y: 270, n: 'clientes' },
  ];
  return (
    <svg viewBox="0 0 400 310" style={{ position: 'relative', width: '100%', height: '100%', zIndex: 2 }}>
      <g>
        <rect x="30" y="125" width="110" height="60" fill="#0F2117" />
        <text x="85" y="152" fontFamily="Instrument Serif" fontSize="18" fill="#F7F1E5" textAnchor="middle" fontStyle="italic">su empresa</text>
        <text x="85" y="172" fontFamily="JetBrains Mono" fontSize="9" fill="#C7973C" textAnchor="middle" letterSpacing="1">HUB CENTRAL</text>
      </g>
      {targets.map((s, i) => (
        <g key={i}>
          <line x1="140" y1="155" x2={s.x} y2={s.y} stroke="rgba(15,33,23,0.3)" strokeWidth="1" strokeDasharray="3 3" />
          <circle cx={s.x} cy={s.y} r="4" fill="#C7973C">
            <animate attributeName="r" values="4;6;4" dur="2.4s" begin={`${i * 0.4}s`} repeatCount="indefinite" />
          </circle>
          <text x={s.x + 12} y={s.y + 4} fontFamily="JetBrains Mono" fontSize="10" fill="#0F2117">{s.n}</text>
        </g>
      ))}
      {targets.map((s, i) => (
        <circle key={i} r="2.5" fill="#C7973C">
          <animateMotion dur="3s" repeatCount="indefinite" begin={`${i * 0.5}s`} path={`M 140 155 L ${s.x} ${s.y}`} />
          <animate attributeName="opacity" values="0;1;1;0" dur="3s" begin={`${i * 0.5}s`} repeatCount="indefinite" />
        </circle>
      ))}
      <text x="30" y="30" fontFamily="JetBrains Mono" fontSize="10" fill="#6B7567" letterSpacing="1">RED · SISTEMAS CONECTADOS</text>
      <text x="30" y="300" fontFamily="JetBrains Mono" fontSize="10" fill="#6B7567" letterSpacing="1">SYNC · TIEMPO REAL</text>
    </svg>
  );
}

function CaseStudy() {
  return (
    <section id="caso" className="section" style={{ background: 'var(--paper)' }}>
      <div className="container">
        <div className="section-head">
          <span className="num reveal">04 · ÁMBITOS</span>
          <div className="reveal d1">
            <h2>Dónde generamos<br /><em>el mayor impacto.</em></h2>
            <p className="intro">
              Las industrias donde operamos. Trabajamos con empresas medianas en cuatro
              categorías donde los procesos repetitivos son más costosos —y más fáciles de automatizar.
            </p>
          </div>
        </div>

        <div className="case">
          <div className="case-visual reveal">
            <CaseDiagram />
          </div>

          <div className="reveal d1">
            <div className="eyebrow" style={{ marginBottom: 12 }}>retail · distribución · servicios · manufactura ligera</div>
            <h3>Cuatro categorías, un mismo patrón: procesos repetitivos que cuestan tiempo y se pueden automatizar.</h3>
            <p>
              No vendemos una solución genérica. Cada proyecto se diseña sobre el proceso real
              de su empresa, pero las categorías donde ya tenemos experiencia previa son las
              que más rápido entregan resultados.
            </p>

            <div className="case-stats">
              <div className="case-stat">
                <div className="v">Retail</div>
                <div className="l">Reposición automática entre tiendas, conteo cíclico, alertas de quiebre.</div>
              </div>
              <div className="case-stat">
                <div className="v">Distribución</div>
                <div className="l">Sincronización de inventario, gestión de pedidos, ruteo de despachos.</div>
              </div>
              <div className="case-stat">
                <div className="v">Servicios</div>
                <div className="l">Agendamiento, cobranza, seguimiento de clientes y reportes en tiempo real.</div>
              </div>
              <div className="case-stat">
                <div className="v">Manufactura</div>
                <div className="l">Órdenes de producción, control de calidad, trazabilidad de lotes.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Team() {
  const members = [
    {
      initials: 'AG',
      name: 'Andrés Guzmán',
      role: 'Fundador & Director de Tecnología',
      bio: 'CTO en Ethereum Foundation. 10+ años de ingeniería distribuida a escala global.',
      tag: 'San José · Costa Rica',
      real: true,
    },
    {
      initials: '?',
      name: 'Experto WMS / Operaciones',
      role: 'Socio operativo',
      bio: 'Especialista en gestión de almacén, cadena de suministro y operaciones de CEDI. Por confirmar.',
      tag: 'Por confirmar',
      real: false,
    },
    {
      initials: '?',
      name: 'Desarrollador Frontend / Móvil',
      role: 'Ingeniería de producto',
      bio: 'Aplicaciones web y móviles. Interfaces que los equipos operativos usan sin capacitación. Por confirmar.',
      tag: 'Por confirmar',
      real: false,
    },
    {
      initials: '?',
      name: 'Desarrollador Backend / Integraciones',
      role: 'Arquitectura e integraciones',
      bio: 'APIs, ERP, bases de datos, automatizaciones. La infraestructura que conecta todo. Por confirmar.',
      tag: 'Por confirmar',
      real: false,
    },
  ];
  return (
    <section id="equipo" className="section" style={{ background: 'var(--paper)' }}>
      <div className="container">
        <div className="section-head">
          <span className="num reveal">05 · EQUIPO</span>
          <div className="reveal d1">
            <h2>Las personas<br /><em>detrás del trabajo.</em></h2>
            <p className="intro">
              Un equipo pequeño y especializado. Cada proyecto tiene al menos un ingeniero senior
              y un experto en el proceso de negocio que se va a automatizar.
            </p>
          </div>
        </div>

        <div className="team-grid reveal">
          {members.map((m, i) => (
            <div key={i} className={'team-card' + (m.real ? ' real' : ' placeholder')}>
              <div className="team-avatar">
                <span className="team-initials">{m.initials}</span>
              </div>
              <div className="team-info">
                <div className="team-name">{m.name}</div>
                <div className="team-role">{m.role}</div>
                <p className="team-bio">{m.bio}</p>
                <div className="team-tag">{m.tag}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Founder() {
  return (
    <section id="fundador" className="section container" style={{ paddingTop: '180px' }}>
      <div className="section-head">
        <span className="num reveal">06 · FUNDADOR</span>
        <div className="reveal d1">
          <h2>Atención de fundador.<br /><em>No de ejecutivo de cuenta.</em></h2>
        </div>
      </div>

      <div className="founder-grid founder">
        <div className="founder-portrait reveal">
          <span className="initials">A</span>
          <span className="ph-tag">Andrés Guzmán · fundador</span>
        </div>

        <div className="reveal d1">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Andrés Guzmán · fundador</div>
          <h3>Diez años construyendo software complejo,<br />ahora al servicio de empresas costarricenses.</h3>
          <p>
            Andrés es Director de Tecnología en la Ethereum Foundation, donde lidera un equipo
            de 32 ingenieros desarrollando infraestructura de privacidad a escala global. Altavia nace
            con la idea de traer ese rigor —diseño cuidadoso, ingeniería sólida, sin promesas
            vacías— al ecosistema de PYMES en Costa Rica.
          </p>
          <p>
            Diseñar para escala global te enseña exactamente qué necesita una empresa mediana
            —y qué no—. Las PYMES no necesitan arquitecturas de Silicon Valley; necesitan software
            que su equipo use desde el día uno, que se pueda medir, y que esté bien construido
            para durar sin depender de un solo proveedor.
          </p>
          <ul className="credential-list">
            <li>
              <span className="k">Hoy</span>
              <span className="v">Director de Tecnología, <em>Ethereum Foundation</em> (Suiza)</span>
            </li>
            <li>
              <span className="k">Antes</span>
              <span className="v">Senior Software Engineering Manager en Privacy &amp; Scaling Explorations</span>
            </li>
            <li>
              <span className="k">Experiencia</span>
              <span className="v">10+ años de desarrollo de sistemas distribuidos</span>
            </li>
            <li>
              <span className="k">Base</span>
              <span className="v">San José, Costa Rica</span>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta">
      <div className="container inner">
        <div className="eyebrow reveal" style={{ color: 'rgba(247,241,229,0.6)', marginBottom: 24 }}>
          /&nbsp;&nbsp;PRIMERA LLAMADA · 30 MINUTOS · SIN COSTO
        </div>
        <h2 className="reveal d1">
          ¿Hablamos<br /><em>de su proceso?</em>
        </h2>
        <p className="reveal d2">
          La primera conversación es de 30 minutos, sin costo y sin compromiso.
          Validamos si hay encaje y, si lo hay, le explicamos cómo sería el diagnóstico a fondo.
        </p>
        <div className="reveal d3" style={{ display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="https://wa.me/50688869436" className="btn btn-primary" target="_blank" rel="noreferrer">
            <WhatsAppIcon /> Escribir por WhatsApp
          </a>
          <a href="mailto:andres@altavia.cr" className="btn btn-ghost">
            andres@altavia.cr
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container row">
        <div>
          <div className="brand-mark">Altavia</div>
          <div className="meta" style={{ marginTop: 12 }}>San José · Costa Rica</div>
        </div>
        <div className="meta" style={{ display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center' }}>
          <a href="mailto:andres@altavia.cr">andres@altavia.cr</a>
          <a href="https://wa.me/50688869436">+506 8886 9436</a>
          <a href="https://linkedin.com/company/altavia-cr" target="_blank" rel="noreferrer">LinkedIn</a>
          <span>© 2026</span>
        </div>
      </div>
    </footer>
  );
}

function App() {
  useEffect(() => {
    document.documentElement.classList.add('js-reveal-ready');
    const els = document.querySelectorAll('.reveal');
    const reveal = (el) => {
      requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add('in')));
    };
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } });
    }, { threshold: 0.08, rootMargin: '0px 0px -32px 0px' });
    els.forEach((el) => io.observe(el));
    const t = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach((el) => reveal(el));
    }, 1500);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Problem />
      <Process />
      <Services />
      <CaseStudy />
      <Team />
      <Founder />
      <CTA />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);