/* ========== EternisIA — atómicos / sections part 1 ========== */

const ArrowRight = ({ className = 'arrow' }) => (
  <svg className={className} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);

const PrimaryCTA = ({ children = 'Acceder gratis a EternisIA Academy', size = '', href = '#join' }) => (
  <a className={`btn btn-primary ${size}`} href={href}>
    <span>{children}</span>
    <ArrowRight />
  </a>
);

/* ====== NAV ====== */
const Nav = ({ logoSrc }) => (
  <nav className="nav container">
    <div className="nav-logo">
      <img src={logoSrc} alt="EternisIA" />
    </div>
    <div className="nav-right">
      <a className="nav-link" href="#verticales">Verticales</a>
      <a className="nav-link" href="#sobre-mi">Sobre mí</a>
      <a className="nav-link" href="#faq">FAQ</a>
      <a className="btn btn-ghost" href="#join">
        <span>Entrar gratis</span>
        <ArrowRight />
      </a>
    </div>
  </nav>
);

/* ====== HERO ====== */
const HERO_VARIANTS = {
  A: {
    title: <>Construye tu primer negocio con <em>IA</em> aunque no sepas escribir una línea de código.</>,
    sub: 'La academia donde aprendes a montar apps, webs, automatizaciones y agentes de voz con IA. Empieza gratis hoy y, si te enganchas, llévate cualquier curso completo por 97 €.',
  },
  B: {
    title: <>Tu trabajo no te llena. La <em>IA</em> está cambiando el mundo. Y tú sigues sin saber por dónde empezar.</>,
    sub: 'Aquí no se habla de IA. Aquí se construye. Comunidad gratuita, cursos prácticos, comunidad activa.',
  },
  C: {
    title: <>Lo que la gente está construyendo con <em>IA</em> en 2026 es una locura. Ven a aprender cómo.</>,
    sub: 'Apps, webs, automatizaciones, agentes de voz. Empieza gratis hoy en EternisIA Academy.',
  },
  D: {
    title: <>De "no tengo ni idea de <em>IA</em>" a tener tu primera app publicada — sin contratar a nadie.</>,
    sub: 'La academia que te lleva del bloqueo a tu primer proyecto en stores. Empieza gratis.',
  },
};

const Hero = ({ variant = 'A', isoSrc }) => {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS.A;
  return (
    <header className="hero">
      <div className="hero-bg" />
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="eyebrow">EternisIA Academy · Comunidad gratis en Skool</span>
            <h1 className="h-display hero-title">{v.title}</h1>
            <p className="lede">{v.sub}</p>
            <div className="hero-cta-row">
              <PrimaryCTA size="btn-xl">Entrar gratis a EternisIA Academy</PrimaryCTA>
            </div>
            <p className="hero-microcopy">Sin tarjeta. Sin permanencia. Sin "ahora te llamo y te lío".</p>
          </div>
          <HeroVisual isoSrc={isoSrc} />
        </div>
      </div>
    </header>
  );
};

const HeroVisual = ({ isoSrc }) => (
  <div className="hero-visual">
    <div className="hero-visual-meta">
      <span className="dot">en directo</span>
      <span>v.2026</span>
    </div>
    <img className="hero-visual-iso" src={isoSrc} alt="" />
    <div className="hero-visual-tags">
      <span className="tag-chip">Lovable</span>
      <span className="tag-chip">Claude</span>
      <span className="tag-chip">n8n</span>
      <span className="tag-chip">Vapi</span>
      <span className="tag-chip">Cursor</span>
      <span className="tag-chip">Midjourney</span>
      <span className="tag-chip">+18 más</span>
    </div>
  </div>
);

/* ====== Credibility bar ====== */
const CredBar = () => (
  <div className="cred-bar">
    <div className="container cred-row">
      <span><strong>+2 años</strong> en Eternisia</span>
      <span><strong>+500.000 €</strong> invertidos en publicidad real</span>
      <span><strong>+50 empresas</strong> con mi método</span>
      <span><strong>+15 clínicas dentales</strong> escalando con IA</span>
    </div>
  </div>
);

