// CynamonSup — sección informativa de planes/suscripciones.
// SOLO INFORMACIÓN: no hay cobros ni lógica de límites todavía.

const PLANES = [
  {
    id: 'free',
    nombre: 'Free',
    tono: 'free',
    precio: '$0',
    periodo: 'siempre gratis',
    lema: 'Para empezar a probar Cynamonurs.',
    cta: 'Comenzar gratis',
    destacado: false,
    bullets: ['Con anuncios', 'Funciones limitadas por uso diario', 'Casos solo en este dispositivo'],
  },
  {
    id: 'basic',
    nombre: 'Basic',
    tono: 'basic',
    precio: '$59',
    periodo: 'MXN / mes',
    lema: 'Ligeramente limitada, solo por uso diario.',
    cta: 'Elegir Basic',
    destacado: true,
    bullets: ['Sin anuncios', 'Límites de uso más amplios', 'Guarda tus casos en la nube'],
  },
  {
    id: 'pro',
    nombre: 'PRO',
    tono: 'pro',
    precio: '$109',
    periodo: 'MXN / mes',
    lema: 'Uso ilimitado y soporte prioritario.',
    cta: 'Elegir PRO',
    destacado: false,
    bullets: ['Sin anuncios', 'Todo ilimitado (∞)', 'Soporte prioritario'],
  },
];

// Tabla comparativa. inf = símbolo ∞ · si = ✓ · no = ✗ · dash = —
const PLAN_FEATURES = [
  { label: 'Buscar diagnósticos',        free: '3 por día',      basic: '8 al día',  pro: 'inf' },
  { label: 'Ver definición de objetivos e intervenciones', free: '3 por día', basic: '8 al día', pro: 'inf' },
  { label: 'Crear caso de paciente',     free: '1 al día',       basic: '5 al día',  pro: 'inf' },
  { label: 'Exportar PDF / Word',        free: 'no',             basic: '8 al día',  pro: 'inf' },
  { label: 'Calculadoras (Braden, Glasgow…)', free: '3 usos/día', basic: '30/día',   pro: 'inf' },
  { label: 'Guardar casos en la nube',   free: 'no-local',       basic: 'si',        pro: 'si' },
  { label: 'Anuncios',                   free: 'ads',            basic: 'no-ads',    pro: 'no-ads' },
  { label: 'Soporte prioritario',        free: 'dash',           basic: 'dash',      pro: 'si' },
  { label: 'Precio sugerido (MXN)',      free: '$0',             basic: '$59 / mes', pro: '$109 / mes', isPrice: true },
];

function PlanCell({ value }) {
  if (value === 'inf')      return <span className="plan-cell inf">∞</span>;
  if (value === 'si')       return <span className="plan-cell yes" aria-label="Incluido">✓</span>;
  if (value === 'no')       return <span className="plan-cell no" aria-label="No incluido">✗</span>;
  if (value === 'dash')     return <span className="plan-cell dash">—</span>;
  if (value === 'ads')      return <span className="plan-cell warn">Sí</span>;
  if (value === 'no-ads')   return <span className="plan-cell yes">No</span>;
  if (value === 'no-local') return <span className="plan-cell no">✗ <em>solo local</em></span>;
  return <span className="plan-cell txt">{value}</span>;
}

const Planes = () => (
  <section className="section section-cream" id="planes" data-screen-label="Landing — Planes (CynamonSup)">
    <div className="container">
      <div className="section-head">
        <span className="section-eyebrow">CynamonSup · Suscripciones</span>
        <h2 className="section-title">Tres planes, <em>a tu ritmo</em>.</h2>
        <p className="section-lead">
          Empieza gratis y sube de plan cuando lo necesites. Información de referencia — los precios y límites
          pueden ajustarse antes del lanzamiento.
        </p>
      </div>

      <div className="planes-grid">
        {PLANES.map(pl => (
          <div key={pl.id} className={'plan-tier ' + pl.tono + (pl.destacado ? ' featured' : '')}>
            {pl.destacado && <div className="plan-ribbon">Recomendado</div>}
            <div className="plan-tier-name">{pl.nombre}</div>
            <div className="plan-tier-price">
              <span className="amt">{pl.precio}</span>
              <span className="per">{pl.periodo}</span>
            </div>
            <p className="plan-tier-lema">{pl.lema}</p>
            <ul className="plan-tier-bullets">
              {pl.bullets.map((b, i) => (
                <li key={i}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                  {b}
                </li>
              ))}
            </ul>
            <button className={'plan-tier-cta ' + (pl.destacado ? 'primary' : 'ghost')} disabled title="Próximamente">
              {pl.cta}
            </button>
            <div className="plan-tier-soon">Próximamente</div>
          </div>
        ))}
      </div>

      <div className="plan-compare">
        <div className="plan-compare-head">Comparación detallada</div>
        <div className="plan-table-scroll">
          <table className="plan-table">
            <thead>
              <tr>
                <th className="feat">Función</th>
                <th className="free">Free</th>
                <th className="basic">Basic</th>
                <th className="pro">PRO</th>
              </tr>
            </thead>
            <tbody>
              {PLAN_FEATURES.map((row, i) => (
                <tr key={i} className={row.isPrice ? 'price-row' : ''}>
                  <td className="feat">{row.label}</td>
                  <td data-plan="Free"><PlanCell value={row.free}/></td>
                  <td data-plan="Basic"><PlanCell value={row.basic}/></td>
                  <td data-plan="PRO"><PlanCell value={row.pro}/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="plan-note">
          El plan <strong>Free</strong> se sostiene con anuncios y tiene límites diarios. <strong>Basic</strong> quita los
          anuncios y amplía los límites de uso. <strong>PRO</strong> ofrece uso ilimitado y soporte prioritario.
        </p>
      </div>
    </div>
  </section>
);

Object.assign(window, { Planes, PLANES, PLAN_FEATURES });