// BODYWORK FITNESS — Main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#dc2626"
}/*EDITMODE-END*/;

const ACCENTS = {
  red:    { red: '#dc2626', deep: '#991b1b', bright: '#ef4444' },
  orange: { red: '#ea580c', deep: '#9a3412', bright: '#f97316' },
  pink:   { red: '#db2777', deep: '#9d174d', bright: '#ec4899' },
  lime:   { red: '#84cc16', deep: '#4d7c0f', bright: '#a3e635' }
};

function applyTheme(theme, accentKey) {
  const a = ACCENTS[accentKey] || ACCENTS.red;
  const root = document.documentElement;
  root.style.setProperty('--red', a.red);
  root.style.setProperty('--red-deep', a.deep);
  root.style.setProperty('--red-bright', a.bright);
  root.dataset.theme = theme;
}

// ─── NAV ─────────────────────────────────────────────────
function Nav({ onQuiz }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(10,10,10,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all 0.3s ease'
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 80
      }}>
        <a href="#top">
          <Logo size={32} />
        </a>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center' }} className="nav-links">
          {[
            ['Método', '#metodo'],
            ['Programas', '#programas'],
            ['Coach', '#sobre'],
            ['Resultados', '#historias'],
            ['Precios', '#precios']
          ].map(([l, h]) => (
            <a key={h} href={h} style={{ fontSize: 13, color: 'var(--fg)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{l}</a>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <button onClick={onQuiz} className="btn btn-ghost" style={{ padding: '12px 18px', fontSize: 11 }}>
            Tu plan ideal
          </button>
          <button className="btn btn-primary" style={{ padding: '12px 22px', fontSize: 11 }}>
            Aplicar <Icon name="arrow" size={12} />
          </button>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .nav-links { display: none !important; } }
      `}</style>
    </nav>
  );
}

// ─── HERO ─────────────────────────────────────────────────
function Hero({ onQuiz }) {
  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center',
      paddingTop: 120, paddingBottom: 60, overflow: 'hidden'
    }}>
      {/* Diagonal red accent */}
      <div style={{
        position: 'absolute', top: 0, right: 0, width: '45%', height: '100%',
        background: 'linear-gradient(135deg, transparent 0%, transparent 40%, rgba(220,38,38,0.08) 60%, rgba(220,38,38,0.15) 100%)',
        pointerEvents: 'none'
      }} />
      {/* Big number */}
      <div style={{
        position: 'absolute', right: -40, bottom: -80,
        fontSize: 'clamp(180px, 24vw, 360px)', fontWeight: 900,
        fontFamily: 'Archivo, sans-serif',
        color: 'transparent',
        WebkitTextStroke: '1px var(--line)',
        lineHeight: 0.8, letterSpacing: '-0.05em',
        pointerEvents: 'none', userSelect: 'none', opacity: 0.7
      }}>BW</div>

      <div className="container" style={{ position: 'relative', width: '100%' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.1fr 0.9fr',
          gap: 64,
          alignItems: 'center'
        }} className="hero-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 32 }}>
              Personal Training · Coaching Online · Solo mujeres
            </div>
            <h1 className="display" style={{
              fontSize: 'clamp(32px, 6vw, 72px)',
              fontWeight: 900,
              lineHeight: 1,
              letterSpacing: '-0.03em',
              color: 'var(--fg)'
            }}>
              Construye<br />
              el cuerpo<br />
              <span style={{ color: 'var(--red)' }}>que mereces.</span>
            </h1>
            <p style={{
              marginTop: 32, fontSize: 18, lineHeight: 1.55, color: 'var(--fg-soft)', maxWidth: 520
            }}>
              Coaching fitness personalizado para mujeres que están listas para
              hacerlo en serio. Sin atajos. Sin fórmulas mágicas. Solo trabajo
              real, método probado y resultados que se quedan.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" style={{ padding: '20px 32px', fontSize: 13 }}>
                Aplicar al programa <Icon name="arrow-up-right" size={16} />
              </button>
              <button onClick={onQuiz} className="btn btn-ghost" style={{ padding: '20px 32px', fontSize: 13 }}>
                <Icon name="bolt" size={14} /> Encuentra tu plan
              </button>
            </div>
            <div style={{
              display: 'flex', gap: 40, marginTop: 64, paddingTop: 32,
              borderTop: '1px solid var(--line)', flexWrap: 'wrap'
            }}>
              {[
                ['850+', 'mujeres entrenadas'],
                ['9', 'años de experiencia'],
                ['4.9', 'rating · 237 reseñas']
              ].map(([k, v], i) => (
                <div key={i}>
                  <div className="display" style={{ fontSize: 36, fontWeight: 900, color: 'var(--fg)', letterSpacing: '-0.03em' }}>{k}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-soft)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ position: 'relative' }} className="reveal">
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 12,
            }}>
              <div style={{ gridRow: 'span 2' }}>
                <Placeholder src="img/coach.jpg" aspect="3/5" objectPosition="center top" />
              </div>
              <div>
                <Placeholder src="img/programa-reset.jpg" aspect="1/1" />
              </div>
              <div>
                <Placeholder src="img/programa-membresia.jpg" aspect="1/1" />
              </div>
            </div>
            {/* Floating stat */}
            <div style={{
              position: 'absolute', bottom: -16, left: -16,
              background: 'var(--red)',
              color: '#fff',
              padding: '20px 24px',
              display: 'flex', alignItems: 'center', gap: 14,
              maxWidth: 260
            }}>
              <Icon name="flame" size={28} stroke={2} />
              <div>
                <div style={{ fontSize: 11, opacity: 0.9, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Esta semana</div>
                <div className="display" style={{ fontSize: 20, fontWeight: 800, marginTop: 2, letterSpacing: '-0.02em' }}>
                  +23 nuevas reservas
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ─── METHOD / 4 PILLARS ────────────────────────────────
function Method() {
  const pillars = [
    { icon: 'dumbbell', name: 'Fuerza', desc: 'Entrenamiento de fuerza progresivo, adaptado a tu cuerpo y tu ciclo. Sin cardio interminable.' },
    { icon: 'apple', name: 'Nutrición', desc: 'Sin contar calorías. Educación nutricional real, comida que te gusta y resultados que duran.' },
    { icon: 'shield', name: 'Recuperación', desc: 'Sueño, manejo del estrés, hormonas. Lo que tu cuerpo necesita para responder al entrenamiento.' },
    { icon: 'target', name: 'Mentalidad', desc: 'Hábitos que se quedan. Una relación honesta con tu cuerpo, sin culpa ni todo-o-nada.' },
  ];
  return (
    <section id="metodo" style={{ padding: '140px 0', background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 72 }} className="method-head">
          <SectionHead
            eyebrow="01 — El método"
            title={<>Cuatro pilares.<br/><span style={{ color: 'var(--red)' }}>Un sistema</span> que funciona.</>}
          />
          <p style={{ fontSize: 17, color: 'var(--fg-soft)', lineHeight: 1.6, maxWidth: 460 }}>
            Olvida los planes aislados. El método BODYWORK combina los cuatro
            elementos que sí mueven la aguja — y los integra en tu vida real,
            no en una versión idealizada de ella.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
          background: 'var(--line)',
          border: '1px solid var(--line)'
        }} className="pillars-grid">
          {pillars.map((p, i) => (
            <div key={i} style={{
              background: 'var(--bg-2)', padding: '40px 32px',
              minHeight: 320, display: 'flex', flexDirection: 'column',
              gap: 24, transition: 'background 0.3s, color 0.3s', cursor: 'default'
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--red)'; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--bg-2)'; e.currentTarget.style.color = ''; }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <Icon name={p.icon} size={36} stroke={1.5} />
                <span className="mono" style={{ fontSize: 11, opacity: 0.6 }}>0{i + 1} / 04</span>
              </div>
              <div style={{ marginTop: 'auto' }}>
                <h3 className="display" style={{ fontSize: 32, fontWeight: 900, marginBottom: 12, letterSpacing: '-0.02em' }}>{p.name}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, opacity: 0.85 }}>{p.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .method-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .pillars-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ─── PROGRAMS ────────────────────────────────
function Programs() {
  const programs = [
    {
      tag: '★ Más popular',
      name: 'Reset 12 semanas',
      img: 'img/programa-reset.jpg',
      desc: 'El programa insignia. Para mujeres que quieren un cambio real, profundo y sostenible.',
      points: ['Plan de entrenamiento 100% personal', '1:1 semanal por video', 'Plan nutricional adaptado', 'WhatsApp directo', 'Comunidad privada']
    },
    {
      tag: null,
      name: 'Strong Mom',
      img: 'img/programa-strong-mom.jpg',
      desc: 'Para mamás que quieren reconectar con su cuerpo después del embarazo, con seguridad.',
      points: ['Suelo pélvico y diástasis', 'Recuperación postparto guiada', 'Entrenamiento con bebé', 'Asesoría hormonal', 'Apoyo emocional']
    },
    {
      tag: null,
      name: 'Membresía BW',
      img: 'img/programa-membresia.jpg',
      desc: 'Acceso completo a entrenamientos, planes y comunidad. A tu ritmo, sin compromiso.',
      points: ['+200 entrenamientos guiados', 'Plan nuevo cada mes', 'Recetas semanales', 'Comunidad de mujeres', 'Cancela cuando quieras']
    },
  ];
  return (
    <section id="programas" style={{ padding: '140px 0' }}>
      <div className="container">
        <SectionHead
          eyebrow="02 — Programas"
          title={<>Tres caminos.<br/>Uno es el <span style={{ color: 'var(--red)' }}>tuyo.</span></>}
          kicker="Diseñados para distintos momentos de tu vida y tus objetivos. Si no sabes cuál, hago un quiz rápido contigo."
        />
        <div style={{
          marginTop: 72,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16
        }} className="programs-grid">
          {programs.map((pr, i) => (
            <article key={i} className="lift" style={{
              background: i === 0 ? 'var(--red)' : 'var(--bg-2)',
              color: i === 0 ? '#fff' : 'var(--fg)',
              border: i === 0 ? 'none' : '1px solid var(--line)',
              display: 'flex',
              flexDirection: 'column'
            }}>
              <div style={{ position: 'relative' }}>
                <Placeholder src={pr.img} aspect="4/3" radius={0} style={{ border: 'none', borderBottom: i === 0 ? 'none' : '1px solid var(--line)' }} />
                {pr.tag && (
                  <span style={{
                    position: 'absolute', top: 16, left: 16,
                    background: '#fff', color: 'var(--red)',
                    padding: '8px 14px', fontSize: 10,
                    fontFamily: 'JetBrains Mono, monospace',
                    textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700
                  }}>{pr.tag}</span>
                )}
              </div>
              <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
                <div className="mono" style={{ fontSize: 11, opacity: 0.7 }}>0{i + 1} / 03</div>
                <h3 className="display" style={{ fontSize: 32, fontWeight: 900, lineHeight: 0.95, letterSpacing: '-0.03em' }}>{pr.name}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.5, opacity: 0.9 }}>{pr.desc}</p>
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8 }}>
                  {pr.points.map((pt, j) => (
                    <li key={j} style={{ fontSize: 13, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                      <span style={{ color: i === 0 ? '#fff' : 'var(--red)', flexShrink: 0, marginTop: 2 }}>
                        <Icon name="check" size={14} stroke={2.5} />
                      </span>{pt}
                    </li>
                  ))}
                </ul>
                <button style={{
                  marginTop: 'auto',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '16px 0', borderTop: '1px solid currentColor',
                  fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em'
                }}>
                  Conocer programa <Icon name="arrow-up-right" size={14} />
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 980px) { .programs-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// ─── ABOUT ───────────────────────────────────
function About() {
  return (
    <section id="sobre" style={{ padding: '140px 0', background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 80, alignItems: 'center'
        }} className="about-grid">
          <div style={{ position: 'relative' }}>
            <Placeholder src="img/coach.jpg" aspect="3/4" objectPosition="center top" />
            {/* Red badge */}
            <div style={{
              position: 'absolute', top: -24, right: -24,
              background: 'var(--red)', color: '#fff',
              width: 140, height: 140,
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              transform: 'rotate(6deg)',
              clipPath: 'polygon(0 0, 100% 0, 95% 100%, 0 95%)'
            }}>
              <span className="display" style={{ fontSize: 40, fontWeight: 900, lineHeight: 1 }}>9</span>
              <span style={{ fontSize: 10, fontFamily: 'JetBrains Mono', textTransform: 'uppercase', letterSpacing: '0.15em', textAlign: 'center', marginTop: 4 }}>años<br/>de coaching</span>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>03 — Coach</div>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 5vw, 60px)', fontWeight: 900, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
              Soy <span style={{ color: 'var(--red)' }}>Lucía Marín.</span><br/>
              Y entreno mujeres que <em>van en serio.</em>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.65, marginTop: 28, color: 'var(--fg-soft)', maxWidth: 580 }}>
              Soy entrenadora certificada en fuerza para mujeres y nutrición
              deportiva. Llevo 9 años ayudando a mujeres a dejar de pelearse
              con su cuerpo y empezar a construirlo, con cabeza.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.65, marginTop: 16, color: 'var(--fg-soft)', maxWidth: 580 }}>
              Mi enfoque es directo: <span style={{ color: 'var(--red)', fontWeight: 600 }}>menos ruido, más constancia.</span> Sin
              dietas mágicas, sin entrenamientos imposibles. Solo un método que
              respeta tu cuerpo, tu agenda y tu fuerza real.
            </p>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 48,
              paddingTop: 32, borderTop: '1px solid var(--line)'
            }} className="cert-grid">
              {[
                ['NSCA', 'Personal Trainer Certified'],
                ['Pre & Post', 'Natal Specialist'],
                ['Precision', 'Nutrition Level 1']
              ].map(([t, s], i) => (
                <div key={i}>
                  <div className="display" style={{ fontSize: 20, fontWeight: 900, color: 'var(--red)' }}>{t}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-soft)', marginTop: 6, lineHeight: 1.4 }}>{s}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .cert-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ─── TRANSFORMATIONS ────────────────────────
function Transformations() {
  const stories = [
    { name: 'María, 34', img: 'img/transformacion-4.jpg', stat: '-12 KG', months: '6 meses', note: 'Ganó masa muscular y dejó la dieta perpetua.' },
    { name: 'Andrea, 41', img: 'img/transformacion-3.jpg', stat: '+8KG fuerza', months: '4 meses', note: 'Recuperó energía después del segundo bebé.' },
    { name: 'Sofía, 28', img: 'img/transformacion-2.jpg', stat: '+3 tallas', months: '5 meses', note: 'Cambió el cardio infinito por entrenamiento real.' },
    { name: 'Camila, 38', img: 'img/transformacion-1.jpg', stat: '-15% grasa', months: '12 sem', note: 'Cambió por completo su relación con la comida.' }
  ];
  return (
    <section id="historias" style={{ padding: '140px 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24, marginBottom: 64 }}>
          <SectionHead
            eyebrow="04 — Resultados reales"
            title={<>No es magia.<br/>Es <span style={{ color: 'var(--red)' }}>método</span> + tiempo.</>}
          />
          <button className="btn btn-ghost" style={{ padding: '16px 24px' }}>
            Ver todas <Icon name="arrow-up-right" size={14} />
          </button>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16
        }} className="stories-grid">
          {stories.map((s, i) => (
            <div key={i} className="lift">
              <div style={{ position: 'relative' }}>
                <Placeholder src={s.img} aspect="1/1" />
                <div style={{
                  position: 'absolute', top: 12, left: 12,
                  background: 'var(--red)', color: '#fff',
                  padding: '6px 10px', fontSize: 10,
                  fontFamily: 'JetBrains Mono', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600
                }}>{s.months}</div>
                <div style={{
                  position: 'absolute', bottom: 12, right: 12,
                  background: 'var(--bg)', color: 'var(--red)',
                  padding: '8px 12px',
                  fontFamily: 'Archivo, sans-serif', fontWeight: 900, fontSize: 14,
                  letterSpacing: '-0.01em'
                }}>{s.stat}</div>
              </div>
              <div style={{ marginTop: 16 }}>
                <span className="display" style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>{s.name}</span>
                <p style={{ fontSize: 13, color: 'var(--fg-soft)', marginTop: 6, lineHeight: 1.5 }}>{s.note}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 980px) { .stories-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </section>
  );
}

// ─── TESTIMONIALS ────────────────────────────
function Testimonials() {
  const items = [
    { quote: 'Por primera vez en años no estoy a dieta. Como mejor que nunca y mi cuerpo lo refleja.', name: 'Patricia G.', detail: 'Reset 12 sem · 4 meses', accent: false },
    { quote: 'Lucía no vende milagros. Vende consistencia y resultados que duran.', name: 'Renata M.', detail: 'Membresía BW · 1 año', accent: true },
    { quote: 'Mi suelo pélvico, mi fuerza, mi paz mental — todo cambió. Y entreno solo 3 veces por semana.', name: 'Daniela P.', detail: 'Strong Mom · 6 meses', accent: false }
  ];
  return (
    <section style={{ padding: '140px 0', background: 'var(--bg-2)' }}>
      <div className="container">
        <SectionHead
          eyebrow="05 — Lo que dicen"
          title={<>237 reseñas.<br/>4.9 de <span style={{ color: 'var(--red)' }}>5 estrellas.</span></>}
        />
        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="test-grid">
          {items.map((t, i) => <Testimonial key={i} {...t} />)}
        </div>
      </div>
      <style>{`@media (max-width: 980px) { .test-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// ─── PRICING ─────────────────────────────────
function Pricing() {
  const tiers = [
    {
      tier: 'Starter', price: 80, period: 'mes',
      desc: 'Para empezar a tu ritmo, sin compromiso.',
      features: [
        'Acceso a +200 entrenamientos',
        'Plan mensual actualizado',
        'Biblioteca de recetas',
        'Comunidad privada de WhatsApp'
      ],
      cta: 'Empezar ahora'
    },
    {
      tier: 'Reset 1:1', price: 197, period: 'mes',
      desc: 'El programa insignia. Coaching personal completo.',
      features: [
        'Plan de entrenamiento 100% personalizado',
        'Plan nutricional adaptado a ti',
        '1 sesión 1:1 semanal por video',
        'WhatsApp directo conmigo',
        'Ajustes mensuales según tu progreso',
        'Todo lo del plan Starter incluido'
      ],
      cta: 'Aplicar al programa',
      highlight: true
    },
    {
      tier: 'Mentoría', price: 397, period: 'mes',
      desc: 'Para mujeres que van en serio. Solo 6 plazas.',
      features: [
        'Coaching 1:1 ilimitado',
        '2 sesiones por semana',
        'Análisis de composición corporal',
        'Plan integral hormonal',
        'Sesiones de mindset incluidas',
        'Acceso vitalicio a todos los recursos'
      ],
      cta: 'Aplicar (cupo limitado)'
    }
  ];
  return (
    <section id="precios" style={{ padding: '140px 0' }}>
      <div className="container">
        <SectionHead
          eyebrow="06 — Precios"
          title={<>Tu nivel.<br/>Tu <span style={{ color: 'var(--red)' }}>compromiso.</span></>}
          kicker="Tres niveles para distintos momentos. Sin permanencia. Cancela cuando quieras."
          align="center"
        />
        <div style={{
          marginTop: 72,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16
        }} className="price-grid">
          {tiers.map((t, i) => <PriceTier key={i} {...t} />)}
        </div>
        <p style={{ textAlign: 'center', marginTop: 32, fontSize: 13, color: 'var(--fg-soft)' }}>
          ¿Tienes dudas? <a href="#contacto" style={{ color: 'var(--red)', textDecoration: 'underline' }}>Agenda una llamada gratis de 15 min</a> y te ayudo a elegir.
        </p>
      </div>
      <style>{`@media (max-width: 980px) { .price-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: '¿Necesito ir a un gimnasio?', a: 'No es indispensable. Adapto los planes a lo que tienes en casa o al gimnasio si lo prefieres. Lo importante es la consistencia, no el lugar.' },
    { q: '¿Y si nunca he entrenado fuerza?', a: 'Mejor. Empezamos desde cero, con técnica primero. La mayoría de mis clientas nunca habían tocado una pesa antes — y hoy entrenan con confianza y resultados.' },
    { q: '¿En cuánto tiempo voy a ver resultados?', a: 'Cambios reales y sostenibles toman tiempo. En 4 semanas ya notarás más energía y fuerza. La transformación visible llega entre las semanas 8 y 12, dependiendo de tu punto de partida.' },
    { q: '¿Funciona si tengo poco tiempo?', a: 'Sí. Mis programas se adaptan a 3-4 sesiones de 45 minutos por semana. Está diseñado para mujeres con vidas reales — trabajo, familia, todo.' },
    { q: '¿Qué pasa si no me convence?', a: 'Tienes 14 días de garantía total. Si en ese tiempo sientes que no es para ti, te devuelvo el 100% sin preguntas.' },
    { q: '¿Cómo se hacen las sesiones 1:1?', a: 'Por videollamada (Zoom o Google Meet), en horarios flexibles. Te grabo cada sesión para que puedas revisarla cuando quieras.' },
  ];
  return (
    <section style={{ padding: '140px 0', background: 'var(--bg-2)' }}>
      <div className="container" style={{ maxWidth: 960 }}>
        <SectionHead
          eyebrow="07 — Preguntas frecuentes"
          title={<>Lo que <span style={{ color: 'var(--red)' }}>realmente</span><br/>quieres saber.</>}
        />
        <div style={{ marginTop: 64 }}>
          {items.map((it, i) => (
            <FAQItem key={i} {...it} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA ────────────────────────────────────
function CTA({ onQuiz }) {
  return (
    <section id="contacto" style={{
      padding: '140px 0', position: 'relative', overflow: 'hidden',
      background: 'var(--red)', color: '#fff'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 20% 20%, rgba(0,0,0,0.3) 0%, transparent 60%)',
        pointerEvents: 'none'
      }} />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ maxWidth: 920 }}>
          <div className="eyebrow" style={{ color: '#fff', marginBottom: 24 }}>
            <span style={{ background: '#fff' }}></span>
            Empezamos
          </div>
          <h2 className="display" style={{
            fontSize: 'clamp(36px, 7vw, 88px)', fontWeight: 900, lineHeight: 1, letterSpacing: '-0.03em'
          }}>
            ¿Lista para<br/>hacerlo<br/>en serio?
          </h2>
          <p style={{ fontSize: 20, marginTop: 32, lineHeight: 1.5, maxWidth: 560, opacity: 0.95 }}>
            Aplica al programa. Reviso cada solicitud personalmente para
            asegurar que somos el match correcto.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 48, flexWrap: 'wrap' }}>
            <button className="btn btn-light" style={{ padding: '22px 36px', fontSize: 14 }}>
              Aplicar al Reset 1:1 <Icon name="arrow-up-right" size={16} />
            </button>
            <button onClick={onQuiz} style={{
              padding: '22px 36px', fontSize: 14, fontWeight: 600,
              border: '1px solid rgba(255,255,255,0.4)', color: '#fff',
              textTransform: 'uppercase', letterSpacing: '0.08em',
              display: 'inline-flex', alignItems: 'center', gap: 10
            }}>
              No sé cuál es mi plan
            </button>
          </div>
          <div style={{ marginTop: 72, display: 'flex', gap: 32, flexWrap: 'wrap', fontSize: 13 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, opacity: 0.9 }}>
              <Icon name="check" size={14} stroke={2.5} /> Garantía 14 días
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, opacity: 0.9 }}>
              <Icon name="check" size={14} stroke={2.5} /> Sin permanencia
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, opacity: 0.9 }}>
              <Icon name="check" size={14} stroke={2.5} /> Llamada gratis 15 min
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ─────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: '#000', color: '#f5f5f5', padding: '80px 0 32px' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48
        }} className="footer-grid">
          <div>
            <Logo size={36} />
            <p style={{ fontSize: 14, opacity: 0.7, marginTop: 24, maxWidth: 320, lineHeight: 1.55 }}>
              Personal training y coaching online para mujeres que están listas
              para construir el cuerpo que merecen — con cabeza y constancia.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
              {['instagram', 'tiktok', 'youtube', 'whatsapp'].map(s => (
                <a key={s} style={{
                  width: 40, height: 40,
                  border: '1px solid rgba(255,255,255,0.2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  cursor: 'pointer', transition: 'all 0.2s'
                }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--red)'; e.currentTarget.style.borderColor = 'var(--red)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)'; }}>
                  <Icon name={s} size={16} />
                </a>
              ))}
            </div>
          </div>
          {[
            { t: 'Programas', l: ['Reset 12 sem', 'Strong Mom', 'Membresía BW', 'Mentoría'] },
            { t: 'Recursos', l: ['Blog', 'Podcast', 'E-book gratis', 'Newsletter'] },
            { t: 'Contacto', l: ['hola@luciamarincoach.com', 'Agendar llamada', 'FAQ', 'Términos & Privacidad'] }
          ].map((c, i) => (
            <div key={i}>
              <div className="eyebrow" style={{ marginBottom: 20 }}>{c.t}</div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.l.map((it, j) => (
                  <li key={j} style={{ fontSize: 14, opacity: 0.8, cursor: 'pointer' }}>{it}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 64, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          fontSize: 12, opacity: 0.6
        }}>
          <div>© 2026 BODYWORK FITNESS. Todos los derechos reservados.</div>
          <div className="mono">PERSONAL TRAINING · COACHING</div>
        </div>
      </div>
      <style>{`@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </footer>
  );
}

// ─── QUIZ MODAL ─────────────────────────────
function QuizModal({ open, onClose }) {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const questions = [
    {
      key: 'goal',
      q: '¿Cuál es tu objetivo principal?',
      options: [
        { v: 'lose', label: 'Perder grasa y tonificar', icon: 'flame' },
        { v: 'strong', label: 'Ganar fuerza y músculo', icon: 'dumbbell' },
        { v: 'postpartum', label: 'Recuperarme post-parto', icon: 'heart' },
        { v: 'health', label: 'Más energía y bienestar', icon: 'bolt' },
      ]
    },
    {
      key: 'experience',
      q: '¿Cuánto has entrenado antes?',
      options: [
        { v: 'none', label: 'Nada o muy poco', icon: 'sparkle' },
        { v: 'some', label: 'A ratos, sin constancia', icon: 'target' },
        { v: 'regular', label: 'Entreno regular, quiero más', icon: 'flame' },
      ]
    },
    {
      key: 'time',
      q: '¿Cuánto tiempo tienes a la semana?',
      options: [
        { v: '2-3', label: '2-3 sesiones cortas', icon: 'sparkle' },
        { v: '3-4', label: '3-4 sesiones de 45 min', icon: 'bolt' },
        { v: '5+', label: '5+ sesiones, voy en serio', icon: 'flame' },
      ]
    },
    {
      key: 'support',
      q: '¿Qué nivel de acompañamiento prefieres?',
      options: [
        { v: 'self', label: 'A mi ritmo, autónoma', icon: 'sparkle' },
        { v: 'group', label: 'En comunidad, con apoyo', icon: 'heart' },
        { v: '1on1', label: '1:1 personal, sin distracciones', icon: 'target' },
      ]
    }
  ];

  const isResult = step >= questions.length;

  const getRecommendation = () => {
    const a = answers;
    if (a.goal === 'postpartum') {
      return {
        plan: 'Strong Mom',
        price: '$147/mes',
        why: 'Programa especializado en recuperación post-parto, suelo pélvico y diástasis. Diseñado para mamás que quieren reconectar con su cuerpo de forma segura.',
        cta: 'Conocer Strong Mom'
      };
    }
    if (a.support === '1on1' || a.time === '5+') {
      return {
        plan: 'Reset 1:1',
        price: '$197/mes',
        why: 'Quieres acompañamiento cercano y resultados profundos. El programa insignia, con coaching personal completo, es para ti.',
        cta: 'Aplicar al Reset 1:1'
      };
    }
    return {
      plan: 'Membresía BW',
      price: '$49/mes',
      why: 'Tienes ganas de empezar a tu ritmo. La membresía te da todo lo que necesitas con flexibilidad total y la mejor relación calidad-precio.',
      cta: 'Empezar la membresía'
    };
  };

  const reset = () => { setStep(0); setAnswers({}); };

  if (!open) return null;

  const rec = isResult ? getRecommendation() : null;
  const progress = (step / questions.length) * 100;

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20, animation: 'fadeUp 0.3s ease'
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        background: 'var(--bg-2)', maxWidth: 680, width: '100%',
        padding: 56, position: 'relative',
        maxHeight: '90vh', overflow: 'auto',
        border: '1px solid var(--line)'
      }}>
        <button onClick={onClose} style={{
          position: 'absolute', top: 24, right: 24,
          width: 40, height: 40,
          border: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--fg)'
        }}>
          <Icon name="close" size={16} />
        </button>

        <div style={{ marginBottom: 36 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--red)', textTransform: 'uppercase', letterSpacing: '0.15em', fontWeight: 600 }}>
              {isResult ? '★ Tu plan ideal' : `Paso ${step + 1} / ${questions.length}`}
            </span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--fg-soft)' }}>
              {Math.round(isResult ? 100 : progress)}%
            </span>
          </div>
          <div style={{ height: 3, background: 'var(--line)', overflow: 'hidden' }}>
            <div style={{
              height: '100%',
              background: 'var(--red)',
              width: `${isResult ? 100 : progress}%`,
              transition: 'width 0.4s cubic-bezier(0.4,0,0.2,1)'
            }} />
          </div>
        </div>

        {!isResult ? (
          <div key={step} className="reveal">
            <h3 className="display" style={{ fontSize: 36, fontWeight: 900, lineHeight: 1.05, color: 'var(--fg)', marginBottom: 32, letterSpacing: '-0.02em' }}>
              {questions[step].q}
            </h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {questions[step].options.map(opt => (
                <button key={opt.v} onClick={() => {
                  setAnswers({ ...answers, [questions[step].key]: opt.v });
                  setTimeout(() => setStep(step + 1), 120);
                }} style={{
                  display: 'flex', alignItems: 'center', gap: 16,
                  padding: '20px 24px',
                  border: '1px solid var(--line)',
                  textAlign: 'left',
                  fontSize: 15, color: 'var(--fg)', fontWeight: 500,
                  transition: 'all 0.2s'
                }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--red)'; e.currentTarget.style.background = 'var(--bg-3)'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.background = 'transparent'; }}
                >
                  <span style={{
                    width: 40, height: 40,
                    background: 'var(--red)', color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0
                  }}>
                    <Icon name={opt.icon} size={18} />
                  </span>
                  <span style={{ flex: 1 }}>{opt.label}</span>
                  <Icon name="arrow" size={16} />
                </button>
              ))}
            </div>
            {step > 0 && (
              <button onClick={() => setStep(step - 1)} style={{
                marginTop: 28, fontSize: 12, color: 'var(--fg-soft)',
                textTransform: 'uppercase', letterSpacing: '0.1em'
              }}>
                ← Volver
              </button>
            )}
          </div>
        ) : (
          <div className="reveal">
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 16px', background: 'var(--red)', color: '#fff',
              fontSize: 11, fontFamily: 'JetBrains Mono', textTransform: 'uppercase',
              letterSpacing: '0.15em', marginBottom: 24, fontWeight: 600
            }}>
              <Icon name="bolt" size={12} /> Tu match perfecto
            </div>
            <h3 className="display" style={{ fontSize: 56, fontWeight: 900, lineHeight: 0.95, color: 'var(--fg)', letterSpacing: '-0.03em' }}>
              {rec.plan}
            </h3>
            <div className="display" style={{ fontSize: 28, color: 'var(--red)', marginTop: 12, fontWeight: 800 }}>
              {rec.price}
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg-soft)', marginTop: 24, marginBottom: 36, maxWidth: 520 }}>
              {rec.why}
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" style={{ padding: '18px 28px' }}>
                {rec.cta} <Icon name="arrow-up-right" size={14} />
              </button>
              <button onClick={reset} className="btn btn-ghost" style={{ padding: '18px 28px' }}>
                Volver a empezar
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── TWEAKS ─────────────────────────────────
function TweaksUI() {
  const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor } = window;
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const accentKey = Object.keys(ACCENTS).find(k => ACCENTS[k].red === t.accent) || 'red';
    applyTheme(t.theme, accentKey);
  }, [t.theme, t.accent]);

  return (
    <TweaksPanel title="Tweaks" defaultOpen={false}>
      <TweakSection title="Tema">
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={[
            { value: 'dark', label: 'Oscuro' },
            { value: 'light', label: 'Claro' }
          ]}
          onChange={v => setT('theme', v)}
        />
      </TweakSection>
      <TweakSection title="Acento">
        <TweakColor
          label="Color signature"
          value={t.accent}
          options={['#dc2626', '#ea580c', '#db2777', '#84cc16']}
          onChange={v => setT('accent', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ─── APP ────────────────────────────────────
function App() {
  const [quizOpen, setQuizOpen] = React.useState(false);

  React.useEffect(() => {
    const accentKey = Object.keys(ACCENTS).find(k => ACCENTS[k].red === TWEAK_DEFAULTS.accent) || 'red';
    applyTheme(TWEAK_DEFAULTS.theme, accentKey);
  }, []);

  return (
    <>
      <Nav onQuiz={() => setQuizOpen(true)} />
      <Hero onQuiz={() => setQuizOpen(true)} />
      <Marquee items={['Coaching real', 'Sin atajos', 'Solo mujeres', 'Resultados que duran', 'Entrena en serio']} />
      <Method />
      <Programs />
      <About />
      <Transformations />
      <Testimonials />
      <Pricing />
      <FAQ />
      <CTA onQuiz={() => setQuizOpen(true)} />
      <Footer />
      <QuizModal open={quizOpen} onClose={() => setQuizOpen(false)} />
      <TweaksUI />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);