// sections.jsx — Landing page sections for Medicya.
// Loads brand.jsx tokens (M, Logo, Wordmark, Btn, Section, Eyebrow, Icon).

const POPPINS = 'Poppins, system-ui, sans-serif';

// ─── Nav ────────────────────────────────────────────────────────────────
function Nav({ onStart, dark }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', fn); fn();
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const onDark = dark && !scrolled;
  const linkColor = onDark ? 'rgba(255,255,255,0.85)' : M.ink2;
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: '14px 32px',
      background: scrolled ? 'rgba(246,242,232,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(160%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px) saturate(160%)' : 'none',
      borderBottom: scrolled ? `1px solid ${M.rule}` : '1px solid transparent',
      transition: 'background .3s, border-color .3s, backdrop-filter .3s',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <Wordmark size={20} color={onDark ? '#fff' : M.ink}/>
        <div style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
          {['Tratamientos', 'Cómo funciona', 'Ciencia', 'Médicos', 'Recursos'].map(l => (
            <a key={l} href={`#${l.toLowerCase().replace(/\s+/g,'-').replace('ó','o').replace('é','e').replace('í','i')}`} style={{
              color: linkColor, fontFamily: POPPINS, fontSize: 14, fontWeight: 500,
              textDecoration: 'none', letterSpacing: '-0.005em',
            }}>{l}</a>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <a href="#" style={{
            color: onDark ? 'rgba(255,255,255,0.85)' : M.ink2,
            fontFamily: POPPINS, fontSize: 14, fontWeight: 500, textDecoration: 'none',
          }}>Iniciar sesión</a>
          <Btn kind={onDark ? 'onDark' : 'primary'} size="sm" onClick={onStart}>
            Inicia tu evaluación
          </Btn>
        </div>
      </div>
    </nav>
  );
}

// ─── Hero ───────────────────────────────────────────────────────────────
function Hero({ onStart, dark }) {
  const bg = dark ? M.forest : M.cream;
  const fg = dark ? '#fff' : M.ink;
  const fgMuted = dark ? 'rgba(255,255,255,0.72)' : M.ink2;
  return (
    <section data-screen-label="01 Hero" style={{
      background: bg, color: fg, paddingTop: 120, paddingBottom: 80,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* glow */}
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 700, height: 700,
        background: dark
          ? 'radial-gradient(circle, rgba(26,165,133,0.35) 0%, transparent 60%)'
          : 'radial-gradient(circle, rgba(125,227,197,0.35) 0%, transparent 60%)',
        pointerEvents: 'none',
      }}/>
      <div style={{
        maxWidth: 1240, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center',
        position: 'relative',
      }}>
        <div>
          <Eyebrow dark={dark}>Medicina personalizada · IA + Médicos</Eyebrow>
          <h1 style={{
            fontFamily: POPPINS, fontWeight: 600,
            fontSize: 'clamp(48px, 5.6vw, 84px)', lineHeight: 1.02,
            letterSpacing: '-0.035em', margin: '20px 0 24px',
            textWrap: 'balance',
          }}>
            Tu mejor versión.<br/>
            <span style={{
              background: dark
                ? `linear-gradient(90deg, ${M.mint}, ${M.primaryHi})`
                : `linear-gradient(90deg, ${M.primary}, ${M.primaryHi})`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>Diseñada para ti.</span>
          </h1>
          <p style={{
            fontFamily: POPPINS, fontSize: 19, lineHeight: 1.55,
            color: fgMuted, maxWidth: 540, margin: '0 0 36px', fontWeight: 400,
          }}>
            Protocolos de medicina avanzada — GLP‑1, péptidos, hormonas y longevidad —
            personalizados con IA y supervisados por médicos certificados.
            Sin clínicas. Sin esperas. En toda Latinoamérica.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 32 }}>
            <Btn kind={dark ? 'primary' : 'dark'} size="lg" onClick={onStart}>
              Inicia tu evaluación · 3 min
            </Btn>
            <Btn kind={dark ? 'onDark' : 'light'} size="lg">
              Habla con un médico
            </Btn>
          </div>
          <div style={{
            display: 'flex', gap: 24, alignItems: 'center',
            color: fgMuted, fontFamily: POPPINS, fontSize: 13,
          }}>
            <div style={{ display: 'flex', gap: 4 }}>
              {[0,1,2,3,4].map(i => <Icon.star key={i} c={dark ? M.mint : M.primary}/>)}
            </div>
            <span>4.9 · 12,400+ pacientes activos</span>
          </div>
        </div>

        {/* visual — phone preview composition */}
        <HeroVisual dark={dark}/>
      </div>

      {/* trust bar */}
      <div style={{
        maxWidth: 1240, margin: '72px auto 0', padding: '0 32px',
        position: 'relative',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1,
          background: dark ? 'rgba(255,255,255,0.12)' : M.rule,
          borderRadius: 18, overflow: 'hidden',
          border: dark ? '1px solid rgba(255,255,255,0.12)' : `1px solid ${M.rule}`,
        }}>
          {[
            { icon: Icon.dna, label: 'Basado en evidencia clínica' },
            { icon: Icon.brain, label: 'IA que personaliza tu protocolo' },
            { icon: Icon.cal, label: 'Seguimiento médico continuo' },
            { icon: Icon.lock, label: '100 % privado y seguro' },
          ].map((f, i) => (
            <div key={i} style={{
              padding: '24px 22px', display: 'flex', gap: 14, alignItems: 'center',
              background: dark ? 'rgba(255,255,255,0.04)' : '#fff',
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                background: dark ? 'rgba(125,227,197,0.12)' : 'rgba(14,122,101,0.08)',
                color: dark ? M.mint : M.primary,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{f.icon(dark ? M.mint : M.primary)}</div>
              <span style={{
                fontFamily: POPPINS, fontSize: 14, fontWeight: 500,
                color: fg, lineHeight: 1.3,
              }}>{f.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Hero visual: phone + product card composition ──────────────────────
function HeroVisual({ dark }) {
  return (
    <div style={{ position: 'relative', height: 580 }}>
      {/* lifestyle photo behind */}
      <div style={{
        position: 'absolute', right: -40, top: 40, width: 320, height: 460,
        borderRadius: 22, overflow: 'hidden',
        backgroundImage: 'url(https://images.unsplash.com/photo-1559839914-17aae19cec71?auto=format&fit=crop&w=700&q=80)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        boxShadow: '0 40px 80px rgba(6,58,51,0.28)',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(160deg, rgba(6,58,51,0.0) 40%, rgba(6,58,51,0.5) 100%)',
        }}/>
      </div>

      {/* phone in front */}
      <div style={{
        position: 'absolute', left: 0, top: 0, width: 280, height: 560,
        borderRadius: 38, padding: 8,
        background: '#0A0A0F',
        boxShadow: '0 50px 90px rgba(6,58,51,0.28), 0 0 0 1px rgba(0,0,0,0.4)',
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 30,
          background: '#FAFAF7', overflow: 'hidden', position: 'relative',
          padding: '44px 18px 18px',
        }}>
          {/* notch */}
          <div style={{
            position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
            width: 90, height: 26, borderRadius: 16, background: '#000',
          }}/>
          {/* status */}
          <div style={{
            display: 'flex', justifyContent: 'space-between', fontSize: 11,
            fontFamily: '-apple-system, system-ui', fontWeight: 600, color: M.ink,
            padding: '0 6px', marginBottom: 14,
          }}>
            <span>9:41</span>
            <span>● ● ●</span>
          </div>
          <div style={{ fontFamily: POPPINS, padding: '0 4px' }}>
            <div style={{ fontSize: 11, color: M.ink3, marginBottom: 2 }}>Hola, Alejandro 👋</div>
            <div style={{ fontSize: 18, fontWeight: 600, color: M.ink, letterSpacing: '-0.02em' }}>
              Tu plan de hoy
            </div>
          </div>

          {/* protocol card */}
          <div style={{
            background: `linear-gradient(135deg, ${M.primary}, ${M.primaryHi})`,
            borderRadius: 16, padding: 14, margin: '14px 4px',
            color: '#fff', fontFamily: POPPINS,
          }}>
            <div style={{ fontSize: 10, opacity: 0.8, marginBottom: 2 }}>Tu protocolo</div>
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 10 }}>Optimización metabólica</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
              <span style={{ fontSize: 11, opacity: 0.85 }}>Semana 4 de 12</span>
              <span style={{ fontSize: 11, fontWeight: 600 }}>75%</span>
            </div>
            <div style={{ height: 4, background: 'rgba(255,255,255,0.25)', borderRadius: 99 }}>
              <div style={{ width: '75%', height: '100%', background: '#fff', borderRadius: 99 }}/>
            </div>
          </div>

          {/* markers */}
          <div style={{ padding: '0 4px', fontFamily: POPPINS }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontSize: 11, fontWeight: 600, color: M.ink }}>Marcadores clave</span>
              <span style={{ fontSize: 10, color: M.primary, fontWeight: 500 }}>Ver todos</span>
            </div>
            {[
              { l: 'Glucosa en ayunas', v: '92 mg/dL', s: 'Óptimo', c: M.mint },
              { l: 'IMC',               v: '24.1',     s: 'Óptimo', c: M.indigo },
              { l: 'Masa muscular',     v: '28.4 kg',  s: 'Óptimo', c: M.primaryHi },
            ].map((m, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '8px 0', borderBottom: i < 2 ? `0.5px solid ${M.rule}` : 'none',
              }}>
                <div style={{ width: 22, height: 22, borderRadius: 6, background: m.c, opacity: 0.85 }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 500, color: M.ink }}>{m.l}</div>
                  <div style={{ fontSize: 9, color: M.ink3 }}>{m.v}</div>
                </div>
                <span style={{
                  fontSize: 9, fontWeight: 600, color: M.primary,
                  padding: '2px 6px', borderRadius: 99,
                  background: 'rgba(14,122,101,0.08)',
                }}>{m.s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── How it works ───────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Evaluación inicial', d: 'Cuestionario de 3 minutos sobre tus objetivos, historial y estilo de vida. Tu información queda cifrada de extremo a extremo.' },
    { n: '02', t: 'Análisis personalizado', d: 'Nuestra IA cruza tus respuestas con biomarcadores y la última evidencia clínica para diseñar un protocolo único.' },
    { n: '03', t: 'Médico certificado', d: 'Un especialista en longevidad revisa, ajusta y aprueba tu plan. Receta digital y envío directo a tu domicilio.' },
    { n: '04', t: 'Seguimiento continuo', d: 'Tu app, tu médico y tu coach trabajan contigo. Ajustamos el protocolo cada mes según tus marcadores.' },
  ];
  return (
    <Section bg={M.creamSoft} py={120} id="como-funciona" screenLabel="02 Cómo funciona">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 120 }}>
          <Eyebrow>El proceso</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 56, fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: '20px 0 24px',
            textWrap: 'balance',
          }}>De la pregunta al<br/>protocolo en días.</h2>
          <p style={{
            fontFamily: POPPINS, fontSize: 17, color: M.ink2, lineHeight: 1.6,
            maxWidth: 380, margin: '0 0 32px',
          }}>
            Sin filas, sin trámites. Cuatro pasos que combinan tecnología,
            medicina basada en evidencia y atención humana.
          </p>
          <Btn kind="dark" size="lg">Ver el proceso completo {Icon.arrow('#fff')}</Btn>
        </div>
        <div>
          {steps.map((s, i) => (
            <div key={i} style={{
              padding: '28px 0', borderTop: `1px solid ${M.rule}`,
              display: 'grid', gridTemplateColumns: '120px 1fr', gap: 24,
              alignItems: 'start',
            }}>
              <div style={{
                fontFamily: POPPINS, fontSize: 14, fontWeight: 600,
                color: M.primary, letterSpacing: '0.04em',
              }}>{s.n}</div>
              <div>
                <h3 style={{
                  fontFamily: POPPINS, fontSize: 28, fontWeight: 600,
                  letterSpacing: '-0.025em', margin: '0 0 10px', color: M.ink,
                }}>{s.t}</h3>
                <p style={{
                  fontFamily: POPPINS, fontSize: 16, color: M.ink2,
                  lineHeight: 1.6, margin: 0, maxWidth: 520,
                }}>{s.d}</p>
              </div>
            </div>
          ))}
          <div style={{ borderTop: `1px solid ${M.rule}` }}/>
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Nav, Hero, HowItWorks, POPPINS });