/* global React */
const { useState } = React;

/* ============================================================
   WORLD MAP — clickable destinations
   ============================================================ */
const DESTINATIONS = [
  { id: 'lcy', city: 'London', code: 'LCY', x: 460, y: 220, time: '2h 10m', popular: true },
  { id: 'cdg', city: 'Paris', code: 'CDG', x: 475, y: 245, time: '1h 45m', popular: true },
  { id: 'fra', city: 'Frankfurt', code: 'FRA', x: 510, y: 235, time: '1h 10m' },
  { id: 'mxp', city: 'Milan', code: 'MXP', x: 515, y: 270, time: '1h 30m' },
  { id: 'gva', city: 'Geneva', code: 'GVA', x: 495, y: 265, time: '1h 35m', popular: true },
  { id: 'mad', city: 'Madrid', code: 'MAD', x: 445, y: 295, time: '2h 45m' },
  { id: 'ist', city: 'Istanbul', code: 'IST', x: 615, y: 285, time: '2h 30m' },
  { id: 'dxb', city: 'Dubai', code: 'DXB', x: 720, y: 340, time: '5h 30m', popular: true },
  { id: 'jfk', city: 'New York', code: 'JFK', x: 220, y: 280, time: '8h 45m', popular: true },
  { id: 'mia', city: 'Miami', code: 'MIA', x: 230, y: 360, time: '10h 30m' },
  { id: 'sin', city: 'Singapore', code: 'SIN', x: 920, y: 440, time: '12h 15m' },
  { id: 'hkg', city: 'Hong Kong', code: 'HKG', x: 940, y: 365, time: '11h 30m' },
  { id: 'jnb', city: 'Johannesburg', code: 'JNB', x: 565, y: 540, time: '11h 00m' },
  { id: 'gru', city: 'São Paulo', code: 'GRU', x: 295, y: 510, time: '12h 30m' },
];

const HOME = { x: 530, y: 240 }; // Prague-ish

