/* ClientBase — Features, Pricing, About, Contact, Login pages */

const PageHeader = ({ eyebrow, title, subtitle }) => (
  <section style={{ padding: "80px 0 40px", textAlign: "center" }}>
    <div className="container">
      <div className="eyebrow">{eyebrow}</div>
      <h1 style={{ marginTop: 14, fontSize: "clamp(40px, 4.6vw, 60px)" }}>{title}</h1>
      {subtitle && (
        <p style={{ marginTop: 20, fontSize: 18, maxWidth: 620, marginLeft: "auto", marginRight: "auto" }}>
          {subtitle}
        </p>
      )}
    </div>
  </section>
);

/* ============ FEATURES / GUIDE PAGE — argumentaire de vente interactif ============ */
const GUIDE_MODULES = [
  {
    id: "agenda",
    icon: "calendar",
    name: "Agenda",
    tagline: "Votre semaine, en clair.",
    why: "Fini les posts-it, fini le carnet papier perdu. Vous voyez votre journée en un coup d'œil et vous cochez vos RDV « fait » en un tap — la facture se génère toute seule.",
    tryIt: "Cliquez sur un rendez-vous pour le marquer fait.",
    bullets: [
      "Vue semaine et vue journée mobile pensées pour le toucher",
      "Clic sur une case vide → ajout de RDV en 3 secondes",
      "Un RDV marqué fait = facture créée automatiquement",
      "Pause déjeuner par jour respectée, vacances bloquées",
    ],
  },
  {
    id: "bookings",
    icon: "link",
    name: "Prise de RDV publique",
    tagline: "Vos clients réservent seules, 24 h/24.",
    why: "Votre lien à partager sur Instagram, WhatsApp, carte de visite. Vos clients choisissent leur créneau sans vous appeler pendant une prestation. Vous gagnez du temps et vous ne ratez plus personne.",
    tryIt: "Touchez un créneau — ça se sélectionne en direct.",
    bullets: [
      "Un lien personnalisable : clientbase.fr/?book=votre-slug",
      "Vos horaires, pauses déj' et vacances toujours respectés",
      "Notification dès qu'un client réserve",
      "40 % de RDV pris sans décrocher le téléphone (moyenne constatée)",
    ],
  },
  {
    id: "clients",
    icon: "users",
    name: "Fichier clients",
    tagline: "Tout savoir d'elles, toujours.",
    why: "Préférences, allergies, note du dernier rendez-vous, historique complet. Plus de « c'était quoi sa couleur déjà ? » — et un clic pour lancer un mail ou un appel.",
    tryIt: "Touchez l'icône mail ou téléphone d'un client.",
    bullets: [
      "Fiche détaillée : email, téléphone, notes privées, visites, dépenses",
      "Contact direct en 1 clic (mail / tél)",
      "Les réservations créent/enrichissent automatiquement les fiches",
      "Recherche instantanée par nom ou email",
    ],
  },
  {
    id: "fidelite",
    icon: "gift",
    name: "Fidélité partageable",
    tagline: "Une carte numérique par client.",
    why: "Vous définissez vos règles (10 visites = 1 offerte, par exemple). Chaque client reçoit un lien — elle suit sa progression depuis son téléphone, sans appli à installer.",
    tryIt: "Tapez sur un tampon pour le valider.",
    bullets: [
      "Règles 100 % personnalisables (seuil, récompense)",
      "Lien partageable → votre client voit ses points en direct",
      "La carte s'incrémente automatiquement à chaque RDV fait",
      "Vous voyez d'un regard quelles cartes sont prêtes à récompenser",
    ],
    plan: "Business",
  },
  {
    id: "stats",
    icon: "chart",
    name: "Statistiques détaillées",
    tagline: "Votre activité sans Excel.",
    why: "Savoir combien vous avez fait ce mois, cette semaine, aujourd'hui. Voir vos meilleures prestations. Décider avec des chiffres au lieu du feeling.",
    tryIt: "Survolez (ou touchez) une barre pour voir la valeur.",
    bullets: [
      "Basculer entre jour / semaine / mois en un tap",
      "Chiffre d'affaires, panier moyen, taux no-show",
      "Top prestations classées par rentabilité",
      "Simulateur Objectif + Et si… pour projeter votre mois",
    ],
  },
  {
    id: "factures",
    icon: "invoice",
    name: "Facturation française",
    tagline: "Conformes, automatiques, zéro stress.",
    why: "SIRET, TVA, mentions légales obligatoires, numérotation continue — tout est intégré. Chaque RDV terminé génère une facture valable devant l'administration.",
    tryIt: "Cliquez sur le statut d'une facture pour la basculer payée.",
    bullets: [
      "Conforme à l'article L441-9 du Code de commerce",
      "Franchise TVA (art. 293B) ou TVA applicable — les deux gérés",
      "Numérotation auto F-2026-0001, 0002, 0003…",
      "Vue détail imprimable / exportable",
    ],
    plan: "Business",
  },
  {
    id: "stock",
    icon: "box",
    name: "Stock & alertes",
    tagline: "Ne tombez plus jamais à court.",
    why: "Un produit sous le seuil ? Vous le voyez avant de l'entendre de le client. Ajustez les quantités avec +/- sans ouvrir un tableur.",
    tryIt: "Utilisez les boutons + et − pour ajuster.",
    bullets: [
      "Seuil mini par produit → badge OK / Bas / Critique",
      "Ajustement rapide +/- sur mobile",
      "Prix d'achat stocké pour estimer la valeur du stock",
      "Multi-catégories (bientôt)",
    ],
  },
];

