/* 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 ============ */
// Chaque feature reçoit une "tone", utilisée dans GuideSection pour colorier
// l'icône, le tagline et les bullets. Le titre H2 et le corps restent neutres
// (noir/ink) pour la lisibilité. La distribution répartit les couleurs sans
// jamais avoir 2 modules adjacents de la même teinte.
const GUIDE_MODULES = [
  {
    id: "agenda",
    icon: "calendar",
    tone: "accent",  // indigo (couleur principale, sur l'agenda c'est cohérent)
    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",
    tone: "sage",
    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",
    tone: "rose",
    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",
    tone: "accent",
    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: "Pro",
  },
  {
    id: "stats",
    icon: "chart",
    tone: "sage",  // sage (au lieu d'ambre, trop proche de stock orange)
    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",
    tone: "rose",
    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: "Pro",
  },
  {
    id: "stock",
    icon: "box",
    tone: "accent",
    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 => {
              const tone = TONE_VARS[m.tone] || TONE_VARS.accent;
              return (
                <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: tone.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, i) => (
              <GuideSection key={m.id} m={m} flip={i % 2 === 1}/>
            ))}
          </div>
        </div>
      </section>

    </>
  );
};

// Palette vitrine canonique, 3 couleurs uniquement.
// Toute "tone" inconnue retombe sur l'accent (indigo) via le `||` des callers.
const TONE_VARS = {
  accent: { bg: "var(--accent-soft)", ink: "var(--accent-ink)", solid: "var(--accent)" },
  rose:   { bg: "var(--rose-soft)",   ink: "var(--rose-ink)",   solid: "var(--rose)"   },
  sage:   { bg: "var(--sage-soft)",   ink: "var(--sage-ink)",   solid: "var(--sage)"   },
};

const GuideSection = ({ m, flip = false }) => {
  const tone = TONE_VARS[m.tone] || TONE_VARS.accent;
  // En alternance : texte à gauche/démo à droite, puis démo à gauche/texte à
  // droite (et ainsi de suite). Casse le rythme monotone du guide.
  // En mobile, la grille tombe en 1 colonne via .guide-row CSS, on garde
  // l'ordre naturel (texte avant démo) pour la lisibilité narrative.
  return (
    <div id={m.id} style={{
      display: "grid",
      gridTemplateColumns: flip ? "1.15fr 1fr" : "1fr 1.15fr",
      gap: 48, alignItems: "center",
      scrollMarginTop: 80,
    }} className="guide-row">
      <div style={{ order: flip ? 2 : 1 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10,
            background: tone.bg, color: tone.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: tone.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: tone.bg, color: tone.solid,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name="check" size={12} stroke={2.6}/>
              </span>
              {b}
            </li>
          ))}
        </ul>
      </div>
      <div style={{ order: flip ? 1 : 2 }}>
        <GuideMockFrame mockId={m.id}/>
      </div>
    </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",
    // Toutes les démos ont la même hauteur visuelle (les mocks plus
    // courts respirent au lieu d'avoir l'air rabougri). Flex column pour
    // centrer le contenu verticalement.
    minHeight: 380,
    display: "flex", flexDirection: "column",
  }}>
    <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>
    <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
      {mockId === "stats" ? <GuideStatsMock/> : <FeatureMock id={mockId}/>}
    </div>
  </div>
);

/* Stats riches, bar chart cliquable + KPIs qui changent selon la sélection.
   Refondu pour être clairement visible et interactif (palette sage cohérente
   avec la tone du module Stats). */
