/* global React */
const { useState: useStB, useEffect: useEffB, useRef: useRefB } = React;

/* ============================================
   URGENCY SECTION
   ============================================ */
function UrgencySection() {
  return (
    <section id="urgence" style={{ padding: '120px 0 80px', position: 'relative' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="reveal surface-gold-edge" style={{
          padding: '64px 56px',
          background: 'linear-gradient(135deg, rgba(22,30,26,0.5) 0%, rgba(10,15,13,0.8) 50%, rgba(8,32,25,0.5) 100%)',
          borderRadius: 28,
          position: 'relative', overflow: 'hidden',
        }}>
          {/* Decorative orbs inside */}
          <div className="orb orb-bordeaux" style={{ width: 400, height: 400, top: -100, left: -100, opacity: 0.6 }} />
          <div className="orb orb-green" style={{ width: 400, height: 400, bottom: -100, right: -100, opacity: 0.6 }} />

          <div style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'center',
            position: 'relative', zIndex: 2,
          }} className="urgency-grid">
            <div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 14px', borderRadius: 999,
                background: 'rgba(100,116,107,0.3)',
                border: '1px solid rgba(100,116,107,0.6)',
                marginBottom: 28,
              }}>
                <span style={{
                  width: 8, height: 8, borderRadius: '50%', background: '#8A9A90',
                  boxShadow: '0 0 8px #8A9A90',
                  animation: 'vp-pulse-ring 1.5s ease-out infinite',
                }} />
                <span className="mono" style={{ fontSize: 11, color: '#A4B3AA', letterSpacing: '0.15em' }}>
                  PLACES LIMITÉES · Q2 2026
                </span>
              </div>

              <h2 className="display-lg" style={{ marginBottom: 24 }}>
                Nous travaillons<br/>
                <span className="display-italic gold-text">avec 8 entreprises</span><br/>
                par trimestre. Maximum.
              </h2>

              <p className="body-lg" style={{ marginBottom: 32, maxWidth: 480 }}>
                Pour garantir un accompagnement chirurgical, notre capacité est volontairement limitée. Sélection sur dossier — uniquement les entreprises avec un projet de croissance sérieux.
              </p>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  'CA annuel minimum : 500k€',
                  'Volonté d\'investir dans l\'infrastructure',
                  'Engagement minimum 6 mois',
                ].map((c, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: '50%',
                      background: 'var(--grad-gold)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 11, color: '#07140E', fontWeight: 700,
                      boxShadow: '0 4px 12px -2px rgba(47,133,90,0.4)',
                    }}>✓</span>
                    <span style={{ fontSize: 15, color: 'var(--vp-cream)' }}>{c}</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{
              padding: 32, borderRadius: 20,
              background: 'rgba(10,15,13,0.6)',
              border: '1px solid rgba(47,133,90,0.3)',
              backdropFilter: 'blur(20px)',
            }}>
              <div className="mono" style={{
                fontSize: 11, color: 'var(--vp-gold)', letterSpacing: '0.22em',
                textTransform: 'uppercase', marginBottom: 20,
              }}>
                Disponibilités · Q2 2026
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 28 }}>
                {[
                  { m: 'Avril 2026', s: 8, t: 8, status: 'full' },
                  { m: 'Mai 2026', s: 7, t: 8, status: 'full' },
                  { m: 'Juin 2026', s: 5, t: 8, status: 'limited' },
                  { m: 'Juillet 2026', s: 2, t: 8, status: 'available' },
                ].map((row, i) => (
                  <div key={i}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 14, color: 'var(--vp-cream)', fontWeight: 500 }}>{row.m}</span>
                      <span className="mono" style={{
                        fontSize: 11, letterSpacing: '0.05em',
                        color: row.status === 'available' ? '#7BD4A8' : row.status === 'limited' ? 'var(--vp-gold-light)' : 'var(--vp-cream-faint)',
                      }}>
                        {row.status === 'full' ? 'Complet' : `${row.t - row.s}/${row.t} places`}
                      </span>
                    </div>
                    <div style={{ height: 4, borderRadius: 2, background: 'rgba(244,247,245,0.05)', overflow: 'hidden' }}>
                      <div style={{
                        height: '100%', width: `${(row.s / row.t) * 100}%`,
                        background: row.status === 'available'
                          ? 'linear-gradient(90deg, #2F855A, #7BD4A8)'
                          : row.status === 'limited'
                            ? 'var(--grad-gold)'
                            : 'linear-gradient(90deg, var(--vp-bordeaux), var(--vp-bordeaux-glow))',
                        transition: 'width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1)',
                      }} />
                    </div>
                  </div>
                ))}
              </div>

              <a href="#booking" className="btn btn-primary" style={{ width: '100%' }}>
                Candidater pour Juillet → <span className="btn-arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .urgency-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

