const { Button: MxBtn, Accordion: MxAccordion } = window.MyxotoneDesignSystem_60a319;

const PROYECTOS_DEFAULT = [
{ id: 'proj-corps', name: 'Corps', artist: 'Dúo de artistas', obj: 'Construir un debut con identidad propia.', did: 'Producción, composición, mezcla y master de “Inercia”, “Eco”, “El Jardín” y “Sur”.' },
{ id: 'proj-gems', name: 'Gems', artist: 'Dúo de gemelas', obj: 'Traducir una idea íntima a canciones memorables.', did: 'Composición, grabación y dirección vocal de “Dónde Estás” y “Huellas de tu Aroma”.', alt: true },
{ id: 'proj-marionne', name: 'Marionne', artist: 'Artista solista', obj: 'Definir una paleta sonora reconocible.', did: 'Sound design, mezcla y master de “Ay Amor” y “The Drift”.' }];


function mapProyecto(r, i) {
  return {
    id: slug(r.id || r.nombre, i),
    n: String(i + 1).padStart(2, '0'),
    name: r.nombre || '',
    artist: r.descripcion_artista || '',
    obj: r.objetivo || '',
    did: r.que_hicimos || '',
    alt: /^(true|si|sí|1|x)$/i.test((r.alterno || '').trim()),
    imagen: r.imagen ? window.MxContent.driveUrl(r.imagen) : undefined
  };
}

function Proyectos() {
  const items = useMxContent('proyectos', mapProyecto, PROYECTOS_DEFAULT);
  return (
    <section id="proyectos" data-screen-label="Proyectos">
      <div className="wrap">
        <div className="sec-head" data-rv>
          <p className="eyebrow">Proyectos</p>
          <h2>Música real. <span className="it">Historias reales.</span></h2>
        </div>
        {items.map((p, i) =>
        <article key={p.id} className={'proj' + (p.alt ? ' alt' : '')} data-rv>
            <div className="ph"><div className="cover"><image-slot id={p.id} src={p.imagen} shape="rect" placeholder={'Imagen — ' + p.name}></image-slot></div></div>
            <div className="info">
              <span className="pnum">{p.n || String(i + 1).padStart(2, '0')}</span>
              <h3>{p.name}</h3>
              <p className="artist">{p.artist}</p>
              <dl>
                <div><dt>Objetivo</dt><dd>{p.obj}</dd></div>
                <div><dt>Qué hicimos</dt><dd>{p.did}</dd></div>
              </dl>
              <div className="plinks"><a href="#lanzamientos">Escuchar</a></div>
            </div>
          </article>
        )}
        <div className="proj-cta" data-rv><MxBtn variant="ghost" size="md" onClick={() => location.hash = '#lanzamientos'}>Ver todos los proyectos</MxBtn></div>
      </div>
    </section>);

}

const EQUIPO_DEFAULT = [
{ id: 'team-loma', name: 'Lomba', role: 'Compositor & Arreglista', d: 'Compositor, arreglista, instrumentista y sound design.' },
{ id: 'team-tono', name: 'Toñito', role: 'Mix & Master Engineer', d: 'Ingeniero de mezcla y master, sound design, compositor, arreglista y project manager.' },
{ id: 'team-diego', name: 'Diego', role: 'Jefe de Contenido', d: 'Compositor, arreglista, jefe de contenido y sound design.' }];

function mapMiembro(r, i) {
  return {
    id: slug(r.id || r.nombre, i),
    tag: String(i + 1).padStart(2, '0'),
    name: r.nombre || '',
    role: r.rol || '',
    d: r.descripcion || '',
    foto: r.foto ? window.MxContent.driveUrl(r.foto) : undefined
  };
}