/* ====== Pain ====== */
const Pain = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">El punto de partida</span>
        <h2 className="h-section">
          Si has llegado hasta aquí, probablemente <span className="accent-fill">te pasa una de estas tres cosas.</span>
        </h2>
        <p className="lede"><em>(Y si te pasan las tres, bienvenido al club.)</em></p>
      </div>
      <div className="pain-grid">
        <div className="pain-card">
          <span className="pain-num">01 · MOTIVACIÓN</span>
          <h3>Tu trabajo actual no te llena.</h3>
          <p>Te levantas el lunes con esa sensación rara. Sabes que no es esto. Que algo tiene que cambiar. Pero no sabes qué cojo… qué hacer.</p>
        </div>
        <div className="pain-card">
          <span className="pain-num">02 · OVERWHELM</span>
          <h3>Ves a todo el mundo hablando de IA y te sientes perdido.</h3>
          <p>ChatGPT, Claude, Lovable, n8n, Vapi, Midjourney, Cursor, agentes, MCPs… Cada semana sale algo nuevo. Cada semana sientes que el tren se va sin ti.</p>
        </div>
        <div className="pain-card">
          <span className="pain-num">03 · EJECUCIÓN</span>
          <h3>Tienes ideas, pero no sabes programar.</h3>
          <p>La idea la tienes desde hace meses. Quizás años. Pero como no sabes código, dependes de un dev que no llega, o de un freelance carísimo, o lo dejas aparcado "para más adelante".</p>
        </div>
      </div>
      <div className="pain-close">
        <p>El problema no es la falta de ideas. <span className="accent-fill">El problema es que nadie te ha enseñado a usar las herramientas que ya tienes a un clic.</span></p>
        <p className="small">Hasta hoy.</p>
      </div>
    </div>
  </section>
);

/* ====== Solution / What is this ====== */
const BENEFITS = [
  { icon: '◎', title: 'Tour por las 6 verticales', desc: 'Una clase práctica de cada vertical para que veas con tus propios ojos qué se puede construir con IA hoy.' },
  { icon: '◇', title: 'Comunidad activa en Skool', desc: 'Otros emprendedores construyendo en paralelo. Preguntas, feedback, networking real.' },
  { icon: '◈', title: 'Recursos, prompts y plantillas', desc: 'Las mismas herramientas que yo uso en Eternisia con clientes que pagan.' },
  { icon: '▶', title: 'Masterclasses periódicas en directo', desc: 'Lo último en IA aplicada a negocio, no teoría. Aplicado.' },
  { icon: '◐', title: 'Acceso directo a mí', desc: 'Dentro de la comunidad, no soy un avatar inalcanzable. Te leo y te respondo.' },
  { icon: '✦', title: 'Curso completo opcional · 97 €', desc: 'Cuando quieras profundizar, desbloquea cualquier vertical. Pago único, sin trampas.' },
];

