// ============================================================
// WASIED · Agents IA - coming soon (proves the service registry pattern)
// ============================================================

function AgentsLanding() {
  return (
    <MarketingShell hireStatus={window.__hireStatus} serviceId="agents">
      <Section eyebrow="Wasied Agents · bientôt" title={<>Des agents IA pour vos serveurs GMod.</>}
        sub="NPCs intelligents, modération assistée, support joueurs automatisé. Un nouveau pilier en cours de design, branché sur la même auth, la même facturation, le même dashboard.">

        <div style={{ display: 'flex', gap: 10, marginBottom: 56 }}>
          <Button variant="primary" size="lg">Rejoindre la bêta privée</Button>
          <Button variant="ghost" size="lg" icon="mail" href="mailto:contact@wasied.com">Demander une démo</Button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="trust-grid">
          {[
            { icon: 'chat',    title: 'NPCs conversationnels', text: "Des PNJ qui tiennent vraiment une conversation, avec mémoire, personnalité et règles RP propres à votre serveur." },
            { icon: 'shield',  title: 'Modération assistée',   text: "Détection des comportements toxiques en temps réel, génération de tickets staff structurés, escalation intelligente." },
            { icon: 'helpCircle', title: "Support joueurs auto", text: "Bot in-game qui répond aux questions fréquentes des joueurs, en s'appuyant sur votre wiki et vos règles RP." },
          ].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(167,139,250,0.10)', color: '#A78BFA', 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>

        <div id="beta" style={{ marginTop: 64, padding: 40, background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 14, textAlign: 'center' }}>
          <Badge tone="subtle" icon="spark">Bêta privée · sur invitation</Badge>
          <h3 className="h-display" style={{ fontSize: 28, margin: '14px 0 8px' }}>Les premières places sont pour les communautés existantes.</h3>
          <p style={{ fontSize: 14, color: 'var(--fg-2)', maxWidth: 520, margin: '0 auto 20px', lineHeight: 1.6 }}>
            Si vous êtes déjà client Hébergement, Commandes ou Formations, vous serez prioritaires sur les invitations de la bêta privée. Sortie publique prévue T3 2026.
          </p>
          <Button variant="primary" size="lg" href="mailto:contact@wasied.com?subject=Bêta%20Agents%20IA">Postuler à la bêta</Button>
        </div>
      </Section>
    </MarketingShell>
  );
}

function AppAgentsRoot() {
  return (
    <AppShell title="Agents IA" breadcrumbs={[{ label: 'Agents IA' }]}>
      <Panel style={{ padding: 48, textAlign: 'center', maxWidth: 640, margin: '24px auto' }}>
        <div style={{ width: 60, height: 60, margin: '0 auto 18px', borderRadius: 15, background: 'rgba(167,139,250,0.10)', color: '#A78BFA', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="spark" size={28}/>
        </div>
        <Badge tone="subtle">Bêta privée à venir</Badge>
        <h2 className="h-display" style={{ fontSize: 26, margin: '14px 0 10px' }}>Wasied Agents arrive bientôt.</h2>
        <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.65, margin: 0, marginBottom: 24 }}>
          Vous serez notifié dès que votre workspace Agents IA sera activé. En attendant, vous pouvez postuler à la bêta privée - les communautés existantes Wasied sont prioritaires.
        </p>
        <Button variant="primary" href="#/agents#beta">Postuler à la bêta</Button>
      </Panel>
    </AppShell>
  );
}

Object.assign(window, { AgentsLanding, AppAgentsRoot });