// ─── Líneas LANA Page ─────────────────────────────────────────
// Cuatro líneas por objetivo (Skin / Age / Body / Hair). Son la capa de
// comunicación entre el Método y los Programas. Cada línea se apoya en
// servicios clínicos (los tratamientos internos) pero comunica beneficios.
// Contenido editable en components/lana-config.jsx → LANA.lines

function LineCard({ line, setCurrentPage }) {
  const goPrograms = () => {
    if (window.track) window.track('select_line', { line: line.name, from: 'lineas' });
    window.__lanaFocusProgram = line.name;
    setCurrentPage('programs');
  };
  return (
    <div id={`line-${line.id}`} style={{ background: 'var(--white)', padding: '44px 38px', display: 'flex', flexDirection: 'column', scrollMarginTop: 90, transition: 'transform 0.25s, box-shadow 0.25s' }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 14px 44px rgba(139,107,61,0.1)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      <div className="t-serif" style={{ fontSize: 34, color: 'var(--gold)', marginBottom: 22, lineHeight: 1 }}>{line.symbol}</div>
      <h3 className="t-serif" style={{ fontSize: 30, marginBottom: 10, lineHeight: 1.1 }}>{line.name}</h3>
      <div className="t-serif" style={{ fontSize: 19, fontStyle: 'italic', color: 'var(--gold)', lineHeight: 1.3, marginBottom: 20 }}>{line.tagline}</div>
      <p className="t-body" style={{ fontSize: 15.5, lineHeight: 1.75, marginBottom: 28 }}>{line.desc}</p>

      <div className="t-caps" style={{ marginBottom: 14 }}>Qué resolvemos</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 32 }}>
        {line.problems.map((p, i) => (
          <span key={i} style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-light)', background: 'var(--gold-pale)', padding: '7px 14px', borderRadius: 100, lineHeight: 1.2 }}>{p}</span>
        ))}
      </div>

      <div style={{ marginTop: 'auto', paddingTop: 22, borderTop: '1px solid var(--cream-dark)' }}>
        <button onClick={goPrograms} style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--gold)',
          transition: 'gap 0.2s',
        }}
          onMouseEnter={e => { e.currentTarget.style.gap = '12px'; }}
          onMouseLeave={e => { e.currentTarget.style.gap = '8px'; }}
        >Ver programas {line.short} →</button>
      </div>
    </div>
  );
}

function LinesPage({ setCurrentPage }) {
  // Deep-link: si llegamos desde una tarjeta de objetivo del Home, enfocamos esa línea.
  useEffect(() => {
    const id = window.__lanaFocusLine;
    if (!id) return;
    window.__lanaFocusLine = null;
    const focus = () => {
      const el = document.getElementById(`line-${id}`);
      if (!el) return;
      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      el.style.transition = 'box-shadow 0.4s';
      el.style.boxShadow = '0 0 0 2px var(--gold)';
      setTimeout(() => { el.style.boxShadow = 'none'; }, 1800);
    };
    // Dejamos pasar el scroll-to-top inicial del cambio de página antes de enfocar.
    // Sin cleanup: si la página se re-monta durante la navegación, el enfoque igual ocurre.
    setTimeout(() => requestAnimationFrame(focus), 500);
  }, []);

  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 }}>Líneas de tratamiento</Label>
            <h1 className="t-h2" style={{ fontSize: 'clamp(38px, 5vw, 60px)', marginBottom: 24 }}>
              El cuidado de tu piel,<br /><em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>organizado por objetivos.</em>
            </h1>
            <GoldLine style={{ marginBottom: 28 }} />
            <p className="t-body" style={{ fontSize: 17 }}>
              Las líneas de tratamiento son nuestras grandes áreas de cuidado. En lugar de pensar en tratamientos sueltos, pensamos en lo que querés lograr: mejorar la calidad de tu piel, verte más descansada, cuidar tu cuerpo o fortalecer tu cabello. Cada línea reúne los recursos médicos adecuados para ese objetivo.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[['LANA Skin', 'Calidad de piel'], ['LANA Age', 'Prevención y armonía'], ['LANA Body', 'Cuerpo'], ['LANA Hair', 'Cabello']].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>

      {/* Grid de líneas */}
      <div className="section" style={{ background: 'var(--cream)' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
            {LANA.lines.map(line => (
              <LineCard key={line.id} line={line} setCurrentPage={setCurrentPage} />
            ))}
          </div>
          <p className="t-body text-center" style={{ fontSize: 14, maxWidth: 620, margin: '40px auto 0' }}>
            ¿Querés ver el detalle clínico de cada técnica?{' '}
            <button onClick={() => setCurrentPage('treatments')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--gold)', fontFamily: 'var(--font-sans)', fontSize: 14, textDecoration: 'underline' }}>
              Ver servicios clínicos
            </button>
          </p>
        </div>
      </div>

      {/* CTA */}
      <CTASection
        title="¿Cuál es tu punto de partida?"
        text="En la evaluación inicial definimos qué líneas necesita tu piel y armamos tu programa de medicina estética personalizada."
      >
        <BtnPrimary href={waLink()}>Agendar evaluación</BtnPrimary>
        <BtnOutline onClick={() => window.dispatchEvent(new CustomEvent('lana-quiz'))}>Quiero saber cuál es para mí</BtnOutline>
      </CTASection>
    </div>
  );
}

Object.assign(window, { LinesPage });