// sections-1.jsx — Header, Hero, Clientes, Servicios

const Bolt = ({ className = "" }) =>
<svg className={className} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M13 3 4 14h7l-1 7 9-11h-7l1-7z" fill="currentColor" />
  </svg>;


const ArrowRight = ({ size = 16 }) =>
<svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="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>;

const SunIcon = ({ size = 15 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="4"></circle>
    <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"></path>
  </svg>;

const MoonIcon = ({ size = 15 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
  </svg>;

function KThemeToggle() {
  const [mode, setMode] = React.useState(() => window.KapozTheme ? window.KapozTheme.getMode() : "auto");
  const [eff, setEff] = React.useState(() => window.KapozTheme ? window.KapozTheme.getEffective() : "dark");
  React.useEffect(() => {
    if (!window.KapozTheme) return;
    return window.KapozTheme.subscribe((m, e) => { setMode(m); setEff(e); });
  }, []);
  const onClick = () => { if (window.KapozTheme) window.KapozTheme.cycle(); };
  const modeLabel = mode === "auto" ? `Auto (ahora ${eff === "light" ? "claro" : "oscuro"})` : mode === "light" ? "Claro" : "Oscuro";
  return (
    <button
      type="button"
      className="k-theme-toggle"
      onClick={onClick}
      title={`Tema: ${modeLabel} · clic para cambiar`}
      aria-label={`Tema: ${modeLabel}. Clic para cambiar.`}>
      <span className="k-theme-icon">{eff === "light" ? <SunIcon /> : <MoonIcon />}</span>
      <span className="k-theme-auto">{mode === "auto" ? "AUTO" : mode === "light" ? "CLARO" : "OSCURO"}</span>
    </button>);

}


// ── Redes sociales (iconos silueta, sin fondo, heredan currentColor) ──
const IconInstagram = () =>
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 1.44c-3.14 0-3.51.01-4.75.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.04.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.04-.9-.19-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32-1.24-.06-1.61-.07-4.75-.07zm0 2.45a5.95 5.95 0 1 1 0 11.9 5.95 5.95 0 0 1 0-11.9zm0 1.44a4.51 4.51 0 1 0 0 9.02 4.51 4.51 0 0 0 0-9.02zm6.11-.66a1.39 1.39 0 1 1-2.78 0 1.39 1.39 0 0 1 2.78 0z" />
  </svg>;

const IconLinkedIn = () =>
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z" />
  </svg>;

const IconFacebook = () =>
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.01 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.08 24 18.09 24 12.07z" />
  </svg>;

const IconTikTok = () =>
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M16.6 5.82a4.28 4.28 0 0 1-1.07-2.82h-3.3v13.2a2.59 2.59 0 0 1-2.59 2.5 2.59 2.59 0 1 1 .77-5.06v-3.36a5.92 5.92 0 0 0-.77-.05A5.95 5.95 0 1 0 15.6 16.2V9.4a7.55 7.55 0 0 0 4.4 1.41V7.5a4.28 4.28 0 0 1-3.4-1.68z" />
  </svg>;

const IconYouTube = () =>
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2C0 8.07 0 12 0 12s0 3.93.5 5.8a3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.8zM9.55 15.57V8.43L15.82 12l-6.27 3.57z" />
  </svg>;

const SOCIAL_LINKS = [
  { name: "Instagram", href: "https://www.instagram.com/kapoz.ia/", Icon: IconInstagram },
  { name: "LinkedIn", href: "https://www.linkedin.com/company/kapoz/", Icon: IconLinkedIn },
  { name: "Facebook", href: "https://www.facebook.com/profile.php?id=61589618690401", Icon: IconFacebook },
  { name: "TikTok", href: "https://www.tiktok.com/@kapoz.ia", Icon: IconTikTok },
  { name: "YouTube", href: "https://www.youtube.com/@Kapozlab", Icon: IconYouTube }];


function KSocials({ className = "" }) {
  return (
    <div className={"k-social" + (className ? " " + className : "")}>
      {SOCIAL_LINKS.map(({ name, href, Icon }) =>
      <a key={name} href={href} className="k-social-link" target="_blank" rel="noopener noreferrer" aria-label={name} title={name}>
          <Icon />
        </a>
      )}
    </div>);

}

function KHeader({ current = "home" }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
  { href: current === "home" ? "#servicios" : window.B("servicios/"), label: "Servicios" },
  { href: current === "home" ? "#casos" : window.B("casos/"), label: "Casos" },
  { href: current === "home" ? "#academy" : window.B("academy/"), label: "Academy" },
  { href: current === "home" ? "#blog" : window.B("blog/"), label: "Blog" },
  { href: current === "home" ? "#filosofia" : window.B("#filosofia"), label: "Filosofía" }];


  return (
    <header className={"k-header" + (scrolled ? " is-scrolled" : "")}>
      <a href={window.B("")} className="k-logo">
        <img src={window.B("assets/kapoz-logo-icon.png")} alt="Kapoz" className="k-logo-img" style={{ height: "40px", width: "auto", objectFit: "contain" }} />
        <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>
      <KSocials className="k-header-social" />
      <nav className="k-nav">
        {links.map((l) =>
        <a key={l.label} href={l.href} className="k-nav-link">{l.label}</a>
        )}
      </nav>
      <div className="k-header-cta">
        <KThemeToggle />
        <a href="#cta" className="k-btn k-btn-outline k-btn-sm">
          Agenda una llamada <ArrowRight size={14} />
        </a>
      </div>
    </header>);

}

function KHero() {
  return (
    <section className="k-hero" data-screen-label="01 Hero">
      {/* Animated gradient orbs */}
      <div className="k-hero-orbs" aria-hidden="true">
        <div className="k-orb k-orb-1" />
        <div className="k-orb k-orb-2" />
        <div className="k-orb k-orb-3" />
      </div>

      {/* Floating tiles — simulated dashboards / content / data */}
      <div className="k-hero-tiles" aria-hidden="true">
        {/* Tile 1 — Live ad performance */}
        <div className="k-tile t-1">
          <div className="k-tile-label">
            <span>META ADS · IG</span>
            <span className="k-live-dot"><span className="k-live-pulse" />LIVE</span>
          </div>
          <div className="k-tile-value">ROAS 4.6×</div>
          <div className="k-tile-bars">
            <span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
          <div className="k-tile-delta">↗ +38% vs. prev 7d</div>
        </div>

        {/* Tile 2 — IA content queue */}
        <div className="k-tile t-2">
          <div className="k-tile-label"><span>IA · CONTENT QUEUE</span><span style={{ color: "var(--accent)" }}>12</span></div>
          <div className="k-tile-queue">
            <div className="k-q-row"><span className="k-q-dot ok"></span><span>Hook · TikTok</span><span className="k-q-status ok">READY</span></div>
            <div className="k-q-row"><span className="k-q-dot warn"></span><span>UGC · Reels</span><span className="k-q-status warn">EDIT</span></div>
            <div className="k-q-row"><span className="k-q-dot"></span><span>Creative · Ads</span><span className="k-q-status">QUEUED</span></div>
            <div className="k-q-row"><span className="k-q-dot ok"></span><span>Caption · IG</span><span className="k-q-status ok">PUBLISH</span></div>
          </div>
        </div>

        {/* Tile 3 — Views counter */}
        <div className="k-tile t-3">
          <div className="k-tile-label"><span>VIEWS · 30D</span></div>
          <div className="k-tile-value">12.4<span className="k-tile-unit">M</span></div>
          <div className="k-tile-delta">↗ +280% vs. orgánico</div>
        </div>

        {/* Tile 4 — OpenAI Ads performance */}
        <div className="k-tile t-4">
          <div className="k-tile-label">
            <span>ANUNCIOS · OPENAI</span>
            <span className="k-live-dot"><span className="k-live-pulse" />LIVE</span>
          </div>
          <div className="k-tile-value">CTR 3.8%</div>
          <div className="k-tile-delta">↗ +1.4 pts vs. prev</div>
        </div>

        {/* Tile 5 — Prompt / IA */}
        <div className="k-tile t-5">
          <div className="k-tile-label"><span>IA · PROMPT</span><span style={{ color: "var(--success)" }}>GEN</span></div>
          <div className="k-prompt-line">{"> "}<span className="caret">hook viral · DTC · 15s</span></div>
          <div className="k-prompt-line dim">{"> "}generando 24 variaciones...</div>
        </div>
      </div>

      {/* Scan lines overlay */}
      <div className="k-hero-scan" aria-hidden="true" />

      <div className="k-hero-inner">
        <span className="k-hero-eyebrow k-anim">
          <Bolt className="bolt" /> IA Growth Studio
        </span>
        <h1 className="k-hero-headline k-anim delay-1">
          <span className="grad">IA Marketing</span> para marcas que quieren crecer de verdad.
        </h1>
        <p className="k-hero-sub k-anim delay-2">
          Combinamos inteligencia artificial, estrategia, contenido y performance para construir marcas preparadas para el futuro.
        </p>
        <div className="k-hero-cta-row k-anim delay-3">
          <a href="#cta" className="k-btn k-btn-primary k-btn-lg">
            Agenda una llamada <ArrowRight />
          </a>
          <a href="#casos" className="k-btn k-btn-ghost k-btn-lg">
            Ver casos <ArrowRight />
          </a>
        </div>

        <div className="k-hero-meta k-anim delay-4">
          <div className="k-hero-meta-item">
            <span className="k-live-dot"><span className="k-live-pulse" /></span>
            <span className="k-hero-meta-text">LATAM · US · REMOTE</span>
          </div>
          <div className="k-hero-meta-item">
            <span className="k-hero-meta-icon"><Bolt /></span>
            <span className="k-hero-meta-text">SISTEMAS DE CRECIMIENTO IMPULSADOS POR IA</span>
          </div>
        </div>
      </div>

      {/* Marquee of possibilities */}
      <div className="k-hero-marquee k-anim delay-5" aria-hidden="true">
        <div className="k-marquee-track">
          {[
          "Meta Ads", "TikTok Ads", "UGC", "Creators", "IA Content",
          "Automation", "Performance", "Growth", "Brand",
          "Dashboards", "Workflows", "Cinematic", "Strategy",
          "Meta Ads", "TikTok Ads", "UGC", "Creators", "IA Content",
          "Automation", "Performance", "Growth", "Brand",
          "Dashboards", "Workflows", "Cinematic", "Strategy"].
          map((t, i) =>
          <span key={i} className="k-marquee-item">
              <span className="k-marquee-dot">⚡</span>{t}
            </span>
          )}
        </div>
      </div>
    </section>);

}

function KClients() {
  return (
    <section className="k-clients k-anim" data-screen-label="02 Clientes">
      <div className="k-clients-label">Marcas que ya están creciendo con IA Marketing</div>
      <div className="k-clients-strip">
        <span className="k-client-logo" aria-label="NUA"
          style={{
            WebkitMaskImage: "url(" + window.B("assets/logo-nua-mask.png") + ")",
            maskImage: "url(" + window.B("assets/logo-nua-mask.png") + ")",
            width: 160, height: 64,
          }}>
          <span className="visually-hidden">NUA</span>
        </span>
        <span className="k-client-logo" aria-label="Akamai"
          style={{
            WebkitMaskImage: "url(" + window.B("assets/logo-akamai-mask.png") + ")",
            maskImage: "url(" + window.B("assets/logo-akamai-mask.png") + ")",
            width: 80, height: 96,
          }}>
          <span className="visually-hidden">Akamai</span>
        </span>
        <span className="k-client k-client-more">+10 marcas LATAM</span>
      </div>
    </section>);
}

function KServicios() {
  const items = [
  { num: "01", title: "IA Content Strategy", body: "Contenido diseñado para conectar, posicionar y convertir. Hooks, guiones y narrativas con IA + dirección humana.", glyph: "/" },
  { num: "02", title: "IA Performance Marketing", body: "Meta Ads y TikTok Ads optimizados con estrategia, testing creativo y automatización.", glyph: "↗" },
  { num: "03", title: "IA Creator Marketing", body: "Creators, UGC e influencers alineados a objetivos reales de marca y performance.", glyph: "*" },
  { num: "04", title: "IA Brand Growth", body: "Estrategias escalables para marcas modernas que quieren convertirse en categoría.", glyph: "+" },
  { num: "05", title: "IA Automation Systems", body: "Automatizaciones y herramientas para acelerar procesos de marketing.", glyph: "~" },
  { num: "06", title: "IA Visual Production", body: "Producción audiovisual cinematográfica para redes sociales y campañas.", glyph: "▢" }];

  return (
    <section className="k-section" id="servicios" data-screen-label="03 Servicios">
      <div className="k-section-head k-anim">
        <span className="k-eyebrow"><span className="k-dot" /> Servicios</span>
        <h2 className="k-h1">Sistemas de crecimiento <span className="k-grad-text">impulsados por IA</span>.</h2>
        <p className="k-body k-body-lg" style={{ maxWidth: 620 }}>
          Seis disciplinas integradas en un único sistema. Brand, performance, contenido, creators y automatización trabajando hacia el mismo objetivo: ventas.
        </p>
      </div>

      <div className="k-services-grid">
        {items.map((it, i) =>
        <article
          key={it.num}
          className={"k-service k-anim delay-" + (i % 3 + 1) + (i < 2 ? " feature" : "")}>
          
            <div className="k-service-glyph" data-glyph={it.glyph}>{it.glyph}</div>
            <div className="k-service-num">{it.num} / 06</div>
            <h3 className="k-service-title">{it.title}</h3>
            <p className="k-service-body">{it.body}</p>
            <a href={"servicios.html#" + it.num} className="k-service-arrow">
              Ver detalle <ArrowRight size={14} />
            </a>
          </article>
        )}
      </div>
    </section>);

}

Object.assign(window, { KHeader, KHero, KClients, KServicios, Bolt, ArrowRight, KSocials });