// sections-2.jsx — Treatments selector, Science, Doctors

// ─── Treatments selector (interactive) ──────────────────────────────────
const TREATMENTS = [
  {
    id: 'metabolic',
    name: 'Optimización metabólica',
    tag: 'GLP‑1 · Más popular',
    icon: Icon.pulse,
    color: '#0E7A65',
    soft: 'rgba(14,122,101,0.08)',
    summary: 'Pierde peso, recupera energía y normaliza marcadores con semaglutida o tirzepatida bajo supervisión médica.',
    includes: [
      'Semaglutida o tirzepatida (según tu perfil)',
      'Plan nutricional personalizado',
      'Análisis de glucosa, IMC y composición corporal',
      'Coach metabólico vía chat 24/7',
    ],
    duration: 'Protocolo de 12 semanas',
    prices: { mx: '$1,890 MXN', us: 'US$ 95', co: '$399.000 COP', do: 'RD$ 5,700', ar: '$114.000 ARS', cl: '$90.250 CLP', pe: 'S/ 351', es: '€ 88' },
    audience: 'Para adultos con IMC ≥ 27 o síndrome metabólico.',
  },
  {
    id: 'longevity',
    name: 'Longevidad & vitalidad',
    tag: 'Péptidos + NAD⁺',
    icon: Icon.dna,
    color: '#1AA585',
    soft: 'rgba(26,165,133,0.10)',
    summary: 'Protocolos de péptidos y NAD⁺ para regenerar energía celular, recuperación y biomarcadores de edad biológica.',
    includes: [
      'BPC‑157, TB‑500 o GHK‑Cu según objetivo',
      'NAD⁺ subcutáneo o IV',
      'Panel de edad biológica (epigenético)',
      'Reevaluación trimestral con tu médico',
    ],
    duration: 'Suscripción mensual',
    prices: { mx: '$2,490 MXN', us: 'US$ 125', co: '$525.000 COP', do: 'RD$ 7,500', ar: '$150.000 ARS', cl: '$118.750 CLP', pe: 'S/ 463', es: '€ 115' },
    audience: 'Para adultos 35+ enfocados en performance y prevención.',
  },
  {
    id: 'hormones',
    name: 'Equilibrio hormonal',
    tag: 'TRT · Tiroides · Menopausia',
    icon: Icon.shield,
    color: '#5757D6',
    soft: 'rgba(87,87,214,0.10)',
    summary: 'Reposición hormonal personalizada para hombres y mujeres: testosterona, tiroides, perimenopausia y menopausia.',
    includes: [
      'Panel hormonal completo (sangre + saliva)',
      'TRT, HRT o protocolo tiroideo',
      'Ajustes mensuales basados en marcadores',
      'Médico endocrino dedicado',
    ],
    duration: 'Acompañamiento continuo',
    prices: { mx: '$2,190 MXN', us: 'US$ 110', co: '$462.000 COP', do: 'RD$ 6,600', ar: '$132.000 ARS', cl: '$104.500 CLP', pe: 'S/ 407', es: '€ 100' },
    audience: 'Para adultos con síntomas o niveles subóptimos confirmados.',
  },
  {
    id: 'sleep',
    name: 'Sueño & estrés',
    tag: 'Cortisol · HRV',
    icon: Icon.brain,
    color: '#063A33',
    soft: 'rgba(6,58,51,0.08)',
    summary: 'Protocolo dirigido para insomnio crónico, fatiga adrenal y estrés con seguimiento de HRV y cortisol.',
    includes: [
      'Análisis de cortisol diurno (4 puntos)',
      'Adaptógenos + soporte de melatonina',
      'Integración con tu wearable (HRV)',
      'Sesiones con coach de sueño',
    ],
    duration: 'Protocolo de 8 semanas',
    prices: { mx: '$1,490 MXN', us: 'US$ 75', co: '$315.000 COP', do: 'RD$ 4,500', ar: '$90.000 ARS', cl: '$71.250 CLP', pe: 'S/ 278', es: '€ 69' },
    audience: 'Para quien duerme mal o vive con estrés crónico.',
  },
];

const COUNTRIES = [
  { v: 'mx', l: '🇦🇳' === '' ? 'MX' : '🇦🇳', code: 'México' },
  { v: 'co', code: 'Colombia' },
  { v: 'do', code: 'Rep. Dominicana' },
  { v: 'ar', code: 'Argentina' },
  { v: 'cl', code: 'Chile' },
  { v: 'pe', code: 'Perú' },
  { v: 'es', code: 'España' },
  { v: 'us', code: 'EE.UU.' },
];

