// Auré website UI kit — Sobre Shery
const { Eyebrow, Section, ASSETS, CONTACT, SocialIcon } = window.AureShared;
const { Button, Badge, Accordion } = window.AurDesignSystem_11b9b2;

const TIMELINE = [
  { year: 'Los inicios', title: 'Cómo empecé a bailar', text: 'El primer encuentro con la danza — editable desde el CMS.' },
  { year: 'Primeros años', title: 'Formación y disciplina', text: 'Los años de estudio que construyeron mi técnica.' },
  { year: 'Competencias', title: 'La pista como escuela', text: 'Competencias que me enseñaron a brillar bajo presión.' },
  { year: 'Congresos', title: 'Aprender del mundo', text: 'Congresos y países donde tomé clases.' },
  { year: 'Certificaciones', title: 'Profesionalizar la pasión', text: 'Certificaciones como bailarina y maestra.' },
  { year: 'Premios', title: 'Reconocimientos', text: 'Logros que celebro con humildad.' },
  { year: 'Mayo 2025', title: 'Nace Auré', text: 'De un sueño personal a una comunidad de mujeres en CDMX.', destacado: true },
];

const FAQ_SHERY = [
  { q: '¿Cómo es tu filosofía como maestra?', a: 'Técnica con estructura, pero sobre todo un espacio sin juicio. Cada mujer avanza a su ritmo, acompañada.' },
  { q: '¿Qué estilo enseñas?', a: 'Bachata Lady Style — feminidad, musicalidad y confianza en tu propio cuerpo.' },
  { q: '¿Das clases privadas?', a: 'Escríbeme por WhatsApp y lo platicamos.' },
  { q: '¿Cuál es tu sueño para Auré?', a: 'Que cada mujer que entre sienta que pertenece, sana y brilla — dentro y fuera de la pista.' },
];

function SheryHero() {
  return (
    <Section bg="var(--surface-page)" style={{ paddingBottom: 'var(--space-8)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)', gap: 'var(--space-8)', alignItems: 'center' }} className="grid-2">
        <div style={{ position: 'relative', height: '520px', minWidth: 0 }}>
          <image-slot id="shery-retrato" shape="rounded" radius="4" src="./assets/photos/shery-retrato.jpg" placeholder="Fotografía principal de Shery" object-position="top center"></image-slot>
        </div>
        <div>
          <Eyebrow style={{ marginBottom: '16px' }}>Sobre Shery</Eyebrow>
          <h1 style={{ margin: '0 0 20px', font: 'var(--text-display)', color: 'var(--text-primary)' }}>
            Bailar me enseñó a <em>pertenecer</em>
          </h1>
          <p style={{ margin: '0 0 16px', font: 'var(--text-lead)', color: 'var(--text-secondary)' }}>
            Soy Shery Gómez, bailarina profesional y maestra de Bachata Lady Style.
            Fundé Auré para que ninguna mujer tenga que bailar sola.
          </p>
          <p style={{ margin: '0 0 28px', font: 'var(--text-quote)', fontSize: '24px', color: 'var(--aure-emerald)' }}>
            “Mi filosofía es simple: técnica que sostiene, comunidad que abraza.”
          </p>
          <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap', alignItems: 'center' }}>
            <Button onClick={() => window.open(CONTACT.whatsappMsg('Hola Shery, quiero ser parte de Auré ✨'), '_blank')}>Quiero ser parte</Button>
            <Button variant="secondary" onClick={() => window.open(CONTACT.whatsappMsg('Hola Shery, me gustaría contactarte'), '_blank')}>Contáctame</Button>
            <a href={CONTACT.igShery} target="_blank" rel="noopener noreferrer" style={{
              display: 'inline-flex', alignItems: 'center', gap: '8px', textDecoration: 'none',
              fontFamily: 'var(--font-sans)', fontSize: '14px', color: 'var(--aure-emerald)' }}>
              <SocialIcon name="instagram" color="var(--aure-emerald)" size={17} />@sherydaengomez
            </a>
          </div>
        </div>
      </div>
    </Section>
  );
}

