/* global React, Icon */

// Precios reales Contarte (MXN, + IVA). Anual = 2 meses gratis vs mensual equivalente.
// RFC adicional en planes de despacho: $6 + IVA c/u.

function Pricing({ audience }) {
  const plansEmpresa = [
    {
      id: "emp-mensual", name: "Pyme Básico", tag: "Ideal para iniciar mes a mes.",
      amount: 500, cadence: "mensual",
      note: "Facturado mensual · + IVA",
      cta: "Empezar ahora",
      features: [
        ["1 usuario", true],
        ["50 timbres / mes incluidos", true],
        ["Facturación CFDI 4.0", true],
        ["Descarga masiva SAT", true],
        ["Sin compromiso anual", true],
        ["Colaboración con contador", false],
      ],
    },
    {
      id: "emp-anual-basico", name: "Pyme Básico Anual", tag: "Mismo plan, 2 meses gratis al año.",
      amount: 5000, cadence: "anual",
      note: "Facturado anual · incluye 2 meses gratis · + IVA",
      featured: true,
      cta: "Activar plan anual",
      features: [
        ["1 usuario", true],
        ["600 timbres / año incluidos", true],
        ["Facturación CFDI 4.0", true],
        ["Descarga masiva SAT", true],
        ["2 meses gratis vs mensual", true],
        ["Colaboración con contador", true],
      ],
    },
    {
      id: "emp-anual-empresario", name: "Pyme Empresario Anual", tag: "Para equipos y volumen.",
      amount: 25000, cadence: "anual",
      note: "Facturado anual · incluye 2 meses gratis · + IVA",
      cta: "Hablar con ventas",
      features: [
        ["5 usuarios incluidos", true],
        ["6,000 timbres / año", true],
        ["Multiusuario y roles", true],
        ["Reportes y bancos", true],
        ["Nómina (módulo integrado)", true],
        ["Soporte prioritario", true],
      ],
    },
  ];

  const plansDespacho = [
    {
      id: "desp-mensual", name: "Contador Independiente", tag: "Para contadores que inician.",
      amount: 600, cadence: "mensual",
      note: "Facturado mensual · + IVA",
      cta: "Empezar ahora",
      features: [
        ["1 usuario", true],
        ["10 RFC administrables", true],
        ["50 timbres / mes incluidos", true],
        ["Descarga masiva SAT", true],
        ["RFC adicional: $6 + IVA c/u", true],
        ["DIOT y papel de trabajo", false],
      ],
    },
    {
      id: "desp-anual", name: "Despacho Anual", tag: "El plan que usan la mayoría.",
      amount: 6000, cadence: "anual",
      note: "Facturado anual · incluye 2 meses gratis · + IVA",
      featured: true,
      cta: "Activar plan anual",
      features: [
        ["3 usuarios incluidos", true],
        ["10 RFC administrables", true],
        ["600 timbres / año incluidos", true],
        ["DIOT y papel de trabajo", true],
        ["Colaboración en equipo", true],
        ["RFC adicional: $6 + IVA c/u", true],
      ],
    },
    {
      id: "desp-corporativo", name: "Despacho Corporativo", tag: "Para despachos con equipo amplio.",
      amount: 60000, cadence: "anual",
      note: "Facturado anual · incluye 2 meses gratis · + IVA",
      cta: "Hablar con ventas",
      features: [
        ["10 usuarios incluidos", true],
        ["200 RFC administrables", true],
        ["10,000 timbres / año", true],
        ["Roles y permisos avanzados", true],
        ["Soporte prioritario", true],
        ["RFC adicional: $6 + IVA c/u", true],
      ],
    },
  ];

  const plans = audience === "empresa" ? plansEmpresa : plansDespacho;
  const fmt = n => n.toLocaleString("es-MX");

  return (
    <section className="section" id="precios">
      <div className="container">
        <div className="pricing-head">
          <div className="section-head" style={{marginBottom:0}}>
            <span className="eyebrow">Planes {audience === "empresa" ? "Empresario" : "Despacho"}</span>
            <h2>Un precio claro, sin letras chiquitas.</h2>
            <p>Pagas mensual o anual. El plan anual incluye 2 meses gratis. Precios en MXN, + IVA.</p>
          </div>
        </div>

        <div className="plans">
          {plans.map(p => (
            <div key={p.id} className={`plan ${p.featured ? "featured" : ""}`}>
              <div className="name">{p.name}</div>
              <div className="tag-line">{p.tag}</div>
              <div className="price">
                <span className="cur">$</span>
                <span className="amt">{fmt(p.amount)}</span>
                <span className="per">MXN {p.cadence === "anual" ? "/ año" : "/ mes"}</span>
              </div>
              <div className="billed">{p.note}</div>
              <a href="#" className={`btn btn-${p.featured ? "primary" : "outline"} cta`}>{p.cta} <Icon name="arrow-right" size={14}/></a>
              <div className="divider"/>
              <ul>
                {p.features.map(([text, on], i) => (
                  <li key={i} className={on ? "" : "off"}>
                    <Icon name={on ? "check" : "x"} size={16}/>
                    {text}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <p style={{marginTop:24, textAlign:"center", fontSize:13, color:"var(--ink-500)"}}>
          {audience === "empresa"
            ? "Precios en MXN, + IVA. Timbres adicionales disponibles por paquete."
            : "Precios en MXN, + IVA. RFC adicional $6 + IVA c/u. Timbres adicionales por paquete."}
        </p>
      </div>
    </section>
  );
}

window.Pricing = Pricing;