/* ClientBase, Vitrine CLIENT (consommateurs : personnes qui prennent RDV).
   Pages dédiées aux clients particuliers : home, guide des fonctionnalités du
   compte client, contact. Pas de tarifs (gratuit pour les clients).

   ============================================================
   Structure ALIGNÉE sur la HomePage pro (home-rest.jsx) :
     ClientHero  →  FlowArrow étape 2  →  ClientBenefits
     →  FlowArrow étape 3  →  ClientBetaPitch
   Même flow narratif (modules → ce qu'on gagne → CTA création) mais
   adapté au compte client : ton accueillant, modules clients, gains
   personnels (plus d'oubli, cartes fidélité centralisées, historique).
   Couleur dominante : BLEU PROFOND (--cli-accent) pour différencier de
   l'indigo pro tout en restant dans la même famille de couleurs.
*/

/* ============ HOME, CLIENT ============ */
const ClientHomePage = ({ go }) => (
  <>
    <ClientHero go={go}/>
    <div className="container" style={{ textAlign: "center" }}>
      <FlowArrow step={2} totalSteps={3} tone="var(--cli-accent)"
        caption="Ensuite, voyons ce que ça change concrètement pour vous"/>
    </div>
    <Reveal><ClientBenefits/></Reveal>
    <div className="container" style={{ textAlign: "center" }}>
      <FlowArrow step={3} totalSteps={3} tone="var(--cli-accent)"
        caption="Prêt·e ? Créez votre compte en moins de 30 secondes"/>
    </div>
    <Reveal><ClientBetaPitch go={go}/></Reveal>
  </>
);

/* ============ HERO CLIENT, texte + CTAs à gauche, bento mockup à droite ============ */
const ClientHero = ({ go }) => (
  <section style={{
    position: "relative", overflow: "hidden",
    padding: "clamp(40px, 5vw, 64px) 0 clamp(36px, 4.5vw, 56px)",
    background: "var(--bg)",
  }}>
    <div className="container" style={{ position: "relative" }}>
      <div className="cli-hero-grid" style={{
        display: "grid", gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
        gap: 48, alignItems: "center",
      }}>
        {/* === Colonne texte === */}
        <div>
          {/* Eyebrow = badge live « X utilisateurs sur ClientBase » tinté
              cli-accent. Compteur cumulé pro + client (vrai chiffre via
              Supabase RPC get_public_user_counts). */}
          <span className="cli-hero-eyebrow">
            {window.LiveProsBadge
              ? React.createElement(window.LiveProsBadge, { tone: "var(--cli-accent)" })
              : null}
          </span>
          <h1 className="cb-hero-title" style={{
            marginTop: 18,
            fontSize: "clamp(38px, 5.2vw, 64px)",
            letterSpacing: "-0.035em", lineHeight: 1.05, fontWeight: 580,
          }}>
            Tous vos rendez-vous,<br/>
            {/* Même technique que côté pro (background + box-decoration-break)
                pour que le surlignage suive proprement le wrap du texte. */}
            <span style={{
              backgroundImage: "linear-gradient(to top, color-mix(in oklab, var(--cli-accent) 45%, transparent) 36%, transparent 36%)",
              paddingInline: "0.04em",
              boxDecorationBreak: "clone",
              WebkitBoxDecorationBreak: "clone",
            }}>au même endroit.</span>
          </h1>
          <p style={{
            marginTop: 18, fontSize: 17, color: "var(--ink-2)",
            lineHeight: 1.5, maxWidth: 500,
          }}>
            Suivez vos RDV chez tous vos pros, coiffeur, esthéticienne,
            ongulaire, depuis un seul compte. Vos cartes de fidélité, votre
            historique et vos avis sont centralisés.
          </p>

          <div className="cb-hero-ctas" style={{
            marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center",
          }}>
            <button
              onClick={() => go("clientSignup")}
              className="btn btn-lg"
              style={{
                background: "var(--cli-accent)", color: "#fff", border: "none",
                boxShadow: "0 14px 32px -12px var(--cli-accent)",
              }}>
              Créer mon compte <Icon name="arrow" size={15}/>
            </button>
            <button onClick={() => cbStartClientDemo()}
              className="btn btn-lg cb-demo-btn"
              title="Voir un compte démo pré-rempli (RDV, fidélité, historique), sans inscription"
              style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                padding: "0 20px",
                background: "color-mix(in oklab, var(--sage) 14%, var(--surface))",
                border: "1px solid color-mix(in oklab, var(--sage) 38%, transparent)",
                color: "var(--sage-ink)",
                fontWeight: 580, letterSpacing: "-0.005em",
                boxShadow: "0 8px 22px -12px color-mix(in oklab, var(--sage) 60%, transparent)",
              }}>
              <span aria-hidden style={{
                display: "inline-block", width: 8, height: 8, borderRadius: "50%",
                background: "var(--sage)",
                boxShadow: "0 0 0 3px color-mix(in oklab, var(--sage) 25%, transparent)",
                animation: "cbDemoDot 1.8s ease-in-out infinite",
              }}/>
              <span>👀 Voir la démo</span>
              <Icon name="arrow" size={14}/>
            </button>
          </div>

          <div className="cli-hero-trust" style={{
            marginTop: 16, display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
            fontSize: 12.5, color: "var(--ink-4)",
          }}>
            <span>✓ Sans carte bancaire</span>
            <span style={{ opacity: 0.4 }}>•</span>
            <span>✓ Compte créé en 30 sec</span>
            <span style={{ opacity: 0.4 }}>•</span>
            <span>✓ Données en France</span>
          </div>
        </div>

        {/* === Colonne mockup bento (3 cartes), parité hero pro ===
            Extrait dans <ClientHeroBento/> pour pouvoir attacher les hooks
            d'animation (compteur fidélité 0 → 7, etc.). */}
        <ClientHeroBento/>
      </div>

      {/* Bandeau réassurance marquee, miroir vitrine pro, ton client violet.
          Clins d'œil SVG (jamais d'emoji) :
          - France   → drapeau tricolore dans les lettres
          - RGPD     → cadenas (chiffré)
          - 0 pub    → cercle barré (anti-pub)
          - 1 compte → hub (1 nœud + 3 satellites = pluralité de pros) */}
      {window.CbTrustBand && React.createElement(window.CbTrustBand, {
        tone: "client",
        items: [
          { title: window.CbTitleFrance ? React.createElement(window.CbTitleFrance) : "France",
            sub: "Conçu & hébergé en France" },
          { title: window.CbTitleWithIcon
              ? React.createElement(window.CbTitleWithIcon, {
                  icon: React.createElement(window.CbIconLock),
                  label: "RGPD",
                  color: "var(--cli-accent)",
                })
              : "RGPD",
            sub: "Vos données chiffrées" },
          { title: window.CbTitleWithIcon
              ? React.createElement(window.CbTitleWithIcon, {
                  icon: React.createElement(window.CbIconNoAd),
                  label: "0 pub",
                  color: "var(--cli-accent)",
                })
              : "0 pub",
            sub: "Gratuit, vraiment" },
          { title: window.CbTitleWithIcon
              ? React.createElement(window.CbTitleWithIcon, {
                  icon: React.createElement(window.CbIconHub),
                  label: "1 compte",
                  color: "var(--cli-accent)",
                })
              : "1 compte",
            sub: "Pour tous vos pros" },
        ],
      })}

      {/* FlowArrow étape 1/3 + carrousel de features, miroir du pattern
          pro (home-hero.jsx ligne 723) : on annonce d'abord l'étape, puis
          on déroule les modules avec auto-advance + pills + dots. */}
      <div style={{ marginTop: 56, textAlign: "center" }}>
        <FlowArrow step={1} totalSteps={3} tone="var(--cli-accent)"
          caption="Commençons par explorer ce que votre compte client contient"/>
      </div>
      <Reveal delay={0.1}>
        <div id="client-features-preview" style={{ marginTop: 18 }}>
          <ClientFeatureCarousel/>
        </div>
      </Reveal>
    </div>

    {/* Responsive, aligné sur le hero pro (home-hero.jsx) :
        - <920 px : 1 colonne, texte centré, bento masqué
        - CTAs en colonne, pleine largeur
        Permet à la vitrine client mobile d'avoir le même premier bloc
        visuel que la vitrine pro (parité demandée par le user). */}
    <style>{`
      @media (max-width: 920px) {
        .cli-hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center; }
        /* Force le centrage des conteneurs flex/inline-flex internes
           (badge audience, trust line) qui ignorent text-align. */
        .cli-hero-grid .cb-hero-bento { display: none !important; }
        .cli-hero-grid .cli-hero-eyebrow { justify-content: center !important; }
        .cli-hero-grid .cli-hero-trust { justify-content: center !important; }
        .cli-hero-grid p { margin-left: auto !important; margin-right: auto !important; }
        .cli-hero-grid .cb-hero-ctas {
          justify-content: center !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 10px !important;
        }
        .cli-hero-grid .cb-hero-ctas .btn {
          width: 100% !important;
          max-width: 340px !important;
        }
      }
      @media (max-width: 480px) {
        .cli-hero-grid h1 { font-size: clamp(32px, 9.5vw, 44px) !important; }
      }
    `}</style>
  </section>
);

