// sections-3.jsx — Academy, AcademyDiff, Blog, CTAFinal, Footer

function KAcademy() {
  const courses = [
  {
    tag: "Curso · IA Content",
    title: "IA Content Creation",
    body: "Aprende a crear contenido con IA para redes sociales, marcas y creators. Workflows, hooks y prompts que funcionan en 2026.",
    chips: ["ChatGPT", "Prompts", "Hooks virales", "Workflows", "Estrategia"],
    meta: "8h · 14 lecciones"
  },
  {
    tag: "Curso · Strategy",
    title: "IA Marketing Strategy",
    body: "Cómo usar inteligencia artificial para construir estrategias de crecimiento reales — no para generar slop.",
    chips: ["IA tools", "Funnels", "Automatización", "Growth systems"],
    meta: "10h · 18 lecciones"
  },
  {
    tag: "Curso · Performance",
    title: "IA Ads & Performance",
    body: "Meta Ads, TikTok Ads y performance marketing potenciados con IA. Testing, creativos, optimización y análisis.",
    chips: ["Testing", "Creativos", "Optimización", "Data"],
    meta: "12h · 22 lecciones"
  },
  {
    tag: "Curso · Creators",
    title: "Creator IA Systems",
    body: "Cómo creators y marcas personales pueden usar IA para crecer más rápido sin perder voz propia.",
    chips: ["Automatización", "Contenido", "Productividad", "Posicionamiento"],
    meta: "6h · 12 lecciones"
  }];


  return (
    <section className="k-academy" id="academy" data-screen-label="08 Academy">
      <div className="k-section-head k-anim">
        <span className="k-eyebrow"><span className="k-dot" /> Academy</span>
        <h2 className="k-h1">Aprende <span className="k-grad-text">IA Marketing</span> para el futuro.</h2>
        <p className="k-body k-body-lg" style={{ maxWidth: 720 }}>
          Cursos, workshops y programas diseñados para creators, marcas y emprendedores que quieren aprender cómo usar inteligencia artificial en marketing, contenido y crecimiento digital.
        </p>
      </div>

      <div className="k-courses-grid">
        {courses.map((c, i) =>
        <article key={c.title} className={"k-course k-anim delay-" + (i % 2 + 1)}>
            <div className="k-course-tag">{c.tag}</div>
            <h3 className="k-course-title">{c.title}</h3>
            <p className="k-course-body">{c.body}</p>
            <div className="k-course-chips">
              {c.chips.map((ch) => <span key={ch} className="k-chip">{ch}</span>)}
            </div>
            <div className="k-course-foot">
              <span className="k-course-meta">{c.meta}</span>
              <a href={"academy.html#" + c.title.toLowerCase().replace(/\s+/g, "-")} className="k-btn k-btn-sm k-btn-ghost">
                Ver curso <ArrowRight size={13} />
              </a>
            </div>
          </article>
        )}
      </div>
    </section>);

}

function KAcademyDiff() {
  return (
    <section className="k-academy-diff" data-screen-label="09 Diferencial Academy">
      <div className="k-anim">
        <span className="k-eyebrow"><span className="k-dot" /> Por qué Kapoz Lab</span>
        <h2 className="k-academy-diff-h" style={{ marginTop: 16 }}>
          No enseñamos <span className="strike">teoría.</span><br />
          Enseñamos <span className="k-grad-text">sistemas reales.</span>
        </h2>
      </div>
      <div className="k-anim delay-1">
        <p className="k-body k-body-lg">
          Todo lo que enseñamos en Kapoz Lab viene de estrategias, campañas y sistemas que usamos actualmente con marcas reales.
        </p>
        <p className="k-body k-body-lg" style={{ marginTop: 20 }}>
          Aprende IA Marketing desde la práctica, no desde conceptos vacíos. Cada módulo viene con un caso real, un workflow exportable y un sistema replicable.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
          <a href={window.B("academy/")} className="k-btn k-btn-primary">
            Ver Academy <ArrowRight />
          </a>
          <a href="#cta" className="k-btn k-btn-ghost">
            Workshop a medida <ArrowRight />
          </a>
        </div>
      </div>
    </section>);

}

