// landing.jsx — Hero, Cómo funciona, Ejemplos, FAQ, Footer

const { useState: uS_L, useEffect: uE_L, useRef: uRef_L } = React;

function Logo({ size = 'md' }) {
  return (
    <div className="logo" style={{ fontSize: size === 'lg' ? 28 : 20 }}>
      <span>SuenaBacán</span>
      <span className="tld">.cl</span>
    </div>
  );
}

function Counter() {
  const [n, setN] = uS_L(12847);
  uE_L(() => {
    const iv = setInterval(() => setN(v => v + (Math.random() < 0.4 ? 1 : 0)), 1800);
    return () => clearInterval(iv);
  }, []);
  return (
    <span className="stat-num">
      <span className="accent">{n.toLocaleString('es-CL')}</span>
    </span>
  );
}

function Nav({ onCreate, onHome }) {
  const [scrolled, setScrolled] = uS_L(false);
  uE_L(() => {
    const host = document.querySelector('.scroll-host');
    if (!host) return;
    const fn = () => setScrolled(host.scrollTop > 40);
    host.addEventListener('scroll', fn);
    return () => host.removeEventListener('scroll', fn);
  }, []);
  const go = (id) => {
    const el = document.getElementById(id);
    const host = document.querySelector('.scroll-host');
    if (el && host) host.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
    else if (onHome) onHome();
  };
  const goHome = () => {
    if (onHome) { onHome(); return; }
    const host = document.querySelector('.scroll-host');
    if (host) host.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <nav className="nav" style={{ background: scrolled ? 'color-mix(in oklab, var(--bg) 92%, transparent)' : 'color-mix(in oklab, var(--bg) 70%, transparent)' }}>
      <div style={{ cursor: 'pointer' }} onClick={goHome}><Logo /></div>
      <div className="nav-links">
        <a className="nav-link" href="/" onClick={goHome}>Inicio</a>
        <a className="nav-link" href="#como" onClick={() => go('como')}>Cómo funciona</a>
        <a className="nav-link" href="#ejemplos" onClick={() => go('ejemplos')}>Ejemplos</a>
        <a className="nav-link" href="#precios" onClick={() => go('precios')}>Precios</a>
        <a className="nav-link" href="#faq" onClick={() => go('faq')}>Preguntas</a>
      </div>
      <button className="btn btn-primary" onClick={onCreate}>
        Crear mi canción <Icon.Arrow />
      </button>
    </nav>
  );
}