/* ============ BENTO HERO CLIENT — 3 cartes mockup avec animations ============
   Cliquer sur le bento relance les animations (compteur fidélité 0→7,
   barre de progression 0→70 %, fade-in séquentiel de l'historique). */
const ClientHeroBento = () => {
  // Compteur fidélité, anime de 0 à 7 visites + barre 0 % → 70 %.
  const [fidValue, fidRef, fidReplay] = useAnimatedBenefit({ from: 0, to: 7, duration: 1200 });
  const fidPct = Math.min(100, Math.round((fidValue / 10) * 100));

  // Fade-in séquentiel de l'historique. On re-trigger en changeant la
  // `key` de chaque ligne au moment du replay.
  const [histReplayKey, setHistReplayKey] = React.useState(0);

  const replayAll = () => {
    fidReplay();
    setHistReplayKey(k => k + 1);
  };

  return (
    <div className="cb-hero-bento" style={{
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      gridTemplateRows: "auto auto",
      gap: 12,
    }}>
      {/* Carte 1 — Prochain RDV (pleine largeur, cliquable pour relancer tout) */}
      <div className="cb-hero-card" onClick={replayAll}
        title="Cliquez pour relancer les animations"
        style={{
          gridColumn: "1 / -1",
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: 16, padding: 16,
          boxShadow: "0 10px 28px -16px rgba(15,18,30,0.18), 0 2px 6px rgba(15,18,30,0.04)",
          cursor: "pointer",
          transition: "transform .18s ease, box-shadow .22s ease",
        }}
        onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 16px 36px -16px rgba(15,18,30,0.20)"; }}
        onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 10px 28px -16px rgba(15,18,30,0.18), 0 2px 6px rgba(15,18,30,0.04)"; }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
          <div style={{
            width: 30, height: 30, borderRadius: 9,
            background: "var(--cli-soft)", color: "var(--cli-ink)",
            display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
          }}>
            <Icon name="calendar" size={15}/>
          </div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 580, color: "var(--ink)", lineHeight: 1.2 }}>
              Prochain RDV
            </div>
            <div style={{ fontSize: 11.5, color: "var(--ink-4)", marginTop: 1 }}>
              Mercredi à 14:30 chez Camille
            </div>
          </div>
          <span style={{
            padding: "3px 8px", borderRadius: 999,
            background: "var(--sage-soft)", color: "var(--sage-ink)",
            fontSize: 10.5, fontWeight: 600, letterSpacing: "0.04em",
            textTransform: "uppercase",
          }}>dans 3j</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          {[
            ["calendar", "Coupe + brushing",   "55 €"],
            ["link",     "Rappel SMS la veille", ""],
          ].map(([icon, label, right]) => (
            <div key={label} style={{
              display: "flex", alignItems: "center", gap: 9,
              padding: "7px 10px",
              background: "var(--bg-alt)", borderRadius: 9,
              fontSize: 12,
            }}>
              <Icon name={icon} size={12} style={{ color: "var(--ink-3)" }}/>
              <span style={{ flex: 1, color: "var(--ink-2)" }}>{label}</span>
              {right && <span style={{ fontWeight: 580, color: "var(--ink)" }}>{right}</span>}
            </div>
          ))}
        </div>
      </div>

      {/* Carte 2 — Fidélité avec compteur animé + barre de progression */}
      <div ref={fidRef} className="cb-hero-card" onClick={replayAll}
        title="Cliquez pour relancer le compteur"
        style={{
          background: `linear-gradient(135deg, var(--cli-accent) 0%, color-mix(in oklab, var(--cli-accent) 70%, var(--accent)) 100%)`,
          color: "#fff", border: "none", borderRadius: 16, padding: 16,
          boxShadow: "0 14px 32px -14px color-mix(in oklab, var(--cli-accent) 60%, transparent)",
          display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 12,
          minHeight: 160, cursor: "pointer",
          transition: "transform .18s ease",
        }}
        onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; }}
        onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10.5, fontWeight: 600, opacity: 0.92, letterSpacing: "0.07em", textTransform: "uppercase" }}>
          <Icon name="gift" size={11}/> Fidélité
        </div>
        <div>
          <div style={{
            fontFamily: "var(--ff-display)", fontSize: 26, fontWeight: 580,
            letterSpacing: "-0.025em", lineHeight: 1,
            fontVariantNumeric: "tabular-nums",
          }}>{fidValue} / 10</div>
          <div style={{ marginTop: 6, height: 6, borderRadius: 99, background: "rgba(255,255,255,0.25)" }}>
            <div style={{
              width: `${fidPct}%`, height: "100%", borderRadius: 99, background: "#fff",
              transition: "width 0.18s ease",
            }}/>
          </div>
          <div style={{ marginTop: 8, fontSize: 11, opacity: 0.88 }}>
            Plus que {Math.max(0, 10 - fidValue)} visite{(10 - fidValue) > 1 ? "s" : ""}, récompense à venir
          </div>
        </div>
      </div>

      {/* Carte 3 — Historique avec fade-in séquentiel */}
      <div className="cb-hero-card" onClick={replayAll}
        title="Cliquez pour relancer l'apparition"
        style={{
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: 16, padding: 14,
          boxShadow: "0 6px 18px -10px rgba(15,18,30,0.12)",
          display: "flex", flexDirection: "column", gap: 8,
          cursor: "pointer",
          transition: "transform .18s ease",
        }}
        onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; }}
        onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10.5, fontWeight: 600, color: "var(--ink-4)", letterSpacing: "0.07em", textTransform: "uppercase" }}>
          <Icon name="clock" size={11}/> Récent
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          {[
            ["12 mars", "Camille",  "var(--cli-accent)"],
            ["28 fév",  "Sophie D.","var(--sage)"],
            ["07 fév",  "Camille",  "var(--cli-accent)"],
          ].map(([d, name, c], i) => (
            <div key={d + name + "_" + histReplayKey}
              style={{
                display: "flex", alignItems: "center", gap: 8,
                fontSize: 11.5,
                padding: "5px 8px", borderRadius: 7, background: "var(--bg-alt)",
                borderLeft: `2.5px solid ${c}`,
                animation: `cbFadeSlide 0.5s cubic-bezier(.22,1,.36,1) both`,
                animationDelay: `${i * 120}ms`,
              }}>
              <span style={{ minWidth: 50, fontWeight: 600, color: "var(--ink-2)", fontVariantNumeric: "tabular-nums" }}>{d}</span>
              <span style={{ color: "var(--ink-3)" }}>· {name}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ============ CLIENT FEATURE CAROUSEL, miroir du FeatureCarousel pro ============
   Même UX : auto-advance toutes les 4.5s (desktop), pills cliquables,
   carte centrale avec petit mockup interactif par module, dots en bas.
   Mobile : scroll horizontal snap (1 carte à la fois). */

const CLIENT_PREVIEW_TONE = {
  cli:    { bg: "var(--cli-soft)",    ink: "var(--cli-ink)",    solid: "var(--cli-accent)" },
  accent: { bg: "var(--accent-soft)", ink: "var(--accent-ink)", solid: "var(--accent)" },
  sage:   { bg: "var(--sage-soft)",   ink: "var(--sage-ink)",   solid: "var(--sage)" },
};

const CLIENT_CAROUSEL_FEATURES = [
  {
    id: "rdv", icon: "calendar", tone: "cli", name: "Mes RDV",
    tagline: "Tous vos rendez-vous, centralisés.",
    desc: "Dès que votre pro confirme un RDV, il apparaît ici. Vous voyez la date, l'heure, la prestation, l'adresse, plus jamais besoin de chercher.",
    mock: "rdv",
  },
  {
    id: "fidelite", icon: "gift", tone: "accent", name: "Fidélité",
    tagline: "Toutes vos cartes en un seul endroit.",
    desc: "Chaque pro chez qui vous allez peut vous offrir une carte numérique. Vous suivez votre progression en direct, sans rien perdre.",
    mock: "fidelite",
  },
  {
    id: "profil", icon: "users", tone: "sage", name: "Profil partagé",
    tagline: "Vos préférences, retenues une bonne fois.",
    desc: "Allergies, notes, préférences : vous les renseignez une seule fois et vous choisissez quels pros y ont accès.",
    mock: "profil",
  },
  {
    id: "avis", icon: "chat", tone: "cli", name: "Avis",
    tagline: "Aidez d'autres clientes à choisir.",
    desc: "Après chaque RDV, laissez un avis privé pour votre pro ou public sur sa page, vous décidez.",
    mock: "avis",
  },
];

const ClientFeatureCarousel = () => {
  const isMobile = useIsMobile(720);
  const [idx, setIdx] = React.useState(0);
  const [auto, setAuto] = React.useState(true);
  const scrollRef = React.useRef(null);
  const programmaticRef = React.useRef(false);

  // Auto-advance, desktop uniquement (sinon conflit avec le swipe mobile).
  React.useEffect(() => {
    if (!auto || isMobile) return;
    const t = setInterval(() => setIdx(i => (i + 1) % CLIENT_CAROUSEL_FEATURES.length), 4500);
    return () => clearInterval(t);
  }, [auto, isMobile]);

  const pick = (i) => {
    setIdx(i);
    setAuto(false);
    if (isMobile && scrollRef.current) {
      const el = scrollRef.current;
      const card = el.children[i];
      if (card) {
        programmaticRef.current = true;
        const target = card.offsetLeft - (el.clientWidth - card.clientWidth) / 2;
        el.scrollTo({ left: Math.max(0, target), behavior: "smooth" });
        setTimeout(() => { programmaticRef.current = false; }, 600);
      }
    }
  };

  const handleScroll = () => {
    if (programmaticRef.current || !scrollRef.current) return;
    const el = scrollRef.current;
    const center = el.scrollLeft + el.clientWidth / 2;
    let nearest = 0, best = Infinity;
    for (let i = 0; i < el.children.length; i++) {
      const c = el.children[i];
      const cCenter = c.offsetLeft + c.clientWidth / 2;
      const d = Math.abs(cCenter - center);
      if (d < best) { best = d; nearest = i; }
    }
    if (nearest !== idx && nearest < CLIENT_CAROUSEL_FEATURES.length) setIdx(nearest);
  };

  const current = CLIENT_CAROUSEL_FEATURES[idx];

  if (isMobile) {
    return (
      <div style={{ maxWidth: 720, margin: "0 auto" }}>
        <div style={{
          textAlign: "center", marginBottom: 14,
          fontSize: 13, color: "var(--ink-4)", fontStyle: "italic",
          fontFamily: "var(--ff-display)",
          display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
        }}>
          <span aria-hidden>←</span>
          glissez pour explorer les {CLIENT_CAROUSEL_FEATURES.length} modules
          <span aria-hidden>→</span>
        </div>

        <div ref={scrollRef} onScroll={handleScroll}
          className="cb-hide-scrollbar"
          style={{
            display: "flex", gap: 12,
            overflowX: "auto",
            scrollSnapType: "x mandatory",
            WebkitOverflowScrolling: "touch",
            marginLeft: -16, marginRight: -16,
            paddingLeft: 16, paddingRight: 16,
            scrollbarWidth: "none",
          }}>
          {CLIENT_CAROUSEL_FEATURES.map((f) => (
            <div key={f.id} style={{
              flexShrink: 0,
              width: "calc(100% - 32px)",
              scrollSnapAlign: "center",
              scrollSnapStop: "always",
            }}>
              <ClientFeatureCard f={f} compact/>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 20, display: "flex", gap: 6, justifyContent: "center",
        }}>
          {CLIENT_CAROUSEL_FEATURES.map((_, i) => (
            <button key={i} onClick={() => pick(i)} aria-label={`Module ${i + 1}`}
              style={{
                width: i === idx ? 24 : 7, height: 7,
                borderRadius: 999,
                background: i === idx ? "var(--cli-accent)" : "var(--line-strong)",
                border: "none", cursor: "pointer", padding: 0,
                transition: "width 0.2s, background 0.2s",
              }}/>
          ))}
        </div>
      </div>
    );
  }

  // Desktop : pills + carte + dots, strictement aligné sur le pattern pro.
  return (
    <div style={{ maxWidth: 720, margin: "0 auto" }}>
      <div style={{
        display: "flex", gap: 6, flexWrap: "wrap", justifyContent: "center",
      }}>
        {CLIENT_CAROUSEL_FEATURES.map((f, i) => {
          const active = i === idx;
          return (
            <button key={f.id} onClick={() => pick(i)} style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              padding: "7px 13px",
              // Active = violet client (--cli-accent), symétrique du
              // pattern indigo côté pro.
              background: active ? "var(--cli-accent)" : "var(--surface)",
              color: active ? "white" : "var(--ink-2)",
              border: "1px solid " + (active ? "var(--cli-accent)" : "var(--line)"),
              borderRadius: 999,
              fontSize: 12.5, fontWeight: active ? 580 : 500,
              cursor: "pointer", fontFamily: "inherit",
              boxShadow: active ? "0 6px 18px -8px var(--cli-accent)" : "none",
              transition: "all 0.18s ease",
            }}>
              <Icon name={f.icon} size={13}/> {f.name}
            </button>
          );
        })}
      </div>

      <div style={{ marginTop: 16 }}>
        <div key={current.id} style={{ animation: "cbFadeSlide 0.35s ease" }}>
          <ClientFeatureCard f={current}/>
        </div>
      </div>

      <div style={{
        marginTop: 18, display: "flex", gap: 6, justifyContent: "center",
      }}>
        {CLIENT_CAROUSEL_FEATURES.map((_, i) => (
          <button key={i} onClick={() => pick(i)} aria-label={`Module ${i + 1}`}
            style={{
              width: i === idx ? 20 : 6, height: 6,
              borderRadius: 999,
              background: i === idx ? "var(--cli-accent)" : "var(--line-strong)",
              border: "none", cursor: "pointer", padding: 0,
              transition: "width 0.2s, background 0.2s",
            }}/>
        ))}
      </div>
    </div>
  );
};

/* Carte unique d'une feature client — refondue pour matcher la dimension
   de la FeatureCard pro (home-hero.jsx) : layout vertical centré, icône
   52×52, titre h3 large, mock en bas. Min-height pour que toutes les
   cards aient la même hauteur peu importe la longueur du texte. */
const ClientFeatureCard = ({ f, compact = false }) => {
  const tone = CLIENT_PREVIEW_TONE[f.tone] || CLIENT_PREVIEW_TONE.cli;
  const [hover, setHover] = React.useState(false);
  return (
    <div
      className="cb-module-card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--surface)",
        border: "1px solid var(--line)",
        borderRadius: 16,
        padding: compact ? 22 : 28,
        boxShadow: hover
          ? `0 14px 32px -18px color-mix(in oklab, var(--cli-accent) 60%, transparent), var(--sh-2)`
          : "var(--sh-2)",
        // height fixe → toutes les cards EXACTEMENT la même taille.
        // .cb-module-card en CSS gère le mobile à part.
        height: compact ? 480 : 540,
        position: "relative", overflow: "hidden",
        width: "100%", boxSizing: "border-box",
        textAlign: "center",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        transition: "transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease",
      }}>
      {/* Halo radial TOUJOURS cli-accent (bleu profond client) peu
          importe la tone du module — la teinte décorative reste sur la
          couleur de l'audience client. Parité avec FeatureCard pro. */}
      <div aria-hidden style={{
        position: "absolute", top: -40, left: "50%", transform: "translateX(-50%)",
        width: 280, height: 160, borderRadius: "50%",
        background: `radial-gradient(circle, var(--cli-soft) 0%, transparent 70%)`,
        opacity: 0.6, pointerEvents: "none",
      }}/>
      {/* Layout : header pinned EN HAUT (toujours au même endroit), mock
          centré dans le reste vertical. Parité stricte avec FeatureCard. */}
      <div style={{
        position: "relative", display: "flex", flexDirection: "column",
        alignItems: "center", height: "100%",
        gap: compact ? 14 : 18,
      }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12, flexShrink: 0 }}>
          <div style={{
            width: 52, height: 52, borderRadius: 14,
            background: tone.bg, color: tone.ink,
            display: "inline-flex", alignItems: "center", justifyContent: "center",
          }}>
            <Icon name={f.icon} size={26}/>
          </div>
          <h3 style={{
            fontSize: "clamp(22px, 2.6vw, 28px)", margin: 0,
            letterSpacing: "-0.02em",
          }}>{f.name}</h3>
          {!compact && (
            <div style={{ fontSize: 14, color: tone.ink, fontWeight: 540, margin: 0 }}>
              {f.tagline}
            </div>
          )}
          <p style={{
            margin: 0, fontSize: 15, color: "var(--ink-2)",
            lineHeight: 1.55, maxWidth: 520,
          }}>
            {f.desc}
          </p>
        </div>
        {/* Mock cadré dans une « shell » uniforme (bg-alt + border + radius)
            pour donner une vraie impression de capture encadrée. Parité
            avec FeatureCard pro. */}
        <div style={{
          flex: 1,
          display: "flex", alignItems: "center", justifyContent: "center",
          width: "100%",
          maxWidth: compact ? 320 : 360,
          margin: "0 auto",
          minHeight: 0,
        }}>
          <div style={{
            width: "100%",
            padding: 10,
            background: "var(--bg-alt)",
            border: "1px solid var(--line)",
            borderRadius: 14,
            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 6px -3px rgba(15,18,30,0.06)",
          }}>
            <ClientFeatureMock kind={f.mock} tone={tone}/>
          </div>
        </div>
      </div>
    </div>
  );
};

