// Nav — floating glass bar with hamburger on mobile/tablet
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [theme, setTheme] = useState(() => document.documentElement.getAttribute('data-theme') || 'dark');
  const { isTablet, isSmallDesktop } = useResponsive();
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Close menu on resize to desktop
  useEffect(() => {
    if (!isSmallDesktop && menuOpen) setMenuOpen(false);
  }, [isSmallDesktop]);

  const toggleTheme = () => {
    const next = theme === 'light' ? 'dark' : 'light';
    if (next === 'light') document.documentElement.setAttribute('data-theme', 'light');
    else document.documentElement.removeAttribute('data-theme');
    setTheme(next);
  };

  const links = [
    { label: 'Services', href: '#services' },
    { label: 'Cas clients', href: '#cases' },
    { label: 'Méthode', href: '#method' },
    { label: 'Tarifs', href: '#pricing' },
    { label: 'FAQ', href: '#faq' },
  ];

  return (
    <>
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} links={links} />
      <nav style={{
        position: 'fixed',
        top: scrolled ? 16 : 24,
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: 50,
        display: 'flex',
        alignItems: 'center',
        gap: isSmallDesktop ? 12 : 20,
        padding: scrolled ? '10px 14px 10px 22px' : '14px 14px 14px 24px',
        borderRadius: 999,
        background: scrolled ? 'var(--nav-bg)' : 'var(--nav-bg-top)',
        backdropFilter: 'blur(20px) saturate(180%)',
        WebkitBackdropFilter: 'blur(20px) saturate(180%)',
        border: '1px solid var(--line)',
        transition: 'all 0.4s cubic-bezier(0.2,0.8,0.2,1)',
        width: 'min(920px, calc(100vw - 32px))',
        justifyContent: 'space-between',
      }}>
        <Logo size={22} />
        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {links.map(l => (
            <a key={l.href} href={l.href} style={{
              fontSize: 13,
              color: 'var(--text-dim)',
              padding: '8px 12px',
              borderRadius: 999,
              transition: 'color 0.2s',
            }}
            onMouseEnter={e => e.target.style.color = 'var(--text)'}
            onMouseLeave={e => e.target.style.color = 'var(--text-dim)'}
            >{l.label}</a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <button onClick={toggleTheme} aria-label="Basculer le thème" style={{
            width: 36, height: 36,
            borderRadius: '50%',
            border: '1px solid var(--line-strong)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--text-dim)',
            transition: 'all 0.3s',
          }}
          onMouseEnter={e => { e.currentTarget.style.color = 'var(--accent)'; e.currentTarget.style.borderColor = 'var(--accent)'; }}
          onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-dim)'; e.currentTarget.style.borderColor = 'var(--line-strong)'; }}
          >
            {theme === 'light' ? (
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M13 9A5 5 0 0 1 7 3a5 5 0 1 0 6 6Z" fill="currentColor"/></svg>
            ) : (
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3.2" fill="currentColor"/><g stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"><path d="M8 1.5v1.6M8 12.9v1.6M1.5 8h1.6M12.9 8h1.6M3.4 3.4l1.1 1.1M11.5 11.5l1.1 1.1M3.4 12.6l1.1-1.1M11.5 4.5l1.1-1.1"/></g></svg>
            )}
          </button>
          {/* Hamburger — visible only via CSS at ≤1024px */}
          <button
            className={`hamburger-btn ${menuOpen ? 'open' : ''}`}
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Menu"
          >
            <span className="hamburger-line" />
            <span className="hamburger-line" />
            <span className="hamburger-line" />
          </button>
          <a href="https://cal.eu/gaussia" target="_blank" rel="noopener noreferrer"
            className="btn btn-primary nav-cta-text"
            style={{ padding: '10px 18px', fontSize: 13 }}>
            Prendre RDV <Arrow size={12} />
          </a>
        </div>
      </nav>
    </>
  );
}

