// Cozmo Yachts — page sections
const { useState: useStateS, useMemo: useMemoS, useEffect: useEffectS } = React;

/* -- Fleet section -- */
function FleetSection({ shortlist, onFavorite, onEnquire }) {
  const [tier, setTier] = useStateS("all");
  const filtered = useMemoS(() => {
    if (tier === "all") return FLEET;
    return FLEET.filter(y => y.tier === tier);
  }, [tier]);

  return (
    <section className="section" id="fleet">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">The Fleet · 10 vessels</div>
            <h2 className="serif">Ten yachts. <em>One coastline.</em> Yours for the day.</h2>
          </div>
          <div className="right">
            Each vessel is owned, maintained and crewed in-house. Indicative rates shown; final quote
            adjusts for season, time of day and route.
          </div>
        </div>

        <div className="fleet-tabs">
          {FLEET_TIERS.map(t => {
            const count = t.id === "all" ? FLEET.length : FLEET.filter(y => y.tier === t.id).length;
            return (
              <button
                key={t.id}
                className={`fleet-tab ${tier === t.id ? "active" : ""}`}
                onClick={() => setTier(t.id)}
              >
                {t.label}<span className="count">{count}</span>
              </button>
            );
          })}
        </div>

        <div className="fleet-grid">
          {filtered.map(yacht => (
            <YachtCard
              key={yacht.slug}
              yacht={yacht}
              favorited={shortlist.includes(yacht.slug)}
              onFavorite={onFavorite}
              onEnquire={onEnquire}
            />
          ))}
        </div>

        <div className="divider-label">
          <div className="line"></div>
          <div className="label">All capacities verified · cabins & crew confirmed on quote</div>
          <div className="line"></div>
        </div>
      </div>
    </section>
  );
}

