// ============================================================
// WASIED · Content pages
// ============================================================

// ---------- Pricing (global comparative) ----------
function PricingPage() {
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="Tarification" title="Une page, toute l'offre." sub="Comparez Hébergement, Formations et Bots Discord. Toutes les commandes custom passent par un devis personnalisé.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, alignItems: 'stretch', marginBottom: 64 }} className="plans-grid">
          {DATA.hosting.plans.map(p => <PlanCard key={p.id} plan={p}/>)}
        </div>

        <h3 className="h-display" style={{ fontSize: 24, margin: 0, marginBottom: 24 }}>Formations · paiement unique</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 64 }} className="trust-grid">
          {DATA.formations.tiers.map(t => <TierCard key={t.id} tier={t}/>)}
        </div>

        <h3 className="h-display" style={{ fontSize: 24, margin: 0, marginBottom: 24 }}>Bots Discord</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, maxWidth: 720, marginBottom: 64 }} className="bots-grid">
          {DATA.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>
              <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>
            </div>
          ))}
        </div>

        <h3 className="h-display" style={{ fontSize: 24, margin: 0, marginBottom: 16 }}>Développement à la commande</h3>
        <div style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'center' }} className="specs-grid">
          <div>
            <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0, marginBottom: 16 }}>
              Les commandes custom (addons, gamemodes, sites, bots) sont chiffrées au cas par cas. Tarif horaire indicatif <strong style={{ color: 'var(--fg-1)' }}>40-60 €/h</strong> selon complexité, projet le plus courant entre <strong style={{ color: 'var(--fg-1)' }}>1 500 € et 8 000 €</strong>.
            </p>
            <p style={{ fontSize: 13, color: 'var(--fg-3)', margin: 0 }}>Paiement sécurisé en deux temps : acompte 30 %, solde 70 % à la livraison.</p>
          </div>
          <div style={{ textAlign: 'right' }}>
            <Button variant="primary" size="lg" href="#/quote">Demander un devis</Button>
          </div>
        </div>

        <div style={{ marginTop: 64, padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.7 }}>
          <div style={{ fontWeight: 500, color: 'var(--fg-2)', marginBottom: 6 }}>Mentions tarifaires</div>
          Prix TTC affichés. TVA non applicable selon l'article 56§2 du Code TVA - Maxime opère en tant qu'indépendant complémentaire en Belgique. Toutes les commandes hosting sont sans engagement, annulables à tout moment via votre dashboard. Les formations ouvrent droit à un remboursement intégral pendant les 10 premiers chapitres consultés.
        </div>
      </Section>
    </MarketingShell>
  );
}

// ---------- Portfolio (gallery) ----------
function PortfolioPage() {
  const [filter, setFilter] = React.useState(null);
  const items = filter ? DATA.orders.portfolio.filter(p => p.tag === filter) : DATA.orders.portfolio;
  const tags = [...new Set(DATA.orders.portfolio.map(p => p.tag))];
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="Portfolio" title="Quelques réalisations marquantes." sub="Sélection de commandes récentes. Le portfolio complet est disponible sur demande dans le devis.">
        <div style={{ display: 'flex', gap: 6, marginBottom: 32, flexWrap: 'wrap' }}>
          <button onClick={() => setFilter(null)} style={chipStyle(!filter)}>Toutes les missions ({DATA.orders.portfolio.length})</button>
          {tags.map(t => <button key={t} onClick={() => setFilter(t === filter ? null : t)} style={chipStyle(filter === t)}>{t}</button>)}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
          {items.map(p => <PortfolioCard key={p.id} item={p}/>)}
        </div>
      </Section>
      <PortfolioMediaSection/>
      <CtaSection/>
    </MarketingShell>
  );
}

