/* sections.jsx — main page sections */

const { useState, useEffect, useRef } = React;

/* ============== Nav ============== */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <Logo />
      <ul>
        <li><a href="#agencia"><span className="num">01</span>Qué hacemos</a></li>
        <li><a href="#proceso"><span className="num">02</span>Proceso</a></li>
        <li><a href="#stack"><span className="num">03</span>Stack</a></li>
        <li><a href="#vision"><span className="num">04</span>Visión</a></li>
        <li><a href="#casos"><span className="num">05</span>Casos</a></li>
        <li><a href="#contacto"><span className="num">06</span>Contacto</a></li>
      </ul>
      <div className="actions">
        <a href="#contacto" className="btn primary">Laburemos juntos <Arrow /></a>
      </div>
    </nav>
  );
}

/* ============== Hero ============== */
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="grid-bg"></div>
      <div className="wrap hero-wrap" style={{ position: 'relative' }}>
        <div className="hero-left">
          <Eyebrow>Paid Media · Desarrollo creativo · Data</Eyebrow>
          <h1 className="display" style={{ marginTop: 24, fontSize: 'clamp(36px, 5vw, 76px)', whiteSpace: 'nowrap' }}>
            El puente del negocio<br />
            al marketing<br />
            <span className="hero-grow">digital.</span>
          </h1>
          <p className="hero-lede">
            Hacemos crecer tu negocio a través de Paid Media, desarrollo
            creativo y datos. Conectamos tu estrategia comercial con un plan
            de marketing ejecutable.
          </p>
          <div className="hero-cta">
            <a href="#contacto" className="btn primary">Empezá a crecer <Arrow /></a>
            <a href="#agencia" className="btn yellow-outline">Cómo trabajamos <ArrowDown /></a>
          </div>
          <div className="hero-stats">
            <div className="hero-stat">
              <div className="n">+30</div>
              <div className="l">Marcas activas</div>
            </div>
            <div className="hero-stat">
              <div className="n">5</div>
              <div className="l">Plataformas core</div>
            </div>
            <div className="hero-stat">
              <div className="n">24/7</div>
              <div className="l">Reporting hub</div>
            </div>
          </div>
        </div>
        <div className="hero-right">
          <ConnectionTriad />
        </div>
      </div>
      <div className="ticker">
        <div className="ticker-track">
          {[
            'काम', 'Travail', 'Lavoro', 'Работа', 'Praca',
            'Εργασία', 'Arbete', 'Work', '労働', 'Arbeit',
            'काम', 'Travail', 'Lavoro', 'Работа', 'Praca',
            'Εργασία', 'Arbete', 'Work', '労働', 'Arbeit',
          ].map((w, i) => (
            <span key={i} className="ticker-item"><span className="dot"></span>{w}</span>
          ))}
        </div>
      </div>
    </header>
  );
}

