/* Reusable atoms + section helpers */

const Eyebrow = ({ children, gradient = false }) => (
  <div className={"font-mono " + (gradient ? "text-grad" : "")}
       style={{ fontSize: 12, color: gradient ? undefined : 'var(--cyan)' }}>
    {children}
  </div>
);

const Badge = ({ children }) => (
  <span className="inline-block font-mono rounded-full"
        style={{ background: 'rgba(107,92,255,0.15)', color: '#9C8FFF', padding: '6px 12px', fontSize: 11 }}>
    {children}
  </span>
);

const SectionHeader = ({ eyebrow, gradEyebrow, title, sub, maxW = 800 }) => (
  <div className="mx-auto text-center reveal" style={{ maxWidth: maxW, marginBottom: 'clamp(48px, 6vw, 80px)' }}>
    {eyebrow && <Eyebrow gradient={gradEyebrow}>{eyebrow}</Eyebrow>}
    <h2 className="font-display text-fg mt-4"
        style={{ fontSize: 'clamp(32px, 4vw, 56px)', fontWeight: 600, textWrap: 'balance' }}>{title}</h2>
    {sub && <p className="mt-5 mx-auto" style={{ color: 'var(--muted)', maxWidth: 640, textWrap: 'pretty' }}>{sub}</p>}
  </div>
);

/* ───── 02 · MANIFIESTO ───── */
const Manifiesto = () => (
  <section id="manifiesto" className="relative py-section sec-glow">
    <div className="container-x relative">
      <div className="mx-auto text-center" style={{ maxWidth: 900 }}>
        <div className="reveal"><Eyebrow>/ MANIFIESTO</Eyebrow></div>
        <h2 className="font-display text-fg mt-5 reveal"
            style={{ fontSize: 'clamp(32px, 4vw, 56px)', fontWeight: 600, textWrap: 'balance' }}>
          La mayoría usa IA.<br />
          <span className="text-grad">Muy pocos la entienden.</span>
        </h2>

        <p className="mt-8 mx-auto reveal" style={{ color: 'var(--muted)', maxWidth: 720, textWrap: 'pretty' }}>
          El mundo cambió. Hoy muchos generan textos, imágenes o automatizaciones simples — pero el verdadero potencial está mucho más arriba. La IA puede ayudarte a decidir mejor, vender mejor, liderar mejor y escalar con claridad. El problema es que casi todos la usan en superficie, sin método y sin estrategia.
        </p>

        <figure className="mt-16 reveal">
          <div className="mx-auto" style={{ maxWidth: 80, height: 1, background: 'linear-gradient(90deg, transparent, rgba(46,196,241,0.6), transparent)' }} />
          <blockquote className="font-display italic text-grad mt-8 mx-auto"
                      style={{ fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 500, lineHeight: 1.15, maxWidth: 880 }}>
            “El futuro no será liderado por quienes solo consumen tecnología, sino por quienes aprenden a pensar y operar con ella.”
          </blockquote>
          <figcaption className="font-mono mt-6" style={{ color: 'var(--muted)', fontSize: 11 }}>
            — ECOOIA / Manifiesto fundacional
          </figcaption>
        </figure>
      </div>
    </div>
  </section>
);

/* ───── 03 · 4 PILARES ───── */
const Pilares = () => {
  const cards = [
    { badge: 'EDUCACIÓN', idx: '/ 01', title: 'Aprende a pensar con Inteligencia Artificial.',
      bullets: ['Programas y masterclasses', 'Aprendizaje aplicado'] },
    { badge: 'POWER SKILLS', idx: '/ 02', title: 'Desarrolla habilidades humanas de alto valor.',
      bullets: ['Liderazgo y criterio', 'Comunicación estratégica'] },
    { badge: 'INFRAESTRUCTURA COGNITIVA', idx: '/ 03', title: 'Convierte conocimiento en sistemas inteligentes.',
      bullets: ['Core Cognitivo', 'Agentes Cognitivos'] },
    { badge: 'EXPERIENCIAS', idx: '/ 04', title: 'Conecta con la nueva economía global.',
      bullets: ['Eventos y networking', 'Viajes de negocio'] },
  ];
  return (
    <section id="programas" className="relative py-section">
      <div className="container-x">
        <SectionHeader eyebrow="/ SOLUCIÓN"
          title={<>Educación, inteligencia y sistemas para la <span className="text-grad">nueva era del trabajo.</span></>}
          sub="Cuatro frentes, una misma arquitectura. Cada pilar opera por sí solo y se compone con los demás según tu momento estratégico." />

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {cards.map((c, i) => (
            <article key={c.idx}
              className="card-glow group relative flex flex-col rounded-2xl reveal"
              style={{
                background: '#102A43', border: '1px solid var(--border)',
                padding: 'clamp(24px, 2vw, 36px)', minHeight: 340,
                transitionDelay: (i*60) + 'ms',
              }}>
              <div className="flex items-start justify-between gap-3">
                <Badge>{c.badge}</Badge>
                <span className="font-mono" style={{ color: 'var(--muted)', fontSize: 12 }}>{c.idx}</span>
              </div>
              <div className="flex-grow" />
              <h3 className="font-display text-fg mt-12"
                  style={{ fontSize: 'clamp(20px, 1.6vw, 24px)', fontWeight: 600, textWrap: 'balance' }}>
                {c.title}
              </h3>
              <ul className="mt-5 space-y-2">
                {c.bullets.map(b => (
                  <li key={b} className="flex items-start gap-2.5" style={{ color: 'var(--muted)', fontSize: 14 }}>
                    <span className="inline-block rounded-full mt-2" style={{ width: 5, height: 5, background: '#2EC4F1', boxShadow: '0 0 8px rgba(46,196,241,0.6)' }} />
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <a href="#" className="mt-6 inline-flex items-center gap-2 font-mono opacity-0 group-hover:opacity-100 transition"
                 style={{ color: '#2EC4F1', fontSize: 11 }}>
                SABER MÁS <IconArrow size={14} />
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───── 05 · MÉTODO timeline ───── */
const Metodo = () => {
  const nodes = [
    { n: '01', label: 'ENTENDER',    bullets: ['Qué cambia', 'Dónde están las oportunidades'] },
    { n: '02', label: 'APLICAR',     bullets: ['Casos reales', 'Ventas, marketing, decisiones'] },
    { n: '03', label: 'ESTRUCTURAR', bullets: ['Criterios reutilizables', 'Procesos como activos'] },
    { n: '04', label: 'INTEGRAR',    bullets: ['IA conectada a tu operación', 'Forma de trabajar amplificada'] },
    { n: '05', label: 'ESCALAR',     bullets: ['Sistemas autónomos', 'Agentes Cognitivos'] },
  ];

  return (
    <section id="metodo" className="relative py-section sec-glow">
      <div className="container-x relative">
        <SectionHeader eyebrow="/ MÉTODO"
          title={<>De la comprensión a <span className="text-grad">la implementación.</span></>}
          sub="Un método para llevarte del aprendizaje inicial a una empresa que opera con inteligencia." />

        {/* Desktop horizontal */}
        <div className="hidden lg:block relative">
          <div className="absolute left-0 right-0 shimmer-line"
               style={{ top: 27, height: 2, opacity: 0.7 }} />
          <div className="grid grid-cols-5 gap-6 relative">
            {nodes.map((n, i) => (
              <div key={n.n} className="reveal" style={{ transitionDelay: (i*80) + 'ms' }}>
                <div className="relative mx-auto rounded-full border-grad-2 flex items-center justify-center"
                     style={{ width: 56, height: 56, background: '#0A0A0A' }}>
                  <span className="font-display" style={{ fontSize: 20, fontWeight: 600, color: '#2EC4F1' }}>{n.n}</span>
                </div>
                <div className="font-mono mt-5 text-center" style={{ color: 'var(--cyan)', fontSize: 11 }}>
                  {n.n} · {n.label}
                </div>
                <ul className="mt-3 space-y-1.5 text-center" style={{ color: 'var(--muted)', fontSize: 13.5 }}>
                  {n.bullets.map(b => <li key={b}>{b}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Mobile vertical */}
        <div className="lg:hidden relative pl-10">
          <div className="absolute left-[27px] top-0 bottom-0 w-[2px] shimmer-line opacity-70" />
          <ol className="space-y-10">
            {nodes.map((n) => (
              <li key={n.n} className="reveal relative">
                <div className="absolute -left-10 top-0 rounded-full border-grad-2 flex items-center justify-center"
                     style={{ width: 56, height: 56, background: '#0A0A0A' }}>
                  <span className="font-display" style={{ fontSize: 20, fontWeight: 600, color: '#2EC4F1' }}>{n.n}</span>
                </div>
                <div className="font-mono pt-3.5" style={{ color: 'var(--cyan)', fontSize: 11 }}>
                  {n.n} · {n.label}
                </div>
                <ul className="mt-2 space-y-1" style={{ color: 'var(--muted)', fontSize: 14 }}>
                  {n.bullets.map(b => <li key={b}>{b}</li>)}
                </ul>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
};

/* ───── 06 · PROGRAMAS grid 2x2 ───── */
const Programas = () => {
  const items = [
    { badge: 'FORMACIÓN INDIVIDUAL', idx: '/ 01', title: 'IA para profesionales y emprendedores',
      desc: 'Aprende a usar inteligencia artificial para mejorar tu productividad, comunicación, análisis, creatividad y toma de decisiones.',
      cta: 'Quiero aprender IA' },
    { badge: 'CAPACITACIÓN EMPRESARIAL', idx: '/ 02', title: 'IA aplicada para equipos',
      desc: 'Entrenamientos diseñados para empresas que quieren preparar a sus equipos para trabajar con inteligencia artificial de forma práctica y estratégica.',
      cta: 'Capacitar a mi equipo' },
    { badge: 'CONSULTORÍA E IMPLEMENTACIÓN', idx: '/ 03', title: 'Infraestructura Cognitiva Empresarial',
      desc: 'Diagnosticamos, estructuramos e implementamos sistemas de IA para transformar conocimiento empresarial en procesos y Agentes Cognitivos.',
      cta: 'Solicitar diagnóstico' },
    { badge: 'ECOOIA EXPERIENCES', idx: '/ 04', title: 'Eventos, viajes y comunidad',
      desc: 'Encuentros, masterclasses y experiencias internacionales para conectar con tecnología, innovación y redes empresariales de alto nivel.',
      cta: 'Ver próximas experiencias' },
  ];

  return (
    <section id="experiencias" className="relative py-section">
      <div className="container-x">
        <SectionHeader title={<>Elige cómo quieres <span className="text-grad">comenzar con ECOOIA.</span></>} maxW={760} />
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
          {items.map((it, i) => (
            <article key={it.idx} className="card-glow group flex flex-col rounded-2xl reveal"
              style={{
                background: '#102A43', border: '1px solid var(--border)',
                padding: 'clamp(32px, 3vw, 48px)', minHeight: 300,
                transitionDelay: (i*70) + 'ms',
              }}>
              <div className="flex items-start justify-between gap-3">
                <Badge>{it.badge}</Badge>
                <span className="font-mono" style={{ color: 'var(--muted)', fontSize: 12 }}>{it.idx}</span>
              </div>
              <h3 className="font-display text-fg mt-6"
                  style={{ fontSize: 'clamp(22px, 2vw, 28px)', fontWeight: 600, textWrap: 'balance' }}>
                {it.title}
              </h3>
              <p className="mt-4" style={{ color: 'var(--muted)', textWrap: 'pretty' }}>{it.desc}</p>
              <a href="#" className="mt-6 inline-flex items-center gap-2 font-medium transition group-hover:translate-x-1"
                 style={{ color: '#2EC4F1' }}>
                {it.cta} <IconArrow size={16} />
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───── 07 · DIFERENCIACIÓN ───── */
const Diferencia = () => {
  const rows = [
    ['Usa la IA como atajo', 'La integra como forma de pensar y operar'],
    ['Aprende prompts y herramientas sueltas', 'Construye criterio para decidir cuándo y cómo usar IA'],
    ['Depende del modelo del día', 'Estructura conocimiento como sistema propio'],
    ['Automatiza tareas sueltas', 'Diseña Agentes Cognitivos especializados'],
    ['Reacciona a cada novedad de IA', 'Opera con IA como infraestructura estable'],
  ];
  return (
    <section className="relative py-section">
      <div className="container-x">
        <SectionHeader eyebrow="/ DIFERENCIA"
          title={<>No enseñamos herramientas.<br /><span className="text-grad">Construimos criterio.</span></>}
          sub="La verdadera ventaja no es saber qué herramienta usar, sino saber pensar y decidir con criterio. Por eso ECOOIA forma personas que entienden la IA, diseñan con ella y la integran a su realidad profesional o empresarial."
          maxW={820} />

        <div className="mx-auto rounded-2xl reveal"
             style={{ maxWidth: 1100, background: 'rgba(16,42,67,0.55)', border: '1px solid var(--border)' }}>
          <div className="grid grid-cols-1 md:grid-cols-2 px-6 md:px-10 pt-7 pb-3 gap-y-3 md:gap-x-10">
            <div className="font-mono" style={{ color: 'var(--muted)', fontSize: 11 }}>USO BÁSICO DE IA</div>
            <div className="font-mono text-grad" style={{ fontSize: 11 }}>ENFOQUE ECOOIA</div>
          </div>
          <div className="px-6 md:px-10 pb-2">
            {rows.map((r, i) => (
              <div key={i} className="grid grid-cols-1 md:grid-cols-2 gap-y-2 md:gap-x-10"
                   style={{ padding: '20px 0', borderTop: '1px solid var(--border-soft)' }}>
                <div style={{ color: 'rgba(230,234,240,0.55)' }}>{r[0]}</div>
                <div className="flex items-start gap-2.5 text-fg">
                  <span className="inline-block rounded-full mt-2 shrink-0" style={{ width: 5, height: 5, background: '#2EC4F1', boxShadow: '0 0 8px rgba(46,196,241,0.6)' }} />
                  <span>{r[1]}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <blockquote className="font-display text-grad mx-auto text-center reveal"
          style={{ fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 500, lineHeight: 1.15, maxWidth: 900, marginTop: 80, textWrap: 'balance' }}>
          “La nueva ventaja competitiva será humana y tecnológica al mismo tiempo.”
        </blockquote>
      </div>
    </section>
  );
};

/* ───── 08 · COMUNIDAD testimonios ───── */
const Comunidad = () => {
  const items = [
    { quote: 'Pasamos de probar herramientas sueltas a tener un sistema que entiende cómo opera nuestra empresa. Cambió la forma en la que tomamos decisiones.',
      name: 'María Restrepo', role: 'COO · Fintech regional' },
    { quote: 'ECOOIA no nos dio otra herramienta más. Nos dio criterio. Hoy cada equipo sabe qué pedirle a la IA, qué esperar y cuándo no usarla.',
      name: 'Andrés Quiroga', role: 'Director de innovación · Industria' },
    { quote: 'En menos de un trimestre nuestros líderes pasaron de ansiedad a estrategia. La conversación sobre IA dentro de la compañía nunca volvió a ser la misma.',
      name: 'Lucía Bermúdez', role: 'CHRO · Retail LATAM' },
  ];
  return (
    <section className="relative py-section">
      <div className="container-x">
        <SectionHeader title={<>Personas y empresas que ya <span className="text-grad">operan en la nueva economía.</span></>} maxW={840} />
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
          {items.map((t, i) => (
            <article key={t.name} className="flex flex-col rounded-2xl reveal"
              style={{
                background: '#102A43', border: '1px solid var(--border)',
                padding: 36, minHeight: 280, transitionDelay: (i*70) + 'ms',
              }}>
              <IconQuote size={28} stroke="#2EC4F1" />
              <p className="mt-5 text-fg" style={{ fontSize: 17, lineHeight: 1.6 }}>“{t.quote}”</p>
              <div className="flex-grow" />
              <div className="mt-6 pt-5" style={{ borderTop: '1px solid var(--border)' }}>
                <div className="font-display text-fg" style={{ fontSize: 16, fontWeight: 500 }}>{t.name}</div>
                <div className="font-mono mt-1" style={{ color: 'var(--muted)', fontSize: 11 }}>{t.role}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ───── 09 · CTA final ───── */
const Comenzar = () => (
  <section id="comenzar" className="relative sec-glow"
    style={{ paddingBlock: 'clamp(120px, 14vw, 200px)' }}>
    <div className="container-x relative">
      <div className="mx-auto text-center" style={{ maxWidth: 900 }}>
        <h2 className="font-display text-fg reveal"
            style={{ fontSize: 'clamp(48px, 7vw, 88px)', fontWeight: 600, lineHeight: 1.05, textWrap: 'balance', letterSpacing: '-0.02em' }}>
          La nueva economía<br /><span className="text-grad">ya comenzó.</span>
        </h2>
        <p className="reveal mx-auto mt-8 font-mono"
           style={{ color: 'var(--muted)', fontSize: 13, letterSpacing: '0.24em' }}>
          APRENDE · INTEGRA · AMPLIFICA · ESCALA
        </p>
        <div className="reveal mt-12 flex flex-col sm:flex-row items-center justify-center gap-3">
          <a href="#" className="btn-grad rounded-full px-7 py-4 text-[15px] font-medium text-white inline-flex items-center gap-2 hover:opacity-95 transition">
            Comenzar con ECOOIA <IconArrow size={16} />
          </a>
          <a href="#" className="rounded-full px-7 py-4 text-[15px] font-medium text-white inline-flex items-center gap-2 hover:bg-white/5 transition"
             style={{ border: '1px solid rgba(230,234,240,0.2)' }}>
            Solicitar diagnóstico
          </a>
        </div>
      </div>
    </div>
  </section>
);

/* ───── 10 · FOOTER ───── */
const Footer = () => {
  const columns = [
    { title: 'PROGRAMAS', links: ['Formación individual', 'Power Skills', 'Certificaciones', 'Próximas cohortes'] },
    { title: 'EMPRESAS',  links: ['Diagnóstico', 'Infraestructura Cognitiva', 'Agentes Cognitivos', 'Método'] },
    { title: 'COMUNIDAD', links: ['ECOOIA Experiences', 'Eventos', 'Newsletter', 'Contacto'] },
  ];
  return (
    <footer style={{ paddingTop: 'clamp(80px, 8vw, 120px)', paddingBottom: 40, borderTop: '1px solid var(--border-soft)' }}>
      <div className="container-x">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1fr] gap-10">
          <div style={{ maxWidth: 360 }}>
            <a href="#top" className="flex items-center" aria-label="ECOOIA">
              <img src="assets/ecooia-horizontal-dark.svg" alt="ECOOIA"
                   style={{ height: 34, width: 'auto', display: 'block' }} />
            </a>
            <p className="mt-5" style={{ color: 'var(--muted)' }}>
              Educación en IA, Power Skills e Infraestructura Cognitiva Empresarial. Desde Latinoamérica hacia el mundo.
            </p>
          </div>
          {columns.map(c => (
            <div key={c.title}>
              <div className="font-mono text-fg" style={{ fontSize: 13, marginBottom: 20 }}>{c.title}</div>
              <ul className="space-y-3">
                {c.links.map(l => (
                  <li key={l}><a href="#" className="hover:text-fg transition" style={{ color: 'var(--muted)' }}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-16 pt-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-5"
             style={{ borderTop: '1px solid var(--border-soft)' }}>
          <div className="font-mono" style={{ color: 'var(--muted)', fontSize: 12 }}>
            © 2026 ECOOIA. Desde Latinoamérica hacia el mundo.
          </div>
          <div className="flex items-center gap-5" style={{ color: 'var(--muted)' }}>
            <a href="#" aria-label="Twitter"   className="hover:text-cyan transition"><IconTwitter   size={18} /></a>
            <a href="#" aria-label="LinkedIn"  className="hover:text-cyan transition"><IconLinkedin  size={18} /></a>
            <a href="#" aria-label="Instagram" className="hover:text-cyan transition"><IconInstagram size={18} /></a>
            <a href="#" aria-label="YouTube"   className="hover:text-cyan transition"><IconYoutube   size={18} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Eyebrow, Badge, SectionHeader, Manifiesto, Pilares, Metodo, Programas, Diferencia, Comunidad, Comenzar, Footer });