/* ============================================
   BOOKING — multi-step form + calendar
   ============================================ */
function BookingSection() {
  const [step, setStep] = useStB(1);
  const [data, setData] = useStB({
    name: '', email: '', company: '', role: '',
    revenue: '', problem: [], problemOther: '', selectedDate: null, selectedTime: null,
  });
  const [submitted, setSubmitted] = useStB(false);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const next = () => setStep(s => Math.min(s + 1, 4));
  const back = () => setStep(s => Math.max(s - 1, 1));

  const canNext = () => {
    if (step === 1) return data.name && data.email && data.company;
    if (step === 2) return data.revenue && data.role;
    if (step === 3) return data.problem.length > 0 && (!data.problem.includes('other') || data.problemOther.trim());
    if (step === 4) return true;
    return false;
  };

  return (
    <section id="booking" style={{ padding: '120px 0 140px', position: 'relative' }}>
      <div className="orb orb-gold" style={{ width: 700, height: 700, top: -200, left: '50%', transform: 'translateX(-50%)', opacity: 0.5 }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 60px' }}>
          <div className="eyebrow eyebrow-line reveal" style={{ marginBottom: 20, justifyContent: 'center' }}>Réservation</div>
          <h2 className="display-lg reveal" data-delay="1" style={{ marginBottom: 20 }}>
            Réservez votre <span className="display-italic gold-text">appel de croissance</span>
          </h2>
          <p className="body-lg reveal" data-delay="2">
            30 minutes d'audit stratégique offert. Repartez avec un plan d'action concret — que vous travailliez avec nous ou non.
          </p>
        </div>

        {!submitted ? (
          <div className="reveal surface-gold-edge" style={{
            maxWidth: 880, margin: '0 auto',
            background: 'linear-gradient(180deg, rgba(12,18,15,0.85), rgba(10,15,13,0.95))',
            borderRadius: 28, padding: 48,
            backdropFilter: 'blur(20px)',
          }}>
            {/* Progress */}
            <div style={{ marginBottom: 40 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                {['Identité', 'Entreprise', 'Besoin', 'Créneau'].map((label, i) => {
                  const num = i + 1;
                  const active = num === step;
                  const done = num < step;
                  return (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 10, flex: 1,
                      cursor: done ? 'pointer' : 'default',
                    }} onClick={() => done && setStep(num)}>
                      <div style={{
                        width: 28, height: 28, borderRadius: '50%',
                        background: done ? 'var(--grad-gold)' : active ? 'rgba(47,133,90,0.15)' : 'rgba(244,247,245,0.05)',
                        border: `1px solid ${done || active ? 'var(--vp-gold)' : 'rgba(244,247,245,0.1)'}`,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                        color: done ? '#07140E' : active ? 'var(--vp-gold-light)' : 'var(--vp-cream-faint)',
                        flexShrink: 0, transition: 'all 0.4s',
                      }}>
                        {done ? '✓' : `0${num}`}
                      </div>
                      <span style={{
                        fontSize: 13, color: active ? 'var(--vp-cream)' : 'var(--vp-cream-faint)',
                        fontWeight: active ? 500 : 400, transition: 'color 0.3s',
                      }}>{label}</span>
                    </div>
                  );
                })}
              </div>
              <div style={{ height: 2, background: 'rgba(244,247,245,0.05)', borderRadius: 2, overflow: 'hidden' }}>
                <div style={{
                  height: '100%', width: `${(step / 4) * 100}%`,
                  background: 'var(--grad-gold)',
                  transition: 'width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1)',
                }} />
              </div>
            </div>

            {/* Step content */}
            <div key={step} style={{ animation: 'vp-fade-up 0.5s ease-out', minHeight: 320 }}>
              {step === 1 && <Step1 data={data} update={update} />}
              {step === 2 && <Step2 data={data} update={update} />}
              {step === 3 && <Step3 data={data} update={update} />}
              {step === 4 && <Step4 data={data} onScheduled={() => setSubmitted(true)} />}
            </div>

            {/* Nav */}
            <div style={{
              display: 'flex', justifyContent: 'space-between', gap: 12,
              marginTop: 40, paddingTop: 28, borderTop: '1px solid rgba(244,247,245,0.06)',
            }}>
              <button
                onClick={back}
                disabled={step === 1}
                className="btn btn-ghost"
                style={{
                  height: 50, fontSize: 14,
                  opacity: step === 1 ? 0.3 : 1,
                  cursor: step === 1 ? 'not-allowed' : 'pointer',
                }}>
                ← Retour
              </button>
              {step < 4 ? (
                <button
                  onClick={next}
                  disabled={!canNext()}
                  className="btn btn-primary"
                  style={{
                    height: 50, fontSize: 14,
                    opacity: canNext() ? 1 : 0.4,
                    cursor: canNext() ? 'pointer' : 'not-allowed',
                  }}>
                  Continuer <span className="btn-arrow">→</span>
                </button>
              ) : (
                <span className="mono" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  fontSize: 12, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em',
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4FB07A', boxShadow: '0 0 6px #4FB07A' }} />
                  Sélectionnez un créneau ci-dessus pour confirmer
                </span>
              )}
            </div>
          </div>
        ) : (
          <BookingConfirmation data={data} reset={() => { setSubmitted(false); setStep(1); }} />
        )}

        {/* Trust strip */}
        <div style={{
          maxWidth: 880, margin: '32px auto 0',
          display: 'flex', justifyContent: 'center', gap: 36, flexWrap: 'wrap',
        }}>
          {[
            { i: '◇', t: 'Réponse sous 24h' },
            { i: '◈', t: 'Entretien confidentiel' },
            { i: '◉', t: 'Sans engagement' },
          ].map((b, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ color: 'var(--vp-gold-light)', fontSize: 14 }}>{b.i}</span>
              <span style={{ fontSize: 13, color: 'var(--vp-cream-dim)' }}>{b.t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Field({ label, children, required }) {
  return (
    <label style={{ display: 'block' }}>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: '0.15em', color: 'var(--vp-cream-faint)',
        textTransform: 'uppercase', marginBottom: 8,
      }}>
        {label} {required && <span style={{ color: 'var(--vp-gold)' }}>*</span>}
      </div>
      {children}
    </label>
  );
}

function inputStyle(filled) {
  return {
    width: '100%', height: 52, padding: '0 18px',
    background: 'rgba(244,247,245,0.04)',
    border: `1px solid ${filled ? 'rgba(47,133,90,0.3)' : 'rgba(244,247,245,0.08)'}`,
    borderRadius: 12,
    color: 'var(--vp-cream)', fontSize: 15,
    fontFamily: 'var(--font-body)',
    outline: 'none',
    transition: 'all 0.3s',
  };
}

function Step1({ data, update }) {
  return (
    <div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginBottom: 8 }}>
        Faisons connaissance.
      </h3>
      <p style={{ fontSize: 14, color: 'var(--vp-cream-dim)', marginBottom: 28 }}>
        Vos coordonnées professionnelles, pour vous adresser le bon dossier.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }} className="form-grid">
        <Field label="Prénom et nom" required>
          <input type="text" value={data.name} onChange={e => update('name', e.target.value)}
            placeholder="Camille Moreau" style={inputStyle(data.name)} />
        </Field>
        <Field label="Email professionnel" required>
          <input type="email" value={data.email} onChange={e => update('email', e.target.value)}
            placeholder="camille@helvex.studio" style={inputStyle(data.email)} />
        </Field>
        <Field label="Entreprise" required>
          <input type="text" value={data.company} onChange={e => update('company', e.target.value)}
            placeholder="Helvex Studio" style={inputStyle(data.company)} />
        </Field>
        <Field label="Téléphone (optionnel)">
          <input type="tel" placeholder="+33 6 12 34 56 78" style={inputStyle(false)} />
        </Field>
      </div>
      <style>{`
        @media (max-width: 700px) {
          .form-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function Step2({ data, update }) {
  const roles = ['Fondateur · CEO', 'Direction · COO/CMO', 'Responsable Ops', 'Autre'];
  const revenues = ['< 100k€', '100k€ – 250k€', '250k€ – 500k€', '500k€ – 1M€', '> 1M€'];
  return (
    <div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginBottom: 8 }}>
        Parlez-nous de votre entreprise.
      </h3>
      <p style={{ fontSize: 14, color: 'var(--vp-cream-dim)', marginBottom: 28 }}>
        Pour adapter notre approche à votre stade de croissance.
      </p>

      <Field label="Votre rôle" required>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 24 }}>
          {roles.map(r => (
            <button key={r} type="button" onClick={() => update('role', r)} style={{
              padding: '12px 20px', borderRadius: 999,
              background: data.role === r ? 'var(--grad-gold)' : 'rgba(244,247,245,0.04)',
              border: `1px solid ${data.role === r ? 'transparent' : 'rgba(244,247,245,0.1)'}`,
              color: data.role === r ? '#07140E' : 'var(--vp-cream)',
              fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: data.role === r ? 600 : 400,
              cursor: 'pointer', transition: 'all 0.3s',
            }}>{r}</button>
          ))}
        </div>
      </Field>

      <Field label="Chiffre d'affaires annuel" required>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          {revenues.map(r => (
            <button key={r} type="button" onClick={() => update('revenue', r)} style={{
              padding: '12px 20px', borderRadius: 999,
              background: data.revenue === r ? 'var(--grad-gold)' : 'rgba(244,247,245,0.04)',
              border: `1px solid ${data.revenue === r ? 'transparent' : 'rgba(244,247,245,0.1)'}`,
              color: data.revenue === r ? '#07140E' : 'var(--vp-cream)',
              fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: data.revenue === r ? 600 : 400,
              cursor: 'pointer', transition: 'all 0.3s',
            }}>{r}</button>
          ))}
        </div>
      </Field>
    </div>
  );
}

function Step3({ data, update }) {
  const problems = [
    { v: 'time', t: 'Temps perdu sur des tâches répétitives', i: '⏱' },
    { v: 'leads', t: 'Leads non qualifiés ou oubliés', i: '◌' },
    { v: 'process', t: 'Process manuels & dispersés', i: '⚙' },
    { v: 'data', t: 'Manque de visibilité / reporting', i: '◍' },
    { v: 'scale', t: 'Difficulté à scaler sans recruter', i: '↗' },
    { v: 'other', t: 'Autre situation', i: '◇' },
  ];
  const selected = Array.isArray(data.problem) ? data.problem : [];
  const toggle = (v) => {
    update('problem', selected.includes(v) ? selected.filter(x => x !== v) : [...selected, v]);
  };
  return (
    <div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginBottom: 8 }}>
        Quels sont vos besoins ?
      </h3>
      <p style={{ fontSize: 14, color: 'var(--vp-cream-dim)', marginBottom: 28 }}>
        Sélectionnez tout ce qui vous coûte du temps ou du revenu aujourd'hui — plusieurs choix possibles.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }} className="form-grid">
        {problems.map(p => {
          const active = selected.includes(p.v);
          return (
          <button key={p.v} type="button" onClick={() => toggle(p.v)} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '18px 20px', borderRadius: 14,
            background: active ? 'linear-gradient(135deg, rgba(47,133,90,0.15), rgba(47,133,90,0.04))' : 'rgba(244,247,245,0.03)',
            border: `1px solid ${active ? 'rgba(47,133,90,0.5)' : 'rgba(244,247,245,0.08)'}`,
            color: 'var(--vp-cream)', fontFamily: 'var(--font-body)', fontSize: 14,
            cursor: 'pointer', textAlign: 'left', transition: 'all 0.3s',
          }}>
            <span style={{
              width: 36, height: 36, borderRadius: 10, flexShrink: 0,
              background: active ? 'var(--grad-gold)' : 'rgba(47,133,90,0.1)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18, color: active ? '#07140E' : 'var(--vp-gold-light)',
            }}>{p.i}</span>
            <span style={{ flex: 1 }}>{p.t}</span>
            <span style={{
              width: 22, height: 22, borderRadius: 6, flexShrink: 0,
              border: `1px solid ${active ? 'transparent' : 'rgba(244,247,245,0.2)'}`,
              background: active ? 'var(--grad-gold)' : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 13, color: '#07140E', transition: 'all 0.3s',
            }}>{active ? '✓' : ''}</span>
          </button>
          );
        })}
      </div>

      {selected.includes('other') && (
        <div style={{ marginTop: 16, animation: 'vp-fade-up 0.4s ease-out' }}>
          <Field label="Décrivez votre besoin" required>
            <textarea
              value={data.problemOther}
              onChange={e => update('problemOther', e.target.value)}
              placeholder="Expliquez en quelques mots la situation ou le besoin spécifique…"
              rows={3}
              style={{
                width: '100%', padding: '14px 18px',
                background: 'rgba(244,247,245,0.04)',
                border: `1px solid ${data.problemOther.trim() ? 'rgba(47,133,90,0.3)' : 'rgba(244,247,245,0.08)'}`,
                borderRadius: 12,
                color: 'var(--vp-cream)', fontSize: 15,
                fontFamily: 'var(--font-body)', lineHeight: 1.5,
                outline: 'none', resize: 'vertical', minHeight: 84,
                transition: 'all 0.3s',
              }} />
          </Field>
        </div>
      )}
    </div>
  );
}

const CALENDLY_URL = 'https://calendly.com/benjamin-vivopartner/30min';

const PROBLEM_LABELS = {
  time: 'Temps perdu sur des tâches répétitives',
  leads: 'Leads non qualifiés ou oubliés',
  process: 'Process manuels & dispersés',
  data: 'Manque de visibilité / reporting',
  scale: 'Difficulté à scaler sans recruter',
  other: 'Autre situation',
};

function Step4({ data, onScheduled }) {
  const ref = useRefB(null);

  // Build the recap that lands in Calendly's note → in your confirmation email
  const buildSummary = () => {
    const needs = (data.problem || []).map(v => v === 'other' ? `Autre : ${data.problemOther}` : PROBLEM_LABELS[v]).filter(Boolean);
    return [
      `Entreprise : ${data.company || '—'}`,
      `Rôle : ${data.role || '—'}`,
      `CA annuel : ${data.revenue || '—'}`,
      `Besoins : ${needs.join(' · ') || '—'}`,
    ].join('\n');
  };

  const buildUrl = () => {
    const p = new URLSearchParams({
      name: data.name || '',
      email: data.email || '',
      a1: buildSummary(),
      hide_gdpr_banner: '1',
      background_color: '0e1512',
      text_color: 'f4f7f5',
      primary_color: '2f855a',
    });
    return `${CALENDLY_URL}?${p.toString()}`;
  };

  // Load Calendly + init inline widget
  useEffB(() => {
    const url = buildUrl();
    const init = () => {
      if (window.Calendly && ref.current) {
        ref.current.innerHTML = '';
        window.Calendly.initInlineWidget({ url, parentElement: ref.current });
      }
    };
    if (window.Calendly) {
      init();
    } else if (!document.querySelector('script[src*="calendly"]')) {
      const s = document.createElement('script');
      s.src = 'https://assets.calendly.com/assets/external/widget.js';
      s.async = true;
      s.onload = init;
      document.body.appendChild(s);
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://assets.calendly.com/assets/external/widget.css';
      document.head.appendChild(link);
    } else {
      const t = setInterval(() => { if (window.Calendly) { clearInterval(t); init(); } }, 200);
      return () => clearInterval(t);
    }
  }, []);

  // Detect successful booking
  useEffB(() => {
    const onMsg = (e) => {
      if (e.data && typeof e.data === 'object' && e.data.event === 'calendly.event_scheduled') {
        onScheduled();
      }
    };
    window.addEventListener('message', onMsg);
    return () => window.removeEventListener('message', onMsg);
  }, [onScheduled]);

  return (
    <div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginBottom: 8 }}>
        Choisissez votre créneau.
      </h3>
      <p style={{ fontSize: 14, color: 'var(--vp-cream-dim)', marginBottom: 24 }}>
        Synchronisé avec Google Agenda · 30 minutes · Visioconférence. Vous recevrez l'invitation par email automatiquement.
      </p>

      <div ref={ref} style={{
        minWidth: 320, height: 680, borderRadius: 16, overflow: 'hidden',
        background: 'rgba(244,247,245,0.02)',
        border: '1px solid rgba(244,247,245,0.08)',
      }}>
        <div style={{
          height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--vp-cream-faint)', fontSize: 13, fontFamily: 'var(--font-mono)',
        }}>
          Chargement du calendrier…
        </div>
      </div>
    </div>
  );
}

function BookingConfirmation({ data, reset }) {
  const today = new Date();
  const monthName = today.toLocaleDateString('fr-FR', { month: 'long' });
  return (
    <div className="reveal in-view surface-gold-edge" style={{
      maxWidth: 680, margin: '0 auto',
      background: 'linear-gradient(180deg, rgba(18,61,50,0.4), rgba(10,15,13,0.95))',
      borderRadius: 28, padding: 56, textAlign: 'center',
      animation: 'vp-fade-up 0.6s ease-out',
    }}>
      <div style={{
        width: 80, height: 80, borderRadius: '50%',
        background: 'var(--grad-gold)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        margin: '0 auto 28px',
        boxShadow: '0 20px 50px -10px rgba(47,133,90,0.5)',
      }}>
        <span style={{ fontSize: 36, color: '#07140E' }}>✓</span>
      </div>

      <h3 className="display-md" style={{ marginBottom: 16 }}>
        Rendez-vous <span className="display-italic gold-text">confirmé</span>.
      </h3>

      <p className="body-lg" style={{ marginBottom: 32, maxWidth: 480, margin: '0 auto 32px' }}>
        Votre créneau est réservé. Une invitation Google Agenda avec le lien de visio a été envoyée à <strong style={{ color: 'var(--vp-cream)' }}>{data.email || 'votre adresse email'}</strong>, avec le récapitulatif de vos besoins.
      </p>

      <div style={{
        padding: 24, borderRadius: 16,
        background: 'rgba(10,15,13,0.6)',
        border: '1px solid rgba(47,133,90,0.25)',
        marginBottom: 28, textAlign: 'left',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
      }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--vp-cream-faint)', letterSpacing: '0.15em', marginBottom: 4 }}>DURÉE</div>
          <div style={{ color: 'var(--vp-cream)', fontFamily: 'var(--font-display)', fontSize: 17 }}>30 minutes</div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--vp-cream-faint)', letterSpacing: '0.15em', marginBottom: 4 }}>AVEC</div>
          <div style={{ color: 'var(--vp-cream)', fontFamily: 'var(--font-display)', fontSize: 17 }}>Benjamin · Vivo Partner</div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--vp-cream-faint)', letterSpacing: '0.15em', marginBottom: 4 }}>OÙ</div>
          <div style={{ color: 'var(--vp-cream)', fontFamily: 'var(--font-display)', fontSize: 17 }}>Visioconférence</div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--vp-cream-faint)', letterSpacing: '0.15em', marginBottom: 4 }}>CONFIRMATION</div>
          <div style={{ color: 'var(--vp-cream)', fontFamily: 'var(--font-display)', fontSize: 17 }}>Par email</div>
        </div>
      </div>

      <button onClick={reset} className="btn btn-ghost" style={{ height: 48, fontSize: 14 }}>
        Réserver un autre créneau
      </button>
    </div>
  );
}

/* ============================================
   FOOTER
   ============================================ */
function Footer() {
  return (
    <footer style={{
      padding: '80px 0 40px',
      borderTop: '1px solid rgba(47,133,90,0.15)',
      position: 'relative',
      background: 'linear-gradient(180deg, transparent, rgba(10,15,13,0.5))',
    }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48,
          marginBottom: 56,
        }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <div style={{
                width: 44, height: 44, borderRadius: '50%',
                background: `url('assets/vivo-partner-logo-green.png') center/cover`,
                boxShadow: '0 0 0 1px rgba(47,133,90,0.4)',
              }} />
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500 }}>
                Vivo <span className="display-italic" style={{ color: 'var(--vp-gold-light)' }}>Partner</span>
              </div>
            </div>
            <p style={{ fontSize: 14, color: 'var(--vp-cream-dim)', maxWidth: 360, marginBottom: 24, lineHeight: 1.6 }}>
              Infrastructure IA sur mesure pour les entreprises en croissance. Automatise aujourd'hui. Accélère demain.
            </p>
            <div className="mono" style={{ fontSize: 11, color: 'var(--vp-cream-faint)', letterSpacing: '0.1em' }}>
              hello@vivopartner.ai
            </div>
          </div>

          {[
            { t: 'Solutions', l: ['CRM Automation', 'Lead Nurturing IA', 'Acquisition IA', 'Dashboards'] },
            { t: 'Agence', l: ['Méthode', 'Études de cas', 'Témoignages', 'Recrutement'] },
            { t: 'Légal', l: ['Mentions légales', 'CGV', 'Confidentialité', 'Cookies'] },
          ].map((col, i) => (
            <div key={i}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.18em', color: 'var(--vp-gold)',
                textTransform: 'uppercase', marginBottom: 18,
              }}>{col.t}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.l.map((link, j) => (
                  <a key={j} href="#" style={{ fontSize: 14, color: 'var(--vp-cream-dim)', textDecoration: 'none', transition: 'color 0.3s' }}
                    onMouseEnter={e => e.target.style.color = 'var(--vp-gold-light)'}
                    onMouseLeave={e => e.target.style.color = 'var(--vp-cream-dim)'}>
                    {link}
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 28, borderTop: '1px solid rgba(244,247,245,0.06)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16,
        }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--vp-cream-faint)', letterSpacing: '0.05em' }}>
            © 2026 Vivo Partner · Tous droits réservés · Paris · Lyon
          </div>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            {['LinkedIn', 'Twitter', 'YouTube'].map(s => (
              <a key={s} href="#" style={{ fontSize: 12, color: 'var(--vp-cream-dim)', textDecoration: 'none', letterSpacing: '0.05em' }}>
                {s}
              </a>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { UrgencySection, BookingSection, Footer });