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

/* ============================================================
   SERVICES V2 — image-led card grid with hover zoom
   ============================================================ */
function ServicesV2() {
  const items = [
    { num: '01', title: 'Aircraft Charter', desc: 'Tailored business and leisure flights, customized to the smallest detail.', img: window.IMG.cabin1 },
    { num: '02', title: 'VIP Lounge Prague', desc: 'Private terminal lounge at LKPR Terminal 3 — open 24/7 to clients.', img: window.IMG.vipLounge },
    { num: '03', title: 'Aircraft Management', desc: 'Full operational ownership: crew, maintenance, dispatch, regulatory.', img: window.IMG.tarmac },
    { num: '04', title: 'Consulting Services', desc: 'Decades of business and cargo aviation expertise on call.', img: window.IMG.meeting },
    { num: '05', title: 'Flight Planning', desc: 'Licensed dispatchers planning routes worldwide, around the clock.', img: window.IMG.dispatch },
    { num: '06', title: 'Aircraft Sales', desc: 'Buying or selling — we handle inspection, paperwork, and delivery.', img: window.IMG.hangar },
    { num: '07', title: 'Cargo Transportation', desc: 'Small freight to medium loads, anywhere our fleet can reach.', img: window.IMG.cargo },
  ];

  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 className="services-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gridTemplateRows: 'repeat(2, 280px)',
          gap: 8,
        }}>
          {items.map((it, i) => {
            // Featured items span 2 columns
            const featured = i === 0 || i === 4;
            return (
              <a key={it.num} href="#"
                style={{
                  position: 'relative',
                  gridColumn: featured ? 'span 2' : 'span 1',
                  overflow: 'hidden',
                  background: '#000',
                  cursor: 'pointer',
                  display: 'block',
                }}
                className="service-card">
                <img src={it.img} alt={it.title}
                  loading="lazy"
                  style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    transition: 'transform 800ms cubic-bezier(.2,.7,.2,1), opacity 400ms',
                    opacity: 0.7,
                  }}/>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(10,22,40,0.1) 0%, rgba(10,22,40,0.85) 100%)',
                  pointerEvents: 'none',
                }}/>
                <div style={{
                  position: 'absolute', inset: 0,
                  padding: 24,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  color: '#fff',
                }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', opacity: 0.8 }}>
                    {it.num}
                  </div>
                  <div>
                    <h3 className="display" style={{
                      fontSize: featured ? 36 : 22,
                      fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 8,
                    }}>{it.title}</h3>
                    <p style={{ fontSize: 12, opacity: 0.85, maxWidth: 360, lineHeight: 1.5 }}>
                      {it.desc}
                    </p>
                    <div style={{
                      marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8,
                      fontSize: 12, fontWeight: 500,
                      paddingBottom: 4, borderBottom: '1px solid rgba(255,255,255,0.5)',
                    }}>
                      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>
                    </div>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
      <style>{`
        .service-card:hover img { transform: scale(1.06); opacity: 0.9; }
      `}</style>
    </section>
  );
}

/* ============================================================
   FLEET STACK V2 — full-bleed photo per aircraft
   ============================================================ */
