/* Centaurus Charter — additional screens */
const { useState: useStateE } = React;

/* ================= DESTINATIONS (NEW route ideas layer) ================= */
function DestinationsScreen({ goto, onBook }) {
  return (
    <main>
      <section style={{ background: 'var(--noir)', color: 'white', paddingTop: 120, paddingBottom: 96, position:'relative', overflow:'hidden' }}>
        <div className="hero-image" style={{ backgroundImage: 'url(media/yacht-poseidon-118ft-foredeck-skyline.webp)', filter:'brightness(0.45)' }}/>
        <div className="wrap" style={{ position:'relative', zIndex:2 }}>
          <div className="eyebrow on-dark">New · Route ideas</div>
          <h1 style={{ marginTop: 18, fontSize:'clamp(56px, 7.5vw, 112px)', fontWeight: 300, maxWidth: 1100 }}>
            We don't sell hours.<br/>
            <em style={{ fontStyle:'italic', color:'var(--gold)' }}>We sell a coastline.</em>
          </h1>
          <p style={{ maxWidth: 580, marginTop: 28, color:'rgba(255,255,255,0.78)', fontSize: 17, lineHeight: 1.6 }}>
            Six curated cruises around Dubai's most photogenic landmarks — Burj Al Arab, Atlantis, the Palm, Ain Dubai, JBR. Pick a route; we match the right yacht.
          </p>
        </div>
      </section>

      <section className="section section-paper" style={{ paddingTop: 96 }}>
        <div className="wrap">
          <DestinationsGrid goto={goto}/>
        </div>
      </section>
    </main>
  );
}