const FeaturesPage = ({ go }) => {
  return (
    <>
      <PageHeader eyebrow="Guide interactif"
        title="Tout ce que vous pouvez faire, à portée de doigt."
        subtitle="Chaque fonctionnalité est testable en direct sur cette page. Essayez avant de vous inscrire — tout ce que vous voyez fonctionne vraiment."/>

      {/* Table of contents — scroll spy basique */}
      <section style={{ padding: "8px 0 36px" }}>
        <div className="container">
          <div style={{
            display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 6,
            maxWidth: 780, margin: "0 auto",
          }}>
            {GUIDE_MODULES.map(m => (
              <a key={m.id} href={`#${m.id}`} style={{
                padding: "6px 14px", fontSize: 13, fontWeight: 520,
                color: "var(--ink-2)", background: "var(--surface)",
                border: "1px solid var(--line)", borderRadius: 999,
                display: "inline-flex", alignItems: "center", gap: 7,
              }}>
                <Icon name={m.icon} size={13} style={{ color: "var(--accent-ink)" }}/>
                {m.name}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Interactive feature sections — mocks alternate left/right */}
      <section style={{ padding: "8px 0 60px" }}>
        <div className="container">
          <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
            {GUIDE_MODULES.map((m) => (
              <GuideSection key={m.id} m={m}/>
            ))}
          </div>
        </div>
      </section>

    </>
  );
};

const GuideSection = ({ m }) => (
  <div id={m.id} style={{
    display: "grid",
    gridTemplateColumns: "1fr 1.15fr",
    gap: 48, alignItems: "center",
    scrollMarginTop: 80,
  }} className="guide-row">
    <div>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
        <div style={{
          width: 38, height: 38, borderRadius: 10,
          background: "var(--accent-soft)", color: "var(--accent-ink)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Icon name={m.icon} size={18}/>
        </div>
        {m.plan && (
          <span style={{
            padding: "3px 10px", fontSize: 10.5, fontWeight: 600,
            background: "var(--sage-soft)", color: "oklch(38% 0.08 160)",
            borderRadius: 999, textTransform: "uppercase", letterSpacing: "0.04em",
          }}>Plan {m.plan}</span>
        )}
      </div>
      <h2 style={{ fontSize: "clamp(24px, 3vw, 34px)", letterSpacing: "-0.025em", marginTop: 14 }}>
        {m.name}
      </h2>
      <div style={{ fontSize: 16, color: "var(--accent-ink)", fontWeight: 520, marginTop: 4 }}>
        {m.tagline}
      </div>
      <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)" }}>
        {m.why}
      </p>
      <ul style={{
        listStyle: "none", padding: 0, margin: "18px 0 0",
        display: "flex", flexDirection: "column", gap: 8,
      }}>
        {m.bullets.map(b => (
          <li key={b} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
            <span style={{
              width: 20, height: 20, borderRadius: 50, flexShrink: 0, marginTop: 1,
              background: "var(--sage-soft)", color: "var(--sage)",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
            }}>
              <Icon name="check" size={12} stroke={2.6}/>
            </span>
            {b}
          </li>
        ))}
      </ul>
    </div>
    <GuideMockFrame mockId={m.id}/>
  </div>
);

/* Phone-like frame wrapping the interactive mini-mocks exported from home-hero */
const GuideMockFrame = ({ mockId }) => (
  <div style={{
    padding: 20,
    background: "linear-gradient(180deg, var(--surface) 0%, var(--bg-alt) 100%)",
    border: "1px solid var(--line)",
    borderRadius: 20,
    boxShadow: "var(--sh-2)",
    position: "relative",
    overflow: "hidden",
  }}>
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      marginBottom: 14, fontSize: 11, color: "var(--ink-4)",
    }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontWeight: 520, textTransform: "uppercase", letterSpacing: "0.06em" }}>
        <span style={{ width: 6, height: 6, borderRadius: 50, background: "var(--accent)" }}/>
        Démo interactive
      </span>
      <span>Touchez pour interagir</span>
    </div>
    {mockId === "stats" ? <GuideStatsMock/> : <FeatureMock id={mockId}/>}
  </div>
);

