/* Pricing — 4 plans */

function PricingCard({ plan, featuredKey, onSelect }) {
  const isFeatured = plan.key === featuredKey;
  const ctaCls = plan.key === "gift"
    ? "cta-btn"
    : isFeatured ? "cta-btn" : "cta-btn ghost";

  return (
    <div className={`price-card ${plan.key}${isFeatured ? " featured" : ""}`}>
      {isFeatured && <span className="ribbon">Más vendido</span>}
      <div className="name">{plan.name}</div>
      <div className="vol">{plan.vol}</div>
      <div className="price">
        {plan.price === "0"
          ? <span className="free">Gratis</span>
          : (<React.Fragment>
              <span className="cur">ARS</span>
              <span className="amt">${plan.price}</span>
              <span className="per">{plan.per}</span>
            </React.Fragment>)
        }
      </div>
      <ul className="feats">
        {plan.feats.map(f => <li key={f}><I.Check/>{f}</li>)}
      </ul>
      <a href={plan.url} target="_blank" rel="noopener noreferrer" className={ctaCls}>
        {plan.cta} <I.ChevR style={{width:14, height:14}}/>
      </a>
    </div>
  );
}

function Pricing({ featuredKey, onSelect }) {
  const plans = [
    {
      key: "gift", name: "Gift Pack", vol: "15 informes", price: "0", per: "sin tarjeta",
      cta: "Probar ahora",
      url: "https://app.deltaisuite.com/registro",
      feats: ["Acceso a Report", "Acceso a Consult (Beta)", "Soporte por email"],
    },
    {
      key: "discovery", name: "Discovery", vol: "100 informes / mes", price: "9.000", per: "/mes",
      cta: "Adquirir",
      url: "https://www.mercadopago.com.ar/subscriptions/checkout?preapproval_plan_id=28d4276ca6d44a5291dd2e3fd2ad3b6d",
      feats: ["Bajo volumen", "Report + Consult", "Tono académico unificado", "Soporte por email"],
    },
    {
      key: "pro", name: "Plan Pro", vol: "1.000 informes / mes", price: "59.000", per: "/mes",
      cta: "Adquirir",
      url: "https://www.mercadopago.com.ar/subscriptions/checkout?preapproval_plan_id=4e8d5ff9cd494a0fa73f6c788aa436f8",
      feats: ["Análisis multimodal", "Diagnósticos diferenciales", "Integración RIS/PACS", "Soporte prioritario"],
    },
    {
      key: "elite", name: "Elite", vol: "2.500 informes / mes", price: "119.000", per: "/mes",
      cta: "Adquirir",
      url: "https://www.mercadopago.com.ar/subscriptions/checkout?preapproval_plan_id=d5f96c4816c14ad2a15534835eb5008f",
      feats: ["Alto flujo de trabajo", "Equipos de trabajo", "Onboarding 1-a-1", "SLA Premium"],
    },
  ];
  return (
    <section className="container section" id="planes">
      <div className="section-head">
        <span className="eyebrow">— Planes y precios</span>
        <h2>Ajustados a tu <span className="grad">volumen de trabajo</span>.</h2>
        <p>Empezá gratis con 15 informes — sin tarjeta. Cambiá de plan o cancelá cuando quieras.</p>
      </div>
      <div className="pricing">
        {plans.map(p => (
          <PricingCard key={p.key} plan={p} featuredKey={featuredKey} onSelect={onSelect} />
        ))}
      </div>
      <div className="guarantee">
        <span className="item"><I.Shield/> 15 informes de prueba sin compromiso</span>
        <span className="item"><I.Lock/> Datos cifrados extremo a extremo</span>
        <span className="item"><I.Plug/> Compatible con tu RIS/PACS</span>
        <span className="item"><I.Workflow/> Cancelás cuando quieras</span>
      </div>
    </section>
  );
}

window.Pricing = Pricing;