// ============================================================
// WASIED · Checkout (hosting funnel) + Quote (orders multi-step)
// ============================================================

// ---------- Funnel layout shell ----------
function FunnelShell({ children, step, totalSteps, title, sub, onBack }) {
  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <header style={{ borderBottom: '1px solid var(--border-1)', padding: '16px 24px', display: 'flex', alignItems: 'center', gap: 16 }}>
        <Link to="/" style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
          <WLogo size={20} withWord/>
        </Link>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          {[...Array(totalSteps)].map((_, i) => (
            <div key={i} style={{ width: 40, height: 3, borderRadius: 2, background: i + 1 <= step ? 'var(--accent)' : 'var(--surface-3)' }}/>
          ))}
        </div>
        <div style={{ fontSize: 12, color: 'var(--fg-3)', fontVariantNumeric: 'tabular-nums', minWidth: 60, textAlign: 'right' }}>
          Étape {step} / {totalSteps}
        </div>
      </header>
      <main style={{ flex: 1, padding: '48px 24px 80px', position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <div className="breath" style={{ position: 'absolute', top: -120, left: '30%', width: 600, height: 600, background: 'radial-gradient(circle, var(--accent-glow) 0%, transparent 65%)', opacity: 0.2 }}/>
        </div>
        <div className="wcontainer" style={{ position: 'relative', maxWidth: 880 }}>
          {onBack && <button onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: 'transparent', border: 'none', color: 'var(--fg-3)', cursor: 'pointer', fontSize: 12, marginBottom: 12 }}><Icon name="arrowLeft" size={12}/>Étape précédente</button>}
          <h1 className="h-display" style={{ fontSize: 'clamp(28px, 3.2vw, 40px)', margin: 0, marginBottom: 8 }}>{title}</h1>
          {sub && <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 36, maxWidth: 560 }}>{sub}</p>}
          {children}
        </div>
      </main>
    </div>
  );
}

// ============================================================
// CHECKOUT HOSTING - 4 steps: plan → details → payment → provisioning
// ============================================================
function CheckoutHosting() {
  const initial = parseHash().query.plan;
  const [step, setStep] = React.useState(initial ? 2 : 1);
  const [plan, setPlan] = React.useState(initial ? DATA.hosting.plans.find(p => p.id === initial) : null);
  const [name, setName] = React.useState('');
  const [options, setOptions] = React.useState({ customIp: false, fastDl: false, devServer: false });

  if (step === 4) return <ProvisioningStep plan={plan} name={name}/>;

  return (
    <FunnelShell
      step={step} totalSteps={4}
      title={step === 1 ? 'Choisissez votre plan' : step === 2 ? 'Configurez votre serveur' : 'Paiement sécurisé'}
      sub={step === 1 ? "Tous les plans sont sans engagement, annulables à tout moment." : step === 2 ? "On crée votre serveur dès la validation du paiement." : "Paiement chiffré via Stripe. Vous recevez vos credentials par email immédiatement après."}
      onBack={step > 1 ? () => setStep(step - 1) : null}>
      {step === 1 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }} className="bots-grid">
          {DATA.hosting.plans.map(p => (
            <div key={p.id} onClick={() => { setPlan(p); setStep(2); }} style={{ cursor: 'pointer' }}>
              <PlanCard plan={p}/>
            </div>
          ))}
        </div>
      )}
      {step === 2 && plan && (
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24, alignItems: 'flex-start' }} className="specs-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
              <h3 style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', margin: 0, marginBottom: 16 }}>Identité du serveur</h3>
              <Input label="Nom du serveur (visible dans le dashboard)" placeholder="mon-rp-serveur" value={name} onChange={e => setName(e.target.value)}/>
              <div style={{ marginTop: 12 }}>
                <Input label="Map de démarrage (optionnel)" placeholder="rp_southside_v3"/>
              </div>
            </div>
            <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
              <h3 style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', margin: 0, marginBottom: 16 }}>Options add-on</h3>
              {DATA.hosting.options.map((o, i) => {
                const key = ['customIp', 'fastDl', 'devServer'][i];
                const included = plan.name === o.includedIn;
                return (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderTop: i > 0 ? '1px solid var(--border-1)' : 'none' }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>{o.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{included ? `Inclus dans ${o.includedIn}` : o.price}</div>
                    </div>
                    {included ? <Badge tone="cash">Inclus</Badge> : <Toggle on={options[key]} onChange={v => setOptions({ ...options, [key]: v })}/>}
                  </div>
                );
              })}
            </div>
          </div>
          <CheckoutSidebar plan={plan} options={options} onNext={() => setStep(3)} ctaLabel="Continuer vers le paiement"/>
        </div>
      )}
      {step === 3 && plan && (
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24, alignItems: 'flex-start' }} className="specs-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
              <h3 style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', margin: 0, marginBottom: 18 }}>Coordonnées de facturation</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <Input label="Prénom" placeholder="Maxime"/>
                <Input label="Nom" placeholder="Dupuis"/>
              </div>
              <div style={{ marginTop: 14 }}>
                <Input label="Email" placeholder="maxime@exemple.com" type="email" icon="mail"/>
              </div>
              <div style={{ marginTop: 14 }}>
                <Input label="Adresse" placeholder="Rue de la Loi 16"/>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginTop: 14 }}>
                <Input label="Code postal" placeholder="1000"/>
                <Input label="Ville" placeholder="Bruxelles"/>
                <Input label="Pays" placeholder="Belgique"/>
              </div>
            </div>
            <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
              <h3 style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', margin: 0, marginBottom: 18 }}>Mode de paiement</h3>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 18 }}>
                {['Carte bancaire', 'PayPal', 'Apple Pay'].map((m, i) => (
                  <button key={i} style={{ padding: '14px', background: i === 0 ? 'var(--accent-soft)' : 'var(--surface-2)', border: `1px solid ${i === 0 ? 'var(--accent)' : 'var(--border-1)'}`, borderRadius: 8, color: i === 0 ? 'var(--accent)' : 'var(--fg-2)', cursor: 'pointer', fontSize: 12, fontWeight: 500 }}>{m}</button>
                ))}
              </div>
              <Input label="Numéro de carte" placeholder="•••• •••• •••• ••••" icon="credit"/>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 14 }}>
                <Input label="Expiration" placeholder="MM / AA"/>
                <Input label="CVC" placeholder="•••"/>
              </div>
            </div>
          </div>
          <CheckoutSidebar plan={plan} options={options} onNext={() => setStep(4)} ctaLabel="Payer et provisionner" sticky/>
        </div>
      )}
    </FunnelShell>
  );
}