const GuideStatsMock = () => {
  const SOLID = "var(--sage)";
  const INK   = "oklch(35% 0.10 160)";
  const SOFT  = "var(--sage-soft)";

  // 6 mois de données, pic visible sur Avril (mois actuel)
  const series = [
    { 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 },
  ];
  const [active, setActive] = React.useState(series.length - 1);
  const safe = Math.max(0, Math.min(active, series.length - 1));
  const max = Math.max(...series.map(d => d.v));
  const total = series.reduce((s, d) => s + d.v, 0);
  const avg = Math.round(total / series.length);
  const current = series[safe];
  const prev = safe > 0 ? series[safe - 1].v : current.v;
  const deltaPct = prev > 0 ? Math.round(((current.v - prev) / prev) * 100) : 0;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {/* Header : chiffre principal + variation */}
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
        <div>
          <div style={{ fontSize: 11, color: "var(--ink-4)", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.06em" }}>
            {current.label} 2026
          </div>
          <div style={{
            fontFamily: "var(--ff-display)", fontSize: "clamp(32px, 4vw, 40px)",
            fontWeight: 600, letterSpacing: "-0.03em", color: INK,
            fontVariantNumeric: "tabular-nums", marginTop: 2, lineHeight: 1,
          }}>
            {current.v.toLocaleString("fr-FR")} €
          </div>
        </div>
        <span style={{
          padding: "4px 10px",
          background: deltaPct >= 0 ? SOFT : "oklch(96% 0.04 25)",
          color: deltaPct >= 0 ? INK : "oklch(45% 0.18 25)",
          borderRadius: 999, fontSize: 12, fontWeight: 600,
          fontVariantNumeric: "tabular-nums",
        }}>
          {deltaPct >= 0 ? "+" : ""}{deltaPct} % vs mois précédent
        </span>
      </div>

      {/* Bar chart, cliquez pour explorer chaque mois */}
      <div>
        <div style={{
          fontSize: 11, color: "var(--ink-4)", marginBottom: 8,
          textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 540,
        }}>
          ↓ Touchez un mois pour le sélectionner
        </div>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 110 }}>
          {series.map((d, i) => {
            const isActive = safe === i;
            const h = Math.max(14, (d.v / max) * 100);
            return (
              <button key={i} onClick={() => setActive(i)}
                style={{
                  flex: 1, display: "flex", flexDirection: "column",
                  alignItems: "center", gap: 6,
                  background: "transparent", border: "none", padding: 0,
                  cursor: "pointer", fontFamily: "inherit",
                }}>
                <div style={{
                  width: "100%", height: `${h}%`,
                  background: isActive ? SOLID : `color-mix(in oklab, ${SOLID} 28%, var(--bg))`,
                  borderRadius: "6px 6px 0 0",
                  transition: "background .2s ease, transform .2s ease",
                  boxShadow: isActive ? `0 6px 14px -6px ${SOLID}` : "none",
                  transform: isActive ? "scaleY(1.02)" : "scaleY(1)",
                  transformOrigin: "bottom",
                }}/>
                <span style={{
                  fontSize: 11, fontWeight: isActive ? 600 : 500,
                  color: isActive ? INK : "var(--ink-4)",
                  transition: "color .15s ease",
                }}>{d.label}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* 3 KPIs synthétiques */}
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8,
        paddingTop: 12, borderTop: "1px solid var(--line)",
      }}>
        {[
          { l: "Total 6 mois",    v: `${total.toLocaleString("fr-FR")} €` },
          { l: "Moyenne / mois",  v: `${avg.toLocaleString("fr-FR")} €`   },
          { l: "Meilleur mois",   v: `${max.toLocaleString("fr-FR")} €`   },
        ].map((k, i) => (
          <div key={i} style={{
            padding: "10px 12px", background: SOFT,
            border: `1px solid color-mix(in oklab, ${SOLID} 30%, transparent)`,
            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: 3, color: INK,
              fontVariantNumeric: "tabular-nums",
            }}>{k.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ============ PRICING PAGE ============ */
const PricingPage = ({ go }) => {
  // Gratuit : présenté en haut, au centre. Les 3 payants en dessous,
  // la formule du milieu (Pro 19,99) mise en avant comme la plus avantageuse.
  const freeTier = {
    name: "Découverte", price: 0,
    tagline: "Pour démarrer",
    tone: "accent",
    barColor: "oklch(63% 0.17 280)",
    betaFree: true,
    features: [
      ["check", "Agenda + fiches clients (jusqu'à 20)"],
      ["check", "Page de réservation en ligne"],
      ["check", "100 emails / mois"],
      [null, "SMS de relance & campagnes"],
      [null, "Cartes de fidélité"],
      [null, "Statistiques détaillées"],
    ],
    cta: "Commencer gratuitement", ctaVariant: "ghost",
  };
  const paidTiers = [
    {
      name: "Essentiel", price: 9.99,
      tagline: "L'essentiel pour gérer",
      tone: "accent",
      barColor: "oklch(57% 0.20 280)",
      betaFree: true,
      features: [
        ["check", "Clients illimités"],
        ["check", "Fidélité + facturation conforme"],
        ["check", "50 SMS / mois inclus"],
        ["check", "1 000 emails / mois"],
        ["check", "Relances par email"],
        [null, "Marketing SMS & collecte d'avis"],
      ],
      cta: "Choisir Essentiel", ctaVariant: "ghost",
    },
    {
      name: "Pro", price: 19.99,
      tagline: "Le meilleur rapport qualité-prix",
      featured: true,
      tone: "accent",
      barColor: "var(--accent)",
      betaFree: true,
      features: [
        ["check", "Tout Essentiel, et en plus :"],
        ["check", "200 SMS / mois inclus"],
        ["check", "5 000 emails / mois"],
        ["check", "Marketing complet (campagnes, relances, avis)"],
        ["check", "Statistiques détaillées"],
        ["check", "Badge « Vérifié » + sans pub"],
      ],
      cta: "Choisir Pro", ctaVariant: "accent",
    },
    {
      name: "Premium", price: 29.99,
      tagline: "Pour les gros volumes",
      tone: "accent",
      barColor: "oklch(40% 0.19 284)",
      betaFree: true,
      features: [
        ["check", "Tout Pro, et en plus :"],
        ["check", "500 SMS / mois inclus"],
        ["check", "Emails illimités"],
        ["check", "Multi-postes / accès équipe"],
        ["check", "Accompagnement dédié"],
      ],
      cta: "Choisir Premium", 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."/>

      <section style={{ padding: "16px 0 60px" }}>
        <div className="container">
          {/* Gratuit — bandeau pleine largeur, horizontal et court (desktop),
              empilé sur mobile. Plus aéré que les cartes payantes verticales. */}
          <div style={{
            marginBottom: 22, padding: "18px 22px",
            background: "var(--surface)", border: "1px solid var(--line)",
            borderTop: "3px solid oklch(63% 0.17 280)", borderRadius: 16,
            display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap",
            boxShadow: "var(--sh-1)",
          }}>
            <div style={{ minWidth: 170 }}>
              <span style={{
                display: "inline-block", padding: "2px 9px", marginBottom: 7,
                background: "var(--bg-alt)", color: "var(--ink-2)",
                borderRadius: 999, fontSize: 10.5, fontWeight: 700,
                textTransform: "uppercase", letterSpacing: "0.05em",
              }}>Gratuit · sans carte</span>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ fontFamily: "var(--ff-display)", fontSize: 22, fontWeight: 620, letterSpacing: "-0.02em" }}>{freeTier.name}</span>
                <span style={{ fontFamily: "var(--ff-display)", fontSize: 26, fontWeight: 680, letterSpacing: "-0.03em" }}>0 €</span>
              </div>
              <div style={{ fontSize: 12.5, color: "var(--ink-4)", marginTop: 2 }}>{freeTier.tagline}</div>
            </div>
            <div style={{ flex: 1, minWidth: 220, display: "flex", flexWrap: "wrap", gap: "8px 18px" }}>
              {freeTier.features.filter(f => f[0] === "check").map(([, label], i) => (
                <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13, color: "var(--ink-2)" }}>
                  <Icon name="check" size={14} stroke={2.5} style={{ color: "oklch(60% 0.17 280)", flexShrink: 0 }}/>
                  {label}
                </span>
              ))}
            </div>
            <button onClick={() => go("signup")} className="btn btn-ghost btn-lg" style={{ flexShrink: 0 }}>
              {freeTier.cta}
            </button>
          </div>

          {/* 3 formules payantes — la plus avantageuse au milieu */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="price-grid">
            {paidTiers.map(t => <PlanCard key={t.name} t={t} go={go}/>)}
          </div>

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

// Chaque pill de confiance a sa propre teinte douce, donne du rythme
// à la rangée de trust badges sans crier.
// Tous les trust pills en indigo (couleur de marque) pour cohérence
// avec l'espace pro où l'indigo est la couleur dominante.
const TRUST_ITEMS = [
  { icon: "🇫🇷", t: "Hébergé en France",             bg: "var(--accent-soft)", ink: "var(--accent-ink)" },
  { icon: "🔒", t: "RGPD & chiffré",                 bg: "var(--accent-soft)", ink: "var(--accent-ink)" },
  { icon: "🪪", t: "Vos données vous appartiennent", bg: "var(--accent-soft)", ink: "var(--accent-ink)" },
  { icon: "🤝", t: "Sans engagement",                bg: "var(--accent-soft)", ink: "var(--accent-ink)" },
];

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: it.bg,
          border: "1px solid transparent",
          borderRadius: 999, fontSize: 12.5, fontWeight: 540, color: it.ink,
        }}>
          <span style={{ fontSize: 13, lineHeight: 1 }}>{it.icon}</span>
          {it.t}
        </span>
      ))}
    </div>
  </div>
);

