// ─── Programas Page ───────────────────────────────────────────
// "Programas médicos personalizados" es la unidad comercial pública.
//
// Modelo de Programa (todos los campos son parte del modelo; se renderizan
// solo si tienen valor, porque no todos los programas usan todos los campos):
//   line          → línea corta ('Skin' | 'Age' | 'Body' | 'Hair' | 'Signature')
//   lineName      → etiqueta de línea ('LANA Skin', …) usada también para deep-link
//   name          → nombre comercial ('LANA Skin Essential')
//   level         → 'Essential' | 'Advance' | 'Signature'
//   desc          → descripción corta
//   idealFor[]    → "Ideal para"
//   includes[]    → "Incluye"
//   duration      → duración estimada
//   frequency     → frecuencia sugerida
//   benefit       → beneficio principal
//   maintenance   → recomendación de mantenimiento
//   note          → aclaración importante
//   cta           → texto del CTA ('Consultar Skin Essential')
//   price         → SOLO se muestra si LANA.config.showPrices === true
//
// Contenido editable en components/lana-config.jsx → LANA.programs / LANA.programGroups

function LevelBadge({ level }) {
  const palette = {
    Essential: { background: 'var(--gold-pale)', color: 'var(--gold)' },
    Advance: { background: 'var(--gold)', color: '#FAF7F2' },
    Armonización: { background: 'var(--gold)', color: '#FAF7F2' },
    Signature: { background: 'var(--dark)', color: 'var(--gold-light)' },
  };
  const s = palette[level] || palette.Essential;
  return (
    <span style={{ ...s, fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '5px 12px', borderRadius: 100, whiteSpace: 'nowrap' }}>
      {level}
    </span>
  );
}

function Meta({ label, value }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div className="t-caps" style={{ marginBottom: 6 }}>{label}</div>
      <p className="t-body-dark" style={{ fontSize: 15, lineHeight: 1.6 }}>{value}</p>
    </div>
  );
}

function ProgramCard({ program, isOpen, onToggle }) {
  return (
    <div id={`program-${program.id}`} style={{ background: 'var(--white)', scrollMarginTop: 90, transition: 'box-shadow 0.25s', boxShadow: isOpen ? '0 14px 44px rgba(139,107,61,0.12)' : 'none' }}>
      <button onClick={onToggle} style={{
        width: '100%', background: 'none', border: 'none', cursor: 'pointer',
        padding: '30px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, textAlign: 'left',
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
            <span className="t-caps-gold">{program.lineName}</span>
            <LevelBadge level={program.level} />
          </div>
          <div className="t-serif" style={{ fontSize: 27, marginBottom: 8 }}>{program.name}</div>
          <p className="t-body" style={{ fontSize: 15, maxWidth: 540 }}>{program.desc}</p>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold)', fontSize: 18, flexShrink: 0, transition: 'transform 0.3s', transform: isOpen ? 'rotate(45deg)' : 'none' }}>+</div>
      </button>

      {isOpen && (
        <div style={{ padding: '0 32px 40px' }}>
          <div className="program-body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start', paddingTop: 8 }}>
            <div>
              {program.idealFor && program.idealFor.length > 0 && (
                <div style={{ marginBottom: 28 }}>
                  <div className="t-caps" style={{ marginBottom: 12 }}>Ideal para</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {program.idealFor.map((it, 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 }}>{it}</span>
                    ))}
                  </div>
                </div>
              )}
              <div className="t-caps" style={{ marginBottom: 12 }}>Incluye</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {program.includes.map((it, i) => (
                  <li key={i} className="t-body-dark" style={{ fontSize: 15, lineHeight: 1.6, paddingLeft: 26, position: 'relative', marginBottom: 10 }}>
                    <span style={{ position: 'absolute', left: 0, top: 1, color: 'var(--gold)', fontSize: 14 }}>✓</span>{it}
                  </li>
                ))}
              </ul>
            </div>
            <div>
              {program.duration && <Meta label="Duración" value={program.duration} />}
              {program.frequency && <Meta label="Frecuencia" value={program.frequency} />}
              {program.benefit && <Meta label="Beneficio principal" value={program.benefit} />}
              {program.maintenance && <Meta label="Mantenimiento" value={program.maintenance} />}
              {LANA.config.showPrices && program.price && <Meta label="Inversión" value={program.price} />}
              {program.note && (
                <div style={{ background: 'var(--gold-pale)', padding: '16px 18px', marginBottom: 24 }}>
                  <div className="t-caps" style={{ marginBottom: 6 }}>Importante</div>
                  <p className="t-body-dark" style={{ fontSize: 14, lineHeight: 1.6 }}>{program.note}</p>
                </div>
              )}
              <BtnPrimary href={waLink('Hola, quisiera consultar el ' + program.name + '. ¿Me dan más información?')} style={{ paddingLeft: 24, paddingRight: 24 }}>Consultar por este programa</BtnPrimary>
            </div>
          </div>
          <p className="t-body" style={{ fontSize: 13, fontStyle: 'italic', marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--cream-dark)' }}>
            Cada programa es una guía. El protocolo final, su duración y las técnicas que lo componen se definen en tu evaluación, según el diagnóstico médico de la Dra. Lana.
          </p>
        </div>
      )}
    </div>
  );
}

