// sections.jsx — Formats, Features, Steps, Privacy, FAQ, Footer

const { useState: useStateS } = React;

const FORMATS = [
  { ext: "ALAC", desc: "Apple Lossless" },
  { ext: "AAC",  desc: "Advanced Audio" },
  { ext: "M4A",  desc: "MPEG-4 Audio" },
  { ext: "MP4",  desc: "Vídeo → Audio", video: true },
  { ext: "WAV",  desc: "Lossless PCM" },
  { ext: "FLAC", desc: "Free Lossless" },
  { ext: "OGG",  desc: "Ogg Vorbis" },
  { ext: "OPUS", desc: "Opus Codec" },
  { ext: "AIFF", desc: "Apple Interchange" },
  { ext: "WMA",  desc: "Windows Media" },
];

function MiniBars({ active = false, count = 6 }) {
  return (
    <div className="fmt-bars">
      {Array.from({ length: count }).map((_, i) => (
        <i key={i} style={{ height: `${20 + (Math.sin(i * 1.3) + 1) * 35}%`, animation: active ? `eq ${0.7 + i * 0.08}s ease-in-out infinite alternate` : "none", animationDelay: `${i * 80}ms` }} />
      ))}
    </div>
  );
}

function FormatsSection() {
  return (
    <section className="section" id="formats">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">02 · Input library</div>
            <h2 className="section-title">Formatos compatibles.<br />Diez entradas, una salida limpia.</h2>
          </div>
          <p className="section-desc">
            Acepta los formatos que usan creadores, DJs y estudios. Si tienes MP4, extraemos el audio antes de convertir.
          </p>
        </div>

        <div className="formats-grid">
          {FORMATS.map((f) => (
            <div key={f.ext} className={"fmt" + (f.video ? " video" : "")}>
              <div className="fmt-ext">{f.ext}</div>
              <div className="fmt-desc">{f.desc.toUpperCase()}</div>
              <MiniBars />
            </div>
          ))}
        </div>

        <div className="mp4-note">
          <div className="mp4-note-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <rect x="3" y="6" width="13" height="12" rx="2" stroke="currentColor" strokeWidth="2"/>
              <path d="M16 10l5-3v10l-5-3z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
            </svg>
          </div>
          <div>
            <b>¿Subes un MP4?</b>{" "}
            <span>Extraemos el audio del vídeo y lo convertimos a MP3. El vídeo se descarta tras procesarlo.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const FEATURES = [
  {
    title: "Conversión rápida",
    desc: "Cola optimizada y procesado en paralelo: la mayoría de pistas en menos de 15 segundos.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/></svg>),
  },
  {
    title: "MP3 hasta 320 kbps",
    desc: "Bitrate constante 320 kbps por defecto. También 128, 192 y 256 si necesitas un archivo más ligero.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 12h3l3-8 4 16 3-10 2 6h3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  },
  {
    title: "Formatos profesionales",
    desc: "Trabajamos con ALAC, FLAC, AIFF y AAC — los formatos que de verdad usan los estudios.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2"/><path d="M7 9v6M11 7v10M15 10v4M19 8v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>),
  },
  {
    title: "Audio desde vídeo",
    desc: "MP4 dentro → MP3 fuera. Extracción automática del audio del vídeo sin pasos extra.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="13" height="12" rx="2" stroke="currentColor" strokeWidth="2"/><path d="M16 10l5-3v10l-5-3z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/></svg>),
  },
  {
    title: "Sin registro",
    desc: "Tres pasos: sube, elige calidad, descarga. Sin cuenta, sin formularios, sin fricción.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 12h6l2-7 2 14 2-7h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  },
  {
    title: "Archivos efímeros",
    desc: "Tus archivos se procesan temporalmente y se eliminan automáticamente tras la descarga.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M6 6l1 14a2 2 0 002 2h6a2 2 0 002-2l1-14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  },
];

function FeaturesSection() {
  return (
    <section className="section" id="features">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">03 · Engine</div>
            <h2 className="section-title">Diseñado para creadores,<br />DJs y amantes del sonido.</h2>
          </div>
          <p className="section-desc">
            Audio limpio. Conversión rápida. MP3 320 kbps. La herramienta hace exactamente una cosa — y la hace bien.
          </p>
        </div>

        <div className="features-grid">
          {FEATURES.map((f, i) => (
            <div className="feat" key={i}>
              <div className="feat-icon">{f.icon}</div>
              <h3 className="feat-title">{f.title}</h3>
              <p className="feat-desc">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StepsSection() {
  const steps = [
    { n: "01", title: "Sube tu archivo", desc: "Arrastra una pista o selecciónala. ALAC, WAV, FLAC, MP4 y más — hasta 350 MB." },
    { n: "02", title: "Elige calidad",   desc: "128, 192, 256 o 320 kbps. O sin pérdida: FLAC, WAV, AIFF, ALAC. 320 viene preseleccionado." },
    { n: "03", title: "Descarga",        desc: "MP3 listo en segundos. Botón directo de descarga. El archivo se elimina tras la descarga." },
  ];
  return (
    <section className="section" id="how">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">04 · Workflow</div>
            <h2 className="section-title">Tres pasos.<br />Cero fricción.</h2>
          </div>
          <p className="section-desc">De ALAC, AAC o MP4 a MP3 en segundos. Sin cuenta, sin colas de espera.</p>
        </div>
        <div className="steps-grid">
          {steps.map((s) => (
            <div className="step" key={s.n}>
              <div className="step-n">{s.n}</div>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PrivacySection() {
  return (
    <section className="section" id="privacy">
      <div className="shell">
        <div className="privacy">
          <div className="privacy-shield">
            <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
              <path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
              <path d="M8 12l3 3 5-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 8 }}>05 · Privacidad</div>
            <h3>Tus archivos no se quedan en ningún sitio.</h3>
            <p>Los archivos se usan únicamente durante la conversión y se eliminan automáticamente tras el proceso. Sin cuentas, sin tracking del audio, sin copias.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: "¿Necesito crear una cuenta?", a: "No. El convertidor es completamente público. Sube tu archivo, elige el formato y descarga. Sin registro ni datos personales." },
  { q: "¿Puedo convertir ALAC a MP3?", a: "Sí. Dj Antønic Converter convierte ALAC (Apple Lossless) a MP3 hasta 320 kbps manteniendo la mayor calidad posible dentro del formato de destino." },
  { q: "¿Puedo convertir AAC o M4A?", a: "Sí. AAC y M4A son formatos nativos de entrada. Súbelos y obtendrás un MP3 listo para usar en cualquier reproductor o plataforma." },
  { q: "¿Puedo extraer audio de un MP4?", a: "Sí. Si subes un archivo MP4, extraemos la pista de audio del vídeo y la convertimos a MP3. El vídeo no se conserva." },
  { q: "¿Cuál es la calidad máxima de MP3?", a: "La calidad máxima disponible es MP3 a 320 kbps con bitrate constante (CBR), el techo del formato MP3." },
  { q: "¿Mis archivos se guardan?", a: "No. Los archivos se procesan temporalmente y se eliminan automáticamente tras la conversión. No almacenamos copia ni metadatos." },
  { q: "¿Cuál es el tamaño máximo?", a: "350 MB por archivo. Suficiente para pistas en alta calidad, mezclas largas y la mayoría de clips de vídeo." },
  { q: "¿Funciona en móvil?", a: "Sí. La interfaz está optimizada para móvil, tablet y escritorio. El convertidor aparece arriba en móvil y los controles son grandes." },
];

function FAQSection() {
  const [open, setOpen] = useStateS(0);
  return (
    <section className="section" id="faq">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">06 · FAQ</div>
            <h2 className="section-title">Preguntas frecuentes.</h2>
          </div>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="ico">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
                </span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{f.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand">
              <div className="brand-mark" />
              <span className="brand-name">DJ <b>Antønic</b></span>
            </div>
            <p className="footer-tag">Audio conversion with a DJ soul.</p>
          </div>
          <div className="footer-col">
            <h4>Formatos</h4>
            <ul>
              <li><a href="#formats">ALAC · AAC · M4A</a></li>
              <li><a href="#formats">MP4 · WAV · FLAC</a></li>
              <li><a href="#formats">OGG · OPUS · AIFF · WMA</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Herramienta</h4>
            <ul>
              <li><a href="#converter">Convertidor</a></li>
              <li><a href="#how">Cómo funciona</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="#privacy">Privacidad</a></li>
              <li><a href="#">Términos</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 DJ ANTØNIC · MP3 ENGINE v3.2</span>
          <span>BUILT FOR CREATORS · DJS · SOUND HEADS</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FormatsSection, FeaturesSection, StepsSection, PrivacySection, FAQSection, Footer });