// Hero — bold editorial layout, fully responsive
function Hero() {
  const { isMobile, isTablet } = useResponsive();
  return (
    <section id="top" style={{
      position: 'relative',
      paddingTop: isMobile ? 120 : isTablet ? 140 : 160,
      paddingBottom: isMobile ? 48 : 80,
      overflow: 'hidden',
    }}>
      {/* Decorative SVG blobs (light-mode flavor) */}
      <svg style={{
        position: 'absolute', top: '6%', right: isTablet ? '-120px' : '-80px',
        width: isTablet ? 280 : 420, height: isTablet ? 280 : 420,
        pointerEvents: 'none', zIndex: 0,
        opacity: 0.95,
      }} viewBox="0 0 200 200" fill="none">
        <path d="M40 100 Q100 30 160 100 Q100 170 40 100 Z" fill="var(--tertiary, var(--accent))" />
      </svg>
      <svg style={{
        position: 'absolute', bottom: '-60px', left: isTablet ? '-140px' : '-100px',
        width: isTablet ? 260 : 380, height: isTablet ? 260 : 380,
        pointerEvents: 'none', zIndex: 0,
        opacity: 0.6,
      }} viewBox="0 0 200 200" fill="none">
        <circle cx="100" cy="100" r="80" fill="var(--secondary, var(--accent))" />
      </svg>

      {/* Grid backdrop */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(var(--line) 1px, transparent 1px),
          linear-gradient(90deg, var(--line) 1px, transparent 1px)
        `,
        backgroundSize: isTablet ? '60px 60px' : '80px 80px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%)',
        opacity: 0.6, pointerEvents: 'none', zIndex: 1,
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 3 }}>
        <div className="reveal" style={{ display: 'flex', justifyContent: 'center', marginBottom: isMobile ? 20 : 32 }}>
          <span className="eyebrow" style={{
            background: 'var(--bg-elev)',
            border: '1px solid var(--line-strong)',
            padding: isMobile ? '6px 12px' : '8px 16px',
            borderRadius: 999,
          }}>IA · Automation · Intégrations</span>
        </div>

        <h1 className="reveal" style={{
          marginBottom: 28,
          maxWidth: 1100,
          margin: `0 auto ${isMobile ? 20 : 28}px`,
          textAlign: 'center',
          position: 'relative',
        }}>
          <span style={{ display: 'inline-block' }}>Du <span className="serif" style={{ color: 'var(--accent)' }}>chaos</span> opérationnel</span><br/>
          à la <span style={{
            background: 'var(--accent)',
            color: 'var(--on-accent)',
            padding: isMobile ? '0 10px' : '0 18px',
            borderRadius: 8,
            display: 'inline-block',
            transform: 'rotate(-1.5deg)',
            boxShadow: '0 8px 24px var(--accent-glow)',
          }}>clarté</span> automatisée.
        </h1>

        <p className="reveal" style={{
          fontSize: isMobile ? 16 : 19,
          maxWidth: 580,
          margin: `0 auto ${isMobile ? 32 : 44}px`,
          color: 'var(--text-dim)', lineHeight: 1.5, textAlign: 'center',
        }}>
          Gaussia conçoit des agents IA et des automatisations sur-mesure pour libérer vos équipes des tâches pénibles. Vous reprenez le pilotage.
        </p>

        <div className="reveal" style={{
          display: 'flex', gap: 12, justifyContent: 'center',
          marginBottom: isMobile ? 48 : 80,
          flexWrap: 'wrap',
        }}>
          <a href="https://cal.eu/gaussia" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
            Auditer mes processus <Arrow />
          </a>
          <a href="#cases" className="btn btn-ghost">Voir les cas clients</a>
        </div>

        {/* Stats — responsive grid */}
        <div className="reveal" style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: 12,
          maxWidth: 1000,
          margin: '0 auto',
        }}>
          {[
            ['+40h', 'récupérées / sem', 'var(--accent)', 'var(--on-accent)'],
            ['—68%', 'erreurs manuelles', 'var(--secondary, #1c1a2e)', '#fff'],
            ['3-6 sem.', 'time-to-deploy', 'var(--tertiary, var(--accent))', '#1c1a2e'],
            ['24/7', 'agents en service', 'var(--bg-elev)', 'var(--text)'],
          ].map(([big, small, bg, fg], i) => (
            <div key={big} style={{
              padding: isMobile ? '20px 14px' : '28px 20px',
              background: bg,
              color: fg,
              borderRadius: 14,
              border: i === 3 ? '1px solid var(--line-strong)' : 'none',
              textAlign: 'center',
              boxShadow: i === 3 ? '0 1px 0 var(--line)' : '0 8px 24px rgba(20,16,14,0.08)',
              transform: isTablet ? 'none' : `rotate(${[-0.8, 0.6, -0.4, 0.8][i]}deg)`,
            }}>
              <div style={{
                fontFamily: 'var(--serif)',
                fontSize: isMobile ? 32 : 44,
                fontStyle: 'italic', lineHeight: 1,
              }}>{big}</div>
              <div style={{
                fontFamily: 'var(--mono)',
                fontSize: isMobile ? 9 : 10,
                opacity: 0.8, textTransform: 'uppercase',
                letterSpacing: '0.12em', marginTop: 8,
              }}>{small}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero });