/* ========== EternisIA — sections part 2 ========== */

/* ====== HOW ====== */
const How = () => (
  <section className="section" id="como" style={{ background: 'var(--ink-1)' }}>
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Cómo entras</span>
        <h2 className="h-section">Sesenta segundos. <span className="accent-fill">Tres clics.</span></h2>
      </div>
      <div className="how-grid">
        <div className="how-step">
          <div className="step-num">01</div>
          <h4>Pulsas el botón.</h4>
          <p>Te llevamos directo a Skool. Sin formularios eternos, sin pedirte el DNI.</p>
        </div>
        <div className="how-step">
          <div className="step-num">02</div>
          <h4>Te unes a EternisIA Academy.</h4>
          <p>Creas tu cuenta gratis (si no la tienes ya) y entras en la comunidad.</p>
        </div>
        <div className="how-step">
          <div className="step-num">03</div>
          <h4>Empiezas a construir.</h4>
          <p>Eliges la vertical que más te tira, ves el curso de muestra, y montas tu primer proyecto esta misma semana.</p>
        </div>
      </div>
    </div>
  </section>
);

/* ====== ABOUT ====== */
const About = ({ portraitSrc }) => (
  <section className="about" id="sobre-mi">
    <div className="container">
      <div className="about-grid">
        <div className="about-portrait">
          {portraitSrc
            ? <img src={portraitSrc} alt="Jose" style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
            : <span className="label">[ retrato · jose ]</span>
          }
        </div>
        <div>
          <span className="eyebrow about-eyebrow">Sobre mí</span>
          <h2 style={{ marginTop: 14 }}>Hola, soy Jose. Y monto esto porque hace cinco años <span style={{ color: '#FF4500', fontStyle: 'italic' }}>yo era tú.</span></h2>
          <p>Estudié Ingeniería Informática. Cinco años sacándome la carrera convencido de que al terminar todo iba a tener sentido.</p>
          <p>Y terminé. Y no tenía ni idea de qué hacer con mi vida. Trabajos que no me motivaban. Currículums lanzados a empresas que no me llenaban. La sensación constante de que con todo lo que sabía, <strong>algo no encajaba</strong>.</p>
          <p>Hasta que descubrí dos cosas que lo cambiaron todo: <strong style={{ color: '#FF4500' }}>el marketing y la IA.</strong></p>
          <p>Empecé a montar Eternisia. Primero como freelance. Luego como agencia. Hoy:</p>

          <div className="about-stats">
            <div className="stat">
              <span className="stat-num"><span>+500.000 €</span></span>
              <span className="stat-label">Gestionados en publicidad</span>
            </div>
            <div className="stat">
              <span className="stat-num"><span>+15</span> clínicas</span>
              <span className="stat-label">Con método Crece Sin Límites</span>
            </div>
            <div className="stat">
              <span className="stat-num"><span>+50</span> empresas</span>
              <span className="stat-label">Confiando su IA y automatizaciones</span>
            </div>
            <div className="stat">
              <span className="stat-num"><span>2</span> apps</span>
              <span className="stat-label">Publicadas en stores con vibe coding</span>
            </div>
          </div>

          <p>¿Y sabes qué? <strong>Casi nada de esto requiere ser un crack del código.</strong> Requiere saber qué herramienta usar, en qué orden, y para qué.</p>
          <p>Eso es lo que enseño en EternisIA Academy. No para que seas yo. Para que <strong>dejes de sentirte perdido y empieces a construir lo tuyo.</strong></p>

          <div className="signature">— Jose</div>

          <div className="about-cta-row">
            <PrimaryCTA size="btn-xl">Entrar gratis y empezar</PrimaryCTA>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ====== CASES ====== */
const CASES = [
  {
    type: 'Clínica · Agencia + IA',
    name: 'clesdent',
    desc: 'Implementamos Crece Sin Límites: campañas pagadas, automatización de leads, agente de voz IA atendiendo llamadas. Una clínica funcionando como una máquina.',
    thumb: 'case-thumb-1',
  },
  {
    type: 'App · Vibe coding',
    name: 'mesafacil.es',
    desc: 'App para restaurantes construida 100% con vibe coding. Reservas, gestión, IA detrás. Cero equipo de desarrollo tradicional.',
    thumb: 'case-thumb-2',
  },
  {
    type: 'App · Publicada · Monetizando',
    name: 'pidelofacil.es',
    desc: 'La prueba viva: App Store y Google Play sin un departamento de ingeniería. Está ahí. La puedes descargar. Está generando ingresos.',
    thumb: 'case-thumb-3',
  },
];

const CaseMockup = ({ accent }) => (
  <div className="case-thumb-overlay">
    <div className="case-thumb-mock">
      <div className="bar" style={{ width: '40%', background: accent ? 'linear-gradient(90deg, #FF4500, #FF8C29)' : undefined }} />
      <div className="bar" />
      <div className="bar short" />
      <div className="bar" />
      <div className="bar short" />
      <div className="bar accent" style={{ marginTop: 'auto', width: '70%' }} />
    </div>
  </div>
);

const Cases = () => (
  <section className="section" id="casos">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Prueba social</span>
        <h2 className="h-section">Lo que se construye <span className="accent-fill">dentro y fuera</span> de la academia</h2>
      </div>
      <div className="cases-grid">
        {CASES.map((c, i) => (
          <div className="case-card" key={i}>
            <div className={`case-thumb ${c.thumb}`}>
              <CaseMockup accent={i === 2} />
            </div>
            <div className="case-meta">
              <span className="case-type">{c.type}</span>
              <h4>{c.name}</h4>
              <p>{c.desc}</p>
            </div>
          </div>
        ))}
      </div>
      <p className="cases-quote">"Si yo lo he hecho — y antes era el típico ingeniero perdido sin saber qué hacer — tú también puedes."</p>
    </div>
  </section>
);

/* ====== WHY FREE ====== */
const WhyFree = () => (
  <section className="section why-free">
    <div className="container">
      <div className="why-free-grid">
        <div>
          <span className="quote-tag">La objeción honesta</span>
          <h2 className="h-section">"Vale, ¿y dónde <span className="accent-fill">está el truco?"</span></h2>
        </div>
        <div>
          <p>No hay truco.</p>
          <p>Te lo cuento como es: <strong>el 90 % de la gente que entra en la academia se queda en la versión gratuita y aprende un montón.</strong> Solo una parte termina comprando un curso completo de 97 € de la vertical que más le interesa.</p>
          <p>A mí me sale a cuenta porque cuanto más grande sea la comunidad, mejor para todos: más casos, más feedback, más networking, más gente construyendo en público.</p>
          <p>Si te quedas para siempre en gratuito, <strong>bienvenido</strong>. Si un día decides profundizar en una vertical concreta, ahí estará el curso completo por 97 €. Sin presión.</p>
        </div>
      </div>
    </div>
  </section>
);

/* ====== FAQ ====== */
const FAQS = [
  { q: '¿Necesito saber programar?', a: 'No. De hecho, esta academia está pensada para emprendedores y curiosos sin perfil técnico. Si sabes usar un navegador, sabes lo suficiente.' },
  { q: '¿Es realmente gratis?', a: 'Sí. La comunidad y los cursos de muestra son gratis para siempre. Solo si quieres profundizar en una vertical concreta, hay un curso completo por 97 € (pago único, sin suscripciones).' },
  { q: '¿Por qué Skool?', a: 'Porque es la plataforma de comunidad más limpia que existe ahora mismo. Cero spam, todo en un sitio: lecciones, comunidad, eventos en directo, recursos.' },
  { q: '¿Cuánto tiempo necesito a la semana?', a: 'Con 2-3 horas a la semana ya empiezas a construir cosas. Sin ese ritmo, no esperes magia: aquí no se trata de consumir contenido, sino de hacer.' },
  { q: '¿Esto es otro curso de "hazte rico con IA"?', a: 'No. Aquí no se vende humo. Se enseña a construir cosas reales: apps, webs, automatizaciones, agentes. Lo que hagas con eso después, depende de ti.' },
  { q: '¿Y si no me gusta?', a: 'Te sales. Es gratis. Literalmente no pierdes nada salvo el rato de mirar.' },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 className="h-section">Preguntas que probablemente <span className="accent-fill">te estés haciendo.</span></h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className="faq-item" key={i} data-open={open === i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-icon">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ====== FINAL CTA ====== */
const FinalCTA = ({ isoSrc }) => (
  <section className="final-cta" id="join">
    <div className="container">
      <img className="final-cta-iso" src={isoSrc} alt="" />
      <h2>Lo único que te separa de tu primera app, agente o automatización <span className="accent-fill">es entrar.</span></h2>
      <p>Llevas meses (¿años?) diciéndote que algún día te pondrás con la IA en serio. Que algún día montarás eso que tienes en la cabeza. Que algún día.</p>
      <p style={{ marginTop: 12, color: 'var(--text-1)', fontWeight: 600, fontSize: 20 }}>Hoy puede ser ese día. Y encima es gratis.</p>
      <PrimaryCTA size="btn-xl">Acceder gratis a EternisIA Academy</PrimaryCTA>
      <p className="footer-microcopy">Te lleva directo a Skool · Sin tarjeta · Sin permanencia</p>
    </div>
  </section>
);

/* ====== FOOTER ====== */
const Footer = ({ logoSrc }) => (
  <footer>
    <div className="container footer-row" style={{ flexDirection: 'column', gap: 24, alignItems: 'center', textAlign: 'center' }}>
      <img src={logoSrc} alt="EternisIA" />
      <span>Construido con IA. Por alguien que antes estaba más perdido que tú.</span>
      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', justifyContent: 'center' }}>
        <a href="/aviso-legal" style={{ color: 'var(--text-2)' }}>Aviso legal</a>
        <a href="/politica-privacidad" style={{ color: 'var(--text-2)' }}>Política de privacidad</a>
        <a href="/politica-cookies" style={{ color: 'var(--text-2)' }}>Política de cookies</a>
        <a href="#" onClick={(e) => { e.preventDefault(); if (window.openCookieSettings) window.openCookieSettings(); }} style={{ color: 'var(--text-2)' }}>Configurar cookies</a>
      </div>
      <span>© 2026 Jose Espejo López · EternisIA · Martos (Jaén)</span>
    </div>
  </footer>
);

Object.assign(window, {
  How, About, Cases, WhyFree, FAQ, FinalCTA, Footer,
});