// ── PRICING PLANS — shared component ─────────────────────────────────────
// Single source of truth for the Free vs WiseTip+ plan grid.
// Consumed by: Signup (page-signup.jsx) and Membership (sections3.jsx).
// Props:
//   theme, dark, lang   — standard theme pass-through
//   onUpgrade           — fn called when Plus CTA clicked
//   freeCta             — label for the free plan CTA button
//   freeOnCta           — fn for free CTA (null = disabled)

function PricingPlans({ theme, dark, lang, onUpgrade, freeCta, freeOnCta }) {
  const [plan, setPlan] = React.useState("annual");
  const monthly = 14, annual = 120;
  const annualPerMo = (annual / 12).toFixed(2);

  const tabs = [
    { id: "free",    en: "Free",              es: "Gratis" },
    { id: "monthly", en: "Monthly",           es: "Mensual" },
    { id: "annual",  en: "Annual · save 28%", es: "Anual · ahorra 28%" },
  ];

  const freeItems = lang === "en"
    ? ["The weekly edition — a short version of 4 blocks",
       "The full archive, searchable",
       "Free activities & one free pack sample",
       "Both languages, no tracking"]
    : ["La edición semanal — versión corta de 4 bloques",
       "El archivo completo, con búsqueda",
       "Actividades gratis y una muestra de pack",
       "Ambos idiomas, sin rastreo"];

  const plusItems = lang === "en"
    ? ["The full edition — all 7 blocks, long form",
       "Every activity, step-by-step",
       "All seasonal packs, always",
       "TailorAudioBooks & the full podcast"]
    : ["La edición completa — los 7 bloques, versión larga",
       "Cada actividad, paso a paso",
       "Todos los packs de temporada, siempre",
       "TailorAudioBooks y el podcast completo"];

  const isFree = plan === "free";

  const plusPrice = isFree
    ? (lang === "en" ? "from €10 / month" : "desde 10 € / mes")
    : plan === "monthly"
      ? (lang === "en" ? `€${monthly} / month`    : `${monthly} € / mes`)
      : (lang === "en" ? `€${annualPerMo} / month` : `${annualPerMo} € / mes`);

  return (
    <div>
      {/* 3-tab toggle */}
      <div style={{ display: "flex", justifyContent: "center", marginBottom: "2.5rem" }}>
        <div style={{
          display: "inline-flex", padding: 4,
          background: theme.sage3, border: `1px solid ${theme.border}`, borderRadius: 28, gap: 2,
        }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setPlan(t.id)} style={{
              padding: "7px 18px", borderRadius: 24, border: "none",
              background: plan === t.id ? theme.sage : "transparent",
              color: plan === t.id ? (dark ? "#050F07" : "#fff") : theme.text2,
              fontSize: ".78rem", fontWeight: plan === t.id ? 600 : 400,
              transition: "background .2s, color .2s", cursor: "pointer",
            }}>
              {lang === "en" ? t.en : t.es}
            </button>
          ))}
        </div>
      </div>

      {/* 2-card grid */}
      <div className="grid-2" style={{ gap: "1.25rem", maxWidth: 820, margin: "0 auto", textAlign: "left" }}>
        <SUPlan theme={theme} dark={dark} tone={theme.sage}
          featured={isFree}
          name={lang === "en" ? "Free" : "Gratis"}
          price={lang === "en" ? "€0 · forever" : "0 € · para siempre"}
          items={freeItems}
          cta={freeCta || (lang === "en" ? "Start free →" : "Empieza gratis →")}
          onCta={freeOnCta}
        />
        <SUPlan theme={theme} dark={dark} tone={theme.gold}
          featured={!isFree}
          name="WiseTip+"
          price={plusPrice}
          items={plusItems}
          cta={lang === "en" ? "See WiseTip+ →" : "Ver WiseTip+ →"}
          onCta={onUpgrade}
        />
      </div>

      {/* annual billing note */}
      {plan === "annual" && (
        <div style={{ textAlign: "center", marginTop: "1rem", fontSize: ".78rem", color: theme.text3 }}>
          {lang === "en"
            ? `Billed €${annual}/year — cancel any time.`
            : `Facturado ${annual} €/año — cancela cuando quieras.`}
        </div>
      )}
    </div>
  );
}

function SUPlan({ theme, dark, tone, name, price, items, cta, onCta, featured }) {
  return (
    <div style={{
      background: dark ? theme.panel : "#fff",
      border: `1px solid ${featured ? tone + "66" : theme.border}`,
      borderRadius: 12, padding: "1.75rem 1.75rem 1.5rem",
      display: "flex", flexDirection: "column", gap: "1rem",
    }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }}>
        <span className="serif italic" style={{ fontSize: "1.6rem", color: featured ? tone : theme.text, fontWeight: 400 }}>{name}</span>
        <span style={{ fontSize: ".82rem", color: theme.text3 }}>{price}</span>
      </div>
      <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: ".9rem", color: theme.text2, lineHeight: 1.5 }}>
            <span style={{ color: tone, marginTop: 1 }}>{featured ? "✦" : "—"}</span>{it}
          </li>
        ))}
      </ul>
      <button
        onClick={onCta || undefined}
        disabled={!onCta}
        style={{
          background: onCta ? tone : "transparent",
          color: onCta ? (dark ? "#050F07" : "#fff") : theme.text3,
          border: onCta ? "none" : `1px solid ${theme.border2}`,
          padding: "11px 18px", borderRadius: 22,
          fontSize: ".85rem", fontWeight: 600,
          cursor: onCta ? "pointer" : "default",
        }}>{cta}</button>
    </div>
  );
}

Object.assign(window, { PricingPlans, SUPlan });