function ProgramsPage({ setCurrentPage }) {
  const [openId, setOpenId] = useState(LANA.programs[0].id);

  // Deep-link: si llegamos desde una Línea ("Ver programas Skin/Age/Body/Hair")
  // o desde un destacado del Home, abrimos y enfocamos el programa correspondiente.
  // El valor puede ser un id de programa o un nombre de línea ('LANA Skin').
  useEffect(() => {
    const key = window.__lanaFocusProgram;
    if (!key) return;
    window.__lanaFocusProgram = null;
    const prog = LANA.programs.find(p => p.id === key) || LANA.programs.find(p => p.lineName === key);
    if (!prog) return;
    setOpenId(prog.id);
    // Sin cleanup: el enfoque ocurre aunque la página se re-monte en la navegación.
    setTimeout(() => requestAnimationFrame(() => {
      const el = document.getElementById(`program-${prog.id}`);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }), 520);
  }, []);

  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: -100, right: -100, width: 400, height: 400, borderRadius: '50%', border: '1px solid rgba(196,169,107,0.1)' }} />
        <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
          <Label light style={{ marginBottom: 20 }}>Programas médicos personalizados</Label>
          <h1 className="t-h2-inv" style={{ fontSize: 'clamp(40px, 5vw, 68px)', maxWidth: 680, marginBottom: 28 }}>
            No elegís un tratamiento.<br /><em style={{ color: 'var(--gold-light)', fontStyle: 'italic' }}>Empezás un recorrido.</em>
          </h1>
          <p className="t-body-inv" style={{ fontSize: 17, maxWidth: 540, marginBottom: 40 }}>
            Cada programa es un plan médico personalizado, organizado por línea y nivel. Una evaluación, un protocolo claro y un seguimiento real. Tu piel cuidada paso a paso, no a los saltos.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <BtnPrimary href={waLink()}>Agendar evaluación</BtnPrimary>
            <BtnOutline light onClick={() => window.dispatchEvent(new CustomEvent('lana-quiz'))}>Quiero saber cuál es para mí</BtnOutline>
          </div>
        </div>
      </div>

      {/* Cómo funciona un programa */}
      <div className="section--sm" style={{ background: 'var(--white)' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 20 }}>
            {[
              ['Parte de un diagnóstico', 'Ningún programa empieza sin evaluación médica previa.'],
              ['Niveles Essential y Advance', 'Empezás por donde estás y avanzás a tu ritmo.'],
              ['Todo incluido y claro', 'Sabés exactamente qué incluye cada programa.'],
              ['Con seguimiento', 'Controles y ajustes según tu evolución.'],
            ].map(([t, d], i) => (
              <div key={i} style={{ borderTop: '2px solid var(--gold)', paddingTop: 18 }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, color: 'var(--dark)', marginBottom: 8 }}>{t}</div>
                <div className="t-body" style={{ fontSize: 14, lineHeight: 1.7 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Lista de programas, agrupada por línea */}
      <div className="section" style={{ background: 'var(--cream)', paddingTop: 48 }}>
        <div className="wrap">
          <div className="text-center" style={{ marginBottom: 48 }}>
            <Label style={{ marginBottom: 16 }}>Nuestros programas</Label>
            <h2 className="t-h2" style={{ fontSize: 'clamp(30px, 4vw, 48px)' }}>
              Elegí por línea y nivel
            </h2>
          </div>

          {LANA.programGroups.map(grp => {
            const progs = LANA.programs.filter(p => p.line === grp.key);
            if (!progs.length) return null;
            return (
              <div key={grp.key} style={{ marginBottom: 44 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18 }}>
                  <h3 className="t-serif" style={{ fontSize: 22, color: 'var(--gold)' }}>{grp.name}</h3>
                  <div style={{ flex: 1, height: 1, background: 'var(--cream-dark)' }} />
                </div>
                <div style={{ display: 'grid', gap: 12 }}>
                  {progs.map(program => (
                    <ProgramCard key={program.id} program={program} isOpen={openId === program.id} onToggle={() => {
                      const opening = openId !== program.id;
                      setOpenId(opening ? program.id : null);
                      if (opening && window.track) window.track('open_program', { program: program.name, level: program.level, line: program.lineName });
                    }} />
                  ))}
                </div>
              </div>
            );
          })}

          <p className="t-body text-center" style={{ fontSize: 14, maxWidth: 640, margin: '40px auto 0' }}>
            ¿Querés ver las técnicas que componen cada programa?{' '}
            <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="Tu programa se confirma en la evaluación"
        text="Contanos tu objetivo y la Dra. Lana define el programa y el nivel ideal para vos. Primera evaluación sin costo."
      >
        <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, { ProgramsPage });