function FleetStackV2() {
  const FLEET = window.FLEET;
  const FLEET_IMGS = [window.IMG.global, window.IMG.g280, window.IMG.challenger, window.IMG.learjet, window.IMG.g200];
  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) {
          setActiveIdx(Number(e.target.dataset.idx));
        }
      });
    }, { threshold: [0.5] });
    containerRef.current?.querySelectorAll('[data-fleet-slide]').forEach(s => obs.observe(s));
    return () => obs.disconnect();
  }, []);

  return (
    <section id="fleet" ref={containerRef} style={{ background: '#0a1628', color: '#fff', position: 'relative' }}>
      <div className="container-wide" style={{ padding: '140px 32px 64px', borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
        <div className="section-head" style={{ marginBottom: 0, paddingBottom: 0, borderBottom: 'none' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: 'rgba(255,255,255,0.6)' }}>03 — The Fleet</div>
            <h2 className="section-title" style={{ color: '#fff' }}>Five aircraft.<br/>One operator.</h2>
          </div>
          <p className="section-sub" style={{ color: 'rgba(255,255,255,0.65)' }}>
            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 pager */}
      <div style={{
        position: 'sticky', top: 80, zIndex: 5,
        padding: '20px 32px',
        background: 'rgba(10,22,40,0.78)',
        backdropFilter: 'blur(18px)',
        borderBottom: '1px solid rgba(255,255,255,0.12)',
      }}>
        <div className="container-wide" style={{ padding: 0 }}>
          <div className="fleet-pager" 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 ? '#fff' : 'rgba(255,255,255,0.25)'),
                  background: activeIdx === i ? '#fff' : 'transparent',
                  color: activeIdx === i ? '#0a1628' : 'rgba(255,255,255,0.78)',
                  fontSize: 12, fontWeight: 500,
                  whiteSpace: 'nowrap', transition: 'all 180ms',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                <span className="mono" style={{ fontSize: 10, opacity: 0.6 }}>0{i + 1}</span>
                {a.model}
              </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',
            position: 'relative',
            display: 'flex', alignItems: 'center',
            padding: '80px 0 120px',
            borderBottom: i === FLEET.length - 1 ? 'none' : '1px solid rgba(255,255,255,0.1)',
            overflow: 'hidden',
          }}>
          {/* Background image */}
          <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
            <img src={FLEET_IMGS[i]} alt={a.model} loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.45 }}/>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(90deg, rgba(10,22,40,0.92) 0%, rgba(10,22,40,0.5) 60%, rgba(10,22,40,0.7) 100%)',
            }}/>
          </div>

          <div className="container-wide" style={{ position: 'relative', zIndex: 1, width: '100%' }}>
            <div style={{ maxWidth: 720 }}>
              <div className="mono" style={{
                fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em',
                color: '#7eb6ff', marginBottom: 24,
              }}>0{i + 1} / 0{FLEET.length} · {a.tag}</div>
              <div className="mono" style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)', marginBottom: 8, letterSpacing: '0.05em' }}>
                {a.mfr.toUpperCase()}
              </div>
              <h3 className="display" style={{
                fontSize: 'clamp(56px, 7vw, 112px)',
                fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.95,
                marginBottom: 16, color: '#fff',
              }}>{a.model}</h3>
              <div className="mono" style={{
                fontSize: 18,
                padding: '8px 14px', display: 'inline-block',
                background: 'rgba(255,255,255,0.08)',
                border: '1px solid rgba(255,255,255,0.25)',
                marginBottom: 28, color: '#fff',
              }}>{a.reg}</div>
              <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.78)', lineHeight: 1.6, marginBottom: 40, maxWidth: 540 }}>
                {a.desc}
              </p>

              <div style={{
                display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
                border: '1px solid rgba(255,255,255,0.18)',
                background: 'rgba(255,255,255,0.18)',
                marginBottom: 40,
                maxWidth: 600,
              }}>
                {[
                  { l: 'Pax', v: a.seats },
                  { l: 'Range', v: a.range.replace(/ km$/, '').split(',').join('') + 'k', short: true },
                  { l: 'Speed', v: a.speed.replace(' km/h', '') },
                  { l: 'Ceiling', v: a.ceiling.replace(',', '') },
                ].map(s => (
                  <div key={s.l} style={{ background: 'rgba(10,22,40,0.85)', padding: '18px 16px' }}>
                    <div className="mono" style={{ fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'rgba(255,255,255,0.55)', marginBottom: 6 }}>
                      {s.l}
                    </div>
                    <div className="display" style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: '#fff' }}>
                      {s.v}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', gap: 12 }}>
                <a href={`aircraft.html?id=${a.id}`} className="btn"
                  style={{ padding: '14px 24px', background: '#fff', color: '#0a1628' }}>
                  View aircraft
                  <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
                </a>
                <a href="#book" className="btn" style={{
                  padding: '14px 24px', border: '1px solid rgba(255,255,255,0.4)', color: '#fff',
                }}>
                  Charter this jet
                </a>
              </div>
            </div>
          </div>
        </div>
      ))}
    </section>
  );
}

