// ============================================================
// WASIED · Service landings (Hosting / Orders / Formations / Addons)
// ============================================================

// ---------- Generic landing hero ----------
function LandingHero({ eyebrow, eyebrowColor, title, sub, primaryCta, secondaryCta, accent, decoration }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: '88px 0 56px' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <div className="breath" style={{ position: 'absolute', top: -150, right: '20%', width: 540, height: 540, background: `radial-gradient(circle, ${accent || 'var(--accent-glow)'} 0%, transparent 65%)`, opacity: 0.4 }}/>
      </div>
      <div className="wcontainer" style={{ position: 'relative', display: 'grid', gridTemplateColumns: decoration ? '1fr 1fr' : '1fr', gap: 64, alignItems: 'center' }}>
        <div className="anim-fadeup">
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 10px', background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 999, fontSize: 11, fontWeight: 500, color: 'var(--fg-2)', marginBottom: 24 }}>
            <span style={{ width: 5, height: 5, background: eyebrowColor || 'var(--accent)', borderRadius: '50%' }}/>{eyebrow}
          </div>
          <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.8vw, 64px)', margin: 0, marginBottom: 20, color: 'var(--fg-1)' }}>{title}</h1>
          <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 32, maxWidth: 540 }}>{sub}</p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>{primaryCta}{secondaryCta}</div>
        </div>
        {decoration}
      </div>
    </section>
  );
}

