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

/* ============================================================
   HERO — VARIANT A (cinematic full-bleed)
   ============================================================ */
function HeroCinematic() {
  return (
    <section style={{
      position: 'relative',
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'flex-end',
      paddingTop: 120,
      paddingBottom: 80,
      overflow: 'hidden',
    }}>
      {/* Background */}
      <video
  autoPlay
  muted
  loop
  playsInline
  style={{
    position: 'absolute', inset: 0, zIndex: 0,
    width: '100%', height: '100%',
    objectFit: 'cover',
  }}
>
  <source src="hero-video.mp4" type="video/mp4" />
</video>

      <div className="container-wide" style={{ position: 'relative', zIndex: 2, width: '100%' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'flex-end' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <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, 144px)',
              fontWeight: 300,
              lineHeight: 0.92,
              letterSpacing: '-0.05em',
              marginBottom: 32,
            }}>
              Feel the<br/>
              <span style={{ fontWeight: 600, fontStyle: 'italic' }}>difference</span><br/>
              in the sky.
            </h1>
            <p style={{ fontSize: 18, color: 'var(--text-muted)', 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 }}>
                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 btn-ghost" style={{ padding: '16px 28px', fontSize: 14 }}>
                Explore the fleet
              </a>
            </div>
          </div>

          <div style={{ paddingBottom: 16 }}>
            <div style={{
              padding: 28,
              background: 'color-mix(in oklch, var(--bg-elevated) 86%, transparent)',
              backdropFilter: 'blur(20px)',
              border: '1px solid var(--line)',
              borderRadius: 4,
            }}>
              <div className="eyebrow" style={{ marginBottom: 20 }}>Live operations</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                {[
                  { v: '5', l: 'Aircraft in fleet' },
                  { v: '11.1k', l: 'km max range' },
                  { v: '< 4h', l: 'Avg. response' },
                  { v: '24/7', l: 'Ops & 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: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Marker bar */}
        <div style={{
          marginTop: 80, paddingTop: 24, borderTop: '1px solid var(--line)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-subtle)',
          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>
    </section>
  );
}

/* ============================================================
   HERO — VARIANT B (editorial split + map)
   ============================================================ */
function HeroEditorial() {
  return (
    <section style={{
      paddingTop: 140,
      paddingBottom: 80,
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', minHeight: '70vh' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 32 }}>
              01 / Private aviation · Prague
            </div>
            <h1 className="display" style={{
              fontSize: 'clamp(48px, 7vw, 112px)',
              fontWeight: 300,
              lineHeight: 0.92,
              letterSpacing: '-0.05em',
              marginBottom: 32,
            }}>
              Anywhere<br/>
              you need<br/>
              to be — <span style={{ fontWeight: 600, fontStyle: 'italic' }}>now.</span>
            </h1>
            <p style={{ fontSize: 17, color: 'var(--text-muted)', maxWidth: 460, lineHeight: 1.6, marginBottom: 40 }}>
              Five business jets, hand-picked crews, and a dispatch desk that never sleeps.
              Quote in minutes, wheels-up in hours, anywhere from London to Dubai.
            </p>

            {/* Inline quick-quote */}
            <div style={{
              border: '1px solid var(--line-strong)',
              padding: 6,
              display: 'grid',
              gridTemplateColumns: '1fr 1fr 1fr auto',
              gap: 1,
              background: 'var(--line)',
              maxWidth: 560,
            }}>
              {[
                { l: 'From', v: 'PRG' },
                { l: 'To', v: 'LCY' },
                { l: 'Date', v: '12 May' },
              ].map(f => (
                <div key={f.l} style={{ background: 'var(--bg)', padding: '14px 16px' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--text-subtle)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>{f.l}</div>
                  <div style={{ fontSize: 15, fontWeight: 500 }}>{f.v}</div>
                </div>
              ))}
              <a href="#book" className="btn btn-primary" style={{ padding: '0 24px', borderRadius: 0, justifyContent: 'center' }}>
                Quote
              </a>
            </div>

            <div style={{ marginTop: 56, display: 'flex', gap: 56 }}>
              {[
                { v: '5', l: 'Aircraft' },
                { v: '160+', l: 'Destinations' },
                { v: '24/7', l: 'Dispatch' },
              ].map(s => (
                <div key={s.l}>
                  <div className="display" style={{ fontSize: 44, fontWeight: 500, marginBottom: 4 }}>{s.v}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Placeholder label="Aircraft on tarmac · golden hour"
              style={{ aspectRatio: '4/5', width: '100%' }}/>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <Placeholder label="Cabin interior" style={{ aspectRatio: '1', width: '100%' }}/>
              <div style={{
                padding: 24,
                background: 'var(--bg-inset)',
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                aspectRatio: '1',
              }}>
                <div className="eyebrow">Latest dispatch</div>
                <div>
                  <div className="display" style={{ fontSize: 24, fontWeight: 500, marginBottom: 8 }}>OK-GRX</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Global 6000 · positioning LKPR → EGGW · ETA 14:32 UTC</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SERVICES STRIP
   ============================================================ */
function Services() {
  const items = [
    { num: '01', title: 'Aircraft Charter', desc: 'Tailored business and leisure flights, customized to the smallest detail.', img: 'Charter cabin' },
    { num: '02', title: 'VIP Lounge Prague', desc: 'Private terminal lounge at LKPR Terminal 3 — open 24/7 to clients.', img: 'VIP Lounge interior' },
    { num: '03', title: 'Aircraft Management', desc: 'Full operational ownership: crew, maintenance, dispatch, regulatory.', img: 'Aircraft on apron' },
    { num: '04', title: 'Consulting Services', desc: 'Decades of business and cargo aviation expertise on call.', img: 'Boardroom' },
    { num: '05', title: 'Flight Planning', desc: 'Licensed dispatchers planning routes worldwide, around the clock.', img: 'Dispatch desk' },
    { num: '06', title: 'Aircraft Sales', desc: 'Buying or selling — we handle inspection, paperwork, and delivery.', img: 'Aircraft hangar' },
    { num: '07', title: 'Cargo Transportation', desc: 'Small freight to medium loads, anywhere our fleet can reach.', img: 'Cargo loading' },
  ];
  const [open, setOpen] = useState(0);

  return (
    <section id="services" style={{ padding: '140px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container-wide">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>02 — What we do</div>
            <h2 className="section-title">Seven services,<br/>one operator.</h2>
          </div>
          <p className="section-sub">
            From a single charter request to full ownership of your aircraft, every operation
            runs through the same Prague dispatch desk and the same accountable team.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          {/* Left: list */}
          <div>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={it.num}
                  onMouseEnter={() => setOpen(i)}
                  style={{
                    borderTop: '1px solid var(--line)',
                    borderBottom: i === items.length - 1 ? '1px solid var(--line)' : 'none',
                    padding: '24px 0',
                    cursor: 'pointer',
                    transition: 'all var(--t-base)',
                  }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 24 }}>
                    <span className="mono" style={{
                      fontSize: 12, color: isOpen ? 'var(--accent)' : 'var(--text-subtle)',
                      letterSpacing: '0.08em', minWidth: 28,
                    }}>{it.num}</span>
                    <div style={{ flex: 1 }}>
                      <h3 className="display" style={{
                        fontSize: 32, fontWeight: 500, letterSpacing: '-0.03em',
                        color: isOpen ? 'var(--text)' : 'var(--text-muted)',
                        transition: 'color var(--t-fast)',
                      }}>{it.title}</h3>
                      <div style={{
                        maxHeight: isOpen ? 100 : 0,
                        opacity: isOpen ? 1 : 0,
                        overflow: 'hidden',
                        transition: 'all var(--t-base)',
                      }}>
                        <p style={{ fontSize: 14, color: 'var(--text-muted)', marginTop: 12, lineHeight: 1.55 }}>
                          {it.desc}
                        </p>
                        <a href="#" className="btn-arrow" style={{ marginTop: 16, fontSize: 12 }}>
                          Learn more
                          <svg width="11" height="11" viewBox="0 0 12 12"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
                        </a>
                      </div>
                    </div>
                    <svg width="14" height="14" viewBox="0 0 14 14" style={{
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                      transition: 'transform var(--t-base)',
                      color: 'var(--text-subtle)',
                    }}>
                      <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.4" fill="none"/>
                    </svg>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Right: preview */}
          <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
            <Placeholder label={items[open].img} style={{ aspectRatio: '4/5', width: '100%' }}/>
            <div style={{
              marginTop: 16, padding: 24,
              border: '1px solid var(--line)',
              background: 'var(--bg-elevated)',
            }}>
              <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--accent)', marginBottom: 8 }}>
                Service · {items[open].num}
              </div>
              <h4 className="display" style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.03em', marginBottom: 12 }}>
                {items[open].title}
              </h4>
              <p style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.55 }}>
                {items[open].desc}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroCinematic, HeroEditorial, Services });