function PortfolioMediaSection() {
  const cms = useCMS();
  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%)',
  };
  const media = (cms.media || []).filter(m => m.published);
  if (!media.length) return null;
  return (
    <Section eyebrow="Démos" title="Voir en mouvement." sub="Captures vidéo et visuels d'addons et gamemodes livrés. Pour les démos complètes, écrivez-moi.">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
        {media.map(m => (
          <div key={m.id} style={{ aspectRatio: '16/9', background: covers[m.thumb] || 'linear-gradient(135deg, var(--surface-2), var(--surface-3))', border: '1px solid var(--border-1)', borderRadius: 12, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 70% 30%, rgba(255,255,255,0.12), transparent 60%)' }}/>
            {m.type === 'video' && (
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="play" size={20} color="#fff" style={{ fill: '#fff', marginLeft: 2 }}/>
                </div>
              </div>
            )}
            <div style={{ position: 'absolute', top: 10, left: 12, display: 'flex', gap: 6 }}>
              <Badge tone="subtle" size="sm">{m.tag}</Badge>
              {m.type === 'video' && <Badge tone="subtle" size="sm" icon="video">{m.duration}</Badge>}
            </div>
            <div style={{ position: 'absolute', bottom: 12, left: 14, right: 14 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>{m.title}</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>{m.client}</div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function chipStyle(active) {
  return {
    padding: '6px 14px', fontSize: 12, fontWeight: 500,
    background: active ? 'var(--accent-soft)' : 'var(--surface-1)',
    border: `1px solid ${active ? 'var(--accent)' : 'var(--border-1)'}`,
    color: active ? 'var(--accent)' : 'var(--fg-2)',
    borderRadius: 999, cursor: 'pointer', transition: 'all 120ms ease',
  };
}

// ---------- Case study ----------
function CaseStudyPage({ id }) {
  const item = DATA.orders.portfolio.find(p => p.id === id);
  if (!item) return <NotFound/>;
  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 (
    <MarketingShell hireStatus={window.__hireStatus}>
      <div className="wcontainer" style={{ padding: '48px 0' }}>
        <Link to="/portfolio" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--fg-3)', marginBottom: 24 }}>
          <Icon name="arrowLeft" size={12}/>Portfolio
        </Link>
        <div style={{ height: 360, borderRadius: 16, background: covers[item.cover], display: 'flex', alignItems: 'flex-end', padding: 40, marginBottom: 40, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 70% 30%, rgba(255,255,255,0.15), transparent 60%)' }}/>
          <div style={{ position: 'relative', color: '#fff' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', background: 'rgba(0,0,0,0.4)', borderRadius: 999, fontSize: 11, marginBottom: 14 }}>
              {item.tag}
            </div>
            <h1 className="h-display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: 0 }}>{item.client}</h1>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 48 }} className="specs-grid">
          <div>
            <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.6, marginBottom: 28 }}>{item.summary}</p>

            <h3 className="h-display" style={{ fontSize: 22, marginBottom: 12 }}>Le brief</h3>
            <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.7, marginBottom: 28 }}>
              Le client souhaitait une refonte complète de son gamemode RP avec un panneau staff de niveau professionnel, un système de factions cohérent et une économie équilibrée. Contraintes serrées : compatibilité avec leur stack existante, montée en charge prévue à 80+ joueurs simultanés, et zéro downtime pendant la transition.
            </p>

            <h3 className="h-display" style={{ fontSize: 22, marginBottom: 12 }}>Approche technique</h3>
            <ul style={{ paddingLeft: 20, margin: 0, marginBottom: 28, fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.8 }}>
              <li>Architecture modulaire en GLua, séparation strict client/server/shared</li>
              <li>Migration des données legacy vers PostgreSQL avec script de rollback</li>
              <li>Panneau staff React montée sur un endpoint REST exposé par DLib</li>
              <li>Hooks de performance : profilage CPU côté serveur, refactor des AcceptInput coûteux</li>
              <li>Synchronisation Discord (rôles, badges, présence)</li>
            </ul>

            <h3 className="h-display" style={{ fontSize: 22, marginBottom: 12 }}>Résultats</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 32 }}>
              <Stat value="+47 %" label="Joueurs concurrents"/>
              <Stat value="−68 %" label="Latence panel staff"/>
              <Stat value="0" label="Crash en production sur 90j"/>
            </div>

            <div style={{ padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.7, fontStyle: 'italic' }}>
              "Wasied a su comprendre nos contraintes techniques et livrer en respectant les deadlines. Le code livré est propre, documenté, maintenable. C'est notre référence depuis."
              <div style={{ fontStyle: 'normal', marginTop: 12, fontSize: 12, color: 'var(--fg-3)' }}>- Founder, {item.client}</div>
            </div>
          </div>

          <div>
            <div style={{ padding: 22, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, position: 'sticky', top: 80, fontSize: 13 }}>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 14 }}>FICHE PROJET</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <SidebarStat label="Client" value={item.client}/>
                <SidebarStat label="Type" value={item.tag}/>
                <SidebarStat label="Durée" value={item.duration}/>
                <SidebarStat label="Budget" value={item.budget}/>
              </div>
              <div style={{ marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--border-1)' }}>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 8 }}>STACK</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
                  {item.tech.map((t, i) => <Badge key={i} tone="subtle" size="sm">{t}</Badge>)}
                </div>
              </div>
              <Button variant="primary" fullWidth style={{ marginTop: 18 }} href="#/quote">Projet similaire ? Devis</Button>
            </div>
          </div>
        </div>
      </div>
    </MarketingShell>
  );
}

// ---------- About ----------
function AboutPage() {
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="À propos" title="Maxime - Wasied." sub="Développeur Garry's Mod depuis 8 ans. Indépendant basé en Belgique. J'opère seul l'ensemble de l'écosystème Wasied.">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'flex-start' }} className="specs-grid">
          <div>
            <h3 className="h-display" style={{ fontSize: 24, marginBottom: 12 }}>Comment j'en suis arrivé là.</h3>
            <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.7, marginBottom: 20 }}>
              J'ai commencé sur Garry's Mod par hasard, à 13 ans, en bidouillant un script GLua trouvé sur GitHub. Huit ans plus tard, j'ai livré plus de 140 commandes pour des communautés petites et grandes, formé 50+ développeurs, et opéré un parc d'hébergement utilisé par des serveurs roleplay actifs au quotidien.
            </p>
            <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.7, marginBottom: 20 }}>
              Wasied a longtemps été un Discord. Aujourd'hui, c'est une infrastructure : <strong style={{ color: 'var(--fg-1)' }}>hosting</strong>, <strong style={{ color: 'var(--fg-1)' }}>développement</strong>, <strong style={{ color: 'var(--fg-1)' }}>formations</strong> et <strong style={{ color: 'var(--fg-1)' }}>addons</strong>. Tout est opéré par moi, depuis la Belgique, en tant qu'indépendant complémentaire. Pas d'équipe externalisée, pas de centre d'appel : quand vous m'écrivez, c'est moi qui réponds.
            </p>
            <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.7, marginBottom: 32 }}>
              Mon objectif est simple : que chaque créateur GMod puisse trouver chez Wasied l'outillage de production qu'il aurait dû avoir dès le départ, sans avoir à jongler entre 4 prestataires.
            </p>

            <h3 className="h-display" style={{ fontSize: 24, marginBottom: 14 }}>Philosophie</h3>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 32 }}>
              {[
                { title: "Du code qu'on relit en 6 mois", text: "Pas de hack, pas de variable nommée x ou tmp, pas de logique cachée. Mon code est revu par moi avant livraison." },
                { title: "Les deadlines comptent", text: "Si j'accepte une date, je la tiens. Si je ne peux pas, je le dis avant - pas pendant." },
                { title: "Communication directe", text: "Vous parlez au développeur. Pas à un chef de projet, pas à un account manager." },
                { title: "Qualité avant quantité", text: "Je préfère refuser une commande que la bâcler. Mon taux d'avis 5/5 sur 19 commandes le prouve." },
              ].map((p, i) => (
                <div key={i} style={{ padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 10 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{p.title}</div>
                  <p style={{ fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0 }}>{p.text}</p>
                </div>
              ))}
            </div>

            <h3 className="h-display" style={{ fontSize: 24, marginBottom: 14 }}>Statut professionnel</h3>
            <div style={{ padding: 22, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 10, fontSize: 13, lineHeight: 1.8, color: 'var(--fg-2)' }}>
              <div><strong style={{ color: 'var(--fg-1)' }}>Statut</strong> · Indépendant complémentaire, Belgique</div>
              <div><strong style={{ color: 'var(--fg-1)' }}>TVA</strong> · Franchise, article 56§2 du Code TVA</div>
              <div><strong style={{ color: 'var(--fg-1)' }}>N° entreprise</strong> · BE 0XXX.XXX.XXX</div>
              <div><strong style={{ color: 'var(--fg-1)' }}>Facturation</strong> · PDF automatique, conservation 7 ans</div>
            </div>
          </div>

          <div>
            <div style={{ aspectRatio: '4/5', background: 'linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%)', border: '1px solid var(--border-2)', borderRadius: 16, position: 'relative', overflow: 'hidden', marginBottom: 20 }}>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-4)', fontSize: 12, flexDirection: 'column', gap: 8 }}>
                <Icon name="user" size={42}/>
                <span>Photo de Maxime</span>
              </div>
            </div>
            <div style={{ padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, fontSize: 13 }}>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 14 }}>EN CHIFFRES</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <SidebarStat label="Expérience GMod" value="8 ans"/>
                <SidebarStat label="Commandes livrées" value="140+"/>
                <SidebarStat label="Devs formés" value="50+"/>
                <SidebarStat label="Serveurs hébergés" value="62"/>
                <SidebarStat label="Addons open-source" value="8"/>
                <SidebarStat label="Note moyenne" value="4,9 / 5"/>
              </div>
            </div>
            <div id="hire" style={{ marginTop: 16, padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 12 }}>
              <HireMePill status={window.__hireStatus || 'available'}/>
              <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0, marginTop: 14, marginBottom: 14 }}>
                Vous cherchez un prestataire technique sérieux sur Garry's Mod ? Je réponds sous 48 heures à toute demande de devis.
              </p>
              <Button variant="primary" fullWidth href="#/quote">Lancer un projet</Button>
            </div>
          </div>
        </div>
      </Section>
    </MarketingShell>
  );
}

