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

// Curated safe imagery — only sky/clouds/sunset and abstract scenes.
// All other slots use a styled SVG placeholder via getPlaceholder() until
// the client provides real photography from eclair.aero.
const SKY = 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=85&auto=format&fit=crop';
const SUNSET = 'https://images.unsplash.com/photo-1488229297570-58520851e868?w=2000&q=85&auto=format&fit=crop';
const CLOUDS = 'https://images.unsplash.com/photo-1534088568595-a066f410bcda?w=2400&q=85&auto=format&fit=crop';
const PRAGUE = 'https://images.unsplash.com/photo-1519677100203-a0e668c92439?w=1600&q=85&auto=format&fit=crop';

// Inline SVG placeholder factory — branded, monospace label, no external fetch.
function getPlaceholder(label, w = 1600, h = 1000) {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${w} ${h}' preserveAspectRatio='xMidYMid slice'>
    <defs>
      <pattern id='p' patternUnits='userSpaceOnUse' width='12' height='12' patternTransform='rotate(135)'>
        <rect width='12' height='12' fill='%230f1f3a'/>
        <line x1='0' y1='0' x2='0' y2='12' stroke='%231a2d4f' stroke-width='1'/>
      </pattern>
    </defs>
    <rect width='100%' height='100%' fill='url(%23p)'/>
    <rect x='${w/2 - 220}' y='${h/2 - 24}' width='440' height='48' fill='%23f4f1ec' stroke='%23d4cfc4'/>
    <text x='${w/2}' y='${h/2 + 6}' font-family='monospace' font-size='14' letter-spacing='3' text-anchor='middle' fill='%230a1628'>${label}</text>
  </svg>`;
  return 'data:image/svg+xml;utf8,' + svg.replace(/\n\s+/g, ' ');
}

const IMG = {
  hero: SKY,
  heroAlt: CLOUDS,
  clouds: CLOUDS,
  sunset: SUNSET,
  prague: PRAGUE,
  // Service tiles — branded placeholders
  cabin1: 'images/aircraft-management.jpg',
  vipLounge: 'images/aircraft-management.jpg',
  tarmac: 'images/aircraft-management.jpg',
  meeting: 'images/aircraft-management.jpg',
  dispatch: 'images/aircraft-management.jpg',
  hangar: 'images/aircraft-management.jpg',
  cargo: 'images/aircraft-management.jpg',
  // Fleet
  global: 'images/ok-mbs.jpg',
  g280: 'images/ok-mbs.jpg',
  challenger: 'images/ok-mbs.jpg',
  learjet: 'images/ok-mbs.jpg',
  g200: 'images/ok-mbs.jpg',
  cockpit: getPlaceholder('COCKPIT'),
  cabin2: getPlaceholder('CABIN INTERIOR'),
  cabin3: getPlaceholder('CABIN INTERIOR'),
  exterior: getPlaceholder('EXTERIOR'),
};

window.IMG = IMG;

/* ============================================================
   ECLAIR LOGO
   ============================================================ */
function EclairLogo() {
  return (
    <div className="nav-logo">
      <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
        width="132" height="25"
        viewBox="0 0 176 33.3847656"
        style={{ display: 'block' }}>
        <path fill="currentColor" d="M58.2680664,29.4921875c0,0-3.5717773,3.8925781-11.4086914,3.8925781c-10.7163086,0-17.1660156-7.5195313-17.1660156-16.6928711C29.6933594,7.5200195,36.1430664,0,46.859375,0c7.8896484,0,11.4086914,3.8930664,11.4086914,3.8930664l-4.4248047,5.9189453c0,0-3.3051758-2.3989258-6.8769531-2.3989258c-5.4389648,0-9.2773438,3.7329102-9.2773438,9.2788086c0,5.5473633,3.8383789,9.2797852,9.2773438,9.2797852c4.5307617,0,6.8769531-2.3984375,6.8769531-2.3984375L58.2680664,29.4921875z"/>
        <polygon fill="currentColor" points="64.9790039,32.6923828 64.9790039,0.6923828 72.7089844,0.6923828 72.7089844,26.0253906 88.9726563,26.0253906 85.3374023,32.6923828"/>
        <polygon fill="currentColor" points="21.8061523,19.7324219 7.7299805,19.7324219 7.7299805,26.0253906 25.4311523,26.0253906 25.4311523,32.6923828 0,32.6923828 0,0.6928711 25.4311523,0.6928711 25.4311523,7.3588867 7.7299805,7.3588867 7.7299805,13.652832 21.8061523,13.652832"/>
        <path fill="currentColor" d="M153.5,14.9790039V7.3588867h7.0390625c3.5712891,0,5.5976563,1.7070313,5.5976563,4.7998047c0,0.1333008-0.0087891,0.2583008-0.0146484,0.3862305c2.6679688-0.5649414,5.3242188-1.1572266,7.9658203-1.7783203c-0.5078125-6.3359375-5.5498047-10.0737305-13.2294922-10.0737305h-15.0878906V16.246582C148.3574219,15.8505859,150.9345703,15.4277344,153.5,14.9790039"/>
        <path fill="currentColor" d="M168.8017578,21.3857422c2.8339844-1.5996094,4.7236328-4.1835938,5.2060547-7.7099609c-9.2265625,2.7529297-18.6484375,5.0654297-28.2382813,6.9208984v12.0947266H153.5v-9.3310547h7.4111328l6.2919922,9.3310547H176v-0.5322266l-7.1982422-10.0800781V21.3857422z"/>
        <path fill="currentColor" d="M138.4921875,17.2871094V0.6928711h-7.7304688v17.5375977C133.3476563,17.9423828,135.9257813,17.6279297,138.4921875,17.2871094"/>
        <path fill="currentColor" d="M130.7607422,23.1035156v9.5888672h7.7314453v-10.78125C135.9267578,22.3417969,133.3486328,22.7392578,130.7607422,23.1035156"/>
        <path fill="currentColor" d="M94.2792969,25.9746094l-3.5136719,6.7177734h8.6894531l1.7060547-3.7861328h13.9150391l1.7617188,3.7861328h8.7431641l-4.4042969-8.3935547C112.3242188,25.2529297,103.3525391,25.8154297,94.2792969,25.9746094"/>
        <path fill="currentColor" d="M105.0332031,20.2109375l2.8466797-5.972168h0.4257813l2.6708984,5.6694336c2.5498047-0.1484375,5.0898438-0.3222656,7.6210938-0.5214844l-9.8115234-18.6948242h-1.2792969L97.1640625,20.4619141C99.7949219,20.4052734,102.4179688,20.3222656,105.0332031,20.2109375"/>
      </svg>
    </div>
  );
}

/* ============================================================
   NAV — variant V2 always-dark on hero, flips on scroll
   ============================================================ */
function NavV2({ active = 'home', theme, onThemeToggle, transparent = true }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Zamknout scroll při otevřeném menu
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const isOnDarkHero = transparent && !scrolled && !menuOpen;
  const NAV_LINKS = [
    ['services', 'Services'], ['fleet', 'Fleet'],
    ['empty-legs', 'Empty Legs'], ['about', 'About'], ['contact', 'Contact'],
  ];

  return (
    <>
      <nav className="nav" style={{
        padding: scrolled ? '12px 32px' : '20px 32px',
        background: isOnDarkHero
          ? 'linear-gradient(180deg, rgba(10,22,40,0.55), rgba(10,22,40,0.0))'
          : 'color-mix(in oklch, var(--bg) 80%, transparent)',
        borderBottom: isOnDarkHero ? '1px solid transparent' : '1px solid color-mix(in oklch, var(--line) 60%, transparent)',
        color: isOnDarkHero ? '#fff' : 'var(--text)',
      }}>
        <a href="index-v2.html"><EclairLogo /></a>

        {/* Desktop center links */}
        <div className="nav-center">
          {NAV_LINKS.map(([id, l]) => (
            <a key={id} href={`#${id}`} className={`nav-link ${active === id ? 'active' : ''}`}
              style={{ color: isOnDarkHero ? 'rgba(255,255,255,0.78)' : undefined }}>
              {l}
            </a>
          ))}
        </div>

        <div className="nav-right">
          {/* Desktop: OPS status */}
          <div className="nav-status" style={{ color: isOnDarkHero ? 'rgba(255,255,255,0.7)' : undefined }}>
            <span className="nav-status-dot"></span>
            <span>OPS · 24/7</span>
          </div>

          {/* Theme toggle — vždy viditelný */}
          <button onClick={onThemeToggle} aria-label="Toggle theme"
            style={{
              width: 32, height: 32, display: 'grid', placeItems: 'center',
              border: '1px solid ' + (isOnDarkHero ? 'rgba(255,255,255,0.25)' : 'var(--line-strong)'),
              color: isOnDarkHero ? '#fff' : 'var(--text)',
              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>

          {/* Desktop: CTA */}
          <a href="#book" className="btn btn-primary nav-cta">
            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>

          {/* Mobile: hamburger */}
          <button className="nav-hamburger" onClick={() => setMenuOpen(o => !o)}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            style={{
              width: 32, height: 32, display: 'none', flexDirection: 'column',
              justifyContent: 'center', alignItems: 'center', gap: 5,
              color: isOnDarkHero ? '#fff' : 'var(--text)',
            }}>
            <span style={{
              display: 'block', width: 20, height: 1.5,
              background: 'currentColor',
              transform: menuOpen ? 'translateY(6.5px) rotate(45deg)' : 'none',
              transition: 'transform 220ms',
            }}/>
            <span style={{
              display: 'block', width: 20, height: 1.5,
              background: 'currentColor',
              opacity: menuOpen ? 0 : 1,
              transition: 'opacity 220ms',
            }}/>
            <span style={{
              display: 'block', width: 20, height: 1.5,
              background: 'currentColor',
              transform: menuOpen ? 'translateY(-6.5px) rotate(-45deg)' : 'none',
              transition: 'transform 220ms',
            }}/>
          </button>
        </div>
      </nav>

      {/* Mobile drawer */}
      <div style={{
        position: 'fixed', inset: 0, zIndex: 99,
        background: 'var(--bg)',
        transform: menuOpen ? 'translateX(0)' : 'translateX(100%)',
        transition: 'transform 320ms cubic-bezier(.2,.7,.2,1)',
        display: 'flex', flexDirection: 'column',
        paddingTop: 80,
      }}>
        <nav style={{ flex: 1, padding: '32px 24px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {NAV_LINKS.map(([id, l], i) => (
            <a key={id} href={`#${id}`}
              onClick={() => setMenuOpen(false)}
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '18px 0',
                borderBottom: '1px solid var(--line)',
                fontSize: 28, fontFamily: 'var(--font-display)',
                fontWeight: 500, letterSpacing: '-0.03em',
                color: 'var(--text)',
                opacity: 0, animation: menuOpen ? `fadeSlideIn 300ms ${i * 50 + 100}ms forwards` : 'none',
              }}>
              {l}
              <span className="mono" style={{ fontSize: 11, color: 'var(--text-subtle)' }}>0{i + 1}</span>
            </a>
          ))}
        </nav>

        {/* Drawer footer */}
        <div style={{ padding: '24px', borderTop: '1px solid var(--line)' }}>
          <a href="#book" className="btn btn-primary"
            onClick={() => setMenuOpen(false)}
            style={{ width: '100%', justifyContent: 'center', padding: '16px', fontSize: 14 }}>
            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 style={{ display: 'flex', gap: 16, marginTop: 16, justifyContent: 'center' }}>
            <div className="nav-status">
              <span className="nav-status-dot"></span>
              <span>OPS · 24/7</span>
            </div>
          </div>
        </div>

        <style>{`
          @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </div>
    </>
  );
}

/* ============================================================
   HERO V2 — full-bleed video with parallax overlay
   ============================================================ */
function HeroVideoV2({ heroStyle = 'video' }) {
  return (
    <section style={{
      position: 'relative', minHeight: '100vh', width: '100%',
      color: '#fff',
      display: 'flex', alignItems: 'flex-end', paddingBottom: 64,
      backgroundImage: 'url(hero.jpg)',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
    }}>
      {/* Background media */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 0,
        overflow: 'hidden',
      }}>
        {heroStyle === 'video' ? (
          <video autoPlay muted loop playsInline
            poster="hero.jpg"
            style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover' }}>
            <source src="hero-video.mp4" type="video/mp4"/>
          </video>
        ) : (
          <img src="hero.jpg" alt=""
            style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover' }}/>
        )}
      </div>

      {/* Dark gradient veil */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(180deg, rgba(10,22,40,0.6) 0%, rgba(10,22,40,0.2) 40%, rgba(10,22,40,0.85) 100%)',
      }}/>

      {/* Content */}
      <div className="container-wide" style={{ position: 'relative', zIndex: 2, width: '100%', paddingTop: 100 }}>
        <div className="hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 80, alignItems: 'flex-end',
          paddingBottom: 24,
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24, color: 'rgba(255,255,255,0.7)' }}>
              <span style={{ display: 'inline-block', width: 24, height: 1, background: 'currentColor', verticalAlign: 'middle', marginRight: 12 }}></span>
              Private aviation · Est. 2008 · Prague
            </div>
            <h1 className="display" style={{
              fontSize: 'clamp(56px, 9vw, 152px)',
              fontWeight: 300, lineHeight: 0.92, letterSpacing: '-0.05em',
              marginBottom: 32, color: '#fff',
            }}>
              Feel the<br/>
              <span style={{ fontWeight: 600, fontStyle: 'italic' }}>difference</span><br/>
              in the sky.
            </h1>
            <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.78)', maxWidth: 480, lineHeight: 1.55, marginBottom: 40 }}>
              A Czech-flagged operator running five business jets out of Prague — from super-light Learjets
              to ultra-long-range Globals. Quoted in minutes, wheels-up in hours.
            </p>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <a href="#book" className="btn btn-primary" style={{ padding: '16px 28px', fontSize: 14, background: '#fff', color: '#0a1628' }}>
                Get an instant quote
                <svg width="14" height="14" viewBox="0 0 12 12" fill="none">
                  <path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/>
                </svg>
              </a>
              <a href="#fleet" className="btn" style={{
                padding: '16px 28px', fontSize: 14,
                border: '1px solid rgba(255,255,255,0.4)', color: '#fff',
              }}>
                Explore the fleet
              </a>
            </div>
          </div>

          {/* Live stats card */}
          <div className="hero-stats-card" style={{
            padding: 28,
            background: 'rgba(255,255,255,0.06)',
            backdropFilter: 'blur(24px)',
            border: '1px solid rgba(255,255,255,0.18)',
            borderRadius: 4,
          }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              {[
                { v: '5', l: 'Aircraft' }, { v: '11.1k', l: 'km range' },
                { v: '< 4h', l: 'Avg. response' }, { v: '24/7', l: 'Dispatch' },
              ].map(s => (
                <div key={s.l}>
                  <div className="display" style={{ fontSize: 36, fontWeight: 500, marginBottom: 4 }}>{s.v}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Marker bar */}
        <div className="hero-marker-bar" style={{
          marginTop: 64, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.18)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,0.55)',
          textTransform: 'uppercase', letterSpacing: '0.1em',
        }}>
          <span>LKPR · 50.1008°N · 14.2632°E</span>
          <span>Wind 240° / 8kt · QNH 1018</span>
          <span>Visibility 10km+</span>
          <span>OAT 14°C</span>
        </div>
      </div>

      {/* Scroll hint */}
      <div style={{
        position: 'absolute', bottom: 16, right: 32, zIndex: 2,
        fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.55)',
        textTransform: 'uppercase', letterSpacing: '0.14em',
        display: 'flex', alignItems: 'center', gap: 8,
        writingMode: 'vertical-rl',
      }}>
        Scroll
        <span style={{ display: 'inline-block', width: 1, height: 36, background: 'rgba(255,255,255,0.3)', position: 'relative', overflow: 'hidden' }}>
          <span style={{
            position: 'absolute', top: 0, left: 0, width: '100%', height: '40%',
            background: '#fff',
            animation: 'scrollDown 2.4s infinite ease-in-out',
          }}/>
        </span>
        <style>{`
          @keyframes scrollDown { 0% { top: -40%; } 100% { top: 100%; } }
        `}</style>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function FooterV2() {
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      background: 'var(--bg-inset)',
      padding: '80px 0 32px',
    }}>
      <div className="container">
        <div className="footer-grid" 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 className="footer-certs" 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)' }}>{i}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom" 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, NavV2, HeroVideoV2, FooterV2 });
