/* ══════════ Fideliio — sections (haut de page) ══════════ */

// ── NAV ──
function Nav() {
  const { open } = React.useContext(RdvContext);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <Brand />
        <nav className="nav-links">
          {DATA.nav.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </nav>
        <div className="nav-cta">
          <a className="login" href={DATA.appUrl} target="_blank" rel="noopener">Connexion</a>
          <Button variant="primary" size="sm" href={DATA.registerUrl} target="_blank" rel="noopener">Essai gratuit</Button>
        </div>
      </div>
    </header>
  );
}

// ── HERO ──
function Hero() {
  const { open } = React.useContext(RdvContext);
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <div className="hero-badge">
            <span className="pill">NOUVEAU</span>
            Cartes Apple&nbsp;Wallet &amp; Google&nbsp;Wallet incluses
          </div>
          <h1>La fidélité qui<br />remplit votre <span className="hl">salle</span>.</h1>
          <p className="sub">Fideliio transforme chaque visite en raison de revenir. Carte de fidélité sans appli à télécharger pour vos clients, tableau de bord complet pour vous.</p>
          <div className="cta-row">
            <Button variant="primary" icon="arrow-right" href={DATA.registerUrl} target="_blank" rel="noopener">Démarrer gratuitement</Button>
            <Button variant="ghost" href="#how">Voir la démo</Button>
          </div>
          <div className="reassure">
            <span><Icon name="check" size={16} stroke={2.4} /> 14 jours d'essai</span>
            <span><Icon name="check" size={16} stroke={2.4} /> Sans carte bancaire</span>
            <span><Icon name="check" size={16} stroke={2.4} /> Conforme RGPD</span>
          </div>
        </div>
        <HeroVisual />
      </div>
    </section>
  );
}

function HeroVisual() {
  return (
    <div className="stage">
      {/* dashboard */}
      <div className="dash-card">
        <div className="dash-top">
          <span className="tl"></span><span className="tl"></span><span className="tl"></span>
          <span className="url">app.fideliio.fr/dashboard</span>
        </div>
        <div className="dash-body">
          <div className="stat-row">
            <div className="stat"><div className="k">Membres</div><div className="v">1 284<small>+12%</small></div></div>
            <div className="stat"><div className="k">Visites · 30j</div><div className="v">3 940</div></div>
            <div className="stat"><div className="k">Rétention</div><div className="v">68<small>%</small></div></div>
          </div>
          <div className="chart">
            <div className="lbl">Visites — 30 derniers jours</div>
            <svg viewBox="0 0 400 78" preserveAspectRatio="none">
              <defs><linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#D9694E" stopOpacity=".22" />
                <stop offset="100%" stopColor="#D9694E" stopOpacity="0" />
              </linearGradient></defs>
              <path d="M0 60 C 40 56, 60 40, 100 44 S 160 30, 200 34 S 270 14, 320 20 S 380 8, 400 10 L400 78 L0 78 Z" fill="url(#g1)" />
              <path d="M0 60 C 40 56, 60 40, 100 44 S 160 30, 200 34 S 270 14, 320 20 S 380 8, 400 10" fill="none" stroke="#D9694E" strokeWidth="2.2" strokeLinecap="round" />
            </svg>
          </div>
        </div>
      </div>

      {/* phone */}
      <div className="phone">
        <div className="notch"></div>
        <div className="phone-screen">
          <div className="ph-head">
            <div className="ph-resto">
              <div className="ph-logo">CM</div>
              <div><div className="n">Chez Mario</div><div className="t">Trattoria · Paris 11ᵉ</div></div>
            </div>
          </div>
          <div className="loyalty">
            <div className="pl">Vos points</div>
            <div className="pts">360 <small>pts</small></div>
            <div className="bar"><i></i></div>
            <div className="next"><span>Prochaine récompense</span><span><strong>140 pts</strong> · Dessert offert</span></div>
          </div>
          <WalletButtons />
          <div className="ph-reward">
            <div className="ic"><Icon name="gift" size={18} /></div>
            <div style={{ flex: 1 }}><div className="n">Café offert</div><div className="c">50 points</div></div>
            <span style={{ fontSize: 11, fontWeight: 700, color: "var(--reward)", background: "var(--reward-50)", padding: "4px 9px", borderRadius: 99 }}>Dispo</span>
          </div>
        </div>
      </div>

      {/* notification push envoyée au client (écran verrouillé) */}
      <div className="push-notif">
        <span className="pn-icon"><img src="brand/fideliio-mark.svg" alt="" width={26} height={26} /></span>
        <div className="pn-body">
          <div className="pn-head"><span className="pn-app">Fideliio</span><span className="pn-time">maintenant</span></div>
          <div className="pn-title">Chez Mario</div>
          <div className="pn-text">Plus que 140 pts pour un dessert offert 🍮 On vous garde une table ce soir&nbsp;?</div>
        </div>
      </div>

      {/* floating tag */}
      <div className="float-tag" style={{ left: 150, bottom: 60 }}>
        <span className="ic ic-reward"><Icon name="check" size={15} /></span>
        Récompense échangée
      </div>
    </div>
  );
}