// ---------- Contact ----------
function ContactPage() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="Contact" title="Une question, une idée, un projet." sub="Trois canaux selon l'urgence. Pour un devis structuré, préférez le formulaire dédié.">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'flex-start' }} className="specs-grid">
          <div style={{ padding: 32, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 14 }}>
            {submitted ? (
              <div style={{ textAlign: 'center', padding: '40px 20px' }}>
                <div style={{ width: 64, height: 64, margin: '0 auto 18px', borderRadius: '50%', background: 'rgba(110,231,167,0.12)', color: 'var(--cash)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="checkCircle" size={28}/>
                </div>
                <h3 className="h-display" style={{ fontSize: 22, margin: 0, marginBottom: 8 }}>Message envoyé.</h3>
                <p style={{ fontSize: 14, color: 'var(--fg-2)' }}>Je vous réponds sous 48 heures, à l'adresse renseignée.</p>
                <Button variant="ghost" style={{ marginTop: 18 }} onClick={() => setSubmitted(false)}>Envoyer un autre message</Button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <Input label="Votre nom" placeholder="Maxime D."/>
                  <Input label="Email" type="email" placeholder="contact@exemple.com"/>
                </div>
                <Input label="Sujet" placeholder="Question sur l'hosting, devis, partenariat…"/>
                <Textarea label="Message" placeholder="Quelques lignes pour décrire votre besoin." rows="6"/>
                <Button variant="primary" type="submit" size="lg" iconRight="send" fullWidth>Envoyer le message</Button>
              </form>
            )}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ContactChannel icon="mail" label="Email" value="contact@wasied.com" sub="Réponse sous 48 h" link="mailto:contact@wasied.com"/>
            <ContactChannel icon="discord" label="Discord" value="wasied" sub="Pour les questions rapides" link="https://discord.gg/wasied"/>
            <ContactChannel icon="briefcase" label="Devis structuré" value="Formulaire de commande" sub="Pour un projet de développement" link="#/quote"/>
            <div style={{ padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 12 }}>
              <HireMePill status={window.__hireStatus || 'available'}/>
            </div>
          </div>
        </div>
      </Section>
    </MarketingShell>
  );
}

