/* global React, window */
const { useState } = React;
const { Icon, CountUp } = window;

const SvcMarquee = () => {
  const items = ["Identidad de marca", "Creación de contenido", "Publicidad digital", "Dirección estratégica", "Propuesta comercial", "Interiorismo comercial"];
  const full = [...items, ...items, ...items];
  return (
    <div className="svc-marquee marquee" aria-hidden style={{ fontFamily: '"Space Grotesk", sans-serif' }}>
      <div className="marquee-track">
        {full.map((t, i) => (
          <span key={i} className="svc-marquee-item">
            <span className="svc-marquee-dot" /> {t}
          </span>
        ))}
      </div>
    </div>
  );
};

// ============ Variant A: Dark spotlight ============
const HeroDark = () => (
  <section id="top" data-theme="dark" className="hero-wrap">
    <div className="hero-dark">
      <div className="hero-grid" />
      <div className="hero-spot" />
      <div className="blob blob-slow" style={{ width: 520, height: 520, background: "radial-gradient(circle, rgba(182,255,59,.35), transparent 70%)", top: -120, right: -80 }} />
      <div className="blob blob-med" style={{ width: 420, height: 420, background: "radial-gradient(circle, rgba(0,93,255,.25), transparent 70%)", bottom: -100, left: -60 }} />

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div className="reveal" style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 40 }}>
          <span className="hero-kicker-dot" />
          <span className="mono" style={{ color: "rgba(244,244,242,.6)" }}>Agencia de marca · Desde 2023</span>
        </div>

        <h1 className="reveal reveal-d1 hero-headline" style={{ textWrap: "balance", maxWidth: "16ch" }}>
          Marcas que <span className="serif" style={{ color: "var(--accent)" }}>dicen algo</span>
          <br />antes de decir todo.
        </h1>

        <div className="reveal reveal-d2" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 40, alignItems: "end", marginTop: 48, maxWidth: 1120 }}>
          <p style={{ color: "rgba(244,244,242,.65)", fontSize: 20, lineHeight: 1.5, maxWidth: "48ch" }}>
            Estrategia, identidad y contenido. Construimos lo que tu marca necesita para que todo hable el mismo idioma — empezando por el diagnóstico, no por la ejecución.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn btn-lime" href={window.DATA.WHATSAPP_URL} target="_blank" rel="noreferrer">WhatsApp <Icon name="arrow" size={14} /></a>
            <a className="btn btn-ghost" style={{ color: "#f4f4f2", borderColor: "rgba(255,255,255,.2)" }} href="#method">¿Como lo hacemos?</a>
          </div>
        </div>

        <div className="reveal reveal-d3 hero-stat-row" style={{ marginTop: 80 }}>
          <div className="hero-stat"><span className="hero-stat-n"><CountUp to={30} /></span><span className="hero-stat-l">Días · proceso completo</span></div>
          <div className="hero-stat"><span className="hero-stat-n"><CountUp to={40} prefix="+" /></span><span className="hero-stat-l">Marcas acompañadas</span></div>
          <div className="hero-stat"><span className="hero-stat-n"><CountUp to={4} suffix="" /></span><span className="hero-stat-l">Pilares · oferta · comunicación · marca · ejecución</span></div>
          <div className="hero-stat"><span className="hero-stat-n"><CountUp to={1} /></span><span className="hero-stat-l">Diagnóstico antes de todo</span></div>
        </div>
      </div>
    </div>
    <SvcMarquee />
  </section>
);

// ============ Variant B: Split layout ============
const HeroSplit = () => (
  <section id="top" data-theme="dark" className="hero-wrap hero-split">
    <div className="blob blob-slow" style={{ width: 380, height: 380, background: "radial-gradient(circle, rgba(182,255,59,.35), transparent 70%)", top: 60, right: -60 }} />
    <div className="container">
      <div className="reveal" style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32 }}>
        <span className="hero-kicker-dot" />
        <span className="mono" style={{ color: "var(--fg-muted)" }}>Agencia de marca · Desde 2025</span>
      </div>
      <div className="grid">
        <div>
          <h1 className="reveal reveal-d1 hero-headline" style={{ textWrap: "balance" }}>
            Antes de comunicar,<br /><span className="serif">entendemos</span> qué hay que decir.
          </h1>
          <p className="reveal reveal-d2 hero-lead">
            Construímos lo que tu marca necesita para diferenciarte en un mercado saturado.
          </p>
          <div className="reveal reveal-d3" style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <a className="btn btn-lime" href={window.DATA.WHATSAPP_URL} target="_blank" rel="noreferrer">WhatsApp <Icon name="arrow" size={14} /></a>
            <a className="btn btn-ghost" href="#method">¿Como lo hacemos?</a>
          </div>
        </div>
        <div className="reveal reveal-d2 hero-media">
          <div className="placeholder hero-media-placeholder">
            <span>Brand film · Próximamente</span>
          </div>
          <div className="hero-method-card">
            <div className="mono hero-method-kicker">Método GEMSTONE</div>
            <div className="hero-method-title">4 semanas · 4 fases · 1 resultado</div>
            <div className="hero-method-divider" />
            <div className="hero-method-bars">
              {[1,2,3,4].map(i => <div key={i} className={`hero-method-bar ${i === 1 ? "is-active" : ""}`} />)}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style={{ marginTop: 100 }}><SvcMarquee /></div>
  </section>
);

// ============ Variant C: Marquee under ============
const HeroMarq = () => (
  <section id="top" data-theme="light" className="hero-wrap hero-marq dot-grid">
    <div className="blob blob-slow" style={{ width: 480, height: 480, background: "radial-gradient(circle, rgba(182,255,59,.35), transparent 70%)", top: -80, left: "50%", transform: "translateX(-50%)" }} />
    <div className="container" style={{ position: "relative", zIndex: 2 }}>
      <div className="reveal" style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 14, marginBottom: 32 }}>
        <span className="hero-kicker-dot" />
        <span className="mono" style={{ color: "var(--fg-muted)" }}>Agencia de marca · Desde 2023</span>
      </div>
      <div className="headline">
        <h1 className="reveal reveal-d1 hero-headline" style={{ textWrap: "balance" }}>
          Primero el <span className="serif">diagnóstico</span>.<br />Después todo lo demás.
        </h1>
        <p className="reveal reveal-d2" style={{ color: "var(--fg-muted)", fontSize: 19, lineHeight: 1.55, maxWidth: "52ch", margin: "32px auto 0" }}>
          Estrategia, identidad y contenido para marcas que quieren decir algo real antes de comunicar todo.
        </p>
        <div className="reveal reveal-d3" style={{ display: "flex", gap: 12, marginTop: 36, justifyContent: "center", flexWrap: "wrap" }}>
          <a className="btn btn-lime" href={window.DATA.WHATSAPP_URL} target="_blank" rel="noreferrer">WhatsApp <Icon name="arrow" size={14} /></a>
          <a className="btn btn-ghost" href="#method">¿Como lo hacemos?</a>
        </div>
      </div>
    </div>
    <div style={{ marginTop: 100 }}><SvcMarquee /></div>
  </section>
);

const Hero = ({ variant }) => {
  if (variant === "split") return <HeroSplit />;
  if (variant === "marq") return <HeroMarq />;
  return <HeroDark />;
};

window.Hero = Hero;
