// Pricing, Testimonials, FAQ, Form, Footer + App root.
const { useState: useStateA, useEffect: useEffectA } = React;

/* ===== CONFIGURACIÓN DE CONTACTO — cambia estos 3 valores y el sitio queda operativo =====
   WHATSAPP: tu número con prefijo de país, solo dígitos. Ej. España 34612345678
   EMAIL:    dónde quieres recibir los pedidos
   ENDPOINT: si contratas un servicio de formularios, pega aquí su dirección.
             Si lo dejas vacío, el formulario abre WhatsApp con el pedido ya escrito. */
const CONTACTO = {
  WHATSAPP: '34600919298',
  EMAIL: '',
  ENDPOINT: '',
};
window.CONTACTO = CONTACTO;

/* ===== PRECIOS POR REGIÓN =====
   Cada pack lleva su importe en cada moneda. Cambia los números libremente:
   no hay conversión automática, tú fijas el precio de cada mercado.
   Se detecta por zona horaria del visitante; él puede cambiarla con el selector. */
const MONEDAS = {
  EUR: { code: 'EUR', symbol: '€', suffix: true, label: '€ EUR', note: 'IVA incluido · Pago seguro · Garantía de revisión incluida en todos los packs' },
  ARS: { code: 'ARS', symbol: '$', suffix: false, label: '$ ARS', miles: true, note: 'Precios en pesos argentinos · Pago seguro · Garantía de revisión incluida en todos los packs' },
};

/* Importes por pack y moneda. Los de ARS son de referencia: revísalos
   cuando cambie el tipo de cambio, no hay conversión automática. */
const PRECIOS = {
  single: { EUR: 50, ARS: 75000 },
  ep:     { EUR: 40, ARS: 60000 },
  album:  { EUR: 30, ARS: 45000 },
  demo:   { EUR: 25, ARS: 25000 },
};

// Zonas horarias que ven precios en pesos argentinos.
const ZONAS_ARS = ['America/Argentina'];

function monedaPorDefecto() {
  try {
    const guardada = localStorage.getItem('bi_moneda');
    if (guardada && MONEDAS[guardada]) return guardada;
    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || '';
    if (ZONAS_ARS.some(z => tz.startsWith(z))) return 'ARS';
  } catch (e) { /* sin localStorage o sin Intl */ }
  return 'EUR';
}

function fmtNumero(valor, moneda) {
  if (!MONEDAS[moneda].miles) return String(valor);
  try { return valor.toLocaleString('es-AR'); } catch (e) { return String(valor); }
}

function fmtPrecio(valor, moneda) {
  const m = MONEDAS[moneda];
  const n = fmtNumero(valor, moneda);
  return m.suffix ? `${n}${m.symbol}` : `${m.symbol}${n}`;
}

/* Importe en las tarjetas: número protagonista, símbolo discreto. */
function Importe({ valor, moneda, grande }) {
  const m = MONEDAS[moneda];
  const numCls = `${grande ? 'text-3xl' : 'text-2xl'} font-display font-bold text-marca-invisible-dark`;
  const symCls = 'text-base font-semibold text-marca-invisible-dark/85';
  return (
    <span className="inline-flex items-baseline gap-1">
      {!m.suffix && <span className={symCls}>{m.symbol}</span>}
      <span className={numCls}>{fmtNumero(valor, moneda)}</span>
      {m.suffix && <span className={symCls}>{m.symbol}</span>}
    </span>
  );
}
window.MONEDAS = MONEDAS;
window.PRECIOS = PRECIOS;
window.fmtPrecio = fmtPrecio;

function etiquetasPack(moneda) {
  return {
    single: `Single — ${fmtPrecio(PRECIOS.single[moneda], moneda)}`,
    ep: `EP — desde ${fmtPrecio(PRECIOS.ep[moneda], moneda)}/canción`,
    album: `Álbum Experience — desde ${fmtPrecio(PRECIOS.album[moneda], moneda)}/canción`,
    demo: `Demo — ${fmtPrecio(PRECIOS.demo[moneda], moneda)}`,
    undecided: 'Aún no lo sé, asesórame',
  };
}