function ContactChannel({ icon, label, value, sub, link }) {
  return (
    <a href={link} target={link.startsWith('http') ? '_blank' : undefined} rel="noopener" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, transition: 'border-color 200ms ease' }}
      onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border-2)'}
      onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border-1)'}>
      <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--surface-2)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={icon} size={18}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500 }}>{label}</div>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-1)' }}>{value}</div>
        <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{sub}</div>
      </div>
      <Icon name="external" size={14} color="var(--fg-3)"/>
    </a>
  );
}

// ---------- Press ----------
function PressPage() {
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="Espace presse" title="Kit média Wasied." sub="Logos, screenshots, bio, contact business. Pour toute demande presse ou partenariat, écrivez-moi.">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginBottom: 48 }} className="trust-grid">
          {[
            { title: 'Logo · pack complet', sub: 'SVG, PNG, dark, light, gradient', icon: 'package' },
            { title: 'Screenshots produit', sub: 'Hébergement, dashboard, formations · 4K', icon: 'image' },
            { title: 'Bio · 50, 200, 500 mots', sub: 'Versions FR et EN, fichier .md', icon: 'fileText' },
          ].map((a, i) => (
            <div key={i} style={{ padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--surface-2)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}><Icon name={a.icon} size={18}/></div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{a.title}</div>
              <p style={{ fontSize: 12, color: 'var(--fg-3)', margin: 0, marginBottom: 14 }}>{a.sub}</p>
              <Button variant="ghost" size="sm" icon="download" fullWidth>Télécharger</Button>
            </div>
          ))}
        </div>

        <h3 className="h-display" style={{ fontSize: 22, marginBottom: 14 }}>Bio courte (50 mots)</h3>
        <div style={{ padding: 22, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.7, marginBottom: 32 }}>
          Maxime, alias Wasied, est un développeur Garry's Mod indépendant basé en Belgique. Depuis 8 ans, il opère l'écosystème Wasied : hébergement haute performance, développement custom, formations et addons open-source. 140+ commandes livrées, 50+ devs formés, 4,9/5 de note moyenne.
        </div>

        <h3 className="h-display" style={{ fontSize: 22, marginBottom: 14 }}>Contact business</h3>
        <div style={{ padding: 22, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
          <div style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.7 }}>
            <strong style={{ color: 'var(--fg-1)' }}>Email presse</strong> · press@wasied.com<br/>
            <strong style={{ color: 'var(--fg-1)' }}>Partenariats</strong> · partners@wasied.com<br/>
            <strong style={{ color: 'var(--fg-1)' }}>Réponse</strong> · sous 72 heures ouvrables
          </div>
        </div>
      </Section>
    </MarketingShell>
  );
}

