/* QUITOS — Page sections */

const { useState, useEffect, useRef } = React;

/* ---------- 1. Hero ---------- */
function Hero() {
  const sectionRef = useRef(null);
  const videoRef   = useRef(null);
  const badgeRef   = useRef(null);
  const h1Ref      = useRef(null);
  const leadRef    = useRef(null);
  const ctaRef     = useRef(null);
  const footerRef  = useRef(null);

  useEffect(() => {
    if (!window.gsap) return;

    const els = [badgeRef.current, h1Ref.current, leadRef.current, ctaRef.current, footerRef.current];
    gsap.set(els, { opacity: 0, y: 20 });

    const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });
    tl
      .to(badgeRef.current,  { opacity: 1, y: 0, duration: 0.6 }, 0.3)
      .to(h1Ref.current,     { opacity: 1, y: 0, duration: 0.8 }, 0.5)
      .to(leadRef.current,   { opacity: 1, y: 0, duration: 0.7 }, 0.75)
      .to(ctaRef.current,    { opacity: 1, y: 0, duration: 0.6 }, 0.95)
      .to(footerRef.current, { opacity: 1, y: 0, duration: 0.5 }, 1.1);

    const parallax = ScrollTrigger.create({
      trigger: sectionRef.current,
      start: 'top top',
      end: 'bottom top',
      scrub: true,
      onUpdate: (self) => {
        if (videoRef.current) gsap.set(videoRef.current, { y: self.progress * 60 });
      },
    });

    return () => { tl.kill(); parallax.kill(); };
  }, []);

  return (
    <section ref={sectionRef} style={{
      position: 'relative', background: '#0A0A0A', color: '#fff',
      paddingTop: 180, paddingBottom: 140, overflow: 'hidden',
    }}>
      {/* Background video */}
      <video
        ref={videoRef}
        autoPlay muted loop playsInline preload="auto" aria-hidden="true"
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', zIndex: 0,
        }}
      >
        <source src="assets/video/Video Hero Home Quitos.mp4" type="video/mp4" />
      </video>

      {/* Tonal grade */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: `
          radial-gradient(ellipse at 70% 30%, rgba(170,140,100,0.22) 0%, rgba(0,0,0,0) 55%),
          radial-gradient(ellipse at 20% 80%, rgba(45,106,79,0.14) 0%, rgba(0,0,0,0) 50%)
        `,
        mixBlendMode: 'overlay',
      }} />

      {/* Gradient mesh — green ambient depth */}
      <div className="mesh-bg mesh-bg--hero" style={{ zIndex: 1 }} />

      {/* Legibility scrim */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.58) 45%, rgba(10,10,10,0.25) 100%)',
      }} />

      {/* Bottom vignette */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 220, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(180deg, rgba(10,10,10,0) 0%, #0A0A0A 100%)',
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div ref={badgeRef}>
          <div className="badge badge--dark" style={{ marginBottom: 32 }}>
            Zéro commission · Zéro interface · Résultats en euros
          </div>
        </div>
        <h1 ref={h1Ref} className="hero" style={{ maxWidth: 520 }}>
          Devis ignorés.<br />
          Factures en retard.<br />
          On s'en occupe.
        </h1>
        <p ref={leadRef} className="lead" style={{ marginTop: 28, color: '#A0A0A0', fontSize: 20, maxWidth: 520 }}>
          {"Votre CRM vous dit qui vous doit de l'argent. Pas comment le récupérer. QUITOS prend le relais : relances automatiques, devis signés, factures payées, reporting mensuel."}
        </p>
        <div ref={ctaRef} style={{ display: 'flex', gap: 14, marginTop: 44, flexWrap: 'wrap' }}>
          <a href="#cta" className="btn btn-primary btn-large">Calculer avec mes chiffres →</a>
          <a href="#quote" className="btn btn-outline-dark btn-large">Comment ça fonctionne</a>
        </div>
        <p ref={footerRef} style={{ marginTop: 20, fontSize: 14, color: '#6B6B6B' }}>
          30 jours de préavis · Sans pénalité · Sans justification
        </p>
      </div>
    </section>
  );
}

/* ---------- 2. Social proof — logos ---------- */
function SocialProof() {
  const v1Brands = [
    { name: 'HubSpot',   color: '#FF7A59' },
    { name: 'Pipedrive', color: '#00B388' },
    { name: 'Pennylane', color: '#A5B8FF' },
    { name: 'Sellsy',    color: '#7EC8E3' },
  ];
  const roadmapBrands = [
    { name: 'Salesforce', color: '#00A1E0' },
    { name: 'Odoo',       color: '#9B59B6' },
  ];

  return (
    <section style={{ background: '#0A0A0A', color: '#fff', padding: '60px 0', borderTop: '1px solid #1a1a1a' }}>
      <div className="container">
        <div style={{
          fontSize: 13, fontWeight: 500, letterSpacing: '0.06em',
          textTransform: 'uppercase', color: '#A0A0A0', textAlign: 'center', marginBottom: 28,
        }}>
          CRMs supportés
        </div>
        <div style={{
          display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 48, marginBottom: 20, flexWrap: 'wrap',
        }}>
          {v1Brands.map((b) => <AnimatedBrandLogo key={b.name} name={b.name} color={b.color} />)}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 36, marginBottom: 32, flexWrap: 'wrap',
        }}>
          {roadmapBrands.map((b) => (
            <div key={b.name} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, opacity: 0.45 }}>
              <AnimatedBrandLogo name={b.name} color={b.color} />
              <span style={{
                fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
                color: '#6B6B6B', border: '1px solid #2a2a2a', borderRadius: 4, padding: '2px 7px',
              }}>Sur devis</span>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 13, color: '#6B6B6B', textAlign: 'center', margin: '0 auto' }}>
          En France, les PME de services perdent en moyenne{' '}
          <span style={{ color: '#fff', fontWeight: 500 }}>8 % de leur CA annuel</span>{' '}
          en devis non relancés et factures non recouvrées.{' '}
          <span style={{ color: '#6B6B6B' }}>(Coface, 2025)</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- 3. Feature — QUITOS Quote ---------- */
