const { Button: F2Btn } = window.MyxotoneDesignSystem_60a319;

function F2Arrow({ s = 16 }) {
  return <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13m-5-6 6 6-6 6" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>;
}
function F2Chev() {
  return <svg className="f2-chev" width="34" height="18" viewBox="0 0 34 18" aria-hidden="true"><path d="M3 3l14 11L31 3" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>;
}
function F2Play() {
  return <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor" /></svg>;
}
function F2Cta({ size = 'md', label = 'Agenda una Discovery Call', micro = true }) {
  return (
    <div className="f2-cta-row" data-rv>
      <F2Btn variant="primary" size={size} onClick={() => window.mxQuizOpen()}>{label} →</F2Btn>
      {micro && <span className="microcopy">30 min · Sin costo · Sales con un plan concreto</span>}
    </div>);
}

function F2Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState('');
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();window.addEventListener('scroll', on, { passive: true });
    const ids = ['quien', 'sistema', 'mas'];
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {if (e.isIntersecting) setActive('#' + e.target.id);});
    }, { rootMargin: '-30% 0px -55% 0px' });
    ids.forEach((id) => {const el = document.getElementById(id);if (el) io.observe(el);});
    return () => {window.removeEventListener('scroll', on);io.disconnect();};
  }, []);
  const links = [['¿Para quién?', '#quien'], ['Sistema', '#sistema'], ['Conoce más', '#mas'], ['Portafolio', '../']];
  return (
    <header className={'mx-nav' + (scrolled ? ' scrolled' : '')}>
      <div className="wrap">
        <div className="nav-inner">
          <a href="#inicio" style={{ display: 'flex', alignItems: 'center' }}><img src="assets/logo/mxtn-wordmark-white.png" alt="MXTN" style={{ height: 26, width: 'auto', display: 'block', position: 'relative', top: 2 }} /></a>
          <nav className="nav-links">{links.map(([l, h]) => <a key={l} href={h} className={active === h ? 'on' : ''}>{l}</a>)}</nav>
          <button className="nav-cta" onClick={() => window.mxQuizOpen()}>Agenda una llamada</button>
        </div>
      </div>
    </header>);
}

function F2Hero() {
  return (
    <section className="f2 f2-hero" id="inicio" data-screen-label="Hero" style={{ paddingBottom: 0 }}>
      <div className="wrap">
        <img className="f2-logo" src="assets/logo/mxtn-icon-white.png" alt="Myxotone" data-rv />
        <p className="f2-proofline" data-rv data-rv-delay="60">Productora musical · Dirección artística</p>
        <h1 data-rv data-rv-delay="120">Tus canciones ya existen. <span className="it">Tu proyecto, todavía no.</span></h1>
        <p className="f2-sub" data-rv data-rv-delay="180">Convertimos canciones e ideas en un proyecto musical coherente. Con un proceso claro, de la primera idea al lanzamiento.</p>
      </div>
      <div className="f2-strip" data-rv data-rv-delay="220"><p>Para artistas independientes y bandas</p></div>
      <div className="wrap">
        <div className="f2-vsl" data-rv data-rv-delay="260">
          <image-slot id="lp2-vsl" shape="rect" placeholder="Video — Cómo trabajamos (vertical)"></image-slot>
          <div className="vplay"><F2Play /></div>
        </div>
        <F2Cta />
      </div>
    </section>);
}

function F2Proof() {
  const names = ['Corps', 'Gems', 'Marionne', 'Corps', 'Gems', 'Marionne', 'Corps', 'Gems', 'Marionne'];
  return (
    <section className="f2" data-screen-label="Prueba" style={{ paddingTop: 'clamp(40px,6vw,64px)', paddingBottom: 0 }}>
      <p className="f2-proof-label" data-rv><strong>Proyectos lanzados con dirección,</strong> no canciones sueltas:</p>
      <div className="trust trustline" style={{ borderTop: 'none', paddingTop: 8 }}>
        <div className="mq">{names.concat(names, names, names).map((n, i) => <span key={i}>{n}</span>)}</div>
      </div>
    </section>);
}

function F2Quien() {
  const cards = [
  { t: 'Ya tienes canciones o ideas', d: 'Demos, voicenotes o temas terminados. No empezamos de cero: partimos de tu material.' },
  { t: 'Quieres lanzar con identidad', d: 'No solo subir música. Buscas que cada lanzamiento construya el mismo proyecto.' },
  { t: 'Vas a involucrarte en las decisiones', d: 'Nuestro trabajo solo funciona si participas en la dirección creativa. Si buscas resultados sin proceso, esto no es para ti.' }];
  return (
    <section className="f2" id="quien" data-screen-label="¿Para quién es?">
      <div className="wrap">
        <h2 className="f2-h2" data-rv>¿Para quién <span className="it">es esto?</span></h2>
        <div className="f2-cards">
          {cards.map((c, i) =>
          <div className="f2-card" key={i} data-rv data-rv-delay={i * 90}>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          )}
        </div>
        <F2Cta micro={false} />
      </div>
    </section>);
}

