// Pricing plans (residents vs tenants toggle)
window.PricingPlans=function PricingPlans({lang}){
  const t=useT(lang);
  const fr=lang==="fr";
  const [audience,setAud]=React.useState("resident");
  return (
    <div>
      <div style={{display:"flex",justifyContent:"center",marginTop:10}}>
        <div className="pricing-toggle">
          <button className={audience==="resident"?"on":""} onClick={()=>setAud("resident")}>{t.plan_r}</button>
          <button className={audience==="tenant"?"on":""} onClick={()=>setAud("tenant")}>{t.plan_t}</button>
        </div>
      </div>
      <div className="plans">
        {PRICING_PLANS.map(p=>{
          const price=audience==="resident"?p.resident:p.tenant;
          const name=fr?p.nameFR:p.nameEN;
          const desc=fr?p.descFR:p.descEN;
          const feats=fr?p.featuresFR:p.featuresEN;
          return (
            <div key={p.id} className={"plan"+(p.popular?" popular":"")}>
              {p.popular?<span className="plan-flag">{t.popular}</span>:null}
              <div>
                <h3>{name}</h3>
                <p style={{fontSize:14,marginTop:6}}>{desc}</p>
              </div>
              <div className="plan-price">{price}<small>MUR / {fr?"jour":"day"}</small></div>
              <ul>
                {feats.map((f,i)=><li key={i}><Icon.check size={14}/><span>{f}</span></li>)}
              </ul>
              <a href={WA_LINK} target="_blank" className={"btn "+(p.popular?"btn-gold":"btn-primary")}>
                {t.prc_choose}<Icon.arrow/>
              </a>
            </div>
          );
        })}
      </div>
    </div>
  );
};