function FeatureQuote() {
  const textColRef   = useRef(null);
  const mockupColRef = useRef(null);

  useEffect(() => {
    if (!window.gsap) return;
    const textCol  = textColRef.current;
    const mockupCol = mockupColRef.current;
    if (!textCol || !mockupCol) return;

    const listItems = textCol.querySelectorAll(".feature-list li");
    gsap.set(listItems, { opacity: 0, x: -16 });
    gsap.set(mockupCol, { opacity: 0, x: 40 });

    const t1 = ScrollTrigger.create({
      trigger: textCol, start: 'top 82%',
      onEnter: () => {
        gsap.to(listItems, { opacity: 1, x: 0, duration: 0.5, ease: 'power2.out', stagger: 0.1, delay: 0.35 });
      },
      once: true,
    });

    const t2 = ScrollTrigger.create({
      trigger: mockupCol, start: 'top 85%',
      onEnter: () => {
        gsap.to(mockupCol, { opacity: 1, x: 0, duration: 0.75, ease: 'power3.out' });
      },
      once: true,
    });

    return () => { t1.kill(); t2.kill(); };
  }, []);

  return (
    <section id="quote" className="section section--feature">
      <div className="container">
        <div className="feature-grid">
          <Reveal>
            <div ref={textColRef}>
              <span className="badge">QUITOS Quote</span>
              <h2 className="section-h" style={{ marginTop: 24 }}>
                Vos devis relancés.<br />Sans que personne n'y pense.
              </h2>
              <p className="lead" style={{ marginTop: 24 }}>
                Dès qu'un devis reste sans réponse, 7 messages personnalisés par IA partent au nom de votre commercial — avec son contexte, son historique, son ton. Vous ne cliquez sur rien.
              </p>
              <ul className="feature-list">
                <li>Connecté à HubSpot, Pipedrive ou Sellsy</li>
                <li>Personnalisé par profil prospect</li>
                <li>Rapport mensuel des devis signés</li>
              </ul>
            </div>
          </Reveal>
          <div ref={mockupColRef}>
            <RelanceMockup />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 4. Feature — QUITOS Pay ---------- */
function FeaturePay() {
  const textColRef   = useRef(null);
  const mockupColRef = useRef(null);

  useEffect(() => {
    if (!window.gsap) return;
    const textCol   = textColRef.current;
    const mockupCol = mockupColRef.current;
    if (!textCol || !mockupCol) return;

    const listItems = textCol.querySelectorAll(".feature-list li");
    gsap.set(listItems, { opacity: 0, x: 16 });
    gsap.set(mockupCol, { opacity: 0, x: -40 });

    const t1 = ScrollTrigger.create({
      trigger: textCol, start: 'top 82%',
      onEnter: () => {
        gsap.to(listItems, { opacity: 1, x: 0, duration: 0.5, ease: 'power2.out', stagger: 0.1, delay: 0.35 });
      },
      once: true,
    });

    const t2 = ScrollTrigger.create({
      trigger: mockupCol, start: 'top 85%',
      onEnter: () => {
        gsap.to(mockupCol, { opacity: 1, x: 0, duration: 0.75, ease: 'power3.out' });
      },
      once: true,
    });

    return () => { t1.kill(); t2.kill(); };
  }, []);

  return (
    <section id="pay" className="section section--dark-alt">
      <div className="container">
        <div className="feature-grid feature-grid--reverse">
          <div ref={mockupColRef}>
            <PayTimelineMockup />
          </div>
          <Reveal>
            <div ref={textColRef}>
              <span className="badge badge--dark">QUITOS Pay</span>
              <h2 className="section-h" style={{ marginTop: 24 }}>
                Vos factures recouvrées.<br />Sans cabinets, sans commission.
              </h2>
              <p className="lead" style={{ marginTop: 24 }}>
                Cinq jours après l'échéance, la relance part — personnalisée par IA selon le profil du client, jusqu'à la mise en demeure électronique si ça traîne. Vous n'avez passé aucun appel.
              </p>
              <ul className="feature-list">
                <li>Connecté à Pennylane ou Sellsy</li>
                <li>Ton adapté : fidèle vs récidiviste</li>
                <li>Forfait fixe — jamais de commission</li>
              </ul>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- 5. How it works (light — stagger cards) ---------- */
function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'QUITOS connecte votre CRM',
      sub: 'Une heure de votre temps',
      body: "HubSpot, Pipedrive, Sellsy ou Pennylane. QUITOS fait la connexion. Vous ouvrez les accès, vous n'installez rien.",
    },
    {
      n: '02',
      title: 'QUITOS configure les séquences, vous validez le ton',
      sub: '7 jours de setup',
      body: "L'IA génère chaque message au profil du prospect — vous les lisez et approuvez une seule fois, avant le lancement. Ensuite, tout part automatiquement dès le bon timing.",
    },
    {
      n: '03',
      title: 'Vous recevez un rapport mensuel',
      sub: 'Des euros, pas des stats',
      body: 'Deux chiffres en euros chaque mois : CA récupéré sur les devis, trésorerie récupérée sur les factures. Vous ne nous voyez pas travailler. Vous voyez le résultat.',
    },
  ];

  return (
    <section className="section section--feature">
      <div className="container">
        <Reveal>
          <h2 className="section-h" style={{ textAlign: 'center', marginBottom: 64, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
            Comment ça fonctionne
          </h2>
        </Reveal>
        <Stagger staggerDelay={0.12} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
          {steps.map((s) => (
            <div key={s.n} style={{
              background: '#fff', border: '1px solid #E5E5E3',
              borderRadius: 16, padding: 32,
            }}>
              <div style={{
                fontSize: 13, fontWeight: 600, letterSpacing: '0.06em',
                color: '#2D6A4F', marginBottom: 20,
              }}>{s.n}</div>
              <div style={{ fontSize: 18, fontWeight: 600, color: '#0A0A0A', lineHeight: 1.3, marginBottom: 6 }}>
                {s.title}
              </div>
              <div style={{ fontSize: 13, color: '#6B6B6B', letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 16 }}>
                {s.sub}
              </div>
              <p style={{ fontSize: 15, color: '#6B6B6B', lineHeight: 1.6, margin: 0 }}>
                {s.body}
              </p>
            </div>
          ))}
        </Stagger>
      </div>
    </section>
  );
}

/* ---------- 6. Lifestyle ---------- */
function Lifestyle() {
  return (
    <section style={{ padding: 0, background: '#0A0A0A' }}>
      <LifestylePhoto />
    </section>
  );
}

/* ---------- 7. Metrics ---------- */
function Metrics() {
  const items = [
    { num: 68000, suffix: ' €',       label: 'CA moyen récupéré par an', note: 'Estimation — agence 15 pers., 15 devis/mois' },
    { num: 1,     suffix: ' semaine', label: 'De mise en place' },
    { num: 30,    suffix: ' jours',   label: 'Résiliable sans pénalité' },
  ];
  return (
    <section className="section section--light">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
          {items.map((it, i) => (
            <Reveal key={it.label} delay={i * 80}>
              <div>
                <div style={{
                  fontSize: 'clamp(32px, 3.8vw, 52px)', fontWeight: 700,
                  letterSpacing: '-0.02em', lineHeight: 1,
                  color: i === 0 ? '#2D6A4F' : '#0A0A0A', fontVariantNumeric: 'tabular-nums',
                }}>
                  <Counter value={it.num} suffix={it.suffix} />
                </div>
                <div style={{ marginTop: 14, fontSize: 15, color: '#6B6B6B', fontWeight: 500 }}>
                  {it.label}
                </div>
                {it.note && (
                  <div style={{ marginTop: 4, fontSize: 12, color: '#A0A0A0' }}>{it.note}</div>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 8. Monthly report ---------- */
function MonthlyReport() {
  return (
    <section className="section section--dark-alt">
      <div className="container">
        <div className="feature-grid">
          <Reveal>
            <div>
              <h2 className="section-h">
                Un rapport mensuel.<br />Des euros, pas des stats.
              </h2>
              <p className="lead" style={{ marginTop: 24 }}>
                Chaque mois, vous recevez un rapport avec le CA récupéré, les relances envoyées, les réponses reçues. Rien d'autre.
              </p>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <ReportMockup />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- 9. Comparison ---------- */
function Comparison() {
  const cols = [
    { name: 'Logiciel de relance', muted: true },
    { name: 'Cabinet de recouvrement', muted: true },
    { name: 'QUITOS', accent: true },
  ];
  const rows = [
    ['Configuration',    'Vous',          '—',        'Incluse'],
    ['Maintenance',      'Vous',          '—',        'Incluse'],
    ['Personnalisation', 'Générique',     'Aucune',   'Par IA, par client'],
    ['Commission',       '—',             '10–25 %',  'Zéro'],
    ['Relation client',  'Préservée',     '✗',        'Préservée'],
    ['Résiliable 30j',   'Selon contrat', 'Non',      'Oui'],
  ];

  return (
    <section className="section section--feature">
      <div className="container">
        <Reveal>
          <h2 className="section-h" style={{ textAlign: 'center', marginBottom: 64, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
            SaaS, cabinet, ou QUITOS — quelle différence ?
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <div style={{ borderRadius: 16, overflow: 'hidden' }}>
            <table style={{
              width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed',
              fontFamily: 'var(--font-sans)',
            }}>
              <thead>
                <tr>
                  <th style={{ padding: '20px 18px', textAlign: 'left' }}></th>
                  {cols.map((c) => (
                    <th key={c.name} style={{
                      padding: '20px 18px', fontSize: 14, fontWeight: 600,
                      textAlign: 'center',
                      background: c.accent ? '#2D6A4F' : 'transparent',
                      color: c.accent ? '#fff' : '#0A0A0A',
                      borderTopLeftRadius: c.accent ? 12 : 0,
                      borderTopRightRadius: c.accent ? 12 : 0,
                    }}>{c.name}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rows.map((row) => (
                  <tr key={row[0]}>
                    {row.map((cell, j) => (
                      <td key={j} style={{
                        padding: '18px',
                        fontSize: 14,
                        textAlign: j === 0 ? 'left' : 'center',
                        color: '#0A0A0A',
                        fontWeight: j === 3 ? 600 : (j === 0 ? 500 : 400),
                        borderTop: '1px solid #E5E5E3',
                        background: j === 3 ? '#fff' : 'transparent',
                      }}>{cell}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- 10. Integrations — logos orbitants ---------- */
function Integrations() {
  const v1Crms = [
    { name: 'HubSpot',   color: '#FF7A59', delay: '0s'   },
    { name: 'Pipedrive', color: '#00B388', delay: '-5s'  },
    { name: 'Pennylane', color: '#A5B8FF', delay: '-10s' },
    { name: 'Sellsy',    color: '#7EC8E3', delay: '-15s' },
  ];
  const onDemand = [
    { name: 'Salesforce', color: '#00A1E0' },
    { name: 'Odoo',       color: '#9B59B6' },
  ];

  return (
    <section style={{ background: '#F8F8F6', padding: '120px 0', textAlign: 'center' }}>
      <div className="container">
        <Reveal>
          <p style={{
            fontSize: 13, fontWeight: 600, letterSpacing: '0.06em',
            textTransform: 'uppercase', color: '#2D6A4F', marginBottom: 16,
          }}>
            Intégrations natives
          </p>
          <h2 className="section-h" style={{ marginBottom: 12 }}>
            Compatible avec votre CRM.<br />{"Opérationnel en 7 jours."}
          </h2>
          <p className="lead" style={{ color: '#6B6B6B', maxWidth: 480, margin: '0 auto 64px' }}>
            {"Nous faisons la connexion. Vous n'installez rien."}
          </p>
        </Reveal>

        <Reveal delay={100}>
          <div style={{ position: 'relative', width: 260, height: 260, margin: '0 auto 48px' }}>
            {/* Centre — Q mark */}
            <div style={{
              position: 'absolute', top: '50%', left: '50%',
              transform: 'translate(-50%, -50%)',
              width: 64, height: 64, borderRadius: 16, zIndex: 2,
              background: '#0A0A0A',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 0 0 1px rgba(45,106,79,0.4), 0 0 28px rgba(45,106,79,0.18)',
            }}>
              <span style={{ fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 22, color: '#2D6A4F' }}>Q</span>
            </div>
            {/* Anneau dashed */}
            <div style={{
              position: 'absolute', top: '50%', left: '50%',
              width: 240, height: 240,
              transform: 'translate(-50%, -50%)',
              border: '1px dashed rgba(0,0,0,0.1)',
              borderRadius: '50%',
              pointerEvents: 'none',
            }} />
            {/* Logos V1 en orbite */}
            {v1Crms.map((crm) => (
              <div key={crm.name} style={{
                position: 'absolute', top: '50%', left: '50%',
                width: 48, height: 48, marginTop: -24, marginLeft: -24,
                animationName: 'orbit-cw',
                animationDuration: '20s',
                animationTimingFunction: 'linear',
                animationIterationCount: 'infinite',
                animationDelay: crm.delay,
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 12,
                  background: '#fff',
                  border: '1px solid rgba(0,0,0,0.08)',
                  boxShadow: '0 2px 10px rgba(0,0,0,0.07)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <span style={{ fontWeight: 700, fontSize: 9, color: crm.color, textAlign: 'center', lineHeight: 1.1 }}>
                    {crm.name}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={180}>
          <p style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: '#A0A0A0', marginBottom: 14,
          }}>
            Sur devis
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
            {onDemand.map((crm) => (
              <div key={crm.name} style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: '7px 16px', borderRadius: 8,
                border: '1px solid #E5E5E3',
                background: '#fff', opacity: 0.5,
              }}>
                <span style={{ fontWeight: 600, fontSize: 12, color: crm.color }}>{crm.name}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- 11. Pricing (stagger cards) ---------- */
function Pricing() {
  const plans = [
    {
      name: 'QUITOS Quote',
      setup: '2 500 €', price: '550 €/mois',
      features: ['Devis relancés par IA, au nom de vos commerciaux', '7 messages adaptés au profil prospect', 'Rapport mensuel en euros — CA récupéré'],
    },
    {
      name: 'Offre complète — Quote + Pay',
      setup: '3 500 €', price: '1 000 €/mois',
      features: ['Relances devis + factures', 'Rapport mensuel consolidé en euros', 'Économie de 750 € vs séparés'],
      featured: true,
    },
    {
      name: 'QUITOS Pay',
      setup: '2 500 €', price: '700 €/mois',
      features: ['Factures relancées par IA, zéro commission', 'Mise en demeure électronique incluse', 'Rapport mensuel en euros — trésorerie récupérée'],
    },
  ];

  return (
    <section id="tarifs" className="section section--dark">
      <div className="container">
        <Reveal>
          <h2 className="section-h" style={{ textAlign: 'center', color: '#fff', marginBottom: 16 }}>
            Un prix fixe. Résiliable en 30 jours.
          </h2>
          <p className="lead" style={{ textAlign: 'center', margin: '0 auto 64px', color: '#A0A0A0' }}>
            Pas de commission. Pas d'engagement annuel. Pas de surprise.
          </p>
        </Reveal>
        <Stagger staggerDelay={0.1} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {plans.map((p) => (
            <div key={p.name} style={{
              background: p.featured ? 'rgba(45,106,79,0.08)' : '#161616',
              border: p.featured ? '1px solid #2D6A4F' : '1px solid #242424',
              borderRadius: 16, padding: 32, color: '#fff',
              position: 'relative', height: '100%',
              display: 'flex', flexDirection: 'column',
            }}>
              {p.featured && (
                <div style={{
                  position: 'absolute', top: -12, left: 32,
                  background: '#2D6A4F', color: '#fff',
                  fontSize: 11, fontWeight: 500,
                  letterSpacing: '0.06em', textTransform: 'uppercase',
                  padding: '6px 14px', borderRadius: 100,
                }}>
                  Le plus choisi
                </div>
              )}
              <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 24 }}>{p.name}</div>
              <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
                {p.price}
              </div>
              <div style={{ fontSize: 13, color: '#A0A0A0', marginTop: 8 }}>Setup {p.setup}</div>
              <ul style={{
                listStyle: 'none', padding: 0, margin: '28px 0 28px',
                display: 'flex', flexDirection: 'column', gap: 12,
              }}>
                {p.features.map((f) => (
                  <li key={f} style={{ fontSize: 14, color: '#A0A0A0', display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ color: '#4D9970', fontWeight: 700 }}>✓</span>{f}
                  </li>
                ))}
              </ul>
              <a
                href="#cta"
                className={p.featured ? 'btn btn-primary' : 'btn btn-outline-dark'}
                style={{ marginTop: 'auto', justifyContent: 'center', width: '100%' }}
              >
                Estimer mon CA récupérable
              </a>
            </div>
          ))}
        </Stagger>
        <div style={{ marginTop: 32, textAlign: 'center', fontSize: 13, color: '#6B6B6B' }}>
          Résiliable en 30 jours · Sans pénalité · Sans justification
        </div>
      </div>
    </section>
  );
}

/* ---------- 11. FAQ ---------- */
const FAQS = [
  { q: 'Faut-il que je configure quelque chose ?',              a: "Non. QUITOS connecte votre CRM (HubSpot, Pipedrive, Sellsy, Pennylane) en une semaine, configure les séquences, et lance. Vous ne touchez à rien." },
  { q: 'Vous prenez quel pourcentage du CA récupéré ?',         a: "Zéro. Forfait fixe mensuel. Le CA récupéré vous appartient entièrement — pas de commission, pas de surprise en fin de mois." },
  { q: "Mes prospects sentiront-ils que c'est de l'IA ?",       a: "Non. L'IA personnalise chaque message au contexte du prospect — historique, secteur, ton de votre commercial. Le message part avec sa signature. Vos prospects reçoivent un email qui ressemble à ce que votre équipe écrirait, pas à un template générique." },
  { q: 'Quelle différence avec un logiciel de relance ?',       a: "Un logiciel, c'est vous qui le configurez, l'entretenez, réécrivez les séquences. QUITOS est un service : nous le faisons à votre place, chaque mois. Vous ne gérez rien." },
  { q: 'Et avec un cabinet de recouvrement ?',                  a: "Pas de commission (10-25 % chez un cabinet), pas d'agressivité, pas de rupture de relation client. QUITOS reste dans le ton de votre marque — même pour les relances fermes." },
  { q: 'Mes données et celles de mes clients sont-elles protégées ?', a: "Oui. Données hébergées en Europe, conformité RGPD complète. Un DPA (accord de traitement des données, Art. 28) est signé avant tout démarrage. Vos données ne sont jamais utilisées pour entraîner un modèle tiers." },
  { q: 'HubSpot ou Pipedrive proposent déjà des séquences — pourquoi payer en plus ?', a: "Ces outils proposent un outil. Qui écrit vos séquences ? Qui les maintient, les adapte, surveille les taux de réponse ? QUITOS fait tout ça. Le logiciel sans l'opérateur, c'est un outil qui dort dans votre CRM." },
];

function FAQItem({ item, isOpen, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid #E5E5E3' }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%', textAlign: 'left',
          background: 'transparent', border: 'none', padding: '24px 0',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 18, fontWeight: 600, color: '#0A0A0A',
          fontFamily: 'inherit', cursor: 'pointer',
        }}
      >
        <span>{item.q}</span>
        <span style={{
          width: 24, height: 24, position: 'relative', flexShrink: 0,
          color: '#6B6B6B',
          transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
          transition: 'transform 250ms ease',
        }}>
          <span style={{ position: 'absolute', top: 11, left: 4, right: 4, height: 1.5, background: 'currentColor' }} />
          <span style={{ position: 'absolute', left: 11, top: 4, bottom: 4, width: 1.5, background: 'currentColor' }} />
        </span>
      </button>
      <div style={{
        maxHeight: isOpen ? 240 : 0,
        opacity: isOpen ? 1 : 0,
        overflow: 'hidden',
        transition: 'max-height 250ms ease, opacity 250ms ease',
      }}>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: '#6B6B6B', paddingBottom: 24, maxWidth: 720, margin: 0 }}>
          {item.a}
        </p>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--light">
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal>
          <h2 className="section-h" style={{ marginBottom: 48, textAlign: 'center' }}>Questions fréquentes</h2>
        </Reveal>
        <Reveal delay={80}>
          <div>
            {FAQS.map((item, i) => (
              <FAQItem
                key={item.q}
                item={item}
                isOpen={open === i}
                onToggle={() => setOpen(open === i ? -1 : i)}
              />
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- 12. CTA Final — Calendly popup ---------- */
function CtaFinal() {
  useEffect(() => {
    if (document.querySelector('script[src*="calendly"]')) return;
    const script = document.createElement('script');
    script.src = 'https://assets.calendly.com/assets/external/widget.js';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  const openCalendly = (e) => {
    e.preventDefault();
    if (window.Calendly) {
      window.Calendly.initPopupWidget({ url: 'https://calendly.com/michael-chemla-alchmist/30min' });
    } else {
      window.open('https://calendly.com/michael-chemla-alchmist/30min', '_blank');
    }
  };

  return (
    <section id="cta" className="section section--dark">
      <div className="container" style={{ textAlign: 'center', maxWidth: 760 }}>
        <Reveal>
          <h2 className="section-h" style={{ color: '#fff', fontSize: 'clamp(36px, 4.5vw, 52px)' }}>
            Combien dort en ce moment<br />dans votre CRM ?
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p className="lead" style={{ marginTop: 24, color: '#A0A0A0', margin: '24px auto 0' }}>
            {"Réservez 20 minutes avec Michael pour estimer votre CA récupérable avec vos vrais chiffres."}
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 44, flexWrap: 'wrap' }}>
            <a href="#" onClick={openCalendly} className="btn btn-primary btn-large">
              Réserver 20 minutes →
            </a>
            <a href="mailto:michael.chemla@alchmist.pro" className="btn btn-outline-dark btn-large">
              Envoyer un e-mail →
            </a>
          </div>
          <div style={{ marginTop: 20, fontSize: 13, color: '#6B6B6B' }}>
            Appel découverte · Sans engagement · Résultat en euros
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- 13. Footer ---------- */
function Footer() {
  return (
    <footer style={{ background: '#0A0A0A', color: '#A0A0A0', padding: '60px 0 40px', borderTop: '1px solid #1a1a1a' }}>
      <div className="container">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          gap: 48, flexWrap: 'wrap', paddingBottom: 40, borderBottom: '1px solid #242424',
        }}>
          <div style={{ maxWidth: 320 }}>
            <img src="assets/logos/logo-quitos-animated-white.svg" alt="QUITOS" style={{ height: 32, width: 'auto', marginBottom: 16 }} />
            <p style={{ fontSize: 14, lineHeight: 1.6, color: '#A0A0A0' }}>
              Service managé de récupération de chiffre d'affaires pour agences B2B françaises.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }}>
            {[
              { title: 'Services', items: [
                { label: 'QUITOS Quote',            href: '#quote'  },
                { label: 'QUITOS Pay',              href: '#pay'    },
                { label: 'Bundle Revenue Recovery', href: '#tarifs' },
              ]},
              { title: 'Société', items: [
                { label: 'Tarifs',          href: '#tarifs' },
                { label: 'Contact',         href: '#cta'    },
                { label: 'Mentions légales',href: '#'       },
              ]},
              { title: 'Ressources', items: [
                { label: 'Comment ça marche', href: '#quote' },
                { label: 'CGV',               href: '#'     },
                { label: 'RGPD',              href: '#'     },
              ]},
            ].map((col) => (
              <div key={col.title}>
                <div style={{
                  fontSize: 11, fontWeight: 500, letterSpacing: '0.06em',
                  textTransform: 'uppercase', color: '#fff', marginBottom: 16,
                }}>{col.title}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {col.items.map((it) => (
                    <li key={it.label}>
                      <a href={it.href} style={{ color: '#A0A0A0', fontSize: 14 }}>{it.label}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, fontSize: 13, color: '#6B6B6B', flexWrap: 'wrap', gap: 16,
        }}>
          <div>© 2026 QUITOS · Tous droits réservés</div>
          <div>Résiliable en 30 jours · Sans pénalité</div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Service Manifesto ---------- */
function ServiceManifesto() {
  return (
    <section style={{ background: '#0A0A0A', padding: '80px 0', borderTop: '1px solid #1a1a1a' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <Reveal>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
          }}>
            <div>
              <div style={{
                fontSize: 11, fontWeight: 500, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: '#4D9970', marginBottom: 20,
              }}>
                Comment ça fonctionne
              </div>
              <h2 style={{
                fontSize: 'clamp(28px, 3vw, 38px)', fontWeight: 700,
                color: '#fff', lineHeight: 1.2, letterSpacing: '-0.01em', marginBottom: 24,
              }}>
                Vous ouvrez les accès une fois.<br />Le système tourne. Vous encaissez.
              </h2>
              <p style={{ fontSize: 16, color: '#A0A0A0', lineHeight: 1.7, marginBottom: 0 }}>
                {"On configure les relances selon votre CRM, vos clients et vos délais habituels. Chaque mois, un rapport en euros vous montre ce qui a été récupéré — vous n'avez rien d'autre à faire."}
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { icon: 'cpu',        text: "L'IA personnalise chaque message au profil du prospect" },
                { icon: 'settings',   text: 'Configuré sur mesure pour votre CRM et vos délais' },
                { icon: 'bar-chart-2',text: 'Vous recevez les résultats en euros, pas des métriques' },
              ].map((item) => (
                <div key={item.text} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 16,
                  background: '#161616', border: '1px solid #242424',
                  borderRadius: 12, padding: '18px 20px',
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 8,
                    background: 'rgba(45,106,79,0.15)', border: '1px solid rgba(45,106,79,0.3)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    <Icon name={item.icon} size={16} color="#4D9970" />
                  </div>
                  <span style={{ fontSize: 15, color: '#D0D0D0', lineHeight: 1.5 }}>{item.text}</span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- For Who (stagger cards) ---------- */
function ForWho() {
  const profiles = [
    {
      role: "Directeur d'agence digitale",
      size: '15–30 salariés · HubSpot ou Pipedrive',
      pain: 'Vos commerciaux envoient les devis. Personne ne relance. Vous perdez 20 % de vos propositions par silence.',
      gain: 'QUITOS relance au nom de chaque commercial — avec leur ton, leur contexte. Vous récupérez les devis sans intervention.',
    },
    {
      role: "Patron d'ESN / cabinet de recrutement",
      size: '10–40 salariés · Sellsy ou Pennylane',
      pain: 'Vos clients tardent à payer. Votre DAF passe ses matinées à relancer manuellement. Votre trésorerie en souffre.',
      gain: 'QUITOS automatise les relances impayées — du mail courtois à la mise en demeure. Votre DAF se concentre sur autre chose.',
    },
    {
      role: 'Fondateur de cabinet de conseil',
      size: '8–20 consultants · CRM actif',
      pain: 'Vous êtes trop occupé pour relancer. Vous attendez que les clients reviennent. Certains ne reviennent jamais.',
      gain: 'QUITOS relance à votre place, avec le bon ton au bon moment. Vous voyez les résultats dans votre rapport mensuel.',
    },
  ];

  return (
    <section className="section section--light">
      <div className="container">
        <Reveal>
          <h2 className="section-h" style={{ textAlign: 'center', marginBottom: 16 }}>
            Pour qui exactement ?
          </h2>
          <p className="lead" style={{ textAlign: 'center', margin: '0 auto 56px', maxWidth: 560, color: '#6B6B6B' }}>
            QUITOS est fait pour les dirigeants qui ont un CRM actif et aucun process de relance systématique.
          </p>
        </Reveal>
        <Stagger staggerDelay={0.12} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {profiles.map((p) => (
            <div key={p.role} style={{
              background: '#fff', border: '1px solid #E5E5E3',
              borderRadius: 16, padding: 28, height: '100%',
              display: 'flex', flexDirection: 'column', gap: 0,
            }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: '#0A0A0A', marginBottom: 4 }}>{p.role}</div>
              <div style={{ fontSize: 12, color: '#6B6B6B', fontWeight: 500, marginBottom: 20, letterSpacing: '0.04em' }}>{p.size}</div>
              <div style={{
                fontSize: 14, color: '#6B6B6B', lineHeight: 1.6, marginBottom: 16,
                paddingBottom: 16, borderBottom: '1px solid #E5E5E3',
              }}>
                {p.pain}
              </div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span style={{ color: '#2D6A4F', fontWeight: 700, flexShrink: 0, marginTop: 1 }}>→</span>
                <span style={{ fontSize: 14, color: '#0A0A0A', lineHeight: 1.6, fontWeight: 500 }}>{p.gain}</span>
              </div>
            </div>
          ))}
        </Stagger>
      </div>
    </section>
  );
}

/* ---------- ROI Calculator ---------- */
function ROICalculator() {
  const [devis,   setDevis]   = useState(15);
  const [ticket,  setTicket]  = useState(5000);
  const [tauxNR,  setTauxNR]  = useState(25);
  const [tauxRecu,setTauxRecu]= useState(30);

  const caPerdu  = Math.round(devis * ticket * (tauxNR / 100));
  const caRecup  = Math.round(caPerdu * (tauxRecu / 100));
  const roiAnnuel = caRecup * 12;
  const ratio = Math.round(roiAnnuel / 1000);

  const fmt = (n) => n.toLocaleString('fr-FR') + " €";

  const fields = [
    { label: 'Devis envoyés par mois',             value: devis,    set: setDevis,    min: 1,   max: 200,   step: 1,   suffix: '' },
    { label: 'Ticket moyen (€)',                   value: ticket,   set: setTicket,   min: 500, max: 100000,step: 500, suffix: ' €' },
    { label: 'Devis sans réponse (%)',              value: tauxNR,   set: setTauxNR,   min: 5,   max: 80,    step: 5,   suffix: ' %' },
    { label: 'Taux de récupération QUITOS (%)',     value: tauxRecu, set: setTauxRecu, min: 10,  max: 60,    step: 5,   suffix: ' %' },
  ];

  return (
    <section id="calculateur" className="section section--dark">
      <div className="container" style={{ maxWidth: 900 }}>
        <Reveal>
          <h2 className="section-h" style={{ textAlign: 'center', color: '#fff', marginBottom: 16 }}>
            Calculez votre CA récupérable
          </h2>
          <p className="lead" style={{ textAlign: 'center', color: '#A0A0A0', margin: '0 auto 56px', maxWidth: 560 }}>
            Ajustez les curseurs avec vos vrais chiffres.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            {fields.map((f) => (
              <div key={f.label}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                  <label style={{ fontSize: 14, color: '#A0A0A0', fontWeight: 500 }}>{f.label}</label>
                  <span style={{ fontSize: 14, color: '#fff', fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
                    {f.value.toLocaleString('fr-FR')}{f.suffix}
                  </span>
                </div>
                <input
                  type="range"
                  min={f.min} max={f.max} step={f.step}
                  value={f.value}
                  onChange={(e) => f.set(Number(e.target.value))}
                  style={{ width: '100%', accentColor: '#2D6A4F', cursor: 'pointer' }}
                />
              </div>
            ))}
          </div>
          <div style={{
            background: '#161616', border: '1px solid #242424',
            borderRadius: 20, padding: 36,
            display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#6B6B6B' }}>
              Vos résultats estimés
            </div>
            {[
              { label: 'CA non relancé / mois', value: fmt(caPerdu), muted: true },
              { label: 'CA récupéré / mois',    value: fmt(caRecup), accent: true },
              { label: 'CA récupéré / an',       value: fmt(roiAnnuel), large: true },
            ].map((r) => (
              <div key={r.label} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                paddingBottom: r.large ? 0 : 20,
                borderBottom: r.large ? 'none' : '1px solid #242424',
              }}>
                <span style={{ fontSize: 14, color: '#6B6B6B' }}>{r.label}</span>
                <span style={{
                  fontWeight: 700, fontVariantNumeric: 'tabular-nums',
                  color: r.accent || r.large ? '#4D9970' : '#A0A0A0',
                  fontSize: r.large ? 28 : 16,
                  letterSpacing: '-0.01em',
                }}>{r.value}</span>
              </div>
            ))}
            <div style={{
              background: 'rgba(45,106,79,0.1)', border: '1px solid rgba(45,106,79,0.25)',
              borderRadius: 10, padding: '14px 16px',
              fontSize: 13, color: '#4D9970', lineHeight: 1.5,
            }}>
              Pour 1 000 €/mois (offre complète), votre ROI estimé est de <strong>{ratio}×</strong> la première année.
            </div>
            <a
              href="https://calendly.com/michael-chemla-alchmist/30min"
              className="btn btn-primary"
              style={{ justifyContent: 'center', marginTop: 4 }}
            >
              Affiner avec Michael →
            </a>
            <div style={{ fontSize: 12, color: '#6B6B6B', textAlign: 'center' }}>
              Estimation indicative — résultats réels variables selon secteur et CRM
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Founder Bio ---------- */
function FounderBio() {
  return (
    <section style={{ background: '#F2F2F0', padding: '80px 0', borderTop: '1px solid #E5E5E3' }}>
      <div className="container">
        <Reveal>
          <div style={{
            borderRadius: 24, overflow: 'hidden',
            display: 'grid', gridTemplateColumns: '1fr 1.3fr',
            background: '#fff', border: '1px solid #E5E5E3',
            minHeight: 480,
          }}>
            {/* Left — text */}
            <div style={{ padding: '56px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: '#2D6A4F', marginBottom: 20,
              }}>
                Fondateur
              </div>
              <div style={{ fontSize: 30, fontWeight: 700, color: '#0A0A0A', lineHeight: 1.2, marginBottom: 8 }}>
                Michael Chemla
              </div>
              <div style={{ fontSize: 14, color: '#6B6B6B', fontWeight: 500, marginBottom: 28 }}>
                QUITOS · Paris
              </div>
              <p style={{ fontSize: 16, color: '#6B6B6B', lineHeight: 1.75, marginBottom: 36, margin: '0 0 36px' }}>
                {"7 ans en marketing digital B2B. J'ai construit QUITOS parce que j'ai vu des dizaines d'agences perdre des milliers d'euros par manque de relance systématique — pas par manque de bons clients."}
              </p>
              <a
                href="https://www.linkedin.com/in/michael-chemla"
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-outline-light"
                style={{ width: 'fit-content', display: 'inline-flex', gap: 8 }}
              >
                <Icon name="linkedin" size={16} color="currentColor" />
                LinkedIn
              </a>
            </div>
            {/* Right — photo + floating card */}
            <div style={{ position: 'relative', overflow: 'hidden', minHeight: 400 }}>
              <img
                src="assets/images/QUITOS PHOTO PRO.png"
                alt="Michael Chemla — Fondateur QUITOS"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
              />
              {/* Floating notification */}
              <div style={{
                position: 'absolute', bottom: 32, left: 28,
                background: 'rgba(255,255,255,0.92)',
                backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
                border: '1px solid rgba(255,255,255,0.7)',
                borderRadius: 14, padding: '14px 18px',
                boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
                display: 'flex', alignItems: 'center', gap: 12, minWidth: 220,
              }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                  background: 'rgba(45,106,79,0.1)', border: '1px solid rgba(45,106,79,0.2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name="trending-up" size={18} color="#2D6A4F" />
                </div>
                <div>
                  <div style={{ fontSize: 11, color: '#6B6B6B', marginBottom: 2, fontWeight: 500 }}>Rapport mensuel</div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: '#0A0A0A' }}>+12 400 € récupérés</div>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, SocialProof, ServiceManifesto, ForWho, FeatureQuote, FeaturePay, HowItWorks, Lifestyle,
  Metrics, MonthlyReport, Comparison, Integrations, Pricing, ROICalculator, FAQ, CtaFinal, FounderBio, Footer,
});