function CheckoutSidebar({ plan, options, onNext, ctaLabel, sticky }) {
  const optsTotal = (options.customIp ? 2.99 : 0) + (options.fastDl ? 2.99 : 0) + (options.devServer ? 5.99 : 0);
  const total = plan.price + optsTotal;
  return (
    <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 14, position: sticky ? 'sticky' : 'static', top: 24 }}>
      <h3 style={{ fontSize: 11, fontWeight: 500, color: 'var(--fg-3)', margin: 0, marginBottom: 14, letterSpacing: '0.05em' }}>RÉCAPITULATIF</h3>
      <div style={{ paddingBottom: 14, borderBottom: '1px solid var(--border-1)' }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 4 }}>{plan.name}</div>
        <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>{plan.cpu} CPU · {plan.ram} RAM · {plan.storage} stockage</div>
        <div style={{ fontSize: 14, color: 'var(--fg-1)', textAlign: 'right', marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>{plan.price.toFixed(2)} €/mois</div>
      </div>
      {(options.customIp || options.fastDl || options.devServer) && (
        <div style={{ padding: '14px 0', borderBottom: '1px solid var(--border-1)', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {options.customIp && <LineItem label="IP personnalisée" value="+ 2,99 €/mois"/>}
          {options.fastDl && <LineItem label="WebFastDL" value="+ 2,99 €/mois"/>}
          {options.devServer && <LineItem label="Serveur de dev" value="+ 5,99 €/mois"/>}
        </div>
      )}
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 0' }}>
        <span style={{ fontSize: 13, color: 'var(--fg-2)' }}>Total mensuel</span>
        <span style={{ fontSize: 18, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', fontVariantNumeric: 'tabular-nums' }}>{total.toFixed(2)} €</span>
      </div>
      <div style={{ fontSize: 11, color: 'var(--fg-3)', textAlign: 'center', marginBottom: 16 }}>TVA non applicable · article 56§2</div>
      <Button variant="primary" fullWidth size="lg" onClick={onNext}>{ctaLabel}</Button>
      <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 11, color: 'var(--fg-3)' }}>
        <Icon name="shield" size={11}/>Paiement sécurisé Stripe · 3D Secure
      </div>
    </div>
  );
}

function LineItem({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
      <span style={{ color: 'var(--fg-3)' }}>{label}</span>
      <span style={{ color: 'var(--fg-1)', fontVariantNumeric: 'tabular-nums' }}>{value}</span>
    </div>
  );
}

function ProvisioningStep({ plan, name }) {
  const steps = [
    { label: 'Paiement validé', done: true },
    { label: "Allocation d'un nœud Gravelines", done: true },
    { label: 'Création du conteneur GMod', done: true },
    { label: 'Configuration anti-DDoS', done: true },
    { label: 'Démarrage initial du serveur', done: false, current: true },
    { label: 'Envoi des credentials par email', done: false },
  ];
  const [progress, setProgress] = React.useState(4);
  React.useEffect(() => {
    const id = setInterval(() => setProgress(p => Math.min(p + 1, steps.length)), 1400);
    return () => clearInterval(id);
  }, []);
  const allDone = progress >= steps.length;
  return (
    <FunnelShell step={4} totalSteps={4} title={allDone ? 'Votre serveur est en ligne.' : 'Provisioning en cours…'}
      sub={allDone ? 'Bienvenue chez Wasied. Tout est prêt - connectez-vous au dashboard pour gérer votre serveur.' : 'Quelques secondes, on configure tout pour vous. Vous pouvez fermer cette page, on vous notifie par email.'}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24, alignItems: 'flex-start' }} className="specs-grid">
        <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
          {steps.map((s, i) => {
            const done = i < progress;
            const current = i === progress;
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', opacity: i > progress ? 0.4 : 1 }}>
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: done ? 'var(--cash)' : current ? 'var(--accent-soft)' : 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  {done ? <Icon name="check" size={14} color="var(--fg-inv)"/> : current ? <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)', animation: 'livePulse 1.2s ease-in-out infinite' }}/> : <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-3)' }}>{i + 1}</span>}
                </div>
                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-1)' }}>{s.label}</span>
                {current && <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--accent)' }}>En cours…</span>}
                {done && <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--fg-3)' }}>✓</span>}
              </div>
            );
          })}
        </div>
        <div style={{ padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 14 }}>
          {allDone ? (
            <>
              <Badge tone="cash" dot="live" size="md" style={{ marginBottom: 14 }}>En ligne</Badge>
              <h3 style={{ fontSize: 18, fontWeight: 600, color: 'var(--fg-1)', margin: 0, marginBottom: 14 }}>Vos credentials</h3>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.9, padding: 14, background: 'var(--surface-2)', borderRadius: 8, color: 'var(--fg-2)' }}>
                <div>IP · <span style={{ color: 'var(--fg-1)' }}>37.65.182.114:27015</span></div>
                <div>SFTP · <span style={{ color: 'var(--fg-1)' }}>srv-1a2b3c.fr.wasied.com:2022</span></div>
                <div>Login · <span style={{ color: 'var(--fg-1)' }}>spacev</span></div>
                <div>Pwd · <span style={{ color: 'var(--fg-1)' }}>•••••••••• (envoyé par email)</span></div>
              </div>
              <Button variant="primary" fullWidth href="#/app" style={{ marginTop: 18 }}>Accéder au dashboard</Button>
            </>
          ) : (
            <>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 14 }}>VOTRE SERVEUR</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{name || 'mon-serveur'}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>{plan.name} · Gravelines</div>
              <div style={{ marginTop: 18, padding: 14, background: 'rgba(143,168,255,0.06)', border: '1px solid var(--border-1)', borderRadius: 8, fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.6 }}>
                Vous recevrez un email avec vos identifiants SFTP et un lien direct vers la console live dès que le démarrage initial est terminé.
              </div>
            </>
          )}
        </div>
      </div>
    </FunnelShell>
  );
}

// ============================================================
// QUOTE ORDERS - 6 steps
// ============================================================
function QuoteOrders() {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    type: '', scope: '', deadline: '', budget: '', revisions: 2, priority: 'normal',
    references: '', name: '', email: '', discord: '',
  });
  const upd = (k, v) => setData({ ...data, [k]: v });

  const total = 6;
  if (step > total) return <QuoteSent data={data}/>;

  return (
    <FunnelShell step={step} totalSteps={total}
      title={['Quel type de projet ?', 'Définissez le scope', "Délai de livraison", 'Budget cible', 'Références et priorité', 'Vos coordonnées'][step - 1]}
      sub={['On adapte la suite du formulaire à votre besoin.', "Décrivez ce que doit faire votre projet. Plus c'est précis, plus l'estimation est juste.", 'À partir de quand en avez-vous besoin ?', "Donnez-moi une fourchette : ça m'aide à ajuster le scope sans surprise.", 'Inspirations, exemples, urgence. Optionnel mais utile.', "Je vous réponds sous 48 heures avec une proposition détaillée."][step - 1]}
      onBack={step > 1 ? () => setStep(step - 1) : null}>
      <div style={{ padding: 32, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
        {step === 1 && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }} className="trust-grid">
            {DATA.orders.services.map((s, i) => (
              <button key={i} onClick={() => { upd('type', s); setStep(2); }} style={{
                padding: 24, background: data.type === s ? 'var(--accent-soft)' : 'var(--surface-2)',
                border: `1px solid ${data.type === s ? 'var(--accent)' : 'var(--border-1)'}`,
                borderRadius: 12, cursor: 'pointer', textAlign: 'left',
                display: 'flex', flexDirection: 'column', gap: 10,
                transition: 'all 120ms ease',
              }}
                onMouseEnter={e => { if (data.type !== s) e.currentTarget.style.borderColor = 'var(--border-2)'; }}
                onMouseLeave={e => { if (data.type !== s) e.currentTarget.style.borderColor = 'var(--border-1)'; }}>
                <Icon name={['code', 'cube', 'globe', 'discord', 'edit', 'pulse'][i]} size={20} color={data.type === s ? 'var(--accent)' : 'var(--fg-2)'}/>
                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-1)' }}>{s}</span>
              </button>
            ))}
          </div>
        )}
        {step === 2 && (
          <>
            <Textarea label="Décrivez votre projet" placeholder="Un addon de braquage de banque avec mini-jeux, anti-cheat intégré, configurable en jeu par les admins. Compatible DarkRP."
              value={data.scope} onChange={e => upd('scope', e.target.value)} style={{ minHeight: 160 }}/>
            <div style={{ marginTop: 14, padding: 14, background: 'var(--surface-2)', border: '1px solid var(--border-1)', borderRadius: 8, fontSize: 12, color: 'var(--fg-3)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <Icon name="info" size={14}/>
              <div>Astuce : listez les fonctionnalités attendues, les contraintes techniques connues, et les choses à <strong style={{ color: 'var(--fg-2)' }}>ne pas faire</strong>. Pas besoin d'être technique - votre intention me suffit.</div>
            </div>
          </>
        )}
        {step === 3 && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }} className="trust-grid">
            {['Dans 2 semaines', 'Dans 1 mois', 'Dans 2-3 mois', 'Pas pressé'].map(d => (
              <button key={d} onClick={() => upd('deadline', d)} style={{
                padding: '24px 16px', background: data.deadline === d ? 'var(--accent-soft)' : 'var(--surface-2)',
                border: `1px solid ${data.deadline === d ? 'var(--accent)' : 'var(--border-1)'}`,
                borderRadius: 10, cursor: 'pointer', fontSize: 13, fontWeight: 500, color: data.deadline === d ? 'var(--accent)' : 'var(--fg-1)',
              }}>{d}</button>
            ))}
          </div>
        )}
        {step === 4 && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }} className="trust-grid">
            {['< 1 500 €', '1 500 - 4 000 €', '4 000 - 8 000 €', '> 8 000 €'].map(b => (
              <button key={b} onClick={() => upd('budget', b)} style={{
                padding: '24px 16px', background: data.budget === b ? 'var(--accent-soft)' : 'var(--surface-2)',
                border: `1px solid ${data.budget === b ? 'var(--accent)' : 'var(--border-1)'}`,
                borderRadius: 10, cursor: 'pointer', fontSize: 13, fontWeight: 500, color: data.budget === b ? 'var(--accent)' : 'var(--fg-1)',
              }}>{b}</button>
            ))}
          </div>
        )}
        {step === 5 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 8, fontWeight: 500 }}>Priorité</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                {[
                  { v: 'low', label: 'Standard', sub: 'Délais classiques' },
                  { v: 'normal', label: 'Normal', sub: 'Suivi régulier' },
                  { v: 'high', label: 'Prioritaire', sub: '+30 %, suivi quotidien' },
                ].map(p => (
                  <button key={p.v} onClick={() => upd('priority', p.v)} style={{
                    padding: 18, background: data.priority === p.v ? 'var(--accent-soft)' : 'var(--surface-2)',
                    border: `1px solid ${data.priority === p.v ? 'var(--accent)' : 'var(--border-1)'}`,
                    borderRadius: 10, cursor: 'pointer', textAlign: 'left',
                  }}>
                    <div style={{ fontSize: 13, fontWeight: 500, color: data.priority === p.v ? 'var(--accent)' : 'var(--fg-1)' }}>{p.label}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{p.sub}</div>
                  </button>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 8, fontWeight: 500 }}>Révisions incluses au contrat</div>
              <div style={{ display: 'flex', gap: 8 }}>
                {[1, 2, 3, 5].map(n => (
                  <button key={n} onClick={() => upd('revisions', n)} style={{
                    padding: '10px 20px', background: data.revisions === n ? 'var(--accent-soft)' : 'var(--surface-2)',
                    border: `1px solid ${data.revisions === n ? 'var(--accent)' : 'var(--border-1)'}`,
                    borderRadius: 8, cursor: 'pointer', fontSize: 13, color: data.revisions === n ? 'var(--accent)' : 'var(--fg-1)', fontWeight: 500,
                  }}>{n} révision{n > 1 ? 's' : ''}</button>
                ))}
              </div>
            </div>
            <Textarea label="Références et inspirations (optionnel)" placeholder="Liens vers d'autres addons, screenshots, ou maquettes." value={data.references} onChange={e => upd('references', e.target.value)} style={{ minHeight: 100 }}/>
          </div>
        )}
        {step === 6 && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="bots-grid">
            <Input label="Votre nom" placeholder="Maxime D." value={data.name} onChange={e => upd('name', e.target.value)}/>
            <Input label="Email" placeholder="contact@exemple.com" type="email" icon="mail" value={data.email} onChange={e => upd('email', e.target.value)}/>
            <Input label="Discord (optionnel)" placeholder="@maxime" icon="discord" value={data.discord} onChange={e => upd('discord', e.target.value)}/>
            <div style={{ alignSelf: 'flex-end', display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: 'rgba(110,231,167,0.06)', border: '1px solid rgba(110,231,167,0.2)', borderRadius: 8, fontSize: 12, color: 'var(--cash)' }}>
              <Icon name="checkCircle" size={14}/>Brouillon sauvegardé automatiquement
            </div>
          </div>
        )}
      </div>

      <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
        <QuoteSummaryPills data={data}/>
        <div style={{ marginLeft: 'auto' }}>
          {step !== 1 && step !== 3 && step !== 4 && (
            <Button variant="primary" size="lg" iconRight={step === total ? 'send' : 'arrow'} onClick={() => setStep(step + 1)}>
              {step === total ? 'Envoyer ma demande' : 'Étape suivante'}
            </Button>
          )}
          {(step === 3 || step === 4) && (data.deadline || data.budget) && (
            <Button variant="primary" size="lg" onClick={() => setStep(step + 1)}>Étape suivante</Button>
          )}
        </div>
      </div>
    </FunnelShell>
  );
}

