// ─── Hero Variants ────────────────────────────────────────────

function HeroA({ setCurrentPage, onOpenQuiz }) {
  const waLink = `https://wa.me/543413348415?text=${encodeURIComponent('Hola, quisiera reservar una consulta en LANA')}`;
  return (
    <div className="hero-grid" style={{ minHeight: '100vh', display: 'grid', gridTemplateColumns: '1fr 1fr', position: 'relative', overflow: 'hidden', background: 'var(--cream)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '120px max(40px,5vw) 80px', position: 'relative', zIndex: 1 }}>
        <Label style={{ marginBottom: 28 }}>Medicina Estética · Rosario</Label>
        <h1 className="t-h2-inv" style={{ fontSize: 'clamp(52px, 6vw, 82px)', color: 'var(--dark)', marginBottom: 28, letterSpacing: '-0.01em' }}>
          Tu belleza,<br />
          <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>en su versión</em><br />
          más natural.
        </h1>
        <GoldLine style={{ marginBottom: 28 }} />
        <p className="t-body" style={{ fontSize: 17, maxWidth: 400, marginBottom: 40 }}>
          Tratamientos personalizados diseñados para realzar lo mejor de vos, con resultados sutiles y progresivos. A cargo de la Dra. Lorena Lana.
        </p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <BtnPrimary href={waLink}>Reservar consulta</BtnPrimary>
          <BtnOutline onClick={onOpenQuiz}>Encontrar mi tratamiento</BtnOutline>
        </div>
        <div style={{ marginTop: 56, display: 'flex', gap: 36 }}>
          {[['+8 años', 'de experiencia'], ['Resultados', 'naturales'], ['Protocolo', 'médico']].map(([n, l]) => (
            <div key={n}>
              <div className="t-serif" style={{ fontSize: 32, fontWeight: 500, color: 'var(--gold)' }}>{n}</div>
              <div className="t-body" style={{ fontSize: 16, letterSpacing: '0.08em', marginTop: 1 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <img src="uploads/main-picture.png" alt="Dra. Lorena Lana" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, var(--cream) 0%, transparent 85%)' }} />
      </div>
    </div>
  );
}

function HeroB({ setCurrentPage, onOpenQuiz }) {
  const waLink = `https://wa.me/543413348415?text=${encodeURIComponent('Hola, quisiera reservar una consulta en LANA')}`;
  return (
    <div style={{ minHeight: '100vh', background: 'var(--white)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '120px max(40px,5vw) 80px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '10%', right: '8%', width: 320, height: 320, borderRadius: '50%', border: '1px solid rgba(139,107,61,0.12)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: '15%', left: '6%', width: 200, height: 200, borderRadius: '50%', border: '1px solid rgba(139,107,61,0.08)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle, rgba(196,169,107,0.07) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <Label style={{ marginBottom: 32 }}>Medicina Estética · Rosario, Argentina</Label>
      <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(48px, 7vw, 96px)', fontWeight: 300, color: 'var(--dark)', lineHeight: 1.05, letterSpacing: '-0.02em', maxWidth: 800, marginBottom: 12 }}>
        Sentirte bien<br />
        <em style={{ fontStyle: 'italic', color: 'var(--gold)', fontWeight: 400 }}>en tu propia piel.</em>
      </h1>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20, margin: '32px 0 36px' }}>
        <div style={{ width: 60, height: 1, background: 'var(--gold)', opacity: 0.5 }} />
        <img src="uploads/logo.png" alt="LANA" style={{ width: 40, height: 40, objectFit: 'contain' }} />
        <div style={{ width: 60, height: 1, background: 'var(--gold)', opacity: 0.5 }} />
      </div>
      <p className="t-body" style={{ fontSize: 17, maxWidth: 480, marginBottom: 44 }}>
        Tratamientos de medicina estética personalizados, con foco en resultados naturales y bienestar real.
      </p>
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 72 }}>
        <BtnPrimary href={waLink}>Reservar consulta</BtnPrimary>
        <BtnOutline onClick={onOpenQuiz}>Diagnóstico de piel</BtnOutline>
      </div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 280, overflow: 'hidden', background: 'transparent' }}>
        <img src="uploads/avatar.png" alt="Dra. Lorena Lana" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%', filter: 'saturate(0.85)' }} />
      </div>
    </div>
  );
}

function HeroC({ setCurrentPage, onOpenQuiz }) {
  const waLink = `https://wa.me/543413348415?text=${encodeURIComponent('Hola, quisiera reservar una consulta en LANA')}`;
  return (
    <div style={{ minHeight: '100vh', position: 'relative', overflow: 'hidden' }}>
      <img src="uploads/brand_assets-1776878133268.png" alt="Dra. Lorena Lana" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(42,31,16,0.82) 0%, rgba(42,31,16,0.55) 50%, transparent 100%)' }} />
      <div style={{ position: 'relative', zIndex: 1, minHeight: '100vh', display: 'flex', alignItems: 'center', padding: '120px max(40px,5vw) 80px' }}>
        <div style={{ maxWidth: 560 }}>
          <Label light style={{ marginBottom: 28 }}>Medicina Estética · Rosario</Label>
          <h1 className="t-h2-inv" style={{ fontSize: 'clamp(48px, 6vw, 78px)', fontWeight: 300, letterSpacing: '-0.01em', marginBottom: 24 }}>
            La medicina estética<br />
            <em style={{ fontStyle: 'italic', color: 'var(--gold-light)' }}>que te hace sentir vos.</em>
          </h1>
          <div style={{ width: 40, height: 1, background: 'var(--gold-light)', marginBottom: 28 }} />
          <p className="t-body" style={{ fontSize: 17, color: 'rgba(255,255,255,0.72)', maxWidth: 420, marginBottom: 40 }}>
            Tratamientos diseñados por la Dra. Lorena Lana para resultados naturales, seguros y duraderos.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <BtnPrimary href={waLink}>Reservar consulta</BtnPrimary>
            <BtnOutline light onClick={onOpenQuiz}>Diagnóstico de piel</BtnOutline>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Problem Section ──────────────────────────────────────────

function ProblemSection({ setCurrentPage }) {
  const ref = useScrollIn();
  const problems = [
    { icon: '〰', label: 'Líneas y arrugas', desc: 'Expresión marcada alrededor de ojos, frente y boca.' },
    { icon: '◍', label: 'Manchas y tono irregular', desc: 'Hiperpigmentación, melasma, piel opaca y sin luminosidad.' },
    { icon: '◻', label: 'Pérdida de firmeza', desc: 'Flaccidez, óvalo facial menos definido, piel apagada.' },
    { icon: '∿', label: 'Acné y textura', desc: 'Poros dilatados, cicatrices, textura irregular y brillos.' },
  ];
  return (
    <div className="section" style={{ background: 'var(--white)' }}>
      <div ref={ref} className="wrap">
        <Label style={{ marginBottom: 16 }}>Empezá por tu preocupación</Label>
        <h2 className="t-h2" style={{ fontSize: 'clamp(34px, 4vw, 52px)', marginBottom: 64, maxWidth: 560 }}>
          ¿Qué te gustaría mejorar en tu piel?
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 2 }}>
          {problems.map((p, i) => (
            <button key={i} onClick={() => setCurrentPage('treatments')} style={{
              background: i % 2 === 0 ? 'var(--cream)' : 'var(--gold-pale)',
              border: 'none', padding: '40px 32px', textAlign: 'left', cursor: 'pointer',
              transition: 'background 0.25s', display: 'block',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--gold-pale)'}
              onMouseLeave={e => e.currentTarget.style.background = i % 2 === 0 ? 'var(--cream)' : 'var(--gold-pale)'}
            >
              <div className="t-serif" style={{ fontSize: 28, color: 'var(--gold)', marginBottom: 16 }}>{p.icon}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 600, color: 'var(--dark)', letterSpacing: '0.05em', marginBottom: 10 }}>{p.label}</div>
              <div className="t-body" style={{ fontSize: 15, lineHeight: 1.7 }}>{p.desc}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--gold)', letterSpacing: '0.1em', marginTop: 20 }}>Ver tratamientos →</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Featured Treatments ──────────────────────────────────────

function TreatmentsSection({ setCurrentPage }) {
  const ref = useScrollIn();
  const items = [
    { name: 'Toxina Botulínica', tag: 'Relajación muscular', desc: 'Suaviza líneas de expresión con resultados naturales. Ideal para frente, entrecejo y contorno de ojos.' },
    { name: 'Mesoterapia Facial', tag: 'Hidratación y luminosidad', desc: 'Cóctel de vitaminas y ácido hialurónico aplicado directamente donde tu piel lo necesita.' },
    { name: 'Peelings', tag: 'Renovación celular', desc: 'Exfoliación controlada para mejorar textura, manchas y luminosidad. Diferentes profundidades según tu piel.' },
    { name: 'Rellenos', tag: 'Fillers', desc: 'Recupera volumen, suaviza arrugas y redefine tu rostro sin perder naturalidad' },
  ];
  return (
    <div className="section" style={{ background: 'var(--cream)' }}>
      <div ref={ref} className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <Label style={{ marginBottom: 16 }}>Tratamientos destacados</Label>
            <h2 className="t-h2" style={{ fontSize: 'clamp(34px, 4vw, 52px)' }}>
              Resultados reales,<br /><em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>para tu piel única.</em>
            </h2>
          </div>
          <BtnOutline onClick={() => setCurrentPage('treatments')}>Ver todos los tratamientos</BtnOutline>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20 }}>
          {items.map((t, i) => (
            <div key={i} style={{ background: 'var(--white)', padding: '36px 28px', position: 'relative', transition: 'transform 0.25s, box-shadow 0.25s', cursor: 'pointer' }}
              onClick={() => setCurrentPage('treatments')}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 12px 40px rgba(139,107,61,0.1)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              <div style={{ width: 32, height: 1, background: 'var(--gold)', marginBottom: 24 }} />
              <div className="t-caps-gold" style={{ marginBottom: 10 }}>{t.tag}</div>
              <div className="t-serif" style={{ fontSize: 26, marginBottom: 16 }}>{t.name}</div>
              <div className="t-body" style={{ fontSize: 16, lineHeight: 1.75 }}>{t.desc}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--gold)', marginTop: 24, letterSpacing: '0.08em' }}>Conocer más →</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Results Preview ──────────────────────────────────────────

function ResultsPreview({ setCurrentPage }) {
  const ref = useScrollIn();
  return (
    <div className="section" style={{ background: 'var(--dark)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '50%', right: '-5%', transform: 'translateY(-50%)', width: 400, height: 400, borderRadius: '50%', border: '1px solid rgba(196,169,107,0.1)', pointerEvents: 'none' }} />
      <div ref={ref} className="wrap">
        <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <Label light style={{ marginBottom: 20 }}>Resultados reales</Label>
            <h2 className="t-h2-inv" style={{ fontSize: 'clamp(34px, 4vw, 52px)', marginBottom: 24 }}>
              Antes y después.<br /><em style={{ color: 'var(--gold-light)', fontStyle: 'italic' }}>Siempre vos.</em>
            </h2>
            <p className="t-body-inv" style={{ fontSize: 16, marginBottom: 40, maxWidth: 380 }}>
              Nuestros resultados hablan por sí solos. Cambios reales, progresivos y naturales que respetan tu identidad.
            </p>
            <BtnPrimary onClick={() => setCurrentPage('results')}>Ver galería completa</BtnPrimary>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <img src="uploads/result-botox-antes.png" alt="Antes · Toxina Botulínica" style={{ width: '100%', height: 180, objectFit: 'cover', display: 'block', borderRadius: 2 }} />
            <img src="uploads/result-botox-despues.png" alt="Después · Toxina Botulínica" style={{ width: '100%', height: 180, objectFit: 'cover', display: 'block', borderRadius: 2 }} />
            <img src="uploads/results-pata-gallo-antes.png" alt="Antes · Toxina Botulínica" style={{ width: '100%', height: 180, objectFit: 'cover', display: 'block', borderRadius: 2 }} />
            <img src="uploads/results-pata-gallo-despues.png" alt="Después · Toxina Botulínica" style={{ width: '100%', height: 180, objectFit: 'cover', display: 'block', borderRadius: 2 }} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Authority Section ────────────────────────────────────────

function AuthoritySection({ setCurrentPage }) {
  const ref = useScrollIn();
  return (
    <div className="section" style={{ background: 'var(--white)' }}>
      <div ref={ref} className="wrap authority-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
        <div style={{ position: 'relative', background: 'transparent' }}>
          <img src="uploads/avatar.png" alt="Dra. Lorena Lana" style={{ width: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block', background: 'transparent', borderRadius: '100%' }} />
          <div style={{ position: 'absolute', bottom: -20, right: -20, background: 'var(--gold)', color: 'white', padding: '20px 24px', fontFamily: 'var(--font-sans)' }}>
            <div className="t-serif" style={{ fontSize: 36, color: 'white' }}>+8</div>
            <div style={{ fontSize: 14, letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4, opacity: 0.85 }}>años de experiencia</div>
          </div>
        </div>
        <div>
          <Label style={{ marginBottom: 20 }}>La Doctora</Label>
          <h2 className="t-h3" style={{ fontSize: 'clamp(32px, 3.5vw, 48px)', marginBottom: 20 }}>
            Dra. Lorena Lana
          </h2>
          <GoldLine style={{ marginBottom: 28 }} />
          <p className="t-body" style={{ fontSize: 16, lineHeight: 1.9, marginBottom: 20 }}>
            Médica especialista en medicina estética con más de 8 años de experiencia. Su filosofía se basa en realzar la belleza natural de cada paciente, sin artificios.
          </p>
          <p className="t-body" style={{ fontSize: 16, lineHeight: 1.9, marginBottom: 40 }}>
            Cada tratamiento comienza con una evaluación personalizada, garantizando resultados seguros, progresivos y acordes a cada piel.
          </p>
          <BtnOutline onClick={() => setCurrentPage('about')}>Conocer más sobre la Dra. Lana</BtnOutline>
        </div>
      </div>
    </div>
  );
}

// ─── Why LANA ─────────────────────────────────────────────────

function WhyLana() {
  const ref = useScrollIn();
  const pillars = [
    { num: '01', title: 'Evaluación personalizada', desc: 'Cada paciente es única. Comenzamos con un diagnóstico completo para diseñar un plan a medida.' },
    { num: '02', title: 'Resultados naturales', desc: 'Nuestro enfoque es realzar, no transformar. El objetivo siempre es que te veas como vos, pero mejor.' },
    { num: '03', title: 'Seguimiento médico', desc: 'El acompañamiento no termina con el tratamiento. Hacemos seguimiento para asegurar los mejores resultados.' },
    { num: '04', title: 'Protocolos actualizados', desc: 'Técnicas y productos de última generación, constantemente actualizados con los avances de la medicina estética.' },
  ];
  return (
    <div className="section" style={{ background: 'var(--cream)' }}>
      <div ref={ref} className="wrap">
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <Label style={{ marginBottom: 16 }}>Por qué LANA</Label>
          <h2 className="t-h2" style={{ fontSize: 'clamp(34px, 4vw, 52px)' }}>
            Una experiencia diferente,<br /><em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>centrada en vos.</em>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 1, background: 'var(--cream-dark)' }}>
          {pillars.map((p, i) => (
            <div key={i} style={{ background: 'var(--cream)', padding: '40px 32px' }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 40, fontWeight: 300, color: 'rgba(139,107,61,0.2)', marginBottom: 16, lineHeight: 1 }}>{p.num}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 600, color: 'var(--dark)', marginBottom: 12, letterSpacing: '0.02em' }}>{p.title}</div>
              <div className="t-body" style={{ fontSize: 16, lineHeight: 1.8 }}>{p.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Quiz CTA ─────────────────────────────────────────────────

function QuizCTA({ onOpenQuiz }) {
  const ref = useScrollIn();
  return (
    <div className="section--sm text-center" style={{ background: 'var(--gold-pale)' }}>
      <div ref={ref} style={{ maxWidth: 680, margin: '0 auto' }}>
        <div style={{ width: 48, height: 48, borderRadius: '50%', border: '1px solid var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', fontSize: 22 }}>✦</div>
        <h2 className="t-h3" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', marginBottom: 16 }}>
          ¿No sabés por dónde empezar?
        </h2>
        <p className="t-body" style={{ fontSize: 16, marginBottom: 36 }}>
          Respondé 3 preguntas simples y te recomendamos el tratamiento ideal para tu piel y tus objetivos.
        </p>
        <BtnPrimary onClick={onOpenQuiz}>Hacer el diagnóstico de piel</BtnPrimary>
      </div>
    </div>
  );
}

// ─── Final CTA ────────────────────────────────────────────────

function FinalCTA() {
  const waLink = `https://wa.me/543413348415?text=${encodeURIComponent('Hola, quisiera reservar una consulta en LANA')}`;
  const ref = useScrollIn();
  return (
    <div className="section text-center" style={{ background: 'var(--dark)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 600, height: 600, borderRadius: '50%', border: '1px solid rgba(196,169,107,0.08)', pointerEvents: 'none' }} />
      <div ref={ref} style={{ position: 'relative', zIndex: 1 }}>
        <img src="uploads/logo.png" alt="LANA" style={{ height: 56, marginBottom: 32 }} />
        <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 300, color: '#FAF7F2', lineHeight: 1.1, marginBottom: 20, letterSpacing: '-0.01em' }}>
          Tu consulta inicial<br /><em style={{ fontStyle: 'italic', color: 'var(--gold-light)' }}>es el primer paso.</em>
        </h2>
        <p className="t-body-inv" style={{ fontSize: 16, maxWidth: 420, margin: '0 auto 48px' }}>
          Agendá una consulta personalizada con la Dra. Lorena Lana y comenzá tu camino hacia una versión más natural y segura de vos misma.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <BtnPrimary href={waLink}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
            Escribinos por WhatsApp
          </BtnPrimary>
          <BtnOutline light onClick={() => window.dispatchEvent(new CustomEvent('lana-go', { detail: 'contact' }))}>Ver más formas de contacto</BtnOutline>
        </div>
      </div>
    </div>
  );
}

// ─── HomePage ─────────────────────────────────────────────────

function HomePage({ setCurrentPage, onOpenQuiz, tweaks = {} }) {
  const variant = tweaks.heroVariant || 'A';
  return (
    <div>
      {variant === 'A' && <HeroA setCurrentPage={setCurrentPage} onOpenQuiz={onOpenQuiz} />}
      {variant === 'B' && <HeroB setCurrentPage={setCurrentPage} onOpenQuiz={onOpenQuiz} />}
      {variant === 'C' && <HeroC setCurrentPage={setCurrentPage} onOpenQuiz={onOpenQuiz} />}
      <ProblemSection setCurrentPage={setCurrentPage} />
      <TreatmentsSection setCurrentPage={setCurrentPage} />
      <ResultsPreview setCurrentPage={setCurrentPage} />
      <AuthoritySection setCurrentPage={setCurrentPage} />
      <WhyLana />
      <QuizCTA onOpenQuiz={onOpenQuiz} />
      <FinalCTA />
    </div>
  );
}

Object.assign(window, { HomePage });