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

const { useState: useStateS } = React;

// ── Input formats (14) ─────────────────────────────────────────────────────
const INPUT_FORMATS = [
  { ext: "MP3",  desc: "MPEG Audio"        },
  { ext: "ALAC", desc: "Apple Lossless"    },
  { ext: "AAC",  desc: "Advanced Audio"    },
  { ext: "M4A",  desc: "MPEG-4 Audio"      },
  { ext: "WAV",  desc: "Lossless PCM"      },
  { ext: "FLAC", desc: "Free Lossless"     },
  { ext: "AIFF", desc: "Apple Interchange" },
  { ext: "OGG",  desc: "Ogg Vorbis"        },
  { ext: "OPUS", desc: "Opus Codec"        },
  { ext: "WMA",  desc: "Windows Media"     },
  { ext: "APE",  desc: "Monkey's Audio"    },
  { ext: "WV",   desc: "WavPack"           },
  { ext: "DSF",  desc: "DSD Stream · Hi-Res" },
  { ext: "MP4",  desc: "Vídeo → Audio", video: true },
];

// ── Output formats (8) ─────────────────────────────────────────────────────
const OUTPUT_FORMATS_LIST = [
  { ext: "MP3",  desc: "Universal"         },
  { ext: "AAC",  desc: "Apple / Stream"    },
  { ext: "OGG",  desc: "Open · Web"        },
  { ext: "OPUS", desc: "Eficiente"         },
  { ext: "FLAC", desc: "Sin pérdida"       },
  { ext: "WAV",  desc: "Estudio · PCM"     },
  { ext: "AIFF", desc: "DJ · Rekordbox"    },
  { ext: "ALAC", desc: "Apple Lossless"    },
];

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 · Formatos</div>
            <h2 className="section-title">14 formatos de entrada.<br />8 salidas profesionales.</h2>
          </div>
          <p className="section-desc">
            Acepta lo que usan creadores, DJs y estudios. El motor convierte todo localmente en tu dispositivo — sin subir nada a ningún servidor.
          </p>
        </div>

        <div style={{ marginBottom: 10, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--text-3)" }}>
          Entrada — lo que puedes convertir
        </div>
        <div className="formats-grid">
          {INPUT_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 style={{ margin: "28px 0 10px", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--text-3)" }}>
          Salida — formatos que obtienes
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {OUTPUT_FORMATS_LIST.map(f => (
            <div key={f.ext} style={{
              display: "flex", alignItems: "center", gap: 8, padding: "8px 14px",
              background: "rgba(255,255,255,0.04)", border: "1px solid var(--line-2)",
              borderRadius: 8,
            }}>
              <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 13, color: "var(--accent)" }}>{f.ext}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--text-3)" }}>{f.desc}</span>
            </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 en tu propio navegador y lo convertimos al formato elegido. El vídeo no sale de tu dispositivo.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const FEATURES = [
  {
    title: "Procesado 100% local",
    desc: "Tu música nunca sale de tu navegador, PC o móvil. El motor corre en Web Workers directamente en tu dispositivo — sin uploads, sin servidores, sin terceros.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/><path d="M8 12l3 3 5-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  },
  {
    title: "Análisis de géneros y mood",
    desc: "Nuestra IA analiza cada pista: género musical con 400 estilos posibles, bailabilidad, mood (party, happy, aggressive, relaxed) y vocal/instrumental. Sin conexión al servidor.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>),
  },
  {
    title: "Motor de audio profesional",
    desc: "Ningún formato lo para: ALAC, FLAC, AIFF, AAC, DSD y más de 14 formatos de entrada. Tecnología desarrollada por Sakicore que corre directamente en tu dispositivo.",
    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: "MP3 hasta 320 kbps",
    desc: "Bitrate constante 320 kbps por defecto. También 128, 192 y 256 si necesitas archivos más ligeros. Sin artefactos ni pérdida de calidad evitable.",
    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: "Sin registro, sin límites",
    desc: "Sin cuenta, sin formularios, sin tracking. Selecciona hasta 100 archivos, elige el formato y descarga. 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: "Tecnología Sakicore",
    desc: "Equipo senior de élite en ingeniería, IA, datos, cloud y ciberseguridad. Creamos herramientas profesionales avanzadas y las ofrecemos gratis: sin anuncios, sin suscripciones, sin tracking, sin telemetría.",
    icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/></svg>),
  },
];

function FeaturesSection() {
  return (
    <section className="section" id="features">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">03 · Motor</div>
            <h2 className="section-title">Ingeniería de audio<br />directo en tu dispositivo.</h2>
          </div>
          <p className="section-desc">
            Nuestra tecnología corre íntegramente en tu dispositivo. La misma calidad que los estudios profesionales, sin servidores de por medio.
          </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: "Selecciona tus archivos", desc: "Arrastra o elige hasta 100 pistas. MP3, ALAC, WAV, FLAC, MP4 y más — hasta 500 MB por archivo, 2 GB en total." },
    { n: "02", title: "Elige formato y calidad",  desc: "MP3 · AAC · OGG · OPUS · FLAC · WAV · AIFF · ALAC. Desde 64 kbps a 320 kbps, o lossless sin pérdida. Tú mandas." },
    { n: "03", title: "Descarga. Sin rastro.",     desc: "El convertidor procesa todo en tu dispositivo. Tus archivos nunca salen del navegador. Descarga y listo — sin servidores, sin historial." },
  ];
  return (
    <section className="section" id="how">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">04 · Cómo funciona</div>
            <h2 className="section-title">Tres pasos.<br />Todo en tu dispositivo.</h2>
          </div>
          <p className="section-desc">Tu música no sale de tu navegador en ningún momento. El procesado ocurre en tu CPU (o GPU si la tienes) directamente.</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>Tu música nunca sale de tu dispositivo.</h3>
            <p>
              A diferencia de la mayoría de conversores online, aquí <b>no se sube ningún archivo a ningún servidor</b>.
              Toda la conversión y el análisis de géneros ocurre en tu dispositivo con nuestra propia tecnología.
              Tu música, tus archivos, tu dispositivo. Sin copias remotas, sin tracking, sin riesgo de filtración.{" "}
              Esta arquitectura ha sido desarrollada íntegramente por <b>Sakicore</b> — equipo senior de élite en ingeniería, IA, datos, cloud, ciberseguridad y arquitectura enterprise.
              Creamos herramientas profesionales avanzadas y las ofrecemos gratis: sin anuncios, sin suscripciones, sin tracking y sin telemetría.
              <i style={{ display: "block", marginTop: 10, opacity: 0.6 }}>Built by experts. Free for everyone.</i>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: "¿Mis archivos se suben a algún servidor?", a: "No. Nunca. El convertidor procesa todo en tu propio dispositivo usando WebAssembly y Web Workers en el navegador. Tus archivos no salen de tu PC, Mac o móvil en ningún momento." },
  { q: "¿Necesito crear una cuenta?", a: "No. El convertidor es completamente público y gratuito. Selecciona tu archivo, elige el formato y descarga. Sin registro ni datos personales." },
  { q: "¿Qué tecnología usa el convertidor?", a: "Tecnología propia de Sakicore que corre directamente en tu dispositivo. La conversión, el análisis de géneros con 400 estilos musicales y el análisis de mood se ejecutan íntegramente en tu navegador, sin enviar nada a ningún servidor." },
  { q: "¿Puedo convertir ALAC o FLAC a MP3?", a: "Sí. ALAC (Apple Lossless), FLAC, WAV y AIFF se convierten sin pérdida de información hasta el límite del formato destino. MP3 320 kbps es la calidad máxima que soporta el estándar MP3." },
  { q: "¿Puedo extraer audio de un MP4?", a: "Sí. Si seleccionas un archivo MP4, el motor extrae la pista de audio directamente en tu dispositivo y la convierte al formato elegido. El vídeo no se procesa ni almacena en ningún servidor." },
  { q: "¿Qué es Sakicore?", a: "Sakicore está impulsado por un equipo senior de élite en ingeniería, inteligencia artificial, datos, cloud, ciberseguridad y arquitectura enterprise. Dominamos las capas que definen la tecnología actual: Generative AI, Agentic AI, LLMs, RAG, automatización inteligente, Data Engineering, MLOps, DevSecOps, Zero Trust, Cloud Native, Observability, SaaS y UX/UI de producto. Creamos herramientas profesionales avanzadas y las ofrecemos gratis: sin anuncios, sin suscripciones, sin tracking y sin telemetría. Built by experts. Free for everyone." },
  { q: "¿Cuál es el tamaño máximo?", a: "500 MB por archivo y 2 GB en total por lote (hasta 100 archivos a la vez). Suficiente para pistas en alta calidad, mezclas largas y archivos de vídeo." },
  { q: "¿Funciona en móvil?", a: "Sí. La interfaz está optimizada para móvil, tablet y escritorio. El procesado ocurre en el propio dispositivo — la conversión puede ser más lenta en teléfonos con menos CPU, pero funciona sin necesidad de conexión al servidor." },
];

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 AboutSection() {
  const PILLARS = [
    "Generative AI", "Agentic AI", "LLMs", "RAG",
    "Automatización inteligente", "Data Engineering", "MLOps",
    "DevSecOps", "Zero Trust", "Cloud Native",
    "Observability", "SaaS", "UX/UI de producto",
  ];
  return (
    <section className="section" id="about">
      <div className="shell">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">07 · Sakicore</div>
            <h2 className="section-title">Quiénes somos.</h2>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "start" }}>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-1)", marginBottom: 20 }}>
              Sakicore está impulsado por un <b>equipo senior de élite</b> en ingeniería, inteligencia artificial, datos, cloud, ciberseguridad y arquitectura enterprise.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 20 }}>
              Creamos herramientas profesionales avanzadas y las ofrecemos gratis: sin anuncios, sin suscripciones, sin tracking y sin telemetría.
            </p>
            <p style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: ".08em", color: "var(--accent)" }}>
              Built by experts. Free for everyone.
            </p>
          </div>

          <div>
            <p style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--text-3)", marginBottom: 14 }}>
              Dominamos las capas que definen la tecnología actual
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {PILLARS.map(p => (
                <span key={p} style={{
                  fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".06em",
                  padding: "5px 10px", borderRadius: 6,
                  border: "1px solid var(--line-2)",
                  color: "var(--text-2)", background: "rgba(255,255,255,0.03)",
                }}>
                  {p}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactSection() {
  return (
    <section className="section" id="contact">
      <div className="shell">
        <div className="privacy" style={{ flexDirection: "column", alignItems: "flex-start", gap: 24 }}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 24 }}>
            <div className="privacy-shield">
              <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" strokeWidth="2"/>
                <path d="M22 6l-10 7L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              </svg>
            </div>
            <div>
              <div className="section-eyebrow" style={{ marginBottom: 8 }}>08 · Contacto</div>
              <h3>¿Tienes una pregunta o propuesta?</h3>
              <p style={{ marginBottom: 20 }}>
                Escríbenos para cualquier duda sobre el convertidor, sobre Sakicore o lo que necesites.
                Respondemos a todas las consultas.
              </p>
              <a
                href="mailto:contacto@sakicore.com"
                style={{
                  display: "inline-flex", alignItems: "center", gap: 10,
                  padding: "12px 22px", borderRadius: 10,
                  background: "var(--accent)", color: "var(--ink-0)",
                  fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
                  letterSpacing: ".06em", textDecoration: "none",
                  transition: "opacity .15s",
                }}
                onMouseOver={e => e.currentTarget.style.opacity = ".82"}
                onMouseOut={e => e.currentTarget.style.opacity = "1"}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" strokeWidth="2"/>
                  <path d="M22 6l-10 7L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                </svg>
                contacto@sakicore.com
              </a>
            </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">Built by experts. Free for everyone.</p>
          </div>
          <div className="footer-col">
            <h4>Entrada</h4>
            <ul>
              <li><a href="#formats">MP3 · ALAC · AAC · M4A</a></li>
              <li><a href="#formats">WAV · FLAC · AIFF · OGG</a></li>
              <li><a href="#formats">OPUS · WMA · APE · WV · DSF · MP4</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Salida</h4>
            <ul>
              <li><a href="#converter">MP3 · AAC · OGG · OPUS</a></li>
              <li><a href="#converter">FLAC · WAV · AIFF · ALAC</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Sakicore</h4>
            <ul>
              <li><a href="#about">Quiénes somos</a></li>
              <li><a href="#features">Tecnología local</a></li>
              <li><a href="#privacy">Privacidad total</a></li>
              <li><a href="#contact">Contacto</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 DJ ANTØNIC · <a href="#features" style={{ color: "inherit", textDecoration: "none" }}>SAKICORE GROUP</a> · LOCAL ENGINE v4.0</span>
          <span>BUILT FOR CREATORS · DJS · SOUND HEADS · FREE FOR ALL</span>
        </div>
      </div>
    </footer>
  );
}

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