function KBlog() {
  const posts = [
  { cat: "GEO", title: "¿La IA recomienda tu marca? Qué es GEO y cómo medir tu visibilidad en IA", time: "7 min", date: "Jun 2026", slug: "blog/geo-visibilidad-ia/", isNew: true },
  { cat: "Tutorial", title: "Configura Claude como tu socio de trabajo (no como un chat)", time: "6 min", date: "Jun 2026", slug: "blog/claude-setup/" },
  { cat: "IA Marketing", title: "Cómo usar IA en marketing sin sonar a robot.", time: "7 min", date: "Mar 2026" },
  { cat: "Strategy", title: "IA Content Strategy: el playbook que usamos en 2026.", time: "9 min", date: "Mar 2026" },
  { cat: "Performance", title: "Meta Ads vs. TikTok Ads: dónde poner cada dólar.", time: "8 min", date: "Feb 2026" },
  { cat: "Growth", title: "Cómo crecer marcas con UGC sin perder la voz.", time: "6 min", date: "Feb 2026" },
  { cat: "Tools", title: "Herramientas de IA que sí mueven la aguja para creators.", time: "5 min", date: "Feb 2026" },
  { cat: "Trends", title: "Tendencias IA Marketing 2026: lo que importa y lo que no.", time: "10 min", date: "Ene 2026" },
  { cat: "Tactical", title: "Cómo usar ChatGPT para construir una marca, no contenido.", time: "7 min", date: "Ene 2026" }];


  return (
    <section className="k-section" id="blog" data-screen-label="10 Blog">
      <div className="k-section-head k-anim" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", maxWidth: "none", flexWrap: "wrap", gap: 24 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 640 }}>
          <span className="k-eyebrow"><span className="k-dot" /> Insights</span>
          <h2 className="k-h1">Insights de IA Marketing.</h2>
        </div>
        <a href={window.B("blog/")} className="k-btn k-btn-ghost">
          Ver todo el blog <ArrowRight />
        </a>
      </div>

      <div className="k-blog-grid">
        {posts.slice(0, 6).map((p, i) =>
        <a key={p.title} href={p.slug ? window.B(p.slug) : window.B("blog/#" + i)} className={"k-post k-anim delay-" + (i % 3 + 1)}>
            <div className="k-post-cathead">
              <span className="k-post-cat">{p.cat}</span>
              {p.isNew && <span className="k-badge-new">Nuevo</span>}
            </div>
            <h3 className="k-post-title">{p.title}</h3>
            <div className="k-post-meta">
              <span>{p.date}</span>
              <span>{p.time} lectura</span>
            </div>
          </a>
        )}
      </div>
    </section>);

}

function KCTAFinal() {
  return (
    <section className="k-cta-final" id="cta" data-screen-label="11 CTA Final">
      <div className="k-cta-card k-anim">
        <span className="k-eyebrow" style={{ position: "relative", zIndex: 1 }}>
          <span className="k-dot" /> Hablemos
        </span>
        <h2 className="k-cta-headline">
          Tu marca no necesita más contenido.<br />
          <span className="k-grad-text">Necesita un sistema de crecimiento.</span>
        </h2>
        <p className="k-cta-sub">
          IA Marketing. Estrategia. Performance. Contenido con intención.
        </p>
        <div className="k-cta-row">
          <a href="mailto:hola@kapoz.ai" className="k-btn k-btn-primary k-btn-lg">
            Agenda una llamada <ArrowRight />
          </a>
          <a href={window.B("casos/")} className="k-btn k-btn-ghost k-btn-lg">
            Ver casos <ArrowRight />
          </a>
        </div>
      </div>
    </section>);

}

function KFooter() {
  return (
    <footer className="k-footer">
      <div className="k-footer-top">
        <div className="k-footer-brand">
          <a href={window.B("")} className="k-logo" style={{ fontSize: 22 }}>
            <img src={window.B("assets/kapoz-logo-icon.png")} alt="Kapoz" className="k-logo-img" style={{ height: 44 }} />
            <span className="k-logo-wordmark">
              <span className="k-logo-name">kapoz</span>
              <span className="k-logo-dot"></span>
              <span className="k-logo-sub"></span>
            </span>
          </a>
          <p className="k-footer-tag">
            IA Growth Studio basado en estrategia, creatividad y performance.
          </p>
          <KSocials />
        </div>

        <div className="k-footer-cols">
          <div>
            <div className="k-footer-h">Estudio</div>
            <a href={window.B("servicios/")}>Servicios</a>
            <a href={window.B("casos/")}>Casos</a>
            <a href={window.B("faq/")}>FAQ</a>
            <a href={window.B("#filosofia")}>Filosofía</a>
            <a href={window.B("#proceso")}>Proceso</a>
          </div>
          <div>
            <div className="k-footer-h">Academy</div>
            <a href={window.B("academy/")}>Cursos</a>
            <a href={window.B("academy/#workshops")}>Workshops</a>
            <a href={window.B("academy/#programas")}>Programas</a>
            <a href={window.B("blog/")}>Blog</a>
          </div>
          <div>
            <div className="k-footer-h">Contacto</div>
            <a href="mailto:hola@kapoz.ai">hola@kapoz.ai</a>
          </div>
        </div>
      </div>

      <div className="k-footer-bottom">
        <div>© 2026 Kapoz Lab · Hecho con creatividad humana + IA</div>
        <div className="bolt-line"><span className="bolt">⚡</span> Construyamos el futuro de tu marca.</div>
      </div>
    </footer>);

}

