/* Centaurus Charter — screens */
const { useState: useStateS, useEffect: useEffectS } = React;

/* ================= HOME ================= */
function HomeScreen({ goto, onBook }) {
  const { FLEET, EXPERIENCES, WATERSPORTS, REVIEWS } = window.CENTAURUS_DATA;
  const [tab, setTab] = useStateS('best');
  const fleetTabs = {
    'best': FLEET.filter(f => f.tag === 'Best Seller'),
    'premium': FLEET.filter(f => f.tag === 'Premium'),
    'all': FLEET.slice(0, 6),
  };
  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero-image" style={{ backgroundImage: 'url(media/yacht-poseidon-118ft-sailing.webp)' }}/>
        <div className="hero-content">
          <div className="wrap">
            <div>
              <div className="eyebrow on-dark" style={{ marginBottom: 28 }}>Yacht rental Dubai · Est. 2013</div>
              <h1 className="hero-title">
                Cast off into<br/>
                <em>golden hour.</em>
              </h1>
              <p className="hero-sub">
                Ten yachts, two marinas, four languages. Book a cinematic Dubai cruise in minutes —
                or chat to a captain on WhatsApp. Booking made easy.
              </p>
              <div className="hero-cta">
                <button className="btn btn-primary" onClick={onBook}>Book Now <Icon.arrow style={{width:14,height:14}}/></button>
                <a className="btn btn-ghost" href="https://wa.me/971524901269" target="_blank" rel="noopener">WhatsApp</a>
                <button className="btn btn-ghost" onClick={() => goto('destinations')}>Browse routes</button>
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <span className="sun-arc"/>
              <div className="hero-meta" style={{ marginTop: 32, justifyContent: 'flex-end' }}>
                <span>10 yachts</span>
                <span>36 – 118 ft</span>
                <span>Dubai Marina · Harbour</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* BOOKING STRIP */}
      <div className="wrap" style={{ position: 'relative', zIndex: 5 }}>
        <BookingStrip onSubmit={onBook}/>
      </div>

      {/* FLEET TEASER with tabs */}
      <section className="section section-paper">
        <div className="wrap">
          <div className="section-head">
            <div className="eyebrow">01 · The Fleet</div>
            <h2>Ten boats, every occasion —<br/><em style={{fontStyle:'italic', color:'var(--mute)'}}>from a 36-ft Silver Craft to a 118-ft mega.</em></h2>
            <div className="section-head-right">All yachts registered with the Dubai Marina Yacht Club. Certified crew, three-hour minimum charter, T&Cs apply.</div>
          </div>

          <div className="filter-row">
            <div className="chip" onClick={() => setTab('best')} style={tab==='best'?{background:'var(--navy)',color:'white',borderColor:'var(--navy)'}:{}}>Best Sellers</div>
            <div className="chip" onClick={() => setTab('premium')} style={tab==='premium'?{background:'var(--navy)',color:'white',borderColor:'var(--navy)'}:{}}>Premium</div>
            <div className="chip" onClick={() => setTab('all')} style={tab==='all'?{background:'var(--navy)',color:'white',borderColor:'var(--navy)'}:{}}>All</div>
            <div style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--mute)' }}>
              <button onClick={() => goto('fleet')} className="btn btn-sm" style={{ background: 'transparent', border: '1px solid var(--line)', color: 'var(--ink)' }}>
                See all 10 yachts <Icon.arrow style={{width:14,height:14}}/>
              </button>
            </div>
          </div>

          <div className="fleet-grid">
            {fleetTabs[tab].map(y => <YachtCard key={y.slug} y={y} onOpen={(s) => goto('yacht', s)} onBook={onBook}/>)}
          </div>
        </div>
      </section>

      {/* ROUTE IDEAS (the new layer) */}
      <section className="section section-dark">
        <div className="wrap">
          <div className="section-head">
            <div className="eyebrow on-dark">02 · Route ideas — new</div>
            <h2 style={{ color: 'white' }}>
              Six curated cruises<br/>
              <em style={{fontStyle:'italic', color:'var(--gold)'}}>around Dubai's coastline.</em>
            </h2>
            <div className="section-head-right" style={{ color:'rgba(255,255,255,0.65)' }}>
              Pick a route — we match it to the right yacht. From a two-hour JBR sundowner to a four-hour Atlantis loop.
            </div>
          </div>
          <DestinationsGrid goto={goto}/>
        </div>
      </section>

      {/* EXPERIENCES */}
      <section className="section section-paper">
        <div className="wrap">
          <div className="section-head">
            <div className="eyebrow">03 · Experiences</div>
            <h2>Memorable occasions,<br/><em style={{fontStyle:'italic'}}>handled end-to-end.</em></h2>
            <div className="section-head-right">Weddings, anniversary cruises, corporate offsites, night parties, sunset proposals, fishing trips — full event planning by our team.</div>
          </div>
          <div className="exp-grid">
            <div className="exp-card exp-l" style={{ backgroundImage: `url(${EXPERIENCES[0].image})` }} onClick={() => goto('experience', EXPERIENCES[0].slug)}>
              <div className="ec-content">
                <div className="ec-tag">{EXPERIENCES[0].tag}</div>
                <div className="ec-name" style={{ fontSize: 42 }}>{EXPERIENCES[0].name}</div>
              </div>
            </div>
            <div className="exp-card exp-m" style={{ backgroundImage: `url(${EXPERIENCES[1].image})` }} onClick={() => goto('experience', EXPERIENCES[1].slug)}>
              <div className="ec-content"><div className="ec-tag">{EXPERIENCES[1].tag}</div><div className="ec-name">{EXPERIENCES[1].name}</div></div>
            </div>
            <div className="exp-card exp-m" style={{ backgroundImage: `url(${EXPERIENCES[2].image})` }} onClick={() => goto('experience', EXPERIENCES[2].slug)}>
              <div className="ec-content"><div className="ec-tag">{EXPERIENCES[2].tag}</div><div className="ec-name">{EXPERIENCES[2].name}</div></div>
            </div>
            <div className="exp-card exp-s" style={{ backgroundImage: `url(${EXPERIENCES[3].image})` }} onClick={() => goto('experience', EXPERIENCES[3].slug)}>
              <div className="ec-content"><div className="ec-tag">{EXPERIENCES[3].tag}</div><div className="ec-name">{EXPERIENCES[3].name}</div></div>
            </div>
            <div className="exp-card exp-c" style={{ backgroundImage: `url(${EXPERIENCES[4].image})` }} onClick={() => goto('experience', EXPERIENCES[4].slug)}>
              <div className="ec-content"><div className="ec-tag">{EXPERIENCES[4].tag}</div><div className="ec-name">{EXPERIENCES[4].name}</div></div>
            </div>
          </div>
        </div>
      </section>

      {/* WATERSPORTS strip */}
      <section style={{ background: 'var(--noir)', color: 'white' }}>
        <div className="wrap" style={{ padding: '64px 32px 32px' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 32 }}>
            <div>
              <div className="eyebrow on-dark">04 · Water sports add-ons</div>
              <h2 style={{ color: 'white', marginTop: 12 }}>Six ways to make a splash.</h2>
            </div>
            <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, opacity: 0.6, letterSpacing: '0.2em', textTransform: 'uppercase' }}>Add to any charter</div>
          </div>
        </div>
        <div className="ws-strip">
          {WATERSPORTS.map(w => (
            <div className="ws-cell" key={w.n}>
              <div className="ws-num">{w.n}</div>
              <div className="ws-name" style={{ marginTop: 16 }}>{w.name}</div>
              <div className="ws-price">FROM AED {w.from}</div>
            </div>
          ))}
        </div>
      </section>

      {/* WHY US — attributed trust */}
      <section className="section section-paper">
        <div className="wrap">
          <div className="section-head">
            <div className="eyebrow">05 · Why Centaurus</div>
            <h2>A real company,<br/><em style={{fontStyle:'italic'}}>not a reseller.</em></h2>
            <div className="section-head-right">Licensed under Centaurus Passenger Yachts & Boats Rental LLC since 2013. Vessels registered by the Dubai Marina Yacht Club, certified crew on every charter.</div>
          </div>
          <TrustRow/>

          <div className="editorial" style={{ marginTop: 96 }}>
            <div>
              <div className="eyebrow">Guest stories</div>
              <h3 style={{ marginTop: 18, fontSize: 40 }}>Verified reviews — attributed, never merged.</h3>
              <p className="bigtext" style={{ marginTop: 18 }}>
                We attribute every figure to its source. Google reviews live on Google. Tripadvisor on Tripadvisor. We don't average them into a single hero star to look better than we are.
              </p>
            </div>
            <div>
              <div className="review-grid" style={{ gridTemplateColumns: '1fr' }}>
                {REVIEWS.map((r, i) => (
                  <div className="review" key={i}>
                    <div className="review-quote">"{r.quote}"</div>
                    <div className="review-author">
                      <div>
                        <div className="review-stars">{'★'.repeat(r.stars)}</div>
                        <div style={{ marginTop: 4 }}>{r.author}</div>
                      </div>
                      <div className="review-src">{r.src}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section style={{ background: 'var(--navy)', color: 'white', padding: '96px 0' }}>
        <div className="wrap" style={{ display:'grid', gridTemplateColumns:'1fr auto', gap: 48, alignItems:'center' }}>
          <div>
            <div className="eyebrow on-dark">Ready when you are</div>
            <h2 style={{ color: 'white', marginTop: 16, maxWidth: 700 }}>Book online in three minutes. Or send a captain a message.</h2>
          </div>
          <div style={{ display:'flex', gap: 12 }}>
            <button className="btn btn-primary" onClick={onBook}>Book Now</button>
            <a className="btn btn-wa" href="https://wa.me/971524901269" target="_blank" rel="noopener"><Icon.wa style={{width:16,height:16}}/> WhatsApp</a>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ================= FLEET ================= */
function FleetScreen({ goto, onBook }) {
  const { FLEET } = window.CENTAURUS_DATA;
  const [filt, setFilt] = useStateS({ size: 'all', berth: 'all', tag: 'all' });
  const matches = FLEET.filter(y => {
    if (filt.size === 'small' && y.length > 50) return false;
    if (filt.size === 'mid' && (y.length <= 50 || y.length > 80)) return false;
    if (filt.size === 'mega' && y.length <= 80) return false;
    if (filt.berth !== 'all' && !y.berth.toLowerCase().includes(filt.berth)) return false;
    if (filt.tag !== 'all' && y.tag !== filt.tag) return false;
    return true;
  });
  return (
    <main>
      <section style={{ background: 'var(--noir)', color: 'white', paddingTop: 96, paddingBottom: 64, position: 'relative', overflow:'hidden' }}>
        <div className="hero-image" style={{ backgroundImage: 'url(media/yacht-poseidon-118ft-bow-profile.webp)', filter: 'brightness(0.45)' }}/>
        <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
          <div className="eyebrow on-dark">The fleet</div>
          <h1 style={{ marginTop: 18, fontSize: 'clamp(56px, 7vw, 96px)', fontWeight: 300 }}>
            Ten yachts.<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>One captain per cruise.</em>
          </h1>
          <p style={{ maxWidth: 540, marginTop: 28, color: 'rgba(255,255,255,0.75)', fontSize: 16 }}>
            Hourly rates published — three-hour minimum, T&Cs apply. Boarding at Dubai Marina or Dubai Harbour Marina. We confirm the right vessel for your party size, occasion and route.
          </p>
        </div>
      </section>

      <section className="section section-paper" style={{ paddingTop: 64 }}>
        <div className="wrap">
          <div className="filter-row">
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--mute)', marginRight: 12 }}>Size</span>
            {['all','small','mid','mega'].map(s => (
              <div key={s} className={'chip' + (filt.size === s ? ' active' : '')} onClick={() => setFilt({...filt, size: s})}>
                {s === 'all' ? 'All' : s === 'small' ? 'Up to 50 ft' : s === 'mid' ? '50–80 ft' : '80 ft+'}
              </div>
            ))}
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--mute)', marginLeft: 32, marginRight: 12 }}>Boarding</span>
            {[['all','All'],['marina','Marina'],['harbour','Harbour']].map(([v, l]) => (
              <div key={v} className={'chip' + (filt.berth === v ? ' active' : '')} onClick={() => setFilt({...filt, berth: v})}>{l}</div>
            ))}
            <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--mute)', marginLeft: 32, marginRight: 12 }}>Tier</span>
            {[['all','All'],['Best Seller','Best Seller'],['Premium','Premium']].map(([v, l]) => (
              <div key={v} className={'chip' + (filt.tag === v ? ' active' : '')} onClick={() => setFilt({...filt, tag: v})}>{l}</div>
            ))}
            <div style={{ marginLeft: 'auto', fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: 'var(--mute)' }}>
              {matches.length} of {FLEET.length}
            </div>
          </div>

          <div className="fleet-grid">
            {matches.map(y => <YachtCard key={y.slug} y={y} onOpen={(s) => goto('yacht', s)} onBook={onBook}/>)}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ================= YACHT DETAIL (cinematic per-yacht microsite) ================= */
function YachtScreen({ slug, goto, onBook, setLightbox }) {
  const { FLEET, DESTINATIONS } = window.CENTAURUS_DATA;
  const y = FLEET.find(f => f.slug === slug) || FLEET[0];
  const gallery = y.gallery && y.gallery.length ? y.gallery : [y.hero];
  const isPoseidon = y.slug === 'poseidon';
  const related = FLEET.filter(f => f.slug !== y.slug).slice(0, 3);
  const routes = DESTINATIONS.filter(d => d.yachts.includes(y.slug));

  return (
    <main>
      {/* Hero */}
      <section className="detail-hero">
        <div className="hero-image" style={{ backgroundImage: `url(${y.hero})` }}/>
        <div className="detail-hero-content">
          <div className="wrap">
            <div>
              <button className="detail-back" onClick={() => goto('fleet')}><Icon.back style={{width:14,height:14}}/> Back to fleet</button>
              <div className="eyebrow on-dark">{y.tag || y.make} · {y.berth}</div>
              <h1 className="detail-title" style={{ color:'white', marginTop: 16 }}>
                {y.name}<br/>
                <em>{y.length} feet.</em>
              </h1>
            </div>
            <div className="detail-meta-bar">
              <div className="dmb-item"><div className="dmb-label">Length</div><div className="dmb-value">{y.length}<em>′</em></div></div>
              <div className="dmb-item"><div className="dmb-label">Guests</div><div className="dmb-value">{y.guests}</div></div>
              <div className="dmb-item"><div className="dmb-label">From</div><div className="dmb-value"><em>AED</em> {y.rate.toLocaleString()}<small style={{fontSize:14,marginLeft:6,color:'rgba(255,255,255,0.6)'}}>/ hr</small></div></div>
            </div>
          </div>
        </div>
      </section>

      {/* Lede + book card */}
      <section className="section section-paper" style={{ paddingTop: 96 }}>
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1fr', gap: 80, alignItems:'start' }}>
            <div>
              <div className="eyebrow">About</div>
              <p className="lede" style={{ marginTop: 22, fontSize: 32 }}>{y.blurb}</p>
              {y.suited && (
                <div style={{ marginTop: 36 }}>
                  <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--mute)', marginBottom: 14 }}>Good for</div>
                  <div style={{ display:'flex', gap: 8, flexWrap: 'wrap' }}>
                    {y.suited.map(s => <div className="chip" key={s} style={{ cursor:'default' }}>{s}</div>)}
                  </div>
                </div>
              )}
              <div className="divider-arc"/>
              <p className="bigtext" style={{ marginTop: 18, maxWidth: 560 }}>
                Welcome drinks (bubbly, soft drinks, coffee, water) included on every charter. Transfer, canapés and DJ available as add-ons. Three-hour minimum charter · T&Cs apply.
              </p>
            </div>

            <div className="sticky-rail">
              <div className="book-card">
                <div className="eyebrow">Charter from</div>
                <div className="bc-price" style={{ marginTop: 12 }}>
                  AED {y.rate.toLocaleString()}<small style={{ marginLeft: 6 }}>/ hour</small>
                </div>
                <div style={{ fontSize: 12, color: 'var(--mute)', fontFamily: "'IBM Plex Mono', monospace", letterSpacing: '0.1em', marginTop: 6, textTransform: 'uppercase' }}>
                  3-hour minimum · T&Cs apply
                </div>
                {y.flag === 'price-oddity' && (
                  <div style={{ marginTop: 12, padding: '8px 12px', background: 'var(--sand)', fontSize: 11, fontFamily: "'IBM Plex Mono', monospace", color: '#7a5a00', letterSpacing: '0.06em' }}>
                    ⚠ price exceeds 118-ft Poseidon — client to confirm
                  </div>
                )}
                <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <button className="btn btn-primary" onClick={onBook} style={{ justifyContent: 'center' }}>Book Now <Icon.arrow style={{width:14,height:14}}/></button>
                  <button className="btn btn-dark" onClick={onBook} style={{ justifyContent: 'center' }}>Check availability</button>
                  <a className="btn btn-wa" href={`https://wa.me/971524901269?text=Hi%20Centaurus%2C%20interested%20in%20${y.name}`} target="_blank" rel="noopener" style={{ justifyContent:'center' }}><Icon.wa style={{width:16,height:16}}/> WhatsApp captain</a>
                </div>
                <div style={{ marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--line)', fontSize: 12, color: 'var(--mute)' }}>
                  <div style={{ display:'flex', alignItems:'center', gap: 8 }}><Icon.pin style={{ width: 14, height: 14, color: 'var(--navy) ' }}/> {y.berth}</div>
                  <div style={{ marginTop: 8 }}>Payment: Visa · Mastercard · Tabby · Crypto</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Spec sheet — confirmed fields only */}
      {isPoseidon && (
        <section className="section section-dark" style={{ paddingTop: 80, paddingBottom: 80 }}>
          <div className="wrap">
            <div className="section-head" style={{ marginBottom: 40 }}>
              <div className="eyebrow on-dark">Spec sheet</div>
              <h2 style={{ color: 'white' }}>Verified to the line item.</h2>
              <div className="section-head-right" style={{ color:'rgba(255,255,255,0.65)' }}>The full Hatteras 118 spec — captured directly from the official Poseidon page.</div>
            </div>
            <div className="spec-sheet">
              <div className="spec-row"><div className="spec-label">Build</div><div className="spec-val">Hatteras</div></div>
              <div className="spec-row"><div className="spec-label">Length</div><div className="spec-val">118<small>ft</small></div></div>
              <div className="spec-row"><div className="spec-label">Guests</div><div className="spec-val">100</div></div>
              <div className="spec-row"><div className="spec-label">Decks</div><div className="spec-val">2<small>lower + upper</small></div></div>
              <div className="spec-row"><div className="spec-label">Cabins</div><div className="spec-val">4</div></div>
              <div className="spec-row"><div className="spec-label">Crew</div><div className="spec-val">1+4</div></div>
              <div className="spec-row"><div className="spec-label">Galley</div><div className="spec-val" style={{ fontSize: 16, fontFamily: 'Inter' }}>Electric grill · oven · microwave · fridge</div></div>
              <div className="spec-row"><div className="spec-label">Music</div><div className="spec-val" style={{ fontSize: 16, fontFamily: 'Inter' }}>Bluetooth + AUX</div></div>
              <div className="spec-row"><div className="spec-label">Berth</div><div className="spec-val" style={{ fontSize: 16, fontFamily: 'Inter' }}>A-B05 · Dubai Harbour</div></div>
            </div>
            <p style={{ color:'rgba(255,255,255,0.55)', fontSize: 12, marginTop: 24, fontFamily: "'IBM Plex Mono', monospace", letterSpacing: '0.04em' }}>
              ▲ Poseidon's spec is the only one independently verified line-by-line. For other vessels, the team confirms cabins/crew/galley on enquiry.
            </p>
          </div>
        </section>
      )}

      {/* Gallery */}
      <section className="section section-paper" style={{ paddingTop: 96 }}>
        <div className="wrap-wide">
          <div className="section-head" style={{ marginBottom: 36, paddingLeft: 8, paddingRight: 8 }}>
            <div className="eyebrow">On board</div>
            <h2>The yacht, from every angle.</h2>
            <div className="section-head-right">Click any frame to open full-screen.</div>
          </div>
          <div className="gallery-grid">
            {gallery.slice(0, 6).map((g, i) => (
              <div key={i} style={{ backgroundImage: `url(${g})` }} onClick={() => setLightbox(g)}/>
            ))}
            {gallery.length < 6 && Array.from({ length: 6 - gallery.length }).map((_, i) => (
              <div key={'ph'+i} style={{
                background: 'repeating-linear-gradient(45deg, #eaeef1 0 12px, #f4f6f8 12px 24px)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#9aa6b1'
              }}>Hi-res photo · awaited</div>
            ))}
          </div>
        </div>
      </section>

      {/* Routes for this yacht */}
      {routes.length > 0 && (
        <section className="section section-paper" style={{ paddingTop: 64 }}>
          <div className="wrap">
            <div className="section-head" style={{ marginBottom: 36 }}>
              <div className="eyebrow">Routes for {y.name}</div>
              <h2>Pair this yacht with a route.</h2>
              <div className="section-head-right"/>
            </div>
            <div className="destinations-grid">
              {routes.slice(0, 3).map(d => (
                <div key={d.slug} className="dest-card" onClick={() => goto('destination', d.slug)}>
                  <div className="dc-img" style={{ backgroundImage: `url(${d.image})` }}/>
                  <div className="dc-content">
                    <div className="dest-num">Route {d.num}</div>
                    <div className="dest-name">{d.name}</div>
                    <div className="dest-meta"><span>⏱ {d.duration}</span><span>↔ {d.distance}</span></div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Related yachts */}
      <section className="section section-paper" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 36 }}>
            <div className="eyebrow">Related</div>
            <h2>You might also like.</h2>
            <div className="section-head-right"/>
          </div>
          <div className="fleet-grid">
            {related.map(r => <YachtCard key={r.slug} y={r} onOpen={(s) => goto('yacht', s)} onBook={onBook}/>)}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ================= DESTINATIONS GRID (re-used) ================= */
function DestinationsGrid({ goto, limit }) {
  const { DESTINATIONS } = window.CENTAURUS_DATA;
  const list = limit ? DESTINATIONS.slice(0, limit) : DESTINATIONS;
  return (
    <div className="destinations-grid">
      {list.map(d => (
        <div key={d.slug} className="dest-card" onClick={() => goto('destination', d.slug)}>
          <div className="dc-img" style={{ backgroundImage: `url(${d.image})` }}/>
          <div className="dc-content">
            <div className="dest-num">Route {d.num}</div>
            <div className="dest-name">{d.name}</div>
            <div className="dest-meta"><span>⏱ {d.duration}</span><span>↔ {d.distance}</span></div>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { HomeScreen, FleetScreen, YachtScreen, DestinationsGrid });