// ---------- Blog ----------
function BlogPage() {
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="Blog" title="Articles techniques et retours d'expérience." sub="Hébergement, dev GMod, business, sécurité. Tous les articles sont rédigés par Maxime, basés sur du vécu.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }} className="bots-grid">
          {DATA.blog.map(a => (
            <Link key={a.id} to={`/blog/${a.id}`}>
              <article style={{ padding: 28, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, transition: 'border-color 200ms ease' }}
                onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border-2)'}
                onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border-1)'}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <Badge tone="brand" size="sm">{a.tag}</Badge>
                  <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>{a.date} · {a.read}</span>
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 600, color: 'var(--fg-1)', margin: 0, marginBottom: 10, letterSpacing: 'var(--tracking-snug)', lineHeight: 1.3 }}>{a.title}</h3>
                <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0 }}>{a.excerpt}</p>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--accent)', marginTop: 16 }}>
                  Lire l'article <Icon name="arrow" size={12}/>
                </div>
              </article>
            </Link>
          ))}
        </div>
      </Section>
    </MarketingShell>
  );
}

function BlogArticle({ slug }) {
  const article = DATA.blog.find(a => a.id === slug);
  if (!article) return <NotFound/>;
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <article className="wcontainer" style={{ maxWidth: 760, padding: '56px 24px 80px' }}>
        <Link to="/blog" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--fg-3)', marginBottom: 24 }}>
          <Icon name="arrowLeft" size={12}/>Tous les articles
        </Link>
        <Badge tone="brand">{article.tag}</Badge>
        <h1 className="h-display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', margin: '14px 0 12px' }}>{article.title}</h1>
        <div style={{ fontSize: 13, color: 'var(--fg-3)', marginBottom: 32 }}>Par Maxime · {article.date} · {article.read} de lecture</div>
        <div style={{ fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.75 }}>
          <p>{article.excerpt}</p>
          <p>Cet article est un placeholder - le contenu complet sera rédigé pour la mise en production. Il couvrira en profondeur les sujets annoncés dans le sous-titre, avec des exemples de code GLua concrets, des chiffres mesurés en production, et les pièges à éviter.</p>
          <h2 style={{ fontSize: 24, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-snug)', marginTop: 40 }}>Section 1 - Le contexte</h2>
          <p>L'article démarre par poser le problème concret rencontré : type de serveur, charge, contraintes. L'idée est que le lecteur s'y reconnaisse avant la moindre solution technique.</p>
          <h2 style={{ fontSize: 24, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-snug)', marginTop: 32 }}>Section 2 - L'approche</h2>
          <p>Ensuite, on déroule le raisonnement. Qu'est-ce qu'on a essayé qui n'a pas marché ? Qu'est-ce qui a marché et pourquoi ? Chiffres à l'appui.</p>
          <pre style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 10, padding: 20, overflow: 'auto', fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.6, color: 'var(--fg-2)' }}>{`-- Exemple de hook optimisé
hook.Add("PlayerPostThink", "Wasied.Tick", function(ply)
  if not ply:IsValid() then return end
  local t = CurTime()
  if t - (ply.__lastTick or 0) < 0.5 then return end
  ply.__lastTick = t
  -- logique ici
end)`}</pre>
          <h2 style={{ fontSize: 24, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-snug)', marginTop: 32 }}>Conclusion</h2>
          <p>Une ou deux idées à retenir, et les pistes pour aller plus loin si le sujet vous intéresse.</p>
        </div>

        <div style={{ marginTop: 56, padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 16 }}>
          <Avatar name="Maxime Wasied" size={48} tone="indigo"/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>Écrit par Maxime</div>
            <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>Développeur Garry's Mod depuis 8 ans · Fondateur de Wasied</div>
          </div>
          <Button variant="ghost" href="#/about">Voir le profil</Button>
        </div>
      </article>
    </MarketingShell>
  );
}

