/* global React, Counter */
const { useState: useStS, useEffect: useEffS, useRef: useRefS } = React;

/* ============================================
   PROBLEMS → SOLUTION
   ============================================ */
function ProblemsSection() {
  const problems = [
    { i: '⏱', t: 'Temps perdu', d: 'Les tâches répétitives engloutissent 12 à 18 heures par semaine et par dirigeant.' },
    { i: '⚙', t: 'Process manuels', d: 'Copier-coller entre outils, relances oubliées, données dispersées dans 7 logiciels.' },
    { i: '◌', t: 'Leads oubliés', d: '67 % des prospects ne reçoivent aucune relance après 48h. Du chiffre qui s\'évapore.' },
    { i: '◇', t: 'Manque de structure', d: 'Aucune visibilité sur le pipeline, les KPIs, ni sur ce qui marche réellement.' },
  ];

  return (
    <section style={{ padding: '140px 0', position: 'relative' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ maxWidth: 760, marginBottom: 80 }}>
          <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20 }}>Le constat</div>
          <h2 className="display-lg reveal" data-delay="1">
            Vous avez bâti une entreprise solide.<br/>
            <span className="display-italic" style={{ color: 'var(--vp-bordeaux-glow)' }}>Mais elle vous coûte</span> votre temps.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="problems-grid">
          {problems.map((p, i) => (
            <div key={i} className="reveal" data-delay={i + 1} style={{
              padding: 28, borderRadius: 20,
              background: 'linear-gradient(180deg, rgba(100,116,107,0.08), rgba(100,116,107,0.02))',
              border: '1px solid rgba(100,116,107,0.25)',
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: -30, right: -30, width: 120, height: 120,
                background: 'radial-gradient(circle, rgba(100,116,107,0.4), transparent 65%)',
                filter: 'blur(20px)',
              }} />
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: 'linear-gradient(135deg, rgba(100,116,107,0.4), rgba(22,30,26,0.6))',
                border: '1px solid rgba(100,116,107,0.5)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 22, color: 'var(--vp-bordeaux-glow)',
                marginBottom: 18, position: 'relative',
              }}>{p.i}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, marginBottom: 10, letterSpacing: '-0.02em', position: 'relative' }}>
                {p.t}
              </h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--vp-cream-dim)', position: 'relative' }}>
                {p.d}
              </p>
            </div>
          ))}
        </div>

        {/* Transition */}
        <div className="reveal" style={{
          marginTop: 80, padding: '42px 48px',
          background: 'linear-gradient(135deg, rgba(18,61,50,0.4), rgba(8,32,25,0.6))',
          border: '1px solid rgba(47,133,90,0.25)',
          borderRadius: 24, display: 'flex', alignItems: 'center', gap: 32,
          position: 'relative', overflow: 'hidden',
        }} id="transition-card">
          <div style={{
            position: 'absolute', top: -100, right: -100, width: 300, height: 300,
            background: 'radial-gradient(circle, rgba(47,133,90,0.18), transparent 60%)',
            filter: 'blur(40px)', pointerEvents: 'none',
          }} />
          <div style={{ flex: 1, position: 'relative' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: 'var(--vp-gold)', marginBottom: 12, textTransform: 'uppercase' }}>
              → Notre réponse
            </div>
            <h3 className="display-md" style={{ marginBottom: 12 }}>
              Une infrastructure IA <span className="display-italic gold-text">qui travaille pour vous</span>, 24/7.
            </h3>
            <p className="body-md" style={{ maxWidth: 580 }}>
              Vivo Partner conçoit, déploie et optimise les systèmes qui transforment vos process en moteurs de croissance — pour que vous repreniez la main sur ce qui compte vraiment.
            </p>
          </div>
          <a href="#services" className="btn btn-primary" style={{ position: 'relative', flexShrink: 0 }}>
            Explorer les solutions <span className="btn-arrow">→</span>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .problems-grid { grid-template-columns: repeat(2, 1fr) !important; }
          #transition-card { flex-direction: column !important; align-items: flex-start !important; }
        }
        @media (max-width: 600px) {
          .problems-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ============================================
   SERVICES SECTION
   ============================================ */
function ServicesSection() {
  const services = [
    {
      n: '01', icon: '◇',
      t: 'Devis & factures auto',
      d: 'Génération, envoi et suivi automatique. Vos devis partent en 2 minutes, plus en 2 heures.',
      kpi: '−85% temps admin',
    },
    {
      n: '02', icon: '◈',
      t: 'Relance impayés',
      d: 'Plus aucune facture oubliée. Relances multi-canaux progressives, orchestrées sans intervention.',
      kpi: '+42% paiements à temps',
    },
    {
      n: '03', icon: '◉',
      t: 'CRM & nurturing',
      d: 'Centralisation des contacts, scoring auto, séquences personnalisées selon le comportement réel.',
      kpi: '×3.4 conversion',
    },
    {
      n: '04', icon: '◌',
      t: 'Suivi chantier IA',
      d: 'Avancement temps réel, alertes dérives, reporting client automatisé. Vos chantiers se pilotent seuls.',
      kpi: '+32% marge moyenne',
    },
    {
      n: '05', icon: '◍',
      t: 'Dashboard pilotage',
      d: 'Trésorerie, pipeline, équipe, marges — toutes vos métriques sur un seul écran épuré.',
      kpi: '100% visibilité',
    },
    {
      n: '06', icon: '◎',
      t: 'Acquisition client',
      d: 'Identification, scoring et qualification automatique des prospects à forte valeur. Votre pipeline se remplit seul.',
      kpi: '+340 leads / mois',
    },
  ];

  return (
    <section id="services" style={{ padding: '140px 0', position: 'relative' }}>
      <div className="orb orb-green" style={{ width: 500, height: 500, top: 100, left: -150 }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80, gap: 40, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20 }}>Nos best-sellers</div>
            <h2 className="display-lg reveal" data-delay="1">
              Les automatisations<br/>
              <span className="display-italic gold-text">qui rapportent le plus</span> à nos clients.
            </h2>
          </div>
          <p className="body-lg reveal" data-delay="2" style={{ maxWidth: 380 }}>
            Chaque accompagnement est sur mesure — voici les briques que nous déployons le plus, parce qu'elles génèrent les résultats les plus rapides.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="services-grid">
          {services.map((s, i) => (
            <ServiceCard key={i} {...s} delay={(i % 3) + 1} />
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function ServiceCard({ n, icon, t, d, kpi, delay }) {
  const [hover, setHover] = useStS(false);
  return (
    <div
      className="reveal" data-delay={delay}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', padding: 32, borderRadius: 22,
        background: hover
          ? 'linear-gradient(180deg, rgba(244,247,245,0.045), rgba(244,247,245,0.01))'
          : 'linear-gradient(180deg, rgba(244,247,245,0.025), rgba(244,247,245,0.005))',
        border: `1px solid ${hover ? 'rgba(47,133,90,0.4)' : 'rgba(244,247,245,0.08)'}`,
        backdropFilter: 'blur(20px)',
        transition: 'all 0.5s cubic-bezier(0.2, 0.7, 0.2, 1)',
        cursor: 'pointer', overflow: 'hidden',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
      }}>
      {hover && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 1,
          background: 'linear-gradient(90deg, transparent, var(--vp-gold), transparent)',
        }} />
      )}

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
        <div style={{
          width: 52, height: 52, borderRadius: 14,
          background: hover ? 'var(--grad-gold)' : 'linear-gradient(135deg, rgba(47,133,90,0.15), rgba(47,133,90,0.04))',
          border: hover ? 'none' : '1px solid rgba(47,133,90,0.3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 22, color: hover ? '#07140E' : 'var(--vp-gold-light)',
          transition: 'all 0.5s',
          boxShadow: hover ? '0 12px 30px -8px rgba(47,133,90,0.5)' : 'none',
        }}>{icon}</div>
        <span className="mono" style={{
          fontSize: 11, color: 'var(--vp-cream-faint)', letterSpacing: '0.15em',
        }}>{n}</span>
      </div>

      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 500,
        letterSpacing: '-0.02em', marginBottom: 12, color: 'var(--vp-cream)',
      }}>{t}</h3>

      <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--vp-cream-dim)', marginBottom: 22 }}>{d}</p>

      <div style={{
        paddingTop: 18, borderTop: '1px solid rgba(244,247,245,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span className="mono" style={{
          fontSize: 11, letterSpacing: '0.08em', color: 'var(--vp-gold-light)',
          fontWeight: 600,
        }}>↗ {kpi}</span>
        <span style={{
          width: 28, height: 28, borderRadius: '50%',
          background: hover ? 'var(--grad-gold)' : 'transparent',
          border: hover ? 'none' : '1px solid rgba(244,247,245,0.15)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 12, color: hover ? '#07140E' : 'var(--vp-cream-dim)',
          transition: 'all 0.5s',
          transform: hover ? 'translateX(0)' : 'translateX(-4px)',
        }}>→</span>
      </div>
    </div>
  );
}

