/* GUIDKO Tarifs 2026 — abonnements & commissions réadaptés au marché actuel.
   Une grille par usage : Élève, Auto-école Pro, Conducteur (covoit/livraison),
   GUIDAROUTE (achat séparé), et commissions Marché Auto. Mensuel / Annuel toggle. */

const PRICING_GROUPS = [
  {
    k: "eleve", fr: "Élève — Apprendre à conduire", en: "Student — Learn to drive", g: "▲", color: "#FF5A1F",
    plans: [
      { name: { fr: "À la carte", en: "Pay as you go" }, price: { m: 0, y: 0 }, unit: { fr: "Puis 49 €/h de conduite", en: "Then €49/driving hour" }, feats: { fr: ["Code en ligne illimité", "Réservation d'heures", "Suivi de progression"], en: ["Unlimited online code", "Book lessons", "Progress tracking"] }, cta: { fr: "Commencer", en: "Start" } },
      { name: { fr: "Forfait B", en: "B Package" }, price: { m: 89, y: 890 }, unit: { fr: "/ mois · 20 h incluses", en: "/ mo · 20h included" }, feats: { fr: ["20 h de conduite", "Code IA personnalisé", "2 examens blancs", "Covoiturage retour offert"], en: ["20h driving", "Personalized AI code", "2 mock exams", "Free carpool home"] }, cta: { fr: "Choisir", en: "Choose" }, popular: true },
      { name: { fr: "Permis Express", en: "Fast-track" }, price: { m: 1490, y: 1490 }, unit: { fr: "tout compris, paiement 4×", en: "all-in, pay in 4×" }, feats: { fr: ["Conduite accélérée", "Moniteur dédié", "GUIDAROUTE inclus 6 mois", "Garantie 2e présentation"], en: ["Accelerated driving", "Dedicated instructor", "GUIDAROUTE 6 months", "2nd-attempt guarantee"] }, cta: { fr: "Choisir", en: "Choose" } },
    ],
  },
  {
    k: "pro", fr: "Auto-école — Espace Pro", en: "Driving school — Pro", g: "♛", color: "#0B0F1F",
    plans: [
      { name: { fr: "Starter", en: "Starter" }, price: { m: 79, y: 790 }, unit: { fr: "/ mois · jusqu'à 50 élèves", en: "/ mo · up to 50 students" }, feats: { fr: ["Planning & élèves", "Facturation", "1 véhicule au Marché"], en: ["Schedule & students", "Invoicing", "1 vehicle on Market"] }, cta: { fr: "Essai 14 j", en: "14-day trial" } },
      { name: { fr: "Business", en: "Business" }, price: { m: 199, y: 1990 }, unit: { fr: "/ mois · élèves illimités", en: "/ mo · unlimited students" }, feats: { fr: ["Multi-moniteurs", "Analytics & rentabilité", "Flotte & locations", "Co-pilote Lia gestion"], en: ["Multi-instructor", "Analytics & profit", "Fleet & rentals", "Lia management copilot"] }, cta: { fr: "Choisir", en: "Choose" }, popular: true },
      { name: { fr: "Réseau", en: "Network" }, price: { m: 0, y: 0 }, unit: { fr: "Sur devis · multi-agences", en: "Custom · multi-branch" }, feats: { fr: ["Agences illimitées", "API & intégrations", "Account manager dédié", "Conformité multi-pays"], en: ["Unlimited branches", "API & integrations", "Dedicated manager", "Multi-country compliance"] }, cta: { fr: "Nous contacter", en: "Contact us" } },
    ],
  },
  {
    k: "driver", fr: "Conducteur — Covoiturage & Livraison", en: "Driver — Carpool & Delivery", g: "⇅", color: "#0FB76B",
    plans: [
      { name: { fr: "Gratuit", en: "Free" }, price: { m: 0, y: 0 }, unit: { fr: "Commission 12% par course", en: "12% commission per ride" }, feats: { fr: ["Publier des trajets", "Missions livraison", "Wallet & retraits", "Avis croisés"], en: ["Publish rides", "Delivery missions", "Wallet & payouts", "Cross reviews"] }, cta: { fr: "Démarrer", en: "Start" } },
      { name: { fr: "Pro Conducteur", en: "Driver Pro" }, price: { m: 19, y: 190 }, unit: { fr: "/ mois · commission réduite 6%", en: "/ mo · reduced 6% commission" }, feats: { fr: ["Commission divisée par 2", "Missions prioritaires", "Boost week-end", "GUIDAROUTE inclus"], en: ["Half commission", "Priority missions", "Weekend boost", "GUIDAROUTE included"] }, cta: { fr: "Choisir", en: "Choose" }, popular: true },
      { name: { fr: "Flotte B2B", en: "B2B Fleet" }, price: { m: 0, y: 0 }, unit: { fr: "Sur devis · entrepôts & PL", en: "Custom · warehouses & trucks" }, feats: { fr: ["Contrats logistiques", "Gestion de flotte", "Tournées optimisées", "Recrutement livreurs"], en: ["Logistics contracts", "Fleet management", "Optimized tours", "Courier recruitment"] }, cta: { fr: "Nous contacter", en: "Contact us" } },
    ],
  },
];