const PACK_LABELS = {
  single: 'Single',
  ep: 'EP',
  album: 'Álbum Experience',
  demo: 'Demo',
  undecided: 'Aún no lo sé, asesórame',
};

/* ============ PRICING ============ */
function Pricing({ onSelectPack, moneda, setMoneda }) {
  const packs = [
    {
      id: 'single',
      tag: 'Single',
      subtitle: '1 canción',
      prefix: '',
      price: '50',
      unit: '',
      blurb: 'Tu canción publicada y lista para el mundo. Producción, portada y distribución en un solo paso.',
      features: [
        '1 canción con calidad de estudio',
        'Portada profesional incluida',
        'Distribución global en plataformas',
        'Licencia: 100% Derechos Comerciales',
      ],
      cta: 'Producir mi single',
      highlighted: false,
    },
    {
      id: 'ep',
      tag: 'EP',
      subtitle: '3 a 5 canciones',
      prefix: 'desde',
      price: '40',
      unit: '/ canción',
      blurb: 'Un cuerpo de obra con voz propia. Identidad visual unificada para que tus canciones suenen y se vean como un mismo proyecto.',
      features: [
        'De 3 a 5 canciones producidas',
        'Identidad visual unificada del EP',
        'Portada profesional incluida',
        'Distribución global en plataformas',
      ],
      cta: 'Empezar mi EP',
      highlighted: true,
    },
    {
      id: 'album',
      tag: 'Álbum Experience',
      subtitle: '10+ canciones',
      prefix: 'desde',
      price: '30',
      unit: '/ canción',
      blurb: 'La obra completa. Dirección de arte integral y estrategia de lanzamiento para proyectos de largo alcance.',
      features: [
        '10 o más canciones producidas',
        'Dirección de arte integral',
        'Estrategia de lanzamiento',
        'Pistas separadas para editar a tu gusto',
        'Portada y distribución incluidas',
      ],
      cta: 'Hablar de mi álbum',
      highlighted: false,
    },
  ];

  return (
    <section id="precios" className="py-20 sm:py-28 bg-fondo-tarjeta/50">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-6">
          <div className="max-w-3xl">
            <div className="text-[11px] uppercase tracking-[0.18em] text-marca-banda font-semibold">Estrategia de precios</div>
            <h2 className="mt-3 text-3xl sm:text-5xl text-marca-invisible-dark font-bold leading-tight" style={{textWrap: 'balance'}}>
              Tres formatos. Una sola obra: la tuya.
            </h2>
            <p className="mt-5 text-lg text-texto-oscuro/75">Elige según el destino final de tu canción. Sin costes ocultos.</p>
          </div>
          <div className="flex-shrink-0">
            <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-texto-oscuro/50 mb-2">Moneda</div>
            <div className="inline-flex bg-white rounded-full p-1" style={{ border: '1px solid rgba(44,75,96,0.10)' }}>
              {Object.keys(MONEDAS).map(k => (
                <button
                  key={k}
                  onClick={() => setMoneda(k)}
                  className={`px-4 rounded-full text-xs font-semibold transition-colors ${
                    moneda === k ? 'bg-marca-invisible-dark text-white' : 'text-texto-oscuro/60 hover:text-marca-invisible-dark'
                  }`}
                  style={{ minHeight: '44px' }}
                >
                  {MONEDAS[k].label}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-12 grid lg:grid-cols-3 gap-6">
          {packs.map((p) => (
            <div
              key={p.tag}
              className={`relative rounded-2xl bg-fondo-principal p-7 sm:p-8 flex flex-col ${p.highlighted ? 'shadow-card' : 'shadow-soft'}`}
              style={p.highlighted ? { border: '1.5px solid #E23E44' } : { border: '1px solid rgba(44,75,96,0.08)' }}
            >
              {p.highlighted && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-marca-banda text-white text-[10px] font-bold uppercase tracking-[0.16em] px-3 py-1 rounded-full">
                  Más elegido
                </div>
              )}
              <div className="flex items-baseline justify-between">
                <div>
                  <div className="text-xs font-mono uppercase tracking-[0.16em] text-marca-invisible">{p.subtitle}</div>
                  <h3 className="mt-1 text-2xl font-bold text-marca-invisible-dark font-display">{p.tag}</h3>
                </div>
              </div>
              <div className="mt-6 flex items-end gap-1.5">
                {p.prefix && <span className="text-sm text-texto-oscuro/55 pb-1">{p.prefix}</span>}
                <Importe valor={PRECIOS[p.id][moneda]} moneda={moneda} grande={!p.prefix} />
                {p.unit && <span className="text-sm text-texto-oscuro/55 pb-1">{p.unit}</span>}
              </div>
              <p className="mt-4 text-[15px] text-texto-oscuro/75 leading-relaxed">{p.blurb}</p>

              <ul className="mt-6 space-y-3 flex-1">
                {p.features.map(f => (
                  <li key={f} className="flex items-start gap-3 text-sm text-texto-oscuro/85">
                    <span className={`mt-0.5 flex-shrink-0 w-5 h-5 rounded-full ${p.highlighted ? 'bg-marca-banda/15 text-marca-banda' : 'bg-marca-invisible/15 text-marca-invisible'} flex items-center justify-center`}>
                      <IconCheck size={12} />
                    </span>
                    <span className="leading-snug">{f}</span>
                  </li>
                ))}
              </ul>

              <a
                href="#contacto"
                onClick={() => onSelectPack && onSelectPack(p.id)}
                className={`mt-8 w-full inline-flex items-center justify-center gap-2 text-sm font-semibold py-3.5 rounded-full transition-colors ${
                  p.highlighted
                    ? 'bg-marca-banda hover:bg-marca-banda-dark text-white shadow-md'
                    : 'bg-white text-marca-invisible-dark border border-marca-invisible/20 hover:border-marca-invisible-dark'
                }`}
              >
                {p.cta}
                <IconArrowRight size={14} />
              </a>
            </div>
          ))}
        </div>

        <div className="mt-10 flex justify-center">
          <a
            href="#contacto"
            onClick={() => onSelectPack && onSelectPack('demo')}
            className="group inline-flex items-center gap-4 bg-white rounded-full pl-5 pr-6 py-4 shadow-soft transition-all"
            style={{ border: '1.5px dashed rgba(226,62,68,0.45)' }}
          >
            <span className="flex-shrink-0 w-10 h-10 rounded-full bg-marca-banda/12 text-marca-banda flex items-center justify-center">
              <WaveformAnim size={14} />
            </span>
            <span className="text-left">
              <span className="inline-flex items-center gap-2 bg-marca-banda text-white text-[10px] font-bold uppercase tracking-[0.16em] px-2 py-1 rounded-full">
                Precio lanzamiento
              </span>
              <span className="block mt-1.5 text-sm text-texto-oscuro/70">¿No estás seguro? Empieza con una Demo</span>
              <span className="flex items-baseline gap-2 mt-1">
                <span className="text-lg sm:text-xl font-display font-bold text-marca-banda">
                  {fmtPrecio(PRECIOS.demo[moneda], moneda)}
                </span>
                <span className="text-xs text-texto-oscuro/55">por tiempo limitado</span>
              </span>
            </span>
            <span className="flex-shrink-0 text-marca-banda transition-transform group-hover:scale-105">
              <IconArrowRight size={18} />
            </span>
          </a>
        </div>

        <p className="mt-10 text-center text-xs text-texto-oscuro/55 font-mono">
          {MONEDAS[moneda].note}
        </p>
      </div>
    </section>
  );
}

/* ============ TESTIMONIALS ============ */
function Testimonials() {
  const quotes = [
    {
      text: 'Siempre escribí poesía, pero nunca imaginé que mis versos podrían sonar en Spotify con una banda de rock profesional detrás. Increíble cómo captaron la esencia.',
      name: 'Elena R.',
      role: 'Escritora',
      initials: 'ER',
      color: '#E23E44',
    },
    {
      text: 'Tenía un cajón lleno de letras guardadas por años. Poder escucharlas masterizadas en formato WAV con esta calidad y sin arruinarme en un estudio ha sido un sueño realizado.',
      name: 'Carlos D.',
      role: 'Autor Independiente',
      initials: 'CD',
      color: '#4F81A1',
    },
    {
      text: 'El proceso fue limpio y rápido. Definí el género, mandé el texto y en tiempo récord tenía un single que podía publicar sin tocar nada más. Sin estudios, sin esperas eternas.',
      name: 'M. Aguilar',
      role: 'Cantautor amateur',
      initials: 'MA',
      color: '#2C4B60',
    },
  ];

  return (
    <section className="py-20 sm:py-28">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <div className="max-w-3xl">
          <div className="text-[11px] uppercase tracking-[0.18em] text-marca-banda font-semibold">Testimonios</div>
          <h2 className="mt-3 text-3xl sm:text-5xl text-marca-invisible-dark font-bold leading-tight" style={{textWrap: 'balance'}}>
            Autores que ya tienen su canción.
          </h2>
        </div>

        <div className="mt-12 grid md:grid-cols-3 gap-6">
          {quotes.map((q) => (
            <figure key={q.name} className="bg-fondo-tarjeta rounded-2xl p-7 sm:p-8 flex flex-col">
              <div className="text-marca-banda text-5xl font-display leading-none -mt-2">“</div>
              <blockquote className="mt-2 text-[15px] sm:text-base leading-relaxed text-texto-oscuro/85 flex-1">
                {q.text}
              </blockquote>
              <figcaption className="mt-6 flex items-center gap-3 pt-5 border-t border-marca-invisible/15">
                <div className="w-10 h-10 rounded-full flex items-center justify-center text-white text-xs font-semibold" style={{ background: q.color }}>
                  {q.initials}
                </div>
                <div>
                  <div className="text-sm font-semibold text-marca-invisible-dark">{q.name}</div>
                  <div className="text-xs text-texto-oscuro/55">{q.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function FAQ() {
  const items = [
    { q: '¿De quién son los derechos de la canción generada?', a: 'Si adquieres el plan Comercial/Pro o Studio, tú eres el dueño absoluto del máster final. Te cedemos el 100% de los derechos de explotación para que la monetices donde quieras.' },
    { q: '¿Puedo subir la canción a Spotify o YouTube?', a: 'Sí, con el plan comercial la canción cumple con los estándares de calidad de la industria y legalmente te pertenece para su distribución en plataformas de streaming.' },
    { q: '¿Cómo indico el estilo de voz que quiero?', a: 'En el formulario de pedido podrás especificarnos si buscas una voz masculina, femenina, rasgada, limpia, melódica o hablada. Ajustaremos la producción a tus indicaciones.' },
    { q: '¿Qué pasa si mi letra no tiene estructura de canción?', a: 'No te preocupes. Adaptamos tu texto libre o poesía para que encaje métricamente en una estructura musical lógica y atractiva.' },
    { q: '¿Puedo pedir cambios si no me convence el estilo inicial?', a: 'Totalmente. Ofrecemos diferentes pruebas y variaciones de la canción según tu pack para asegurarnos de dar con el sonido exacto que imaginabas.' },
    { q: '¿Cómo funciona la distribución?', a: 'Te entregamos los archivos finales limpios para que hagas lo que quieras con ellos (en formatos MP3 y WAV), o si lo prefieres, te ofrecemos la opción de subirlos directamente a todas las plataformas de streaming disponibles a través de nuestra distribuidora asociada.' },
    { q: '¿Puedo recibir las pistas por separado para editarlas yo?', a: 'Sí. Si lo necesitas, te entregamos las pistas separadas de la canción —voz, batería, bajo e instrumentos— para que puedas remezclarla, ajustar niveles o trabajarla en tu propio programa de edición. Indícanoslo al hacer el pedido y lo incluimos en la entrega.' },
  ];
  const [open, setOpen] = useStateA(0);

  return (
    <section id="faq" className="py-20 sm:py-28 bg-fondo-tarjeta/50">
      <div className="max-w-5xl mx-auto px-5 sm:px-8">
        <div className="max-w-3xl">
          <div className="text-[11px] uppercase tracking-[0.18em] text-marca-banda font-semibold">Preguntas frecuentes</div>
          <h2 className="mt-3 text-3xl sm:text-5xl text-marca-invisible-dark font-bold leading-tight" style={{textWrap: 'balance'}}>
            Lo que necesitas saber antes de empezar.
          </h2>
        </div>
        <div className="mt-12 rounded-2xl bg-fondo-principal border border-marca-invisible/12 overflow-hidden">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`${i > 0 ? 'border-t border-marca-invisible/10' : ''}`}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="w-full px-6 sm:px-8 py-5 sm:py-6 flex items-start justify-between gap-6 text-left group"
                >
                  <span className={`text-base sm:text-lg font-semibold leading-snug pr-2 ${isOpen ? 'text-marca-invisible-dark' : 'text-marca-invisible-dark/85'}`}>
                    {it.q}
                  </span>
                  <span className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-all ${isOpen ? 'bg-marca-banda text-white rotate-45' : 'bg-marca-invisible/10 text-marca-invisible-dark'}`}>
                    <IconPlus size={16} />
                  </span>
                </button>
                <div className={`accordion-content ${isOpen ? 'open' : ''}`}>
                  <div>
                    <div className="px-6 sm:px-8 pb-6 -mt-1 text-[15px] leading-relaxed text-texto-oscuro/75 max-w-3xl">
                      {it.a}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============ CONTACT FORM ============ */
function ContactForm({ presetPack, moneda }) {
  const LABELS = etiquetasPack(moneda);
  const [form, setForm] = useStateA({ name: '', email: '', pack: 'ep', text: '' });
  const [submitted, setSubmitted] = useStateA(false);
  const [touched, setTouched] = useStateA({});

  useEffectA(() => {
    if (presetPack) setForm(f => ({ ...f, pack: presetPack }));
  }, [presetPack]);

  const [sending, setSending] = useStateA(false);
  const [sendError, setSendError] = useStateA('');

  const validate = () => {
    return form.name.trim().length >= 2 && /\S+@\S+\.\S+/.test(form.email) && form.text.trim().length >= 10;
  };

  const buildMessage = () => (
    `Hola, quiero producir mi canción.\n\n` +
    `Nombre: ${form.name}\n` +
    `Email: ${form.email}\n` +
    `Pack: ${LABELS[form.pack] || form.pack}\n\n` +
    `Mi letra / idea:\n${form.text}`
  );

  const openWhatsApp = () => {
    const url = `https://wa.me/${CONTACTO.WHATSAPP}?text=${encodeURIComponent(buildMessage())}`;
    window.open(url, '_blank', 'noopener');
  };

  const submit = async (e) => {
    e.preventDefault();
    setTouched({ name: true, email: true, text: true });
    setSendError('');
    if (!validate()) return;

    if (CONTACTO.ENDPOINT) {
      setSending(true);
      try {
        const res = await fetch(CONTACTO.ENDPOINT, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
          body: JSON.stringify({
            nombre: form.name,
            email: form.email,
            pack: LABELS[form.pack] || form.pack,
            letra: form.text,
          }),
        });
        if (!res.ok) throw new Error('bad status');
        setSubmitted(true);
      } catch (err) {
        setSendError('No hemos podido enviar el formulario. Escríbenos por WhatsApp y lo resolvemos al instante.');
      } finally {
        setSending(false);
      }
      return;
    }

    openWhatsApp();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <section id="contacto" className="py-20 sm:py-28">
        <div className="max-w-3xl mx-auto px-5 sm:px-8 text-center">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-marca-banda/12 text-marca-banda">
            <IconCheck size={28} />
          </div>
          <h2 className="mt-6 text-3xl sm:text-4xl font-bold text-marca-invisible-dark font-display">¡Recibido, {form.name.split(' ')[0]}!</h2>
          <p className="mt-4 text-lg text-texto-oscuro/75">
            En tiempo récord recibirás un email con el plan de producción y los siguientes pasos.
          </p>
          <button
            onClick={() => { setSubmitted(false); setForm({ name: '', email: '', pack: 'ep', text: '' }); setTouched({}); }}
            className="mt-8 text-sm font-mono uppercase tracking-wider text-marca-invisible underline-offset-4 hover:underline"
          >
            ← Enviar otra letra
          </button>
        </div>
      </section>
    );
  }

  return (
    <section id="contacto" className="py-20 sm:py-28">
      <div className="max-w-5xl mx-auto px-5 sm:px-8">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-16 items-start">
          <div className="lg:col-span-5">
            <div className="text-[11px] uppercase tracking-[0.18em] text-marca-banda font-semibold">Onboarding</div>
            <h2 className="mt-3 text-3xl sm:text-5xl text-marca-invisible-dark font-bold leading-tight" style={{textWrap: 'balance'}}>
              Tu obra merece ser escuchada.
            </h2>
            <p className="mt-5 text-lg text-texto-oscuro/75 leading-relaxed">
              Da el siguiente paso en tu carrera creativa y materializa tus textos hoy mismo.
            </p>
            <ul className="mt-8 space-y-3 text-sm text-texto-oscuro/70">
              {['Respuesta en tiempo récord', 'Sin compromiso hasta confirmar pack', 'Tus letras nunca se comparten con terceros'].map(t => (
                <li key={t} className="flex items-center gap-3">
                  <span className="w-1.5 h-1.5 bg-marca-banda rounded-full"></span>
                  {t}
                </li>
              ))}
            </ul>
          </div>

          <form onSubmit={submit} className="lg:col-span-7 bg-fondo-tarjeta rounded-2xl p-6 sm:p-8 space-y-5">
            <div className="grid sm:grid-cols-2 gap-5">
              <Field label="Nombre" required error={touched.name && form.name.trim().length < 2 ? 'Indícanos tu nombre' : ''}>
                <input
                  type="text"
                  value={form.name}
                  onChange={e => setForm({ ...form, name: e.target.value })}
                  onBlur={() => setTouched({ ...touched, name: true })}
                  className="input-base w-full rounded-lg px-4 py-3 text-[15px]"
                  placeholder="Tu nombre completo"
                />
              </Field>
              <Field label="Email" required error={touched.email && !/\S+@\S+\.\S+/.test(form.email) ? 'Email no válido' : ''}>
                <input
                  type="email"
                  value={form.email}
                  onChange={e => setForm({ ...form, email: e.target.value })}
                  onBlur={() => setTouched({ ...touched, email: true })}
                  className="input-base w-full rounded-lg px-4 py-3 text-[15px]"
                  placeholder="tu@email.com"
                />
              </Field>
            </div>

            <Field label="Selecciona tu pack">
              <div className="relative">
                <select
                  value={form.pack}
                  onChange={e => setForm({ ...form, pack: e.target.value })}
                  className="input-base w-full rounded-lg px-4 py-3 text-[15px] appearance-none pr-10"
                >
                  <option value="single">{LABELS.single}</option>
                  <option value="ep">{LABELS.ep}</option>
                  <option value="album">{LABELS.album}</option>
                  <option value="demo">{LABELS.demo}</option>
                  <option value="undecided">{LABELS.undecided}</option>
                </select>
                <svg className="absolute right-3 top-1/2 -translate-y-1/2 text-texto-oscuro/40 pointer-events-none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
              </div>
            </Field>

            <Field label="Pega tu letra, poema o idea aquí" required error={touched.text && form.text.trim().length < 10 ? 'Necesitamos al menos unas líneas para empezar' : ''}>
              <textarea
                value={form.text}
                onChange={e => setForm({ ...form, text: e.target.value })}
                onBlur={() => setTouched({ ...touched, text: true })}
                className="input-base w-full rounded-lg px-4 py-3 text-[15px] font-mono leading-relaxed resize-y"
                rows={8}
                placeholder="Si tienes una estructura definida (verso, estribillo, puente) márcala. Si no, déjanos libertad creativa."
              />
            </Field>

            {sendError && (
              <p className="text-sm text-marca-banda">{sendError}</p>
            )}

            <button
              type="submit"
              disabled={sending}
              className="w-full inline-flex items-center justify-center gap-2 bg-marca-banda hover:bg-marca-banda-dark text-white text-base font-semibold py-4 rounded-full shadow-lift transition-colors"
              style={sending ? { opacity: 0.6 } : null}
            >
              {sending ? 'Enviando…' : 'Crear mi canción profesional'}
              {!sending && <IconArrowRight size={18} />}
            </button>

            <p className="text-center text-xs text-texto-oscuro/55">
              Al enviar aceptas nuestra <a href="legal/privacidad.html" className="text-marca-invisible underline underline-offset-2 hover:text-marca-invisible-dark">política de privacidad</a>. Sin spam, nunca.
            </p>
          </form>
        </div>
      </div>
    </section>
  );
}

function Field({ label, required, error, children }) {
  return (
    <label className="block">
      <span className="block text-xs font-semibold uppercase tracking-[0.12em] text-marca-invisible-dark mb-2">
        {label} {required && <span className="text-marca-banda">*</span>}
      </span>
      {children}
      {error && <span className="block mt-1.5 text-xs text-marca-banda">{error}</span>}
    </label>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="bg-marca-invisible-dark text-white/85 pt-16 pb-8 mt-8">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 pb-12 border-b border-white/10">
          <div className="lg:col-span-2">
            <img src={window.LOGO_SRC} alt="Banda Invisible" className="h-7 w-auto brightness-0 invert opacity-95" />
            <p className="mt-5 text-sm text-white/65 leading-relaxed max-w-sm">
              Producción musical para autores. Convertimos textos, poemas y composiciones en canciones con calidad de estudio.
            </p>
          </div>
          <div>
            <div className="text-xs font-mono uppercase tracking-[0.16em] text-white/55 mb-4">Producto</div>
            <ul className="space-y-2.5 text-sm">
              <li><a href="#como-funciona" className="hover:text-white">Cómo funciona</a></li>
              <li><a href="#muestras" className="hover:text-white">Muestras</a></li>
              <li><a href="#precios" className="hover:text-white">Precios</a></li>
              <li><a href="#faq" className="hover:text-white">FAQ</a></li>
            </ul>
          </div>
          <div>
            <div className="text-xs font-mono uppercase tracking-[0.16em] text-white/55 mb-4">Legal</div>
            <ul className="space-y-2.5 text-sm">
              <li><a href="legal/aviso-legal.html" className="hover:text-white">Aviso legal</a></li>
              <li><a href="legal/privacidad.html" className="hover:text-white">Política de privacidad</a></li>
              <li><a href="legal/cookies.html" className="hover:text-white">Política de cookies</a></li>
              <li><a href="legal/terminos.html" className="hover:text-white">Términos y condiciones</a></li>
              <li><a href="legal/cesion-derechos.html" className="hover:text-white">Cesión de derechos</a></li>
              <li>
                {CONTACTO.EMAIL
                  ? <a href={`mailto:${CONTACTO.EMAIL}`} className="hover:text-white">{CONTACTO.EMAIL}</a>
                  : <a href={`https://wa.me/${CONTACTO.WHATSAPP}`} target="_blank" rel="noopener" className="hover:text-white">Escríbenos por WhatsApp</a>}
              </li>
            </ul>
          </div>
        </div>
        <div className="pt-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
          <div className="text-xs text-white/45 font-mono">© 2026 Banda Invisible — Todos los derechos reservados.</div>
          <div className="flex items-center gap-4">
            <button type="button" onClick={() => window.BI_abrirCookies && window.BI_abrirCookies()} className="text-xs text-white/45 font-mono hover:text-white/80 transition-colors">Preferencias de cookies</button>
            <span className="text-xs text-white/45 font-mono">Hecho para autores que escriben.</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ============ APP ROOT ============ */
function App() {
  const [playerState, setPlayerState] = useStateA({
    track: null,
    isPlaying: false,
    expanded: false,
  });

  const [selectedPack, setSelectedPack] = useStateA(null);
  const [moneda, setMoneda] = useStateA(monedaPorDefecto);

  const cambiarMoneda = (k) => {
    setMoneda(k);
    try { localStorage.setItem('bi_moneda', k); } catch (e) { /* sin localStorage */ }
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-1" style={{ paddingBottom: '96px' }}>
        <Hero />
        <HowItWorks />
        <ProductDemo playerState={playerState} setPlayerState={setPlayerState} />
        <Advantages />
        <Pricing onSelectPack={setSelectedPack} moneda={moneda} setMoneda={cambiarMoneda} />
        <Testimonials />
        <FAQ />
        <ContactForm presetPack={selectedPack} moneda={moneda} />
      </main>
      <Footer />
      <FloatingPlayer playerState={playerState} setPlayerState={setPlayerState} />
      <CookieBanner />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);