const Solution = () => (
  <section className="section" id="que-es">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Qué es esto</span>
        <h2 className="h-section">
          EternisIA Academy es la comunidad donde <span className="accent-fill">aprendes a construir con IA,</span> no solo a hablar de ella.
        </h2>
        <p className="lede">Nada de gurús haciendo Reels con conceptos vacíos. Aquí abrimos el ordenador, montamos cosas que funcionan, y las publicamos. En Skool, en privado, paso a paso.</p>
      </div>
      <div className="benefit-list">
        {BENEFITS.map((b, i) => (
          <div className="benefit-row" key={i}>
            <div className="benefit-icon" aria-hidden="true">
              <span style={{ fontSize: 22, lineHeight: 1 }}>{b.icon}</span>
            </div>
            <div>
              <h4>{b.title}</h4>
              <p>{b.desc}</p>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 56, display: 'flex', justifyContent: 'center' }}>
        <PrimaryCTA size="btn-xl">Quiero entrar gratis</PrimaryCTA>
      </div>
    </div>
  </section>
);

/* ====== Verticals ====== */
const VERTICALS = [
  {
    n: '01', tag: 'WEB',
    title: 'Vibe Coding · Apps Web',
    hook: 'Construye webs y aplicaciones web reales con Lovable + Claude Code.',
    desc: 'Desde landing pages que convierten hasta SaaS funcionales. Sin tocar un npm install si no quieres.',
    stack: ['Lovable', 'Claude Code', 'Vercel'],
  },
  {
    n: '02', tag: 'MOBILE',
    title: 'Vibe Coding · Apps Mobile',
    hook: 'Tu app en App Store y Google Play, sin contratar a un dev.',
    desc: 'Te enseño el mismo flujo que usé para publicar pidelofacil.es — una app que ya está monetizando en stores.',
    stack: ['Expo', 'Cursor', 'Stores'],
  },
  {
    n: '03', tag: 'LANDING',
    title: 'Landing Pages que venden',
    hook: 'Páginas hechas en horas, no en semanas.',
    desc: 'Estructura, copy, integraciones, pixel, dominio propio. El stack completo para que tengas tu idea online esta misma tarde.',
    stack: ['Framer', 'Webflow', 'Meta Pixel'],
  },
  {
    n: '04', tag: 'AUTOMATIZACIÓN',
    title: 'Automatizaciones con n8n',
    hook: 'Conecta tu negocio entero y deja de hacer tareas que se pueden automatizar.',
    desc: 'CRMs, emails, WhatsApp, Notion, Sheets, IA por encima de todo. El sistema operativo silencioso de los negocios modernos.',
    stack: ['n8n', 'WhatsApp', 'Notion'],
  },
  {
    n: '05', tag: 'VOZ',
    title: 'Agentes de voz con Vapi',
    hook: 'Pon una IA a contestar el teléfono de tu negocio.',
    desc: 'La misma tecnología que estoy implantando en clínicas dentales. Atiende llamadas, agenda citas, cualifica leads — 24/7.',
    stack: ['Vapi', 'Twilio', 'CRM'],
  },
  {
    n: '06', tag: 'MARKETING',
    title: 'Marketing con IA + Generativa',
    hook: 'Lo que de verdad funciona en 2026.',
    desc: 'Cómo uso la IA para escalar campañas con +500.000 € invertidos a mis espaldas. Imágenes, vídeo, copys, ads, funnels.',
    stack: ['Midjourney', 'Meta Ads', 'Veo'],
  },
];

const VertIcon = ({ kind }) => {
  // Tiny abstract glyphs — node-style nods to the iso
  const map = {
    WEB: (
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
        <rect x="6" y="10" width="44" height="32" rx="4" stroke="currentColor" strokeWidth="1.5" />
        <line x1="6" y1="18" x2="50" y2="18" stroke="currentColor" strokeWidth="1.5" />
        <circle cx="11" cy="14" r="1.4" fill="currentColor"/>
        <circle cx="15" cy="14" r="1.4" fill="currentColor"/>
        <rect x="14" y="24" width="20" height="3" fill="currentColor" opacity="0.6"/>
        <rect x="14" y="30" width="14" height="3" fill="currentColor" opacity="0.4"/>
      </svg>
    ),
    MOBILE: (
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
        <rect x="18" y="6" width="20" height="44" rx="4" stroke="currentColor" strokeWidth="1.5" />
        <line x1="22" y1="11" x2="34" y2="11" stroke="currentColor" strokeWidth="1.2"/>
        <circle cx="28" cy="44" r="2" stroke="currentColor" strokeWidth="1.2"/>
        <rect x="22" y="18" width="12" height="2" fill="currentColor" opacity="0.6"/>
        <rect x="22" y="24" width="9" height="2" fill="currentColor" opacity="0.4"/>
      </svg>
    ),
    LANDING: (
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
        <rect x="6" y="6" width="44" height="44" rx="4" stroke="currentColor" strokeWidth="1.5"/>
        <rect x="12" y="12" width="20" height="6" fill="currentColor" opacity="0.5"/>
        <rect x="12" y="22" width="32" height="2" fill="currentColor" opacity="0.4"/>
        <rect x="12" y="28" width="24" height="2" fill="currentColor" opacity="0.4"/>
        <rect x="12" y="38" width="14" height="6" rx="3" fill="currentColor"/>
      </svg>
    ),
    'AUTOMATIZACIÓN': (
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
        <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.5"/>
        <circle cx="44" cy="12" r="4" stroke="currentColor" strokeWidth="1.5"/>
        <circle cx="28" cy="28" r="5" fill="currentColor"/>
        <circle cx="12" cy="44" r="4" stroke="currentColor" strokeWidth="1.5"/>
        <circle cx="44" cy="44" r="4" stroke="currentColor" strokeWidth="1.5"/>
        <line x1="16" y1="14" x2="24" y2="26" stroke="currentColor" strokeWidth="1.2"/>
        <line x1="40" y1="14" x2="32" y2="26" stroke="currentColor" strokeWidth="1.2"/>
        <line x1="16" y1="42" x2="24" y2="30" stroke="currentColor" strokeWidth="1.2"/>
        <line x1="40" y1="42" x2="32" y2="30" stroke="currentColor" strokeWidth="1.2"/>
      </svg>
    ),
    VOZ: (
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
        <rect x="22" y="8" width="12" height="22" rx="6" stroke="currentColor" strokeWidth="1.5"/>
        <path d="M14 26c0 8 6 14 14 14s14-6 14-14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
        <line x1="28" y1="40" x2="28" y2="48" stroke="currentColor" strokeWidth="1.5"/>
        <line x1="22" y1="48" x2="34" y2="48" stroke="currentColor" strokeWidth="1.5"/>
      </svg>
    ),
    MARKETING: (
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
        <polyline points="6,42 18,28 28,34 42,16 50,22" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx="42" cy="16" r="3" fill="currentColor"/>
        <line x1="6" y1="50" x2="50" y2="50" stroke="currentColor" strokeWidth="1.2" opacity="0.4"/>
      </svg>
    ),
  };
  return map[kind] || null;
};

const Verticals = () => (
  <section className="section" id="verticales">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">El plan de estudios</span>
        <h2 className="h-section">Lo que vas a <span className="accent-fill">aprender (y construir)</span> dentro</h2>
        <p className="lede">Cada vertical tiene un curso gratuito de muestra dentro de la academia. Si te engancha, puedes desbloquear el curso completo por 97 €. Uno suelto. Sin paquetes raros, sin suscripciones que se renuevan a tus espaldas.</p>
      </div>
      <div className="vert-grid">
        {VERTICALS.map((v) => (
          <div className="vert-card" key={v.n}>
            <div className="vert-icon"><VertIcon kind={v.tag} /></div>
            <span className="vert-num">{v.n} · {v.tag}</span>
            <h3>{v.title}</h3>
            <p style={{ color: 'var(--text-1)', fontWeight: 500 }}>{v.hook}</p>
            <p className="vert-desc">{v.desc}</p>
            <span className="vert-tag">
              {v.stack.join(' · ')}
            </span>
          </div>
        ))}
      </div>
      <div className="vert-pricing">
        <div>
          <div className="big">Curso completo: <span>97 €</span></div>
          <div className="sub">Pago único. Sin trampas. Una vertical por curso.</div>
        </div>
        <div>
          <div className="big" style={{ color: 'var(--text-1)' }}>Comunidad + muestras: <span style={{ color: 'var(--orange-3)' }}>siempre gratis</span></div>
          <div className="sub">Para siempre. Aunque nunca compres nada.</div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  ArrowRight, PrimaryCTA, Nav, Hero, CredBar, Pain, Solution, Verticals,
});