function Hero({ onCreate }) {
  return (
    <section className="hero" id="home">
      <div className="hero-bg">
        <div className="hero-grid-bg" />
      </div>
      <div className="hero-inner">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start', maxWidth: 980 }}>
          <div className="hero-eyebrow">
            <span className="pulse" />
            IA musical · 100% personalizada · hecho en Chile
          </div>
          <h1 className="h1">
            Canciones personalizadas<br />
            pa' regalar <em>bacán</em>.
          </h1>
          <p className="hero-sub">
            La canción personalizada más emotiva de Chile. Cuéntanos quién es, qué le gusta y la ocasión — nosotros componemos una canción original con su nombre e historia. Lista en menos de 7 minutos, entregada por WhatsApp.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={onCreate}>
              <Icon.Sparkle size={16} />Crea la tuya — desde $9.990
            </button>
            <a className="btn btn-ghost btn-lg" onClick={() => {
              const el = document.getElementById('ejemplos');
              const host = document.querySelector('.scroll-host');
              if (el && host) host.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
            }}>
              <Icon.Play size={14} />Escuchar ejemplos
            </a>
          </div>
        </div>

        <HeroPlayer />

        <div className="hero-stats">
          <div>
            <Counter />
            <div className="stat-lbl">canciones creadas</div>
          </div>
          <div>
            <div className="stat-num">~4 <span className="accent">min</span></div>
            <div className="stat-lbl">tiempo promedio</div>
          </div>
          <div>
            <div className="stat-num">4.9<span className="accent">/5</span></div>
            <div className="stat-lbl">+2.300 reseñas</div>
          </div>
          <div>
            <div className="stat-num">12<span className="accent">+</span></div>
            <div className="stat-lbl">estilos musicales</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Steps() {
  const items = [
    {
      n: '01', icon: <Icon.Form />,
      t: 'Cuéntanos la historia',
      p: 'Llena un formulario corto con el nombre, la ocasión, anécdotas y el estilo musical que querís.',
    },
    {
      n: '02', icon: <Icon.Sparkle />,
      t: 'Nuestra IA compone',
      p: 'Cocinamos un prompt profesional y la IA escribe la letra y graba la canción en estudio virtual.',
    },
    {
      n: '03', icon: <Icon.Bolt />,
      t: 'Recíbela al tiro',
      p: 'Te llega por email y WhatsApp en menos de 5 minutos. Lista para sorprender.',
    },
  ];
  return (
    <section className="sec" id="como">
      <div className="sec-inner">
        <div className="sec-eyebrow">Cómo funciona</div>
        <h2 className="sec-title">Tres pasos. <em>Cero</em> drama.</h2>
        <p className="sec-sub">Sin software, sin esperar al primo músico. La canción sale lista pa'l WhatsApp.</p>
        <div className="steps">
          {items.map(it => (
            <div className="step-card" key={it.n}>
              <div className="step-num">{it.n}</div>
              <div className="step-icon">{it.icon}</div>
              <div className="step-h">{it.t}</div>
              <div className="step-p">{it.p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Examples() {
  const [playing, setPlaying] = uS_L(null);
  return (
    <section className="sec" id="ejemplos" style={{ background: 'color-mix(in oklab, var(--bg-2) 50%, var(--bg))' }}>
      <div className="sec-inner">
        <div className="sec-eyebrow">Ejemplos reales</div>
        <h2 className="sec-title">Escucha lo que <em>la gente</em><br />ha pedido.</h2>
        <p className="sec-sub">Tres canciones de regalos que ya volaron. Cada una hecha con datos del cumpleañero.</p>
        <div className="examples">
          {EXAMPLES.map(ex => (
            <ExampleCard
              key={ex.id}
              ex={ex}
              isPlaying={playing === ex.id}
              onToggle={() => setPlaying(p => p === ex.id ? null : ex.id)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function StyleSamples({ onUseStyle }) {
  const [playing, setPlaying] = uS_L(null);
  const trackRef = uRef_L(null);

  const scroll = (dir) => {
    if (!trackRef.current) return;
    const card = trackRef.current.querySelector('.style-sample-card');
    const amount = card ? card.offsetWidth + 16 : 320;
    trackRef.current.scrollBy({ left: dir * amount, behavior: 'smooth' });
  };

  return (
    <section className="sec" id="muestras">
      <div className="sec-inner">
        <div className="sec-eyebrow">Muestras reales</div>
        <h2 className="sec-title">Escucha <em>cómo suena</em><br />cada estilo.</h2>
        <p className="sec-sub">9 canciones reales generadas con IA. Usa un estilo que te guste como base para la tuya.</p>
        <div className="style-samples-carousel">
          <div className="style-samples-track-wrap" ref={trackRef}>
            <div className="style-samples-track">
              {STYLE_SAMPLES.map(sample => (
                <div key={sample.id} style={{ width: 300, flexShrink: 0, scrollSnapAlign: 'start' }}>
                  <StyleSampleCard
                    sample={sample}
                    isPlaying={playing === sample.id}
                    onToggle={() => setPlaying(p => p === sample.id ? null : sample.id)}
                    onUseStyle={onUseStyle}
                  />
                </div>
              ))}
            </div>
          </div>
          <div className="style-samples-nav">
            <button onClick={() => scroll(-1)} aria-label="Anterior">‹</button>
            <button onClick={() => scroll(1)} aria-label="Siguiente">›</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing({ onPick }) {
  return (
    <section className="sec" id="precios">
      <div className="sec-inner">
        <div className="sec-eyebrow">Planes</div>
        <h2 className="sec-title">Elige tu nivel<br />de <em>regalazo</em>.</h2>
        <p className="sec-sub">Sin suscripción. Pagas una vez, recibes tu canción. Somos el servicio más económico de Chile — otros cobran sobre $30.000.</p>
        <div className="plans">
          {PLANS.map(p => (
            <div key={p.id} className={`plan ${p.featured ? 'featured' : ''}`}>
              {p.badge && <div className="plan-badge">{p.badge}</div>}
              <div className="plan-name">{p.name}</div>
              <div className="plan-tag">{p.tag}</div>
              <div className="plan-price">
                <span className="currency">$</span>{p.price.toLocaleString('es-CL')}
              </div>
              <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--ink-3)' }}>CLP · pago único</div>
              <ul className="plan-features">
                {p.features.map((f, i) => (
                  <li key={i} className={f.on ? '' : 'muted'} style={{ opacity: f.on ? 1 : 0.4, textDecoration: f.on ? 'none' : 'line-through' }}>{f.t}</li>
                ))}
              </ul>
              <button
                className={p.featured ? 'btn btn-primary btn-block btn-lg' : 'btn btn-ghost btn-block btn-lg'}
                onClick={() => onPick(p.id)}
              >
                Elegir {p.name} <Icon.Arrow />
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── POR QUÉ NOSOTROS ────────────────────────────────────────
function WhyUs({ onCreate }) {
  const pros = [
    { icon: '👂', title: 'Escuchas antes de pagar', desc: 'Oyes la canción completa y editas la letra cuantas veces quieras. Solo pagas cuando estás convencido.' },
    { icon: '🎸', title: 'Tú eliges el estilo musical', desc: 'Cumbia, reggaeton, balada, rock, cueca y más. La canción suena exactamente como tú quieres.' },
    { icon: '✍️', title: 'Letra editable en tiempo real', desc: 'Pídele cambios a la IA en segundos. Agrega anécdotas, corrige nombres, ajusta el tono.' },
    { icon: '⚡', title: 'Lista en menos de 7 minutos', desc: 'Mientras la competencia te dice "48 horas", tú ya tienes la canción en el WhatsApp.' },
    { icon: '💸', title: 'El precio más bajo del mercado', desc: 'Desde $9.990 CLP. Otros servicios similares cobran sobre $30.000. Misma calidad, mejor precio.' },
    { icon: '🎵', title: '2 versiones a elegir', desc: 'Generamos dos versiones distintas para que elijas la que más te gusta antes de descargarla.' },
  ];

  const comp = [
    { label: 'Escuchar antes de pagar', us: true,  them: false },
    { label: 'Elegir el estilo musical', us: true,  them: false },
    { label: 'Editar la letra al instante', us: true,  them: false },
    { label: 'Entrega en menos de 10 min', us: true,  them: false },
    { label: 'Precio desde $9.990',        us: true,  them: false },
    { label: '2 versiones a comparar',     us: true,  them: false },
  ];

  return (
    <section className="sec" style={{ background: 'color-mix(in oklab, var(--bg-2) 60%, var(--bg))' }}>
      <div className="sec-inner">
        <div className="sec-eyebrow">Ventajas reales</div>
        <h2 className="sec-title">Lo que nos hace<br /><em>distintos</em>.</h2>
        <p className="sec-sub">
          Mientras otros te hacen esperar 24–48 horas sin mostrarte nada, nosotros te dejan escuchar, editar y elegir antes de pagar.
        </p>

        {/* Tarjetas de ventajas */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16, marginBottom: 56 }}>
          {pros.map((p, i) => (
            <div key={i} style={{
              background: 'var(--bg)',
              border: '1px solid color-mix(in oklab, var(--accent) 25%, transparent)',
              borderRadius: 16, padding: '22px 20px',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{ fontSize: 32 }}>{p.icon}</div>
              <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--ink)' }}>{p.title}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6 }}>{p.desc}</div>
            </div>
          ))}
        </div>

        {/* Tabla comparativa */}
        <div style={{ maxWidth: 560, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: '0', borderRadius: 14, overflow: 'hidden', border: '1px solid color-mix(in oklab, var(--accent) 20%, transparent)' }}>
            {/* Header */}
            <div style={{ padding: '12px 18px', background: 'var(--bg-2)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Característica</div>
            <div style={{ padding: '12px 18px', background: 'var(--accent)', color: 'var(--accent-ink)', fontWeight: 800, fontSize: 13, textAlign: 'center', whiteSpace: 'nowrap' }}>SuenaBacan</div>
            <div style={{ padding: '12px 18px', background: 'var(--bg-2)', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', textAlign: 'center', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Competencia</div>
            {/* Filas */}
            {comp.map((c, i) => (
              [
                <div key={`l${i}`} style={{ padding: '13px 18px', background: i % 2 === 0 ? 'var(--bg)' : 'color-mix(in oklab, var(--bg-2) 40%, var(--bg))', fontSize: 14, color: 'var(--ink-2)', borderTop: '1px solid color-mix(in oklab, var(--ink-3) 12%, transparent)' }}>{c.label}</div>,
                <div key={`u${i}`} style={{ padding: '13px 18px', background: i % 2 === 0 ? 'color-mix(in oklab, var(--accent) 10%, var(--bg))' : 'color-mix(in oklab, var(--accent) 8%, var(--bg))', textAlign: 'center', fontSize: 18, borderTop: '1px solid color-mix(in oklab, var(--accent) 15%, transparent)' }}>✅</div>,
                <div key={`t${i}`} style={{ padding: '13px 18px', background: i % 2 === 0 ? 'var(--bg)' : 'color-mix(in oklab, var(--bg-2) 40%, var(--bg))', textAlign: 'center', fontSize: 18, borderTop: '1px solid color-mix(in oklab, var(--ink-3) 12%, transparent)' }}>❌</div>,
              ]
            ))}
          </div>

          <div style={{ textAlign: 'center', marginTop: 28 }}>
            <button className="btn btn-primary btn-lg" onClick={onCreate}>
              <Icon.Sparkle size={16} /> Probar gratis — escucha antes de pagar
            </button>
            <p style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 10 }}>
              Sin registro · Sin tarjeta hasta que estés 100% conforme
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── RESEÑAS ─────────────────────────────────────────────────
const REVIEWS = [
  { name: 'Francisca M.',  occasion: 'Cumpleaños de papá',        style: '🎺 Cumbia',    stars: 5, text: 'Mi papá lloró cuando la escuchó. Mencionaba sus 30 años en la feria y hasta su perro Canelo. Increíble lo personalizado que quedó.' },
  { name: 'Tomás R.',      occasion: 'Aniversario',               style: '🎤 Reggaeton', stars: 5, text: 'Le regalé la canción a mi polola y quedó en shock. Sonaba tan real y hablaba exactamente de nosotros dos. Valió cada peso.' },
  { name: 'Patricia V.',   occasion: 'Día de la Madre',           style: '🎵 Balada',    stars: 5, text: 'Le dediqué una balada a mi mamá y se largó a llorar antes de que terminara. Decía su nombre, sus flores y hasta su famoso cazuela.' },
  { name: 'Sebastián C.',  occasion: 'Cumpleaños del hijo',       style: '🎸 Rock',      stars: 5, text: 'Mi cabro cumplió 15 y pedí una de rock. Mencionaba su equipo de fútbol, sus amigos y su apodo. Se sintió el más bacán del colegio.' },
  { name: 'Valentina P.',  occasion: 'Titulación amiga',          style: '🌟 Pop',       stars: 5, text: 'Hice una canción pop para mi mejor amiga cuando se tituló de psicóloga. Toda la fiesta la pidió de nuevo. Fue el mejor regalo de la noche.' },
  { name: 'Rodrigo A.',    occasion: 'Fiestas Patrias al abuelo', style: '🇨🇱 Cueca',    stars: 5, text: 'Le hice una cueca a mi abuelo de 80 años. Mencionaba su campo en Curicó y sus huasos. Le brillaron los ojos como nunca lo había visto.' },
  { name: 'Ignacio F.',    occasion: 'Cumpleaños del hermano',    style: '🔥 Trap',      stars: 5, text: 'Para mi hermano mayor pedí algo oscuro y épico. Quedó brutal. Hasta sus amigos me preguntaron cómo la hice. Sin duda la volvería a pedir.' },
  { name: 'Carolina T.',   occasion: 'Pedida de matrimonio',      style: '🎺 Mariachi',  stars: 5, text: 'Mi marido me pidió en matrimonio con esta canción. No podía creer que mencionara el día que nos conocimos en Valparaíso. Perfecto.' },
  { name: 'Marcelo B.',    occasion: 'Día del Padre',             style: '🎺 Cumbia',    stars: 5, text: 'Mis hijos me regalaron esta canción y fue lo mejor que me han dado en años. Hablaba de mis historias, mi trabajo, mis chistes malos. ¡Genial!' },
  { name: 'Daniela S.',    occasion: 'Declaración de amor',       style: '🎵 Balada',    stars: 5, text: 'Usé la canción para decirle que la amaba. Mencionaba el café donde nos conocimos y su risa. Dijo que sí. SuenaBacan me salvó la vida.' },
];

function ReviewCard({ r }) {
  return (
    <div style={{
      minWidth: 300, maxWidth: 300,
      background: 'color-mix(in oklab, var(--bg-2) 80%, var(--bg))',
      border: '1px solid color-mix(in oklab, var(--accent) 20%, transparent)',
      borderRadius: 16, padding: '20px 22px',
      display: 'flex', flexDirection: 'column', gap: 10,
      flexShrink: 0,
    }}>
      <div style={{ display: 'flex', gap: 2 }}>
        {'★★★★★'.split('').map((s, i) => (
          <span key={i} style={{ color: '#f59e0b', fontSize: 16 }}>{s}</span>
        ))}
      </div>
      <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, margin: 0, flexGrow: 1 }}>
        "{r.text}"
      </p>
      <div style={{ borderTop: '1px solid color-mix(in oklab, var(--ink-3) 20%, transparent)', paddingTop: 10 }}>
        <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--ink)' }}>{r.name}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{r.style} · {r.occasion}</div>
      </div>
    </div>
  );
}

function Reviews() {
  // Duplicamos para el loop infinito
  const all = [...REVIEWS, ...REVIEWS];

  uE_L(() => {
    if (document.getElementById('reviews-style')) return;
    const st = document.createElement('style');
    st.id = 'reviews-style';
    st.textContent = `
      @keyframes marquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      .reviews-track {
        animation: marquee 40s linear infinite;
      }
      .reviews-track:hover {
        animation-play-state: paused;
      }
    `;
    document.head.appendChild(st);
  }, []);

  return (
    <section className="sec" style={{ overflow: 'hidden', paddingBottom: 60 }}>
      <div className="sec-inner" style={{ paddingBottom: 0 }}>
        <div className="sec-eyebrow">Lo que dicen</div>
        <h2 className="sec-title">Más de 2.300 personas<br />ya <em>sorprendieron</em> a alguien.</h2>
        <p className="sec-sub">Canciones para papás, mamás, hijos, parejas, amigos y abuelitos. De cumbia a balada.</p>
      </div>

      {/* Carrusel */}
      <div style={{ overflow: 'hidden', marginTop: 40, position: 'relative' }}>
        {/* Fade izquierda */}
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 80, zIndex: 2,
          background: 'linear-gradient(to right, var(--bg), transparent)',
          pointerEvents: 'none',
        }} />
        {/* Fade derecha */}
        <div style={{
          position: 'absolute', right: 0, top: 0, bottom: 0, width: 80, zIndex: 2,
          background: 'linear-gradient(to left, var(--bg), transparent)',
          pointerEvents: 'none',
        }} />

        <div className="reviews-track" style={{
          display: 'flex', gap: 16,
          width: 'max-content', padding: '8px 16px',
        }}>
          {all.map((r, i) => <ReviewCard key={i} r={r} />)}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const [open, setOpen] = uS_L(0);
  return (
    <section className="sec" id="faq">
      <div className="sec-inner">
        <div className="sec-eyebrow">Preguntas frecuentes</div>
        <h2 className="sec-title">¿Te quedó alguna<br /><em>duda</em>?</h2>
        <div className="faq-list">
          {FAQ.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(o => o === i ? -1 : i)}>
                {f.q}
                <span className="icon"><Icon.Plus size={22} /></span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OcasionesSection({ onCreate }) {
  const ocasiones = [
    { emoji: '🎂', label: 'Cumpleaños', kw: 'canción de cumpleaños personalizada' },
    { emoji: '💍', label: 'Aniversario', kw: 'canción de aniversario original' },
    { emoji: '👩', label: 'Día de la Madre', kw: 'regalo día de la madre chile' },
    { emoji: '👨', label: 'Día del Padre', kw: 'regalo día del padre chile' },
    { emoji: '💒', label: 'Matrimonio', kw: 'canción para boda personalizada' },
    { emoji: '🎓', label: 'Titulación', kw: 'regalo de titulación original' },
    { emoji: '💑', label: 'San Valentín', kw: 'canción romántica para regalo' },
    { emoji: '🏢', label: 'Empresa', kw: 'himno corporativo personalizado' },
  ];
  const estilos = ['Cumbia','Reggaeton','Rock','Balada','Pop','Cueca','Trap','Mariachi'];
  return (
    <section className="sec" style={{ paddingTop: 48, paddingBottom: 48, background: 'color-mix(in oklab, var(--bg-2) 30%, var(--bg))' }}>
      <div className="sec-inner">
        <div className="sec-eyebrow">Para cada momento</div>
        <h2 className="sec-title" style={{ fontSize: 'clamp(24px,4vw,36px)' }}>
          Una canción personalizada<br />para <em>cada ocasión</em>.
        </h2>
        <p className="sec-sub">
          Canciones personalizadas para cumpleaños, bodas, aniversarios, Día de la Madre, Día del Padre, titulaciones y más.
          Elige entre cumbia, balada, reggaeton, rock, cueca y más estilos musicales.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center', marginBottom: 32 }}>
          {ocasiones.map((o, i) => (
            <button key={i} onClick={onCreate}
              aria-label={o.kw}
              style={{
                padding: '10px 18px', borderRadius: 99,
                background: 'var(--bg-2)', border: '1px solid color-mix(in oklab, var(--accent) 25%, transparent)',
                color: 'var(--ink-2)', fontSize: 14, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6,
              }}>
              <span>{o.emoji}</span> {o.label}
            </button>
          ))}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginBottom: 28 }}>
          {estilos.map((e, i) => (
            <button key={i} onClick={onCreate}
              aria-label={`Canción ${e.toLowerCase()} personalizada chile`}
              style={{
                padding: '7px 14px', borderRadius: 99, fontSize: 12,
                background: 'transparent', border: '1px solid color-mix(in oklab, var(--ink-3) 30%, transparent)',
                color: 'var(--ink-3)', cursor: 'pointer',
              }}>
              {e}
            </button>
          ))}
        </div>
        <div style={{ textAlign: 'center' }}>
          <button className="btn btn-primary" onClick={onCreate}>
            <Icon.Sparkle size={14} /> Crear mi canción personalizada
          </button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div>
          <Logo size="lg" />
          <p style={{ color: 'var(--ink-3)', fontSize: 14, marginTop: 16, maxWidth: 320, lineHeight: 1.55 }}>
            Música personalizada hecha con IA, prompteada con cariño chileno. Cumpleaños, regalos, declaraciones, bromas pesadas.
          </p>
        </div>
        <div className="foot-cols">
          <h4>Producto</h4>
          <a>Cómo funciona</a>
          <a>Ejemplos</a>
          <a>Precios</a>
          <a>Estilos musicales</a>
        </div>
        <div className="foot-cols">
          <h4>Soporte</h4>
          <a href="https://wa.me/56952285319" target="_blank" rel="noopener noreferrer">WhatsApp +56 9 5228 5319</a>
          <a>hola@suenabacan.cl</a>
          <a>Preguntas frecuentes</a>
          <a>Política de devolución</a>
        </div>
        <div className="foot-cols">
          <h4>Legal</h4>
          <a>Términos de uso</a>
          <a>Privacidad</a>
          <a>Derechos de canción</a>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 SuenaBacan SpA · Hecho en Chile 🇨🇱</span>
        <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="/terminos.html" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-3)', fontSize: 12, textDecoration: 'none' }}>Términos y Condiciones</a>
          <a href="/privacidad.html" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-3)', fontSize: 12, textDecoration: 'none' }}>Privacidad</a>
          <a href="/reembolso.html" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink-3)', fontSize: 12, textDecoration: 'none' }}>Reembolsos</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, Nav, Hero, Steps, Examples, StyleSamples, Pricing, WhyUs, Reviews, FAQSection, OcasionesSection, Footer });