/* ============================================================
   ABOUT V2 — image+text split with parallax
   ============================================================ */
function AboutV2() {
  return (
    <section id="about" style={{ padding: '140px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container-wide">
        <div className="about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div style={{ position: 'relative' }}>
            <img src={window.IMG.prague} alt="Prague" loading="lazy"
              style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover' }}/>
            <div style={{
              position: 'absolute', bottom: 24, left: 24, right: 24,
              padding: 20, background: 'rgba(10,22,40,0.85)', backdropFilter: 'blur(12px)',
              color: '#fff',
            }}>
              <div className="mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.12em', marginBottom: 6 }}>
                HOME BASE · LKPR
              </div>
              <div style={{ fontSize: 14 }}>Václav Havel Airport, Private Terminal 3</div>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>07 — About Eclair</div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.98, marginBottom: 32 }}>
              Czech aviation,<br/>served the Prague way.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--text-muted)', lineHeight: 1.6, marginBottom: 24, maxWidth: 480 }}>
              Eclair Aviation operates from Václav Havel Airport's Private Terminal 3,
              with hand-picked crews and an in-house dispatch desk that has been running
              continuously since the company was founded.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 32 }}>
              {[
                { v: '2008', l: 'Founded' }, { v: '5', l: 'Aircraft' },
                { v: '160+', l: 'Destinations' }, { v: '24/7', l: 'Operations' },
              ].map(s => (
                <div key={s.l} style={{ padding: 20, background: 'var(--bg-inset)', border: '1px solid var(--line)' }}>
                  <div className="display" style={{ fontSize: 36, fontWeight: 500, letterSpacing: '-0.03em' }}>{s.v}</div>
                  <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--text-muted)', marginTop: 4 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CONTACT V2 — full-bleed image background
   ============================================================ */
function ContactV2() {
  return (
    <section id="contact" style={{
      position: 'relative', padding: '180px 0',
      background: '#0a1628', color: '#fff', overflow: 'hidden',
    }}>
      <img src={window.IMG.sunset} alt="" loading="lazy"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.4 }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(10,22,40,0.4), rgba(10,22,40,0.9))',
      }}/>
      <div className="container-wide" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
          <div className="eyebrow" style={{ marginBottom: 32, color: 'rgba(255,255,255,0.65)' }}>08 — Get in touch</div>
          <h2 className="display" style={{ fontSize: 'clamp(56px, 8vw, 128px)', fontWeight: 300, letterSpacing: '-0.05em', lineHeight: 0.95, marginBottom: 48, color: '#fff' }}>
            Ready when<br/>
            <span style={{ fontWeight: 600, fontStyle: 'italic' }}>you are.</span>
          </h2>
          <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.78)', maxWidth: 520, margin: '0 auto 48px', lineHeight: 1.6 }}>
            Dispatch is staffed twenty-four hours a day. Call, email, or send a quote
            request — we'll come back within four working hours.
          </p>
          <div className="contact-btns" style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="#book" className="btn" style={{ padding: '18px 32px', fontSize: 14, background: '#fff', color: '#0a1628' }}>
              Request a quote
              <svg width="14" height="14" viewBox="0 0 12 12"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
            </a>
            <a href="tel:778403535" className="btn" style={{ padding: '18px 32px', fontSize: 14, border: '1px solid rgba(255,255,255,0.4)', color: '#fff' }}>
              +420 778 403 535
            </a>
            <a href="mailto:info@eclair.aero" className="btn" style={{ padding: '18px 32px', fontSize: 14, border: '1px solid rgba(255,255,255,0.4)', color: '#fff' }}>
              info@eclair.aero
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesV2, FleetStackV2, AboutV2, ContactV2 });