function Equipo() {
  const items = useMxContent('equipo', mapMiembro, EQUIPO_DEFAULT);
  const [on, setOn] = React.useState(1);
  React.useEffect(() => {if (on > items.length - 1) setOn(0);}, [items]);
  return (
    <section id="equipo" className="team" data-screen-label="Equipo">
      <div className="glow" style={{ width: 560, height: 560, top: '10%', right: '-12%', background: 'rgba(0,53,255,.08)' }}></div>
      <div className="wrap">
        <div className="sec-head" data-rv>
          <p className="eyebrow">El equipo</p>
          <h2>Tres personas, <span className="it">un equipo.</span></h2>
        </div>
        <div className="team-row" data-rv data-rv-delay="120">
          {items.map((m, i) =>
          <article key={m.id} className={'tcard' + (i === on ? ' on' : '')} onMouseEnter={() => setOn(i)} onFocus={() => setOn(i)} tabIndex="0">
              <div className="tphoto"><image-slot id={m.id} src={m.foto} shape="rect" placeholder={'Retrato — ' + m.name}></image-slot></div>
              <div className="tmeta">
                <span className="ttag">{m.tag || String(i + 1).padStart(2, '0')}</span>
                <h3>{m.name}</h3>
                <p className="trole">{m.role}</p>
                <p className="tdesc">{m.d}</p>
              </div>
              <div className="twave" aria-hidden="true">{[...Array(24)].map((_, j) => <i key={j} style={{ animationDelay: j * .09 + 's' }}></i>)}</div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

const WHY = [
{ n: '01', t: 'Creatividad con estructura', d: 'Las mejores ideas necesitan un proceso para convertirse en realidad.' },
{ n: '02', t: 'Cada decisión tiene intención', d: 'Nada se agrega porque sí. Todo fortalece la identidad del proyecto.' },
{ n: '03', t: 'Tecnología al servicio del arte', d: 'Usamos las herramientas más avanzadas para potenciar la creatividad, nunca para reemplazarla.' },
{ n: '04', t: 'Colaboración real', d: 'No trabajamos para el artista. Trabajamos con el artista.' }];


function PorQue() {
  return (
    <section id="por-que" className="why" data-screen-label="Por qué funciona">
      <div className="wrap">
        <div className="sec-head" data-rv>
          <p className="eyebrow">Por qué funciona nuestro sistema</p>
          <h2>Confianza construida <span className="it">decisión por decisión.</span></h2>
        </div>
        {WHY.map((w, i) =>
        <div className="block" key={w.n} data-rv data-rv-delay={i * 80}>
            <span className="wnum">{w.n}</span>
            <h3>{w.t}</h3>
            <p>{w.d}</p>
          </div>
        )}
        <div style={{ marginTop: 56 }} data-rv><MxBtn variant="secondary" size="md" onClick={() => window.mxQuizOpen()}>Agenda una llamada de descubrimiento</MxBtn></div>
      </div>
    </section>);

}

function Testimonios() {
  const quotes = [
  { q: 'Llegué con una voicenote. Salí con un proyecto que suena a mí.', w: 'Artista · Corps', right: false },
  { q: 'Por primera vez sentí que alguien entendía hacia dónde quería llevar mi música.', w: 'Artista · Marionne', right: true },
  { q: 'No fue un servicio. Fue trabajar con un equipo que se metió de lleno.', w: 'Artista · Gems', right: false }];

  return (
    <section id="testimonios" className="testi" data-screen-label="Testimonios">
      <div className="glow" style={{ width: 600, height: 600, top: '20%', left: '-14%', background: 'rgba(0,53,255,.07)' }}></div>
      <div className="wrap">
        <div className="sec-head" style={{ alignItems: 'center', textAlign: 'center' }} data-rv>
          <p className="eyebrow">Lo que dicen los artistas</p>
          <h2>Conversaciones <span className="it">reales.</span></h2>
        </div>
        <div className="convo">
          {quotes.map((t, i) =>
          <div key={i} className={'bubble mxtn-glass' + (t.right ? ' right' : '')} data-rv data-rv-delay={i * 120}>
              <q>{t.q}</q>
              <div className="who">{t.w}</div>
            </div>
          )}
        </div>
        <div className="video-frame" data-rv>
          <image-slot id="testimonios-video" shape="rect" placeholder="Video · testimonios de artistas"></image-slot>
          <div className="play mxtn-glass"></div>
        </div>
      </div>
    </section>);

}

const FAQS = [
{ q: '¿Cuánto tarda un proyecto?', a: 'Depende del alcance. Un single suele tomar de 3 a 6 semanas; un EP o álbum se planifica por etapas. En la Discovery Session definimos un calendario realista para tu proyecto.' },
{ q: '¿Trabajan online?', a: 'Sí. Gran parte del proceso — dirección, producción, mezcla y revisiones — funciona de forma remota, con sesiones presenciales cuando el proyecto lo pide.' },
{ q: '¿Pueden producir un álbum?', a: 'Sí. El Myxotone Production System está diseñado justamente para cuerpos de trabajo completos: concepto, paleta sonora y coherencia de principio a fin.' },
{ q: '¿Qué pasa si solo necesito mezcla?', a: 'También trabajamos etapas individuales. Escuchamos tu material y te decimos con honestidad qué necesita para llegar al nivel que buscas.' },
{ q: '¿También hacen composición?', a: 'Sí. Podemos partir de una idea, una letra o una voicenote y construir la canción contigo desde cero.' },
{ q: '¿Cómo funciona la Discovery Session?', a: 'Es una llamada de 30 minutos, sin compromiso. Entendemos tu visión, tus objetivos y el momento de tu proyecto, y te enviamos una propuesta personalizada.' }];


function FAQ() {
  return (
    <section id="faq" className="faq" data-screen-label="Preguntas frecuentes">
      <div className="wrap">
        <div className="sec-head" style={{ alignItems: 'center', textAlign: 'center' }} data-rv>
          <p className="eyebrow">Preguntas frecuentes</p>
          <h2>Lo que necesitas <span className="it">saber.</span></h2>
        </div>
        <div className="inner" data-rv data-rv-delay="100"><MxAccordion items={FAQS} /></div>
      </div>
    </section>);

}

function CtaFinal() {
  return (
    <section id="contacto" className="cta-final" data-screen-label="CTA final">
      <div className="glow" style={{ width: 800, height: 500, bottom: '-10%', left: '50%', transform: 'translateX(-50%)', background: 'rgba(0,53,255,.16)' }}></div>
      <div className="wrap">
        <div className="vinyl cta-vinyl"></div>
        <p className="eyebrow" data-rv>Hablemos</p>
        <h2 style={{ marginTop: 24 }} data-rv data-rv-delay="80">Hablemos de <span className="it">tu proyecto.</span></h2>
        <p data-rv data-rv-delay="160">En una Discovery Session entenderemos tu visión, tus objetivos y el momento en el que está tu proyecto para diseñar una propuesta personalizada.</p>
        <div className="actions" data-rv data-rv-delay="240">
          <MxBtn variant="primary" size="lg" onClick={() => window.mxQuizOpen()}>Agenda una llamada de descubrimiento</MxBtn>
          <span className="microcopy">30 min · Sin compromiso · Propuesta personalizada</span>
        </div>
      </div>
    </section>);

}

function MxFooter() {
  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="#lanzamientos">Lanzamientos</a><a href="#proceso">Proceso</a><a href="#servicios">Servicios</a><a href="#proyectos">Proyectos</a><a href="landing/">Landing</a>
            </div>
            <div className="col">
              <h4>Contacto</h4>
              <a href="#contacto" 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>);

}

Object.assign(window, { Proyectos, Equipo, PorQue, Testimonios, FAQ, CtaFinal, MxFooter });