const F2_STEPS = [
{ n: '1', t: 'Escuchamos tu música y hacemos un diagnóstico honesto', d: 'Referencias, objetivos y estado real de tu material. Aquí definimos qué proyecto estás construyendo.', slot: 'lp2-s1', ph: 'Visual — Sesión de escucha / referencias' },
{ n: '2', t: 'Diseñamos la dirección de tu proyecto', d: 'Paleta sonora, instrumentación y concepto de producción. Cada decisión posterior se toma contra este documento, no al azar.', slot: 'lp2-s2', ph: 'Visual — Documento de dirección / moodboard sonoro' },
{ n: '3', t: 'Producimos las canciones bajo esa dirección', d: 'Composición, arreglos, grabación y sound design. Un solo equipo, para que la coherencia no se pierda entre manos distintas.', slot: 'lp2-s3', ph: 'Visual — Sesión de estudio' },
{ n: '4', t: 'Refinamos cada detalle', d: 'Edición, mezcla, master y Dolby Atmos. El estándar de las plataformas, con la identidad que definimos juntos.', slot: 'lp2-s4', ph: 'Visual — Mezcla / master' },
{ n: '5', t: 'Entregamos todo listo para lanzar', d: 'Masters finales, stems, instrumentales y material de lanzamiento. Sales con un proyecto, no con un archivo.', slot: 'lp2-s5', ph: 'Visual — Entrega / lanzamiento' }];

function F2Sistema() {
  return (
    <section className="f2" id="sistema" data-screen-label="Myxotone Production System" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <F2Chev />
        <p className="eyebrow" style={{ marginTop: 28 }} data-rv>The Myxotone Production System™</p>
        <h2 className="f2-h2" data-rv data-rv-delay="80">Así es trabajar con nosotros. <span className="it">Cinco etapas, cero improvisación.</span></h2>
        {F2_STEPS.map((s, i) =>
        <div className="f2-step" key={s.n} data-rv>
            <span className="f2-num">{s.n}</span>
            <h3>{s.t}</h3>
            <p className="d">{s.d}</p>
            <div className="f2-visual"><image-slot id={s.slot} shape="rect" placeholder={s.ph}></image-slot></div>
          </div>
        )}
        <p className="f2-close" data-rv>El mismo proceso para un single o un álbum: cambia la escala, no el método. Una buena canción no construye una carrera. Un proyecto coherente sí.</p>
        <F2Cta size="lg" />
      </div>
    </section>);
}

function F2Paths() {
  const rows = [
  ['Ver el portafolio', 'Sitio', '../'],
  ['Instagram', 'Contenido', 'https://www.instagram.com/myxotone/'],
  ['TikTok', 'Contenido', 'https://www.tiktok.com/@myxotone'],
  ['YouTube', 'Contenido', 'https://www.youtube.com/@Myxotone']];
  return (
    <section className="f2" id="mas" data-screen-label="Conoce más" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <F2Chev />
        <h2 className="f2-h2" style={{ marginTop: 28 }} data-rv>¿Aún no estás listo <span className="it">para una llamada?</span></h2>
        <p className="f2-sub" data-rv data-rv-delay="80">Empieza por aquí. Escucha el trabajo y sigue el proceso desde adentro.</p>
        <div className="f2-stack" data-rv data-rv-delay="140">
          {rows.map(([l, k, h], i) =>
          <a key={i} href={h} target={h.startsWith('http') ? '_blank' : undefined} rel={h.startsWith('http') ? 'noopener' : undefined}>
              <span>{l}</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 14 }}><span className="k">{k}</span><F2Arrow /></span>
            </a>
          )}
        </div>
      </div>
    </section>);
}

function F2Footer() {
  return (
    <footer className="mx-footer" data-screen-label="Footer">
      <img className="biglogo" src="assets/logo/mxtn-isologo-bisel.png" alt="Myxotone" data-rv />
      <div className="wrap" style={{ padding: 0, maxWidth: 'min(94vw,1240px)' }}>
        <div className="glasspanel" data-rv>
          <div className="cols">
            <div className="col">
              <h4>Redes</h4>
              <a href="https://www.instagram.com/myxotone/" target="_blank" rel="noopener">Instagram</a><a href="https://www.tiktok.com/@myxotone" target="_blank" rel="noopener">TikTok</a><a href="https://www.youtube.com/@Myxotone" target="_blank" rel="noopener">YouTube</a>
            </div>
            <div className="col">
              <h4>Sitio</h4>
              <a href="../">Portafolio</a><a href="../#lanzamientos">Lanzamientos</a><a href="../#proyectos">Proyectos</a>
            </div>
            <div className="col">
              <h4>Contacto</h4>
              <a href="#inicio" onClick={(e) => {e.preventDefault();window.mxQuizOpen();}}>Agenda una llamada</a><a href="mailto:music@myxotone.com">music@myxotone.com</a>
            </div>
          </div>
          <div className="legal">
            <span>© 2026 Myxotone. Productora musical.</span>
            <span>Música · Audio · Contenido</span>
          </div>
        </div>
      </div>
    </footer>);
}

function F2App() {
  React.useEffect(() => {
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting) {
          const d = e.target.getAttribute('data-rv-delay');
          if (d) e.target.style.transitionDelay = d + 'ms';
          e.target.classList.add('rv-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('[data-rv]').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  return (
    <React.Fragment>
      <F2Nav />
      <F2Hero />
      <F2Proof />
      <F2Quien />
      <F2Sistema />
      <F2Paths />
      <F2Footer />
      <MxQuiz />
    </React.Fragment>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<F2App />);