function Nav({ accent }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-brand">
          <KometeLogo height={26} starColor={accent.accent} wordmarkColor="#19135A" />
        </a>
        <div className="nav-links">
          <a href="#themes">Données</a>
          <a href="#products">Produits</a>
          <a href="#komete-ai">KoMètA · IA</a>
          <a href="#clients">Références</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-cta">
          <a href="#contact" className="btn btn-primary btn-sm"
            style={{ background: accent.accent, borderColor: accent.accent }}>
            Demander un accès
          </a>
        </div>
      </div>
    </nav>
  );
}

function TrustBand({ accent }) {
  const items = [
    'Plateforme SaaS sécurisée',
    'Conforme RGPD · DPO dédié',
    'Infra IA souveraine · MistralAI',
    'Données publiques + privées',
    'Hébergement Google Cloud (UE)',
  ];

  return (
    <div className="trust-band">
      <div className="trust-scroll">
        {[...items, ...items].map((t, i) =>
          <span key={i} className="trust-item">
            <KometeStar size={10} color={accent.accent} /> {t}
          </span>
        )}
      </div>
    </div>
  );
}

function Method({ accent }) {
  const steps = [
    { n: '01', t: 'Cadrage', d: 'Un ou deux groupes de travail pour formaliser intention de navigation, fonctionnalités et indicateurs cibles.' },
    { n: '02', t: 'Développement', d: 'Backlog produit, cycles agiles, présentations régulières. Structuration des bases et notes méthodologiques.' },
    { n: '03', t: 'Mise en service', d: 'Formation utilisateurs, garantie 3 mois, maintenance corrective et évolutive, support < 1 jour.' },
  ];

  return (
    <section className="section method-section">
      <div className="container">
        <SectionHead
          kicker="Méthodologie"
          title={<>Trois étapes, un <em>copilotage continu.</em></>}
        />
        <div className="method-grid">
          {steps.map((s) =>
            <div key={s.n} className="method-card">
              <div className="method-n" style={{ color: accent.accent, borderColor: accent.accent }}>{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer({ accent }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <KometeLogo height={28} starColor={accent.accent} wordmarkColor="#F6F3EC" />
          <p className="footer-tag">La donnée emploi-formation, transformée en décisions.</p>
          <div className="footer-kyu">
            <span>Édité par</span>
            <a href="https://www.kyu.fr" target="_blank" rel="noopener" aria-label="KYU — cabinet de conseil">
              <img src="assets/logo-kyu-white.png" alt="KYU"
                style={{ height: 28, objectFit: 'contain', verticalAlign: 'middle', marginLeft: 4 }} />
            </a>
          </div>
        </div>
        <div className="footer-cols">
          <div>
            <div className="fcol-t">Solution</div>
            <a href="#themes">Données</a>
            <a href="#products">Produits</a>
            <a href="#komete-ai">KoMètA</a>
            <a href="#contact">Méthodologie</a>
          </div>
          <div>
            <div className="fcol-t">KYU</div>
            <a href="https://www.kyu.fr" target="_blank" rel="noopener">Cabinet de conseil</a>
            <a href="https://www.kyu.fr/etudes-prospectives/" target="_blank" rel="noopener">Études</a>
            <a href="https://www.kyu.fr/nos-insights/" target="_blank" rel="noopener">Insights</a>
            <a href="https://www.kyu.fr/offres-emploi-stage/" target="_blank" rel="noopener">Nous rejoindre</a>
          </div>
          <div>
            <div className="fcol-t">Contact</div>
            <a href="mailto:contact@kyu.fr">contact@kyu.fr</a>
            <a href="tel:+33628413237">+33 6 28 41 32 37</a>
            <a>136 bd Haussmann, Paris 8e</a>
          </div>
        </div>
      </div>
      <div className="footer-btm">
        <span>© 2026 Komète by KYU Lab</span>
        <span>Mentions légales · RGPD · Politique de cookies</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, TrustBand, Method, Footer });