// === Seven Yachts — Per-yacht microsite ===

function YachtPage({ slug, setRoute, openBooking, favs, toggleFav, showRates }) {
  const y = findYacht(slug);
  if (!y) return <div style={{ padding: 200, textAlign: 'center' }}>Yacht not found</div>;
  const isFav = favs.includes(y.slug);
  const related = FLEET.filter(f => f.slug !== y.slug).slice(0, 3);

  return (
    <div>
      {/* Cinematic hero */}
      <section className="yacht-hero">
        <div className="bg">
          <img src={y.hero} alt={`${y.name} hero`} />
        </div>
        <div className="yacht-hero-inner container">
          <div className="yacht-breadcrumb">
            <a onClick={() => setRoute({ name: 'home' })} style={{ cursor: 'pointer' }}>Seven Yachts</a> ·
            <a onClick={() => setRoute({ name: 'fleet' })} style={{ cursor: 'pointer', margin: '0 4px' }}> Fleet</a> ·
            <span style={{ color: 'var(--gold)', marginLeft: 4 }}>{y.name}</span>
          </div>
          <div className="yacht-hero-foot">
            <div>
              <div className="eyebrow on-dark" style={{ marginBottom: 14 }}>
                {y.builder} · {y.length}ft
              </div>
              <h1 className="yacht-title h1">{y.name}</h1>
              {y.tagline && <p className="yacht-tagline">— {y.tagline}</p>}
            </div>
            <div>
              <div className="yacht-quickspec">
                <div className="qs">
                  <div className="qs-label">Length</div>
                  <div className="qs-value">{y.length}<span style={{fontSize: 14, opacity: 0.7, marginLeft: 4 }}>ft</span></div>
                </div>
                {y.cruisingGuests ? (
                  <div className="qs">
                    <div className="qs-label">Cruising</div>
                    <div className="qs-value">{y.cruisingGuests}<span style={{fontSize: 14, opacity: 0.7, marginLeft: 4 }}>guests</span></div>
                  </div>
                ) : (
                  <div className="qs">
                    <div className="qs-label">Cruising</div>
                    <div className="qs-value" style={{fontSize: 16, color: 'var(--gold)'}}>On request</div>
                  </div>
                )}
                {y.overnightGuests ? (
                  <div className="qs">
                    <div className="qs-label">Overnight</div>
                    <div className="qs-value">{y.overnightGuests}<span style={{fontSize: 14, opacity: 0.7, marginLeft: 4 }}>guests</span></div>
                  </div>
                ) : (
                  <div className="qs">
                    <div className="qs-label">Overnight</div>
                    <div className="qs-value" style={{fontSize: 16, color: 'var(--gold)'}}>On request</div>
                  </div>
                )}
                <div className="qs">
                  <div className="qs-label">Min charter</div>
                  <div className="qs-value">{y.minCharter || '— hr'}</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
                <button className="btn btn-lg btn-primary" onClick={() => openBooking({ yacht: y.slug })}>
                  Check Availability
                </button>
                <a className="btn btn-lg btn-wa" href={waLink(`Hello Seven Yachts, I'd like to enquire about ${y.name} (${y.builder} ${y.length}ft) — please share availability and rate.`)}>
                  <Icon name="whatsapp" size={16} /> WhatsApp
                </a>
                <button
                  className={`btn btn-lg btn-ghost-light ${isFav ? 'active' : ''}`}
                  onClick={() => toggleFav(y.slug)}
                  style={isFav ? { borderColor: 'var(--gold)', color: 'var(--gold)' } : {}}
                >
                  <Icon name={isFav ? 'heart-fill' : 'heart'} size={14} />
                  {isFav ? 'Saved' : 'Save'}
                </button>
              </div>
              {showRates && y.fromHourly && (
                <div style={{ marginTop: 20, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--gold)', letterSpacing: '0.05em' }}>
                  from AED {fmtAED(y.fromHourly)}/hr {y.fromDaily ? `· AED ${fmtAED(y.fromDaily)}/day` : ''} <span style={{opacity:0.6}}>· indicative — confirm a live rate card</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <div className="yacht-body">
        {/* Intro — drop cap */}
        <section className="yacht-section">
          <div className="container">
            <div className="yacht-intro">
              <div>
                <div className="eyebrow">The Vessel</div>
                <h2 className="h2" style={{ marginTop: 8 }}>{y.builder}.<br/>{y.length} feet.<br/><em style={{ color: 'var(--marine)', fontStyle: 'italic' }}>Quietly definitive.</em></h2>
              </div>
              <div className="col-text">
                {y.description ? (
                  <p>{y.description}</p>
                ) : (
                  <p>{y.name} is a {y.builder} of {y.length} feet, part of our active charter fleet at Dubai Harbour. Full specifications — guest capacity, cabin configuration, crew — are confirmed at the time of enquiry. Speak with our concierge for a tailored proposal.</p>
                )}
                <p style={{ color: 'var(--muted)' }}>
                  Built by one of yachting's most considered houses, {y.name} is maintained under our in-house yacht-management programme — fresh paint, fresh linens, fresh crew rotation. Berthed at DA37–DA41 and ready for departure within hours of confirmation.
                </p>
                <div style={{ marginTop: 28, display: 'flex', gap: 24, flexWrap: 'wrap', fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted)' }}>
                  <span>◇ Private boarding</span>
                  <span>◇ European crew</span>
                  <span>◇ Yacht-wide Wi-Fi</span>
                  <span>◇ Climate-controlled salon</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Gallery */}
        <section className="yacht-section alt" style={{ paddingTop: 80 }}>
          <div className="container">
            <div className="section-header">
              <div>
                <div className="eyebrow">Gallery</div>
                <h2 className="h2" style={{ marginTop: 8 }}>Decks, salon, master.</h2>
              </div>
              <p className="lead">A working preview. The client will replace these with hi-res cinematic stills and a 60-second hero film at handover.</p>
            </div>
            <div className="gallery">
              {y.gallery && y.gallery.length >= 3 ? (
                <>
                  <div className="gal-item gal-span-7"><img src={y.gallery[0].src} alt={y.gallery[0].caption} loading="lazy"/></div>
                  <div className="gal-item gal-span-5"><img src={y.gallery[1].src} alt={y.gallery[1].caption} loading="lazy"/></div>
                  <div className="gal-item gal-span-12"><img src={y.gallery[2].src} alt={y.gallery[2].caption} loading="lazy"/></div>
                </>
              ) : y.gallery && y.gallery.length === 2 ? (
                <>
                  <div className="gal-item gal-span-7"><img src={y.gallery[0].src} alt={y.gallery[0].caption} loading="lazy"/></div>
                  <div className="gal-item gal-span-5"><img src={y.gallery[1].src} alt={y.gallery[1].caption} loading="lazy"/></div>
                </>
              ) : (
                <div className="gal-item gal-span-12"><img src={y.hero} alt={y.name} loading="lazy"/></div>
              )}
            </div>
          </div>
        </section>

        {/* Spec + amenities */}
        <section className="yacht-section dark">
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }} className="spec-layout">
              <div>
                <div className="eyebrow on-dark">Specification</div>
                <h2 className="h2" style={{ marginTop: 8, color: 'var(--paper)' }}>The numbers.</h2>
                <p style={{ color: 'rgba(247,250,251,0.6)', maxWidth: '36ch', marginTop: 16 }}>
                  Confirmed fields shown verbatim. Where the client has not yet supplied a value, we render <em>on request</em> rather than guess — never invent.
                </p>
              </div>
              <div className="spec-grid" style={{ gridTemplateColumns: '1fr' }}>
                <div className="spec-row"><span className="spec-key">Builder</span><span className="spec-val">{y.builder}</span></div>
                <div className="spec-row"><span className="spec-key">Length</span><span className="spec-val">{y.length} ft {y.lengthNote && <span style={{fontSize: 12, color: 'var(--gold)', fontFamily: 'var(--mono)', display: 'block', marginTop: 4}}>{y.lengthNote}</span>}</span></div>
                <div className="spec-row"><span className="spec-key">Cruising guests</span><span className="spec-val">{y.cruisingGuests || <span style={{color:'var(--gold)', fontSize: 16, fontFamily: 'var(--mono)'}}>On request</span>}</span></div>
                <div className="spec-row"><span className="spec-key">Overnight guests</span><span className="spec-val">{y.overnightGuests || <span style={{color:'var(--gold)', fontSize: 16, fontFamily: 'var(--mono)'}}>On request</span>}</span></div>
                <div className="spec-row"><span className="spec-key">Cabins</span><span className="spec-val">{y.cabins || <span style={{color:'var(--gold)', fontSize: 16, fontFamily: 'var(--mono)'}}>On request</span>}</span></div>
                <div className="spec-row"><span className="spec-key">Crew nationalities</span><span className="spec-val" style={{ fontSize: 18 }}>{y.crew || <span style={{color:'var(--gold)', fontSize: 16, fontFamily: 'var(--mono)'}}>On request</span>}</span></div>
                <div className="spec-row"><span className="spec-key">Minimum charter</span><span className="spec-val">{y.minCharter || <span style={{color:'var(--gold)', fontSize: 16, fontFamily: 'var(--mono)'}}>On request</span>}</span></div>
                <div className="spec-row"><span className="spec-key">Year built</span><span className="spec-val" style={{color:'var(--gold)', fontSize: 16, fontFamily: 'var(--mono)'}}>On request</span></div>
                {showRates && y.fromHourly && (
                  <div className="spec-row confirm"><span className="spec-key">From rate</span><span className="spec-val">AED {fmtAED(y.fromHourly)} / hr{y.fromDaily ? ` · ${fmtAED(y.fromDaily)} / day` : ''}</span></div>
                )}
              </div>
            </div>
          </div>
        </section>

        {/* Amenities */}
        {y.amenities && y.amenities.length > 0 && (
          <section className="yacht-section">
            <div className="container">
              <div className="section-header">
                <div>
                  <div className="eyebrow">On Board</div>
                  <h2 className="h2" style={{ marginTop: 8 }}>What's included.</h2>
                </div>
                <p className="lead">A working list from the live listing. The client will sign off the final inventory at handover.</p>
              </div>
              <div className="amenities">
                {y.amenities.map((a, i) => (
                  <div className="amenity" key={i}>
                    <div className="amenity-icon">
                      <Icon name={['sparkle','users','compass','shield','sparkle','users'][i % 6]} size={28} />
                    </div>
                    <h4>{a.title}</h4>
                    <p>{a.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>
        )}

        {/* Booking band */}
        <section className="yacht-section alt" style={{ paddingTop: 80, paddingBottom: 80 }}>
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }} className="book-band">
              <div>
                <div className="eyebrow">Check Availability</div>
                <h2 className="h2" style={{ marginTop: 8 }}>Pick a date.<br/>We'll WhatsApp you back<br/><em style={{ fontStyle: 'italic', color: 'var(--marine)' }}>within the hour.</em></h2>
                <p className="lead" style={{ marginTop: 16, color: 'var(--ink2)' }}>
                  No live calendar yet — every enquiry is hand-confirmed by the concierge desk against the live fleet schedule. Faster than it sounds.
                </p>
              </div>
              <AvailabilityWidget defaultYacht={y.slug} onSubmit={(d) => openBooking({ ...d, yacht: y.slug })} />
            </div>
          </div>
        </section>

        {/* Related */}
        <section className="yacht-section">
          <div className="container">
            <div className="section-header">
              <div>
                <div className="eyebrow">Also in the Fleet</div>
                <h2 className="h2" style={{ marginTop: 8 }}>Related yachts.</h2>
              </div>
              <p className="lead">Comparable in length, builder or temperament.</p>
            </div>
            <div className="related-grid">
              {related.map(r => (
                <YachtCard key={r.slug} yacht={r} layout="wide" fav={favs.includes(r.slug)} toggleFav={toggleFav} onSelect={(s) => { setRoute({ name: 'yacht', slug: s }); window.scrollTo(0,0); }} showRates={showRates} />
              ))}
            </div>
          </div>
        </section>
      </div>

      <Footer />
    </div>
  );
}
window.YachtPage = YachtPage;