/* ============================================
   PROCESS / TIMELINE
   ============================================ */
function ProcessSection() {
  const steps = [
    { n: '01', t: 'Audit', d: 'Cartographie de vos process, identification des goulots d\'étranglement, chiffrage du potentiel de gain.', dur: '2 semaines' },
    { n: '02', t: 'Stratégie', d: 'Architecture sur mesure de votre infrastructure IA. Roadmap priorisée par ROI.', dur: '1 semaine' },
    { n: '03', t: 'Déploiement', d: 'Construction, intégration et tests des systèmes. Onboarding équipe inclus.', dur: '4-6 semaines' },
    { n: '04', t: 'Optimisation', d: 'Suivi des KPIs, ajustements continus, A/B testing des workflows critiques.', dur: 'Continu' },
    { n: '05', t: 'Scale', d: 'Évolution de l\'infrastructure au rythme de votre croissance. Sans frictions.', dur: 'Long terme' },
  ];

  return (
    <section id="process" style={{ padding: '140px 0', position: 'relative' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', marginBottom: 100, maxWidth: 720, margin: '0 auto 100px' }}>
          <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20, justifyContent: 'center' }}>Notre méthode</div>
          <h2 className="display-lg reveal" data-delay="1">
            Cinq étapes.<br/>
            <span className="display-italic gold-text">Zéro improvisation.</span>
          </h2>
        </div>

        <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto' }}>
          {/* Timeline line */}
          <div style={{
            position: 'absolute', top: 36, left: '5%', right: '5%', height: 1,
            background: 'linear-gradient(90deg, transparent, rgba(47,133,90,0.4), rgba(47,133,90,0.4), transparent)',
          }} className="timeline-line" />

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }} className="process-grid">
            {steps.map((s, i) => (
              <div key={i} className="reveal" data-delay={i + 1} style={{ position: 'relative', textAlign: 'center' }}>
                <div style={{
                  width: 72, height: 72, borderRadius: '50%',
                  background: 'linear-gradient(180deg, var(--vp-black-2), var(--vp-black))',
                  border: '1px solid rgba(47,133,90,0.4)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  margin: '0 auto 24px',
                  boxShadow: '0 0 0 6px var(--vp-black), 0 8px 30px -10px rgba(47,133,90,0.4)',
                  position: 'relative', zIndex: 2,
                }}>
                  <span className="mono" style={{
                    fontSize: 13, fontWeight: 600, color: 'var(--vp-gold-light)',
                    letterSpacing: '0.05em',
                  }}>{s.n}</span>
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500,
                  letterSpacing: '-0.02em', marginBottom: 10,
                }}>{s.t}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--vp-cream-dim)', marginBottom: 14, padding: '0 6px' }}>
                  {s.d}
                </p>
                <span className="mono" style={{
                  display: 'inline-block', padding: '4px 10px',
                  background: 'rgba(47,133,90,0.08)', borderRadius: 999,
                  border: '1px solid rgba(47,133,90,0.2)',
                  fontSize: 10, letterSpacing: '0.1em', color: 'var(--vp-gold-light)',
                }}>{s.dur}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .process-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 40px !important; }
          .timeline-line { display: none; }
        }
        @media (max-width: 500px) {
          .process-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ============================================
   PROOF / TESTIMONIALS
   ============================================ */
function ProofSection() {
  const stats = [
    { v: 50, suf: '+', l: 'Entreprises accompagnées', sub: 'PME · Scale-ups · ETI' },
    { v: 12, suf: 'h', l: 'Gagnées par semaine', sub: 'En moyenne dès le 1er mois' },
    { v: 3.4, dec: 1, suf: '×', l: 'Multiplicateur conversion', sub: 'Sur 6 mois après déploiement' },
    { v: 4.96, dec: 2, suf: '/5', l: 'Note client moyenne', sub: 'Basée sur 47 retours vérifiés' },
  ];

  const testimonials = [
    {
      q: 'En 8 semaines, Vivo a remplacé trois outils, automatisé 80% de notre prospection et libéré l\'équipe commerciale du reporting. On a doublé notre pipeline.',
      a: 'Camille Moreau', r: 'CEO · Helvex Studio', m: '+€340k pipeline',
    },
    {
      q: 'Je passais 14h par semaine sur des relances et du copier-coller. Aujourd\'hui c\'est zéro. Et nos leads ne sont plus jamais oubliés. Sérieusement, c\'est un changement de paradigme.',
      a: 'Antoine Lebrun', r: 'Fondateur · Crestline', m: '−14h / semaine',
    },
    {
      q: 'L\'équipe Vivo comprend le business avant la tech. Leur audit a identifié des angles morts qu\'on traînait depuis deux ans. Mise en œuvre chirurgicale.',
      a: 'Sophie Aldenbarch', r: 'COO · Novaflow', m: '×2.8 conversion',
    },
  ];

  return (
    <section id="proof" style={{ padding: '140px 0', position: 'relative' }}>
      <div className="orb orb-bordeaux" style={{ width: 500, height: 500, top: 100, right: -150 }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 80px' }}>
          <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20, justifyContent: 'center' }}>Preuves</div>
          <h2 className="display-lg reveal" data-delay="1">
            Les chiffres ne mentent pas.<br/>
            <span className="display-italic" style={{ color: 'var(--vp-cream-dim)' }}>Nos clients non plus.</span>
          </h2>
        </div>

        {/* Big stats row */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          padding: '50px 0', marginBottom: 80,
          borderTop: '1px solid var(--vp-line-strong)',
          borderBottom: '1px solid var(--vp-line-strong)',
        }} className="proof-stats">
          {stats.map((s, i) => (
            <div key={i} className="reveal" data-delay={i + 1} style={{
              padding: '0 32px', textAlign: 'center',
              borderRight: i < stats.length - 1 ? '1px solid var(--vp-line)' : 'none',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 5vw, 76px)',
                fontWeight: 300, letterSpacing: '-0.04em', lineHeight: 1,
                marginBottom: 12,
              }}>
                <span className="gold-text">
                  <Counter to={s.v} decimals={s.dec || 0} suffix={s.suf} duration={1800} />
                </span>
              </div>
              <div style={{ fontSize: 14, color: 'var(--vp-cream)', fontWeight: 500, marginBottom: 4 }}>
                {s.l}
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em' }}>
                {s.sub}
              </div>
            </div>
          ))}
        </div>

        {/* Testimonials */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="testi-grid">
          {testimonials.map((t, i) => (
            <div key={i} className="reveal" data-delay={i + 1} style={{
              padding: 32, borderRadius: 22,
              background: 'linear-gradient(180deg, rgba(244,247,245,0.03), rgba(244,247,245,0.01))',
              border: '1px solid rgba(244,247,245,0.08)',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{
                width: 32, height: 32, marginBottom: 20,
                fontFamily: 'var(--font-display)', fontSize: 50, lineHeight: 0.6,
                color: 'var(--vp-gold-light)', fontStyle: 'italic',
              }}>"</div>

              <p style={{
                fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1.4,
                fontWeight: 400, letterSpacing: '-0.01em', color: 'var(--vp-cream)',
                marginBottom: 28, flex: 1,
              }}>
                {t.q}
              </p>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 20, borderTop: '1px solid rgba(244,247,245,0.06)' }}>
                <div>
                  <div style={{ fontSize: 14, color: 'var(--vp-cream)', fontWeight: 500, marginBottom: 2 }}>
                    {t.a}
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em' }}>
                    {t.r}
                  </div>
                </div>
                <div style={{
                  padding: '6px 11px', borderRadius: 999,
                  background: 'rgba(47,133,90,0.25)',
                  border: '1px solid rgba(47,133,90,0.5)',
                  fontSize: 11, color: '#7BD4A8', fontFamily: 'var(--font-mono)', fontWeight: 600,
                  whiteSpace: 'nowrap',
                }}>
                  ↗ {t.m}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .proof-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 40px 0 !important; }
          .proof-stats > div:nth-child(2) { border-right: none !important; }
          .testi-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 600px) {
          .proof-stats { grid-template-columns: 1fr !important; }
          .proof-stats > div { border-right: none !important; padding: 24px 0 !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ProblemsSection, ServicesSection, ProcessSection, ProofSection });