// ============================================================
// HOSTING LANDING
// ============================================================
function HostingLanding() {
  const { hosting } = DATA;
  return (
    <MarketingShell hireStatus={window.__hireStatus} serviceId="hosting">
      <LandingHero
        eyebrow="Hébergement · GMod & Bots Discord"
        eyebrowColor="var(--service-hosting)"
        accent="rgba(103,232,249,0.18)"
        title={<>Vos serveurs, <span style={{ color: 'var(--service-hosting)' }}>en 90 secondes.</span></>}
        sub="Hébergement Garry's Mod et bots Discord sur machines AMD EPYC 4584PX, anti-DDoS pensé pour GMod, sauvegardes AWS S3. France-Gravelines, latence < 5ms."
        primaryCta={<Button variant="accent" size="lg" href="#/checkout">Choisir un plan</Button>}
        secondaryCta={<Button variant="ghost" size="lg" href="#hosting-specs" icon="cpu">Voir les machines</Button>}
        decoration={<HostingHeroViz/>}
      />

      {/* Plans grid */}
      <Section eyebrow="Tarification" title="4 plans, zéro engagement." sub="Annulable à tout moment. Tout est 100 % automatisé : dès que le paiement est validé, votre serveur est créé.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, alignItems: 'stretch' }} className="plans-grid">
          {hosting.plans.map(p => <PlanCard key={p.id} plan={p}/>)}
        </div>
        <div style={{ marginTop: 32, padding: 22, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
          <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 12, fontWeight: 500 }}>OPTIONS ADD-ON</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="opts-grid">
            {hosting.options.map((o, i) => (
              <div key={i} style={{ padding: 16, background: 'var(--surface-2)', border: '1px solid var(--border-1)', borderRadius: 10 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)', marginBottom: 4 }}>{o.name}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>{o.price} · <span style={{ color: 'var(--service-formations)' }}>inclus dans {o.includedIn}</span></div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* Bots */}
      <Section eyebrow="Bots Discord" title="Hébergez vos bots avec la même infrastructure.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, maxWidth: 720 }} className="bots-grid">
          {hosting.bots.map(b => (
            <div key={b.id} style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
                <h3 style={{ fontSize: 18, fontWeight: 600, color: 'var(--fg-1)', margin: 0 }}>{b.name}</h3>
                <div style={{ fontSize: 22, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)' }}>{b.price.toFixed(2)} €<span style={{ fontSize: 12, color: 'var(--fg-3)', fontWeight: 400 }}>/mois</span></div>
              </div>
              <div style={{ display: 'flex', gap: 16, marginBottom: 16, fontSize: 12, color: 'var(--fg-3)' }}>
                <span>RAM <span style={{ color: 'var(--fg-1)', fontWeight: 500 }}>{b.ram}</span></span>
                <span>CPU <span style={{ color: 'var(--fg-1)', fontWeight: 500 }}>{b.cpu}</span></span>
              </div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {b.features.map((f, i) => (
                  <li key={i} style={{ fontSize: 13, color: 'var(--fg-2)', display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon name="check" size={14} color="var(--cash)"/>{f}
                  </li>
                ))}
              </ul>
              <Button variant="ghost" fullWidth style={{ marginTop: 20 }} href="#/checkout">Choisir ce bot</Button>
            </div>
          ))}
        </div>
      </Section>

      {/* Specs */}
      <Section eyebrow="Hardware" title="Le hardware sur lequel tournent vos serveurs.">
        <div id="hosting-specs"/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'center' }} className="specs-grid">
          <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 16 }}>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 12 }}>NŒUD DE PRODUCTION</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.9 }}>
              <SpecLine label="CPU" value={hosting.machine.cpu}/>
              <SpecLine label="RAM" value={hosting.machine.ram}/>
              <SpecLine label="Storage" value={hosting.machine.storage}/>
              <SpecLine label="Location" value={hosting.machine.location}/>
              <SpecLine label="Network" value={hosting.machine.network}/>
              <SpecLine label="Backup" value={hosting.machine.backup}/>
            </div>
          </div>
          <div>
            <h3 className="h-display" style={{ fontSize: 28, margin: 0, marginBottom: 16 }}>Le top du top.</h3>
            <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0, marginBottom: 24 }}>
              Un CPU ultra-puissant, une RAM ECC ultra-rapide, optimisé pour Garry's Mod. Nos machines sont segmentées pour garantir à chaque serveur la performance qu'il paye - pas de noisy neighbor.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Stat value="< 5 ms" label="Latence FR moyenne"/>
              <Stat value="99,99 %" label="Uptime garanti"/>
              <Stat value="+25 %" label="Capacité CPU récupérée"/>
              <Stat value="24 h" label="Fréquence backups"/>
            </div>
          </div>
        </div>
      </Section>

      {/* Perks */}
      <Section eyebrow="Tout inclus" title="Ce que vous obtenez, peu importe le plan.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
          {hosting.perks.map((p, i) => (
            <div key={i} style={{ padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--service-hosting)', marginBottom: 14 }}>
                <Icon name={p.icon} size={18}/>
              </div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{p.title}</div>
              <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>{p.text}</p>
            </div>
          ))}
        </div>
      </Section>

      <CtaSection/>
      <style>{`
        @media (max-width: 1100px) { .plans-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 640px) { .plans-grid, .opts-grid, .bots-grid, .specs-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </MarketingShell>
  );
}

function PlanCard({ plan }) {
  return (
    <div style={{
      position: 'relative', padding: 24, paddingTop: plan.popular ? 32 : 24,
      background: 'var(--surface-1)',
      border: `1px solid ${plan.popular ? 'var(--accent)' : 'var(--border-1)'}`,
      borderRadius: 14, display: 'flex', flexDirection: 'column',
    }}>
      {plan.popular && (
        <div style={{ position: 'absolute', top: -10, left: 24, padding: '3px 10px', background: 'var(--accent)', color: 'var(--fg-inv)', borderRadius: 999, fontSize: 10, fontWeight: 600, letterSpacing: '0.05em' }}>
          POPULAIRE
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: plan.accent }}/>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)' }}>{plan.name}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 8 }}>
        <span style={{ fontSize: 32, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)' }}>{plan.price.toFixed(2)} €</span>
        <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>/mois</span>
      </div>
      <p style={{ fontSize: 12, color: 'var(--fg-3)', margin: 0, marginBottom: 18 }}>{plan.forWho}</p>
      <div style={{ background: 'var(--surface-2)', border: '1px solid var(--border-1)', borderRadius: 8, padding: '10px 12px', marginBottom: 16, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.7 }}>
        <div style={{ color: 'var(--fg-3)' }}>CPU <span style={{ color: 'var(--fg-1)', float: 'right' }}>{plan.cpu}</span></div>
        <div style={{ color: 'var(--fg-3)' }}>RAM <span style={{ color: 'var(--fg-1)', float: 'right' }}>{plan.ram}</span></div>
        <div style={{ color: 'var(--fg-3)' }}>Disk <span style={{ color: 'var(--fg-1)', float: 'right' }}>{plan.storage}</span></div>
        <div style={{ color: 'var(--fg-3)' }}>Players <span style={{ color: 'var(--fg-1)', float: 'right' }}>{plan.players}</span></div>
      </div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
        {plan.features.map((f, i) => (
          <li key={i} style={{ fontSize: 12, color: 'var(--fg-2)', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
            <Icon name="check" size={12} color={plan.accent} style={{ marginTop: 3, flexShrink: 0 }}/>{f}
          </li>
        ))}
      </ul>
      <Button variant={plan.popular ? 'primary' : 'ghost'} fullWidth style={{ marginTop: 20 }} href={`#/checkout?plan=${plan.id}`}>
        Choisir {plan.name}
      </Button>
    </div>
  );
}

