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

const FLEET = [
  {
    id: 'global-6000', mfr: 'Bombardier', model: 'Global 6000', reg: 'OK-GRX',
    tag: 'Ultra Long Range',
    seats: 12, range: '11,112 km', rangeNm: '6,000 NM', speed: '1,080 km/h', ceiling: '51,000 ft',
    desc: 'Top-class ultra long range business jet. The generously-sized cabin is designed to provide maximum comfort for work, sleep, and conversation across continents.',
    cabin: { length: '13.18 m', width: '2.41 m', height: '1.91 m' },
  },
  {
    id: 'gulfstream-g280', mfr: 'Gulfstream', model: 'G280', reg: 'OK-GTX',
    tag: 'Brand New Mid-Size',
    seats: 10, range: '6,667 km', rangeNm: '3,603 NM', speed: '900 km/h', ceiling: '45,000 ft',
    desc: 'Brand new super mid-size jet. Stand-up cabin with high-quality furniture and fresh-air circulation ensures maximum comfort on board.',
    cabin: { length: '7.98 m', width: '2.13 m', height: '1.93 m' },
  },
  {
    id: 'challenger-605', mfr: 'Bombardier', model: 'Challenger 605', reg: 'OK-BPS',
    tag: 'Heavy · Trans-Atlantic',
    seats: 12, range: '7,400 km', rangeNm: '4,000 NM', speed: '870 km/h', ceiling: '41,000 ft',
    desc: 'Heavy jet suitable for trans-Atlantic flights without stopovers as well as for short and medium-haul flights across Europe.',
    cabin: { length: '8.61 m', width: '2.49 m', height: '1.85 m' },
  },
  {
    id: 'learjet-75', mfr: 'Bombardier', model: 'Learjet 75', reg: 'OK-MBS',
    tag: 'Super Light',
    seats: 6, range: '3,780 km', rangeNm: '2,040 NM', speed: '865 km/h', ceiling: '51,000 ft',
    desc: 'High-performance super light jet for medium-range travel. Latest onboard technology and the capability to take off and land at smaller airports.',
    cabin: { length: '5.59 m', width: '1.55 m', height: '1.50 m' },
  },
  {
    id: 'gulfstream-g200', mfr: 'Gulfstream', model: 'G200', reg: 'OK-GLX',
    tag: 'Super Midsize',
    seats: 10, range: '6,300 km', rangeNm: '3,400 NM', speed: '850 km/h', ceiling: '45,000 ft',
    desc: 'Top-class super-midsize business jet. Generously-sized cabin designed to provide maximum comfort for your work and travel.',
    cabin: { length: '7.44 m', width: '2.18 m', height: '1.91 m' },
  },
];

/* ============================================================
   FLEET STACK — scroll-snap, each aircraft a full screen
   ============================================================ */