// ── TRUST ──
function Trust() {
  const icons = { "Cafés": "coffee", "Restaurants": "wine" };
  return (
    <section className="trust" style={{ padding: "8px 0" }}>
      <div className="wrap">
        <div className="line">
          <span className="t-lbl">Pensé pour</span>
          {DATA.trust.map((t) => (
            <span className="t-name" key={t}>
              {icons[t] && <Icon name={icons[t]} size={17} />}{t}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── HOW ──
function How() {
  return (
    <section className="how" id="how">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow">En salle, en 10 secondes</span>
          <h2>Aussi simple qu'un QR code.</h2>
          <p>Pas d'application à installer, pas de carte en carton à perdre. Le client scanne, vous gérez tout depuis votre dashboard.</p>
        </div>
        <div className="steps">
          {DATA.steps.map((s, i) => (
            <div className="step reveal" key={s.num} style={{ "--i": i }}>
              <div className="num">{s.num}</div>
              <div className="ic"><Icon name={s.icon} size={24} /></div>
              <h3>{s.title}</h3>
              <p>{s.text}</p>
              <div className="arr">
                <svg width="44" height="20" viewBox="0 0 44 20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M0 10h40m0 0-7-6m7 6-7 6" /></svg>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FEATURES ──
function Features() {
  return (
    <section id="features">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Votre tableau de bord</span>
          <h2>Tout pour faire revenir<br />vos clients.</h2>
          <p>Fideliio n'est pas qu'une carte à tampons. C'est un véritable outil marketing pour votre établissement.</p>
        </div>

        <div className="feat-grid">
          {/* wide wallet feature */}
          <div className="feat col-12 reveal">
            <div className="feat-wide">
              <div className="copy">
                <div className="ic ic-coral"><Icon name="wallet" size={21} /></div>
                <h3 style={{ fontSize: 22 }}>Une carte dans le Wallet, pas une appli de plus</h3>
                <p style={{ fontSize: 15, maxWidth: "48ch" }}>La carte de fidélité s'ajoute directement à Apple Wallet et Google Wallet. Elle se met à jour toute seule, envoie des notifications de proximité, et ne quitte jamais la poche de vos clients.</p>
              </div>
              <div className="wallet-mini">
                <div className="top">
                  <div className="nm">Chez Mario</div>
                  <div className="mk">F<span className="d"></span></div>
                </div>
                <QRMini />
                <div className="ptline"><span style={{ fontSize: 11, opacity: .7 }}>POINTS</span><span className="b">360</span></div>
              </div>
            </div>
          </div>

          {DATA.features.map((f, i) => (
            <div className={"feat reveal col-" + (f.span || 4)} key={i} style={{ "--i": (i % 3) }}>
              <div className={"ic ic-" + f.tone}><Icon name={f.icon} size={21} /></div>
              <h3>{f.title}</h3>
              <p>{f.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, HeroVisual, Trust, How, Features });