// Auré website UI kit — Nuestra Comunidad
const { Eyebrow, Section, ASSETS, CONTACT } = window.AureShared;
const { Button, Badge, Card } = window.AurDesignSystem_11b9b2;

const CATEGORIAS = [
  'Clases semanales', 'Talleres y Masterclass', 'Eventos especiales', 'Convivencias', 'Brunchs',
  'Picnics', 'Sesiones de fotos', 'Coreografías', 'Behind the scenes', 'Competencias',
  'Viajes', 'Retos', 'Celebraciones', 'Primeras clases', 'Cierres de ciclo',
];

const HISTORIAS = [
  { quote: 'Llegué sin saber ni un paso básico. Hoy bailo frente al espejo sin miedo a mirarme.', name: 'Historia · editable desde el CMS' },
  { quote: 'Auré me dio amigas que se sienten hermanas. La clase es solo el pretexto.', name: 'Historia · editable desde el CMS' },
  { quote: 'Volví a sentirme yo. Eso no lo enseña ninguna coreografía.', name: 'Historia · editable desde el CMS' },
];

function ComunidadHeader() {
  return (
    <Section bg="var(--surface-page)" narrow style={{ textAlign: 'center', paddingBottom: 'var(--space-7)' }}>
      <Eyebrow style={{ marginBottom: '18px' }}>Nuestra comunidad</Eyebrow>
      <h1 style={{ margin: '0 0 18px', font: 'var(--text-display)', color: 'var(--text-primary)' }}>
        Nadie brilla <em>sola</em>
      </h1>
      <p style={{ margin: 0, font: 'var(--text-lead)', color: 'var(--text-secondary)' }}>
        Esto es lo que pasa cuando decenas de mujeres deciden acompañarse.
      </p>
    </Section>
  );
}

function VideoPrincipal() {
  return (
    <Section bg="var(--surface-page)" style={{ paddingTop: 0 }}>
      <div style={{ position: 'relative', height: '540px' }}>
        <image-slot id="comunidad-video" shape="rounded" radius="4" src={ASSETS + '/photos/clase-03.jpg'}
          placeholder="Video principal — momentos reales de clase (sube su portada aquí)"></image-slot>
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', pointerEvents: 'none',
          width: '76px', height: '76px', borderRadius: '50%', background: 'rgba(79,47,62,0.75)',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ width: 0, height: 0, borderTop: '13px solid transparent', borderBottom: '13px solid transparent',
            borderLeft: '20px solid var(--aure-rose)', marginLeft: '6px' }}></span>
        </div>
      </div>
      <p style={{ maxWidth: 'var(--content-narrow)', margin: '56px auto 0', textAlign: 'center', font: 'var(--text-quote)', fontSize: '26px', color: 'var(--text-primary)' }}>
        Aquí no compites con nadie. Llegas sola y te vas acompañada;
        aprendes pasos y te llevas un lugar al que volver.
      </p>
    </Section>
  );
}

// Todas las fotos disponibles: los álbumes rotan sobre este pool hasta tener fotos propias.
const FOTOS_POOL = [
  'clase-01.jpg', 'clase-02.jpg', 'clase-03.jpg',
  'shery-gal-aure-0.jpg', 'shery-gal-aure-1.jpg', 'shery-gal-aure-2.jpg',
  'shery-tl-0.jpg', 'shery-tl-1.jpg', 'shery-tl-2.jpg', 'shery-tl-3.jpg',
  'shery-tl-4.jpg', 'shery-tl-5.jpg', 'shery-tl-6.jpg',
  'shery-gal-inicios-0.jpg', 'shery-gal-inicios-1.jpg', 'shery-gal-inicios-2.jpg',
  'shery-gal-comp-0.jpg', 'shery-gal-comp-1.jpg', 'shery-gal-comp-2.jpg',
];

function GaleriaComunidad() {
  const [cat, setCat] = React.useState(CATEGORIAS[0]);
  const slug = (c) => c.toLowerCase().replace(/[^a-z]+/g, '-');
  return (
    <Section bg="var(--surface-card)">
      <Eyebrow style={{ marginBottom: '12px' }}>Galería</Eyebrow>
      <h2 style={{ margin: '0 0 28px', font: 'var(--text-display)', fontSize: '38px', color: 'var(--text-primary)' }}>Álbumes de la comunidad</h2>
      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: 'var(--space-6)' }}>
        {CATEGORIAS.map((c) => (
          <button key={c} type="button" onClick={() => setCat(c)} style={{
            fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase',
            padding: '8px 16px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
            border: '1px solid ' + (cat === c ? 'var(--aure-plum)' : 'var(--border-subtle)'),
            background: cat === c ? 'var(--aure-plum)' : 'var(--aure-rose-25)',
            color: cat === c ? 'var(--aure-rose)' : 'var(--text-secondary)',
            transition: 'all var(--duration-fast) var(--ease-out)' }}>{c}</button>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gridAutoRows: '240px', gap: '14px' }} className="grid-3 grid-gallery">
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <div key={slug(cat) + i} style={{ position: 'relative', minWidth: 0, gridColumn: i === 0 ? 'span 2' : undefined, gridRow: i === 0 ? 'span 2' : undefined }}>
            <image-slot id={'com-' + slug(cat) + '-' + i} shape="rounded" radius="4" placeholder={cat + ' · ' + (i + 1)}
              src={ASSETS + '/photos/' + FOTOS_POOL[(CATEGORIAS.indexOf(cat) * 6 + i) % FOTOS_POOL.length]}></image-slot>
          </div>
        ))}
      </div>
      <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-sans)', fontSize: '13px', color: 'var(--text-muted)' }}>
        Cada álbum admite fotografías, videos, descripción, fecha y lugar — administrable desde el CMS.
      </p>
    </Section>
  );
}

function Historias() {
  return (
    <Section bg="var(--surface-rose)">
      <div style={{ textAlign: 'center', marginBottom: 'var(--space-7)' }}>
        <Eyebrow style={{ marginBottom: '12px' }}>Historias de Auré</Eyebrow>
        <h2 style={{ margin: 0, font: 'var(--text-display)', fontSize: '40px', color: 'var(--text-primary)' }}>
          Lo que cambia cuando <em>perteneces</em>
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: '20px' }} className="grid-3">
        {HISTORIAS.map((h, i) => (
          <Card key={i} padding="28px" hoverable style={{ minWidth: 0 }}
            footer={<p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: '12px', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{h.name}</p>}>
            <div style={{ height: '180px', position: 'relative', marginBottom: '18px', minWidth: 0 }}>
              <image-slot id={'historia-' + i} shape="rounded" radius="4" placeholder="Captura, foto o video"
                src={ASSETS + '/photos/' + ['clase-01.jpg', 'shery-gal-aure-1.jpg', 'shery-gal-aure-2.jpg'][i]}></image-slot>
            </div>
            <p style={{ margin: 0, font: 'var(--text-quote)', fontSize: '20px', color: 'var(--text-primary)' }}>“{h.quote}”</p>
          </Card>
        ))}
      </div>
      <div style={{ textAlign: 'center', marginTop: 'var(--space-7)' }}>
        <Button size="lg" onClick={() => window.open(CONTACT.whatsappMsg('Hola Auré, quiero ser parte de la comunidad ✨'), '_blank')}>Quiero ser parte</Button>
      </div>
    </Section>
  );
}

function ComunidadScreen({ onNavigate }) {
  return (
    <main data-screen-label="Comunidad">
      <ComunidadHeader />
      <VideoPrincipal />
      <GaleriaComunidad />
      <Historias />
    </main>
  );
}

Object.assign(window, { ComunidadScreen });