/* Mockups illustratifs par feature client, petits visuels pas interactifs,
   juste pour donner à voir ce que la feature pourrait ressembler. */
const ClientFeatureMock = ({ kind, tone }) => {
  if (kind === "rdv") {
    return (
      <div style={{
        background: "var(--bg-alt)", borderRadius: 12, padding: 12,
        display: "flex", flexDirection: "column", gap: 6,
      }}>
        {[
          ["Mercredi 22 mai", "11:00", "Studio Léa", "Pose gel"],
          ["Vendredi 28 mai", "15:00", "Sarah Coiffure", "Coupe + couleur"],
          ["Lundi 10 juin",   "14:00", "Studio Léa", "Remplissage"],
        ].map(([day, h, pro, svc], i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 9,
            padding: "8px 10px", background: "var(--surface)",
            border: "1px solid var(--line)", borderRadius: 9,
            borderLeft: `2.5px solid ${tone.solid}`,
            fontSize: 11.5,
          }}>
            <span style={{ minWidth: 90, fontWeight: 580, color: "var(--ink-2)" }}>{day}</span>
            <span style={{ fontWeight: 580, color: tone.ink, minWidth: 36 }}>{h}</span>
            <span style={{ color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{pro} · {svc}</span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === "fidelite") {
    return (
      <div style={{
        background: `linear-gradient(135deg, var(--cli-accent) 0%, color-mix(in oklab, var(--cli-accent) 70%, var(--accent)) 100%)`,
        color: "#fff", borderRadius: 14, padding: 16,
        display: "flex", flexDirection: "column", gap: 10,
        boxShadow: "0 14px 32px -14px color-mix(in oklab, var(--cli-accent) 60%, transparent)",
      }}>
        <div style={{ fontSize: 10.5, fontWeight: 600, opacity: 0.9, letterSpacing: "0.07em", textTransform: "uppercase" }}>
          <Icon name="gift" size={11}/> Studio Léa · Fidélité
        </div>
        <div>
          <div style={{
            fontFamily: "var(--ff-display)", fontSize: 28, fontWeight: 580,
            letterSpacing: "-0.025em", lineHeight: 1,
          }}>7 / 10 visites</div>
          <div style={{ marginTop: 8, height: 7, borderRadius: 99, background: "rgba(255,255,255,0.25)" }}>
            <div style={{ width: "70%", height: "100%", borderRadius: 99, background: "#fff" }}/>
          </div>
          <div style={{ marginTop: 8, fontSize: 11, opacity: 0.9 }}>
            🎁 Plus que 3 visites pour 1 prestation offerte
          </div>
        </div>
      </div>
    );
  }
  if (kind === "profil") {
    return (
      <div style={{
        background: "var(--bg-alt)", borderRadius: 12, padding: 14,
        display: "flex", flexDirection: "column", gap: 8,
      }}>
        {[
          ["Téléphone",   "06 12 34 56 78"],
          ["Email",       "marie.dupont@gmail.com"],
          ["Allergies",   "Sensible aux parfums forts"],
          ["Préférences", "RDV en fin d'après-midi"],
        ].map(([k, v]) => (
          <div key={k} style={{
            display: "flex", alignItems: "baseline", gap: 12,
            fontSize: 11.5, padding: "6px 10px",
            background: "var(--surface)", borderRadius: 8,
            border: "1px solid var(--line)",
          }}>
            <span style={{ minWidth: 88, fontWeight: 580, color: "var(--ink-3)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.04em" }}>{k}</span>
            <span style={{ color: "var(--ink-2)" }}>{v}</span>
          </div>
        ))}
      </div>
    );
  }
  // avis
  return (
    <div style={{
      background: "var(--bg-alt)", borderRadius: 12, padding: 14,
      display: "flex", flexDirection: "column", gap: 10,
    }}>
      <div style={{
        background: "var(--surface)", borderRadius: 10, padding: 12,
        border: "1px solid var(--line)",
        borderLeft: `2.5px solid ${tone.solid}`,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
          {[1,2,3,4,5].map(i => (
            <span key={i} style={{ color: tone.solid, fontSize: 13 }}>★</span>
          ))}
          <span style={{ marginLeft: "auto", fontSize: 10.5, color: "var(--ink-4)" }}>Public</span>
        </div>
        <p style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
          « Super accueil, prestation parfaite, j'y retourne avec plaisir ! »
        </p>
      </div>
      <div style={{
        background: "var(--surface)", borderRadius: 10, padding: 12,
        border: "1px solid var(--line)",
        borderLeft: `2.5px solid var(--ink-4)`,
        opacity: 0.85,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
          {[1,2,3,4].map(i => (
            <span key={i} style={{ color: tone.solid, fontSize: 13 }}>★</span>
          ))}
          <span style={{ color: "var(--ink-4)", fontSize: 13 }}>★</span>
          <span style={{ marginLeft: "auto", fontSize: 10.5, color: "var(--ink-4)" }}>Privé</span>
        </div>
        <p style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
          « Top, juste un peu d'attente la dernière fois. »
        </p>
      </div>
    </div>
  );
};

/* ============ BENEFITS, ce que ça change concrètement ============
   Équivalent du SavingsSimulator côté pro, mais axé sur les gains
   personnels. Chaque carte est cliquable : le chiffre se ré-anime
   depuis sa valeur de départ pour donner un retour visuel. */
const CLIENT_BENEFITS = [
  {
    icon: "calendar", tone: "cli",
    from: 5, to: 0, suffix: "", unit: " oublis/an",
    title: "Plus jamais un rendez-vous manqué",
    desc: "Rappels avant chaque rendez-vous, automatique. Vous n'avez plus besoin de noter dans 3 endroits différents.",
  },
  {
    icon: "gift", tone: "accent",
    from: 0, to: 100, suffix: "%", unit: "",
    title: "Vos cartes de fidélité regroupées",
    desc: "Chaque pro qui utilise ClientBase peut vous offrir une carte numérique. Vous suivez tout, sans en perdre une seule.",
  },
  {
    icon: "clock", tone: "sage",
    from: 0, to: 2, suffix: "", unit: " min",
    title: "Modifier ou annuler en 2 clics",
    desc: "Plus besoin d'appeler ou d'envoyer un SMS pendant les horaires du salon. Tout se fait depuis votre espace.",
  },
];

// Petit compteur animé bidirectionnel, anime de `from` vers `to`. Démarre
// à l'entrée dans le viewport ET à chaque appel de replay(). Si from < to
// on anime à la hausse, sinon à la baisse.
const useAnimatedBenefit = ({ from, to, duration = 1100 }) => {
  const [val, setVal] = React.useState(from);
  const ref = React.useRef(null);
  const animRef = React.useRef(null);

  const play = React.useCallback(() => {
    if (animRef.current) cancelAnimationFrame(animRef.current);
    setVal(from);
    const start = performance.now();
    const delta = to - from;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(from + delta * eased);
      if (t < 1) animRef.current = requestAnimationFrame(tick);
      else { setVal(to); animRef.current = null; }
    };
    animRef.current = requestAnimationFrame(tick);
  }, [from, to, duration]);

  React.useEffect(() => {
    const el = ref.current;
    if (!el || typeof IntersectionObserver === "undefined") { setVal(to); return; }
    let started = false;
    const obs = new IntersectionObserver((entries) => {
      if (!started && entries[0].isIntersecting) {
        started = true;
        play();
        obs.disconnect();
      }
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [from, to, play]);

  return [Math.round(val), ref, play];
};

const ClientBenefitCard = ({ b }) => {
  const tone = CLIENT_PREVIEW_TONE[b.tone];
  const [val, valRef, replay] = useAnimatedBenefit({ from: b.from, to: b.to });
  return (
    <div onClick={replay}
      title="Cliquez pour relancer le compteur"
      style={{
        padding: 24, background: "var(--surface)",
        border: "1px solid var(--line)", borderRadius: 18,
        borderTop: `4px solid ${tone.solid}`,
        transition: "transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1)",
        cursor: "pointer",
      }}
      onMouseEnter={e => {
        e.currentTarget.style.transform = "translateY(-3px)";
        e.currentTarget.style.boxShadow = `0 22px 44px -22px var(--cli-accent)`;
      }}
      onMouseLeave={e => {
        e.currentTarget.style.transform = "translateY(0)";
        e.currentTarget.style.boxShadow = "none";
      }}
    >
      <div style={{
        width: 42, height: 42, borderRadius: 11,
        background: tone.bg, color: tone.ink,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        marginBottom: 14,
      }}>
        <Icon name={b.icon} size={19}/>
      </div>
      <div ref={valRef} style={{
        fontFamily: "var(--ff-display)", fontSize: 38, fontWeight: 600,
        letterSpacing: "-0.03em", color: tone.solid, lineHeight: 1,
        fontVariantNumeric: "tabular-nums",
      }}>
        {val}{b.suffix}<span style={{ fontSize: 18, color: tone.ink, opacity: 0.85 }}>{b.unit}</span>
      </div>
      <h3 style={{ marginTop: 10, fontSize: 17 }}>{b.title}</h3>
      <p style={{ marginTop: 6, fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55 }}>
        {b.desc}
      </p>
    </div>
  );
};

const ClientBenefits = () => (
  <section style={{ padding: "32px 0 60px" }}>
    <div className="container">
      <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto" }}>
        <span className="eyebrow" style={{ color: "var(--cli-ink)" }}>Ce que vous y gagnez</span>
        <h2 style={{ marginTop: 8, fontSize: "clamp(28px, 3.4vw, 42px)", letterSpacing: "-0.028em" }}>
          Trois choses qui changent tout.
        </h2>
        <p style={{ marginTop: 12, fontSize: 15.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
          Pas de gadget. Trois bénéfices concrets qui rendent la gestion de vos RDV nettement plus simple.
        </p>
      </div>
      <div style={{
        marginTop: 36,
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(min(280px, 100%), 1fr))",
        gap: 14,
      }}>
        {CLIENT_BENEFITS.map(b => <ClientBenefitCard key={b.title} b={b}/>)}
      </div>
    </div>
  </section>
);

/* ============ BETA PITCH, vertical CTA card (parité home pro) ============ */
const ClientBetaPitch = ({ go }) => (
  <section style={{ padding: "32px 0 80px" }}>
    <style>{`
      @keyframes cbCliPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.3); }
      }
    `}</style>
    <div className="container">
      <div style={{
        maxWidth: 580, margin: "0 auto",
        background: "var(--surface)",
        border: "1px solid var(--line-strong)",
        borderRadius: 24,
        boxShadow: "var(--sh-3)",
        position: "relative",
        overflow: "hidden",
      }}>
        <div aria-hidden style={{
          position: "absolute", top: -100, right: -100,
          width: 260, height: 260, borderRadius: "50%",
          background: "radial-gradient(circle, var(--cli-soft) 0%, transparent 70%)",
          pointerEvents: "none",
        }}/>
        <div aria-hidden style={{
          height: 4,
          background: "linear-gradient(90deg, var(--cli-accent) 0%, var(--accent) 100%)",
        }}/>

        {/* Bouton raccourci compact en coin haut-droite — miroir vitrine pro,
            ton client (cli-accent). Saute directement à l'inscription client. */}
        <button
          onClick={() => go("clientSignup")}
          className="cb-betapitch-shortcut"
          style={{
            position: "absolute", top: 16, right: 16, zIndex: 3,
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "7px 14px 7px 12px",
            background: "var(--cli-soft)",
            color: "var(--cli-ink)",
            border: "1px solid color-mix(in oklab, var(--cli-accent) 28%, transparent)",
            borderRadius: 999,
            fontSize: 12.5, fontWeight: 540, fontFamily: "inherit",
            cursor: "pointer",
            transition: "transform .12s ease, background .15s ease, box-shadow .15s ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "var(--cli-soft-2)";
            e.currentTarget.style.transform = "translateY(-1px)";
            e.currentTarget.style.boxShadow = "0 6px 16px -8px var(--cli-accent)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "var(--cli-soft)";
            e.currentTarget.style.transform = "translateY(0)";
            e.currentTarget.style.boxShadow = "none";
          }}>
          <Icon name="arrow" size={11}/>
          Raccourci inscription
        </button>

        <div style={{ padding: "36px 32px", position: "relative" }}>
          <div style={{ textAlign: "center" }}>
            {/* Live counter cli-accent : remplace l'ancien badge statique
                « Espace client gratuit · pour toujours » par la même preuve
                sociale dynamique que côté pro (parité visuelle stricte). */}
            {window.LiveProsBadge
              ? React.createElement(window.LiveProsBadge, { tone: "var(--cli-accent)" })
              : null}
            <h2 style={{
              marginTop: 18,
              fontSize: "clamp(28px, 3.4vw, 40px)", letterSpacing: "-0.03em",
              lineHeight: 1.05,
            }}>
              On vous fait <br/>
              <span style={{ position: "relative", display: "inline-block" }}>
                <span aria-hidden style={{
                  position: "absolute", zIndex: 0,
                  left: "-4%", right: "-4%", bottom: "0.06em",
                  height: "0.36em",
                  background: "linear-gradient(90deg, color-mix(in oklab, var(--cli-accent) 22%, transparent) 0%, color-mix(in oklab, var(--cli-accent) 35%, transparent) 100%)",
                  borderRadius: "0.16em",
                }}/>
                <span style={{ position: "relative", zIndex: 1 }}>gagner du temps.</span>
              </span>
            </h2>
            <p style={{
              marginTop: 14, fontSize: 15, color: "var(--ink-2)",
              lineHeight: 1.55, maxWidth: 420, margin: "14px auto 0",
            }}>
              Compte gratuit pour la vie. Vous ne payez jamais, ce sont les pros qui paient l'outil pour gérer leur activité.
            </p>
          </div>

          <ul style={{
            listStyle: "none", padding: 0, margin: "26px 0 0",
            display: "flex", flexDirection: "column", gap: 10,
          }}>
            {/* Tous les icônes (et le ✓) en cli-accent : on retire le
                patchwork cli/accent/sage pour un rendu uniforme bleu
                client (parité avec BetaPitch pro qui est tout indigo). */}
            {[
              ["heart",   "Tous vos RDV centralisés"],
              ["gift",    "Vos cartes de fidélité jamais perdues"],
              ["chat",    "Annulation/modification en 2 clics"],
              ["shield",  "Données hébergées en France, conformes RGPD"],
            ].map(([icon, text]) => (
              <li key={text} style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "10px 14px",
                background: "var(--bg-alt)", borderRadius: 10,
                fontSize: 14, color: "var(--ink-2)",
              }}>
                <span style={{
                  width: 30, height: 30, borderRadius: 8,
                  background: "var(--cli-soft)", color: "var(--cli-ink)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0, border: "1px solid transparent",
                }}>
                  <Icon name={icon} size={14}/>
                </span>
                <span style={{ flex: 1 }}>{text}</span>
                <Icon name="check" size={14} stroke={2.6} style={{ color: "var(--cli-accent)", flexShrink: 0 }}/>
              </li>
            ))}
          </ul>

          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 8 }}>
            <button
              onClick={() => go("clientSignup")}
              className="btn btn-lg"
              style={{
                width: "100%",
                background: "var(--cli-accent)", color: "#fff", border: "none",
                boxShadow: "0 14px 32px -12px var(--cli-accent)",
              }}>
              Créer mon compte gratuit <Icon name="arrow" size={15}/>
            </button>
            <button onClick={() => cbStartClientDemo()} className="btn btn-lg cb-demo-btn"
              style={{
                width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                background: "color-mix(in oklab, var(--sage) 14%, var(--surface))",
                border: "1px solid color-mix(in oklab, var(--sage) 38%, transparent)",
                color: "var(--sage-ink)",
                fontWeight: 580, letterSpacing: "-0.005em",
                boxShadow: "0 8px 22px -12px color-mix(in oklab, var(--sage) 60%, transparent)",
              }}>
              <span aria-hidden style={{
                display: "inline-block", width: 8, height: 8, borderRadius: "50%",
                background: "var(--sage)",
                boxShadow: "0 0 0 3px color-mix(in oklab, var(--sage) 25%, transparent)",
                animation: "cbDemoDot 1.8s ease-in-out infinite",
              }}/>
              <span>👀 Voir la démo</span>
              <Icon name="arrow" size={14}/>
            </button>
            <button onClick={() => go("clientContact")} className="btn btn-ghost btn-lg" style={{ width: "100%", border: "none" }}>
              J'ai une question
            </button>
          </div>

          <div style={{
            marginTop: 18, textAlign: "center",
            display: "flex", alignItems: "center", justifyContent: "center",
            gap: 6, fontSize: 12, color: "var(--ink-4)",
          }}>
            <Icon name="clock" size={11}/>
            Moins de 30 secondes. Sans carte bancaire.
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ============ GUIDE, fonctionnalités du compte client ============ */
const CLIENT_FEATURES = [
  {
    id: "rdv",
    icon: "calendar", tone: "cli",
    name: "Vos rendez-vous",
    tagline: "Tout ce qui est prévu, en un coup d'œil.",
    why: "Dès que votre pro confirme un RDV, il apparaît dans votre espace. Vous voyez la date, l'heure, la prestation et l'adresse, plus jamais de « c'était quand déjà ? ».",
    bullets: [
      "Liste claire de vos prochains RDV chez tous vos pros",
      "Historique complet de ce que vous avez fait, avec qui et combien",
      "Modification / annulation possible jusqu'au délai défini par le pro",
    ],
  },
  {
    id: "fidelite",
    icon: "gift", tone: "accent",
    name: "Vos cartes de fidélité",
    tagline: "Toutes vos cartes dans une seule poche.",
    why: "Chaque pro chez qui vous allez peut vous offrir une carte de fidélité numérique. Vous voyez votre progression en temps réel, quand la récompense est prête, ça se voit tout de suite.",
    bullets: [
      "Une carte par pro, mises à jour automatiquement après chaque RDV fait",
      "Progress bar visuelle (« 7 visites sur 10 ») pour ne jamais oublier où vous en êtes",
      "Notification quand une récompense est prête à être réclamée",
    ],
  },
  {
    id: "profil",
    icon: "users", tone: "sage",
    name: "Votre profil partagé",
    tagline: "Vos préférences sont retenues.",
    why: "Vos infos (nom, téléphone, allergies, préférences) sont stockées une seule fois et partagées avec les pros que VOUS autorisez. Plus besoin de tout re-saisir à chaque nouveau salon.",
    bullets: [
      "Email + téléphone modifiables à tout moment",
      "Vos préférences (allergies, sensibilités, notes) visibles par vos pros autorisés",
      "Vous pouvez retirer votre autorisation à tout moment",
    ],
  },
  {
    id: "avis",
    icon: "chat", tone: "cli",
    name: "Laissez vos avis",
    tagline: "Aidez d'autres clients à choisir.",
    why: "Après chaque RDV fait, vous pouvez laisser un avis privé à votre pro. Si vous le souhaitez, vous pouvez aussi le rendre public sur sa page.",
    bullets: [
      "Notation simple (étoiles) + commentaire libre",
      "Vous choisissez s'il est visible publiquement ou réservé au pro",
      "Modifiable jusqu'à 7 jours après publication",
    ],
  },
];

// Page Guide CLIENT — miroir exact de FeaturesPage pro (pages-a.jsx) :
// PageHeader + table of contents (pills) + sections alternées (texte + mock).
// Pas de fond dégradé violet — fond blanc comme le pro pour cohérence.
const ClientGuidePage = ({ go }) => (
  <>
    <PageHeader
      eyebrow="Guide compte client"
      title="Tout ce que votre compte client sait faire."
      subtitle="Le compte client ClientBase est gratuit, sans engagement, et vous donne une vue d'ensemble de tous vos rendez-vous chez vos pros préférés."
    />

    {/* Table of contents — pills cliquables, scroll vers la section */}
    <section style={{ padding: "8px 0 36px" }}>
      <div className="container">
        <div style={{
          display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 6,
          maxWidth: 780, margin: "0 auto",
        }}>
          {CLIENT_FEATURES.map(f => {
            const tone = CLIENT_PREVIEW_TONE[f.tone] || CLIENT_PREVIEW_TONE.cli;
            return (
              <a key={f.id} href={`#${f.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={f.icon} size={13} style={{ color: tone.ink }}/>
                {f.name}
              </a>
            );
          })}
        </div>
      </div>
    </section>

    {/* Sections alternées texte / mock — strictement aligné sur GuideSection pro */}
    <section style={{ padding: "8px 0 60px" }}>
      <div className="container">
        <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
          {CLIENT_FEATURES.map((f, i) => (
            <ClientGuideSection key={f.id} f={f} flip={i % 2 === 1}/>
          ))}
        </div>

        <Reveal delay={0.18}>
          <div style={{
            marginTop: 56, padding: "28px 24px", textAlign: "center",
            background: "var(--bg-section)", borderRadius: 18,
            border: "1px solid var(--line)",
            maxWidth: 600, margin: "56px auto 0",
          }}>
            <h3 style={{ fontSize: 20, letterSpacing: "-0.02em" }}>
              Prêt·e à essayer ?
            </h3>
            <p style={{ marginTop: 6, fontSize: 14, color: "var(--ink-3)" }}>
              Compte gratuit, créé en 30 secondes.
            </p>
            <button
              onClick={() => go("clientSignup")}
              className="btn btn-lg"
              style={{
                marginTop: 18,
                background: "var(--cli-accent)", color: "#fff", border: "none",
                boxShadow: "0 14px 32px -12px var(--cli-accent)",
              }}>
              Créer mon compte <Icon name="arrow" size={15}/>
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  </>
);

// Section alternée texte/mock (parité avec GuideSection pro de pages-a.jsx).
const ClientGuideSection = ({ f, flip = false }) => {
  const tone = CLIENT_PREVIEW_TONE[f.tone] || CLIENT_PREVIEW_TONE.cli;
  return (
    <div id={f.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={f.icon} size={18}/>
          </div>
        </div>
        <h2 style={{ fontSize: "clamp(24px, 3vw, 34px)", letterSpacing: "-0.025em", marginTop: 14 }}>
          {f.name}
        </h2>
        <div style={{ fontSize: 16, color: tone.ink, fontWeight: 520, marginTop: 4 }}>
          {f.tagline}
        </div>
        <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)" }}>
          {f.why}
        </p>
        <ul style={{
          listStyle: "none", padding: 0, margin: "18px 0 0",
          display: "flex", flexDirection: "column", gap: 8,
        }}>
          {f.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 }}>
        {/* Mock visuel pour chaque feature — taille un peu plus généreuse
            sur la page Guide qu'en preview du Hero. */}
        <ClientFeatureMock kind={f.mock || f.id} tone={tone}/>
      </div>
    </div>
  );
};

/* ============ CONTACT, version client (form court) ============ */
const ClientContactPage = ({ go }) => {
  const [form, setForm] = React.useState({ name: "", email: "", subject: "Question générale", message: "" });
  const [busy, setBusy] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setErr(null);
    if (!form.name.trim()) { setErr("Votre prénom est requis."); return; }
    if (!form.email.trim() || !form.email.includes("@")) { setErr("Email invalide."); return; }
    if (!form.message.trim() || form.message.trim().length < 10) { setErr("Message trop court (10 caractères minimum)."); return; }
    setBusy(true);
    try {
      const fn = window.sendContactMail;
      if (typeof fn !== "function") {
        setErr("Service temporairement indisponible. Réessayez dans un instant.");
        setBusy(false);
        return;
      }
      const res = await fn({
        subject: `[ClientBase Client, ${form.subject}] ${form.name}`,
        from: form.name,
        replyTo: form.email,
        message: form.message,
        meta: { Source: "Site vitrine / Page contact client" },
      });
      setBusy(false);
      if (res && res.error) { setErr(res.error); return; }
      setSent(true);
    } catch {
      setBusy(false);
      setErr("Erreur d'envoi. Réessayez ou écrivez-nous à clientbase.fr@gmail.com.");
    }
  };

  return (
    <section style={{ padding: "clamp(48px, 6vw, 88px) 0" }}>
      <div className="container" style={{ maxWidth: 580, margin: "0 auto" }}>
        <div style={{ textAlign: "center" }}>
          <span className="eyebrow" style={{ color: "var(--cli-ink)" }}>Contact</span>
          <h1 style={{ marginTop: 8, fontSize: "clamp(28px, 3.6vw, 42px)", letterSpacing: "-0.028em" }}>
            Une question ? On est là.
          </h1>
          <p style={{ marginTop: 12, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55 }}>
            Bug, suggestion, problème avec un pro ? Écrivez-nous, on lit tout.
            Réponse sous 48 h en semaine.
          </p>
        </div>

        {sent ? (
          <Reveal>
            <div style={{
              marginTop: 28, padding: "26px 24px",
              background: "var(--sage-soft)",
              border: "1px solid var(--sage-soft-2)", borderRadius: 16,
              textAlign: "center",
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: "50%",
                background: "var(--sage)", color: "#fff",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                marginBottom: 10,
              }}>
                <Icon name="check" size={22} stroke={2.4}/>
              </div>
              <h3 style={{ fontSize: 18, letterSpacing: "-0.02em" }}>Message envoyé !</h3>
              <p style={{ marginTop: 6, fontSize: 14, color: "var(--ink-3)", lineHeight: 1.5 }}>
                On vous répond par email à <strong style={{ color: "var(--ink-2)" }}>{form.email}</strong>.
              </p>
              <button onClick={() => go("clientHome")} className="btn btn-ghost" style={{ marginTop: 16 }}>
                Retour à l'accueil
              </button>
            </div>
          </Reveal>
        ) : (
          <Reveal>
            <form onSubmit={submit} style={{
              marginTop: 28, padding: "26px 24px",
              background: "var(--surface)",
              border: "1px solid var(--line)", borderRadius: 16,
              display: "flex", flexDirection: "column", gap: 14,
            }}>
              <div>
                <label style={contactLabelStyle}>Votre prénom</label>
                <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })}
                  placeholder="Camille" required
                  style={contactInputStyle}/>
              </div>
              <div>
                <label style={contactLabelStyle}>Email</label>
                <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })}
                  placeholder="camille@exemple.fr" required
                  style={contactInputStyle}/>
              </div>
              <div>
                <label style={contactLabelStyle}>Sujet</label>
                <select value={form.subject} onChange={e => setForm({ ...form, subject: e.target.value })}
                  style={{ ...contactInputStyle, cursor: "pointer" }}>
                  <option>Question générale</option>
                  <option>Problème avec mon compte</option>
                  <option>Problème avec un rendez-vous</option>
                  <option>Suggestion / idée</option>
                  <option>Signaler un bug</option>
                </select>
              </div>
              <div>
                <label style={contactLabelStyle}>Votre message</label>
                <textarea value={form.message} onChange={e => setForm({ ...form, message: e.target.value })}
                  placeholder="Dites-nous tout…" rows={5} required
                  style={{ ...contactInputStyle, resize: "vertical", minHeight: 100 }}/>
              </div>
              {err && (
                <div style={{
                  padding: "10px 12px",
                  background: "oklch(96% 0.04 25)", color: "oklch(45% 0.18 25)",
                  border: "1px solid oklch(88% 0.10 25)", borderRadius: 10,
                  fontSize: 13,
                }}>{err}</div>
              )}
              <button type="submit" disabled={busy}
                className="btn btn-lg"
                style={{
                  background: "var(--cli-accent)", color: "#fff", border: "none",
                  opacity: busy ? 0.65 : 1, cursor: busy ? "wait" : "pointer",
                  boxShadow: "0 14px 32px -12px var(--cli-accent)",
                }}>
                {busy ? "Envoi en cours…" : "Envoyer mon message"} {!busy && <Icon name="arrow" size={15}/>}
              </button>
            </form>
          </Reveal>
        )}

        <div style={{
          marginTop: 20, textAlign: "center", fontSize: 12.5, color: "var(--ink-4)",
        }}>
          Préférez l'email direct ?{" "}
          <a href="mailto:clientbase.fr@gmail.com" style={{ color: "var(--cli-ink)", textDecoration: "underline" }}>
            clientbase.fr@gmail.com
          </a>
        </div>
      </div>
    </section>
  );
};

const contactLabelStyle = {
  display: "block", marginBottom: 6,
  fontSize: 13, fontWeight: 540, color: "var(--ink-2)",
  letterSpacing: "-0.005em",
};
const contactInputStyle = {
  width: "100%", padding: "11px 13px",
  background: "var(--bg-alt)", border: "1px solid var(--line)",
  borderRadius: 10, fontSize: 14, color: "var(--ink)",
  fontFamily: "inherit", outline: "none",
};

// Exposition globale, index.html n'utilise pas d'import ES modules.
try {
  window.ClientHomePage = ClientHomePage;
  window.ClientGuidePage = ClientGuidePage;
  window.ClientContactPage = ClientContactPage;
} catch {}