// Pricing page — bilingual via detectInitialLang. Uses TR data so it stays
// in sync with the home pricing section.
function PricingPage() {
  const lang = (window.detectInitialLang ? window.detectInitialLang() : "es");
  const L = lang === "en";
  const t = window.TR[lang];
  const plans = t.pricing.plans;

  return (
    <>
      <SubNav current={L ? "pricing" : "precios"} />
      <section className="sub-hero" style={{ borderTop: "none" }}>
        <div className="container">
          <div className="sub-kicker">{L ? "Pricing" : "Precios"}</div>
          <h1 className="sub-h1">
            {L
              ? <>Start <em>free</em>. Grow when you <span className="hl">decide</span>.</>
              : <>Empieza <em>gratis</em>. Crece cuando lo <span className="hl">decidas</span>.</>}
          </h1>
          <p className="sub-lede">{t.pricing.desc}</p>
        </div>
      </section>

      <section style={{ borderTop: "1px solid var(--line)", paddingTop: 56 }}>
        <div className="container">
          <div className="price-grid">
            {plans.map((p, i) => (
              <div key={i} className={"price " + (p.hi ? "hi" : "")}>
                <div>
                  <div className="price-name">{p.name}</div>
                  <div className="price-desc" style={{ marginTop: 6 }}>{p.desc}</div>
                </div>
                <div className="price-val num">{p.price}{p.price !== "Custom" && <span className="mo">/{L ? "month" : "mes"}</span>}</div>
                <ul className="price-list">
                  {p.features.map((f, j) => <li key={j}><span className="chk">✓</span>{f}</li>)}
                </ul>
                <a className={"btn " + (p.hi ? "btn-accent" : "btn-primary")} href={window.appRegisterURL(lang)} style={{ justifyContent: "center" }}>{p.cta}</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ on pricing */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">FAQ</div>
              <h2>{L ? "Common questions" : "Preguntas frecuentes"}</h2>
            </div>
          </div>
          <div className="faq-list">
            {(L ? [
              { q: "Are there setup or implementation fees?", a: "No. Setup is included in every plan. We help you connect your sources during the trial." },
              { q: "Can I change plans later?", a: "Yes — at any time, with no penalties. You only pay the difference for the rest of the month." },
              { q: "What happens after the 14-day trial?", a: "You decide. If you don't continue, the integrations stop and your data is kept for 30 days in case you change your mind." },
              { q: "Do you offer annual discounts?", a: "Yes — 2 free months on the annual plan and a custom price for Enterprise." },
            ] : [
              { q: "¿Hay coste de setup o implementación?", a: "No. La instalación está incluida en todos los planes. Te ayudamos a conectar tus fuentes durante la prueba." },
              { q: "¿Puedo cambiar de plan más tarde?", a: "Sí — cuando quieras, sin penalizaciones. Solo pagas la diferencia del mes en curso." },
              { q: "¿Qué pasa al acabar la prueba de 14 días?", a: "Decides tú. Si no sigues, las integraciones se paran y guardamos tus datos 30 días por si cambias de opinión." },
              { q: "¿Tenéis descuento anual?", a: "Sí — 2 meses gratis en el plan anual y precio a medida para Enterprise." },
            ]).map((f, i) => (
              <details key={i} className="faq-item" style={{ padding: "8px 0" }}>
                <summary className="faq-q" style={{ listStyle: "none", cursor: "pointer" }}>
                  <h4>{f.q}</h4>
                </summary>
                <div className="faq-a" style={{ maxHeight: "none", paddingBottom: 18, color: "var(--mute)" }}>{f.a}</div>
              </details>
            ))}
          </div>
        </div>
      </section>

      <SubCTA
        title={L ? "Talk to us before deciding" : "Háblanos antes de decidir"}
        sub={L ? "We'll walk you through your numbers in a 30-minute call. No commitment." : "Te enseñamos tus números en una llamada de 30 min. Sin compromiso."}
      />
      <SubFooter />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<PricingPage />);