/* global React */
const { useState, useEffect, useRef, useMemo } = React;

/* ============================================================
   ECLAIR LOGO
   ============================================================ */
function EclairLogo({ size = 28 }) {
  return (
    <div className="nav-logo">
      <span className="nav-logo-mark" style={{ width: size, height: size }}>
        <svg viewBox="0 0 32 32" fill="none">
          <path d="M4 22 L16 6 L28 22 M10 22 L16 14 L22 22"
            stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" />
          <line x1="6" y1="26" x2="26" y2="26" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        </svg>
      </span>
      <span>Eclair<span style={{ opacity: 0.45, fontWeight: 400 }}>.aero</span></span>
    </div>
  );
}

/* ============================================================
   NAVIGATION
   ============================================================ */
function Nav({ active = 'home', onNav, theme, onThemeToggle }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'services', label: 'Services' },
    { id: 'fleet', label: 'Fleet' },
    { id: 'empty-legs', label: 'Empty Legs' },
    { id: 'about', label: 'About' },
    { id: 'contact', label: 'Contact' },
  ];

  return (
    <nav className="nav" style={{
      padding: scrolled ? '12px 32px' : '20px 32px',
    }}>
      <a href="index.html" onClick={(e) => { if (onNav) { e.preventDefault(); onNav('home'); } }}>
        <EclairLogo />
      </a>
      <div className="nav-center">
        {links.map(l => (
          <a key={l.id} href={`#${l.id}`}
            className={`nav-link ${active === l.id ? 'active' : ''}`}>
            {l.label}
          </a>
        ))}
      </div>
      <div className="nav-right">
        <div className="nav-status" title="Operations active 24/7">
          <span className="nav-status-dot"></span>
          <span>OPS · 24/7</span>
        </div>
        <button onClick={onThemeToggle} className="theme-toggle" aria-label="Toggle theme"
          style={{
            width: 32, height: 32, display: 'grid', placeItems: 'center',
            border: '1px solid var(--line-strong)', borderRadius: 2,
          }}>
          {theme === 'dark' ? (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <circle cx="12" cy="12" r="4"/>
              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
            </svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
            </svg>
          )}
        </button>
        <a href="#book" className="btn btn-primary">
          Request a quote
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/>
          </svg>
        </a>
      </div>
    </nav>
  );
}

/* ============================================================
   PLACEHOLDER IMAGE
   ============================================================ */
function Placeholder({ label, style, className = '', children }) {
  return (
    <div className={`placeholder-img ${className}`} data-label={label} style={style}>
      {children}
    </div>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      background: 'var(--bg-inset)',
      padding: '80px 0 32px',
      marginTop: 0,
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 48,
          marginBottom: 64,
        }}>
          <div>
            <EclairLogo />
            <p style={{ marginTop: 24, maxWidth: 320, color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.6 }}>
              Hand-picked aviation professionals and a state-of-the-art fleet — the difference you feel in the sky.
            </p>
            <div style={{ display: 'flex', gap: 24, marginTop: 32 }}>
              <span className="eyebrow">EBAA Member</span>
              <span className="eyebrow">ACA Stage 2</span>
              <span className="eyebrow">IS-BAO Reg.</span>
            </div>
          </div>
          {[
            { title: 'Services', items: ['Aircraft Charter', 'VIP Lounge Prague', 'Aircraft Management', 'Flight Planning', 'Aircraft Sales', 'Cargo'] },
            { title: 'Fleet', items: ['Global 6000', 'Challenger 605', 'Gulfstream G280', 'Gulfstream G200', 'Learjet 75'] },
            { title: 'Company', items: ['About', 'Sustainability', 'History', 'Certificates', 'Career', 'News'] },
          ].map(col => (
            <div key={col.title}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{col.title}</div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(i => (
                  <li key={i}>
                    <a href="#" style={{ fontSize: 14, color: 'var(--text-muted)' }}
                      onMouseOver={e => e.currentTarget.style.color = 'var(--text)'}
                      onMouseOut={e => e.currentTarget.style.color = 'var(--text-muted)'}>{i}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 32, borderTop: '1px solid var(--line)',
          fontSize: 12, color: 'var(--text-subtle)',
        }}>
          <div className="mono">© 2026 ECLAIR AVIATION s.r.o. · DĚDINSKÁ 29, PRAGUE 6</div>
          <div className="mono">+420 778 403 535 · INFO@ECLAIR.AERO</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { EclairLogo, Nav, Placeholder, Footer });