function SpecLine({ label, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
      <span style={{ color: 'var(--fg-3)', minWidth: 70, fontSize: 11 }}>{label}</span>
      <span style={{ color: 'var(--fg-1)' }}>{value}</span>
    </div>
  );
}

function Stat({ value, label }) {
  return (
    <div>
      <div style={{ fontSize: 22, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', fontVariantNumeric: 'tabular-nums' }}>{value}</div>
      <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>{label}</div>
    </div>
  );
}

function HostingHeroViz() {
  return (
    <div className="anim-slide-right" style={{ position: 'relative', height: 360 }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14, overflow: 'hidden' }}>
        <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--surface-3)' }}/>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--surface-3)' }}/>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--surface-3)' }}/>
          </div>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>srv-1a2b3c · maincityrp</span>
          <Badge tone="cash" dot="live" size="sm" style={{ marginLeft: 'auto' }}>en ligne</Badge>
        </div>
        <div style={{ padding: 20, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          <MetricCard label="CPU" value="38 %" trend="var(--service-hosting)"/>
          <MetricCard label="RAM" value="5,2 / 8 Go"/>
          <MetricCard label="Joueurs" value="47 / 80"/>
        </div>
        <div style={{ padding: '0 20px 20px' }}>
          <div style={{ fontSize: 10, color: 'var(--fg-3)', marginBottom: 6, fontWeight: 500 }}>CPU · 30 dernières minutes</div>
          <Sparkline data={DATA.demoServer.cpuHistory} color="var(--service-hosting)" width={400} height={80}/>
        </div>
        <div style={{ padding: '14px 20px', background: 'var(--surface-2)', borderTop: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)' }}>
          <span style={{ color: 'var(--cash)', fontWeight: 600 }}>OK</span>
          <span style={{ color: 'var(--fg-4)' }}>19:42</span>
          <span>snapshot S3 · 842 MB</span>
        </div>
      </div>
    </div>
  );
}

function MetricCard({ label, value, trend }) {
  return (
    <div style={{ padding: 14, background: 'var(--surface-2)', borderRadius: 8 }}>
      <div style={{ fontSize: 10, color: 'var(--fg-3)', marginBottom: 4, fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 18, fontWeight: 600, color: trend || 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    </div>
  );
}

// ============================================================
// ORDERS LANDING
// ============================================================
function OrdersLanding() {
  return (
    <MarketingShell hireStatus={window.__hireStatus} serviceId="orders">
      <LandingHero
        eyebrow="Commandes · Développement custom"
        eyebrowColor="var(--service-orders)"
        accent="rgba(110,231,167,0.16)"
        title={<>Du code <span style={{ color: 'var(--service-orders)' }}>fait pour durer.</span></>}
        sub="Addons GMod, gamemodes complets, sites web, bots Discord. 140+ commandes livrées, communication claire, deadlines respectées, paiement sécurisé en deux temps."
        primaryCta={<Button variant="accent" size="lg" href="#/quote">Demander un devis</Button>}
        secondaryCta={<Button variant="ghost" size="lg" href="#/portfolio" icon="folder">Voir le portfolio</Button>}
        decoration={<OrdersHeroViz/>}
      />

      <Section eyebrow="Comment ça marche" title="Un process pensé pour livrer dans les temps.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="trust-grid">
          {[
            { n: '01', title: 'Devis intelligent', text: 'Formulaire 6 étapes. Type, scope, deadline, budget, références, contact. Estimation sous 48h.' },
            { n: '02', title: 'Acompte 30 %', text: 'Création automatique d\'un espace privé : messages, fichiers, suivi en temps réel.' },
            { n: '03', title: 'Développement', text: 'Itérations transparentes, captures à chaque étape, révisions prévues au contrat.' },
            { n: '04', title: 'Livraison + solde', text: 'Recette finale, livrables versionnés, garantie de fonctionnement 30 jours, paiement du solde 70 %.' },
          ].map((s, i) => (
            <div key={i} style={{ padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, position: 'relative' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)', marginBottom: 16, fontWeight: 600, letterSpacing: '0.05em' }}>{s.n}</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{s.title}</div>
              <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>{s.text}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="Ce que je fais" title="Les projets que je prends.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
          {DATA.orders.services.map((s, i) => (
            <div key={i} style={{ padding: 22, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: 'rgba(110,231,167,0.10)', color: 'var(--service-orders)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={['code', 'cube', 'globe', 'discord', 'edit', 'pulse'][i] || 'code'} size={18}/>
              </div>
              <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-1)' }}>{s}</div>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="Portfolio récent" title="Quelques réalisations.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
          {DATA.orders.portfolio.slice(0, 6).map(p => <PortfolioCard key={p.id} item={p}/>)}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <Button variant="ghost" size="md" href="#/portfolio">Voir tout le portfolio</Button>
        </div>
      </Section>

      <Section eyebrow="Avis clients" title="19 commandes, 19 avis 5 étoiles.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="reviews-grid">
          {DATA.reviews.orders.slice(0, 6).map((r, i) => (
            <ReviewCard key={i} review={{ ...r, role: r.date, tone: ['indigo', 'cyan', 'purple', 'green', 'amber', 'red'][i % 6], source: 'Commande' }}/>
          ))}
        </div>
      </Section>

      <CtaSection/>
    </MarketingShell>
  );
}

function PortfolioCard({ item }) {
  const covers = {
    'gradient-cyan': 'linear-gradient(135deg, #0E7490 0%, #67E8F9 100%)',
    'gradient-purple': 'linear-gradient(135deg, #7E22CE 0%, #C4B5FD 100%)',
    'gradient-indigo': 'linear-gradient(135deg, #4F5DBE 0%, #8FA8FF 100%)',
    'gradient-amber': 'linear-gradient(135deg, #B45309 0%, #FBBF24 100%)',
    'gradient-green': 'linear-gradient(135deg, #15803D 0%, #6EE7A7 100%)',
    'gradient-red': 'linear-gradient(135deg, #B91C1C 0%, #FB7185 100%)',
  };
  return (
    <Link to={`/portfolio/${item.id}`}>
      <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, overflow: 'hidden', transition: 'transform 200ms ease, border-color 200ms ease' }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-2)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-1)'; e.currentTarget.style.transform = 'none'; }}>
        <div style={{ height: 160, background: covers[item.cover] || '#1F2937', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 70% 30%, rgba(255,255,255,0.15), transparent 60%)' }}/>
          <div style={{ position: 'absolute', bottom: 12, left: 16, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: '#fff', letterSpacing: '-0.02em' }}>{item.client}</div>
        </div>
        <div style={{ padding: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <Badge tone="orders" size="sm">{item.tag}</Badge>
            <span style={{ fontSize: 11, color: 'var(--fg-3)', marginLeft: 'auto' }}>{item.duration}</span>
          </div>
          <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 12 }}>{item.summary}</p>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {item.tech.slice(0, 3).map((t, i) => <Badge key={i} tone="subtle" size="sm">{t}</Badge>)}
          </div>
        </div>
      </div>
    </Link>
  );
}

function OrdersHeroViz() {
  return (
    <div className="anim-slide-right" style={{ position: 'relative', height: 360 }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14, padding: 24, overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--service-orders)' }}/>
          <span style={{ fontSize: 12, color: 'var(--fg-1)', fontWeight: 500 }}>Commande #0418 · Addon braquage banque v2</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { step: 'Devis envoyé', done: true, date: '14 avr.' },
            { step: 'Acompte versé', done: true, date: '16 avr.' },
            { step: 'En développement', done: true, current: true, date: 'depuis 22 avr.' },
            { step: 'En relecture', done: false, date: 'à venir' },
            { step: 'Livraison · solde', done: false, date: 'à venir' },
          ].map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', background: s.current ? 'rgba(110,231,167,0.06)' : 'var(--surface-2)', border: `1px solid ${s.current ? 'rgba(110,231,167,0.2)' : 'var(--border-1)'}`, borderRadius: 8 }}>
              <div style={{ width: 22, height: 22, borderRadius: '50%', background: s.done ? 'var(--service-orders)' : 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: s.done ? 'var(--fg-inv)' : 'var(--fg-3)' }}>
                {s.done ? <Icon name="check" size={12}/> : <span style={{ fontSize: 10, fontWeight: 600 }}>{i+1}</span>}
              </div>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>{s.step}</span>
              <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>{s.date}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// FORMATIONS LANDING
// ============================================================
function FormationsLanding() {
  const { formations } = DATA;
  return (
    <MarketingShell hireStatus={window.__hireStatus} serviceId="formations">
      <LandingHero
        eyebrow="Formation #1 en France pour Garry's Mod"
        eyebrowColor="var(--service-formations)"
        accent="rgba(196,181,253,0.16)"
        title={<>Devenez développeur GMod en <span style={{ color: 'var(--service-formations)' }}>30 jours.</span></>}
        sub={formations.pitches.sub}
        primaryCta={<Button variant="accent" size="lg" href="#tiers">Voir les packs</Button>}
        secondaryCta={<Button variant="ghost" size="lg" href="#curriculum" icon="book">Voir le programme</Button>}
        decoration={<FormationsHeroViz/>}
      />

      <Section eyebrow="Garantie" title="Satisfait ou remboursé · 10 premiers chapitres sans engagement.">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'center' }} className="specs-grid">
          <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
            <Icon name="shieldCheck" size={28} color="var(--cash)" style={{ marginBottom: 14 }}/>
            <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0 }}>{formations.pitches.guarantee}</p>
          </div>
          <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
            <Icon name="trending" size={28} color="var(--service-formations)" style={{ marginBottom: 14 }}/>
            <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0 }}>
              {formations.pitches.rentab} Les serveurs Garry's Mod ont toujours besoin de développeurs compétents - trouvez vos premiers clients et commencez à rentabiliser après 3 h de travail.
            </p>
          </div>
        </div>
      </Section>

      <Section eyebrow="Tarification" title="3 packs, du débutant à l'expert.">
        <div id="tiers"/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
          {formations.tiers.map(t => <TierCard key={t.id} tier={t}/>)}
        </div>
      </Section>

      <Section eyebrow="Tout ce qu'il faut pour réussir" title="Pas juste des vidéos.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
          {formations.perks.map((p, i) => (
            <div key={i} style={{ padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: 'rgba(196,181,253,0.10)', color: 'var(--service-formations)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                <Icon name={p.icon} size={18}/>
              </div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{p.title}</div>
              <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>{p.text}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="Programme" title="12 chapitres, 87 modules, ~28 h de contenu.">
        <div id="curriculum"/>
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14, overflow: 'hidden' }}>
          {formations.curriculum.map((c, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 100px 100px 100px', gap: 16, alignItems: 'center', padding: '14px 22px', borderTop: i > 0 ? '1px solid var(--border-1)' : 'none' }} className="curriculum-row">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-3)', fontWeight: 500 }}>{c.ch}</div>
              <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-1)' }}>{c.title}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>{c.modules} modules</div>
              <div><Badge tone={c.level === 'Avancé' ? 'hp' : c.level === 'Intermédiaire' ? 'xp' : 'cash'} size="sm">{c.level}</Badge></div>
              <div style={{ textAlign: 'right' }}>
                {c.preview ? <Badge tone="brand" size="sm" icon="eye">Preview</Badge> : <Icon name="lock" size={12} color="var(--fg-4)"/>}
              </div>
            </div>
          ))}
        </div>
      </Section>

      <Section eyebrow="Témoignages" title="8 étudiants · 4,9 / 5 · 100 % recommandent.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="reviews-grid">
          {DATA.reviews.formations.map((r, i) => (
            <ReviewCard key={i} review={{ ...r, source: 'Formation' }}/>
          ))}
        </div>
      </Section>

      <CtaSection/>
      <style>{`
        @media (max-width: 720px) {
          .curriculum-row { grid-template-columns: 40px 1fr !important; }
          .curriculum-row > *:nth-child(3), .curriculum-row > *:nth-child(4), .curriculum-row > *:nth-child(5) { display: none !important; }
        }
      `}</style>
    </MarketingShell>
  );
}

function TierCard({ tier }) {
  return (
    <div style={{
      padding: 30, background: 'var(--surface-1)',
      border: `1px solid ${tier.popular ? 'var(--service-formations)' : 'var(--border-1)'}`,
      borderRadius: 14, position: 'relative', display: 'flex', flexDirection: 'column',
    }}>
      {tier.popular && <Badge tone="formations" size="md" style={{ position: 'absolute', top: -10, left: 24 }}>Le plus choisi</Badge>}
      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{tier.name}</div>
      <p style={{ fontSize: 13, color: 'var(--fg-3)', margin: 0, marginBottom: 22 }}>{tier.sub}</p>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 24 }}>
        <span style={{ fontSize: 44, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)' }}>{tier.price}</span>
        <span style={{ fontSize: 18, color: 'var(--fg-3)' }}>€</span>
        <span style={{ fontSize: 12, color: 'var(--fg-3)', marginLeft: 6 }}>· paiement unique</span>
      </div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        {tier.features.map((f, i) => (
          <li key={i} style={{ fontSize: 13, color: 'var(--fg-2)', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
            <Icon name="check" size={14} color="var(--service-formations)" style={{ marginTop: 2, flexShrink: 0 }}/>{f}
          </li>
        ))}
      </ul>
      <Button variant={tier.popular ? 'primary' : 'ghost'} fullWidth style={{ marginTop: 24 }} href="#/checkout">
        Commencer ma formation
      </Button>
    </div>
  );
}

function FormationsHeroViz() {
  return (
    <div className="anim-slide-right" style={{ position: 'relative', height: 360 }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14, overflow: 'hidden' }}>
        <div style={{ aspectRatio: '16/9', background: 'linear-gradient(135deg, #181D27 0%, #232936 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="play" size={22} color="#fff" style={{ fill: '#fff', marginLeft: 3 }}/>
          </div>
          <div style={{ position: 'absolute', bottom: 12, left: 16, right: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#fff', opacity: 0.9 }}>07:23 / 18:42</span>
            <div style={{ flex: 1, height: 3, background: 'rgba(255,255,255,0.2)', borderRadius: 2, overflow: 'hidden' }}>
              <div style={{ width: '40%', height: '100%', background: 'var(--service-formations)' }}/>
            </div>
          </div>
        </div>
        <div style={{ padding: 20 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--service-formations)', fontWeight: 600, marginBottom: 6 }}>CHAPITRE 04 · MODULE 04.03</div>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 14 }}>SWEP de base : structure et hooks essentiels</div>
          <div style={{ display: 'flex', gap: 10 }}>
            <Badge tone="formations" size="md">Vidéo</Badge>
            <Badge tone="subtle" size="md">+ Quiz</Badge>
            <Badge tone="subtle" size="md">+ TP</Badge>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// ADDONS LANDING (marketplace)
// ============================================================
function AddonsLanding() {
  const [search, setSearch] = React.useState('');
  const [sort, setSort] = React.useState('downloads');
  const [tag, setTag] = React.useState(null);

  const allTags = [...new Set(DATA.addons.list.flatMap(a => a.tags))];

  let list = DATA.addons.list;
  if (search) list = list.filter(a => a.name.toLowerCase().includes(search.toLowerCase()) || a.desc.toLowerCase().includes(search.toLowerCase()));
  if (tag) list = list.filter(a => a.tags.includes(tag));
  list = [...list].sort((a, b) => sort === 'downloads' ? b.downloads - a.downloads : sort === 'stars' ? b.stars - a.stars : b.updated.localeCompare(a.updated));

  return (
    <MarketingShell hireStatus={window.__hireStatus} serviceId="addons">
      <section style={{ padding: '88px 0 40px', position: 'relative', overflow: 'hidden' }}>
        <div className="wcontainer">
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 10px', background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 999, fontSize: 11, fontWeight: 500, color: 'var(--fg-2)', marginBottom: 24 }}>
            <span style={{ width: 5, height: 5, background: 'var(--service-addons)', borderRadius: '50%' }}/>
            Addons · catalogue Wasied
          </div>
          <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.8vw, 56px)', margin: 0, marginBottom: 16 }}>
            Des addons pensés <span style={{ color: 'var(--service-addons)' }}>pour la production.</span>
          </h1>
          <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 32, maxWidth: 620 }}>
            Une partie du catalogue est <strong style={{ color: 'var(--fg-1)' }}>open-source MIT</strong>, héritée des anciens addons payants désormais offerts à la communauté. Les nouveautés premium (économie, factions, modules métiers complexes) restent <strong style={{ color: 'var(--fg-1)' }}>payantes</strong> et bénéficient d'un support actif.
          </p>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ flex: 1, minWidth: 240, maxWidth: 380 }}>
              <Input icon="search" placeholder="Rechercher un addon, un tag, un mot-clé…" value={search} onChange={e => setSearch(e.target.value)}/>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['downloads', 'stars', 'updated'].map(s => (
                <button key={s} onClick={() => setSort(s)} style={{
                  padding: '8px 12px', fontSize: 12, fontWeight: 500,
                  background: sort === s ? 'var(--surface-2)' : 'transparent',
                  border: `1px solid ${sort === s ? 'var(--border-2)' : 'var(--border-1)'}`,
                  color: sort === s ? 'var(--fg-1)' : 'var(--fg-3)',
                  borderRadius: 8, cursor: 'pointer',
                }}>
                  {s === 'downloads' ? 'Téléchargements' : s === 'stars' ? 'Étoiles' : 'Récent'}
                </button>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 14, flexWrap: 'wrap' }}>
            <button onClick={() => setTag(null)} style={{ padding: '4px 10px', fontSize: 11, background: !tag ? 'var(--accent-soft)' : 'transparent', border: '1px solid var(--border-1)', color: !tag ? 'var(--accent)' : 'var(--fg-3)', borderRadius: 999, cursor: 'pointer' }}>
              Tous
            </button>
            {allTags.map(t => (
              <button key={t} onClick={() => setTag(t === tag ? null : t)} style={{ padding: '4px 10px', fontSize: 11, background: tag === t ? 'var(--accent-soft)' : 'transparent', border: '1px solid var(--border-1)', color: tag === t ? 'var(--accent)' : 'var(--fg-3)', borderRadius: 999, cursor: 'pointer' }}>
                {t}
              </button>
            ))}
          </div>
        </div>
      </section>

      <div className="wcontainer" style={{ paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
          {list.map(a => <AddonCard key={a.id} addon={a}/>)}
        </div>
      </div>
    </MarketingShell>
  );
}

function AddonCard({ addon }) {
  const colors = ['#67E8F9', '#FB7185', '#FBBF24', '#C4B5FD', '#6EE7A7', '#8FA8FF'];
  const color = colors[addon.id.length % colors.length];
  const isPaid = addon.price > 0;
  return (
    <Link to={`/addons/${addon.id}`}>
      <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, padding: 22, transition: 'border-color 200ms ease', position: 'relative' }}
        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border-2)'}
        onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border-1)'}>
        {addon.badge && <span style={{ position: 'absolute', top: 14, right: 14, padding: '2px 8px', background: 'var(--accent-soft)', color: 'var(--accent)', border: '1px solid var(--accent)', borderRadius: 999, fontSize: 10, fontWeight: 600, letterSpacing: '0.04em' }}>{addon.badge}</span>}
        <div style={{ width: 44, height: 44, borderRadius: 10, background: `color-mix(in srgb, ${color} 12%, var(--surface-2))`, color, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
          <Icon name="package" size={20}/>
        </div>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{addon.name}</div>
        <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 16 }}>{addon.desc}</p>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
          {addon.tags.map((t, i) => <Badge key={i} tone="subtle" size="sm">{t}</Badge>)}
        </div>
        <div style={{ display: 'flex', gap: 12, fontSize: 11, color: 'var(--fg-3)', fontVariantNumeric: 'tabular-nums', alignItems: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="download" size={11}/>{addon.downloads.toLocaleString('fr-FR')}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="star" size={11}/>{addon.stars}</span>
          <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 4, fontWeight: 600, fontSize: 13, color: isPaid ? 'var(--service-addons)' : 'var(--cash)' }}>
            {isPaid ? `${addon.price.toFixed(2)} €` : 'Gratuit'}
          </span>
        </div>
      </div>
    </Link>
  );
}

function AddonDetail({ slug }) {
  const addon = DATA.addons.list.find(a => a.id === slug);
  if (!addon) return <NotFound/>;
  const isPaid = addon.price > 0;
  return (
    <MarketingShell hireStatus={window.__hireStatus} serviceId="addons">
      <div className="wcontainer" style={{ padding: '64px 0' }}>
        <Link to="/addons" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--fg-3)', marginBottom: 24 }}>
          <Icon name="arrowLeft" size={12}/>Tous les addons
        </Link>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 48, alignItems: 'flex-start' }} className="specs-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
              <div style={{ width: 56, height: 56, borderRadius: 12, background: 'rgba(251,191,36,0.12)', color: 'var(--service-addons)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="package" size={26}/>
              </div>
              <div style={{ flex: 1 }}>
                <h1 className="h-display" style={{ fontSize: 32, margin: 0, marginBottom: 4 }}>{addon.name}</h1>
                <div style={{ fontSize: 13, color: 'var(--fg-3)' }}>par {addon.author} · licence {addon.license} · MAJ {addon.updated}</div>
              </div>
              {isPaid && <Badge tone="brand" size="lg">Premium</Badge>}
              {!isPaid && <Badge tone="cash" size="lg">Gratuit</Badge>}
            </div>
            <p style={{ fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 32 }}>{addon.desc} Compatible Garry's Mod, testé en production sur des serveurs 50+ joueurs. Configuration via fichier Lua bien documenté.</p>
            <div style={{ aspectRatio: '16/9', background: 'linear-gradient(135deg, var(--surface-2), var(--surface-3))', border: '1px solid var(--border-1)', borderRadius: 12, marginBottom: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-4)' }}>
              <Icon name="image" size={28}/>
            </div>
            <h3 style={{ fontSize: 18, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 14 }}>Changelog</h3>
            <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, padding: 20, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.9, color: 'var(--fg-2)' }}>
              <div><span style={{ color: 'var(--cash)' }}>v2.4.0</span> · 2026-05-20 - Refonte du système de configuration, perf +30 %.</div>
              <div><span style={{ color: 'var(--cash)' }}>v2.3.1</span> · 2026-04-12 - Correction d'un crash sur GMod 64-bit.</div>
              <div><span style={{ color: 'var(--cash)' }}>v2.3.0</span> · 2026-02-08 - Support du Workshop dynamique.</div>
              {!isPaid && <div><span style={{ color: 'var(--cash)' }}>v2.0.0</span> · 2025-11-04 - Réécriture complète, passage en MIT.</div>}
            </div>
          </div>
          <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, padding: 24, position: 'sticky', top: 80 }}>
            {isPaid && (
              <div style={{ marginBottom: 18, paddingBottom: 18, borderBottom: '1px solid var(--border-1)' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 4 }}>
                  <span style={{ fontSize: 32, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)' }}>{addon.price.toFixed(2)} €</span>
                  <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>· paiement unique</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>Licence serveur · maj à vie · support inclus 6 mois</div>
              </div>
            )}
            <Button variant="primary" fullWidth icon={isPaid ? 'shoppingBag' : 'download'}>
              {isPaid ? "Acheter l'addon" : 'Télécharger v2.4.0'}
            </Button>
            <Button variant="ghost" fullWidth icon="github" style={{ marginTop: 10 }}>{isPaid ? 'Voir la doc' : 'Voir sur GitHub'}</Button>
            <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--border-1)', display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13 }}>
              <SidebarStat label="Téléchargements" value={addon.downloads.toLocaleString('fr-FR')}/>
              <SidebarStat label="Étoiles" value={addon.stars}/>
              <SidebarStat label="Licence" value={addon.license}/>
              <SidebarStat label="Auteur" value={addon.author}/>
              <SidebarStat label="Mis à jour" value={addon.updated}/>
            </div>
          </div>
        </div>
      </div>
    </MarketingShell>
  );
}

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

Object.assign(window, {
  HostingLanding, OrdersLanding, FormationsLanding, AddonsLanding, AddonDetail,
  LandingHero, PlanCard, TierCard, AddonCard, PortfolioCard, Stat,
});