const { Button: MxButton } = window.MyxotoneDesignSystem_60a319;

const ETAPAS = [
{ n: '01', name: 'Discover', it: 'escuchar antes de crear', lines: ['Conocemos al artista', 'Analizamos referencias', 'Objetivos', 'Narrativa', 'Identidad'], media: 'Moodboards, referencias, playlists.' },
{ n: '02', name: 'Design', it: 'una dirección creativa', lines: ['Paleta sonora', 'Instrumentación', 'Producción', 'Concepto'], media: 'Ableton, notas, diagramas.' },
{ n: '03', name: 'Produce', it: 'donde la idea toma cuerpo', lines: ['Producción', 'Composición', 'Grabación', 'Arreglos', 'Sound Design'], media: 'Sesiones reales.' },
{ n: '04', name: 'Refine', it: 'cada detalle tiene una intención', lines: ['Edición', 'Mezcla', 'Master', 'Dolby Atmos'], media: 'Plugins, automatizaciones, mezcla.' },
{ n: '05', name: 'Deliver', it: 'la música lista para el mundo', lines: ['Entregables finales', 'Stems', 'Instrumentales', 'Atmos', 'Material para lanzamiento'], media: 'Todo listo para el lanzamiento.' }];


function Proceso() {
  const railRef = React.useRef(null);
  React.useEffect(() => {
    const el = railRef.current;if (!el) return;
    const on = () => {
      const r = el.parentElement.getBoundingClientRect();
      const p = Math.min(1, Math.max(0, (window.innerHeight * .72 - r.top) / r.height));
      el.style.setProperty('--p', (p * 100).toFixed(1) + '%');
    };
    on();window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <section id="proceso" className="proceso" data-screen-label="Nuestro proceso">
      <div className="wrap">
        <div className="sec-head" data-rv>
          <p className="eyebrow">Nuestro proceso</p>
          <h2>Un recorrido, <span className="it">de la primera idea</span> al lanzamiento.</h2>
          <p>Cada etapa está conectada con la siguiente. Nada queda al azar.</p>
        </div>
        <div className="steps">
          <div className="rail" ref={railRef}><i></i></div>
          {ETAPAS.map((e, i) =>
          <div className="step" key={e.n} data-rv data-rv-delay={i * 60}>
              <div className="num">{e.n}</div>
              <h3>{e.name}<span className="it">{e.it}</span></h3>
              <div className="lines">{e.lines.map((l) => <span key={l}>{l}</span>)}</div>
              <p className="media">{e.media}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function EsParaTi() {
  const rows = [
  <p key="1">Tienes una idea pero <em>no sabes cómo desarrollarla.</em></p>,
  <p key="2">Ya escribiste una canción y quieres llevarla a <em>un nivel profesional.</em></p>,
  <p key="3">Estás construyendo un proyecto artístico y buscas <em>un equipo creativo.</em></p>];

  return (
    <section id="es-para-ti" className="fit" data-screen-label="¿Es para ti?">
      <div className="wrap">
        <div className="sec-head" data-rv>
          <p className="eyebrow">¿Es para ti?</p>
          <h2>Si te reconoces aquí, <span className="it">hablemos.</span></h2>
        </div>
        {rows.map((p, i) =>
        <div className="row" key={i} data-rv data-rv-delay={i * 100}>
            <span className="idx">0{i + 1}</span>{p}
          </div>
        )}
        <div style={{ marginTop: 56 }} data-rv><MxButton variant="secondary" size="md" onClick={() => window.mxQuizOpen()}>Agenda una llamada de descubrimiento</MxButton></div>
      </div>
    </section>);

}

const MODULES = [
{ n: '01', name: 'Discover', sub: 'Entendemos al artista y su universo.', items: ['Referencias y objetivos', 'Narrativa e identidad', 'Moodboards y playlists'], tag: 'Investigación' },
{ n: '02', name: 'Design', sub: 'Diseñamos la dirección creativa.', items: ['Paleta sonora', 'Instrumentación', 'Concepto de producción'], tag: 'Dirección' },
{ n: '03', name: 'Produce', sub: 'La idea toma forma en el estudio.', items: ['Composición y arreglos', 'Grabación', 'Sound design'], tag: 'Estudio' },
{ n: '04', name: 'Refine', sub: 'Cada detalle tiene una intención.', items: ['Edición y mezcla', 'Master', 'Dolby Atmos'], tag: 'Precisión' },
{ n: '05', name: 'Deliver', sub: 'La música lista para el mundo.', items: ['Stems e instrumentales', 'Atmos', 'Material de lanzamiento'], tag: 'Entrega' }];


function Sistema() {
  const [open, setOpen] = React.useState(-1);
  return (
    <section id="sistema" className="sistema" data-screen-label="Myxotone Production System">
      <div className="wrap">
        <div className="sec-head" data-rv>
          <p className="eyebrow">The Myxotone Production System™</p>
          <h2>Un proceso creativo diseñado para construir <span className="it">proyectos,</span> no solo canciones.</h2>
          <p>Cada artista tiene necesidades diferentes. Por eso desarrollamos un sistema que combina creatividad, metodología y tecnología para tomar mejores decisiones en cada etapa de la producción.</p>
        </div>
        <div className="sys-panel" data-rv data-rv-delay="120">
          <p className="eyebrow" style={{ position: 'relative' }}>Sistema · 5 módulos conectados</p>
          <div className="modules">
            {MODULES.map((m, i) =>
            <button key={m.n} className={'module' + (open === i ? ' on' : '')} style={{ '--i': i }} onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="mnum">{m.n} /</span>
                <div className="mname">{m.name}</div>
                <div className="msub">{m.sub}</div>
                <div className="mdetail"><div><ul>{m.items.map((it) => <li key={it}>{it}</li>)}</ul><span className="mtag">{m.tag}</span></div></div>
              </button>
            )}
          </div>
          <p className="sys-note">Interactúa con cada módulo para ver qué sucede dentro de cada etapa.</p>
        </div>
      </div>
    </section>);

}

const SERVICIOS = [
{ c: 'big', t: <React.Fragment>Producción <span className="it">musical</span></React.Fragment>, d: 'De la maqueta al master: dirección creativa y producción completa de tu proyecto.' },
{ c: 'half', t: 'Composición', d: 'Canciones construidas desde tu narrativa.' },
{ c: 'half', t: <React.Fragment>Grabación y <span className="it">dirección vocal</span></React.Fragment>, d: 'Sesiones con intención, tomas con carácter.' },
{ c: 'third', t: 'Mezcla', d: 'Balance, profundidad y emoción.' },
{ c: 'rest', t: <React.Fragment>Master <span className="it">&amp; Dolby Atmos</span></React.Fragment>, d: 'El estándar de las plataformas, en estéreo e inmersivo.', anchor: '131631d5bc-article-127-13' },
{ c: 'big', t: <React.Fragment>Música para <span className="it">audiovisual</span></React.Fragment>, d: 'Identidad sonora para cine, marcas y contenido.' }];


function Servicios() {
  return (
    <section id="servicios" className="servicios" data-screen-label="Servicios">
      <div className="wrap">
        <div className="sec-head" data-rv>
          <p className="eyebrow">Nuestros servicios</p>
          <h2>Todo lo que necesitas para construir <span className="it">un proyecto musical.</span></h2>
        </div>
        <div className="list">
          {SERVICIOS.map((s, i) =>
          <article key={i} className={'svc ' + s.c} data-rv data-rv-delay={i % 3 * 80} data-comment-anchor={s.anchor}>
              <span className="si">0{i + 1}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <a className="more" href="#contacto">Saber más</a>
            </article>
          )}
        </div>
        <div style={{ marginTop: 64, textAlign: 'center' }} data-rv><MxButton variant="secondary" size="md" onClick={() => window.mxQuizOpen()}>Agenda una llamada de descubrimiento</MxButton></div>
      </div>
    </section>);

}

Object.assign(window, { Proceso, EsParaTi, Sistema, Servicios });