// ─── Experience Page ──────────────────────────────────────────

function ExperiencePage({ setCurrentPage }) {
  const steps = [
    {
      num: '01',
      title: 'Consulta inicial',
      subtitle: 'Tu primer contacto con LANA',
      desc: 'Una conversación sin compromisos donde te escuchamos, entendemos tus objetivos y respondemos todas tus preguntas. Sin apuros, sin presión.',
      details: ['Duración: 30–40 minutos', 'Sin costo ni compromiso', 'Podés venir con dudas, eso está perfecto'],
    },
    {
      num: '02',
      title: 'Diagnóstico de piel',
      subtitle: 'Evaluación médica personalizada',
      desc: 'Analizamos el estado actual de tu piel, tu historia clínica y tus expectativas para entender qué tratamientos son los más adecuados para vos.',
      details: ['Análisis de tipo y calidad de piel', 'Revisión de historia médica relevante', 'Fotografías de referencia (con tu consentimiento)'],
    },
    {
      num: '03',
      title: 'Plan de tratamiento',
      subtitle: 'Diseñado solo para vos',
      desc: 'La Dra. Lana diseña un protocolo personalizado que combina los tratamientos más efectivos para tus objetivos, respetando tu ritmo y presupuesto.',
      details: ['Protocolo personalizado por etapas', 'Explicación detallada de cada paso', 'Estimación de resultados realista'],
    },
    {
      num: '04',
      title: 'Tratamiento y seguimiento',
      subtitle: 'Acompañamiento real',
      desc: 'Durante y después de cada sesión hacemos seguimiento de tu evolución. Ajustamos el plan si es necesario y estamos disponibles para cualquier consulta.',
      details: ['Control post-tratamiento incluido', 'Canal directo de comunicación', 'Ajustes del plan según evolución'],
    },
  ];

  const faqs = [
    { q: '¿Duele?', a: 'La mayoría de los tratamientos son muy bien tolerados. Usamos técnicas y productos que minimizan las molestias. En caso de ser necesario, aplicamos anestesia tópica.' },
    { q: '¿Cuándo veo resultados?', a: 'Depende del tratamiento. Algunos son inmediatos (como ciertos peelings), otros progresivos (bioestimulación). Te informamos exactamente qué esperar en cada caso.' },
    { q: '¿Es seguro?', a: 'Todos los tratamientos son realizados por la Dra. Lana, con productos habilitados y protocolos médicos actualizados. La seguridad es nuestra prioridad.' },
    { q: '¿Con qué frecuencia debo ir?', a: 'Varía según el tratamiento y tus objetivos. Diseñamos un plan que se adapta a tus tiempos y necesidades reales.' },
    { q: '¿Se puede combinar con otros tratamientos?', a: 'En muchos casos sí, y la combinación potencia los resultados. La Dra. Lana evalúa cada caso y diseña la combinación más efectiva y segura.' },
  ];

  const [openFaq, setOpenFaq] = React.useState(null);

  return (
    <div className="page">

      {/* Hero */}
      <div className="section" style={{ background: 'var(--white)' }}>
        <div className="wrap two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <Label style={{ marginBottom: 20 }}>La experiencia LANA</Label>
            <h1 className="t-h2" style={{ fontSize: 'clamp(38px, 5vw, 60px)', marginBottom: 24 }}>
              Un proceso pensado<br /><em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>para que te sientas segura.</em>
            </h1>
            <GoldLine style={{ marginBottom: 28 }} />
            <p className="t-body" style={{ fontSize: 17 }}>
              Desde el primer mensaje hasta el seguimiento post-tratamiento, cada paso está diseñado para que tengas toda la información, confianza y tranquilidad que necesitás.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[['Sin apuros', 'Escucha y tiempo'], ['Médicamente seguro', 'Protocolos actualizados'], ['100% personalizado', 'Tu piel, tu plan'], ['Seguimiento real', 'Siempre disponibles']].map(([t, s], i) => (
              <div key={i} style={{ background: 'var(--cream)', padding: '24px 20px', borderLeft: '2px solid var(--gold)' }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, color: 'var(--dark)', marginBottom: 4 }}>{t}</div>
                <div className="t-body" style={{ fontSize: 12 }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Steps */}
      <div className="section">
        <div className="wrap">
          <div className="text-center" style={{ marginBottom: 72 }}>
            <Label style={{ marginBottom: 16 }}>El proceso</Label>
            <h2 className="t-h2" style={{ fontSize: 'clamp(32px, 4vw, 48px)' }}>
              4 pasos hacia tu mejor piel
            </h2>
          </div>
          <div style={{ display: 'grid', gap: 2, background: 'var(--cream-dark)' }}>
            {steps.map((s, i) => (
              <div key={i} className="step-grid" style={{ background: 'var(--cream)', padding: '52px max(40px,5vw)', display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 48, alignItems: 'start' }}>
                <div className="step-num" style={{ fontFamily: 'var(--font-serif)', fontSize: 64, fontWeight: 300, color: 'rgba(139,107,61,0.2)', lineHeight: 1 }}>{s.num}</div>
                <div>
                  <Label style={{ marginBottom: 8 }}>{s.subtitle}</Label>
                  <h3 className="t-h3" style={{ fontSize: 28, marginBottom: 16 }}>{s.title}</h3>
                  <p className="t-body" style={{ fontSize: 16, lineHeight: 1.8 }}>{s.desc}</p>
                </div>
                <ul className="step-details" style={{ listStyle: 'none', padding: 0, minWidth: 220 }}>
                  {s.details.map((d, j) => (
                    <li key={j} className="t-body" style={{ fontSize: 14, marginBottom: 8, paddingLeft: 14, position: 'relative', lineHeight: 1.6 }}>
                      <span style={{ position: 'absolute', left: 0, color: 'var(--gold)' }}>—</span>{d}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* FAQ */}
      <div className="section" style={{ background: 'var(--white)' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <div className="text-center" style={{ marginBottom: 56 }}>
            <Label style={{ marginBottom: 16 }}>Preguntas frecuentes</Label>
            <h2 className="t-h2" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)' }}>
              Todo lo que querés saber
            </h2>
          </div>
          {faqs.map((faq, i) => (
            <div key={i} style={{ borderTop: '1px solid var(--cream-dark)' }}>
              <button onClick={() => setOpenFaq(openFaq === i ? null : i)} style={{
                width: '100%', background: 'none', border: 'none', cursor: 'pointer',
                padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
              }}>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 17, fontWeight: 500, color: 'var(--dark)', textAlign: 'left' }}>{faq.q}</span>
                <span style={{ color: 'var(--gold)', fontSize: 20, flexShrink: 0, transition: 'transform 0.25s', display: 'block', transform: openFaq === i ? 'rotate(45deg)' : 'none' }}>+</span>
              </button>
              {openFaq === i && (
                <div style={{ paddingBottom: 24 }}>
                  <p className="t-body" style={{ fontSize: 16 }}>{faq.a}</p>
                </div>
              )}
            </div>
          ))}
          <div style={{ borderTop: '1px solid var(--cream-dark)' }} />
        </div>
      </div>

      {/* CTA */}
      <div className="section--sm text-center" style={{ background: 'var(--gold-pale)' }}>
        <h2 className="t-h3" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', marginBottom: 16 }}>
          ¿Lista para empezar?
        </h2>
        <p className="t-body" style={{ fontSize: 16, marginBottom: 36 }}>La primera consulta no tiene costo. Es solo una conversación.</p>
        <BtnPrimary href={`https://wa.me/543413348415?text=${encodeURIComponent('Hola, quisiera reservar mi primera consulta en LANA')}`}>
          Reservar mi primera consulta
        </BtnPrimary>
      </div>
    </div>
  );
}

Object.assign(window, { ExperiencePage });