// ROI calculator + testimonials + pricing + FAQ + final CTA + footer

function ROICalculator() {
  const [calls, setCalls] = useState(40);
  const [missedRate, setMissedRate] = useState(35);
  const [avgTicket, setAvgTicket] = useState(280);

  const missedCalls = Math.round(calls * 4.3 * (missedRate / 100));
  const recoveredCalls = Math.round(missedCalls * 0.78);
  const recoveredRevenue = recoveredCalls * avgTicket;
  const hoursPerWeek = Math.round(calls * 0.12 + 6);
  const annualGain = recoveredRevenue * 12;

  return (
    <section className="section" id="roi">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Calculateur</span>
          <h2 className="h-section">Combien LeadCustom<br/>vous fait-il <span className="serif">vraiment</span> gagner ?</h2>
          <p>Réglez votre situation, voyez le retour en temps réel.</p>
        </div>

        <div className="roi reveal">
          <div className="roi-grid">
            <div className="roi-controls">
              <div className="slider-group">
                <label>
                  Appels reçus / semaine
                  <span className="val">{calls}</span>
                </label>
                <input type="range" min="5" max="200" value={calls} onChange={e => setCalls(+e.target.value)} />
              </div>
              <div className="slider-group">
                <label>
                  % d'appels manqués actuellement
                  <span className="val">{missedRate}%</span>
                </label>
                <input type="range" min="0" max="80" value={missedRate} onChange={e => setMissedRate(+e.target.value)} />
              </div>
              <div className="slider-group">
                <label>
                  Panier moyen par client
                  <span className="val">{avgTicket} €</span>
                </label>
                <input type="range" min="50" max="1500" step="10" value={avgTicket} onChange={e => setAvgTicket(+e.target.value)} />
              </div>

              <div style={{
                padding: 16,
                background: 'oklch(0.72 0.18 290 / 0.06)',
                border: '1px solid oklch(0.72 0.18 290 / 0.2)',
                borderRadius: 12,
                fontSize: 13,
                color: 'var(--text-muted)',
                display: 'flex',
                gap: 10,
                alignItems: 'flex-start',
              }}>
                <Icon.Sparkle size={14} />
                <span>Estimation basée sur la moyenne de 2 400+ artisans utilisant LeadCustom (mars 2026).</span>
              </div>
            </div>

            <div className="roi-results">
              <div className="roi-stat">
                <div className="roi-stat-label">Appels récupérés / mois</div>
                <div className="roi-stat-value cyan">{recoveredCalls}</div>
                <div className="roi-stat-sub">sur {missedCalls * 4.33 | 0} actuellement perdus</div>
              </div>
              <div className="roi-stat">
                <div className="roi-stat-label">Heures gagnées / sem.</div>
                <div className="roi-stat-value">{hoursPerWeek}h</div>
                <div className="roi-stat-sub">admin, devis, relances</div>
              </div>
              <div className="roi-stat full">
                <div className="roi-stat-label">CA additionnel annuel estimé</div>
                <div className="roi-stat-value accent" style={{ fontSize: 56 }}>
                  +{annualGain.toLocaleString('fr-FR')} €
                </div>
                <div className="roi-stat-sub">
                  Soit ROI &gt; <span style={{ color: 'var(--green)' }}>×{Math.max(4, Math.round(annualGain / (290 * 12))) }</span> sur le plan Studio
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    {
      quote: "On a viré la secrétaire sous-traitée. LeadCustom prend tous les appels en 2 sonneries, qualifie mieux qu'un humain et nous résume tout dans Slack.",
      name: 'Julien Moreau',
      role: 'Atelier Moreau · Plomberie · Lyon',
      initials: 'JM',
    },
    {
      quote: "Les devis vocaux ont changé ma vie. Je parle 30 secondes en sortant de chez le client, et le devis est dans sa boîte mail avant que je sois rentré.",
      name: 'Sophie Bertrand',
      role: 'Bertrand BTP · Rénovation · Toulouse',
      initials: 'SB',
    },
    {
      quote: "+47 % d'avis Google en 3 mois sans rien faire. Et ma note est passée de 4,2 à 4,9. Mes concurrents me demandent comment je fais.",
      name: 'Karim Haddad',
      role: 'Garage&Co · Mécanique · Marseille',
      initials: 'KH',
    },
    {
      quote: "DealFlow Immo a doublé nos prises de mandats en 2 mois. Le standard IA décroche les acheteurs le soir et le week-end, on récupère des leads que la concurrence laisse filer.",
      name: 'Sophie Renard',
      role: 'Renard Immobilier · 3 agences · Lyon',
      initials: 'SR',
    },
    {
      quote: "J'ai économisé 15h par semaine sur les relances et l'admin. Mon CA a fait +28 % en 90 jours sans embaucher. Le ROI est démentiel.",
      name: 'Antoine Loiseau',
      role: 'Studio Loiseau · Agence digitale · Bordeaux',
      initials: 'AL',
    },
    {
      quote: "Les acheteurs sont qualifiés AVANT que je les rappelle. Je passe 3x moins de temps sur les leads non-mûrs et je signe plus.",
      name: 'Mehdi Aziz',
      role: 'Aziz Immobilier · Mandataire · Paris',
      initials: 'MA',
    },
    {
      quote: "Avant je ratais 4 appels sur 10. Aujourd'hui zéro. Et mon planning se remplit tout seul. C'est exactement le SaaS que j'attendais.",
      name: 'Léa Dubois',
      role: 'Esthétique Léa · Bien-être · Nantes',
      initials: 'LD',
    },
    {
      quote: "Le setup à 890 € m'a fait hésiter 24h. Aujourd'hui je l'ai amorti en 3 semaines. C'est le meilleur achat business de l'année.",
      name: 'Thomas Vidal',
      role: 'Vidal Électricité · Artisan · Montpellier',
      initials: 'TV',
    },
    {
      quote: "L'agent IA WhatsApp répond à nos clients toute la nuit et prend les commandes. On a doublé nos ventes en ligne en 2 mois, sans embaucher.",
      name: 'Aïssatou Diallo',
      role: 'Boutique Faro · E-commerce · Dakar',
      initials: 'AD',
    },
    {
      quote: "Les pubs Facebook et TikTok tournent toutes seules et les visuels sont générés par l'IA. Nos rendez-vous ont triplé. Du jamais vu pour ma clinique.",
      name: 'Dr. Kwame Mensah',
      role: 'Clinique Akoma · Santé · Accra',
      initials: 'KM',
    },
    {
      quote: "Relances mobile money automatiques et vidéos marketing avec clonage de voix : on a réduit les impayés de 60 % et boosté la notoriété. Adapté à notre réalité.",
      name: 'Chidi Okonkwo',
      role: 'PayQuick · Fintech · Lagos',
      initials: 'CO',
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Témoignages</span>
          <h2 className="h-section">2 400+ pros qui dorment <span className="serif">enfin.</span></h2>
          <div style={{ display: 'flex', gap: 24, justifyContent: 'center', marginTop: 20, flexWrap: 'wrap', alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex', gap: 2 }}>
                {[0,1,2,3,4].map(j => <Icon.Star key={j} filled size={16} />)}
              </div>
              <span style={{ fontWeight: 500, fontSize: 16 }}>4,9/5</span>
              <span style={{ color: 'var(--text-muted)', fontSize: 13 }}>· 1 247 avis</span>
            </div>
            <div style={{ width: 1, height: 20, background: 'var(--border)' }}></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--text-muted)' }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'oklch(0.78 0.16 150)', display: 'inline-block', boxShadow: '0 0 8px oklch(0.78 0.16 150)' }}></span>
              <span><strong style={{ color: 'var(--text)' }}>97 %</strong> recommandent</span>
            </div>
            <div style={{ width: 1, height: 20, background: 'var(--border)' }}></div>
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>
              <strong style={{ color: 'var(--text)' }}>Trustpilot</strong> · <strong style={{ color: 'var(--text)' }}>Google</strong> · <strong style={{ color: 'var(--text)' }}>Capterra</strong>
            </div>
          </div>
        </div>
        <div className="testimonials">
          {items.map((t, i) => (
            <div key={i} className="testimonial reveal">
              <div className="testimonial-stars">
                {[0,1,2,3,4].map(j => <Icon.Star key={j} filled size={14} />)}
              </div>
              <div className="testimonial-quote">"{t.quote}"</div>
              <div className="testimonial-author">
                <div className="t-avatar">{t.initials}</div>
                <div>
                  <div className="t-name">{t.name}</div>
                  <div className="t-role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AfricaSection() {
  const cfg = (typeof window !== 'undefined' && window.LC_CONFIG) ? window.LC_CONFIG : { webhooks: {} };
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSending(true);
    const form = e.target;
    const payload = {
      type: 'devis_afrique',
      name: form.name.value,
      company: form.company.value,
      country: form.country.value,
      whatsapp: form.whatsapp.value,
      email: form.email.value,
      needs: form.needs.value,
      timestamp: new Date().toISOString(),
    };
    try {
      const url = (cfg.webhooks && cfg.webhooks.contact) || '';
      if (url) {
        await fetch(url, { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
      }
    } catch (err) { /* silencieux */ }
    setSending(false);
    setSent(true);
  };

  return (
    <div className="reveal africa-card" style={{
      marginTop: 16,
      padding: 0,
      borderRadius: 24,
      border: '1px solid var(--border-bright)',
      overflow: 'hidden',
      position: 'relative',
      background: 'linear-gradient(135deg, oklch(0.2 0.05 50), oklch(0.16 0.03 30) 55%, var(--bg-card))',
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(circle at 85% 20%, oklch(0.78 0.16 65 / 0.25), transparent 55%)',
      }}></div>

      <div className="africa-grid" style={{
        position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
      }}>
        {/* Texte */}
        <div style={{ padding: 40 }}>
          <span className="eyebrow" style={{
            background: 'oklch(0.78 0.16 65 / 0.12)',
            borderColor: 'oklch(0.78 0.16 65 / 0.3)',
            color: 'oklch(0.85 0.14 65)',
          }}>🌍 Spécial Afrique</span>
          <h3 style={{ fontSize: 30, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1.05, marginTop: 18 }}>
            L'IA au service des entreprises <span className="serif" style={{ color: 'oklch(0.85 0.14 65)' }}>africaines.</span>
          </h3>
          <p style={{ marginTop: 16, fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.6, textWrap: 'pretty' }}>
            Commerçants, PME, écoles, cliniques, fintechs, e-commerces : l'Afrique se digitalise vite, et WhatsApp est roi. On adapte LeadCustom à vos réalités — agents IA, paiement mobile money, multilingue, faible bande passante, support WhatsApp first.
          </p>
          <ul style={{ listStyle: 'none', marginTop: 20, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              'Agent IA & chatbot WhatsApp qui vend et répond 24/7, même hors ligne',
              'Standard IA multilingue (français, anglais, wolof, lingala, arabe…)',
              'Automatisation des publicités (Facebook, TikTok, Google) qui tournent seules',
              'Création de contenu IA : vidéos, affiches publicitaires, visuels réseaux',
              'Clonage de voix & avatar pour vos vidéos marketing et messages vocaux',
              'Relances paiement mobile money & rappels par WhatsApp et SMS',
              'Solution sur devis, adaptée à votre budget local',
            ].map((t, i) => (
              <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--text)' }}>
                <span style={{ flexShrink: 0, color: 'oklch(0.85 0.14 65)' }}><Icon.Check size={16} /></span>
                <span style={{ color: 'var(--text-muted)' }}>{t}</span>
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 22, padding: '12px 14px', borderRadius: 12, background: 'oklch(0.72 0.16 145 / 0.1)', border: '1px solid oklch(0.72 0.16 145 / 0.25)', display: 'flex', alignItems: 'center', gap: 10, fontSize: 13 }}>
            <span style={{ fontSize: 18 }}>💬</span>
            <span style={{ color: 'var(--text)' }}>
              Nos numéros fonctionnent aussi sur <strong style={{ color: 'oklch(0.8 0.15 145)' }}>WhatsApp</strong> :{' '}
              <a href="https://wa.me/33752989245" target="_blank" rel="noopener" style={{ color: 'oklch(0.85 0.14 145)', textDecoration: 'none', fontWeight: 500 }}>+33 7 52 98 92 45</a>
              {' · '}
              <a href="https://wa.me/19042437876" target="_blank" rel="noopener" style={{ color: 'oklch(0.85 0.14 145)', textDecoration: 'none', fontWeight: 500 }}>+1 (904) 243-7876</a>
            </span>
          </div>
        </div>

        {/* Formulaire */}
        <div style={{ padding: 40, borderLeft: '1px solid var(--border)', background: 'oklch(0.14 0.012 270 / 0.5)' }}>
          {sent ? (
            <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'oklch(0.78 0.16 145 / 0.15)', color: 'oklch(0.8 0.15 145)', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
                <Icon.Check size={28} />
              </div>
              <h4 style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em' }}>Demande reçue !</h4>
              <p style={{ marginTop: 8, fontSize: 14, color: 'var(--text-muted)', maxWidth: 280 }}>
                Merci. On revient vers vous très vite — par email ou directement sur WhatsApp.
              </p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontSize: 11, fontFamily: 'Geist Mono, monospace', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-dim)', marginBottom: 2 }}>
                Demander un devis Afrique
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <input name="name" required placeholder="Votre nom" className="africa-input" />
                <input name="company" placeholder="Entreprise" className="africa-input" />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <input name="country" required placeholder="Pays (ex. Sénégal)" className="africa-input" />
                <input name="whatsapp" required placeholder="N° WhatsApp" className="africa-input" />
              </div>
              <input name="email" type="email" placeholder="Email (optionnel)" className="africa-input" />
              <textarea name="needs" required rows="3" placeholder="Que voulez-vous automatiser ? (ex. répondre aux clients sur WhatsApp, relancer les paiements, prendre les commandes…)" className="africa-input" style={{ resize: 'vertical', fontFamily: 'inherit' }}></textarea>
              <button type="submit" className="btn btn-accent" disabled={sending} style={{ marginTop: 4, justifyContent: 'center' }}>
                {sending ? 'Envoi…' : <>Demander mon devis <Icon.Arrow /></>}
              </button>
              <p style={{ fontSize: 11.5, color: 'var(--text-dim)', textAlign: 'center', lineHeight: 1.5 }}>
                Gratuit, sans engagement. Réponse rapide par email ou WhatsApp.
              </p>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

function Pricing() {
  const cfg = (typeof window !== 'undefined' && window.LC_CONFIG) ? window.LC_CONFIG : { stripe: {} };
  const offers = [
    {
      emoji: '🏠',
      name: 'LeadFlow Artisan',
      stripeUrl: cfg.stripe.artisan || '#',
      target: 'Pour artisans · plombiers · électriciens · BTP',
      promise: 'Plus de chantiers signés, sans secrétaire, sans rater un appel.',
      setup: 890,
      monthly: 199,
      benefits: [
        { strong: '+30 à 50 % de demandes', rest: ' transformées en chantiers' },
        { strong: '0 appel manqué', rest: ' : l\'IA décroche 24/7 et qualifie' },
        { strong: 'Devis en 5 min', rest: ' au lieu d\'un soir entier' },
        { strong: '4,9 ★ sur Google', rest: ' sans rien faire' },
      ],
      setupIncludes: [
        'Configuration du standard IA avec votre voix',
        'Connexion WhatsApp + Messenger',
        'Modèle de devis & facture à votre image',
        'Branchement de la fiche Google + avis auto',
        '1h de coaching live pour bien démarrer',
      ],
      monthlyIncludes: [
        'Standard IA + chatbot 24/7',
        'Devis & factures illimités',
        'Relances automatiques jusqu\'à signature',
        'Planning intelligent + rappels SMS clients',
        'Tableau de bord temps réel',
      ],
      options: [
        { label: 'Avis Google automatisés', price: '+49 €/mois' },
        { label: 'Agent IA WhatsApp avancé', price: '+89 €/mois' },
      ],
    },
    {
      emoji: '🏢',
      name: 'DealFlow Immo',
      stripeUrl: cfg.stripe.immo || '#',
      target: 'Pour agences immobilières · mandataires',
      promise: 'Plus de mandats, plus de visites, zéro lead perdu.',
      setup: 1490,
      monthly: 390,
      featured: true,
      tag: 'Le plus choisi',
      benefits: [
        { strong: '×2 prises de contact', rest: ' qualifiées en 30 jours' },
        { strong: 'Aucun lead froid', rest: ' : tous relancés automatiquement' },
        { strong: 'Visites bookées seules', rest: ' sans aller-retour téléphone' },
        { strong: 'Vendeurs réactivés', rest: ' sur les annonces dormantes' },
      ],
      setupIncludes: [
        'IA paramétrée pour acheteurs ET vendeurs',
        'Synchronisation portail (SeLoger, Leboncoin, etc.)',
        'Scénarios de relance vendeurs sur mesure',
        'Prise de RDV connectée à votre agenda',
        '1h de coaching équipe + scripts vente',
      ],
      monthlyIncludes: [
        'Qualification IA des leads entrants',
        'Relances multicanal (SMS, mail, WhatsApp)',
        'Standard IA visites + estimations',
        'Reporting mandataires hebdo',
        'Jusqu\'à 5 collaborateurs',
      ],
      options: [
        { label: 'Relances vendeurs automatisées', price: '+99 €/mois' },
        { label: 'Qualification IA leads premium', price: '+149 €/mois' },
        { label: 'Prise de RDV automatisée', price: '+79 €/mois' },
      ],
    },
    {
      emoji: '🏢',
      name: 'AutoGrowth System',
      stripeUrl: cfg.stripe.pme || '#',
      target: 'Pour PME · agences · commerces · services B2B',
      promise: 'Une machine à clients qui tourne pendant que vous dormez.',
      setup: 1190,
      monthly: 290,
      benefits: [
        { strong: '+25 % de CA', rest: ' sur les 90 premiers jours' },
        { strong: '15 h/semaine économisées', rest: ' sur l\'admin et les relances' },
        { strong: 'Présence en ligne pilotée', rest: ' (Google, Insta, Facebook)' },
        { strong: 'Aucun client oublié', rest: ' : tous relancés au bon moment' },
      ],
      setupIncludes: [
        'Audit business + cartographie de vos canaux',
        'Configuration CRM + automatisations métier',
        'Scénarios de relance multi-canal',
        'Connexion Instagram + Facebook + Google',
        '1h de stratégie avec un expert',
      ],
      monthlyIncludes: [
        'CRM IA tout-en-un',
        'Standard IA + chatbot multi-canal',
        'Tableau de bord ROI mensuel',
        'Posts réseaux sociaux IA',
        'Jusqu\'à 5 utilisateurs',
      ],
      options: [
        { label: 'Google Ads piloté par IA', price: '+199 €/mois' },
        { label: 'Contenu réseaux sociaux IA', price: '+89 €/mois' },
        { label: 'Relances multi-canal avancées', price: '+119 €/mois' },
      ],
    },
  ];

  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Offres premium</span>
          <h2 className="h-section">Choisissez votre <span className="serif">machine à clients.</span></h2>
          <p>Setup unique, abonnement mensuel sans engagement. Un humain vous accompagne pour démarrer, gratuitement.</p>
        </div>

        <div className="plans">
          {offers.map((o, i) => (
            <div key={i} className={`plan ${o.featured ? 'featured' : ''} reveal`}>
              {o.tag && <div className="plan-tag">{o.tag}</div>}
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                <span style={{ fontSize: 22 }}>{o.emoji}</span>
                <span className="plan-name" style={{ marginTop: 0 }}>{o.name}</span>
              </div>
              <div className="plan-desc" style={{ marginTop: 10 }}>{o.target}</div>

              <div className="plan-promise" style={{
                marginTop: 16,
                padding: '14px 16px',
                background: o.featured ? 'oklch(0.72 0.18 290 / 0.1)' : 'var(--bg-elevated)',
                border: `1px solid ${o.featured ? 'oklch(0.72 0.18 290 / 0.3)' : 'var(--border)'}`,
                borderRadius: 12,
                lineHeight: 1.45,
                color: 'var(--text)',
                fontStyle: 'italic',
                fontFamily: "'Instrument Serif', serif",
                letterSpacing: '-0.01em',
              }}>
                "{o.promise}"
              </div>

              <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
                <span className="plan-price-main plan-setup-price">{o.setup}€</span>
                <span className="plan-price-period">setup unique</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4, flexWrap: 'wrap' }}>
                <span className="plan-monthly-price">+{o.monthly}€</span>
                <span className="plan-price-period">/ mois · sans engagement</span>
              </div>

              <a href={o.stripeUrl} target="_blank" rel="noopener" className={`btn ${o.featured ? 'btn-accent' : 'btn-primary'} plan-cta`}>
                Choisir cette offre <Icon.Arrow />
              </a>

              <div className="plan-sec-label">Ce que vous gagnez</div>
              <ul className="plan-features" style={{ marginTop: 12, paddingTop: 0, borderTop: 'none' }}>
                {o.benefits.map((b, j) => (
                  <li key={j}>
                    <Icon.Check size={14} />
                    <span><strong>{b.strong}</strong>{b.rest}</span>
                  </li>
                ))}
              </ul>

              <div className="plan-sec-label">Inclus dans le setup</div>
              <ul className="plan-features svc" style={{ marginTop: 12, paddingTop: 0, borderTop: 'none' }}>
                {o.setupIncludes.map((s, j) => (
                  <li key={j} style={{ fontSize: 13.5 }}>
                    <Icon.Check size={13} />
                    <span>{s}</span>
                  </li>
                ))}
              </ul>

              <div className="plan-sec-label">Inclus chaque mois</div>
              <ul className="plan-features svc" style={{ marginTop: 12, paddingTop: 0, borderTop: 'none' }}>
                {o.monthlyIncludes.map((s, j) => (
                  <li key={j} style={{ fontSize: 13.5 }}>
                    <Icon.Check size={13} />
                    <span>{s}</span>
                  </li>
                ))}
              </ul>

              <div className="plan-sec-label">Options pour aller plus loin</div>
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {o.options.map((opt, j) => (
                  <div key={j} style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    flexWrap: 'wrap',
                    gap: '4px 12px',
                    padding: '8px 12px',
                    background: 'var(--bg-elevated)',
                    border: '1px solid var(--border)',
                    borderRadius: 8,
                    fontSize: 13,
                  }}>
                    <span style={{ color: 'var(--text-muted)' }}>{opt.label}</span>
                    <span style={{ fontFamily: 'Geist Mono, monospace', fontSize: 12, color: 'var(--accent-bright)', whiteSpace: 'nowrap' }}>{opt.price}</span>
                  </div>
                ))}
              </div>

              <div style={{
                marginTop: 20,
                padding: '12px 14px',
                background: 'oklch(0.78 0.16 150 / 0.08)',
                border: '1px solid oklch(0.78 0.16 150 / 0.25)',
                borderRadius: 10,
                fontSize: 12,
                color: 'var(--text-muted)',
                lineHeight: 1.5,
                display: 'flex',
                gap: 10,
              }}>
                <span style={{
                  flexShrink: 0,
                  width: 22, height: 22,
                  borderRadius: '50%',
                  background: 'oklch(0.78 0.16 150 / 0.2)',
                  color: 'var(--green)',
                  display: 'grid',
                  placeItems: 'center',
                }}><Icon.Check size={12} /></span>
                <span>
                  <strong style={{ color: 'var(--text)' }}>Garantie 14 jours.</strong> Pas de nouveaux leads ou de demandes en plus ? Vous êtes intégralement remboursé.
                </span>
              </div>
            </div>
          ))}
        </div>

        {/* Section spéciale Afrique */}
        <AfricaSection />

        {/* Post-purchase flow */}
        <div className="reveal" style={{
          marginTop: 64,
          padding: 40,
          background: 'linear-gradient(180deg, var(--bg-card), var(--bg-elevated))',
          border: '1px solid var(--border-bright)',
          borderRadius: 24,
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32, alignItems: 'center' }} className="flow-grid">
            <div style={{ flexShrink: 0 }}>
              <div style={{
                width: 64, height: 64,
                borderRadius: 16,
                background: 'linear-gradient(135deg, var(--accent-bright), var(--accent))',
                display: 'grid',
                placeItems: 'center',
                color: 'var(--text)',
                boxShadow: '0 0 0 1px oklch(1 0 0 / 0.1) inset, 0 8px 24px var(--accent-glow)',
              }}>
                <Icon.Sparkle size={28} />
              </div>
            </div>
            <div>
              <div className="mono dim" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Comment ça marche après le paiement</div>
              <h3 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.2 }}>
                Paiement → reçu par mail → <span className="serif" style={{ color: 'var(--accent-bright)' }}>assistance gratuite</span> avant de démarrer l'abonnement.
              </h3>
            </div>
          </div>

          <div style={{
            marginTop: 32,
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 12,
          }} className="flow-steps">
            {[
              { n: '01', title: 'Vous choisissez votre offre', desc: 'Cliquez sur "Choisir cette offre" : vous êtes redirigé vers un paiement sécurisé.' },
              { n: '02', title: 'Reçu + récap par email', desc: 'Dès le paiement validé, vous recevez le reçu et le récapitulatif complet de votre commande dans votre boîte.' },
              { n: '03', title: 'Assistance gratuite incluse', desc: 'Avant que l\'abonnement démarre, un expert vous accompagne pour configurer, personnaliser et tester. Tant que ce n\'est pas prêt, vous ne payez rien de plus.' },
              { n: '04', title: 'Vous démarrez gagnant', desc: 'Une fois opérationnel, l\'abonnement mensuel se déclenche. Garantie 14 jours active.' },
            ].map((s, i) => (
              <div key={i} style={{
                padding: 20,
                background: 'oklch(0.14 0.012 270 / 0.5)',
                border: '1px solid var(--border)',
                borderRadius: 14,
              }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent-bright)', letterSpacing: '0.08em' }}>{s.n}</div>
                <div style={{ marginTop: 8, fontSize: 14, fontWeight: 500, lineHeight: 1.3, letterSpacing: '-0.01em' }}>{s.title}</div>
                <div style={{ marginTop: 6, fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>{s.desc}</div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 24,
            padding: '14px 18px',
            background: 'oklch(0.72 0.18 290 / 0.1)',
            border: '1px solid oklch(0.72 0.18 290 / 0.25)',
            borderRadius: 12,
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            fontSize: 14,
            color: 'var(--text)',
          }}>
            <Icon.Sparkle size={16} />
            <span>
              <strong>Important :</strong> l'assistance avant abonnement est <strong style={{ color: 'var(--accent-bright)' }}>100 % gratuite</strong>. Vous démarrez quand tout fonctionne, pas avant.
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

function CustomDev() {
  const services = [
    {
      icon: '🌐',
      title: 'Sites web & applications sur mesure',
      desc: "Site vitrine, e-commerce, application métier ou plateforme web complète. Conçus pour convertir, pas seulement pour exister. Design premium, rapides, pensés mobile d'abord.",
      points: ['Vitrine, e-commerce, app métier', 'Design sur mesure à votre image', 'Rapides, sécurisés, responsives'],
    },
    {
      icon: '⚙️',
      title: 'Hébergement & maintenance',
      desc: "On garde votre site en ligne, rapide et à jour. Hébergement cloud sécurisé, sauvegardes automatiques, mises à jour de sécurité, surveillance 24/7. Vous ne touchez à rien.",
      points: ['Hébergement cloud sécurisé', 'Sauvegardes & mises à jour auto', 'Surveillance et support continu'],
    },
    {
      icon: '🔍',
      title: 'Référencement SEO',
      desc: "Être en ligne ne suffit pas : il faut être trouvé. On optimise votre site pour Google, on cible les bons mots-clés locaux et on construit votre visibilité dans la durée.",
      points: ['Audit + optimisation technique', 'Mots-clés locaux à fort intérêt', 'Contenu & suivi de positions'],
    },
  ];

  return (
    <section className="section" id="surmesure">
      <div className="container">
        <div className="custom-dev reveal">
          <div className="custom-dev-glow"></div>
          <div className="custom-dev-head">
            <span className="eyebrow" style={{ marginBottom: 20 }}>Service sur mesure · sur devis</span>
            <h2 className="h-section">Votre présence en ligne,<br/><span className="serif">conçue pour vendre.</span></h2>
            <p>
              Au-delà de l'automatisation, on construit la fondation : <strong style={{ color: 'var(--text)' }}>votre site web ou application</strong>, son hébergement, sa maintenance et son référencement. Un projet unique mérite un devis unique — pas un pack standard.
            </p>
          </div>

          <div className="custom-dev-grid">
            {services.map((s, i) => (
              <div key={i} className="custom-dev-card">
                <div className="custom-dev-icon">{s.icon}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <ul>
                  {s.points.map((p, j) => (
                    <li key={j}><Icon.Check size={13} /><span>{p}</span></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="custom-dev-footer">
            <div className="custom-dev-footer-left">
              <div className="custom-dev-badge">
                <span className="pulse-tiny"></span> Devis personnalisé sous 48 h
              </div>
              <p>Chaque projet est différent. Décrivez le vôtre : on revient vers vous avec une proposition claire, un calendrier et un prix ferme. Sans engagement.</p>
            </div>
            <div className="custom-dev-footer-actions">
              <a href="reservation.html" className="btn btn-accent btn-lg">Demander mon devis gratuit <Icon.Arrow /></a>
              <span className="custom-dev-note">Réponse humaine · projet cadré ensemble</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [openIdx, setOpenIdx] = useState(0);
  const items = [
    { q: "Que se passe-t-il après le paiement de l'offre ?", a: "Dès le paiement validé, vous recevez immédiatement un email avec votre reçu et le récapitulatif complet de votre commande. Un expert vous contacte ensuite pour configurer la solution avec vous — cette assistance est 100 % gratuite et incluse. L'abonnement mensuel ne démarre que lorsque tout fonctionne pour vous." },
    { q: "Pourquoi un setup à 890 à 1 490 € ?", a: "Le setup couvre la configuration sur mesure de votre standard IA, vos modèles de devis, vos scénarios de relance et vos intégrations. C'est ce qui transforme l'outil en machine à clients dès le jour 1 — au lieu d'un logiciel générique. La plupart de nos clients récupèrent leur setup en 2 à 4 semaines." },
    { q: "Comment fonctionne la garantie 14 jours ?", a: "Si dans les 14 jours suivant la mise en service vous ne constatez aucune amélioration concrète (nouveaux leads, demandes en plus, appels qualifiés), vous êtes intégralement remboursé. Aucune question, aucune justification." },
    { q: "Puis-je annuler l'abonnement à tout moment ?", a: "Oui, sans engagement. Un clic dans les paramètres et c'est terminé : vos données restent exportables pendant 30 jours." },
    { q: "L'IA peut-elle vraiment remplacer une secrétaire ?", a: "Pour les tâches répétitives (filtrer, qualifier, planifier, envoyer un devis), oui, et elle ne dort jamais. Pour les cas complexes, elle passe la main à un humain avec un brief complet." },
    { q: "Mes données sont-elles protégées ?", a: "Oui. Hébergement cloud sécurisé, chiffrement en transit et au repos, conformité RGPD (UE) et CCPA (Californie). Vous restez propriétaire de vos données et pouvez les exporter à tout moment." },
  ];
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Questions fréquentes</span>
          <h2 className="h-section">Vous avez sûrement <span className="serif">des questions.</span></h2>
        </div>
        <div className="faq reveal">
          {items.map((item, i) => (
            <div
              key={i}
              className={`faq-item ${openIdx === i ? 'open' : ''}`}
              onClick={() => setOpenIdx(openIdx === i ? -1 : i)}
            >
              <div className="faq-q">
                <span>{item.q}</span>
                <span className="faq-toggle"></span>
              </div>
              <div className="faq-a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section">
      <div className="container">
        <div className="final-cta reveal">
          <span className="eyebrow" style={{ marginBottom: 24 }}>Démarrez aujourd'hui</span>
          <h2 className="h-section">Vos clients <span className="serif">vous attendent.</span><br/>Pas l'inverse.</h2>
          <p>Choisissez l'offre adaptée à votre métier, payez le setup, et un expert vous accompagne <strong style={{ color: 'var(--text)' }}>gratuitement</strong> avant le démarrage de l'abonnement.</p>
          <div className="final-cta-actions">
            <a href="#pricing" className="btn btn-primary btn-lg">Choisir mon offre <Icon.Arrow /></a>
            <a href="reservation.html" className="btn btn-ghost btn-lg">Réserver un appel de 20 min</a>
          </div>
          <div className="hero-meta" style={{ marginTop: 32 }}>
            <span className="hero-meta-item"><span className="check"></span> Garantie 14 jours</span>
            <span className="hero-meta-item"><span className="check"></span> Assistance gratuite incluse</span>
            <span className="hero-meta-item"><Icon.Lock size={12} /> RGPD & CCPA · données chiffrées</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="logo logo-wordmark">
              <div className="logo-mark"></div>
              <span className="wordmark">
                <span className="wm-lead">Lead</span><span className="wm-custom">Custom</span>
              </span>
            </div>
            <p className="footer-tag">L'OS qui répond, devise et facture à votre place. Pour les artisans et PME de service.</p>
            <a href="mailto:contact@leadcustom.fr" className="footer-email">contact@leadcustom.fr</a>
            <div className="footer-contact">
              <a href="tel:+33752989245" className="footer-phone">+33 7 52 98 92 45</a>
              <a href="tel:+19042437876" className="footer-phone">+1 (904) 243-7876</a>
            </div>
            <div className="footer-social">
              <a href="https://instagram.com/leadcustom" target="_blank" rel="noopener" aria-label="Instagram" className="footer-social-link">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="2" width="20" height="20" rx="5.5" />
                  <circle cx="12" cy="12" r="4.2" />
                  <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none" />
                </svg>
              </a>
              <a href="https://tiktok.com/@leadcustom" target="_blank" rel="noopener" aria-label="TikTok" className="footer-social-link">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M16.5 3c.3 2.1 1.5 3.4 3.5 3.6v2.4c-1.2.1-2.4-.2-3.5-.8v5.4c0 3.2-2.4 5.4-5.3 5.4-2.7 0-4.9-2-4.9-4.7 0-2.9 2.4-4.9 5.6-4.5v2.5c-.4-.1-.9-.2-1.3-.1-1.1.1-2 .9-1.9 2.2.1 1.1 1 1.9 2.1 1.9 1.3 0 2.3-1 2.3-2.6V3h2.9z" />
                </svg>
              </a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Produit</h4>
            <ul>
              <li><a href="#features">Fonctionnalités</a></li>
              <li><a href="#chatbot">Chatbot</a></li>
              <li><a href="#receptionist">Standard IA</a></li>
              <li><a href="#pricing">Tarifs</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Entreprise</h4>
            <ul>
              <li><a href="#">À propos</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="formations.html">Formations</a></li>
              <li><a href="rejoindre.html">Nous rejoindre</a></li>
              <li><a href="deposer-mission.html">Déposer une mission</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="mailto:contact@leadcustom.fr">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Ressources</h4>
            <ul>
              <li><a href="page.html?id=aide">Centre d'aide</a></li>
              <li><a href="page.html?id=documentation">Documentation</a></li>
              <li><a href="page.html?id=api">API</a></li>
              <li><a href="page.html?id=statut">Statut</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Légal</h4>
            <ul>
              <li><a href="page.html?id=cgu">CGU</a></li>
              <li><a href="page.html?id=confidentialite">Confidentialité</a></li>
              <li><a href="page.html?id=remboursement">Remboursement</a></li>
              <li><a href="page.html?id=rgpd">RGPD</a></li>
              <li><a href="page.html?id=mentions-legales">Mentions légales</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 GRACE BUSINESS LLC · LeadCustom · contact@leadcustom.fr</span>
          <span>Tous systèmes opérationnels ●</span>
        </div>
      </div>
    </footer>
  );
}

window.ROICalculator = ROICalculator;
window.Testimonials = Testimonials;
window.Pricing = Pricing;
window.CustomDev = CustomDev;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;