function Treatments() {
  const [active, setActive] = React.useState('metabolic');
  const [country, setCountry] = React.useState('mx');
  const t = TREATMENTS.find(x => x.id === active);
  return (
    <Section bg={M.cream} py={120} id="tratamientos" screenLabel="03 Tratamientos">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, gap: 32, flexWrap: 'wrap' }}>
        <div>
          <Eyebrow>Tratamientos</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 56, fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 12px',
            maxWidth: 720, textWrap: 'balance',
          }}>Cuatro protocolos.<br/>Una medicina hecha para ti.</h2>
        </div>
        <p style={{
          fontFamily: POPPINS, fontSize: 17, color: M.ink2,
          lineHeight: 1.6, maxWidth: 380, margin: 0,
        }}>
          Selecciona el área que quieres optimizar. Cada protocolo se ajusta
          a tu biología, no al revés.
        </p>
      </div>

      {/* country / currency switcher */}
      <div style={{
        display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16,
        alignItems: 'center',
      }}>
        <span style={{
          fontFamily: POPPINS, fontSize: 12, fontWeight: 600, color: M.ink3,
          textTransform: 'uppercase', letterSpacing: '0.06em', marginRight: 8,
        }}>Ver precios en</span>
        {COUNTRIES.map(c => (
          <button key={c.v} onClick={() => setCountry(c.v)} style={{
            padding: '8px 14px', borderRadius: 999,
            background: country === c.v ? M.ink : '#fff',
            color: country === c.v ? '#fff' : M.ink2,
            border: `1px solid ${country === c.v ? M.ink : M.rule}`,
            fontFamily: POPPINS, fontSize: 13, fontWeight: 500,
            cursor: 'pointer', transition: 'all .15s ease',
          }}>{c.code}</button>
        ))}
      </div>

      {/* tab strip */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
        background: '#fff', padding: 8, borderRadius: 16,
        border: `1px solid ${M.rule}`, marginBottom: 32,
      }}>
        {TREATMENTS.map(tr => (
          <button key={tr.id} onClick={() => setActive(tr.id)} style={{
            padding: '14px 16px', borderRadius: 12,
            background: active === tr.id ? tr.color : 'transparent',
            color: active === tr.id ? '#fff' : M.ink,
            border: 'none', cursor: 'pointer',
            fontFamily: POPPINS, fontWeight: 500, fontSize: 14,
            letterSpacing: '-0.01em', textAlign: 'left',
            display: 'flex', alignItems: 'center', gap: 10,
            transition: 'all .25s ease',
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8, flexShrink: 0,
              background: active === tr.id ? 'rgba(255,255,255,0.18)' : tr.soft,
              color: active === tr.id ? '#fff' : tr.color,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{React.cloneElement(tr.icon(active === tr.id ? '#fff' : tr.color), { width: 18, height: 18 })}</div>
            <span style={{ lineHeight: 1.2 }}>{tr.name}</span>
          </button>
        ))}
      </div>

      {/* detail card */}
      <div key={t.id} style={{
        display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 0,
        background: '#fff', borderRadius: 24, overflow: 'hidden',
        border: `1px solid ${M.rule}`,
        animation: 'fadeUp .4s ease',
      }}>
        <div style={{ padding: 48 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 999, background: t.soft,
            color: t.color, fontFamily: POPPINS, fontSize: 12, fontWeight: 600,
            letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 20,
          }}>{t.tag}</div>
          <h3 style={{
            fontFamily: POPPINS, fontSize: 40, fontWeight: 600,
            letterSpacing: '-0.025em', lineHeight: 1.1, margin: '0 0 16px',
            color: M.ink,
          }}>{t.name}</h3>
          <p style={{
            fontFamily: POPPINS, fontSize: 17, color: M.ink2,
            lineHeight: 1.6, margin: '0 0 28px', maxWidth: 540,
          }}>{t.summary}</p>

          <div style={{
            fontFamily: POPPINS, fontSize: 12, fontWeight: 600,
            color: M.ink3, letterSpacing: '0.06em', textTransform: 'uppercase',
            marginBottom: 14,
          }}>Incluye</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px' }}>
            {t.includes.map((inc, i) => (
              <li key={i} style={{
                display: 'flex', gap: 12, alignItems: 'flex-start',
                padding: '10px 0', borderTop: i === 0 ? 'none' : `1px solid ${M.ruleSoft}`,
                fontFamily: POPPINS, fontSize: 15, color: M.ink, lineHeight: 1.5,
              }}>
                <div style={{
                  flexShrink: 0, width: 22, height: 22, borderRadius: 99,
                  background: t.soft, color: t.color,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginTop: 1,
                }}>{React.cloneElement(Icon.check(t.color), { width: 14, height: 14 })}</div>
                {inc}
              </li>
            ))}
          </ul>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <Btn kind="dark" size="lg">Empezar este protocolo</Btn>
            <Btn kind="ghost" size="lg">Hablar con un médico</Btn>
          </div>
        </div>

        <div style={{
          background: `linear-gradient(160deg, ${t.color} 0%, ${t.color}dd 100%)`,
          color: '#fff', padding: 48, position: 'relative', overflow: 'hidden',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          <div style={{
            position: 'absolute', top: -80, right: -80, width: 280, height: 280,
            borderRadius: '50%', background: 'rgba(255,255,255,0.08)',
          }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ marginBottom: 24 }}>{React.cloneElement(t.icon('#fff'), { width: 56, height: 56 })}</div>
            <div style={{
              fontFamily: POPPINS, fontSize: 13, opacity: 0.8,
              letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 8,
            }}>Inversión · {COUNTRIES.find(c => c.v === country).code}</div>
            <div style={{
              fontFamily: POPPINS, fontSize: 32, fontWeight: 600,
              letterSpacing: '-0.025em', marginBottom: 6,
            }}>Desde {t.prices[country]}</div>
            <div style={{ fontFamily: POPPINS, fontSize: 13, opacity: 0.75, marginBottom: 28 }}>al mes</div>

            <div style={{
              padding: '20px 0', borderTop: '1px solid rgba(255,255,255,0.2)',
              borderBottom: '1px solid rgba(255,255,255,0.2)', marginBottom: 20,
            }}>
              <div style={{ fontFamily: POPPINS, fontSize: 12, opacity: 0.75, marginBottom: 4 }}>Duración</div>
              <div style={{ fontFamily: POPPINS, fontSize: 17, fontWeight: 500 }}>{t.duration}</div>
            </div>
            <div style={{ fontFamily: POPPINS, fontSize: 14, opacity: 0.85, lineHeight: 1.5 }}>
              <strong style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>¿Para quién?</strong>
              {t.audience}
            </div>
          </div>
          <div style={{
            position: 'relative', marginTop: 32,
            fontFamily: POPPINS, fontSize: 12, opacity: 0.7, lineHeight: 1.4,
          }}>
            * Sujeto a evaluación médica. Receta y envío incluidos donde aplique.
          </div>
        </div>
      </div>
    </Section>
  );
}

// ─── Science & Evidence ─────────────────────────────────────────────────
function Science() {
  const stats = [
    { v: '17%', l: 'Reducción promedio de peso corporal en 6 meses con GLP‑1' },
    { v: '94%', l: 'De pacientes reportan más energía después de 30 días' },
    { v: '12k+', l: 'Pacientes activos en LATAM' },
    { v: '21', l: 'Biomarcadores monitoreados por protocolo' },
  ];
  return (
    <Section bg={M.forest} color="#fff" py={140} id="ciencia" screenLabel="04 Ciencia">
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center',
      }}>
        <div>
          <Eyebrow dark>Ciencia · Evidencia</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 56, fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 24px',
            textWrap: 'balance',
          }}>Medicina seria.<br/>Resultados medibles.</h2>
          <p style={{
            fontFamily: POPPINS, fontSize: 18, color: 'rgba(255,255,255,0.75)',
            lineHeight: 1.6, margin: '0 0 32px', maxWidth: 480,
          }}>
            Cada protocolo está respaldado por estudios clínicos revisados por pares,
            guías de la FDA, EMA y COFEPRIS, y por la práctica de médicos con experiencia
            en medicina de longevidad.
          </p>
          <Btn kind="onDark" size="lg">Ver nuestra biblioteca clínica {Icon.arrow('#fff')}</Btn>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1,
          background: 'rgba(255,255,255,0.12)',
          borderRadius: 18, overflow: 'hidden',
          border: '1px solid rgba(255,255,255,0.12)',
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: '32px 28px', background: 'rgba(255,255,255,0.02)',
              fontFamily: POPPINS,
            }}>
              <div style={{
                fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em',
                color: M.mint, lineHeight: 1, marginBottom: 12,
              }}>{s.v}</div>
              <div style={{
                fontSize: 14, color: 'rgba(255,255,255,0.72)',
                lineHeight: 1.5,
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* journals */}
      <div style={{
        marginTop: 80, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.12)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 20,
      }}>
        <span style={{
          fontFamily: POPPINS, fontSize: 12, color: 'rgba(255,255,255,0.5)',
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>Investigación citada de</span>
        <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap' }}>
          {['NEJM', 'The Lancet', 'JAMA', 'Nature Medicine', 'Cell Metabolism'].map(j => (
            <span key={j} style={{
              fontFamily: 'Georgia, serif', fontSize: 22, fontWeight: 500,
              color: 'rgba(255,255,255,0.7)', fontStyle: 'italic',
              letterSpacing: '-0.01em',
            }}>{j}</span>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ─── Doctors ────────────────────────────────────────────────────────────
function Doctors() {
  const docs = [
    { n: 'Dra. Carolina Ríos', s: 'Medicina interna · Longevidad', loc: 'CDMX, México', cred: 'UNAM · Mayo Clinic', initials: 'CR', bg: '#0E7A65',
      img: 'https://images.unsplash.com/photo-1594824476967-48c8b964273f?auto=format&fit=crop&w=600&q=80' },
    { n: 'Dr. Tomás Alarcón',  s: 'Endocrinología',                loc: 'Buenos Aires, Argentina', cred: 'UBA · Cleveland Clinic', initials: 'TA', bg: '#1AA585',
      img: 'https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&w=600&q=80' },
    { n: 'Dra. Marisol Vega',  s: 'Medicina metabólica',           loc: 'Bogotá, Colombia',        cred: 'U. Javeriana · Stanford', initials: 'MV', bg: '#5757D6',
      img: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?auto=format&fit=crop&w=600&q=80' },
    { n: 'Dr. Andrés Saldaña', s: 'Endocrinología hormonal',       loc: 'Madrid, España',          cred: 'U. Complutense · NIH',    initials: 'AS', bg: '#063A33',
      img: 'https://images.unsplash.com/photo-1537368910025-700350fe46c7?auto=format&fit=crop&w=600&q=80' },
  ];
  return (
    <Section bg={M.creamSoft} py={120} id="medicos" screenLabel="05 Médicos">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
        <div>
          <Eyebrow>Equipo médico</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 56, fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 0',
            maxWidth: 720, textWrap: 'balance',
          }}>Médicos que entienden<br/>tu biología y tu cultura.</h2>
        </div>
        <p style={{
          fontFamily: POPPINS, fontSize: 16, color: M.ink2,
          lineHeight: 1.6, maxWidth: 360, margin: 0,
        }}>
          Cada médico de Medicya está certificado por su consejo nacional y
          formado en medicina de longevidad por instituciones internacionales.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {docs.map((d, i) => (
          <div key={i} style={{
            background: '#fff', borderRadius: 20, overflow: 'hidden',
            border: `1px solid ${M.rule}`,
          }}>
            {/* portrait */}
            <div style={{
              height: 280, position: 'relative', overflow: 'hidden',
              background: `linear-gradient(160deg, ${d.bg}, ${d.bg}aa)`,
              backgroundImage: `linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%), url(${d.img})`,
              backgroundSize: 'cover', backgroundPosition: 'center top',
            }}>
              <div style={{
                position: 'absolute', bottom: 12, left: 12,
                padding: '4px 10px', borderRadius: 99,
                background: 'rgba(255,255,255,0.18)',
                backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                fontFamily: POPPINS, fontSize: 11, fontWeight: 500, color: '#fff',
                letterSpacing: '0.04em',
              }}>{d.loc}</div>
            </div>
            <div style={{ padding: 22 }}>
              <div style={{
                fontFamily: POPPINS, fontSize: 18, fontWeight: 600,
                color: M.ink, letterSpacing: '-0.02em', marginBottom: 4,
              }}>{d.n}</div>
              <div style={{
                fontFamily: POPPINS, fontSize: 13, color: M.primary,
                fontWeight: 500, marginBottom: 12,
              }}>{d.s}</div>
              <div style={{
                paddingTop: 12, borderTop: `1px solid ${M.rule}`,
                fontFamily: POPPINS, fontSize: 12, color: M.ink3,
              }}>{d.cred}</div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Treatments, Science, Doctors });