const PRICING_ADDONS = [
  { g: "🛰", name: { fr: "GUIDAROUTE", en: "GUIDAROUTE" }, price: { fr: "9,90 €/mois ou 79 € à vie", en: "€9.90/mo or €79 lifetime" }, desc: { fr: "Le code de la route vivant. Achetable seul, sans abonnement GUIDKO.", en: "The living road code. Standalone, no GUIDKO subscription needed." }, color: "#FF5A1F" },
  { g: "⇄", name: { fr: "Marché Auto", en: "Auto Market" }, price: { fr: "2% à la vente · 0 € à l'achat", en: "2% on sale · €0 to buy" }, desc: { fr: "Annonces gratuites. Commission uniquement sur transaction sécurisée par escrow.", en: "Free listings. Commission only on escrow-secured transactions." }, color: "#A78BFA" },
  { g: "🛡", name: { fr: "Assurance trajet", en: "Trip insurance" }, price: { fr: "Incluse dès la vérification KYC", en: "Included once KYC verified" }, desc: { fr: "Couvre chaque cours, covoiturage et livraison. Sans surcoût.", en: "Covers every lesson, ride and delivery. No extra cost." }, color: "#3B6FF8" },
];

function PricingPage({ role, navigate }) {
  const C = GK.colors;
  const { t, lang } = useI18n();
  const toast = useToast();
  const [annual, setAnnual] = React.useState(false);
  // Focus the group most relevant to the current role
  const focus = role === "eleve" ? "eleve" : (role === "gerant" || role === "accueil" || role === "moniteur") ? "pro" : "driver";
  const [tab, setTab] = React.useState(focus);
  const group = PRICING_GROUPS.find(g => g.k === tab);

  return (
    <>
      <Topbar subtitle={t("TARIFS 2026", "PRICING 2026")} title={t("Des prix alignés sur le marché", "Market-aligned pricing")} search={false}
        actions={
          <div style={{ display: "inline-flex", gap: 2, padding: 3, background: "#fff", border: `1px solid ${C.softLine}`, borderRadius: 999 }}>
            {[["m", t("Mensuel", "Monthly")], ["y", t("Annuel −15%", "Annual −15%")]].map(([k, l]) => (
              <button key={k} onClick={() => setAnnual(k === "y")} style={{ padding: "7px 14px", borderRadius: 999, border: "none", cursor: "pointer", fontSize: 12.5, fontWeight: 600, background: (annual ? "y" : "m") === k ? C.ink : "transparent", color: (annual ? "y" : "m") === k ? "#fff" : C.slate }}>{l}</button>
            ))}
          </div>
        }/>
      <PageBody>
        {/* Group tabs */}
        <div style={{ display: "flex", gap: 8, marginBottom: 22, flexWrap: "wrap" }}>
          {PRICING_GROUPS.map(g => {
            const on = g.k === tab;
            return <span key={g.k} onClick={() => setTab(g.k)} style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "9px 16px", borderRadius: 11, fontSize: 13.5, cursor: "pointer", background: on ? (g.color === "#0B0F1F" ? C.ink : g.color) : "#fff", color: on ? "#fff" : C.ink, border: `1px solid ${on ? "transparent" : C.softLine}`, fontWeight: on ? 600 : 500 }}>{g.g} {g[lang] || g.fr}</span>;
          })}
        </div>

        {/* Plans */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 26 }}>
          {group.plans.map((p, i) => {
            const custom = (p.cta.en || "").includes("Contact");
            const val = annual ? p.price.y : p.price.m;
            return (
              <Card key={i} dark={p.popular} hover style={{ padding: 24, position: "relative", display: "flex", flexDirection: "column", ...(p.popular ? {} : {}) }}>
                {p.popular && <div style={{ position: "absolute", top: 16, right: 16 }}><Pill tone="flame">{t("Populaire", "Popular")}</Pill></div>}
                <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 12 }}>{p.name[lang] || p.name.fr}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginBottom: 6 }}>
                  {val > 0 ? (
                    <><span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 48, lineHeight: 1 }}>{val}</span><span style={{ fontSize: 18 }}>€</span></>
                  ) : (
                    <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 36, lineHeight: 1 }}>{custom ? t("Sur devis", "Custom") : t("Gratuit", "Free")}</span>
                  )}
                </div>
                <div style={{ fontSize: 12.5, color: p.popular ? "#9098B5" : C.slate, marginBottom: 16, minHeight: 32 }}>{p.unit[lang] || p.unit.fr}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 9, flex: 1, marginBottom: 18 }}>
                  {(p.feats[lang] || p.feats.fr).map((f, j) => (
                    <div key={j} style={{ display: "flex", gap: 9, fontSize: 13, alignItems: "flex-start" }}>
                      <span style={{ color: C.signal, flexShrink: 0 }}>✓</span>
                      <span style={{ color: p.popular ? "#E6E9F5" : C.ink, lineHeight: 1.4 }}>{f}</span>
                    </div>
                  ))}
                </div>
                <Button kind={p.popular ? "flame" : "light"} full onClick={() => toast.push(t("Offre sélectionnée — paiement via Wallet GUIDKO.", "Plan selected — pay via GUIDKO Wallet."), "signal")}>{p.cta[lang] || p.cta.fr}</Button>
              </Card>
            );
          })}
        </div>

        {/* Add-ons */}
        <Label style={{ marginBottom: 12 }}>{t("PRODUITS SÉPARÉS & COMMISSIONS", "STANDALONE PRODUCTS & COMMISSIONS")}</Label>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
          {PRICING_ADDONS.map((a, i) => (
            <Card key={i} style={{ padding: 20 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 10 }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: a.color + "22", color: a.color, display: "grid", placeItems: "center", fontSize: 17 }}>{a.g}</div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>{a.name[lang] || a.name.fr}</div>
              </div>
              <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 13, fontWeight: 600, color: a.color, marginBottom: 8 }}>{a.price[lang] || a.price.fr}</div>
              <p style={{ fontSize: 12.5, color: C.slate, lineHeight: 1.5 }}>{a.desc[lang] || a.desc.fr}</p>
            </Card>
          ))}
        </div>

        <div style={{ marginTop: 18, padding: 16, background: C.ink, color: "#fff", borderRadius: 12, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <span style={{ fontSize: 22 }}>▣</span>
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ fontWeight: 600 }}>{t("Tout est prélevé et reçu via le Wallet GUIDKO", "Everything is billed and received via the GUIDKO Wallet")}</div>
            <div style={{ fontSize: 12.5, color: "#9098B5", marginTop: 2 }}>{t("Multi-devises, escrow, retraits bancaires. Un seul solde pour tous tes services.", "Multi-currency, escrow, bank payouts. One balance for all your services.")}</div>
          </div>
          {navigate && <Button kind="flame" onClick={() => navigate(`/${role}/wallet`)}>{t("Voir mon Wallet", "Open my Wallet")} →</Button>}
        </div>
      </PageBody>
    </>
  );
}

window.PricingPage = PricingPage;