// ─── Método LANA Page ─────────────────────────────────────────
// El método es el corazón de la marca: no vendemos tratamientos sueltos,
// trabajamos con un proceso médico, personalizado y de largo plazo.

function MethodPage({ setCurrentPage }) {
  // Contenido editable en components/lana-config.jsx → LANA.methodPrinciples / LANA.methodSteps
  const principles = LANA.methodPrinciples;
  const steps = LANA.methodSteps;

  return (
    <div className="page">

      {/* Hero */}
      <div style={{ background: 'var(--dark)', padding: '80px max(40px,5vw) 96px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', bottom: -120, right: -100, width: 440, height: 440, borderRadius: '50%', border: '1px solid rgba(196,169,107,0.1)' }} />
        <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
          <Label light style={{ marginBottom: 20 }}>Nuestro Método</Label>
          <h1 className="t-h2-inv" style={{ fontSize: 'clamp(40px, 5vw, 68px)', maxWidth: 720, marginBottom: 28 }}>
            No hacemos tratamientos sueltos.<br /><em style={{ color: 'var(--gold-light)', fontStyle: 'italic' }}>Cuidamos tu piel con método.</em>
          </h1>
          <p className="t-body-inv" style={{ fontSize: 17, maxWidth: 520 }}>
            Nuestro método es la forma en que entendemos la medicina estética: diagnóstico médico primero, programas personalizados después y cuidado a largo plazo siempre. Menos modas, más criterio.
          </p>
        </div>
      </div>

      {/* Manifiesto */}
      <div className="section" style={{ background: 'var(--white)' }}>
        <div className="wrap two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
          <div>
            <Label style={{ marginBottom: 16 }}>Nuestra mirada</Label>
            <GoldLine style={{ marginTop: 8 }} />
          </div>
          <div>
            <h2 className="t-h3" style={{ fontSize: 'clamp(28px, 3vw, 42px)', marginBottom: 28 }}>
              La piel no se cuida con apuros.<br /><em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>Se cuida con un plan.</em>
            </h2>
            <p className="t-body" style={{ fontSize: 17, marginBottom: 20 }}>
              La mayoría de las personas no llega buscando un tratamiento puntual: llega con un objetivo, una preocupación o el deseo de cuidarse mejor. Por eso no organizamos nuestro trabajo en procedimientos, sino en programas pensados para acompañarte en el tiempo.
            </p>
            <p className="t-body" style={{ fontSize: 17 }}>
              Cada programa parte de un diagnóstico médico y se construye sobre las <strong style={{ color: 'var(--dark)', fontWeight: 600 }}>líneas de tratamiento</strong>, que ordenan el cuidado según lo que tu piel necesita. El resultado: decisiones con criterio médico, naturales y sostenibles.
            </p>
          </div>
        </div>
      </div>

      {/* Principios */}
      <div className="section" style={{ background: 'var(--cream)' }}>
        <div className="wrap">
          <div className="text-center" style={{ marginBottom: 64 }}>
            <Label style={{ marginBottom: 16 }}>Los principios del método</Label>
            <h2 className="t-h2" style={{ fontSize: 'clamp(32px, 4vw, 52px)' }}>
              Cuatro ideas que guían<br /><em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>cada decisión.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 1, background: 'var(--cream-dark)' }}>
            {principles.map((p, i) => (
              <div key={i} style={{ background: 'var(--cream)', padding: '44px 36px' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 44, 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: 14, letterSpacing: '0.02em' }}>{p.title}</div>
                <div className="t-body" style={{ fontSize: 15, lineHeight: 1.8 }}>{p.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Nuestro método */}
      <div className="section">
        <div className="wrap">
          <div className="text-center" style={{ marginBottom: 72, maxWidth: 680, marginLeft: 'auto', marginRight: 'auto' }}>
            <Label style={{ marginBottom: 16 }}>El proceso</Label>
            <h2 className="t-h2" style={{ fontSize: 'clamp(32px, 4vw, 50px)', marginBottom: 24 }}>
              Nuestro método
            </h2>
            <p className="t-body" style={{ fontSize: 17 }}>
              Cada piel tiene una historia. Por eso, antes de indicar un tratamiento, escuchamos, evaluamos y diseñamos un programa personalizado.
            </p>
          </div>
          <div style={{ display: 'grid', gap: 2, background: 'var(--cream-dark)' }}>
            {steps.map((s, i) => (
              <MethodStep key={i} num={s.num} title={s.title} desc={s.desc} />
            ))}
          </div>
        </div>
      </div>

      {/* Puente a Líneas y Programas */}
      <div className="section" style={{ background: 'var(--white)' }}>
        <div className="wrap">
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <button onClick={() => setCurrentPage('lines')} style={{ background: 'var(--cream)', border: 'none', cursor: 'pointer', textAlign: 'left', padding: '44px 40px', transition: 'transform 0.25s, box-shadow 0.25s' }}
              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'; }}
            >
              <Label style={{ marginBottom: 16 }}>Paso siguiente</Label>
              <h3 className="t-h3" style={{ fontSize: 28, marginBottom: 12 }}>Líneas de tratamiento</h3>
              <p className="t-body" style={{ fontSize: 15 }}>Cómo organizamos el cuidado según lo que tu piel necesita.</p>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--gold)', letterSpacing: '0.08em', marginTop: 20 }}>Ver las líneas →</div>
            </button>
            <button onClick={() => setCurrentPage('programs')} style={{ background: 'var(--cream)', border: 'none', cursor: 'pointer', textAlign: 'left', padding: '44px 40px', transition: 'transform 0.25s, box-shadow 0.25s' }}
              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'; }}
            >
              <Label style={{ marginBottom: 16 }}>Paso siguiente</Label>
              <h3 className="t-h3" style={{ fontSize: 28, marginBottom: 12 }}>Programas</h3>
              <p className="t-body" style={{ fontSize: 15 }}>Planes médicos personalizados que combinan las líneas en el tiempo.</p>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--gold)', letterSpacing: '0.08em', marginTop: 20 }}>Ver los programas →</div>
            </button>
          </div>
        </div>
      </div>

      {/* CTA */}
      <CTASection
        title="Todo empieza con una evaluación"
        text="La primera evaluación no tiene costo. Es solo una conversación para conocer tu piel y tus necesidades."
      >
        <BtnPrimary href={waLink()}>Agendar evaluación</BtnPrimary>
      </CTASection>
    </div>
  );
}

Object.assign(window, { MethodPage });