// === Seven Yachts — Home ===

function Hero({ lead, openBooking, setRoute, heroMode }) {
  const titles = {
    en: { tag: 'Experience The Ultimate Luxury.', t1: 'Your private', t2: 'yacht,', t3: 'your way.', sub: 'Cinematic charters from Dubai Harbour. A fleet of seventeen vessels — Sunseeker, Princess, Azimut, Benetti — and a concierge crew that disappears when you want to be alone.' },
    ar: { tag: 'اختبر الفخامة المطلقة.', t1: 'يختك', t2: 'الخاص،', t3: 'بطريقتك.', sub: 'رحلات بحرية فاخرة من ميناء دبي. أسطول مكوّن من سبعة عشر يختاً — صنّاع عالميون، طاقم أوروبي مدرب.' },
    ru: { tag: 'Высшая роскошь.', t1: 'Ваша яхта,', t2: 'ваш', t3: 'маршрут.', sub: 'Кинематографичные чартеры из гавани Дубая. Семнадцать яхт. Европейский экипаж. Конфиденциальный сервис.' },
    zh: { tag: '尊享至臻奢华。', t1: '您的', t2: '私人游艇,', t3: '随心所至.', sub: '从迪拜港启航的电影级游艇租赁。十七艘游艇,欧洲船员,私密管家服务。' },
  };
  const tt = titles[lead.lang] || titles.en;

  return (
    <section className="hero">
      <div className={`hero-media ${heroMode === 'still' ? 'still' : ''}`}>
        <img src={lead.hero} alt={`${lead.name} — featured`} />
      </div>
      <div className="hero-content container">
        <div className="hero-grid">
          <div>
            <div className="hero-meta">
              <span>FEATURED · {lead.name.toUpperCase()}</span>
              <span className="dot"></span>
              <span>{lead.builder.toUpperCase()} {lead.length}FT</span>
              <span className="dot"></span>
              <span>DUBAI HARBOUR</span>
            </div>
            <h1 className="hero-title h1">
              {tt.t1}<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>{tt.t2}</em><br/>
              {tt.t3}
            </h1>
            <p className="hero-tagline">— {tt.tag}</p>
            <p className="hero-sub">{tt.sub}</p>
            <div className="hero-ctas">
              <button className="btn btn-lg btn-primary" onClick={() => openBooking()}>
                Check Availability <Icon name="arrow" size={14} />
              </button>
              <a className="btn btn-lg btn-wa" href={waLink()} target="_blank" rel="noopener">
                <Icon name="whatsapp" size={16} /> WhatsApp Concierge
              </a>
              <button className="btn btn-lg btn-ghost-light" onClick={() => setRoute({ name: 'fleet' })}>
                Browse Fleet
              </button>
            </div>
          </div>
          <div className="hero-card">
            <h4>The Featured Vessel</h4>
            <h3 style={{ fontFamily: 'var(--display)', fontSize: 42, margin: '0 0 6px', color: 'var(--paper)', fontWeight: 400 }}>{lead.name}</h3>
            <p style={{ fontStyle: 'italic', fontFamily: 'var(--display)', fontSize: 17, color: 'var(--gold)', margin: '0 0 18px' }}>{lead.tagline}</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(247,250,251,0.85)' }}>
              <div><div style={{opacity:0.6, fontSize: 10, letterSpacing: '0.15em'}}>BUILDER</div><div style={{marginTop:4}}>{lead.builder}</div></div>
              <div><div style={{opacity:0.6, fontSize: 10, letterSpacing: '0.15em'}}>LENGTH</div><div style={{marginTop:4}}>{lead.length} ft</div></div>
              {lead.cruisingGuests && (
                <>
                <div><div style={{opacity:0.6, fontSize: 10, letterSpacing: '0.15em'}}>CRUISING</div><div style={{marginTop:4}}>{lead.cruisingGuests} guests</div></div>
                <div><div style={{opacity:0.6, fontSize: 10, letterSpacing: '0.15em'}}>OVERNIGHT</div><div style={{marginTop:4}}>{lead.overnightGuests} guests</div></div>
                </>
              )}
            </div>
            <div style={{ marginTop: 20, borderTop: '1px solid rgba(247,250,251,0.18)', paddingTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--gold)', letterSpacing: '0.05em' }}>
                from AED {fmtAED(lead.fromHourly)}/hr
              </span>
              <button className="btn btn-sm btn-ghost-light" onClick={() => setRoute({ name: 'yacht', slug: lead.slug })}>
                Open microsite <Icon name="arrow-up-right" size={12} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;


function Home({ setRoute, favs, toggleFav, openBooking, lang, showRates, heroMode }) {
  const lead = findYacht('lucien');
  lead.lang = lang;

  // Editorial featured grid (3 cards: big + 2 small)
  const featured = ['lucien', 'suffuriya', 'santorini', 'sky-fall'].map(findYacht);

  return (
    <div>
      <Hero lead={lead} openBooking={openBooking} setRoute={setRoute} heroMode={heroMode} />

      <FleetMarquee />

      {/* Availability strip */}
      <section style={{ background: 'var(--ink)', padding: '40px 0' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 32, alignItems: 'center' }}>
            <div>
              <div className="eyebrow on-dark">Plan in 30 seconds</div>
              <h3 style={{ color: 'var(--paper)', fontFamily: 'var(--display)', fontSize: 28, margin: '6px 0 0', fontWeight: 400 }}>
                Check availability — we'll WhatsApp you back.
              </h3>
            </div>
            <AvailabilityWidget onSubmit={(d) => openBooking({ ...d, source: 'home' })} />
          </div>
        </div>
      </section>

      {/* Featured fleet — editorial grid */}
      <section className="section">
        <div className="container">
          <div className="section-header">
            <div>
              <div className="eyebrow">Selected Fleet · Seventeen vessels</div>
              <h2 className="h2" style={{ marginTop: 8 }}>A fleet curated, not catalogued.</h2>
            </div>
            <p className="lead">From an intimate 70ft Sunseeker for sunset to a 200ft Benetti for a board offsite, each vessel is owned or under exclusive management — every spec verified, every crew known by name.</p>
          </div>

          <div className="feature-grid">
            <div className="fc-span-7">
              <YachtCard yacht={featured[0]} layout="wide" fav={favs.includes(featured[0].slug)} toggleFav={toggleFav} onSelect={(s) => setRoute({ name: 'yacht', slug: s })} showRates={showRates} />
            </div>
            <div className="fc-span-5">
              <YachtCard yacht={featured[1]} layout="tall" fav={favs.includes(featured[1].slug)} toggleFav={toggleFav} onSelect={(s) => setRoute({ name: 'yacht', slug: s })} showRates={showRates} />
            </div>
            <div className="fc-span-5">
              <YachtCard yacht={featured[2]} layout="tall" fav={favs.includes(featured[2].slug)} toggleFav={toggleFav} onSelect={(s) => setRoute({ name: 'yacht', slug: s })} showRates={showRates} />
            </div>
            <div className="fc-span-7">
              <YachtCard yacht={featured[3]} layout="wide" dark={true} fav={favs.includes(featured[3].slug)} toggleFav={toggleFav} onSelect={(s) => setRoute({ name: 'yacht', slug: s })} showRates={showRates} />
            </div>
          </div>

          <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
            <button className="btn btn-lg btn-ghost-dark" onClick={() => setRoute({ name: 'fleet' })}>
              View All Seventeen Vessels <Icon name="arrow" size={14} />
            </button>
          </div>
        </div>
      </section>

      {/* Experiences */}
      <section className="section sand">
        <div className="container">
          <div className="section-header">
            <div>
              <div className="eyebrow">On Board</div>
              <h2 className="h2" style={{ marginTop: 8 }}>Six ways to spend a day at sea.</h2>
            </div>
            <p className="lead">Every charter can be quietly themed — a candlelit dinner, an open-air screening, a sound-bath at anchor. Tell us the occasion, we'll stage it.</p>
          </div>
          <div className="exp-grid">
            {EXPERIENCES.map(e => (
              <div key={e.slug} className="exp-card">
                <img src={e.img} alt={e.title} loading="lazy" />
                <div className="exp-body">
                  <h3>{e.title}</h3>
                  <p>{e.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Destinations */}
      <section className="section">
        <div className="container">
          <div className="section-header">
            <div>
              <div className="eyebrow">Route Ideas</div>
              <h2 className="h2" style={{ marginTop: 8 }}>From the harbour, three coastlines.</h2>
            </div>
            <p className="lead">A short cruise to Burj Al Arab. A sunset loop of the Palm. An evening of skyline along the Marina. Build any of them with our concierge — or compose your own.</p>
          </div>
          <div className="dest-grid">
            <div className="dest-card tall">
              <img src={DESTINATIONS[0].img} alt={DESTINATIONS[0].title} loading="lazy" />
              <div className="dest-body">
                <div className="dest-num">{DESTINATIONS[0].n}</div>
                <h3>{DESTINATIONS[0].title}</h3>
                <p>{DESTINATIONS[0].duration}</p>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {DESTINATIONS.slice(1).map(d => (
                <div key={d.slug} className="dest-card">
                  <img src={d.img} alt={d.title} loading="lazy" />
                  <div className="dest-body">
                    <div className="dest-num">{d.n}</div>
                    <h3>{d.title}</h3>
                    <p>{d.duration}</p>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 400 }}>
              <div>
                <div className="eyebrow on-dark">More Routes</div>
                <h3 style={{ fontFamily: 'var(--display)', fontSize: 28, margin: '12px 0', fontWeight: 400 }}>World Islands, Zaya Nurai, Yas Marina, Sir Bani Yas, J1 Beach, RAK.</h3>
                <p style={{ opacity: 0.7, fontSize: 14 }}>Day-routes, overnight passages and multi-day itineraries — our concierge writes them per booking.</p>
              </div>
              <button className="btn btn-ghost-light" style={{ alignSelf: 'flex-start', marginTop: 20 }}>
                Build a Trip <Icon name="arrow" size={14} />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Promise strip */}
      <section className="section tight dark">
        <div className="container">
          <div className="eyebrow on-dark" style={{ marginBottom: 24 }}>Why Seven Yachts</div>
          <div className="promise-grid">
            {PROMISES.map(p => (
              <div key={p.num} className="promise">
                <span className="promise-num">{p.num}</span>
                <h4>{p.title}</h4>
                <p>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="section" style={{ background: 'var(--sand)' }}>
        <div className="container" style={{ textAlign: 'center', maxWidth: 820 }}>
          <div className="eyebrow">Concierge · Always Open</div>
          <h2 className="h1" style={{ marginTop: 12, fontSize: 'clamp(40px, 6vw, 88px)' }}>
            Tell us the date.<br />
            <em style={{ fontStyle: 'italic', color: 'var(--marine)' }}>We'll do the rest.</em>
          </h2>
          <p className="lead" style={{ margin: '24px auto', textAlign: 'center', color: 'var(--ink2)' }}>
            WhatsApp +971 52 121 7833 · info@sevenyachts.com · Dubai Harbour DA37–DA41
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginTop: 16 }}>
            <a className="btn btn-lg btn-wa" href={waLink()}>
              <Icon name="whatsapp" size={16} /> WhatsApp Concierge
            </a>
            <a className="btn btn-lg btn-ghost-dark" href="tel:+971521217833">
              <Icon name="phone" size={14} /> Call +971 52 121 7833
            </a>
            <button className="btn btn-lg btn-primary" onClick={() => openBooking()}>
              Send an Enquiry
            </button>
          </div>
        </div>
      </section>

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