// =========== GENLOOPIA — sections ===========
const { useState, useEffect, useRef } = React;
const I = window.Icons;

// ---------------- NAV ----------------
function Nav({ tweaks }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
  ["Servicios", "#servicios"],
  ["IA", "#ia"],
  ["Proceso", "#proceso"],
  ["Trabajos", "#trabajos"],
  ["Nosotros", "#nosotros"],
  ["Contacto", "#contacto"]];

  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <a href="#top" className="nav-logo" aria-label="GENLOOPIA - Inicio">
          <picture>
            <source srcSet="assets/genloopia-logo.webp" type="image/webp"/>
            <img src="assets/genloopia-logo.png" alt="GENLOOPIA - Agencia digital de alto impacto" width="143" height="40" loading="eager" decoding="async"/>
          </picture>
        </a>
        <div className="nav-links">
          {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
        </div>
        <div className="nav-cta">
          <a href="https://wa.me/573015231712?text=Hola%20GENLOOPIA%20%F0%9F%91%8B%20Los%20contacto%20desde%20su%20sitio%20web." target="_blank" rel="noopener" className="btn btn-primary btn-sm">
            Hablemos <span className="arrow">→</span>
          </a>
          <button className="nav-burger" onClick={() => setOpen(true)} aria-label="Abrir menú"><I.Menu /></button>
        </div>
      </nav>
      <div className={`mobile-menu ${open ? "open" : ""}`}>
        <button className="nav-burger" style={{ position: "absolute", top: 24, right: 24 }} onClick={() => setOpen(false)} aria-label="Cerrar"><I.Close /></button>
        {links.map(([l, h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{l}</a>)}
        <a href="https://wa.me/573015231712?text=Hola%20GENLOOPIA%20%F0%9F%91%8B%20Los%20contacto%20desde%20su%20sitio%20web." target="_blank" rel="noopener" onClick={() => setOpen(false)} className="btn btn-primary" style={{ marginTop: 18 }}>Hablemos →</a>
      </div>
    </>);

}

// ---------------- HERO ----------------
function Hero({ tweaks }) {
  return (
    <section className="hero" id="top">
      <div className="hero-orb" aria-hidden="true"><HeroOrb /></div>
      <div className="container hero-inner">
        <span className="eyebrow reveal"><span className="dot" /> AGENCIA DIGITAL ·</span>
        <h1 className="h-display reveal" data-delay="1" style={{ marginTop: 24 }}>
          {tweaks.headlineVariant === "loop" ?
          <>Donde tu marca <br /><span className="gradient-text">entra al loop</span><br />del crecimiento.</> :
          tweaks.headlineVariant === "future" ?
          <>El digital del<br />futuro,<br /><span className="gradient-text">construido hoy.</span></> :

          <>Construimos lo<br />digital que <span className="gradient-text">mueve</span><br />tu negocio.</>
          }
        </h1>
        <p className="lede reveal" data-delay="2">
          GENLOOPIA es la agencia que combina diseño impecable, desarrollo serio y automatización con IA para que tu marca crezca sin frenos. Desde Sabaneta para todo el mundo.
        </p>
        <div className="hero-actions reveal" data-delay="3">
          <a href="https://wa.me/573015231712?text=Hola%20GENLOOPIA%20%F0%9F%91%8B%20Los%20contacto%20desde%20su%20sitio%20web." target="_blank" rel="noopener" className="btn btn-primary">Hablemos de tu proyecto <span className="arrow">→</span></a>
          <a href="#trabajos" className="btn btn-ghost">Ver trabajos</a>
        </div>
        <div className="hero-stats reveal" data-delay="4">
          <div className="hero-stat"><div className="num">+120</div><div className="lbl">Proyectos lanzados</div></div>
          <div className="hero-stat"><div className="num">6.4×</div><div className="lbl">ROAS promedio</div></div>
          <div className="hero-stat"><div className="num">98%</div><div className="lbl">Clientes recurrentes</div></div>
          <div className="hero-stat"><div className="num">24/7</div><div className="lbl">Soporte real</div></div>
        </div>
      </div>
    </section>);

}

// ---------------- CRED MARQUEE ----------------
function CredStrip() {
  const items = [
  "Next.js", "React", "Shopify", "WordPress", "Webflow",
  "OpenAI", "n8n", "Supabase", "Stripe", "Meta Ads",
  "Google Ads", "HubSpot", "Tailwind", "Figma", "Vercel"];

  const row = [...items, ...items];
  return (
    <div className="cred">
      <div className="marquee">
        {row.map((x, i) =>
        <span key={i} className="marquee-item"><span className="pip" />{x}</span>
        )}
      </div>
    </div>);

}

// ---------------- SERVICES ----------------
function Services() {
  const list = [
  { icon: <I.Web />, t: "Páginas web", d: "Sitios corporativos rápidos, optimizados para SEO y construidos para escalar contigo. Sin plantillas genéricas." },
  { icon: <I.Cart />, t: "E-commerce", d: "Tiendas online en Shopify, WooCommerce o headless. Diseño que vende y un checkout que no pierde clientes." },
  { icon: <I.Rocket />, t: "Landing pages", d: "Landings de alta conversión para campañas, lanzamientos y embudos. Cada elemento está pensado para convertir." },
  { icon: <I.Mobile />, t: "Apps móviles & web", d: "Aplicaciones nativas y web apps con UX de primer mundo. iOS, Android y PWA con backend serio." },
  { icon: <I.Megaphone />, t: "Marketing digital", d: "Performance ads, SEO técnico y contenido que mueve la aguja. Métricas claras, no humo." },
  { icon: <I.Cpu />, t: "Automatización con IA", d: "Agentes, flujos y bots a la medida que ahorran horas de trabajo y multiplican tu capacidad operativa.", feat: true }];

  return (
    <section className="section" id="servicios">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow"><span className="dot" /> 01 / SERVICIOS</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Todo lo que tu marca<br />necesita para crecer.</h2>
          </div>
          <div className="right">
            <p className="text-muted">Un solo equipo, un solo idioma, resultados medibles. Combinamos diseño, código y automatización para que tu operación digital deje de ser un dolor de cabeza.</p>
          </div>
        </div>
        <div className="services-grid">
          {list.map((s, i) =>
          <div key={i} className={`card service ${s.feat ? "feat" : ""} reveal`} data-delay={Math.min(i, 5)}>
              <div className="icon-wrap">{s.icon}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <span className="more">Saber más <I.ArrowUp /></span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------------- AI HIGHLIGHT ----------------
function AISection() {
  const bullets = [
  ["Agentes de ventas 24/7", "Atienden, califican y agendan reuniones mientras tu equipo duerme."],
  ["Automatización de operaciones", "Conectamos tus apps (CRM, correos, hojas, WhatsApp) en flujos autónomos."],
  ["Asistentes internos", "Bots entrenados con tu propia data para responder a tu equipo en segundos."],
  ["Reportes que se escriben solos", "Dashboards y resúmenes ejecutivos generados por IA, listos cada lunes."]];

  return (
    <section className="section ai-section" id="ia">
      <div className="container">
        <div className="ai-card reveal">
          <div className="ai-content">
            <span className="eyebrow"><span className="dot" /> 02 / NUESTRO DIFERENCIADOR</span>
            <h2 className="h-section">Automatización con IA<br /><span className="gradient-text">que sí mueve la aguja.</span></h2>
            <p className="lede" style={{ marginTop: 18 }}>No vendemos hype. Construimos sistemas que automatizan tareas reales, ahorran tiempo de tu equipo y desbloquean crecimiento. Cada solución se entrena con tu contexto y se integra a tus herramientas actuales.</p>
            <div className="ai-bullets">
              {bullets.map(([t, d], i) =>
              <div className="ai-bullet" key={i}>
                  <div className="check"><I.Check /></div>
                  <div><b>{t}.</b> <span>{d}</span></div>
                </div>
              )}
            </div>
            <div style={{ marginTop: 32 }}>
              <a href="#contacto" className="btn btn-primary">Quiero automatizar mi negocio <span className="arrow">→</span></a>
            </div>
          </div>
          <div className="ai-visual"><NeuralDiagram /></div>
        </div>
      </div>
    </section>);

}

// ---------------- PROCESS ----------------
function Process() {
  const steps = [
  { n: "01", t: "Descubrimiento", d: "Entendemos tu negocio, tus números y tu cliente. Ningún proyecto arranca sin contexto real.", meta: "1 semana" },
  { n: "02", t: "Estrategia & propuesta", d: "Definimos alcance, métricas y roadmap. Te entregamos un plan claro, sin letra pequeña.", meta: "3-5 días" },
  { n: "03", t: "Diseño UX/UI", d: "Wireframes, sistema visual y prototipos navegables. Iteramos contigo hasta el clic perfecto.", meta: "2-3 semanas" },
  { n: "04", t: "Desarrollo & IA", d: "Construimos rápido pero serio. Código limpio, automatizaciones probadas, integraciones que aguantan.", meta: "3-6 semanas" },
  { n: "05", t: "Lanzamiento", d: "QA, performance, SEO y analítica. Salimos al aire con todo medido desde el día uno.", meta: "1 semana" },
  { n: "06", t: "Crecimiento continuo", d: "Optimizamos con datos, lanzamos experimentos y escalamos lo que sí funciona. Mes a mes.", meta: "Always-on" }];

  return (
    <section className="section" id="proceso">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow"><span className="dot" /> 03 / PROCESO</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Así trabajamos.<br />Sin ruido. Sin sorpresas.</h2>
          </div>
          <div className="right">
            <p className="text-muted">Un método probado en más de 120 proyectos. Iteramos rápido, comunicamos claro y entregamos lo que prometimos en el tiempo que prometimos.</p>
          </div>
        </div>
        <div className="process-list">
          {steps.map((s, i) =>
          <div className="process-step reveal" key={s.n} data-delay={Math.min(i, 5)}>
              <div className="num">{s.n}</div>
              <div className="body">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
              <div className="meta">{s.meta}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------------- WORK ----------------
function Work() {
  const items = [
  { cls: "work-a", kind: "ecom", tag: "E-COMMERCE · MODA", title: "Velora — Boutique online" },
  { cls: "work-b", kind: "land", tag: "LANDING · FINTECH", title: "PagoPro" },
  { cls: "work-c", kind: "ai", tag: "AUTOMATIZACIÓN", title: "Agente de ventas Nyra" },
  { cls: "work-d", kind: "app", tag: "APP · LOGÍSTICA", title: "Rutas Andinas" },
  { cls: "work-e", kind: "mkt", tag: "PERFORMANCE", title: "Campaña Q3 — Volta" }];

  return (
    <section className="section" id="trabajos">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow"><span className="dot" /> 04 / TRABAJOS</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Casos donde el<br />diseño pagó cuentas.</h2>
          </div>
          <div className="right">
            <p className="text-muted">Una muestra de proyectos recientes. Más números, mejores marcas y equipos felices que confiaron en nuestro proceso.</p>
          </div>
        </div>
        <div className="work-grid">
          {items.map((w, i) =>
          <a href="#contacto" key={i} className={`work ${w.cls} reveal`} data-delay={Math.min(i, 5)}>
              <div className="visual"><WorkVisual kind={w.kind} /></div>
              <div className="meta">
                <div>
                  <div className="tag">{w.tag}</div>
                  <h3>{w.title}</h3>
                </div>
                <div className="arrow"><I.ArrowUp /></div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ---------------- ABOUT ----------------
function About() {
  const values = [
  { i: <I.Zap />, t: "Velocidad real", d: "Entregamos rápido sin sacrificar calidad. Iteración corta, decisiones claras." },
  { i: <I.Shield />, t: "Cero humo", d: "Métricas, no promesas. Te decimos qué funciona y qué no, en tu idioma." },
  { i: <I.Eye />, t: "Visión 360°", d: "Diseño + código + ads + IA. Un solo equipo cubriendo toda la cadena digital." },
  { i: <I.Heart />, t: "Equipo cercano", d: "Trato directo con quienes hacen el trabajo. WhatsApp abierto, slack incluido." }];

  return (
    <section className="section" id="nosotros">
      <div className="container">
        <div className="about-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" /> 05 / NOSOTROS</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Una agencia que <span className="gradient-text">juega en otra liga.</span></h2>
            <p className="lede" style={{ marginTop: 18 }}>
              Nacimos en Sabaneta, Antioquia, con una idea simple y una obsesión: construir productos digitales que se sientan del primer mundo y que muevan el negocio de nuestros clientes en serio. Diseñadores, desarrolladores e ingenieros de IA trabajando como un solo equipo.
            </p>
            <p className="lede" style={{ marginTop: 14 }}>
              Creemos que la mejor tecnología es la que desaparece: la que tu cliente disfruta sin notarla y la que tu equipo usa sin pelear con ella. Eso es lo que construimos, todos los días.
            </p>
            <div className="values">
              {values.map((v, i) =>
              <div className="value reveal" key={i} data-delay={Math.min(i, 4)}>
                  <div className="vi">{v.i}</div>
                  <h4>{v.t}</h4>
                  <p>{v.d}</p>
                </div>
              )}
            </div>
          </div>
          <div className="about-pic reveal" data-delay="2">
            <div className="ring"><AboutRing /></div>
            <div className="about-pic-tag">
              <span>// HQ — SABANETA, CO</span>
              <span>EST. 2021</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------- TESTIMONIOS ----------------
function Testimonials() {
  const tests = [
  { q: "En tres meses pasamos de una landing tibia a una máquina de leads. El equipo de GENLOOPIA entendió el negocio mejor que nosotros mismos.", n: "Mariana López", r: "CEO, Velora", a: "ML" },
  { q: "El agente de IA que nos montaron responde el 70% de los chats de soporte. Mi equipo recuperó horas de trabajo cada día.", n: "Carlos Restrepo", r: "Fundador, PagoPro", a: "CR" },
  { q: "Diseño impecable, código serio y ads que sí pagan. Llevamos dos años trabajando juntos y no me imagino crecer con otros.", n: "Sofía Mejía", r: "CMO, Volta", a: "SM" }];

  const metrics = [
  ["+312%", "Ventas promedio post-launch"],
  ["6.4×", "ROAS en campañas pagadas"],
  ["−68%", "Tiempo en tareas repetitivas con IA"],
  ["98%", "Clientes que renuevan con nosotros"]];

  return (
    <section className="section" id="resultados">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow"><span className="dot" /> 06 / RESULTADOS</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Lo que dicen<br />nuestros clientes.</h2>
          </div>
          <div className="right">
            <p className="text-muted">Marcas que confiaron, equipos que crecieron y números que hablan por sí solos. Estos son resultados reales, no slides bonitas.</p>
          </div>
        </div>
        <div className="test-grid">
          {tests.map((t, i) =>
          <div className="test reveal" key={i} data-delay={Math.min(i, 3)}>
              <p className="quote">{t.q}</p>
              <div className="who">
                <div className="avatar">{t.a}</div>
                <div>
                  <div className="name">{t.n}</div>
                  <div className="role">{t.r}</div>
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="metrics-row">
          {metrics.map(([n, l], i) =>
          <div className="metric reveal" key={i} data-delay={Math.min(i, 4)}>
              <div className="num">{n}</div>
              <div className="lbl">{l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------------- FINAL CTA ----------------
function FinalCTA() {
  return (
    <section className="cta-final" id="contacto">
      <div className="container">
        <span className="eyebrow reveal"><span className="dot" /> 07 / EMPECEMOS</span>
        <h2 className="reveal" data-delay="1" style={{ marginTop: 24 }}>
          ¿Listo para entrar<br /><span className="gradient-text">al loop?</span>
        </h2>
        <p className="lede reveal" data-delay="2" style={{ margin: "24px auto 0", color: "var(--ink-1)" }}>
          Cuéntanos qué quieres construir. Te respondemos en menos de 24 horas con una propuesta clara, plazos reales y precios sin asteriscos.
        </p>
        <div className="actions reveal" data-delay="3">
          <a href="https://wa.me/573015231712?text=Hola%20GENLOOPIA%20%F0%9F%91%8B%20Los%20contacto%20desde%20su%20sitio%20web." target="_blank" rel="noopener" className="btn btn-primary">Hablemos de tu proyecto <span className="arrow">→</span></a>
          <a href="https://wa.me/573015231712?text=Hola%20GENLOOPIA%20%F0%9F%91%8B%20Los%20contacto%20desde%20su%20sitio%20web." target="_blank" rel="noopener" className="btn btn-ghost">Escribir por WhatsApp</a>
        </div>
        <div className="channels reveal" data-delay="4">
          <a href="https://wa.me/573015231712?text=Hola%20GENLOOPIA%20%F0%9F%91%8B%20Los%20contacto%20desde%20su%20sitio%20web." target="_blank" rel="noopener"><I.Phone /> &nbsp;+57 301 523 1712</a>
          <span><I.Pin /> &nbsp;Sabaneta, Antioquia · CO</span>
          <a href="https://genloopia.com"><I.Globe /> &nbsp;genloopia.com</a>
        </div>
      </div>
    </section>);

}

// ---------------- FOOTER ----------------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <picture>
              <source srcSet="assets/genloopia-logo.webp" type="image/webp"/>
              <img src="assets/genloopia-logo.png" alt="Logo GENLOOPIA — agencia digital en Sabaneta, Colombia" width="157" height="44" loading="lazy" decoding="async"/>
            </picture>
            <p>Agencia digital de alto impacto. Diseño, desarrollo, marketing y automatización con IA.</p>
            <div className="footer-socials">
              <a href="#" aria-label="Instagram"><I.IG /></a>
              <a href="#" aria-label="LinkedIn"><I.LN /></a>
              <a href="#" aria-label="X"><I.X /></a>
              <a href="#" aria-label="TikTok"><I.TT /></a>
            </div>
          </div>
          <div>
            <h5>Servicios</h5>
            <ul>
              <li><a href="#servicios">Páginas web</a></li>
              <li><a href="#servicios">E-commerce</a></li>
              <li><a href="#servicios">Landing pages</a></li>
              <li><a href="#servicios">Apps</a></li>
              <li><a href="#servicios">Marketing digital</a></li>
              <li><a href="#ia">Automatización IA</a></li>
            </ul>
          </div>
          <div>
            <h5>Agencia</h5>
            <ul>
              <li><a href="#nosotros">Nosotros</a></li>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#trabajos">Trabajos</a></li>
              <li><a href="#resultados">Resultados</a></li>
              <li><a href="#contacto">Contacto</a></li>
            </ul>
          </div>
          <div>
            <h5>Contacto</h5>
            <ul>
              <li><a href="https://wa.me/573015231712?text=Hola%20GENLOOPIA%20%F0%9F%91%8B%20Los%20contacto%20desde%20su%20sitio%20web." target="_blank" rel="noopener">+57 301 523 1712</a></li>
              <li><a href="mailto:info@genloopia.com">info@genloopia.com</a></li>
              <li>COLOMBIA
Sabaneta Antioquia </li>
              <li><a href="https://genloopia.com">genloopia.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} GENLOOPIA · Todos los derechos reservados</span>
          <span>TIENES UNA IDEA? NOSOTROS LA HACEMOS REALIDAD</span>
        </div>
      </div>
    </footer>);
}

window.GLSections = { Nav, Hero, CredStrip, Services, AISection, Process, Work, About, Testimonials, FinalCTA, Footer };