// ============================================================
// WASIED · Homepage - Stripe/Cloudflare-style product home
// ============================================================

const PUBLIC_SERVICES = () => listServices().filter(s => s.status !== 'soon');

// ============================================================
// HERO
// ============================================================
function ProductHero({ hireStatus }) {
  const cms = useCMS();
  const h = cms.hero;
  return (
    <section style={{ paddingBottom: 56 }}>
      <div className="wcontainer" style={{ paddingTop: 56 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }} className="hero-split">
          {/* LEFT */}
          <div>
            <div className="anim-fadeup" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 10px 4px 8px', background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 999, fontSize: 11, fontWeight: 500, color: 'var(--fg-2)', marginBottom: 28 }}>
              <span style={{ display: 'inline-flex', gap: 1 }}>
                {[...Array(5)].map((_, i) => <Icon key={i} name="star" size={11} color="var(--xp)" style={{ fill: 'var(--xp)' }}/>)}
              </span>
              <span style={{ color: 'var(--fg-1)' }}>{h.eyebrow}</span>
            </div>

            <h1 className="h-display anim-fadeup" style={{
              fontSize: 'clamp(36px, 5vw, 64px)',
              margin: 0, marginBottom: 24,
              letterSpacing: '-0.035em',
              lineHeight: 1.02,
              color: 'var(--fg-1)',
            }}>
              {h.titleLine1} <br/>
              {h.titleLine2} <span style={{ color: 'var(--accent)' }}>{h.titleAccent}</span>
            </h1>

            <p className="anim-fadeup" style={{ fontSize: 18, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 32, maxWidth: 540, animationDelay: '60ms' }}>
              {h.lede}
            </p>

            <div className="anim-fadeup" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', animationDelay: '120ms' }}>
              <Button variant="primary" size="lg" href={'#' + h.ctaPrimaryHref}>{h.ctaPrimaryLabel}</Button>
              <Button variant="ghost" size="lg" href={'#' + h.ctaSecondaryHref} icon="briefcase">{h.ctaSecondaryLabel}</Button>
            </div>
          </div>

          {/* RIGHT - Product mockup */}
          <div className="anim-fadeup hero-mockup-wrap" style={{ animationDelay: '240ms', minHeight: 460 }}>
            <DashboardMockup/>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .hero-split { grid-template-columns: 1fr !important; gap: 48px !important; }
          .hero-mockup-wrap { display: none; }
        }
      `}</style>
    </section>
  );
}

// ---------- Product mockup (hosting panel preview) ----------
function DashboardMockup() {
  return (
    <div style={{ position: 'relative' }}>
      {/* Subtle frame */}
      <div style={{
        background: 'var(--surface-1)',
        border: '1px solid var(--border-2)',
        borderRadius: 14,
        overflow: 'hidden',
        boxShadow: '0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(143,168,255,0.04)',
      }}>
        {/* Browser-like bar */}
        <div style={{ height: 36, background: 'var(--surface-2)', borderBottom: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', padding: '0 14px', gap: 8 }}>
          <div style={{ display: 'flex', gap: 5 }}>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#27282E' }}/>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#27282E' }}/>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#27282E' }}/>
          </div>
          <span style={{ flex: 1, padding: '4px 10px', background: 'var(--surface-3)', borderRadius: 4, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)', textAlign: 'center' }}>wasied.com/app/hosting/srv-1a2b3c</span>
        </div>

        {/* Server header */}
        <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--border-1)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <span className="live-dot" style={{ width: 8, height: 8, background: 'var(--cash)', color: 'var(--cash)', borderRadius: '50%' }}/>
            <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)' }}>maincityrp</span>
            <Badge tone="hosting" size="sm">Community Pro</Badge>
            <span style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>uptime · 14j 8h</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {[
              { l: 'CPU', v: '38 %', c: 'var(--service-hosting)', pct: 0.38, data: DATA.demoServer.cpuHistory.slice(0, 10) },
              { l: 'RAM', v: '5,2 Go', c: 'var(--accent)', pct: 0.65 },
              { l: 'Joueurs', v: '47 / 80', c: 'var(--cash)', pct: 0.59, data: DATA.demoServer.playerHistory.slice(0, 10) },
              { l: 'Disque', v: '22 Go', c: 'var(--vip)', pct: 0.45 },
            ].map((m, i) => (
              <div key={i} style={{ padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 6 }}>
                <div style={{ fontSize: 9, color: 'var(--fg-3)', marginBottom: 4, fontWeight: 500 }}>{m.l}</div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', marginBottom: 6 }}>{m.v}</div>
                <div style={{ height: 2, background: 'var(--surface-3)', borderRadius: 1, overflow: 'hidden' }}>
                  <div style={{ width: `${m.pct * 100}%`, height: '100%', background: m.c }}/>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* CPU graph */}
        <div style={{ padding: '14px 22px 8px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--fg-1)' }}>CPU · 30 dernières minutes</span>
            <span style={{ fontSize: 10, color: 'var(--fg-3)', fontVariantNumeric: 'tabular-nums' }}>moy. 36 % · pic 45 %</span>
          </div>
          <Sparkline data={DATA.demoServer.cpuHistory} color="var(--service-hosting)" width={500} height={70} fill/>
        </div>

        {/* Console snippet */}
        <div style={{ padding: '0 22px 16px' }}>
          <div style={{ background: '#06090F', borderRadius: 6, padding: '10px 12px', fontFamily: 'var(--font-mono)', fontSize: 10, lineHeight: 1.7, color: 'var(--fg-2)' }}>
            <div><span style={{ color: 'var(--fg-4)' }}>19:44:02</span> <span style={{ color: 'var(--cash)', fontWeight: 600 }}>OK</span>{'  '}<span>[Backup] snapshot quotidien → s3://wasied-backups (842 MB)</span></div>
            <div><span style={{ color: 'var(--fg-4)' }}>19:43:48</span> <span style={{ color: 'var(--accent)', fontWeight: 600 }}>INFO</span> <span>[Voice] OOC: Daniel Walker: "qui veut faire un braquage ?"</span></div>
            <div><span style={{ color: 'var(--fg-4)' }}>19:43:14</span> <span style={{ color: 'var(--accent)', fontWeight: 600 }}>INFO</span> <span>[Wasied/Sync] 47 joueurs en ligne · 12 jobs actifs</span></div>
          </div>
        </div>
      </div>

      {/* Mini card - overlap, like a notification */}
      <div className="hero-mock-card" style={{
        position: 'absolute', bottom: -28, left: -32,
        width: 220, padding: 14,
        background: 'var(--surface-1)',
        border: '1px solid var(--border-2)',
        borderRadius: 10,
        boxShadow: '0 14px 36px rgba(0,0,0,0.35)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <div style={{ width: 26, height: 26, borderRadius: 7, background: 'rgba(110,231,167,0.12)', color: 'var(--cash)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="shield" size={13}/></div>
          <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-1)' }}>Anti-DDoS · protégé</span>
        </div>
        <div style={{ fontSize: 10, color: 'var(--fg-2)', lineHeight: 1.5 }}>
          <strong style={{ color: 'var(--cash)' }}>2 attaques</strong> mitigées sur les dernières 24 h, sans impact joueurs.
        </div>
      </div>
    </div>
  );
}

// ============================================================
// CLIENT MARQUEE (social proof - names scrolling, no specific community)
// ============================================================
function ClientMarquee() {
  const cms = useCMS();
  const clients = cms.clients;
  const row = [...clients, ...clients]; // doubled for seamless loop
  return (
    <section style={{ borderTop: '1px solid var(--border-1)', borderBottom: '1px solid var(--border-1)', background: 'var(--surface-1)', overflow: 'hidden' }}>
      <div style={{ padding: '28px 0' }}>
        <div className="wcontainer" style={{ marginBottom: 18 }}>
          <span style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.06em', fontWeight: 500, textTransform: 'uppercase' }}>
            {cms.clientsCaption}
          </span>
        </div>
        <div style={{ position: 'relative' }}>
          {/* edge fades */}
          <div aria-hidden="true" style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 120, zIndex: 2, background: 'linear-gradient(to right, var(--surface-1), transparent)', pointerEvents: 'none' }}/>
          <div aria-hidden="true" style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 120, zIndex: 2, background: 'linear-gradient(to left, var(--surface-1), transparent)', pointerEvents: 'none' }}/>
          <div className="marquee-track" style={{ display: 'flex', gap: 0, width: 'max-content' }}>
            {row.map((c, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 28, paddingRight: 28 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--fg-3)', letterSpacing: '-0.01em', opacity: 0.7 }}>{c}</span>
                <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--border-3)' }}/>
              </span>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .marquee-track { animation: marqueeScroll 60s linear infinite; }
        .marquee-track:hover { animation-play-state: paused; }
        @keyframes marqueeScroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// 4 SERVICES CARDS
// ============================================================
function ServicesCards() {
  const services = PUBLIC_SERVICES();
  return (
    <section>
      <div className="wcontainer" style={{ padding: '96px 0' }}>
        <div style={{ marginBottom: 56, maxWidth: 680 }}>
          <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 500, marginBottom: 16, letterSpacing: '0.02em' }}>L'écosystème Wasied</div>
          <h2 className="h-display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0, marginBottom: 18, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
            Quatre services, une seule plateforme.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>
            Choisissez ce dont vous avez besoin - vous n'êtes jamais obligé de tout prendre. Une seule authentification, une seule facturation, une seule UX pour tout ce que vous utilisez.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }} className="svc-cards-grid">
          {services.map(s => <ServiceProductCard key={s.id} service={s}/>)}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) { .svc-cards-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function ServiceProductCard({ service }) {
  const [hover, setHover] = React.useState(false);
  const info = {
    hosting: {
      price: 'à partir de 7,99 €/mois',
      bullets: ['Plans Dev Kit → Elite', 'EPYC 4584PX · France-Gravelines', 'Anti-DDoS · backups AWS toutes les 24h', 'Console live, file manager, SFTP'],
      visual: <ServiceVizHosting/>,
    },
    orders: {
      price: 'sur devis · 1 500 € → 8 000 €',
      bullets: ['Addons, gamemodes, sites, bots', 'Paiement 30 % + 70 % à la livraison', "Espace de livraison privé par projet", '140+ commandes · 5/5 sur 19 avis'],
      visual: <ServiceVizOrders/>,
    },
    formations: {
      price: 'à partir de 49 € · paiement unique',
      bullets: ['12 chapitres · 87 modules vidéo', '3 packs : Débutant, Inter, Expert', 'Quiz interactifs + cas pratiques', "Garantie remboursée · 10 premiers chapitres"],
      visual: <ServiceVizFormations/>,
    },
    addons: {
      price: 'gratuits + premium 24,99 € - 34,99 €',
      bullets: ['8 addons gratuits (ex-payants, MIT)', '2 nouveautés premium maintenues', 'Recherche, tags, fiche détail', 'Compatible toutes les builds GMod'],
      visual: <ServiceVizAddons/>,
    },
  }[service.id] || {};

  return (
    <Link to={service.marketing.path}>
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          background: 'var(--surface-1)',
          border: `1px solid ${hover ? 'var(--border-2)' : 'var(--border-1)'}`,
          borderRadius: 14,
          padding: 28,
          display: 'grid',
          gridTemplateColumns: '1fr 220px',
          gap: 28,
          alignItems: 'stretch',
          transition: 'all 200ms ease',
        }} className="svc-card">
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span style={{ width: 28, height: 28, borderRadius: 7, background: `color-mix(in srgb, ${service.color} 14%, var(--surface-2))`, color: service.color, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={service.icon} size={14}/>
            </span>
            <span style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg-1)' }}>{service.brandName}</span>
          </div>
          <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 14 }}>{service.marketing.summary}</p>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
            {info.bullets.map((b, i) => (
              <li key={i} style={{ fontSize: 12, color: 'var(--fg-2)', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                <Icon name="check" size={11} color={service.color} style={{ marginTop: 4, flexShrink: 0 }}/>
                {b}
              </li>
            ))}
          </ul>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--border-1)' }}>
            <span style={{ fontSize: 11, color: 'var(--fg-3)', fontVariantNumeric: 'tabular-nums' }}>{info.price}</span>
            <span style={{ fontSize: 12, color: hover ? service.color : 'var(--fg-2)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 5, transition: 'color 200ms ease' }}>
              Voir <Icon name="arrow" size={12}/>
            </span>
          </div>
        </div>
        <div style={{ background: 'var(--surface-2)', border: '1px solid var(--border-1)', borderRadius: 10, overflow: 'hidden' }}>{info.visual}</div>
      </div>
      <style>{`
        @media (max-width: 920px) { .svc-card { grid-template-columns: 1fr !important; } .svc-card > div:last-child { min-height: 160px; } }
      `}</style>
    </Link>
  );
}

// ---------- Service card visuals ----------
function ServiceVizHosting() {
  return (
    <div style={{ height: '100%', padding: 14, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8, fontSize: 10, color: 'var(--fg-3)' }}>
          <span className="live-dot" style={{ width: 5, height: 5, background: 'var(--cash)', color: 'var(--cash)', borderRadius: '50%' }}/>
          srv-1a2b3c · CPU 38%
        </div>
        <Sparkline data={DATA.demoServer.cpuHistory} color="var(--service-hosting)" width={180} height={50} fill/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
        <div style={{ padding: '6px 8px', background: 'var(--surface-3)', borderRadius: 4 }}>
          <div style={{ fontSize: 9, color: 'var(--fg-3)' }}>RAM</div>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-1)' }}>5,2 / 8 Go</div>
        </div>
        <div style={{ padding: '6px 8px', background: 'var(--surface-3)', borderRadius: 4 }}>
          <div style={{ fontSize: 9, color: 'var(--fg-3)' }}>Joueurs</div>
          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-1)' }}>47 / 80</div>
        </div>
      </div>
    </div>
  );
}

function ServiceVizOrders() {
  return (
    <div style={{ height: '100%', padding: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
      {[
        { s: 'Devis envoyé', done: true },
        { s: 'Acompte versé', done: true },
        { s: 'En développement', done: true, current: true },
        { s: 'En relecture', done: false },
        { s: 'Livré · solde', done: false },
      ].map((s, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 14, height: 14, borderRadius: '50%', background: s.done ? 'var(--service-orders)' : 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            {s.done && <Icon name="check" size={8} color="var(--fg-inv)"/>}
          </div>
          <span style={{ fontSize: 10, color: s.current ? 'var(--service-orders)' : 'var(--fg-2)', fontWeight: s.current ? 500 : 400 }}>{s.s}</span>
        </div>
      ))}
    </div>
  );
}

function ServiceVizFormations() {
  return (
    <div style={{ height: '100%', padding: 14, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 10, color: 'var(--fg-3)' }}>
        <Icon name="graduation" size={11}/>Chapitre 04 · Module 04.03
      </div>
      <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--fg-1)', lineHeight: 1.4 }}>SWEP de base : structure et hooks essentiels</div>
      <div style={{ height: 3, background: 'var(--surface-3)', borderRadius: 2, overflow: 'hidden' }}>
        <div style={{ width: '42%', height: '100%', background: 'var(--service-formations)' }}/>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'var(--fg-3)', fontVariantNumeric: 'tabular-nums' }}>
        <span>07:23 / 18:42</span>
        <span style={{ color: 'var(--service-formations)' }}>42 % · 36 / 87</span>
      </div>
    </div>
  );
}

function ServiceVizAddons() {
  const tiles = [
    { c: '#67E8F9', paid: false }, { c: '#FB7185', paid: false }, { c: '#FBBF24', paid: true },
    { c: '#C4B5FD', paid: false }, { c: '#6EE7A7', paid: false }, { c: '#8FA8FF', paid: true },
  ];
  return (
    <div style={{ height: '100%', padding: 14, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
      {tiles.map((t, i) => (
        <div key={i} style={{ aspectRatio: '1', borderRadius: 6, background: `color-mix(in srgb, ${t.c} 14%, var(--surface-3))`, position: 'relative', overflow: 'hidden' }}>
          <Icon name="package" size={14} color={t.c} style={{ position: 'absolute', top: 8, left: 8 }}/>
          {t.paid && <span style={{ position: 'absolute', bottom: 3, right: 4, fontSize: 7, fontWeight: 600, color: t.c }}>€</span>}
        </div>
      ))}
    </div>
  );
}

// ============================================================
// PRODUCT SHOWCASE - bigger dashboard preview
// ============================================================
function ProductShowcase() {
  const cms = useCMS();
  const sh = cms.showcaseEnabled || {};
  const allTabs = [
    { k: 'hosting', label: 'Hébergement', icon: 'server' },
    { k: 'orders', label: 'Commandes', icon: 'briefcase' },
    { k: 'formations', label: 'Formations', icon: 'graduation' },
    { k: 'billing', label: 'Facturation', icon: 'euro' },
  ].filter(t => sh[t.k] !== false);
  const [tab, setTab] = React.useState(allTabs[0] ? allTabs[0].k : 'hosting');
  React.useEffect(() => { if (allTabs.length && !allTabs.find(t => t.k === tab)) setTab(allTabs[0].k); }, [allTabs.map(t=>t.k).join()]);
  if (!allTabs.length) return null;
  return (
    <section style={{ background: 'var(--surface-1)', borderTop: '1px solid var(--border-1)', borderBottom: '1px solid var(--border-1)' }}>
      <div className="wcontainer" style={{ padding: '96px 0' }}>
        <div style={{ marginBottom: 40, maxWidth: 680 }}>
          <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 500, marginBottom: 16, letterSpacing: '0.02em' }}>Un seul dashboard</div>
          <h2 className="h-display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0, marginBottom: 18, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
            Tout ce que vous achetez chez Wasied,<br/>au même endroit.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>
            Servers, commandes, formations, factures. Une seule interface, un seul login Discord, une seule facturation centralisée avec les factures PDF.
          </p>
        </div>

        <div style={{ display: 'flex', gap: 8, marginBottom: 24, borderBottom: '1px solid var(--border-1)', flexWrap: 'wrap' }}>
          {allTabs.map(t => (
            <button key={t.k} onClick={() => setTab(t.k)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '12px 14px', background: 'transparent', border: 'none', cursor: 'pointer',
              color: tab === t.k ? 'var(--fg-1)' : 'var(--fg-3)', fontWeight: 500, fontSize: 13,
              borderBottom: `2px solid ${tab === t.k ? 'var(--accent)' : 'transparent'}`, marginBottom: -1,
            }}>
              <Icon name={t.icon} size={14}/>{t.label}
            </button>
          ))}
        </div>

        {tab === 'hosting' && <ShowcaseHosting/>}
        {tab === 'orders' && <ShowcaseOrders/>}
        {tab === 'formations' && <ShowcaseFormations/>}
        {tab === 'billing' && <ShowcaseBilling/>}
      </div>
    </section>
  );
}

function MockWindow({ title, badge, children }) {
  return (
    <div style={{ background: 'var(--surface-0)', border: '1px solid var(--border-2)', borderRadius: 12, overflow: 'hidden', boxShadow: '0 24px 60px rgba(0,0,0,0.35)' }}>
      <div style={{ height: 36, background: 'var(--surface-1)', borderBottom: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', padding: '0 14px', gap: 8 }}>
        <div style={{ display: 'flex', gap: 5 }}>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#27282E' }}/>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#27282E' }}/>
          <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#27282E' }}/>
        </div>
        <span style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', textAlign: 'center' }}>{title}</span>
        {badge}
      </div>
      <div>{children}</div>
    </div>
  );
}

function ShowcaseHosting() {
  return (
    <MockWindow title="wasied.com/app/hosting/srv-1a2b3c" badge={<Badge tone="cash" dot="live" size="sm">en ligne</Badge>}>
      <div style={{ padding: 22, borderBottom: '1px solid var(--border-1)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
          {[
            { l: 'CPU', v: '38 %', c: 'var(--service-hosting)' },
            { l: 'RAM', v: '5,2 / 8 Go', c: 'var(--accent)' },
            { l: 'Disque', v: '22 / 50 Go', c: 'var(--vip)' },
            { l: 'Joueurs', v: '47 / 80', c: 'var(--cash)' },
            { l: 'Réseau', v: '1,2 Mo/s', c: 'var(--xp)' },
          ].map((m, i) => (
            <div key={i} style={{ padding: 12, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 8 }}>
              <div style={{ fontSize: 10, color: 'var(--fg-3)', marginBottom: 4, fontWeight: 500 }}>{m.l}</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>{m.v}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 0, minHeight: 200 }}>
        <div style={{ padding: 18, borderRight: '1px solid var(--border-1)' }}>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 8 }}>CPU · 30 dernières minutes</div>
          <Sparkline data={DATA.demoServer.cpuHistory} color="var(--service-hosting)" width={520} height={120} fill/>
        </div>
        <div style={{ padding: 18, background: '#06090F', fontFamily: 'var(--font-mono)', fontSize: 10, lineHeight: 1.7, color: 'var(--fg-2)' }}>
          {DATA.demoServer.consoleLines.slice(-7).map((l, i) => (
            <div key={i}>
              <span style={{ color: 'var(--fg-4)' }}>{l.t}</span>{' '}
              <span style={{ color: l.tag === 'OK' ? 'var(--cash)' : l.tag === 'WARN' ? 'var(--xp)' : 'var(--accent)', fontWeight: 600 }}>{l.tag}</span>{' '}
              {l.text.length > 50 ? l.text.substring(0, 50) + '…' : l.text}
            </div>
          ))}
        </div>
      </div>
    </MockWindow>
  );
}

function ShowcaseOrders() {
  return (
    <MockWindow title="wasied.com/app/orders/0418">
      <div style={{ padding: 28 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>#0418</span>
          <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-1)' }}>Addon braquage banque v2</span>
          <Badge tone="orders" dot>En relecture</Badge>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { from: 'wasied', text: "J'ai posté une version test côté staging. Vous pouvez tester via le serveur dev. J'ai ajouté la mécanique de mini-jeu sur les coffres, deux variantes possibles." },
              { from: 'client', text: "Top, retours après test : timing du mini-jeu trop court, il manque l'animation d'ouverture, le son d'alerte police trop discret." },
              { from: 'wasied', text: "OK, je note. (1) 8 sec au lieu de 5. (2) j'ai une animation valveBiped sous la main, je l'intègre. (3) je remonte le volume +6dB." },
            ].map((m, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: m.from === 'wasied' ? 'row' : 'row-reverse', gap: 10 }}>
                <Avatar name={m.from === 'wasied' ? 'Wasied' : 'Client'} size={24} tone={m.from === 'wasied' ? 'amber' : 'cyan'}/>
                <div style={{ maxWidth: '85%', padding: '8px 12px', background: m.from === 'wasied' ? 'var(--surface-2)' : 'var(--accent-soft)', border: m.from === 'wasied' ? '1px solid var(--border-1)' : '1px solid rgba(143,168,255,0.2)', borderRadius: 10, fontSize: 12, color: 'var(--fg-1)', lineHeight: 1.5 }}>{m.text}</div>
              </div>
            ))}
          </div>
          <div>
            <div style={{ padding: 16, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 10 }}>
              <div style={{ fontSize: 10, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 12 }}>WORKFLOW</div>
              {[
                { s: 'Devis envoyé', done: true },
                { s: 'Acompte versé', done: true },
                { s: 'En développement', done: true },
                { s: 'En relecture', done: true, current: true },
                { s: 'Livré · solde', done: false },
              ].map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0' }}>
                  <div style={{ width: 16, height: 16, borderRadius: '50%', background: s.done ? 'var(--service-orders)' : 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    {s.done && <Icon name="check" size={9} color="var(--fg-inv)"/>}
                  </div>
                  <span style={{ fontSize: 11, color: s.current ? 'var(--service-orders)' : 'var(--fg-2)', fontWeight: s.current ? 500 : 400 }}>{s.s}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </MockWindow>
  );
}

function ShowcaseFormations() {
  return (
    <MockWindow title="wasied.com/app/formations/glua-mastery">
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', minHeight: 320 }}>
        <div style={{ padding: 0 }}>
          <div style={{ aspectRatio: '16/9', background: 'linear-gradient(135deg, #0F1115 0%, #232936 100%)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', borderBottom: '1px solid var(--border-1)' }}>
            <div style={{ padding: 24, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 8, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.7, color: 'var(--fg-2)', width: '70%' }}>
              <div style={{ color: 'var(--fg-3)', fontSize: 10, marginBottom: 8 }}>-- swep_base.lua</div>
              <div><span style={{ color: 'var(--accent)' }}>SWEP</span>.PrintName <span style={{ color: 'var(--fg-3)' }}>=</span> <span style={{ color: 'var(--cash)' }}>"Lance-grappin"</span></div>
              <div><span style={{ color: 'var(--service-formations)' }}>function</span> <span style={{ color: 'var(--accent)' }}>SWEP</span>:<span style={{ color: 'var(--cash)' }}>PrimaryAttack</span>()</div>
              <div>{'  '}<span style={{ color: 'var(--service-formations)' }}>if</span> <span style={{ color: 'var(--accent)' }}>SERVER</span> <span style={{ color: 'var(--service-formations)' }}>then</span></div>
              <div>{'    '}<span style={{ color: 'var(--accent)' }}>self</span>.Owner:FireBullets({'{...}'})</div>
              <div>{'  '}<span style={{ color: 'var(--service-formations)' }}>end</span></div>
              <div><span style={{ color: 'var(--service-formations)' }}>end</span></div>
            </div>
            <div style={{ position: 'absolute', bottom: 12, left: 16, right: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#fff' }}>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: 16 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--service-formations)', fontWeight: 600, marginBottom: 4 }}>CHAPITRE 04 · MODULE 04.03</div>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)' }}>SWEP de base : structure et hooks essentiels</div>
          </div>
        </div>
        <div style={{ background: 'var(--surface-1)', borderLeft: '1px solid var(--border-1)', padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--fg-3)', fontWeight: 500, padding: '6px 8px', marginBottom: 4 }}>PROGRESSION · 42 %</div>
          {DATA.formations.sampleCourse.modules.slice(0, 6).map(m => (
            <div key={m.num} style={{ display: 'flex', gap: 8, padding: '6px 8px', borderRadius: 5, background: m.current ? 'var(--accent-soft)' : 'transparent', marginBottom: 1 }}>
              <div style={{ width: 18, height: 18, borderRadius: 4, background: m.done ? 'var(--cash)' : m.current ? 'var(--accent)' : 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: m.done || m.current ? 'var(--fg-inv)' : 'var(--fg-3)', fontSize: 9, fontWeight: 600, flexShrink: 0 }}>
                {m.done ? <Icon name="check" size={9}/> : m.num.slice(-1)}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--fg-3)' }}>{m.num}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.title}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </MockWindow>
  );
}

function ShowcaseBilling() {
  return (
    <MockWindow title="wasied.com/app/billing">
      <div style={{ padding: 24 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 24 }}>
          {[
            { l: 'Total dépensé · 2026', v: '394 €', sub: '5 transactions' },
            { l: 'Récurrent mensuel', v: '34,99 €', sub: 'Hosting Community Pro' },
            { l: 'Prochaine facture', v: '34,99 €', sub: '12 juin 2026' },
          ].map((k, i) => (
            <div key={i} style={{ padding: 16, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 8 }}>
              <div style={{ fontSize: 10, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 8 }}>{k.l}</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.025em', fontVariantNumeric: 'tabular-nums', marginBottom: 4 }}>{k.v}</div>
              <div style={{ fontSize: 10, color: 'var(--fg-3)' }}>{k.sub}</div>
            </div>
          ))}
        </div>
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 10, padding: 16, marginBottom: 16 }}>
          <div style={{ fontSize: 10, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 10 }}>MODE DE PAIEMENT</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 10, background: 'var(--surface-2)', borderRadius: 6 }}>
            <div style={{ width: 32, height: 22, background: 'var(--surface-3)', borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-3)' }}><Icon name="credit" size={11}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg-1)' }}>Visa •••• 4242</div>
              <div style={{ fontSize: 10, color: 'var(--fg-3)' }}>par défaut · expire 12/28</div>
            </div>
            <Badge tone="cash" size="sm">Par défaut</Badge>
          </div>
        </div>
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 10, overflow: 'hidden' }}>
          <div style={{ fontSize: 10, color: 'var(--fg-3)', fontWeight: 500, padding: '12px 16px 8px' }}>FACTURES RÉCENTES</div>
          {DATA.client.invoices.slice(0, 4).map(i => (
            <div key={i.id} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 80px 80px', gap: 14, alignItems: 'center', padding: '8px 16px', borderTop: '1px solid var(--border-1)' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)' }}>{i.id}</span>
              <span style={{ fontSize: 11, color: 'var(--fg-1)' }}>{i.service}</span>
              <span style={{ fontSize: 11, color: 'var(--fg-1)', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{i.amount} €</span>
              <Badge tone="cash" size="sm">Payée</Badge>
            </div>
          ))}
        </div>
      </div>
    </MockWindow>
  );
}

// ============================================================
// SOCIAL PROOF - REVIEWS GRID
// ============================================================
function ReviewsGrid() {
  const all = [
    ...DATA.reviews.formations.slice(0, 4).map(r => ({ ...r, source: 'Formation' })),
    ...DATA.reviews.orders.slice(0, 4).map(r => ({ ...r, source: 'Commande', tone: 'indigo', role: r.date })),
  ];
  const tones = ['indigo', 'cyan', 'purple', 'green', 'amber', 'red', 'slate'];
  return (
    <section>
      <div className="wcontainer" style={{ padding: '96px 0' }}>
        <div style={{ marginBottom: 40, maxWidth: 680 }}>
          <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 500, marginBottom: 16, letterSpacing: '0.02em' }}>Avis publics</div>
          <h2 className="h-display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0, marginBottom: 18, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
            4,9 / 5 sur 27 avis publics.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>
            Tous les avis sont vérifiés et publiés tels quels, en sortie de formation ou en livraison de commande. Voici un échantillon récent.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="rv-grid">
          {all.map((r, i) => (
            <div key={i} style={{ padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
              <div style={{ display: 'flex', gap: 1, marginBottom: 12 }}>
                {[...Array(5)].map((_, j) => <Icon key={j} name="star" size={12} color="var(--xp)" style={{ fill: 'var(--xp)' }}/>)}
              </div>
              <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 16 }}>
                "{r.text.length > 180 ? r.text.substring(0, 180) + '…' : r.text}"
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Avatar name={r.name} size={28} tone={r.tone || tones[i % tones.length]}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg-1)' }}>{r.name}</div>
                  <div style={{ fontSize: 10, color: 'var(--fg-3)' }}>{r.role} · {r.source}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

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

// ============================================================
// FINAL CTA
// ============================================================
function CtaSection() {
  return (
    <section style={{ borderTop: '1px solid var(--border-1)', background: 'var(--surface-1)' }}>
      <div className="wcontainer" style={{ padding: '96px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center' }} className="cta-grid">
          <div>
            <h2 className="h-display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0, marginBottom: 18, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
              On commence par <span style={{ color: 'var(--accent)' }}>une conversation</span>.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0, marginBottom: 24, maxWidth: '52ch' }}>
              Hébergement, devis, formation, support - choisissez le point d'entrée qui vous correspond. Réponse sous 48 heures, du lundi au vendredi.
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" href="#/hosting">Voir l'hébergement</Button>
              <Button variant="ghost" size="lg" href="#/quote" icon="briefcase">Demander un devis</Button>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <ContactRow icon="mail" label="Email" value="contact@wasied.com" href="mailto:contact@wasied.com"/>
            <ContactRow icon="discord" label="Discord" value="@wasied" href="https://discord.gg/wasied"/>
            <ContactRow icon="ticket" label="Support" value="Espace ticket" href="#/login"/>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) { .cta-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

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

// ============================================================
// PAGE HOME
// ============================================================
function HomePage({ hireStatus }) {
  return (
    <MarketingShell hireStatus={hireStatus}>
      <ProductHero hireStatus={hireStatus}/>
      <ClientMarquee/>
      <ServicesCards/>
      <ProductShowcase/>
      <ReviewsGrid/>
      <CtaSection/>
    </MarketingShell>
  );
}

Object.assign(window, {
  HomePage, HireMePill, CtaSection,
  ReviewCard: ({ review }) => (
    <div style={{ padding: 20, background: 'var(--surface-1)', border: '1px solid var(--border-1)', borderRadius: 12 }}>
      <div style={{ display: 'flex', gap: 1, marginBottom: 10 }}>
        {[...Array(5)].map((_, i) => <Icon key={i} name="star" size={12} color="var(--xp)" style={{ fill: 'var(--xp)' }}/>)}
      </div>
      <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0, marginBottom: 14 }}>"{review.text}"</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Avatar name={review.name} size={28} tone={review.tone || 'indigo'}/>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg-1)' }}>{review.name}</div>
          <div style={{ fontSize: 10, color: 'var(--fg-3)' }}>{review.role} · {review.source}</div>
        </div>
      </div>
    </div>
  ),
});