/* -- Experiences section -- */
function ExperiencesSection({ onEnquire }) {
  return (
    <section className="section section-sand" id="experiences">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">Signature experiences</div>
            <h2 className="serif">A reason to <em>come aboard.</em></h2>
          </div>
          <div className="right">
            Curated charters built around what you're celebrating — proposals, birthdays, sea-day
            escapes, or quiet sunsets. We arrange the rest.
          </div>
        </div>

        <div className="exp-grid">
          {EXPERIENCES.map(exp => (
            <article
              key={exp.slug}
              className={`exp-card ${exp.layout}`}
              onClick={() => onEnquire({ name: exp.title, slug: exp.slug })}
            >
              <img src={exp.img} alt={exp.title} loading="lazy" />
              <div className="exp-content">
                <div className="eyebrow">{exp.sub}</div>
                <h3 className="serif">{exp.title}</h3>
                <p>{exp.body}</p>
                <div className="meta">{exp.duration}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -- Routes section -- */
function RoutesSection() {
  const [activeRoute, setActiveRoute] = useStateS(0);

  return (
    <section className="section" id="routes">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">Cruise the coastline</div>
            <h2 className="serif">Marina to <em>Burj Al Arab</em>, with stops you choose.</h2>
          </div>
          <div className="right">
            Most charters trace the same five-point arc. Your captain pauses anywhere you'd like —
            swim, swap routes, or anchor for dinner.
          </div>
        </div>

        <div className="routes-layout">
          <div className="routes-map">
            <img src="media/destination-cruise-map-dubai.webp" alt="Dubai cruise route map" />
            {ROUTES.map((r, i) => (
              <div
                key={r.id}
                className={`route-pin ${i === activeRoute ? "" : "dim"}`}
                style={{ left: `${r.x}%`, top: `${r.y}%` }}
              >
                <div className="badge">{r.name}</div>
                <div className="dot"></div>
              </div>
            ))}
          </div>

          <div className="route-list">
            {ROUTES.map((r, i) => (
              <div
                key={r.id}
                className={`route-step ${i === activeRoute ? "active" : ""}`}
                onClick={() => setActiveRoute(i)}
                onMouseEnter={() => setActiveRoute(i)}
              >
                <div className="num">0{i+1}</div>
                <div>
                  <h3 className="serif">{r.name}</h3>
                  <div className="sub">{r.sub}</div>
                </div>
                <div className="duration">{r.duration}</div>
              </div>
            ))}
            <div style={{marginTop: 32, display: "flex", gap: 16, alignItems: "center"}}>
              <a className="btn btn-ghost" href="#availability">Build this route {Icons.arrow}</a>
              <span className="notice"><span className="pip"></span>Includes free jet ski stop</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -- Promo band -- */
function PromoBand() {
  const PROMOS = [
    { icon: "20%", title: "20% Deposit", body: "Hold any yacht for any date with a 20% deposit. Balance on the day, on board." },
    { icon: "48h", title: "Free Cancellation", body: "Plans changed? Cancel up to 48 hours before departure — full refund, no questions." },
    { icon: "—", title: "Weekday Saver", body: "Mid-week charters carry a quiet discount. Best for proposals and intimate parties." },
    { icon: "★", title: "Free Jet Ski", body: "Every half-day charter and above includes a complimentary jet-ski session, on us." },
  ];
  return (
    <section className="promo-band">
      <div className="wrap">
        <div className="eyebrow" style={{color: "rgba(247,250,251,0.5)", marginBottom: 24}}>What's included</div>
        <h2 className="serif" style={{color: "var(--paper)", maxWidth: "18ch", marginBottom: 56, fontWeight: 300}}>
          Promises, not <em style={{color: "var(--sun)", fontStyle: "italic"}}>asterisks.</em>
        </h2>
        <div className="promo-grid">
          {PROMOS.map(p => (
            <div className="promo" key={p.title}>
              <div className="icon">{p.icon}</div>
              <h4>{p.title}</h4>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -- About / promise -- */
function AboutSection() {
  return (
    <section className="section" id="promise">
      <div className="wrap">
        <div className="about-grid">
          <div className="about-img">
            <img src="media/charter-guests-onboard.webp" alt="Guests aboard a Cozmo yacht" />
          </div>
          <div className="about-text">
            <div className="eyebrow">The Cozmo promise</div>
            <h2 className="serif">
              A quieter kind of <em>luxury.</em>
            </h2>
            <p>
              Cozmo Yachts has chartered Dubai's coastline since 2014 — one of the city's most
              awarded charter operators, with a fleet built around celebrations rather than
              spectacle.
            </p>
            <p className="muted">
              We own every vessel in our roster. Our captains and crew are full-time, not
              freelance — which is why guests come back, and why our Tripadvisor average has stayed
              above 4.8 across 464 reviews.
            </p>
            <div className="about-stats">
              <div>
                <div className="num">2014</div>
                <div className="lbl">Founded</div>
              </div>
              <div>
                <div className="num">464</div>
                <div className="lbl">Tripadvisor reviews</div>
              </div>
              <div>
                <div className="num">10</div>
                <div className="lbl">Owned vessels</div>
              </div>
            </div>
            <div style={{marginTop: 32}}>
              <a href="#contact" className="btn btn-ghost">Visit our marina {Icons.arrow}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -- Contact section -- */
function ContactSection({ onCallWhatsApp }) {
  return (
    <section className="section section-dark" id="contact">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow" style={{color: "rgba(247,250,251,0.5)"}}>Get in touch</div>
            <h2 className="serif" style={{color: "var(--paper)", fontWeight: 300}}>
              One message. <em style={{color: "var(--sun)", fontStyle: "italic"}}>One concierge.</em>
            </h2>
          </div>
          <div className="right" style={{color: "rgba(247,250,251,0.6)"}}>
            Our concierge replies on WhatsApp from 09:00 to 23:00 GST. Most quotes within 15 minutes.
          </div>
        </div>

        <div className="contact-grid">
          <div className="contact-card">
            <div className="eyebrow">Boarding</div>
            <h3 className="serif">Dubai Marina</h3>
            <p>
              Berth assigned on confirmation — most charters depart from the Marina Walk pontoons,
              steps from JBR and easy taxi access. Free parking at the dock.
            </p>
            <div className="addr">Dubai Marina Walk<br/>Dubai, United Arab Emirates</div>
            <div className="geo">25.0773° N · 55.1373° E</div>
            <div className="row">
              <button className="btn btn-sun" onClick={() => onCallWhatsApp({ topic: "Boarding location" })}>
                {Icons.whatsapp} WhatsApp Concierge
              </button>
              <a className="btn btn-ghost-light" href="tel:+971529440222">
                {Icons.phone} +971 52 944 0222
              </a>
            </div>
          </div>

          <div className="contact-card">
            <div className="eyebrow">Head office</div>
            <h3 className="serif">Al Barsha 1</h3>
            <p>
              For pre-charter consultations, corporate enquiries and large-event planning. Visits by
              appointment.
            </p>
            <div className="addr">402, B8 Building<br/>Barsha Horizon, Al Barsha 1<br/>Dubai, United Arab Emirates</div>
            <div className="geo">25.184838° N · 55.264240° E</div>
            <div className="row">
              <a className="btn btn-ghost-light" href="#availability">Plan a visit {Icons.arrow}</a>
              <span className="notice" style={{color: "rgba(247,250,251,0.6)"}}>
                <span className="pip"></span>Mon–Sat · 10:00–19:00*
              </span>
            </div>
            <div className="geo" style={{marginTop: 18, opacity: 0.5}}>* hours pending client confirmation</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -- Footer -- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <Logo light compact />
            <p style={{marginTop: 22, fontSize: 14, lineHeight: 1.65, color: "rgba(247,250,251,0.65)", maxWidth: "36ch"}}>
              Crewed luxury yacht charters from Dubai Marina, since 2014. Cozmo Yachts &amp; Boat
              Rental LLC. DMCA-registered.
            </p>
            <div style={{marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap"}}>
              <a className="btn btn-wa" href="https://wa.me/971529440222" style={{padding: "10px 14px", fontSize: 11}}>
                {Icons.whatsapp} WhatsApp
              </a>
              <a className="btn btn-ghost-light" href="tel:+971529440222" style={{padding: "10px 14px", fontSize: 11}}>
                {Icons.phone} +971 52 944 0222
              </a>
            </div>
          </div>
          <div>
            <h5>Fleet</h5>
            <ul>
              <li><a href="#fleet">All vessels</a></li>
              <li><a href="#fleet">Intimate (38–45ft)</a></li>
              <li><a href="#fleet">Mid-size (50–55ft)</a></li>
              <li><a href="#fleet">Large (75–77ft)</a></li>
              <li><a href="#fleet">Mega yachts (88–120ft)</a></li>
            </ul>
          </div>
          <div>
            <h5>Experiences</h5>
            <ul>
              <li><a href="#experiences">Sunset Cruise</a></li>
              <li><a href="#experiences">Birthday Aboard</a></li>
              <li><a href="#experiences">The Proposal</a></li>
              <li><a href="#experiences">Deep Sea Fishing</a></li>
              <li><a href="#experiences">Paw Party</a></li>
            </ul>
          </div>
          <div>
            <h5>Visit</h5>
            <ul>
              <li><a href="#routes">Cruise Routes</a></li>
              <li><a href="#promise">About Cozmo</a></li>
              <li><a href="#contact">Marina & Office</a></li>
              <li><a href="#contact">Concierge</a></li>
              <li><a href="#contact">FAQ</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Cozmo Yachts &amp; Boat Rental LLC · Chartering since 2014</div>
          <div className="socials">
            <a href="#">Instagram</a>
            <a href="#">YouTube</a>
            <a href="#">Facebook</a>
            <a href="#">LinkedIn</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FleetSection, ExperiencesSection, RoutesSection, PromoBand, AboutSection, ContactSection, Footer });