function WorldMap() {
  const [active, setActive] = useState('dxb');
  const [hover, setHover] = useState(null);
  const dest = DESTINATIONS.find(d => d.id === active);

  return (
    <section style={{ padding: '140px 0', background: 'var(--bg)', borderBottom: '1px solid var(--line)' }}>
      <div className="container-wide">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>05 — Network</div>
            <h2 className="section-title">Anywhere<br/>in one trip.</h2>
          </div>
          <p className="section-sub">
            Our Global 6000 reaches 11,000 km nonstop from Prague — that's New York, Dubai, Singapore.
            Click any destination for direct flight time.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 32, alignItems: 'flex-start' }}>
          {/* MAP */}
          <div style={{
            position: 'relative',
            background: 'var(--bg-inset)',
            border: '1px solid var(--line)',
            aspectRatio: '2/1',
          }}>
            <svg viewBox="0 0 1000 600" style={{ width: '100%', height: '100%', display: 'block' }}>
              {/* Dotted world lat/long grid */}
              <g stroke="var(--line-strong)" strokeWidth="0.4" opacity="0.5">
                {[100, 200, 300, 400, 500].map(y => (
                  <line key={y} x1="0" y1={y} x2="1000" y2={y} strokeDasharray="2 6"/>
                ))}
                {[100, 200, 300, 400, 500, 600, 700, 800, 900].map(x => (
                  <line key={x} x1={x} y1="0" x2={x} y2="600" strokeDasharray="2 6"/>
                ))}
              </g>

              {/* Continent dots — simplified abstract world */}
              <g fill="var(--text-subtle)" opacity="0.35">
                {Array.from({ length: 600 }).map((_, i) => {
                  // Simple deterministic landmass approximation
                  const x = (i * 37) % 1000;
                  const y = (i * 73) % 600;
                  const inLand =
                    (x > 150 && x < 280 && y > 180 && y < 400) ||  // Americas
                    (x > 240 && x < 320 && y > 380 && y < 540) ||
                    (x > 430 && x < 620 && y > 180 && y < 320) ||  // EU
                    (x > 540 && x < 700 && y > 280 && y < 540) ||  // Africa
                    (x > 600 && x < 920 && y > 200 && y < 380) ||  // Asia
                    (x > 850 && x < 970 && y > 430 && y < 510);    // AUS
                  return inLand ? <circle key={i} cx={x} cy={y} r="1.5"/> : null;
                })}
              </g>

              {/* Routes from home */}
              {DESTINATIONS.map(d => {
                const isActive = d.id === active || d.id === hover;
                return (
                  <path key={d.id}
                    d={`M ${HOME.x} ${HOME.y} Q ${(HOME.x + d.x) / 2} ${Math.min(HOME.y, d.y) - 60} ${d.x} ${d.y}`}
                    fill="none"
                    stroke={isActive ? 'var(--accent)' : 'var(--line-strong)'}
                    strokeWidth={isActive ? 1.5 : 0.6}
                    strokeDasharray={isActive ? 'none' : '3 4'}
                    opacity={isActive ? 1 : 0.4}
                    style={{ transition: 'all var(--t-fast)' }}/>
                );
              })}

              {/* Home (Prague) */}
              <g>
                <circle cx={HOME.x} cy={HOME.y} r="14" fill="none" stroke="var(--accent)" strokeWidth="0.8" opacity="0.5"/>
                <circle cx={HOME.x} cy={HOME.y} r="6" fill="var(--accent)"/>
                <text x={HOME.x + 14} y={HOME.y - 8} fontSize="11" fontFamily="var(--font-mono)" fill="var(--text)" fontWeight="600">PRG</text>
                <text x={HOME.x + 14} y={HOME.y + 4} fontSize="9" fontFamily="var(--font-mono)" fill="var(--text-muted)">HOME BASE</text>
              </g>

              {/* Destinations */}
              {DESTINATIONS.map(d => {
                const isActive = d.id === active;
                const isHover = d.id === hover;
                return (
                  <g key={d.id}
                    onMouseEnter={() => setHover(d.id)}
                    onMouseLeave={() => setHover(null)}
                    onClick={() => setActive(d.id)}
                    style={{ cursor: 'pointer' }}>
                    <circle cx={d.x} cy={d.y} r={isActive ? 14 : 10} fill="transparent"/>
                    <circle cx={d.x} cy={d.y} r={isActive ? 5 : 3}
                      fill={isActive ? 'var(--accent)' : 'var(--text)'}
                      style={{ transition: 'all var(--t-fast)' }}/>
                    {(isActive || isHover) && (
                      <>
                        <rect x={d.x + 10} y={d.y - 18} width={d.code.length * 7 + 16} height="16"
                          fill="var(--text)" rx="1"/>
                        <text x={d.x + 18} y={d.y - 6} fontSize="10" fontFamily="var(--font-mono)" fill="var(--bg)" fontWeight="600">
                          {d.code}
                        </text>
                      </>
                    )}
                  </g>
                );
              })}
            </svg>

            {/* Map legend overlay */}
            <div style={{
              position: 'absolute', top: 16, left: 16,
              padding: '10px 14px', background: 'var(--bg)',
              border: '1px solid var(--line)',
              fontFamily: 'var(--font-mono)', fontSize: 10,
              textTransform: 'uppercase', letterSpacing: '0.1em',
              color: 'var(--text-muted)',
            }}>
              World Network · {DESTINATIONS.length}+ direct
            </div>

            <div style={{
              position: 'absolute', bottom: 16, right: 16,
              padding: '10px 14px', background: 'var(--bg)',
              border: '1px solid var(--line)',
              fontFamily: 'var(--font-mono)', fontSize: 10,
              color: 'var(--text-muted)',
            }}>
              Click any city
            </div>
          </div>

          {/* DETAIL PANEL */}
          <div style={{
            border: '1px solid var(--line)',
            background: 'var(--bg-elevated)',
            padding: 28,
          }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Selected route</div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
              <span className="mono" style={{ fontSize: 18, fontWeight: 500, color: 'var(--accent)' }}>PRG</span>
              <span style={{ color: 'var(--text-subtle)' }}>→</span>
              <span className="mono" style={{ fontSize: 18, fontWeight: 500 }}>{dest.code}</span>
            </div>
            <h3 className="display" style={{ fontSize: 36, fontWeight: 500, letterSpacing: '-0.03em', marginBottom: 24 }}>
              {dest.city}
            </h3>

            <div style={{ borderTop: '1px solid var(--line)' }}>
              {[
                ['Direct flight time', dest.time],
                ['Recommended', dest.id === 'jfk' || dest.id === 'sin' || dest.id === 'hkg' ? 'Global 6000' : 'Gulfstream G280'],
                ['Stopover', 'None'],
                ['Status', 'Available'],
              ].map(([l, v]) => (
                <div key={l} style={{
                  display: 'flex', justifyContent: 'space-between',
                  padding: '14px 0', borderBottom: '1px solid var(--line)',
                }}>
                  <span className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--text-subtle)' }}>{l}</span>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>{v}</span>
                </div>
              ))}
            </div>

            <a href="#book" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 24, padding: 14 }}>
              Quote PRG → {dest.code}
            </a>

            <div style={{ marginTop: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Popular</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {DESTINATIONS.filter(d => d.popular).map(d => (
                  <button key={d.id} onClick={() => setActive(d.id)}
                    className="mono"
                    style={{
                      fontSize: 10, padding: '6px 10px',
                      border: '1px solid ' + (d.id === active ? 'var(--text)' : 'var(--line-strong)'),
                      background: d.id === active ? 'var(--text)' : 'transparent',
                      color: d.id === active ? 'var(--bg)' : 'var(--text)',
                      letterSpacing: '0.08em',
                    }}>
                    {d.code}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   EMPTY LEGS
   ============================================================ */
function EmptyLegs() {
  const legs = [
    { from: 'PRG', to: 'NCE', date: 'May 14', time: '10:30', aircraft: 'Learjet 75', seats: 6, price: 8400 },
    { from: 'LCY', to: 'PRG', date: 'May 17', time: '15:00', aircraft: 'Gulfstream G200', seats: 8, price: 11200 },
    { from: 'PRG', to: 'IBZ', date: 'May 22', time: '11:45', aircraft: 'Challenger 605', seats: 10, price: 14800 },
    { from: 'GVA', to: 'PRG', date: 'May 26', time: '17:20', aircraft: 'Gulfstream G280', seats: 9, price: 9600 },
  ];

  return (
    <section id="empty-legs" style={{ padding: '140px 0', borderBottom: '1px solid var(--line)', background: 'var(--bg-inset)' }}>
      <div className="container-wide">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>06 — Empty Legs</div>
            <h2 className="section-title">Pre-positioned<br/>flights, half the price.</h2>
          </div>
          <p className="section-sub">
            When an aircraft repositions empty between bookings, that leg is yours
            — same jet, same crew, often 50% off the standard rate.
          </p>
        </div>

        <div style={{ border: '1px solid var(--line)', background: 'var(--bg-elevated)' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '80px 1fr 1fr 1.5fr 80px 140px 100px',
            padding: '16px 24px', borderBottom: '1px solid var(--line)',
            background: 'var(--bg)',
          }}>
            {['Date', 'From', 'To', 'Aircraft', 'Seats', 'From price', ''].map(h => (
              <div key={h} className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--text-subtle)' }}>{h}</div>
            ))}
          </div>
          {legs.map((l, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '80px 1fr 1fr 1.5fr 80px 140px 100px',
              padding: '20px 24px', alignItems: 'center',
              borderBottom: i === legs.length - 1 ? 'none' : '1px solid var(--line)',
              transition: 'background var(--t-fast)',
              cursor: 'pointer',
            }}
            onMouseOver={e => e.currentTarget.style.background = 'var(--bg-inset)'}
            onMouseOut={e => e.currentTarget.style.background = 'transparent'}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{l.date}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-subtle)' }}>{l.time}</div>
              </div>
              <div className="display" style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{l.from}</div>
              <div className="display" style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>
                <span style={{ color: 'var(--text-subtle)', marginRight: 8 }}>→</span>
                {l.to}
              </div>
              <div style={{ fontSize: 14 }}>{l.aircraft}</div>
              <div className="mono" style={{ fontSize: 13 }}>{l.seats} pax</div>
              <div className="display" style={{ fontSize: 22, fontWeight: 500 }}>
                €{l.price.toLocaleString('en-US')}
              </div>
              <button className="btn btn-ghost" style={{ padding: '8px 14px', fontSize: 12 }}>
                Book →
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ABOUT / TRUST STRIP
   ============================================================ */
function About() {
  return (
    <section id="about" style={{ padding: '140px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container-wide">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <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, 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>
            <p style={{ fontSize: 17, color: 'var(--text-muted)', lineHeight: 1.6, marginBottom: 40, maxWidth: 480 }}>
              We are members of EBAA, hold ACA Stage 2 sustainability certification,
              and our safety management system is registered to IS-BAO standards.
            </p>
            <a href="#" className="btn-arrow">
              About the company
              <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 style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              { v: '2008', l: 'Founded' },
              { v: '5', l: 'Aircraft' },
              { v: '160+', l: 'Destinations' },
              { v: '24/7', l: 'Operations' },
              { v: '50+', l: 'Crew & staff' },
              { v: 'EBAA', l: 'Member' },
            ].map(s => (
              <div key={s.l} style={{
                padding: 24,
                border: '1px solid var(--line)',
                background: 'var(--bg-inset)',
              }}>
                <div className="display" style={{ fontSize: 44, fontWeight: 500, letterSpacing: '-0.03em', marginBottom: 6 }}>{s.v}</div>
                <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--text-muted)' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CONTACT CTA
   ============================================================ */
function ContactCTA() {
  return (
    <section id="contact" style={{ padding: '160px 0', background: 'var(--bg)' }}>
      <div className="container-wide">
        <div style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
          <div className="eyebrow" style={{ marginBottom: 32 }}>08 — Get in touch</div>
          <h2 className="display" style={{ fontSize: 'clamp(56px, 8vw, 128px)', fontWeight: 300, letterSpacing: '-0.05em', lineHeight: 0.95, marginBottom: 48 }}>
            Ready when<br/>
            <span style={{ fontWeight: 600, fontStyle: 'italic' }}>you are.</span>
          </h2>
          <p style={{ fontSize: 18, color: 'var(--text-muted)', 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 style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="#book" className="btn btn-primary" style={{ padding: '18px 32px', fontSize: 14 }}>
              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 btn-ghost" style={{ padding: '18px 32px', fontSize: 14 }}>
              +420 778 403 535
            </a>
            <a href="mailto:info@eclair.aero" className="btn btn-ghost" style={{ padding: '18px 32px', fontSize: 14 }}>
              info@eclair.aero
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WorldMap, EmptyLegs, About, ContactCTA });