// ---------- Changelog ----------
function ChangelogPage() {
  const serviceColors = { hosting: 'var(--service-hosting)', orders: 'var(--service-orders)', formations: 'var(--service-formations)', addons: 'var(--service-addons)', platform: 'var(--accent)' };
  const serviceLabels = { hosting: 'Hébergement', orders: 'Commandes', formations: 'Formations', addons: 'Addons', platform: 'Plateforme' };
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="Changelog" title="L'évolution de l'écosystème, en transparence." sub="Toutes les nouveautés Hébergement, Commandes, Formations, Addons et plateforme. Mis à jour en temps réel.">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          {DATA.changelog.map((c, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32, paddingBottom: 32, borderBottom: i < DATA.changelog.length - 1 ? '1px solid var(--border-1)' : 'none' }} className="cl-row">
              <div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>{c.date}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: serviceColors[c.service] }}/>
                  <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>{serviceLabels[c.service] || c.service}</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>v{c.version}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.items.map((it, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <Badge tone={it.kind === 'feat' ? 'cash' : it.kind === 'fix' ? 'xp' : 'subtle'} size="sm">{it.kind === 'feat' ? 'feat' : it.kind}</Badge>
                    <span style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55 }}>{it.text}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Section>
    </MarketingShell>
  );
}