/* Stats riches : toggle Jour/Semaine/Mois, gros chiffre CA, bar chart interactif, 3 KPIs qui bougent */
const GuideStatsMock = () => {
  const [range, setRange] = React.useState("month");
  const [active, setActive] = React.useState(null);

  const series = React.useMemo(() => {
    const seed = (n) => { const x = Math.sin(n * 6.3) * 10000; return x - Math.floor(x); };
    if (range === "day") {
      return Array.from({ length: 7 }, (_, i) => ({
        label: ["L","M","M","J","V","S","D"][i],
        v: Math.round(180 + seed(i + 3) * 320),
      }));
    }
    if (range === "week") {
      return Array.from({ length: 8 }, (_, i) => ({
        label: `S${35 + i}`,
        v: Math.round(900 + seed(i + 11) * 700),
      }));
    }
    return [
      { label: "Nov", v: 2800 }, { label: "Déc", v: 3100 }, { label: "Jan", v: 3400 },
      { label: "Fév", v: 3200 }, { label: "Mar", v: 3900 }, { label: "Avr", v: 4287 },
    ];
  }, [range]);

  React.useEffect(() => { setActive(series.length - 1); }, [range, series.length]);

  // Safe clamp : active peut être hors bornes pendant un render (useEffect
  // ne s'est pas encore exécuté après un changement de range).
  const safeActive = active != null
    ? Math.max(0, Math.min(active, series.length - 1))
    : series.length - 1;

  const total = series.reduce((s, d) => s + d.v, 0);
  const max = Math.max(...series.map(d => d.v));
  const current = series[safeActive] || { label: "", v: 0 };
  const prev = safeActive > 0 ? (series[safeActive - 1] || current).v : current.v;
  const delta = current.v - prev;
  const deltaPct = prev > 0 ? Math.round((delta / prev) * 100) : 0;
  const avg = Math.round(total / Math.max(1, series.length));
  const rangeLabel = range === "day" ? "jour" : range === "week" ? "semaine" : "mois";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {/* Toggle */}
      <div style={{
        display: "inline-flex", padding: 3, alignSelf: "flex-start",
        background: "var(--bg-alt)", border: "1px solid var(--line)",
        borderRadius: 999, gap: 2,
      }}>
        {[["day","Jour"],["week","Semaine"],["month","Mois"]].map(([k,l]) => (
          <button key={k} onClick={() => setRange(k)} style={{
            padding: "4px 12px", fontSize: 11.5, fontWeight: 520,
            background: range === k ? "var(--surface)" : "transparent",
            color: range === k ? "var(--accent-ink)" : "var(--ink-3)",
            boxShadow: range === k ? "var(--sh-1)" : "none",
            border: "none", borderRadius: 999, cursor: "pointer", fontFamily: "inherit",
            transition: "all .15s",
          }}>{l}</button>
        ))}
      </div>

      {/* Hero number */}
      <div>
        <div style={{ fontSize: 11, color: "var(--ink-4)", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.06em" }}>
          {current.label || "Total"}
        </div>
        <div style={{
          fontFamily: "var(--ff-display)", fontSize: "clamp(32px, 4vw, 42px)",
          fontWeight: 600, letterSpacing: "-0.035em", color: "var(--accent-ink)",
          fontVariantNumeric: "tabular-nums", marginTop: 2, lineHeight: 1,
        }}>
          {current.v.toLocaleString("fr-FR")} €
        </div>
        <div style={{
          marginTop: 4, display: "inline-flex", alignItems: "center", gap: 5,
          fontSize: 12, fontWeight: 520,
          color: delta >= 0 ? "var(--sage)" : "oklch(55% 0.18 25)",
        }}>
          <Icon name="arrowUp" size={11} stroke={2.6}
            style={{ transform: delta < 0 ? "rotate(180deg)" : "none" }}/>
          {delta >= 0 ? "+" : ""}{deltaPct}% vs {rangeLabel} précédent
        </div>
      </div>

      {/* Chart */}
      <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 100, padding: "4px 0" }}>
        {series.map((d, i) => {
          const isActive = safeActive === i;
          const h = Math.max(8, (d.v / max) * 90);
          return (
            <button key={i} onClick={() => setActive(i)}
              style={{
                flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 5,
                background: "transparent", border: "none", padding: 0, cursor: "pointer", fontFamily: "inherit",
              }}>
              <div style={{
                width: "100%", height: h,
                background: isActive
                  ? "linear-gradient(to top, var(--accent) 0%, oklch(65% 0.2 288) 100%)"
                  : "var(--accent-soft-2)",
                borderRadius: 5,
                transition: "background .2s, height .25s cubic-bezier(0.22, 1, 0.36, 1)",
                boxShadow: isActive ? "0 4px 10px -4px var(--accent)" : "none",
              }}/>
              <div style={{
                fontSize: 10, fontWeight: isActive ? 600 : 500,
                color: isActive ? "var(--accent-ink)" : "var(--ink-4)",
              }}>{d.label}</div>
            </button>
          );
        })}
      </div>

      {/* 3 KPIs that move with the slider */}
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8,
        paddingTop: 10, borderTop: "1px solid var(--line)",
      }}>
        {[
          { l: "Total", v: `${total.toLocaleString("fr-FR")} €`, c: "violet" },
          { l: "Moyenne", v: `${avg.toLocaleString("fr-FR")} €`, c: "sage" },
          { l: "Meilleur", v: `${max.toLocaleString("fr-FR")} €`, c: "accent" },
        ].map((k, i) => (
          <div key={i} style={{
            padding: "8px 10px", background: "var(--surface)",
            border: "1px solid var(--line)", borderRadius: 10,
          }}>
            <div style={{ fontSize: 10, color: "var(--ink-4)", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.04em" }}>{k.l}</div>
            <div style={{
              fontFamily: "var(--ff-display)", fontSize: 15, fontWeight: 600,
              letterSpacing: "-0.02em", marginTop: 2, fontVariantNumeric: "tabular-nums",
            }}>{k.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ============ PRICING PAGE ============ */
const PricingPage = ({ go }) => {
  const tiers = [
    {
      name: "Découverte", price: 0,
      tagline: "Pour tester tranquillement",
      features: [
        ["check", "Agenda personnel"],
        ["check", "Fiches clients (jusqu'à 20)"],
        ["check", "Suivi du stock"],
        ["check", "Support client"],
        [null, "Page publique de réservation"],
        [null, "Cartes de fidélité"],
        [null, "Facturation"],
        [null, "Statistiques détaillées"],
      ],
      cta: "Commencer gratuitement", ctaVariant: "ghost",
    },
    {
      name: "Pro", price: 9.99,
      tagline: "Le cœur de l'activité",
      featured: true,
      features: [
        ["check", "Agenda personnel"],
        ["check", "Fiches clients (jusqu'à 50)"],
        ["check", "Page publique de réservation"],
        ["check", "Facturation conforme (jusqu'à 100 / mois)"],
        ["check", "Statistiques détaillées"],
        ["check", "Simulateurs Objectif & Et si…"],
        ["check", "Support client"],
        [null, "Suivi du stock"],
        [null, "Cartes de fidélité"],
      ],
      cta: "Passer en Pro", ctaVariant: "accent",
    },
    {
      name: "Business", price: 19.99,
      tagline: "Pour les équipes ambitieuses",
      betaFree: true,
      features: [
        ["check", "Clientes illimitées"],
        ["check", "Factures illimitées, conformes françaises"],
        ["check", "Page publique de réservation"],
        ["check", "Cartes de fidélité partageables"],
        ["check", "Suivi du stock + alertes"],
        ["check", "Statistiques détaillées (jour/semaine/mois)"],
        ["check", "Support client prioritaire"],
      ],
      cta: "Choisir Business", ctaVariant: "primary",
    },
  ];

  return (
    <>
      <PageHeader eyebrow="Tarifs"
        title="Simple, prévisible, sans surprise."
        subtitle="Voici les tarifs prévus pour la sortie officielle. Pendant la bêta, tout est gratuit — vous ne payerez rien tant qu'on n'est pas prêts."/>

      {/* Mini-pills de confiance — directement sous le sous-titre */}
      <TrustPills/>

      <section style={{ padding: "16px 0 60px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="price-grid">
            {tiers.map(t => <PlanCard key={t.name} t={t} go={go}/>)}
          </div>

          {/* Comparison — table sur desktop, cards empilées sur mobile */}
          <PricingCompare/>
        </div>
      </section>
    </>
  );
};

const TRUST_ITEMS = [
  { icon: "🇫🇷", t: "Hébergé en France" },
  { icon: "🔒", t: "RGPD & chiffré" },
  { icon: "🪪", t: "Vos données vous appartiennent" },
  { icon: "🤝", t: "Sans engagement" },
];

const TrustPills = () => (
  <div className="container" style={{ marginBottom: 16 }}>
    <div style={{
      display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 6,
    }}>
      {TRUST_ITEMS.map((it, i) => (
        <span key={i} style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          padding: "5px 11px",
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: 999, fontSize: 12.5, fontWeight: 500, color: "var(--ink-2)",
        }}>
          <span style={{ fontSize: 13, lineHeight: 1 }}>{it.icon}</span>
          {it.t}
        </span>
      ))}
    </div>
  </div>
);

const FAQ_GROUPS = [
  {
    name: "Tarifs & bêta",
    items: [
      ["Quand sera lancée la version payante ?",
       "Pas avant qu'on soit certains que ClientBase remplace vraiment vos outils actuels. Probablement courant 2026 — on vous préviendra plusieurs semaines à l'avance."],
      ["Que se passe-t-il à la fin de la bêta ?",
       "Vous gardez votre compte et toutes vos données. Vous choisissez la formule qui vous va, ou vous exportez tout en CSV si vous préférez partir."],
      ["Y a-t-il une commission par RDV ?",
       "Non, jamais. Contrairement à Planity ou Treatwell, aucune commission n'est prise sur vos prestations. Vous payez un abonnement fixe, point."],
      ["Comment je résilie ?",
       "Depuis votre espace pro, en 2 clics. Pas d'email à envoyer, pas de motif à donner. Vos données restent téléchargeables 30 jours."],
    ],
  },
  {
    name: "Données & sécurité",
    items: [
      ["Mes données sont-elles à moi ?",
       "Oui. Vous pouvez exporter l'intégralité de votre fichier client + l'historique des RDV en CSV à tout moment, en 1 clic depuis les paramètres."],
      ["Où sont stockées mes données ?",
       "Sur des serveurs OVH situés en France. Aucune donnée ne quitte l'Union européenne, conformément au RGPD."],
      ["Comment sont protégés les mots de passe ?",
       "Hachés avec bcrypt côté serveur. Personne — pas même nous — ne peut lire votre mot de passe en clair."],
      ["Que se passe-t-il si vous fermez ClientBase ?",
       "Vous serez prévenu·e plusieurs mois à l'avance, et vous pourrez exporter toutes vos données avant la fermeture. Pas de mauvaise surprise."],
    ],
  },
  {
    name: "Fonctionnement",
    items: [
      ["Mes clients ont-elles besoin d'un compte ?",
       "Non. Elles cliquent sur votre lien public, choisissent une prestation et un créneau, c'est tout. Aucun compte à créer pour réserver."],
      ["Faut-il télécharger une appli ?",
       "Non. ClientBase fonctionne directement dans le navigateur, sur ordinateur et mobile. Vous pouvez aussi l'« installer » comme une appli depuis Safari/Chrome."],
      ["Et si je n'ai pas de connexion internet ?",
       "Les données sont synchronisées dès que vous retrouvez du réseau. Vous pouvez consulter vos RDV même hors-ligne."],
      ["Combien de temps pour configurer mon compte ?",
       "Environ 10 minutes : créer le compte, ajouter vos prestations, vos horaires. Votre lien de RDV public est prêt aussitôt."],
    ],
  },
];

const FaqPage = ({ go }) => {
  const [open, setOpen] = React.useState("0-0");
  const toggle = (k) => setOpen(open === k ? null : k);
  return (
    <>
      <PageHeader eyebrow="Questions fréquentes"
        title="Tout ce qu'on vous a déjà demandé."
        subtitle="Si vous avez une autre question, écrivez-nous — on répond vite."/>

      <section style={{ padding: "8px 0 60px" }}>
        <div className="container" style={{ maxWidth: 760 }}>
          {FAQ_GROUPS.map((g, gi) => (
            <div key={gi} style={{ marginBottom: 28 }}>
              <h2 style={{
                fontSize: "clamp(18px, 2.2vw, 22px)", letterSpacing: "-0.02em",
                marginBottom: 10, color: "var(--ink)",
              }}>
                {g.name}
              </h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {g.items.map(([q, a], qi) => {
                  const k = `${gi}-${qi}`;
                  const isOpen = open === k;
                  return (
                    <div key={qi} style={{
                      background: "var(--surface)", border: "1px solid var(--line)",
                      borderRadius: 11, overflow: "hidden",
                    }}>
                      <button onClick={() => toggle(k)} style={{
                        width: "100%", textAlign: "left",
                        padding: "13px 16px", background: "transparent", border: "none",
                        cursor: "pointer", fontFamily: "inherit",
                        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10,
                        fontSize: 14.5, fontWeight: 560, color: "var(--ink)",
                      }}>
                        <span>{q}</span>
                        <span style={{
                          fontSize: 18, color: "var(--ink-4)", flexShrink: 0,
                          transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                          transition: "transform .25s",
                        }}>+</span>
                      </button>
                      {isOpen && (
                        <div style={{
                          padding: "0 16px 14px", fontSize: 13.5,
                          color: "var(--ink-3)", lineHeight: 1.55,
                        }}>
                          {a}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          ))}

          <div style={{
            marginTop: 32, padding: "18px 22px", textAlign: "center",
            background: "var(--accent-soft)", border: "1px solid var(--accent-soft-2)",
            borderRadius: 14,
          }}>
            <div style={{ fontSize: 14.5, color: "var(--accent-ink)", fontWeight: 560, marginBottom: 8 }}>
              Une autre question ?
            </div>
            <button onClick={() => go("contact")} className="btn btn-accent btn-sm">
              Nous écrire →
            </button>
          </div>
        </div>
      </section>
    </>
  );
};

const CONTACT_FAQ = [
  ["Puis-je changer de formule ?", "Oui, à tout moment. Le changement est pris en compte au prorata sur votre prochaine facture."],
  ["Y a-t-il un engagement ?", "Aucun. Vous pouvez annuler votre abonnement quand vous voulez, en un clic depuis votre compte."],
  ["Mes données sont-elles en sécurité ?", "Oui. ClientBase est hébergé en France, conforme RGPD. Vos données sont isolées par compte (Row-Level Security Postgres) et exportables à tout moment."],
  ["Puis-je importer mes clients existantes ?", "Oui, depuis un fichier Excel ou CSV. Notre équipe peut même le faire pour vous gratuitement pendant la bêta."],
  ["Le plan gratuit est-il vraiment gratuit ?", "Oui. Pas de carte bancaire, pas de limite de temps. Parfait pour démarrer ou pour les très petites activités."],
  ["Je suis en bêta, combien ça va me coûter ?", "Zéro. Le plan Business est offert pendant toute la durée de la bêta."],
];

const th = {
  textAlign: "left", padding: "12px 16px",
  fontSize: 13, fontWeight: 520, color: "var(--ink-2)",
  borderBottom: "1px solid var(--line-strong)",
};
const td = {
  padding: "14px 16px", color: "var(--ink-2)",
  fontSize: 14, fontVariantNumeric: "tabular-nums",
};

const COMPARE_ROWS = [
  ["Clientes",                        "20",        "50",        "∞"],
  ["Factures / mois",                 "—",         "100",       "∞"],
  ["Agenda personnel",                "✓",         "✓",         "✓"],
  ["Fiches clients + contact 1-clic","✓",         "✓",         "✓"],
  ["Suivi du stock",                  "✓",         "—",         "✓"],
  ["Page publique de réservation",    "—",         "✓",         "✓"],
  ["Statistiques détaillées",         "—",         "✓",         "✓"],
  ["Cartes de fidélité partageables", "—",         "—",         "✓"],
  ["Facturation conforme française",  "—",         "✓",         "✓"],
  ["Support client",                  "Standard",  "Standard",  "Prioritaire"],
];

/* À venir — seulement les features confirmées, avec leur(s) plan(s) cible(s). */
const UPCOMING_FEATURES = [
  {
    icon: "bell",
    title: "Rappels SMS automatiques",
    plans: ["Business"],
    desc: "Un SMS envoyé automatiquement 24 h avant chaque RDV. Réduit le no-show de 7 % à 2 %.",
  },
  {
    icon: "sparkle",
    title: "App mobile iOS / Android",
    plans: ["Découverte", "Pro", "Business"],
    desc: "Version native dans votre dock. Même expérience, plus rapide, notifications push intégrées.",
  },
];

const PricingCompare = () => {
  const isMobile = useIsMobile(760);
  return (
    <div style={{
      marginTop: 72, padding: "32px 28px", position: "relative",
      background: "var(--surface)",
      border: "1px solid var(--line)",
      borderRadius: 20,
      boxShadow: "var(--sh-1)",
    }}>
      {/* Liseré accent en haut pour ancrer sans alourdir */}
      <div aria-hidden style={{
        position: "absolute", top: 0, left: 20, right: 20, height: 3,
        background: "linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%)",
        borderRadius: 3,
      }}/>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "3px 11px 3px 9px", background: "var(--accent-soft)", color: "var(--accent-ink)", border: "1px solid var(--accent-soft-2)", borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 14 }}>
        <Icon name="chart" size={11}/>
        Comparaison
      </div>
      <h2 style={{ fontSize: "clamp(24px, 3vw, 30px)", marginBottom: 8, letterSpacing: "-0.025em" }}>Comparez en détail</h2>
      <p style={{ marginBottom: 28, color: "var(--ink-3)" }}>Toutes les fonctionnalités, côte à côte.</p>

      {!isMobile ? (
        /* ===== Desktop — table classique ===== */
        <div style={{ overflow: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14, minWidth: 640 }}>
            <thead>
              <tr>
                <th style={th}></th>
                <th style={th}>Découverte</th>
                <th style={{ ...th, background: "var(--accent-soft)", color: "var(--accent-ink)" }}>Pro</th>
                <th style={th}>Business</th>
              </tr>
            </thead>
            <tbody>
              {COMPARE_ROWS.map((row, i) => (
                <tr key={i} style={{ borderTop: "1px solid var(--line)" }}>
                  <td style={{ ...td, fontWeight: 520, color: "var(--ink)" }}>{row[0]}</td>
                  <td style={td}>{row[1]}</td>
                  <td style={{ ...td, background: "color-mix(in oklab, var(--accent-soft) 60%, transparent)" }}>{row[2]}</td>
                  <td style={td}>{row[3]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        /* ===== Mobile — sélecteur de plan + liste simple ===== */
        <MobileCompare/>
      )}
    </div>
  );
};

/* Carte plan — contenu plié/déplié sur mobile. Sur desktop tout est visible. */
const PlanCard = ({ t, go }) => {
  const isMobile = useIsMobile(760);
  const [open, setOpen] = React.useState(false);
  const isFeatured = t.featured;
  const priceLabel = t.price === 0 ? "0 €" : `${t.price.toString().replace('.', ',')} €`;

  // 2 features clés (les plus parlantes) toujours visibles sur mobile fermé
  const keyFeatures = t.features.filter(f => f[0] === "check").slice(0, 2);
  const showList = !isMobile || open;

  return (
    <div className="card" style={{
      padding: 24, position: "relative",
      border: isFeatured ? "1px solid var(--accent)" : "1px solid var(--line)",
      boxShadow: isFeatured ? "0 20px 44px -24px var(--accent)" : "none",
    }}>
      {isFeatured && (
        <div style={{
          position: "absolute", top: -12, left: 24,
          padding: "4px 10px",
          background: "var(--accent)", color: "white",
          fontSize: 11.5, fontWeight: 600,
          borderRadius: 999, letterSpacing: "0.02em",
        }}>LE PLUS POPULAIRE</div>
      )}
      <h3 style={{ fontSize: 22 }}>{t.name}</h3>
      <p style={{ fontSize: 13.5, color: "var(--ink-3)", marginTop: 4 }}>{t.tagline}</p>
      <div style={{ marginTop: 18, display: "flex", alignItems: "baseline", gap: 6, flexWrap: "wrap" }}>
        <span style={{ fontFamily: "var(--ff-display)", fontSize: 44, fontWeight: 580, letterSpacing: "-0.035em" }}>
          {priceLabel}
        </span>
        <span style={{ fontSize: 13, color: "var(--ink-4)" }}>/ mois</span>
      </div>
      {t.betaFree && (
        <div style={{
          marginTop: 10, padding: "7px 10px",
          background: "var(--sage-soft)", border: "1px solid oklch(88% 0.03 160)",
          color: "oklch(38% 0.08 160)",
          borderRadius: 8, fontSize: 12.5, fontWeight: 520,
          display: "inline-flex", alignItems: "center", gap: 6,
        }}>
          <Icon name="sparkle" size={12}/>
          Gratuit pendant toute la bêta
        </div>
      )}
      <button className={`btn btn-${t.ctaVariant} btn-lg`} style={{ width: "100%", marginTop: 18 }} onClick={() => go("signup")}>
        {t.cta}
      </button>

      {/* Mobile fermé : aperçu 2 features + "Voir tout" */}
      {isMobile && !open && keyFeatures.length > 0 && (
        <>
          <div style={{ height: 1, background: "var(--line)", margin: "18px 0 12px" }}/>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
            {keyFeatures.map(([, f], i) => (
              <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, lineHeight: 1.45, color: "var(--ink-2)" }}>
                <Icon name="check" size={14} stroke={2.5} style={{ color: "var(--sage)", flexShrink: 0, marginTop: 3 }}/>
                <span>{f}</span>
              </li>
            ))}
          </ul>
          <button onClick={() => setOpen(true)} style={{
            marginTop: 12, width: "100%", padding: "9px 12px",
            background: "transparent", border: "1px solid var(--line)",
            borderRadius: 10, cursor: "pointer", fontFamily: "inherit",
            fontSize: 13, fontWeight: 520, color: "var(--ink-2)",
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6,
          }}>
            Voir toutes les fonctionnalités <Icon name="arrow" size={13} style={{ transform: "rotate(90deg)" }}/>
          </button>
        </>
      )}

      {/* Desktop OU mobile ouvert : liste complète */}
      {showList && (
        <>
          <div style={{ height: 1, background: "var(--line)", margin: "20px 0" }}/>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 9 }}>
            {t.features.map(([ic, f], i) => (
              <li key={i} style={{
                display: "flex", gap: 10, alignItems: "flex-start",
                fontSize: 13.5, lineHeight: 1.45,
                color: ic === "check" ? "var(--ink-2)" : ic === "soon" ? "var(--ink-3)" : "var(--ink-4)",
              }}>
                {ic === "check" && <Icon name="check" size={14} stroke={2.5} style={{ color: "var(--sage)", flexShrink: 0, marginTop: 3 }}/>}
                {ic === "soon"  && <Icon name="clock" size={13} stroke={2.2} style={{ color: "var(--accent-ink)", flexShrink: 0, marginTop: 3 }}/>}
                {!ic && <span style={{ width: 14, flexShrink: 0, textAlign: "center", color: "var(--ink-4)", marginTop: 1 }}>—</span>}
                <span>
                  {f}
                  {ic === "soon" && (
                    <span style={{
                      marginLeft: 6, padding: "1px 7px",
                      background: "var(--accent-soft)", color: "var(--accent-ink)",
                      borderRadius: 6, fontSize: 10.5, fontWeight: 600,
                    }}>Bientôt</span>
                  )}
                </span>
              </li>
            ))}
          </ul>
          {isMobile && open && (
            <button onClick={() => setOpen(false)} style={{
              marginTop: 14, width: "100%", padding: "8px 12px",
              background: "transparent", border: "none",
              borderRadius: 8, cursor: "pointer", fontFamily: "inherit",
              fontSize: 12.5, color: "var(--ink-4)",
            }}>
              Réduire ↑
            </button>
          )}
        </>
      )}
    </div>
  );
};

const PLAN_BADGE_TONE = {
  "Découverte": { bg: "var(--bg-alt)",      ink: "var(--ink-2)"     },
  "Pro":        { bg: "var(--accent-soft)", ink: "var(--accent-ink)" },
  "Business":   { bg: "var(--sage-soft)",   ink: "oklch(38% 0.08 160)" },
};

const UpcomingFeatures = ({ go }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      marginTop: 32,
      background: "var(--bg-alt)",
      border: "1px solid var(--line)",
      borderRadius: 20,
      overflow: "hidden",
      transition: "box-shadow .3s ease",
      boxShadow: open ? "var(--sh-1)" : "none",
    }}>
      {/* En-tête cliquable */}
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", padding: "20px 24px",
        display: "flex", alignItems: "center", gap: 14,
        background: "transparent", border: "none", cursor: "pointer",
        fontFamily: "inherit", textAlign: "left",
      }}>
        <div style={{
          width: 42, height: 42, borderRadius: 12, flexShrink: 0,
          background: "var(--accent-soft)", color: "var(--accent-ink)",
          display: "flex", alignItems: "center", justifyContent: "center",
          border: "1px solid var(--accent-soft-2)",
        }}>
          <Icon name="sparkle" size={19}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--accent-ink)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
            Nouveautés
          </div>
          <div style={{ fontSize: 17, fontWeight: 580, letterSpacing: "-0.015em", color: "var(--ink)", marginTop: 2 }}>
            Ce qui arrive bientôt
          </div>
          <div style={{ fontSize: 12.5, color: "var(--ink-4)", marginTop: 2 }}>
            {open
              ? `${UPCOMING_FEATURES.length} feature${UPCOMING_FEATURES.length > 1 ? "s" : ""} en chantier`
              : "Touchez pour voir la roadmap"}
          </div>
        </div>
        <div style={{
          width: 32, height: 32, borderRadius: 10, flexShrink: 0,
          background: "var(--surface)", border: "1px solid var(--line)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--ink-3)",
          transition: "transform .3s cubic-bezier(0.22, 1, 0.36, 1), background .2s, color .2s",
          transform: open ? "rotate(45deg)" : "rotate(0)",
        }}>
          <Icon name="plus" size={15}/>
        </div>
      </button>

      {/* Contenu déplié */}
      <div style={{
        display: "grid",
        gridTemplateRows: open ? "1fr" : "0fr",
        opacity: open ? 1 : 0,
        transition: "grid-template-rows .4s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease",
      }}>
        <div style={{ overflow: "hidden" }}>
          <div style={{ padding: "0 24px 24px" }}>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12,
            }} className="upcoming-grid">
              {UPCOMING_FEATURES.map(f => (
                <div key={f.title} style={{
                  padding: 18,
                  background: "var(--surface)", border: "1px solid var(--line)",
                  borderRadius: 14,
                  display: "flex", gap: 12,
                }}>
                  <div style={{
                    width: 34, height: 34, borderRadius: 10, flexShrink: 0,
                    background: "var(--accent-soft)", color: "var(--accent-ink)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}>
                    <Icon name={f.icon} size={15}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <h3 style={{ fontSize: 14.5, fontWeight: 580, letterSpacing: "-0.01em" }}>{f.title}</h3>
                    <p style={{ fontSize: 12.5, color: "var(--ink-3)", lineHeight: 1.5, margin: "4px 0 0" }}>
                      {f.desc}
                    </p>
                    <div style={{ marginTop: 8, display: "flex", gap: 4, flexWrap: "wrap" }}>
                      {f.plans.map(p => {
                        const t = PLAN_BADGE_TONE[p] || PLAN_BADGE_TONE["Découverte"];
                        return (
                          <span key={p} style={{
                            padding: "2px 8px", fontSize: 10.5, fontWeight: 600,
                            background: t.bg, color: t.ink,
                            borderRadius: 999,
                          }}>{p}</span>
                        );
                      })}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Encart idée — inline discret */}
            <div style={{
              marginTop: 14, padding: "14px 16px",
              background: "var(--surface)", border: "1px dashed var(--line-strong)",
              borderRadius: 12,
              display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
            }}>
              <div style={{
                width: 34, height: 34, borderRadius: 10, flexShrink: 0,
                background: "var(--accent)", color: "white",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name="heart" size={15}/>
              </div>
              <div style={{ flex: 1, minWidth: 180 }}>
                <div style={{ fontSize: 13.5, fontWeight: 560, color: "var(--ink)" }}>
                  Votre idée n'y est pas&nbsp;?
                </div>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>
                  Chaque message est lu. Les bonnes suggestions entrent dans la roadmap.
                </div>
              </div>
              <button onClick={() => go("contact")} className="btn btn-sm btn-accent" style={{ flexShrink: 0 }}>
                Nous contacter <Icon name="arrow" size={13}/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* Toutes les fonctionnalités côte à côte — libellés explicites pour mobile. */
const MOBILE_COMPARE_ROWS = [
  ["Clientes",                        "20",       "50",       "Illimité"],
  ["Factures / mois",                 "—",        "100",      "Illimité"],
  ["Agenda personnel",                "Inclus",   "Inclus",   "Inclus"],
  ["Fiches clients + contact 1-clic","Incluses", "Incluses", "Incluses"],
  ["Page publique de réservation",    "—",        "Incluse",  "Incluse"],
  ["Cartes de fidélité partageables", "—",        "—",        "Incluses"],
  ["Facturation conforme française",  "—",        "Incluse",  "Incluse"],
  ["Statistiques détaillées",         "—",        "Incluses", "Incluses"],
  ["Suivi du stock + alertes",        "Inclus",   "—",        "Inclus"],
  ["Simulateurs Objectif & Et si…",   "—",        "Inclus",   "Inclus"],
  ["Support client",                  "Standard", "Standard", "Prioritaire"],
];

const MobileCompare = () => {
  const [plan, setPlan] = React.useState(1);
  const plans = [
    { key: 0, name: "Découverte", accent: false },
    { key: 1, name: "Pro",        accent: true  },
    { key: 2, name: "Business",   accent: false },
  ];
  const current = plans[plan];

  const rowColor = (val) => {
    if (val === "—") return "var(--ink-4)";
    if (/incluse?s?/i.test(val)) return "var(--sage)";
    return "var(--ink)";
  };
  const rowBg = (val) => {
    if (val === "—") return "transparent";
    if (/incluse?s?/i.test(val)) return "var(--sage-soft)";
    return current.accent ? "var(--accent-soft)" : "var(--bg-alt)";
  };

  return (
    <div style={{ maxWidth: 480, margin: "0 auto" }}>
      {/* Sélecteur de plan */}
      <div style={{
        display: "flex", padding: 3, gap: 2,
        background: "var(--surface)", border: "1px solid var(--line)",
        borderRadius: 999,
      }}>
        {plans.map(p => (
          <button key={p.key} onClick={() => setPlan(p.key)} style={{
            flex: 1, padding: "9px 6px", fontSize: 13, fontWeight: 560,
            background: plan === p.key ? (p.accent ? "var(--accent)" : "var(--ink)") : "transparent",
            color: plan === p.key ? "white" : "var(--ink-3)",
            border: "none", borderRadius: 999, cursor: "pointer", fontFamily: "inherit",
            transition: "all .18s",
          }}>{p.name}</button>
        ))}
      </div>

      {/* Liste simple */}
      <div style={{
        marginTop: 12, background: "var(--surface)",
        border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden",
      }}>
        {MOBILE_COMPARE_ROWS.map((row, i) => {
          const val = row[plan + 1];
          const isIncluded = /incluse?s?/i.test(val);
          const isExcluded = val === "—";
          return (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "14px 16px",
              borderBottom: i < MOBILE_COMPARE_ROWS.length - 1 ? "1px solid var(--line)" : "none",
              fontSize: 14,
            }}>
              <span style={{ flex: 1, color: isExcluded ? "var(--ink-4)" : "var(--ink)", fontWeight: 500 }}>
                {row[0]}
              </span>
              <span style={{
                padding: "4px 10px", borderRadius: 999,
                fontSize: 12, fontWeight: 600,
                background: rowBg(val),
                color: rowColor(val),
                display: "inline-flex", alignItems: "center", gap: 5,
                fontVariantNumeric: "tabular-nums", flexShrink: 0,
              }}>
                {isIncluded && <Icon name="check" size={11} stroke={2.8}/>}
                {isExcluded ? "Non inclus" : val}
              </span>
            </div>
          );
        })}
      </div>

      <div style={{
        marginTop: 10, fontSize: 12, color: "var(--ink-4)",
        textAlign: "center", fontStyle: "italic",
      }}>
        Changez de plan en haut pour comparer
      </div>
    </div>
  );
};

Object.assign(window, { FeaturesPage, PricingPage, FaqPage, PageHeader, CONTACT_FAQ });