/* Trepa't — Página Tarifas */
const { Button: TButton, Card: TCard, Badge: TBadge } = window.TrepaTDesignSystem_f8c9ea;

function Tarifas({ lang, go }) {
  const t = window.TPT_I18N[lang].tarifas;
  const [tab, setTab] = React.useState("suelto");
  const keys = ["suelto", "bonos", "cuotas"];
  window.useLucide("tarifas" + lang + tab);
  const plans = t.groups[tab];

  return (
    <main className="view-enter">
      <window.Hero variant="ink" ghost="coral" seal crumb={t.hero.crumb}
        tagline={t.hero.tagline} title={t.hero.title} lead={t.hero.lead} />

      <window.Band tone="coral" />

      <section className="sec">
        <div className="container">
          <div style={{ textAlign: "center" }}>
            <div className="pricing-toggle">
              {keys.map((k, i) => (
                <button key={k} className={tab === k ? "is-on" : ""} onClick={() => setTab(k)}>{t.toggle[i]}</button>
              ))}
            </div>
          </div>

          <div className="price-grid">
            {plans.map((p) => (
              <TCard key={p.name} tone={p.featured ? "petrol" : "default"} elevation="flat" className={"plan" + (p.featured ? " is-featured" : "")}>
                {p.featured && <span className="plan__flag"><TBadge variant="coral">{t.flag}</TBadge></span>}
                <div className="plan__name">{p.name}</div>
                <div className="plan__price"><strong>{p.price}</strong><span>{p.unit}</span></div>
                <ul className="plan__feat">
                  {p.feat.map((f) => <li key={f}><i data-lucide="check"></i>{f}</li>)}
                </ul>
                <TButton variant={p.featured ? "primary" : "outline"} block onClick={() => {}}>{p.cta}</TButton>
              </TCard>
            ))}
          </div>

          <div className="price-note">
            <i data-lucide="info"></i>
            <span>{t.note}</span>
          </div>
          <div style={{ textAlign: "center", marginTop: 22 }}>
            <TButton variant="outline" iconRight={<i data-lucide="arrow-right"></i>} onClick={() => go("actividades")}>{t.actLink}</TButton>
          </div>

          {/* Extras */}
          <div style={{ marginTop: "8px" }}>
            <window.SecHead title={t.extras.title} />
            <div className="extras" style={{ marginTop: 0 }}>
              {t.extras.items.map((e) => (
                <div key={e.t} className="extra">
                  <b>{e.t}</b>
                  <div style={{ textAlign: "right" }}>
                    <span>{e.p}</span>
                    <small>{e.u}</small>
                  </div>
                </div>
              ))}
            </div>
            <p style={{ marginTop: "18px", fontSize: "14px", color: "var(--slate-600)", fontWeight: 500 }}>
              <i data-lucide="users" style={{ width: 16, height: 16, verticalAlign: "-3px", marginRight: 6, color: "var(--teal-mid)" }}></i>
              {t.discounts}
            </p>
          </div>
        </div>
      </section>

      <window.Band tone="ink" />

      <window.CTABanner title={t.cta.title} p={t.cta.p}>
        <TButton variant="secondary" size="lg" iconLeft={<i data-lucide="user-plus"></i>} onClick={() => {}}>
          {window.TPT_I18N[lang].cta_register}
        </TButton>
      </window.CTABanner>
    </main>
  );
}
window.Tarifas = Tarifas;