// ---------- Status page ----------
function StatusPage() {
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="Status · maison" title="Tous les systèmes opérationnels." sub="Disponibilité temps réel des composants critiques de Wasied. Données rafraîchies toutes les 60 secondes.">
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32, padding: 22, background: 'rgba(110,231,167,0.06)', border: '1px solid rgba(110,231,167,0.16)', borderRadius: 12 }}>
          <Icon name="checkCircle" size={28} color="var(--cash)"/>
          <div>
            <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--cash)' }}>Tous les systèmes opérationnels</div>
            <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>Dernier check · il y a 23 secondes</div>
          </div>
        </div>

        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, overflow: 'hidden', marginBottom: 32 }}>
          {DATA.status.services.map((s, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 240px 100px', gap: 16, alignItems: 'center', padding: '16px 22px', borderTop: i > 0 ? '1px solid var(--border-1)' : 'none' }} className="status-row">
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span className="live-dot" style={{ width: 8, height: 8, background: 'var(--cash)', color: 'var(--cash)', borderRadius: '50%' }}/>
                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-1)' }}>{s.name}</span>
              </div>
              <div style={{ display: 'flex', gap: 2 }}>
                {[...Array(60)].map((_, j) => (
                  <div key={j} style={{ flex: 1, height: 24, background: Math.random() > 0.005 ? 'var(--cash)' : 'var(--hp)', opacity: 0.7, borderRadius: 2 }}/>
                ))}
              </div>
              <div style={{ textAlign: 'right', fontSize: 13, color: 'var(--fg-1)', fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>{s.uptime90.toFixed(2)} %</div>
            </div>
          ))}
        </div>

        <h3 className="h-display" style={{ fontSize: 22, marginBottom: 14 }}>Incidents récents</h3>
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12, overflow: 'hidden' }}>
          {DATA.status.incidents.map((i, idx) => (
            <div key={idx} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 100px 100px', gap: 16, alignItems: 'center', padding: '14px 22px', borderTop: idx > 0 ? '1px solid var(--border-1)' : 'none' }} className="status-row">
              <div style={{ fontSize: 12, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>{i.date}</div>
              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>{i.title}</div>
              <Badge tone="cash" size="sm">{i.status}</Badge>
              <div style={{ textAlign: 'right', fontSize: 12, color: 'var(--fg-3)' }}>{i.duration}</div>
            </div>
          ))}
        </div>
      </Section>
    </MarketingShell>
  );
}

// ---------- API Docs ----------
function ApiDocsPage() {
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <Section eyebrow="API publique" title="Wasied API · pour les power users." sub="Une API REST documentée pour intégrer Wasied dans vos outils internes. Hébergement, Commandes, Formations.">
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 32, alignItems: 'flex-start' }} className="specs-grid">
          <nav style={{ position: 'sticky', top: 80, fontSize: 13, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              { h: 'Démarrage', s: 'Authentification' },
              { h: '', s: 'Rate limits' },
              { h: 'Hébergement', s: 'List servers' },
              { h: '', s: 'Get server' },
              { h: '', s: 'Restart / Stop / Start' },
              { h: '', s: 'Console stream' },
              { h: 'Commandes', s: 'List orders' },
              { h: '', s: 'Get order' },
              { h: 'Formations', s: 'List courses' },
              { h: '', s: 'Get progress' },
              { h: 'Webhooks', s: 'Configuration' },
              { h: '', s: 'Events' },
            ].map((n, i) => (
              n.h ? <div key={i} style={{ marginTop: i > 0 ? 14 : 0, fontSize: 11, fontWeight: 500, color: 'var(--fg-3)', letterSpacing: '0.05em' }}>{n.h.toUpperCase()}</div> : <a key={i} href={'#' + n.s.replace(/\s/g,'-')} style={{ padding: '6px 10px', color: 'var(--fg-2)', borderRadius: 6, fontSize: 13 }}>{n.s}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <ApiBlock method="POST" url="https://api.wasied.com/v1/auth/token" desc="Obtenir un token d'API à partir d'un code d'autorisation Discord OAuth.">
{`curl -X POST https://api.wasied.com/v1/auth/token \\
  -H "Content-Type: application/json" \\
  -d '{ "code": "OAUTH_CODE", "redirect_uri": "..." }'`}
            </ApiBlock>
            <ApiBlock method="GET" url="https://api.wasied.com/v1/hosting/servers" desc="Lister vos serveurs hébergés.">
{`{
  "data": [
    {
      "id": "srv-1a2b3c",
      "name": "maincityrp",
      "plan": "community-pro",
      "status": "running",
      "fqdn": "37.65.182.114:27015",
      "players": { "online": 47, "max": 80 },
      "uptime_seconds": 1234792
    }
  ]
}`}
            </ApiBlock>
            <ApiBlock method="POST" url="https://api.wasied.com/v1/hosting/servers/{id}/restart" desc="Redémarrer un serveur. Réponse 202 Accepted, l'opération est asynchrone.">
{`{ "status": "queued", "eta_seconds": 8 }`}
            </ApiBlock>
            <ApiBlock method="POST" url="https://api.wasied.com/v1/webhooks" desc="Configurer un webhook sortant pour recevoir les events de votre compte.">
{`{
  "url": "https://exemple.com/wasied-hook",
  "events": [
    "server.restarted",
    "order.revision.posted",
    "formations.module.completed",
    "invoice.paid"
  ]
}`}
            </ApiBlock>
          </div>
        </div>
      </Section>
    </MarketingShell>
  );
}

function ApiBlock({ method, url, desc, children }) {
  const methodColor = { GET: 'var(--service-orders)', POST: 'var(--accent)', PUT: 'var(--xp)', DELETE: 'var(--hp)' }[method];
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
        <span style={{ padding: '3px 8px', background: 'var(--surface-2)', border: `1px solid ${methodColor}`, color: methodColor, fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, borderRadius: 4 }}>{method}</span>
        <code style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--fg-1)' }}>{url}</code>
      </div>
      <p style={{ fontSize: 13, color: 'var(--fg-2)', margin: 0, marginBottom: 12 }}>{desc}</p>
      <pre style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 10, padding: 16, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.6, color: 'var(--fg-2)', overflow: 'auto', margin: 0 }}>{children}</pre>
    </div>
  );
}