function KWhatsApp() {
  const phone = "51964567577";
  const message = encodeURIComponent("Hola Juan Carlos! Vi tu web y me gustaría conversar sobre cómo trabajar contigo.");
  const href = `https://wa.me/${phone}?text=${message}`;
  const [open, setOpen] = React.useState(false);
  return (
    <div className="k-wa-wrap">
      {open && (
        <div className="k-wa-pop">
          <div className="k-wa-pop-head">
            <div className="k-wa-pop-avatar">
              <img src={window.B("assets/photo-jc-square.png")} alt="Juan Carlos del Carpio" />
              <span className="k-wa-online-dot" aria-hidden="true" />
            </div>
            <div className="k-wa-pop-info">
              <strong className="k-wa-pop-name">Juan Carlos del Carpio</strong>
              <span className="k-wa-pop-role">Founder · Kapoz Lab</span>
              <span className="k-wa-pop-status"><span className="k-live-pulse" /> en línea ahora</span>
            </div>
            <button className="k-wa-pop-close" onClick={() => setOpen(false)} aria-label="Cerrar">×</button>
          </div>
          <div className="k-wa-pop-body">
            <div className="k-wa-bubble">
              <p>¡Hola! 👋 Soy Juan Carlos.</p>
              <p>Cuéntame sobre tu marca o proyecto — te respondo personalmente en minutos.</p>
              <span className="k-wa-time">ahora</span>
            </div>
          </div>
          <a href={href} target="_blank" rel="noopener noreferrer" className="k-wa-pop-cta">
            Iniciar conversación
            <svg width="16" height="16" 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"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
          </a>
        </div>
      )}
      <button
        className={"k-wa-btn" + (open ? " is-open" : "")}
        onClick={() => setOpen((o) => !o)}
        aria-label="Contacto WhatsApp"
      >
        {!open && <span className="k-wa-badge" aria-hidden="true">1</span>}
        <span className="k-wa-pulse" aria-hidden="true" />
        {open ? (
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        ) : (
          <svg width="26" height="26" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
            <path d="M16.003 3C9.376 3 3.999 8.376 3.999 15.001c0 2.376.694 4.583 1.886 6.443L4 29l7.764-1.83a12.93 12.93 0 0 0 4.239.708h.005C22.633 27.878 28 22.5 28 15.876 28 12.65 26.74 9.62 24.45 7.33 22.16 5.04 19.13 3 16.003 3zm0 21.93h-.004a10.84 10.84 0 0 1-5.524-1.51l-.396-.236-4.61 1.086 1.107-4.49-.258-.412a10.85 10.85 0 0 1-1.642-5.76c0-6.02 4.9-10.92 10.928-10.92 2.917 0 5.66 1.137 7.723 3.2a10.86 10.86 0 0 1 3.197 7.726c0 6.024-4.9 10.916-10.92 10.916zm5.985-8.18c-.327-.164-1.94-.957-2.24-1.066-.3-.11-.518-.164-.737.164-.218.328-.846 1.066-1.038 1.286-.19.218-.382.246-.71.082-.327-.164-1.385-.51-2.638-1.626-.975-.87-1.633-1.946-1.825-2.274-.19-.327-.02-.504.144-.668.148-.147.327-.382.49-.573.165-.19.218-.327.328-.546.11-.218.055-.41-.027-.573-.082-.164-.737-1.777-1.01-2.43-.266-.638-.537-.55-.737-.56-.19-.01-.41-.012-.628-.012-.218 0-.572.082-.872.41-.3.327-1.147 1.12-1.147 2.73 0 1.612 1.174 3.17 1.337 3.388.164.218 2.31 3.53 5.6 4.95.782.337 1.392.538 1.868.69.785.25 1.5.214 2.064.13.63-.094 1.94-.793 2.214-1.56.273-.766.273-1.423.19-1.56-.082-.137-.3-.218-.628-.382z"/>
          </svg>
        )}
      </button>
    </div>
  );
}

Object.assign(window, { KAcademy, KAcademyDiff, KBlog, KCTAFinal, KFooter, KWhatsApp });