const FAQ_GROUPS = [
  {
    name: "Tarifs & bêta",
    tone: "accent",
    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é",
    tone: "sage",
    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",
    tone: "rose",
    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) => {
            const tone = TONE_VARS[g.tone] || TONE_VARS.accent;
            return (
            <div key={gi} style={{ marginBottom: 28 }}>
              <h2 style={{
                fontSize: "clamp(18px, 2.2vw, 22px)", letterSpacing: "-0.02em",
                marginBottom: 10,
                display: "inline-flex", alignItems: "center", gap: 10,
              }}>
                {/* Pastille colorée par groupe, donne une identité visuelle
                    sans surcharger le titre. */}
                <span style={{
                  display: "inline-block", width: 10, height: 10, borderRadius: 50,
                  background: tone.solid,
                }}/>
                <span style={{ color: "var(--ink)" }}>{g.name}</span>
              </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 Premium 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",
};

// Colonnes : Découverte · Essentiel · Pro · Premium
const COMPARE_ROWS = [
  ["Clients",                          "20",        "∞",        "∞",          "∞"],
  ["SMS inclus / mois",                "—",         "50",       "200",        "500"],
  ["Emails / mois",                    "100",       "1 000",    "5 000",      "∞"],
  ["Page publique de réservation",     "✓",         "✓",        "✓",          "✓"],
  ["Facturation conforme française",   "—",         "✓",        "✓",          "✓"],
  ["Cartes de fidélité",               "—",         "✓",        "✓",          "✓"],
  ["Relances par email",               "—",         "✓",        "✓",          "✓"],
  ["Marketing SMS, campagnes, avis",   "—",         "—",        "✓",          "✓"],
  ["Statistiques détaillées",          "—",         "—",        "✓",          "✓"],
  ["Badge « Vérifié » + sans pub",     "—",         "—",        "✓",          "✓"],
  ["Multi-postes / accès équipe",      "—",         "—",        "—",          "✓"],
  ["Support",                          "Standard",  "Standard", "Prioritaire","Dédié"],
];

/* À venir, seulement les features confirmées, avec leur(s) plan(s) cible(s). */
const UPCOMING_FEATURES = [
  {
    icon: "bell",
    title: "Rappels SMS automatiques",
    plans: ["Pro", "Premium"],
    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", "Essentiel", "Pro", "Premium"],
    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}>Essentiel</th>
                <th style={{ ...th, background: "var(--accent-soft)", color: "var(--accent-ink)" }}>Pro</th>
                <th style={th}>Premium</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}>{row[2]}</td>
                  <td style={{ ...td, background: "color-mix(in oklab, var(--accent-soft) 60%, transparent)" }}>{row[3]}</td>
                  <td style={td}>{row[4]}</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. */
// Prix animé : compte fluidement de 0 à la valeur cible au scroll, via
// window.useCountUp (exposé par home-hero). 2 décimales pour les prix à
// virgule (9,99 € / 19,99 €) — surtout pas 1 sinon « 9,99 » s'arrondit
// à « 9,9 » et change visuellement le prix.
const AnimatedPrice = ({ value }) => {
  const useCU = typeof window !== "undefined" ? window.useCountUp : null;
  const fallbackRef = React.useRef(null);
  const hasDecimals = value % 1 !== 0;
  const decimals = hasDecimals ? 2 : 0;
  const [v, ref] = useCU
    ? useCU(value, { duration: 1100, decimals })
    : [value, fallbackRef];
  const formatted = value === 0
    ? "0 €"
    : `${v.toFixed(decimals).replace(".", ",")} €`;
  return (
    <span ref={ref} style={{
      fontFamily: "var(--ff-display)", fontSize: 44, fontWeight: 580,
      letterSpacing: "-0.035em", fontVariantNumeric: "tabular-nums",
    }}>
      {formatted}
    </span>
  );
};

const PlanCard = ({ t, go }) => {
  const isMobile = useIsMobile(760);
  const [open, setOpen] = React.useState(false);
  const isFeatured = t.featured;
  const tone = TONE_VARS[t.tone] || TONE_VARS.accent;
  // Couleur de la barre supérieure : si le tier déclare un `barColor`
  // explicite (ex : 3 nuances de bleu pour Découverte / Pro / Business),
  // on l'utilise, sinon on retombe sur tone.solid (indigo de marque).
  const barColor = t.barColor || tone.solid;
  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;

  // Tilt 3D parallax : on suit la souris dans la carte et on incline
  // doucement (max ~6°). Désactivé sur mobile et si prefers-reduced-motion.
  const cardRef = React.useRef(null);
  const [tilt, setTilt] = React.useState({ rx: 0, ry: 0, tx: 0, ty: 0 });
  const onMouseMove = (e) => {
    if (isMobile) return;
    const el = cardRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;   // 0..1
    const py = (e.clientY - r.top)  / r.height;  // 0..1
    const ry = (px - 0.5) *  10; // -5..5 deg
    const rx = (py - 0.5) * -10; // -5..5 deg (axe inversé pour le pitch)
    const tx = (px - 0.5) *  6;  // léger glissement
    const ty = (py - 0.5) *  6;
    setTilt({ rx, ry, tx, ty });
  };
  const onMouseLeave = () => setTilt({ rx: 0, ry: 0, tx: 0, ty: 0 });

  return (
    <div ref={cardRef}
      onMouseMove={onMouseMove}
      onMouseLeave={onMouseLeave}
      className="card" style={{
      padding: 24, position: "relative",
      // Pas d'overflow:hidden : le badge "LE PLUS POPULAIRE" dépasse vers le
      // haut de la card et doit rester lisible. Le stripe de couleur est
      // dessiné via une bordure top épaisse (intégrée à la card, pas en
      // ::before flottant).
      border: isFeatured ? "1px solid var(--accent)" : "1px solid var(--line)",
      borderTop: `4px solid ${barColor}`,
      boxShadow: isFeatured ? "0 20px 44px -24px var(--accent)" : "none",
      transform: `perspective(900px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg) translate3d(${tilt.tx}px, ${tilt.ty}px, 0)`,
      transition: tilt.rx === 0 ? "transform .35s cubic-bezier(.22,1,.36,1)" : "transform .08s linear",
      transformStyle: "preserve-3d",
      willChange: "transform",
    }}>
      {/* Badge GRATUIT PENDANT LA BÊTA en haut, identique sur les 3 cartes
          pour que les CTA restent parfaitement alignés sur la même ligne.
          La couleur reprend le barColor du tier pour rester cohérent avec
          la bande supérieure. */}
      {t.betaFree && (
        <div style={{
          position: "absolute", top: -12, left: 24,
          padding: "4px 11px",
          background: barColor, color: "white",
          fontSize: 11.5, fontWeight: 600,
          borderRadius: 999, letterSpacing: "0.02em",
          zIndex: 2,
          whiteSpace: "nowrap",
          boxShadow: `0 4px 12px -4px ${barColor}`,
        }}>GRATUIT PENDANT LA BÊTA</div>
      )}
      <h3 style={{ fontSize: 22, color: tone.ink }}>{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" }}>
        {/* Prix : odomètre fluide qui compte de 0 à la valeur cible quand
            la card entre dans le viewport. useCountUp gère le triggers via
            IntersectionObserver + ease-out cubic. */}
        <AnimatedPrice value={t.price}/>
        <span style={{ fontSize: 13, color: "var(--ink-4)" }}>/ mois</span>
      </div>
      {/* Bouton CTA : pour Découverte (gratuit) on garde le ghost blanc qui
          dit « entrée tranquille ». Pour les tiers payants, on utilise
          directement leur barColor en fond plein → cohérence visuelle
          parfaite entre la bande supérieure, le badge GRATUIT BÊTA et
          le CTA. Indigo brand pour Pro, indigo profond pour Business. */}
      {t.price === 0 ? (
        <button className={`btn btn-${t.ctaVariant} btn-lg`} style={{ width: "100%", marginTop: 18 }} onClick={() => go("signup")}>
          {t.cta}
        </button>
      ) : (
        <button onClick={() => go("signup")}
          className="btn btn-lg"
          style={{
            width: "100%", marginTop: 18,
            background: barColor, color: "#fff",
            border: "none",
            boxShadow: `0 6px 18px -8px ${barColor}`,
            transition: "filter .18s ease, transform .12s ease, box-shadow .22s ease",
          }}
          onMouseEnter={e => {
            e.currentTarget.style.filter = "brightness(1.08)";
            e.currentTarget.style.boxShadow = `0 10px 22px -8px ${barColor}`;
          }}
          onMouseLeave={e => {
            e.currentTarget.style.filter = "brightness(1)";
            e.currentTarget.style.boxShadow = `0 6px 18px -8px ${barColor}`;
          }}>
          {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: tone.solid, 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)"     },
  "Essentiel":  { bg: "var(--bg-alt)",      ink: "var(--ink-2)"     },
  "Pro":        { bg: "var(--accent-soft)", ink: "var(--accent-ink)" },
  "Premium":    { 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 = [
  ["Clients",                          "20",       "Illimité", "Illimité",    "Illimité"],
  ["SMS inclus / mois",                "—",        "50",       "200",         "500"],
  ["Emails / mois",                    "100",      "1 000",    "5 000",       "Illimité"],
  ["Page publique de réservation",     "Incluse",  "Incluse",  "Incluse",     "Incluse"],
  ["Facturation conforme française",   "—",        "Incluse",  "Incluse",     "Incluse"],
  ["Cartes de fidélité",               "—",        "Incluses", "Incluses",    "Incluses"],
  ["Relances par email",               "—",        "Incluses", "Incluses",    "Incluses"],
  ["Marketing SMS, campagnes, avis",   "—",        "—",        "Inclus",      "Inclus"],
  ["Statistiques détaillées",          "—",        "—",        "Incluses",    "Incluses"],
  ["Badge « Vérifié » + sans pub",     "—",        "—",        "Inclus",      "Inclus"],
  ["Multi-postes / accès équipe",      "—",        "—",        "—",           "Inclus"],
  ["Support",                          "Standard", "Standard", "Prioritaire", "Dédié"],
];

const MobileCompare = () => {
  const [plan, setPlan] = React.useState(2);
  const plans = [
    { key: 0, name: "Découverte", accent: false },
    { key: 1, name: "Essentiel",  accent: false },
    { key: 2, name: "Pro",        accent: true  },
    { key: 3, name: "Premium",    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 });