const { Logo, SectionLabel, Button, Divider, StatBlock, PhotoFrame, Card } = window.PilatesLifeStudioDesignSystem_f49721;

function Hero({ onBook }) {
  return (
    <section className="hero-bg" style={{ position: 'relative', overflow: 'hidden', padding: '120px 0 128px', background: 'url("./img_6099-2--msg8axag-ltgc.jpg") center 8% / cover no-repeat' }}>
      <div className="hero-overlay" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(21,33,48,.82) 0%, rgba(21,33,48,.55) 55%, rgba(21,33,48,.25) 100%)', pointerEvents: 'none' }}></div>
      <div className="wrap" style={{ position: 'relative', display: 'flex', gap: 'var(--space-9)' }}>
        <div style={{ maxWidth: 640 }}>
          <h1 style={{ color: 'var(--white)', fontSize: 'var(--size-display-xl)', letterSpacing: 'var(--tracking-display-tight)', lineHeight: 1.04, margin: '0 0 24px' }}>
            Pilates<br />Life Studio
          </h1>
          <p style={{ color: 'var(--aqua)', fontSize: 'var(--size-body-lg)', maxWidth: 500 }}>
            El cambio se produce a través del movimiento, y el movimiento cura.
          </p>
          <div className="eyebrow" style={{ color: 'var(--aqua)', marginTop: 10 }}>— Joseph Pilates</div>
          <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-6)' }}>
            <Button variant="inverse" size="lg" onClick={onBook}>Reserva tu clase</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatStrip() {
  return (
    <section style={{ background: 'var(--mist)', padding: 'var(--space-8) 0' }}>
      <div className="wrap mob-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-8)' }}>
        {PILLARS.map(p => (
          <div key={p.label}>
            <StatBlock value={p.value} label={p.label} />
            <p style={{ fontSize: 'var(--size-body-sm)', marginTop: 12, maxWidth: 300 }}>{p.note}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section">
      <div className="wrap mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)', alignItems: 'center' }}>
        <div>
          <div className="eyebrow">Quiénes somos</div>
          <h2 style={{ fontSize: 'var(--size-display-md)', margin: '16px 0 20px' }}>
            Expertos en ayudar a las personas a moverse mejor y vivir sin dolor
          </h2>
          <p style={{ marginBottom: 16 }}>
            Pilates es un método accesible y efectivo tanto para quienes buscan mejorar su postura, fuerza y movilidad,
            como para quienes han pasado por lesiones o conviven con molestias físicas.
          </p>
          <p style={{ fontFamily: 'var(--font-script)', fontSize: 34, color: 'var(--deep-teal)', lineHeight: 1.2 }}>
            Cualquier persona puede practicar pilates
          </p>
        </div>
        <PhotoFrame src="./img_0087-msg8eqr8-x0h9.jpg" ratio="4 / 3" alt="Puente de hombros en reformer" />
      </div>
    </section>
  );
}

function Benefits() {
  return (
    <section className="section" style={{ background: 'var(--bone)' }}>
      <div className="wrap" style={{ display: 'flex', gap: 'var(--space-9)' }}>
        <div style={{ flex: 1 }}>
          <h2 style={{ fontSize: 'var(--size-display-md)', marginBottom: 18 }}>Los beneficios del Pilates</h2>
          <p style={{ maxWidth: 640, marginBottom: 'var(--space-6)' }}>
            Un método seguro y adaptable que contribuye a una mejor calidad de vida, tanto en la rehabilitación
            como en el entrenamiento físico general.
          </p>
          <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-6)' }}>
            {BENEFITS.map(b => (
              <div key={b.t} style={{ borderTop: '1px solid var(--border-strong)', paddingTop: 'var(--space-4)' }}>
                <h3 style={{ fontSize: 20, letterSpacing: 'var(--tracking-display-tight)', marginBottom: 8 }}>{b.t}</h3>
                <p style={{ fontSize: 'var(--size-body-sm)' }}>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PhotoBand() {
  return (
    <section style={{ background: 'var(--slate)', padding: 'var(--space-8) 0' }}>
      <div className="wrap mob-stack" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)', alignItems: 'center' }}>
        <PhotoFrame src="./img_6390-msg8fg22-b9g9.jpg" ratio="3 / 2" alt="Teaser en reformer" />
        <div>
          <div className="eyebrow" style={{ color: 'var(--aqua)' }}>La sala</div>
          <h2 style={{ color: 'var(--white)', fontSize: 'var(--size-display-md)', margin: '16px 0 18px' }}>Seis camillas grupales y una individual</h2>
          <p style={{ color: 'var(--bone)' }}>
            Trabajamos con camillas importadas de la más alta calidad en la industria del Pilates: seis para la clase
            grupal y una reservada para las sesiones personalizadas. Todas las clases son presenciales y de 50 minutos.
          </p>
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section className="section">
      <div className="wrap mob-stack" style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 'var(--space-8)', alignItems: 'center' }}>
        <PhotoFrame src="./linda-palma-00-msg88fye-x2if.jpg" ratio="1 / 1" alt="Linda Palma" />
        <div>
          <div className="eyebrow">Lo que dicen sobre nosotros</div>
          <blockquote style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 'var(--weight-light)', fontSize: 'var(--size-display-sm)', lineHeight: 1.25, color: 'var(--ink)' }}>
            “El Pilates me ha cambiado la vida: me ha ayudado a mejorar mi movilidad, fortalecer mi cuerpo
            y recuperar salud después de todo lo que viví.”
          </blockquote>
          <Divider style={{ margin: 'var(--space-5) 0 var(--space-4)' }} />
          <div style={{ fontSize: 'var(--size-body)', color: 'var(--ink)' }}>Linda Palma</div>
          <div style={{ fontSize: 'var(--size-micro)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 4 }}>
            Bravísimo y La Red
          </div>
        </div>
      </div>
    </section>
  );
}

function Visit() {
  return (
    <section className="section" style={{ background: 'var(--mist)' }}>
      <div className="wrap">
        <div className="eyebrow">Visítanos</div>
        <h2 style={{ fontSize: 'var(--size-display-md)', margin: '16px 0 var(--space-6)' }}>Pongámonos en contacto</h2>
        <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 'var(--space-6)', alignItems: 'stretch' }}>
          <div style={{ borderRadius: 'var(--radius-md)', overflow: 'hidden', minHeight: 340, border: '1px solid var(--border-subtle)' }}>
            <iframe title="Mapa del estudio" src={CONTACT.map} style={{ width: '100%', height: '100%', minHeight: 340, border: 0, display: 'block' }} loading="lazy"></iframe>
          </div>
          <Card tone="surface" padding="var(--space-6)" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <div>
              <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Dirección</div>
              <p style={{ marginTop: 8, color: 'var(--ink)' }}>{CONTACT.building}</p>
              <p style={{ fontSize: 'var(--size-body-sm)', marginTop: 4 }}>{CONTACT.address}<br />{CONTACT.city}</p>
            </div>
            <div>
              <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Contacto</div>
              <p style={{ marginTop: 8, color: 'var(--ink)' }}>{CONTACT.person} · {CONTACT.phone}</p>
              <p style={{ fontSize: 'var(--size-body-sm)', marginTop: 4 }}>Instagram @{CONTACT.instagram}</p>
            </div>
            <div>
              <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Horarios de atención</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
                {CONTACT.hours.map(([d, h]) => (
                  <div key={d} style={{ display: 'flex', gap: 10, fontSize: 'var(--size-body-sm)', flexWrap: 'wrap' }}>
                    <span style={{ color: 'var(--ink)', minWidth: 150 }}>{d}</span>
                    <span>{h}</span>
                  </div>
                ))}
              </div>
            </div>
            <Button size="lg" onClick={() => window.open(WHATSAPP, '_blank')} style={{ marginTop: 'auto', alignSelf: 'flex-start' }}>
              Escríbenos por WhatsApp
            </Button>
          </Card>
        </div>
      </div>
    </section>
  );
}

function Footer({ onNavigate }) {
  return (
    <footer style={{ background: 'var(--ink)', padding: 'var(--space-8) 0 var(--space-6)' }}>
      <div className="wrap">
        <div className="mob-stack" style={{ display: 'flex', gap: 'var(--space-8)', alignItems: 'flex-start' }}>
          <Logo color="aqua" height={120} assetPath={LOGOS} />
          <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', flex: 1, marginTop: 8 }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--steel)' }}>Estudio</div>
              <p style={{ color: 'var(--bone)', fontSize: 'var(--size-body-sm)', marginTop: 12 }}>
                {CONTACT.building}<br />{CONTACT.address}<br />{CONTACT.city}
              </p>
            </div>
            <div>
              <div className="eyebrow" style={{ color: 'var(--steel)' }}>Horarios</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 12 }}>
                {CONTACT.hours.map(([d, h]) => (
                  <div key={d} style={{ color: 'var(--bone)', fontSize: 'var(--size-body-sm)' }}>
                    <span style={{ color: 'var(--white)' }}>{d}</span><br />{h}
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ color: 'var(--steel)' }}>Contacto</div>
              <p style={{ color: 'var(--bone)', fontSize: 'var(--size-body-sm)', marginTop: 12 }}>
                {CONTACT.person}<br />{CONTACT.phone}<br />@{CONTACT.instagram}
              </p>
            </div>
          </div>
        </div>
        <Divider tone="inverse" style={{ margin: 'var(--space-6) 0 var(--space-4)' }} />
        <div style={{ display: 'flex', gap: 'var(--space-5)', alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-script)', fontSize: 26, color: 'var(--aqua)' }}>LifeStudio</span>
          <div style={{ display: 'flex', gap: 'var(--space-5)', marginLeft: 'auto', flexWrap: 'wrap' }}>
            {NAV.map(n => (
              <a key={n.id} href={'#' + n.id} onClick={e => { e.preventDefault(); onNavigate(n.id); }}
                style={{ color: 'var(--bone)', fontSize: 'var(--size-micro)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase' }}>{n.label}</a>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 'var(--space-4)', flexWrap: 'wrap', marginTop: 'var(--space-4)' }}>
          {LEGAL.map(l => (
            <a key={l.id} href={'#' + l.id} onClick={e => { e.preventDefault(); onNavigate(l.id); }}
              style={{ color: 'var(--steel)', fontSize: 'var(--size-micro)' }}>{l.label}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, StatStrip, About, Benefits, PhotoBand, Testimonial, Visit, Footer });