// ============================================================
// WASIED · Marketing shell - TopBar with Hire Me + Footer
// ============================================================

function HireMePill({ status = 'available', compact }) {
  const config = {
    available: { color: 'var(--cash)', label: 'Disponible', full: 'Disponible pour de nouveaux projets', sub: 'réponse sous 48 h' },
    limited:   { color: 'var(--xp)',   label: 'Capacité limitée', full: 'Capacité limitée', sub: 'devis à partir de juin' },
    busy:      { color: 'var(--hp)',   label: 'Complet', full: 'Pas de nouvelles commandes', sub: 'reprise en juillet' },
  };
  const c = config[status];
  if (compact) {
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12, fontWeight: 500, color: 'var(--fg-2)' }}>
        <span style={{ width: 7, height: 7, background: c.color, borderRadius: '50%', boxShadow: `0 0 0 3px color-mix(in srgb, ${c.color} 18%, transparent)` }}/>
        {c.label}
      </span>
    );
  }
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--fg-1)' }}>
      <span style={{ width: 8, height: 8, background: c.color, borderRadius: '50%', boxShadow: `0 0 0 3px color-mix(in srgb, ${c.color} 18%, transparent)`, flexShrink: 0 }}/>
      <span style={{ fontWeight: 500 }}>{c.full}</span>
      <span style={{ color: 'var(--fg-3)', fontWeight: 400 }}>- {c.sub}</span>
    </span>
  );
}

function NavLink({ to, children, mega }) {
  const { path } = useRouter();
  const active = path === to || (to !== '/' && path.startsWith(to));
  const [hover, setHover] = React.useState(false);
  return (
    <Link to={to}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 5,
        padding: '6px 10px', borderRadius: 7,
        fontSize: 13, fontWeight: 500,
        color: active ? 'var(--fg-1)' : 'var(--fg-2)',
        background: hover || active ? 'var(--surface-2)' : 'transparent',
        transition: 'all 140ms var(--ease-out)',
        position: 'relative',
      }}>
      {children}
      {mega && <Icon name="chevronDown" size={12} color="var(--fg-3)" style={{ opacity: 0.7 }}/>}
    </Link>
  );
}