function FleetStack() {
  const [activeIdx, setActiveIdx] = useState(0);
  const containerRef = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && e.intersectionRatio > 0.5) {
          const idx = Number(e.target.dataset.idx);
          setActiveIdx(idx);
        }
      });
    }, { threshold: [0.5, 0.7] });
    const sections = containerRef.current?.querySelectorAll('[data-fleet-slide]');
    sections?.forEach(s => obs.observe(s));
    return () => obs.disconnect();
  }, []);

  return (
    <section id="fleet" ref={containerRef} style={{ position: 'relative', background: 'var(--bg-inset)' }}>
      {/* Section header */}
      <div className="container-wide" style={{ padding: '140px 32px 80px', borderBottom: '1px solid var(--line)' }}>
        <div className="section-head" style={{ marginBottom: 0, paddingBottom: 0, borderBottom: 'none' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>03 — The Fleet</div>
            <h2 className="section-title">Five aircraft.<br/>One operator.</h2>
          </div>
          <p className="section-sub">
            From a six-seat Learjet 75 to a 12-seat Global 6000 with 11,000 km of range —
            scroll through every airframe currently registered to Eclair.
          </p>
        </div>
      </div>

      {/* Sticky side rail */}
      <div style={{
        position: 'sticky', top: 80, zIndex: 5,
        padding: '24px 32px',
        background: 'color-mix(in oklch, var(--bg-inset) 88%, transparent)',
        backdropFilter: 'blur(14px)',
        borderBottom: '1px solid var(--line)',
      }}>
        <div className="container-wide" style={{ padding: 0 }}>
          <div style={{ display: 'flex', gap: 6, overflowX: 'auto' }}>
            {FLEET.map((a, i) => (
              <a key={a.id} href={`#${a.id}`}
                style={{
                  padding: '10px 16px',
                  border: '1px solid ' + (activeIdx === i ? 'var(--text)' : 'var(--line-strong)'),
                  background: activeIdx === i ? 'var(--text)' : 'transparent',
                  color: activeIdx === i ? 'var(--bg)' : 'var(--text-muted)',
                  fontSize: 12, fontWeight: 500,
                  whiteSpace: 'nowrap',
                  transition: 'all var(--t-fast)',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                <span className="mono" style={{ fontSize: 10, opacity: 0.6 }}>0{i + 1}</span>
                {a.model} · {a.reg}
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* Slides */}
      {FLEET.map((a, i) => (
        <div key={a.id} id={a.id} data-fleet-slide data-idx={i}
          style={{
            minHeight: '100vh',
            padding: '80px 0 120px',
            display: 'flex', alignItems: 'center',
            borderBottom: i === FLEET.length - 1 ? 'none' : '1px solid var(--line)',
          }}>
          <div className="container-wide" style={{ width: '100%' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
              {/* Left: text */}
              <div>
                <div className="mono" style={{
                  fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em',
                  color: 'var(--accent)', marginBottom: 24,
                }}>
                  0{i + 1} / 0{FLEET.length} · {a.tag}
                </div>
                <div className="mono" style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 8, letterSpacing: '0.05em' }}>
                  {a.mfr.toUpperCase()}
                </div>
                <h3 className="display" style={{
                  fontSize: 'clamp(48px, 6vw, 88px)',
                  fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.95,
                  marginBottom: 16,
                }}>
                  {a.model}
                </h3>
                <div className="mono" style={{
                  fontSize: 16, color: 'var(--text)',
                  padding: '6px 12px', display: 'inline-block',
                  background: 'var(--bg-elevated)', border: '1px solid var(--line-strong)',
                  marginBottom: 28,
                }}>
                  {a.reg}
                </div>
                <p style={{ fontSize: 16, color: 'var(--text-muted)', lineHeight: 1.6, marginBottom: 40, maxWidth: 460 }}>
                  {a.desc}
                </p>

                {/* Spec grid */}
                <div style={{
                  display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
                  border: '1px solid var(--line)',
                  background: 'var(--line)',
                  marginBottom: 32,
                  maxWidth: 480,
                }}>
                  {[
                    { l: 'Passengers', v: a.seats, u: 'pax' },
                    { l: 'Range', v: a.range, u: a.rangeNm },
                    { l: 'Cruise speed', v: a.speed, u: '' },
                    { l: 'Ceiling', v: a.ceiling, u: '' },
                  ].map(s => (
                    <div key={s.l} style={{ background: 'var(--bg)', padding: '18px 20px' }}>
                      <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--text-subtle)', marginBottom: 6 }}>
                        {s.l}
                      </div>
                      <div className="display" style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em' }}>
                        {s.v}
                        {s.u && <span className="mono" style={{ fontSize: 11, color: 'var(--text-subtle)', marginLeft: 6 }}>{s.u}</span>}
                      </div>
                    </div>
                  ))}
                </div>

                <div style={{ display: 'flex', gap: 16 }}>
                  <a href={`aircraft.html?id=${a.id}`} className="btn btn-primary" style={{ padding: '14px 24px' }}>
                    View aircraft
                    <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>
                  <a href="#book" className="btn btn-ghost" style={{ padding: '14px 24px' }}>
                    Charter this jet
                  </a>
                </div>
              </div>

              {/* Right: image */}
              <div>
                <Placeholder label={`${a.mfr} ${a.model} · exterior shot`}
                  style={{ aspectRatio: '16/10', width: '100%' }}/>
                <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                  {['Cabin length', 'Cabin width', 'Cabin height'].map((l, ii) => (
                    <div key={l} style={{
                      padding: 14, border: '1px solid var(--line)', background: 'var(--bg)',
                    }}>
                      <div className="mono" style={{ fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--text-subtle)' }}>{l}</div>
                      <div className="mono" style={{ fontSize: 16, marginTop: 6, fontWeight: 500 }}>
                        {Object.values(a.cabin)[ii]}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </section>
  );
}

Object.assign(window, { FleetStack, FLEET });