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

function Hero({ onNavigate, heroImage = 'clase-01.jpg' }) {
  return (
    <header style={{ position: 'relative', height: '82vh', minHeight: '560px', overflow: 'hidden' }}>
      <img src={ASSETS + '/photos/' + heroImage} alt="Clase de Bachata Lady Style en Auré"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(61,36,48,0.72) 0%, rgba(61,36,48,0.25) 45%, rgba(61,36,48,0.05) 100%)' }}></div>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        maxWidth: 'var(--page-max)', margin: '0 auto', padding: '0 var(--page-pad) 88px' }}>
        <Eyebrow color="#FDF9F8" style={{ marginBottom: '20px', fontSize: '20px' }}>Bachata Lady Style · CDMX</Eyebrow>
        <h1 style={{ margin: '0 0 32px', font: 'var(--text-hero)', letterSpacing: 'var(--tracking-display)', color: '#FDF9F8', maxWidth: '700px' }}>
          No solo aprendas a bailar.<br /><em style={{ fontStyle: 'italic' }}>Pertenece.</em>
        </h1>
        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
          <Button size="lg" onClick={() => onNavigate('clases')}>Quiero ser parte</Button>
          <Button size="lg" variant="secondary" style={{ borderColor: 'var(--aure-rose)', color: 'var(--aure-rose)' }} onClick={() => onNavigate('membresias')}>Conoce Auré</Button>
        </div>
      </div>
    </header>
  );
}

function Intro() {
  return (
    <Section bg="var(--surface-page)" narrow style={{ textAlign: 'center', padding: 'var(--space-10) var(--page-pad)' }}>
      <img src={ASSETS + '/logo/isotipo-plum.png'} alt="" style={{ height: '56px', marginBottom: '32px', opacity: 0.9 }} />
      <p style={{ margin: '0 0 24px', font: 'var(--text-quote)', color: 'var(--text-primary)' }}>
        Auré es el espacio donde tu feminidad se mueve, brilla y se encuentra con otras.
      </p>
      <p style={{ margin: 0, font: 'var(--text-lead)', color: 'var(--text-secondary)' }}>
        Nacimos en mayo de 2025 en Ciudad de México. No creemos en la competencia.
        Creemos en acompañarnos. En crecer juntas. En sentirnos vistas.
      </p>
    </Section>
  );
}

function Experiencia() {
  const valores = ['Feminidad', 'Conexión', 'Crecimiento', 'Apoyo', 'Transformación'];
  return (
    <Section bg="var(--surface-rose)">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 'var(--space-8)', alignItems: 'center' }} className="grid-2">
        <img src={ASSETS + '/illustrations/bailarinas.png'} alt="Ilustración de bailarinas" style={{ width: '100%', maxWidth: '380px', justifySelf: 'center' }} />
        <div>
          <Eyebrow style={{ marginBottom: '16px' }}>La experiencia Auré</Eyebrow>
          <h2 style={{ margin: '0 0 20px', font: 'var(--text-display)', fontSize: '44px', letterSpacing: 'var(--tracking-display)', color: 'var(--text-primary)' }}>
            Un espacio seguro para volver a ti
          </h2>
          <p style={{ margin: '0 0 28px', font: 'var(--text-body)', fontSize: '17px', color: 'var(--text-secondary)', maxWidth: '480px' }}>
            Clases acogedoras, técnica con estructura y una comunidad que te sostiene.
            Llegas sola; te vas acompañada.
          </p>
          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
            {valores.map((v) => <Badge key={v} tone="outline">{v}</Badge>)}
          </div>
        </div>
      </div>
    </Section>
  );
}

function ClasesPreview({ onNavigate }) {
  const clases = [
    { n: 'Nivel 1', d: 'Principiantes', h: 'Domingo · 11:00am', u: 'Medellín 143' },
    { n: 'Nivel 2', d: 'Bases y Fluidez', h: 'Domingo · 1:00pm', u: 'Puebla 46' },
    { n: 'Nivel 3', d: 'Intermedio', h: 'Martes · 8:00pm', u: 'Puebla 46' },
    { n: 'Nivel 4', d: 'Intermedio Avanzado', h: 'Jueves · 8:30pm', u: 'Puebla 46' },
  ];
  return (
    <Section bg="var(--surface-page)">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 'var(--space-7)', gap: '24px', flexWrap: 'wrap' }}>
        <div>
          <Eyebrow style={{ marginBottom: '12px' }}>Horarios</Eyebrow>
          <h2 style={{ margin: 0, font: 'var(--text-display)', fontSize: '40px', color: 'var(--text-primary)' }}>Nuestras clases</h2>
        </div>
        <Button variant="ghost" onClick={() => onNavigate('clases')}>Ver todas</Button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '20px' }} className="grid-4">
        {clases.map((c) => (
          <Card key={c.n} eyebrow={c.n} title={c.d} padding="28px" hoverable
            footer={<Button size="sm" fullWidth variant="secondary" onClick={() => onNavigate('clases')}>Inscribirme</Button>}>
            {c.h}<br />{c.u}, Roma Norte
          </Card>
        ))}
      </div>
    </Section>
  );
}

function Testimonio() {
  return (
    <Section bg="var(--surface-card)" narrow style={{ textAlign: 'center' }}>
      <Eyebrow style={{ marginBottom: '28px' }}>Ellas lo cuentan</Eyebrow>
      <p style={{ margin: '0 0 24px', font: 'var(--text-quote)', color: 'var(--text-primary)' }}>
        “Llegué buscando una clase de baile y encontré un lugar donde puedo ser yo,
        sin juicio. Auré me devolvió la confianza.”
      </p>
      <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: '13px', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
        Alumna de Nivel 2 — testimonio editable
      </p>
    </Section>
  );
}

function CtaBand({ onNavigate }) {
  return (
    <section style={{ background: 'var(--surface-emerald)', padding: 'var(--space-9) var(--page-pad)', textAlign: 'center' }}>
      <div style={{ maxWidth: 'var(--content-narrow)', margin: '0 auto' }}>
        <h2 style={{ margin: '0 0 16px', font: 'var(--text-display)', fontSize: '44px', color: '#F3EEE9' }}>
          Tu lugar en la pista <em>ya existe.</em>
        </h2>
        <p style={{ margin: '0 0 36px', font: 'var(--text-lead)', color: 'rgba(233,239,233,0.75)' }}>Ven a ocuparlo.</p>
        <Button size="lg" style={{ background: 'var(--aure-rose)', color: 'var(--aure-plum)' }} onClick={() => onNavigate('clases')}>
          Quiero ser parte
        </Button>
      </div>
    </section>
  );
}

function HomeScreen({ onNavigate, heroImage }) {
  return (
    <main data-screen-label="Home">
      <Hero onNavigate={onNavigate} heroImage={heroImage} />
      <Intro />
      <Experiencia />
      <ClasesPreview onNavigate={onNavigate} />
      <Testimonio />
      <CtaBand onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { HomeScreen });