// ---------- Legal pages ----------
function LegalPage({ slug }) {
  const titles = {
    cgv: 'Conditions générales de vente',
    cgu: "Conditions générales d'utilisation",
    rgpd: 'Politique de protection des données (RGPD)',
    cookies: 'Politique cookies',
    mentions: 'Mentions légales',
  };
  return (
    <MarketingShell hireStatus={window.__hireStatus}>
      <article className="wcontainer" style={{ maxWidth: 760, padding: '56px 24px 80px' }}>
        <Link to="/" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--fg-3)', marginBottom: 24 }}>
          <Icon name="arrowLeft" size={12}/>Accueil
        </Link>
        <h1 className="h-display" style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', margin: 0, marginBottom: 32 }}>{titles[slug] || 'Page légale'}</h1>
        <div style={{ fontSize: 13, color: 'var(--fg-3)', marginBottom: 32 }}>Dernière mise à jour · 25 mai 2026 · Maxime - Wasied - Belgique</div>
        <div style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.75 }}>
          <p>Cette page est un placeholder. Le contenu juridique complet sera rédigé en collaboration avec un conseil juridique avant la mise en production.</p>
          <h2 style={{ fontSize: 20, fontWeight: 600, color: 'var(--fg-1)', marginTop: 28 }}>1. Identification</h2>
          <p>Wasied est opéré par Maxime, indépendant complémentaire enregistré en Belgique. Numéro d'entreprise BE 0XXX.XXX.XXX. TVA non applicable (article 56§2 du Code TVA).</p>
          <h2 style={{ fontSize: 20, fontWeight: 600, color: 'var(--fg-1)', marginTop: 28 }}>2. Engagement</h2>
          <p>L'accès aux services Wasied implique l'acceptation pleine et entière des présentes conditions. Tout achat ou souscription donne lieu à une facture en bonne et due forme, conservée pendant 7 ans.</p>
          <h2 style={{ fontSize: 20, fontWeight: 600, color: 'var(--fg-1)', marginTop: 28 }}>3. Données personnelles</h2>
          <p>Les données collectées sont exclusivement utilisées pour fournir et facturer les services. Aucune donnée n'est revendue. L'utilisateur dispose d'un droit d'accès, de rectification et d'effacement conforme au RGPD.</p>
          <h2 style={{ fontSize: 20, fontWeight: 600, color: 'var(--fg-1)', marginTop: 28 }}>4. Garanties et remboursements</h2>
          <p>Formations : remboursement intégral pendant la consultation des 10 premiers chapitres. Hosting : aucune période d'engagement, annulation à tout moment, prorata facturé. Commandes custom : garantie de fonctionnement 30 jours après livraison.</p>
        </div>
      </article>
    </MarketingShell>
  );
}

Object.assign(window, {
  PricingPage, PortfolioPage, CaseStudyPage, AboutPage, ContactPage, PressPage,
  BlogPage, BlogArticle, ChangelogPage, StatusPage, ApiDocsPage, LegalPage,
});