/* ============== Manifesto / what we do ============== */
function Agency() {
  return (
    <section className="section" id="agencia">
      <div className="wrap">
        <SectionHead
          num="01 / QUÉ HACEMOS"
          eyebrow="Lo que nos define"
          title={<>Diseñamos <em style={{ color: 'var(--lime)', fontStyle: 'normal' }}>ecosistemas de crecimiento.</em></>}
          sub="Plasmamos la estrategia comercial del cliente en un plan de marketing ejecutable. Operamos en la intersección negocio ↔ performance."
        />
        <div className="pillars">
          <div className="pillar">
            <div className="head">
              <div className="num">01</div>
              <div className="pulse-dot"><span></span></div>
            </div>
            <h3>Datos</h3>
            <p>Centralizamos Meta, Google, GA4, TikTok y MELI en un solo panel de inversión y resultados.</p>
            <ul className="pillar-points">
              <li>Conexión de píxeles, tags y CRMs</li>
              <li>Dashboards de reporting en tiempo real</li>
              <li>Atribución y unificación de fuentes</li>
            </ul>
            <div className="pillar-arrow"><Arrow /></div>
          </div>
          <div className="pillar">
            <div className="head">
              <div className="num">02</div>
              <div className="pulse-dot"><span></span></div>
            </div>
            <h3>Medios</h3>
            <p>Planes con proyección de KPIs, taxonomía propia y dimensión de universos. Decisiones basadas en evidencia.</p>
            <ul className="pillar-points">
              <li>Planning multi-plataforma</li>
              <li>Seteo de audiencias y universos</li>
              <li>Optimización continua y tests A/B</li>
            </ul>
            <div className="pillar-arrow"><Arrow /></div>
          </div>
          <div className="pillar">
            <div className="head">
              <div className="num">03</div>
              <div className="pulse-dot"><span></span></div>
            </div>
            <h3>Creatividad</h3>
            <p>Toolkits digitales con cantidad y formato necesarios para cada plataforma y objetivo de campaña.</p>
            <ul className="pillar-points">
              <li>Producción nativa por canal</li>
              <li>Toolkits adaptados por objetivo</li>
              <li>Variantes para tests creativos</li>
            </ul>
            <div className="pillar-arrow"><Arrow /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Vision — Best place to grow ============== */
function Vision() {
  return (
    <section className="section vision" id="vision">
      <div className="grid-bg"></div>
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="vision-grid">
          <div className="vision-lead">
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: '0.1em', color: 'var(--bone-mute)', marginBottom: 16 }}>04 / VISIÓN</div>
            <Eyebrow>Nuestra visión</Eyebrow>
            <h2 className="vision-title">
              Best place<br />
              to <span className="hero-grow">grow.</span>
            </h2>
            <p className="vision-lede">
              Crecer no es solo un resultado de negocio: es la cultura con la
              que trabajamos. Por eso construimos el mejor lugar para crecer —
              de los dos lados del equipo.
            </p>
          </div>
          <div className="vision-cards">
            <article className="vision-card">
              <div className="vision-card-head">
                <span className="vision-card-num">01</span>
                <span className="mono">Para nuestros clientes</span>
              </div>
              <h3>Crecimiento de negocio</h3>
              <p>
                Más y mejores resultados: leads que se transforman en clientes,
                inversión que se optimiza y un plan que conecta marketing con
                la estrategia comercial.
              </p>
            </article>
            <article className="vision-card">
              <div className="vision-card-head">
                <span className="vision-card-num">02</span>
                <span className="mono">Para el equipo laburo</span>
              </div>
              <h3>Crecimiento profesional</h3>
              <p>
                Un lugar donde desarrollarse, aprender y trabajar con
                herramientas de primer nivel. La gente que crece hace crecer a
                las marcas que confían en nosotros.
              </p>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Process ============== */
function Process() {
  const phases = [
    {
      when: 'SEMANA 1—2',
      title: 'Onboarding técnico',
      sub: 'Setup operativo y conexiones de medición.',
      items: [
        'Auditoría operativa de canales digitales',
        'Briefing de cuenta y portfolios comerciales',
        'Conexiones de activos: WhatsApp, Fanpages, CRM, Sitio',
        'Creación de píxeles, tags y dashboards de reporting',
      ],
    },
    {
      when: 'SEMANA 3—4',
      title: 'Ready, set, grow.',
      sub: 'Strategy + media plan + ejecución.',
      items: [
        'Business & Marketing Strategy',
        'Plan de medios con proyección de KPIs',
        'Seteo de audiencias y universos de planificación',
        'Taxonomía de campañas + aprobación + go live',
      ],
    },
    {
      when: 'ONGOING',
      title: 'Optimización continua',
      sub: 'Ciclo de mejora mes a mes.',
      items: [
        'Optimización diaria de campañas',
        'Reporting mensual + insights accionables',
        'Tests A/B y nuevas oportunidades de escala',
        'Capacitación de equipos del cliente',
      ],
    },
  ];
  return (
    <section className="section" id="proceso" style={{ background: 'var(--ink-2)' }}>
      <div className="wrap">
        <SectionHead
          num="02 / PROCESO"
          eyebrow="Nuestro proceso de laburo"
          title={<>Procesos ágiles, en búsqueda de la <em style={{ color: 'var(--lime)', fontStyle: 'normal' }}>optimización de resultados.</em></>}
          sub="Tres fases: onboarding técnico, lanzamiento, mejora continua. Sin sorpresas."
        />
        <div className="process">
          {phases.map((p, i) => (
            <div className="phase" key={i}>
              <div className="when">
                <span className="when-dot"></span>
                {p.when}
              </div>
              <div>
                <div className="title">
                  {p.title}
                  <small>{p.sub}</small>
                </div>
              </div>
              <ul>
                {p.items.map((it, j) => <li key={j}>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== Stack ============== */
function Stack() {
  const cards = [
    {
      label: 'DATA HUB',
      title: 'Centraliza y automatiza',
      desc: 'Conecta Meta, Google, GA4, TikTok, MELI y más en un solo panel.',
      platforms: ['Detrics', 'Meta', 'Google', 'MELI'],
    },
    {
      label: 'PAID MEDIA',
      title: 'Operación de campañas',
      desc: 'Ejecución multi-plataforma con mejores prácticas nativas y seteos optimizados.',
      platforms: ['Meta', 'Google', 'TikTok', 'Pinterest'],
    },
    {
      label: 'ANALYTICS & DATA',
      title: 'Dashboards y reporting',
      desc: 'Visibilidad en tiempo real. Cada stakeholder ve lo que necesita ver.',
      platforms: ['GA4', 'Looker', 'Detrics'],
    },
    {
      label: 'AI / AUTOMATION',
      title: 'Optimización inteligente',
      desc: 'Agentes de IA y automatizaciones que liberan tiempo para pensar.',
      platforms: ['Claude', 'DV360', 'GA4'],
    },
  ];
  return (
    <section className="section" id="stack">
      <div className="wrap">
        <SectionHead
          num="03 / STACK"
          eyebrow="Herramientas de laburo"
          title={<>Stack que asegura <em style={{ color: 'var(--lime)', fontStyle: 'normal' }}>implementación correcta</em>, optimización y visibilidad.</>}
          sub="Tecnología propia + best-in-class, integradas para que la operación no sea el cuello de botella."
        />
        <div className="stack">
          {cards.map((c, i) => (
            <div className="stack-card" key={i}>
              <div className="stack-card-head">
                <span className="label">{c.label}</span>
                <span className="mono" style={{ color: 'var(--bone-mute)' }}>0{i + 1}</span>
              </div>
              <h4>{c.title}</h4>
              <p>{c.desc}</p>
              <div className="platforms-row">
                {c.platforms.map((p, j) => <PlatformMark key={j} name={p} />)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== Credit lines ============== */
function CreditLines() {
  const items = [
    { t: 'Sin cortes de campaña', d: 'Evitás límites de tarjetas que frenan la inversión. Crédito continuo sin interrupciones.' },
    { t: 'Menores costos impositivos', d: 'Sin Impuesto País ni anticipo de ganancias en plataformas internacionales.' },
    { t: 'Una sola factura', d: 'Pago consolidado por transferencia. Sin múltiples pagos, límites o rechazos.' },
    { t: 'Cuentas locales y regionales', d: 'Líneas de crédito a nivel local y para campañas en toda LATAM.' },
    { t: 'Multi-plataforma', d: 'Meta, Google Ads, DV360, TikTok y Pinterest desde un único punto.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--ink-2)' }}>
      <div className="wrap">
        <div className="split">
          <div>
            <Eyebrow>Servicios financieros</Eyebrow>
            <h2 className="h1" style={{ marginTop: 20, marginBottom: 20 }}>
              Líneas de crédito para una <em style={{ color: 'var(--lime)', fontStyle: 'normal' }}>pauta sin fricciones.</em>
            </h2>
            <p className="body-l" style={{ color: 'var(--bone-mute)', maxWidth: 520 }}>
              Acceso directo a plataformas con facturación simplificada. Sin
              interrupciones por tope de tarjeta, sin Impuesto País, una sola
              factura.
            </p>
            <div className="platforms">
              <span className="p">Meta Ads</span>
              <span className="p">Google Ads</span>
              <span className="p">DV360</span>
              <span className="p">TikTok</span>
              <span className="p">Pinterest</span>
            </div>
          </div>
          <ul className="checklist">
            {items.map((it, i) => (
              <li key={i}>
                <span className="n">0{i + 1}</span>
                <div className="text">
                  <strong>{it.t}</strong>
                  <span>{it.d}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Agency, Vision, Process, Stack, CreditLines });