function Timeline() {
  const [open, setOpen] = React.useState(6);
  return (
    <Section bg="var(--surface-card)">
      <div style={{ textAlign: 'center', marginBottom: 'var(--space-7)' }}>
        <Eyebrow style={{ marginBottom: '12px' }}>Mi camino</Eyebrow>
        <h2 style={{ margin: 0, font: 'var(--text-display)', fontSize: '40px', color: 'var(--text-primary)' }}>Una línea del tiempo</h2>
      </div>
      <div style={{ maxWidth: '760px', margin: '0 auto' }}>
        {TIMELINE.map((t, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '150px 24px 1fr', gap: '0 20px' }}>
              <p style={{ margin: '2px 0 0', textAlign: 'right', fontFamily: 'var(--font-sans)', fontSize: '12px', fontWeight: 500,
                letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase',
                color: t.destacado ? 'var(--aure-emerald)' : 'var(--text-muted)' }}>{t.year}</p>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <span style={{ width: '11px', height: '11px', borderRadius: '50%', marginTop: '4px', flexShrink: 0,
                  background: t.destacado ? 'var(--aure-emerald)' : 'var(--aure-rose)',
                  border: '2px solid ' + (t.destacado ? 'var(--aure-emerald)' : 'var(--aure-mauve)') }}></span>
                {i < TIMELINE.length - 1 && <span style={{ width: '1px', flex: 1, background: 'var(--border-strong)' }}></span>}
              </div>
              <div style={{ paddingBottom: i < TIMELINE.length - 1 ? '36px' : 0 }}>
                <button type="button" onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left', display: 'block' }}>
                  <h3 style={{ margin: '0 0 6px', font: 'var(--text-heading)', color: 'var(--text-primary)' }}>{t.title}</h3>
                </button>
                <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: '15px', lineHeight: 1.7, color: 'var(--text-secondary)', maxWidth: '480px' }}>{t.text}</p>
                <div style={{ display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr', transition: 'grid-template-rows var(--duration-base) var(--ease-out)' }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{ height: '220px', maxWidth: '480px', marginTop: '16px', position: 'relative', minWidth: 0 }}>
                      <image-slot id={'shery-tl-' + i} shape="rounded" radius="4" src={'./assets/photos/shery-tl-' + i + '.jpg'} placeholder={'Foto o video · ' + t.year}></image-slot>
                    </div>
                  </div>
                </div>
                {!isOpen && (
                  <button type="button" onClick={() => setOpen(i)} style={{ background: 'none', border: 'none', padding: '8px 0 0', cursor: 'pointer',
                    fontFamily: 'var(--font-sans)', fontSize: '12px', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--aure-emerald)' }}>
                    Ver recuerdos +
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

function SheryGaleria() {
  const etapas = ['Inicios', 'Competencias y congresos', 'Auré'];
  const [etapa, setEtapa] = React.useState('Auré');
  return (
    <Section bg="var(--surface-rose)">
      <Eyebrow style={{ marginBottom: '12px' }}>Galería</Eyebrow>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: '20px', marginBottom: 'var(--space-6)' }}>
        <h2 style={{ margin: 0, font: 'var(--text-display)', fontSize: '38px', color: 'var(--text-primary)' }}>Etapas de mi carrera</h2>
        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
          {etapas.map((e) => (
            <button key={e} type="button" onClick={() => setEtapa(e)} style={{
              fontFamily: 'var(--font-sans)', fontSize: '12px', fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase',
              padding: '9px 20px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
              border: '1px solid ' + (etapa === e ? 'var(--aure-plum)' : 'var(--border-strong)'),
              background: etapa === e ? 'var(--aure-plum)' : 'transparent',
              color: etapa === e ? 'var(--aure-rose)' : 'var(--aure-plum)',
              transition: 'all var(--duration-fast) var(--ease-out)' }}>{e}</button>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: '16px' }} className="grid-3">
        {[0, 1, 2].map((i) => (
          <div key={etapa + i} style={{ height: '260px', position: 'relative', minWidth: 0 }}>
            <image-slot id={'shery-gal-' + etapa.toLowerCase().replace(/[^a-z]+/g, '-') + '-' + i} shape="rounded" radius="4"
              src={'./assets/photos/shery-gal-' + ({Inicios:'inicios','Competencias y congresos':'comp','Auré':'aure'}[etapa] || 'aure') + '-' + i + '.jpg'}
              placeholder={etapa + ' · foto ' + (i + 1)}></image-slot>
          </div>
        ))}
      </div>
    </Section>
  );
}

function SheryFaqCta({ onNavigate }) {
  return (
    <React.Fragment>
      <Section bg="var(--surface-card)" narrow>
        <Eyebrow style={{ marginBottom: '14px' }}>Preguntas sobre mí</Eyebrow>
        <h2 style={{ margin: '0 0 32px', font: 'var(--text-title)', color: 'var(--text-primary)' }}>Lo que más me preguntan</h2>
        <Accordion items={FAQ_SHERY} />
      </Section>
      <section style={{ background: 'var(--surface-plum)', padding: 'var(--space-9) var(--page-pad)', textAlign: 'center' }}>
        <div style={{ maxWidth: 'var(--content-narrow)', margin: '0 auto' }}>
          <h2 style={{ margin: '0 0 32px', font: 'var(--text-display)', fontSize: '40px', color: 'var(--aure-rose)' }}>
            Ven a bailar <em>conmigo</em>
          </h2>
          <div style={{ display: 'flex', gap: '16px', justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button size="lg" style={{ background: 'var(--aure-rose)', color: 'var(--aure-plum)' }} onClick={() => onNavigate('clases')}>Quiero ser parte</Button>
            <Button size="lg" variant="secondary" style={{ borderColor: 'var(--aure-rose)', color: 'var(--aure-rose)' }}
              onClick={() => window.open(CONTACT.whatsappMsg('Hola Shery, me gustaría contactarte'), '_blank')}>Contáctame</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function SheryScreen({ onNavigate }) {
  return (
    <main data-screen-label="Sobre Shery">
      <SheryHero />
      <Timeline />
      <SheryGaleria />
      <SheryFaqCta onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { SheryScreen });