function QuoteSummaryPills({ data }) {
  const pills = [];
  if (data.type) pills.push(data.type);
  if (data.deadline) pills.push(data.deadline);
  if (data.budget) pills.push(data.budget);
  if (data.priority && data.priority !== 'normal') pills.push(data.priority === 'high' ? 'Prioritaire' : 'Standard');
  return (
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
      {pills.map((p, i) => <Badge key={i} tone="subtle" size="md">{p}</Badge>)}
    </div>
  );
}

function QuoteSent({ data }) {
  return (
    <FunnelShell step={6} totalSteps={6} title="Demande de devis envoyée." sub="Je vous réponds sous 48 heures avec une proposition détaillée, ferme et chiffrée.">
      <div style={{ padding: 40, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 16, textAlign: 'center' }}>
        <div style={{ width: 72, height: 72, margin: '0 auto 20px', borderRadius: '50%', background: 'rgba(110,231,167,0.12)', color: 'var(--cash)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="checkCircle" size={32}/>
        </div>
        <h2 className="h-display" style={{ fontSize: 28, margin: 0, marginBottom: 10 }}>Bien reçu, {data.name || 'à bientôt'}.</h2>
        <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0, marginBottom: 28, maxWidth: 460, marginInline: 'auto' }}>
          Votre demande est dans ma file. Vous recevrez un email à <strong style={{ color: 'var(--fg-1)' }}>{data.email || 'l\'adresse renseignée'}</strong> avec :
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 380, marginInline: 'auto', marginBottom: 32 }}>
          {[
            'Une estimation chiffrée du projet',
            'Un planning de livraison proposé',
            'La liste des révisions et garanties incluses',
            'Un lien sécurisé pour valider et verser l\'acompte',
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'var(--surface-2)', borderRadius: 8, textAlign: 'left' }}>
              <Icon name="check" size={14} color="var(--cash)"/>
              <span style={{ fontSize: 13, color: 'var(--fg-2)' }}>{t}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" href="#/">Retour à l'accueil</Button>
          <Button variant="ghost" href="#/portfolio" icon="folder">Voir le portfolio</Button>
        </div>
      </div>
    </FunnelShell>
  );
}

Object.assign(window, { CheckoutHosting, QuoteOrders, FunnelShell });