function MarketingTopBar({ hireStatus = 'available' }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [megaOpen, setMegaOpen] = React.useState(null);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const services = listServices().filter(s => s.status !== 'soon').map(s => ({
    key: s.id, label: s.name, sub: s.tagline, path: s.marketing.path, color: s.color, icon: s.icon, status: s.status,
  }));
  const ressources = [
    { label: 'Statut', sub: 'Uptime temps réel', path: '/status', icon: 'pulse' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'var(--surface-0)' : 'transparent',
      borderBottom: scrolled ? '1px solid var(--border-1)' : '1px solid transparent',
      transition: 'background 200ms ease, border-color 200ms ease',
    }}>
      <div className="wcontainer" style={{ display: 'flex', alignItems: 'center', gap: 24, height: 64 }}>
        <Link to="/" style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
          <WLogo size={22} withWord={true} opacity={1}/>
        </Link>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }} className="mkt-nav">
          <div onMouseEnter={() => setMegaOpen('services')} onMouseLeave={() => setMegaOpen(null)} style={{ position: 'relative' }}>
            <NavLink to="/hosting" mega>Services</NavLink>
            {megaOpen === 'services' && (
              <div style={{ position: 'absolute', top: '100%', left: 0, paddingTop: 6, minWidth: 480 }}>
                <div style={{
                  background: 'var(--surface-1)', border: '1px solid var(--border-2)', borderRadius: 12,
                  padding: 8, boxShadow: 'var(--shadow-lg)',
                }}>
                {services.map(s => (
                  <Link key={s.key} to={s.path} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: 12, borderRadius: 8, transition: 'background 120ms ease' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: s.color, flexShrink: 0 }}>
                      <Icon name={s.icon} size={16}/>
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>{s.label}</span>
                        {s.status === 'soon' && <Badge tone="subtle" size="sm">Bientôt</Badge>}
                        {s.status === 'beta' && <Badge tone="xp" size="sm">Bêta</Badge>}
                      </div>
                      <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>{s.sub}</div>
                    </div>
                  </Link>
                ))}
                </div>
              </div>
            )}
          </div>

          <NavLink to="/pricing">Tarifs</NavLink>
          <NavLink to="/portfolio">Portfolio</NavLink>
          <NavLink to="/about">À propos</NavLink>
          <NavLink to="/status">Statut</NavLink>
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }} className="mkt-right">
          <Link to="/login" style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-2)', padding: '6px 10px' }}>Connexion</Link>
          <Button variant="primary" size="md" href="#/orders" icon="arrow">Lancer un projet</Button>
        </div>

        <button onClick={() => setMobileOpen(!mobileOpen)} className="mkt-burger" style={{
          display: 'none', background: 'transparent', border: '1px solid var(--border-1)', color: 'var(--fg-1)',
          width: 36, height: 36, borderRadius: 8, alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <Icon name={mobileOpen ? 'close' : 'menu'} size={18}/>
        </button>
      </div>

      {mobileOpen && (
        <div style={{ background: 'var(--surface-1)', borderTop: '1px solid var(--border-1)', padding: 16 }}>
          {[...services, ...ressources, { label: 'Tarifs', path: '/pricing' }, { label: 'À propos', path: '/about' }].map(s => (
            <Link key={s.path} to={s.path} onClick={() => setMobileOpen(false)} style={{ display: 'block', padding: '12px 8px', fontSize: 14, color: 'var(--fg-1)', borderBottom: '1px solid var(--border-1)' }}>
              {s.label}
            </Link>
          ))}
          <div style={{ marginTop: 16, display: 'flex', gap: 8 }}>
            <Button variant="ghost" href="#/login" fullWidth>Connexion</Button>
            <Button variant="primary" href="#/orders" fullWidth>Lancer un projet</Button>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 980px) {
          .mkt-nav { display: none !important; }
          .mkt-right > a:first-of-type, .mkt-right > button { display: none; }
          .mkt-burger { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
}

function MarketingFooter() {
  const services = [
    { label: 'Hosting GMod', path: '/hosting' },
    { label: 'Bots Discord', path: '/hosting#bots' },
    { label: 'Développement custom', path: '/orders' },
    { label: 'Formations GLua', path: '/formations' },
    { label: 'Addons GMod', path: '/addons' },
  ];
  const company = [
    { label: 'À propos', path: '/about' },
    { label: 'Portfolio', path: '/portfolio' },
    { label: 'Contact', path: '/contact' },
    { label: 'Espace presse', path: '/press' },
    { label: 'Recrutement', path: '/about#hire' },
  ];
  const resources = [
    { label: 'Statut · uptime', path: '/status' },
    { label: 'Contact', path: '/contact' },
  ];
  const legal = [
    { label: 'Conditions générales (CGV)', path: '/legal/cgv' },
    { label: "Conditions d'utilisation (CGU)", path: '/legal/cgu' },
    { label: 'Politique RGPD', path: '/legal/rgpd' },
    { label: 'Cookies', path: '/legal/cookies' },
    { label: 'Mentions légales', path: '/legal/mentions' },
  ];
  return (
    <footer style={{ borderTop: '1px solid var(--border-1)', padding: '64px 0 32px', marginTop: 80 }}>
      <div className="wcontainer">
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr 1fr', gap: 48 }} className="ftr-grid">
          <div>
            <WLogo size={26} withWord={true}/>
            <p style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 16, lineHeight: 1.6, maxWidth: 280 }}>
              L'infrastructure des créateurs Garry's Mod. Hosting, dev, formations, addons. Opérée par Maxime depuis la Belgique.
            </p>
            <div style={{ marginTop: 20, display: 'flex', gap: 8 }}>
              <a href="https://discord.gg/wasied" target="_blank" rel="noopener" style={{ width: 36, height: 36, borderRadius: 8, border: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-2)' }}><Icon name="discord" size={16}/></a>
              <a href="https://github.com/wasied" target="_blank" rel="noopener" style={{ width: 36, height: 36, borderRadius: 8, border: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-2)' }}><Icon name="github" size={16}/></a>
              <a href="https://youtube.com/@wasied" target="_blank" rel="noopener" style={{ width: 36, height: 36, borderRadius: 8, border: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-2)' }}><Icon name="youtube" size={16}/></a>
              <a href="mailto:contact@wasied.com" style={{ width: 36, height: 36, borderRadius: 8, border: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-2)' }}><Icon name="mail" size={16}/></a>
            </div>
          </div>

          <FooterCol title="Services" items={services}/>
          <FooterCol title="Société" items={company}/>
          <FooterCol title="Ressources" items={resources}/>
          <FooterCol title="Légal" items={legal}/>
        </div>

        <div style={{ marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>
            © 2026 Wasied · Maxime - Tous droits réservés. TVA non applicable, article 56§2 du Code TVA · indépendant complémentaire belge.
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: 'var(--fg-3)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span className="live-dot" style={{ width: 6, height: 6, background: 'var(--cash)', color: 'var(--cash)', borderRadius: '50%' }}/>
              Tous les systèmes opérationnels
            </span>
            <span>·</span>
            <Link to="/status" style={{ color: 'var(--fg-2)' }}>Voir le statut →</Link>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 560px) {
          .ftr-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg-1)', marginBottom: 16 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
        {items.map(i => (
          <Link key={i.path} to={i.path} style={{ fontSize: 13, color: 'var(--fg-3)', transition: 'color 120ms ease' }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--fg-1)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-3)'}>
            {i.label}
          </Link>
        ))}
      </div>
    </div>
  );
}

function MarketingShell({ children, hireStatus = 'available', serviceId }) {
  const service = serviceId ? SERVICES_REGISTRY[serviceId] : null;
  return (
    <>
      <MarketingTopBar hireStatus={hireStatus}/>
      {service && <ServiceBar service={service}/>}
      <main className="anim-fade">{children}</main>
      <MarketingFooter/>
    </>
  );
}

function ServiceBar({ service }) {
  const [hash, setHash] = React.useState(typeof window !== 'undefined' ? window.location.hash : '');
  React.useEffect(() => {
    const onChange = () => setHash(window.location.hash);
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);
  return (
    <div style={{
      position: 'sticky', top: 64, zIndex: 40,
      background: 'var(--surface-0)',
      borderBottom: '1px solid var(--border-1)',
    }}>
      <div className="wcontainer" style={{ display: 'flex', alignItems: 'center', gap: 18, height: 56, flexWrap: 'wrap' }}>
        <Link to={service.marketing.path} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 24, height: 24, borderRadius: 6, background: `color-mix(in srgb, ${service.color} 14%, var(--surface-1))`, color: service.color, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name={service.icon} size={13}/>
          </span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.01em' }}>{service.brandName}</span>
          {service.status === 'soon' && <Badge tone="subtle" size="sm">Bientôt</Badge>}
          {service.status === 'beta' && <Badge tone="xp" size="sm">Bêta</Badge>}
        </Link>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 2 }} className="svc-subnav">
          {service.marketing.subNav.map((n, i) => {
            const isActive = n.path === window.location.hash.replace('#', '') || hash.endsWith(n.path.split('#')[1] || '_____');
            return (
              <Link key={i} to={n.path} style={{
                padding: '6px 10px', borderRadius: 6,
                fontSize: 12, fontWeight: 500,
                color: isActive ? 'var(--fg-1)' : 'var(--fg-3)',
                transition: 'color 120ms ease',
              }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--fg-1)'}
                onMouseLeave={e => e.currentTarget.style.color = isActive ? 'var(--fg-1)' : 'var(--fg-3)'}>
                {n.label}
              </Link>
            );
          })}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }} className="svc-cta">
          {service.id === 'hosting' && <Button variant="primary" size="sm" href="#/checkout">Choisir un plan</Button>}
          {service.id === 'orders' && <Button variant="primary" size="sm" href="#/quote">Demander un devis</Button>}
          {service.id === 'formations' && <Button variant="primary" size="sm" href="#/formations#tiers">Commencer</Button>}
          {service.id === 'addons' && <Button variant="ghost" size="sm" href="#/addons" icon="search">Explorer</Button>}
          {service.id === 'agents' && <Badge tone="subtle">Sur invitation</Badge>}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .svc-subnav { display: none !important; }
          .svc-cta { display: none !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { MarketingShell, MarketingTopBar, MarketingFooter, HireMePill, ServiceBar });