/* ================= ONE ROUTE detail ================= */
function DestinationDetailScreen({ slug, goto, onBook }) {
  const { DESTINATIONS, FLEET } = window.CENTAURUS_DATA;
  const d = DESTINATIONS.find(x => x.slug === slug) || DESTINATIONS[0];
  const recommendedYachts = d.yachts.map(s => FLEET.find(y => y.slug === s)).filter(Boolean);
  return (
    <main>
      <section className="detail-hero" style={{ height: '72vh' }}>
        <div className="hero-image" style={{ backgroundImage: `url(${d.image})` }}/>
        <div className="detail-hero-content">
          <div className="wrap">
            <div>
              <button className="detail-back" onClick={() => goto('destinations')}><Icon.back style={{width:14,height:14}}/> All route ideas</button>
              <div className="eyebrow on-dark">Route {d.num} · {d.duration} · {d.distance}</div>
              <h1 className="detail-title" style={{ color:'white', marginTop: 16 }}>
                {d.name.split(' · ')[0]}<br/>
                {d.name.includes(' · ') && <em>{d.name.split(' · ')[1]}.</em>}
              </h1>
            </div>
            <div className="detail-meta-bar">
              <div className="dmb-item"><div className="dmb-label">Duration</div><div className="dmb-value">{d.duration}</div></div>
              <div className="dmb-item"><div className="dmb-label">Distance</div><div className="dmb-value" style={{fontSize:20,fontFamily:'Inter'}}>{d.distance}</div></div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-paper" style={{ paddingTop: 96 }}>
        <div className="wrap">
          <div className="editorial">
            <div>
              <div className="eyebrow">The plan</div>
              <p className="lede" style={{ marginTop: 22 }}>{d.pitch}</p>
              <div className="divider-arc"/>
              <p className="bigtext" style={{ marginTop: 12, maxWidth: 540 }}>
                Every route ends in a Book Now or WhatsApp button. Routes are guidelines — your captain will adjust to wind, traffic and your mood on the day.
              </p>
              <div style={{ display:'flex', gap: 12, marginTop: 32 }}>
                <button className="btn btn-primary" onClick={onBook}>Plan this cruise <Icon.arrow style={{width:14,height:14}}/></button>
                <a className="btn btn-dark" href="https://wa.me/971524901269" target="_blank" rel="noopener">WhatsApp captain</a>
              </div>
            </div>
            <div className="route-plan">
              <h4>Stops · approximate</h4>
              <ul className="route-stops">
                {d.stops.map((s, i) => (
                  <li className="route-stop" key={i}>
                    <div className="stop-n">{s.n}</div>
                    <div className="stop-name">{s.name}</div>
                    <div className="stop-time">{s.t}</div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-paper" style={{ paddingTop: 48 }}>
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 36 }}>
            <div className="eyebrow">Yachts suited to this route</div>
            <h2>Pick a vessel.</h2>
            <div className="section-head-right">Each option is matched to the route's duration and ideal party size.</div>
          </div>
          <div className="fleet-grid">
            {recommendedYachts.slice(0, 3).map(y => <YachtCard key={y.slug} y={y} onOpen={(s) => goto('yacht', s)} onBook={onBook}/>)}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ================= EXPERIENCES screen ================= */
function ExperiencesScreen({ goto, onBook }) {
  const { EXPERIENCES, FLEET } = window.CENTAURUS_DATA;
  return (
    <main>
      <section style={{ background:'var(--noir)', color:'white', paddingTop: 120, paddingBottom: 64, position:'relative', overflow:'hidden' }}>
        <div className="hero-image" style={{ backgroundImage: 'url(media/experience-night-party.webp)', filter:'brightness(0.45)' }}/>
        <div className="wrap" style={{ position:'relative', zIndex:2 }}>
          <div className="eyebrow on-dark">Experiences</div>
          <h1 style={{ marginTop: 18, fontSize:'clamp(56px, 7vw, 96px)', fontWeight: 300 }}>
            Eight occasions,<br/>
            <em style={{fontStyle:'italic', color:'var(--gold)'}}>one captain.</em>
          </h1>
        </div>
      </section>

      <section className="section section-paper">
        <div className="wrap">
          <div className="exp-grid" style={{ gridAutoRows: 280 }}>
            {EXPERIENCES.map((e, i) => (
              <div className={'exp-card ' + (i === 0 ? 'exp-l' : i < 3 ? 'exp-m' : 'exp-s')}
                style={{ backgroundImage: `url(${e.image})` }} key={e.slug} onClick={() => goto('experience', e.slug)}>
                <div className="ec-content">
                  <div className="ec-tag">{e.tag}</div>
                  <div className="ec-name">{e.name}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 96 }}>
            <div className="section-head" style={{ marginBottom: 36 }}>
              <div className="eyebrow">Fishing — published rates</div>
              <h2>4-hour package + VAT.</h2>
              <div className="section-head-right">Equipment included. Catch is grilled on board. Site-stated rates — confirm current with captain.</div>
            </div>
            <div className="spec-sheet" style={{ background: 'white', gridTemplateColumns: 'repeat(5, 1fr)' }}>
              {[
                ['Storm · Thunder', '2,600'],
                ['Riverside', '3,260'],
                ['Vassia · Etosha', '4,600'],
                ['Lagoona · Silver Creek', '5,000'],
                ['Kronos', '15,200'],
              ].map(([n, p]) => (
                <div className="spec-row" key={n} style={{ borderRight: '1px solid var(--line)', borderBottom: 0 }}>
                  <div className="spec-label">{n}</div>
                  <div className="spec-val" style={{ fontSize: 26 }}>AED {p}</div>
                  <div style={{ fontFamily:"'IBM Plex Mono', monospace", fontSize: 10, letterSpacing:'0.12em', color:'var(--mute)', marginTop: 4, textTransform: 'uppercase' }}>4 hr + VAT</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ================= WATERSPORTS screen ================= */
function WatersportsScreen({ goto, onBook }) {
  const { WATERSPORTS } = window.CENTAURUS_DATA;
  return (
    <main>
      <section style={{ background:'var(--noir)', color:'white', paddingTop: 120, paddingBottom: 64, position:'relative', overflow:'hidden' }}>
        <div className="hero-image" style={{ backgroundImage: 'url(media/yacht-silver-creek-61ft-flybridge.webp)', filter:'brightness(0.42)' }}/>
        <div className="wrap" style={{ position:'relative', zIndex:2 }}>
          <div className="eyebrow on-dark">Add-ons</div>
          <h1 style={{ marginTop: 18, fontSize:'clamp(56px, 7vw, 96px)', fontWeight: 300 }}>
            Six ways<br/>
            <em style={{fontStyle:'italic', color:'var(--gold)'}}>to make a splash.</em>
          </h1>
          <p style={{ maxWidth: 540, marginTop: 28, color:'rgba(255,255,255,0.78)', fontSize: 16 }}>
            Add any of these to a charter. Prices shown are starting from — your captain quotes the day-rate at booking.
          </p>
        </div>
      </section>

      <section className="section section-paper">
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 24 }}>
            {WATERSPORTS.map(w => (
              <div key={w.n} style={{ background:'white', border:'1px solid var(--line)', padding: 36, position:'relative', overflow:'hidden' }}>
                <div style={{ fontFamily:"'IBM Plex Mono', monospace", fontSize: 11, letterSpacing:'0.18em', color:'var(--mute)' }}>Activity {w.n}</div>
                <div style={{ fontFamily:"'Cormorant Garamond', serif", fontSize: 48, lineHeight: 1, marginTop: 12 }}>{w.name}</div>
                <div className="divider-arc"/>
                <div style={{ fontFamily:"'IBM Plex Mono', monospace", fontSize: 12, letterSpacing:'0.08em', color: 'var(--mute)', marginTop: 8 }}>FROM</div>
                <div style={{ fontFamily:"'Cormorant Garamond', serif", fontSize: 40, color: 'var(--navy)' }}>AED {w.from}</div>
                <button className="btn btn-primary btn-sm" onClick={onBook} style={{ marginTop: 24 }}>Add to charter</button>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ================= ABOUT ================= */
function AboutScreen() {
  return (
    <main>
      <section style={{ background:'var(--noir)', color:'white', paddingTop: 120, paddingBottom: 96, position:'relative', overflow:'hidden' }}>
        <div className="hero-image" style={{ backgroundImage:'url(media/yacht-poseidon-118ft-sailing.webp)', filter:'brightness(0.4)' }}/>
        <div className="wrap" style={{ position:'relative', zIndex:2 }}>
          <div className="eyebrow on-dark">About</div>
          <h1 style={{ marginTop: 18, fontSize:'clamp(56px, 7vw, 96px)', fontWeight: 300, maxWidth: 1100 }}>
            A Dubai-licensed<br/>
            <em style={{fontStyle:'italic', color:'var(--gold)'}}>charter, since 2013.</em>
          </h1>
        </div>
      </section>

      <section className="section section-paper">
        <div className="wrap">
          <div className="editorial">
            <div>
              <div className="eyebrow">The company</div>
              <p className="lede" style={{ marginTop: 22 }}>
                Centaurus Passenger Yachts & Boats Rental L.L.C has been chartering Dubai's coastline since 2013. Our vessels are registered with the Dubai Marina Yacht Club; our crews are certified by the maritime authority.
              </p>
              <p className="bigtext" style={{ marginTop: 18, maxWidth: 540 }}>
                We board guests at two marinas — Dubai Marina and Dubai Harbour Marina — while our back-office is in Dubai Production City (IMPZ). The two are not the same place; the boarding marina is always confirmed with you before the day.
              </p>
              <p className="bigtext" style={{ marginTop: 14, maxWidth: 540 }}>
                <strong style={{color:'var(--ink)'}}>Centaurus International</strong> is an Official Partner — not a parent company. We don't merge their fleet or numbers into ours.
              </p>
            </div>
            <div>
              <div className="spec-sheet" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
                <div className="spec-row" style={{ borderRight: '1px solid var(--line)' }}><div className="spec-label">Established</div><div className="spec-val">2013</div></div>
                <div className="spec-row"><div className="spec-label">Fleet</div><div className="spec-val">10<small>yachts</small></div></div>
                <div className="spec-row" style={{ borderRight: '1px solid var(--line)' }}><div className="spec-label">Range</div><div className="spec-val">36–118<small>ft</small></div></div>
                <div className="spec-row"><div className="spec-label">Languages</div><div className="spec-val" style={{ fontSize: 20, fontFamily: 'Inter' }}>EN · AR · RU · ZH</div></div>
                <div className="spec-row" style={{ borderRight: '1px solid var(--line)', borderBottom: 0 }}><div className="spec-label">Boarding</div><div className="spec-val" style={{ fontSize: 18, fontFamily: 'Inter' }}>Marina · Harbour</div></div>
                <div className="spec-row" style={{ borderBottom: 0 }}><div className="spec-label">Registered</div><div className="spec-val" style={{ fontSize: 18, fontFamily: 'Inter' }}>DMYC</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-sand">
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 48 }}>
            <div className="eyebrow">Why guests come back</div>
            <h2>Six promises.</h2>
            <div className="section-head-right">From the live site — every yacht, every season.</div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 4, background: 'var(--line)' }}>
            {[
              ['Luxury experience', 'Hatteras, Majesty, Azimut — names that lead the marina.'],
              ['Fleet of yachts', '10 vessels from 36 to 118 ft. Always the right boat.'],
              ['Certified crew', 'Maritime-authority-certified captains on every charter.'],
              ['Quality service', 'Welcome drinks on every yacht; concierge for celebrations.'],
              ['Outstanding support', 'WhatsApp + phone + app — pre-cruise and on-board.'],
              ['Multilingual staff', 'English, Arabic, Russian, Chinese — desks per locale.'],
            ].map(([t, d], i) => (
              <div key={t} style={{ background:'white', padding: 36 }}>
                <div style={{ fontFamily:"'IBM Plex Mono', monospace", fontSize: 10, letterSpacing:'0.18em', color:'var(--gold)' }}>0{i+1}</div>
                <div style={{ fontFamily:"'Cormorant Garamond', serif", fontSize: 28, marginTop: 12, lineHeight: 1.1 }}>{t}</div>
                <p style={{ fontSize: 14, color:'var(--mute)', marginTop: 12, lineHeight: 1.6 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ================= CONTACT ================= */
function ContactScreen({ onBook }) {
  return (
    <main>
      <section style={{ background:'var(--noir)', color:'white', paddingTop: 120, paddingBottom: 64, position:'relative', overflow:'hidden' }}>
        <div className="hero-image" style={{ backgroundImage:'url(media/yacht-dionysos-77ft-bow-marina.webp)', filter:'brightness(0.5)' }}/>
        <div className="wrap" style={{ position:'relative', zIndex:2 }}>
          <div className="eyebrow on-dark">Contact</div>
          <h1 style={{ marginTop: 18, fontSize:'clamp(48px, 6vw, 84px)', fontWeight: 300 }}>
            Where you board.<br/>
            <em style={{ fontStyle:'italic', color: 'var(--gold)' }}>Where we're registered.</em>
          </h1>
        </div>
      </section>

      <section className="section section-paper">
        <div className="wrap">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 24 }}>
            <div style={{ background:'white', border:'1px solid var(--line)', padding: 32 }}>
              <div className="eyebrow">Boarding · primary</div>
              <h3 style={{ marginTop: 14, fontSize: 28 }}>Dubai Marina</h3>
              <p style={{ color:'var(--mute)', marginTop: 8, fontSize: 14 }}>Marina Walk, near Spinneys. Most charters depart here.</p>
              <div className="divider-arc"/>
              <p style={{ fontSize: 13, color:'var(--ink)' }}>~25.077, 55.139</p>
              <p style={{ fontSize: 12, color:'var(--mute)', marginTop:8, fontStyle:'italic' }}>per-berth pin confirmed at booking</p>
            </div>
            <div style={{ background:'white', border:'1px solid var(--line)', padding: 32 }}>
              <div className="eyebrow">Boarding · premium</div>
              <h3 style={{ marginTop: 14, fontSize: 28 }}>Dubai Harbour</h3>
              <p style={{ color:'var(--mute)', marginTop: 8, fontSize: 14 }}>Poseidon, Storm, Kronos, Dionysos, Riverside. Poseidon at A-B05.</p>
              <div className="divider-arc"/>
              <p style={{ fontSize: 13, color:'var(--ink)' }}>~25.090, 55.142</p>
              <p style={{ fontSize: 12, color:'var(--mute)', marginTop:8, fontStyle:'italic' }}>per-berth pin confirmed at booking</p>
            </div>
            <div style={{ background:'var(--sand)', padding: 32, border: '1px solid var(--line)' }}>
              <div className="eyebrow">Back office — not a boarding point</div>
              <h3 style={{ marginTop: 14, fontSize: 28 }}>Galadari Bldg.17</h3>
              <p style={{ color:'var(--mute)', marginTop: 8, fontSize: 14 }}>Office 402, Dubai Production City (IMPZ). Visit by appointment only.</p>
              <div className="divider-arc"/>
              <p style={{ fontSize: 12, color:'#9a6c00', fontStyle:'italic' }}>⚠ Guests do NOT board here.</p>
            </div>
          </div>

          <div style={{ marginTop: 96, display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 64, alignItems:'start' }}>
            <div>
              <div className="eyebrow">One booking line</div>
              <h2 style={{ marginTop: 18, fontSize: 56 }}>Talk to a captain.</h2>
              <p className="bigtext" style={{ marginTop: 20, maxWidth: 420 }}>
                One primary booking line. We don't surface six numbers and hope you pick the right one.
              </p>
              <div style={{ marginTop: 36, display:'flex', flexDirection:'column', gap: 20 }}>
                <div>
                  <div style={{ fontFamily:"'IBM Plex Mono', monospace", fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--mute)' }}>WhatsApp</div>
                  <a href="https://wa.me/971524901269" style={{ fontFamily:"'Cormorant Garamond', serif", fontSize: 32, color: 'var(--navy)', textDecoration:'none' }}>+971 52 490 1269</a>
                </div>
                <div>
                  <div style={{ fontFamily:"'IBM Plex Mono', monospace", fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--mute)' }}>Office</div>
                  <a href="tel:+97143521833" style={{ fontFamily:"'Cormorant Garamond', serif", fontSize: 32, color: 'var(--navy)', textDecoration:'none' }}>+971 4 352 1833</a>
                </div>
                <div>
                  <div style={{ fontFamily:"'IBM Plex Mono', monospace", fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--mute)' }}>Email</div>
                  <a href="mailto:info@centauruscharter.com" style={{ fontFamily:"'Cormorant Garamond', serif", fontSize: 22, color: 'var(--navy)', textDecoration:'none' }}>info@centauruscharter.com</a>
                </div>
              </div>
            </div>
            <form style={{ background:'white', border:'1px solid var(--line)', padding: 40 }} onSubmit={(e) => { e.preventDefault(); onBook(); }}>
              <div className="eyebrow">Enquire</div>
              <h3 style={{ marginTop: 12, fontSize: 32, marginBottom: 24 }}>Tell us what you're planning.</h3>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16 }}>
                <div className="field"><label>Name</label><input type="text" placeholder="Your name"/></div>
                <div className="field"><label>Mobile</label><input type="tel" placeholder="+971…"/></div>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16 }}>
                <div className="field"><label>Date</label><input type="date"/></div>
                <div className="field"><label>Guests</label><input type="number" defaultValue="8"/></div>
              </div>
              <div className="field"><label>Occasion</label>
                <select><option>Sunset cruise</option><option>Birthday</option><option>Wedding</option><option>Corporate</option><option>Fishing</option><option>Anniversary</option><option>Other</option></select>
              </div>
              <div className="field"><label>Notes</label><textarea rows="4" placeholder="Anything we should know?"/></div>
              <div style={{ display:'flex', gap: 10, marginTop: 8 }}>
                <button type="submit" className="btn btn-primary" style={{ flex: 1, justifyContent:'center' }}>Send enquiry</button>
                <a className="btn btn-wa" href="https://wa.me/971524901269" target="_blank" rel="noopener"><Icon.wa style={{width:14,height:14}}/></a>
              </div>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ================= EXPERIENCE DETAIL ================= */
function ExperienceDetailScreen({ slug, goto, onBook }) {
  const { EXPERIENCES, FLEET } = window.CENTAURUS_DATA;
  const e = EXPERIENCES.find(x => x.slug === slug) || EXPERIENCES[0];
  return (
    <main>
      <section className="detail-hero">
        <div className="hero-image" style={{ backgroundImage: `url(${e.image})` }}/>
        <div className="detail-hero-content">
          <div className="wrap">
            <div>
              <button className="detail-back" onClick={() => goto('experiences')}><Icon.back style={{width:14,height:14}}/> All experiences</button>
              <div className="eyebrow on-dark">{e.tag}</div>
              <h1 className="detail-title" style={{ color:'white', marginTop: 16 }}>
                {e.name}<br/>
                <em>by Centaurus.</em>
              </h1>
            </div>
            <div style={{ display:'flex', gap: 12 }}>
              <button className="btn btn-primary" onClick={onBook}>Book this experience</button>
              <a className="btn btn-wa" href="https://wa.me/971524901269" target="_blank" rel="noopener"><Icon.wa style={{width:16,height:16}}/> Chat</a>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-paper">
        <div className="wrap">
          <div className="editorial">
            <div>
              <div className="eyebrow">What's included</div>
              <ul className="inc-list" style={{ marginTop: 20 }}>
                {['Captain + certified crew', 'Welcome drinks (bubbly, soft, coffee, water)', 'Dedicated event planner', 'Two boarding marinas',
                  'Music: Bluetooth + AUX', 'Multilingual desk EN/AR/RU/ZH',
                  e.slug === 'wedding' ? 'Floral arrangements' : 'Photo-ready cruise route',
                  e.slug === 'fishing' ? 'Equipment + onboard grilling' : 'Custom playlist support',
                ].map(t => <li key={t}><Icon.check/>{t}</li>)}
              </ul>
            </div>
            <div>
              <div className="eyebrow">The mood</div>
              <p className="lede" style={{ marginTop: 20 }}>
                We don't run a stopwatch — we run an evening. From cast off to the final toast, your captain matches pace to your party.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-paper" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <div className="eyebrow">Yachts most-booked for this</div>
            <h2>Best matched vessels.</h2>
            <div className="section-head-right"/>
          </div>
          <div className="fleet-grid">
            {FLEET.slice(0, 3).map(y => <YachtCard key={y.slug} y={y} onOpen={(s) => goto('yacht', s)} onBook={onBook}/>)}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { DestinationsScreen, DestinationDetailScreen, ExperiencesScreen, WatersportsScreen, AboutScreen, ContactScreen, ExperienceDetailScreen });