// Packages.jsx — 3 plans, full feature lists per user spec
function Packages() {
  const baseFeatures = [
    'Facebook + Instagram',
    'Estrategia y creación de contenido',
    'Copywriting',
    'Diseño y edición de videos',
    'Grabación de consultorio',
    'Programación de publicaciones',
    'Métricas mensuales',
  ];

  const plans = [
    {
      name: 'Básico',
      badge: 'Para empezar',
      qty: '4',
      qtyCap: 'publicaciones / mes',
      features: baseFeatures.map(f => ({ label: f })),
    },
    {
      name: 'Pro',
      badge: 'Más popular',
      qty: '8',
      qtyCap: 'publicaciones / mes',
      featured: true,
      features: [
        ...baseFeatures.map(f => ({ label: f })),
        { label: 'Facebook Ads (1 anuncio)', isNew: true },
      ],
    },
    {
      name: 'Intermedio',
      badge: 'Autoridad médica',
      qty: '12',
      qtyCap: 'publicaciones / mes',
      features: [
        ...baseFeatures.map(f => ({ label: f })),
        { label: 'Facebook Ads (1 anuncio)' },
        { label: 'Estrategia de historias', isNew: true },
        { label: 'Google Profile Business', isNew: true },
      ],
    },
  ];

  return (
    <section id="planes" className="section section--lav" data-screen-label="03 Planes">
      <div className="section__inner">
        <header className="section__head">
          <div>
            <span className="section__eyebrow">Planes de Social Media</span>
            <h2 className="section__title">
              Para cada <em>etapa</em><br/>
              de tu consulta.
            </h2>
          </div>
          <p className="section__lead">
            Todos los planes incluyen estrategia,
            producción y métricas. Solo cambia el ritmo
            y el alcance — tú eliges cuánto crecer.
          </p>
        </header>

        <div className="planes">
          {plans.map(p => <PlanCard key={p.name} {...p} />)}
        </div>

        <p style={{
          marginTop: 32,
          fontSize: 14,
          color: 'var(--ink-500)',
          textAlign: 'center',
          textWrap: 'pretty'
        }}>
          ¿No estás seguro qué plan necesitas? El diagnóstico inicial es <strong style={{color:'var(--ink-900)'}}>gratuito</strong> y dura 30 minutos.
        </p>
      </div>
    </section>
  );
}

function PlanCard({ name, badge, qty, qtyCap, features, featured }) {
  const cls = ['plan', featured && 'plan--featured'].filter(Boolean).join(' ');
  return (
    <div className={cls}>
      <span className="plan__badge">{badge}</span>
      <h3 className="plan__name">{name}</h3>
      <div className="plan__qty-row">
        <span className="plan__qty">{qty}</span>
        <span className="plan__qty-cap">{qtyCap}<br/>en Facebook + IG</span>
      </div>
      <div className="plan__divider"></div>
      <ul className="plan__features">
        {features.map((f, i) => (
          <li key={i} className={f.isNew ? 'is-new' : ''}>
            <Icon name="check" size={14} strokeWidth={2.5} />
            <span>{f.label}</span>
          </li>
        ))}
      </ul>
      <Button
        variant={featured ? 'lav' : 'primary'}
        href="#contacto"
        className="plan__cta"
      >
        Elegir {name}
      </Button>
    </div>
  );
}

window.Packages = Packages;
window.PlanCard = PlanCard;