// ─── About Page ───────────────────────────────────────────────

function AboutPage({ setCurrentPage }) {
  const ref1 = useScrollIn(0);
  const ref2 = useScrollIn(100);
  const ref3 = useScrollIn(200);

  const credentials = [
    'Médica egresada de la Universidad Nacional de Rosario',
    'Especialización en Medicina Estética',
    'Formación en técnicas de bioestimulación y rellenos',
    'Actualización permanente en congresos nacionales e internacionales',
    'Miembro de la Sociedad Argentina de Medicina Estética',
  ];

  const values = [
    { title: 'Naturalidad ante todo', desc: 'El objetivo nunca es transformar, sino realzar lo mejor de cada paciente. Los resultados deben verse naturales, siempre.' },
    { title: 'Medicina personalizada', desc: 'Cada piel tiene su historia. No existe un protocolo universal: el plan de tratamiento se diseña para cada persona.' },
    { title: 'Acompañamiento real', desc: 'La relación no termina al salir del consultorio. El seguimiento y la comunicación forman parte del tratamiento.' },
  ];

  return (
    <div className="page">

      {/* Hero */}
      <div style={{ background: 'url(uploads/bg-about.jpg) center/cover no-repeat', padding: '80px max(40px,5vw) 0', overflow: 'hidden' }}>
        <div className="wrap">
          <div className="about-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
            <div style={{ paddingBottom: 80 }}>
              <Label light style={{ marginBottom: 20 }}>La Doctora</Label>
              <h1 className="t-h2-inv" style={{ fontSize: 'clamp(40px, 5vw, 64px)', marginBottom: 24 }}>
                Dra. Lorena Lana
              </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.6)', maxWidth: 420 }}>
                Médica especialista en medicina estética con más de 8 años de experiencia clínica. Su filosofía es simple: cada paciente merece un tratamiento diseñado para ella, no para el estándar.
              </p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end' }}>
              <img src="uploads/avatar.png" alt="Dra. Lorena Lana" style={{ width: '100%', maxWidth: 420, aspectRatio: '1', objectFit: 'cover', objectPosition: 'center top', display: 'block', borderRadius: '100%' }} />
            </div>
          </div>
        </div>
      </div>

      {/* Philosophy */}
      <div className="section" style={{ background: 'var(--white)' }}>
        <div ref={ref1} className="wrap">
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
            <div>
              <Label style={{ marginBottom: 16 }}>Mi filosofía</Label>
              <GoldLine style={{ marginTop: 8 }} />
            </div>
            <div>
              <h2 className="t-h3" style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginBottom: 32 }}>
                "La medicina estética tiene que hacerte sentir <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>más vos</em>, no menos."
              </h2>
              <p className="t-body" style={{ fontSize: 17, marginBottom: 20 }}>
                Empecé este camino convencida de que la belleza real no está en cambiar lo que somos, sino en cuidar y realzar lo mejor de cada una. Con los años, esa convicción solo se fue reforzando.
              </p>
              <p className="t-body" style={{ fontSize: 17 }}>
                En LANA trabajamos con protocolos actualizados y productos de primer nivel, pero sobre todo con escucha. Porque el mejor tratamiento empieza por entender qué necesita cada paciente.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Values */}
      <div className="section" style={{ background: 'var(--cream)' }}>
        <div ref={ref2} className="wrap">
          <Label style={{ marginBottom: 16 }}>Valores</Label>
          <h2 className="t-h2" style={{ fontSize: 'clamp(32px, 3.5vw, 48px)', marginBottom: 56 }}>
            Lo que guía cada tratamiento
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 2, background: 'var(--cream-dark)' }}>
            {values.map((v, i) => (
              <div key={i} style={{ background: 'var(--cream)', padding: '44px 36px' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 40, color: 'rgba(139,107,61,0.18)', fontWeight: 300, marginBottom: 16, lineHeight: 1 }}>0{i + 1}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, color: 'var(--dark)', marginBottom: 14 }}>{v.title}</div>
                <div className="t-body" style={{ fontSize: 15, lineHeight: 1.8 }}>{v.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Credentials */}
      <div className="section" style={{ background: 'var(--white)' }}>
        <div ref={ref3} className="wrap two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <Label style={{ marginBottom: 20 }}>Formación y credenciales</Label>
            <h2 className="t-h3" style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginBottom: 40 }}>
              Respaldo médico en cada procedimiento
            </h2>
            <ul style={{ listStyle: 'none', padding: 0 }}>
              {credentials.map((c, i) => (
                <li key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', marginBottom: 18 }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', border: '1px solid var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                    <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--gold)' }} />
                  </div>
                  <span className="t-body-dark" style={{ fontSize: 16, lineHeight: 1.7 }}>{c}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ position: 'relative' }}>
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3347.873314722033!2d-60.648629023447604!3d-32.95435397227948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95b7ab121e6465b3%3A0x7f65617a4138ef51!2sParaguay%201526%2C%20S2000COR%20Rosario%2C%20Santa%20Fe!5e0!3m2!1sen!2sar!4v1776979891635!5m2!1sen!2sar"
              width="100%"
              height="420"
              style={{ border: 0, display: 'block' }}
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
            <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20, background: 'rgba(250,247,242,0.95)', padding: '20px 24px' }}>
              <div className="t-serif" style={{ fontSize: 18, marginBottom: 4 }}>Paraguay 1526</div>
              <div className="t-body" style={{ fontSize: 12 }}>Rosario, Santa Fe, Argentina</div>
            </div>
          </div>
        </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 }}>
          ¿Querés conocernos mejor?
        </h2>
        <p className="t-body" style={{ fontSize: 16, marginBottom: 36 }}>
          La primera consulta es el mejor lugar para empezar.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <BtnPrimary href={`https://wa.me/543413348415?text=${encodeURIComponent('Hola Dra. Lana, quisiera reservar una consulta')}`}>
            Reservar consulta
          </BtnPrimary>
          <BtnOutline onClick={() => setCurrentPage('experience')}>
            Conocer la experiencia LANA
          </BtnOutline>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage });