// Cozmo Yachts — atomic components
const { useState, useEffect, useRef, useMemo } = React;

/* -- Logo SVG (faithful redraw using brand colors sampled from the logo file) -- */
function Logo({ light = false, compact = false }) {
  const ink = light ? "#F7FAFB" : "#16212B";
  const sun = "#E8A317";
  return (
    <a href="#top" aria-label="Cozmo Yachts — Excellence in Yacht Charter" className="logo">
      <svg width={compact ? 168 : 200} height="58" viewBox="0 0 320 92" fill="none">
        <g transform="translate(4 6)">
          <circle cx="40" cy="40" r="39" fill="none" stroke={ink} strokeWidth="2" />
          <circle cx="40" cy="29" r="9" fill={sun} />
          <path d="M16 47 H64 L57 58 Q40 64 23 58 Z" fill={ink} />
          <path d="M19 51 H61" stroke={light ? "#0A1622" : "#F7FAFB"} strokeWidth="1.5" opacity="0.6" />
          <path d="M16 47 Q40 41 64 47" fill="none" stroke={ink} strokeWidth="2" />
        </g>
        <text x="98" y="48" fontFamily="Cormorant Garamond, serif" fontWeight="500" fontSize="38" fill={ink} letterSpacing="1">COZMO</text>
        <text x="98" y="80" fontFamily="Cormorant Garamond, serif" fontWeight="500" fontSize="38" fill={ink} letterSpacing="1">YACHTS<tspan fill={sun}>.</tspan></text>
        <text x="100" y="90" fontFamily="Inter, sans-serif" fontWeight="500" fontSize="6" letterSpacing="2.2" fill={sun}>EXCELLENCE IN YACHT CHARTER</text>
      </svg>
    </a>
  );
}

/* -- Icons -- */
const Icons = {
  arrow: <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="square"/></svg>,
  arrowSm: <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6 H10 M7 3 L10 6 L7 9" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="square"/></svg>,
  whatsapp: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.7-1.6-1.9-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.3 0-.5-.1-.1-.6-1.5-.9-2-.2-.5-.5-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2.1 3.1 5 4.4.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3z"/><path d="M20.5 3.5C18.2 1.2 15.2 0 12 0 5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.8.9 3.7 1.4 5.7 1.4 6.6 0 12-5.4 12-12 .1-3.2-1.2-6.2-3.4-8.3zM12 21.8c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4C2.5 15.7 2 13.9 2 12 2 6.5 6.5 2 12 2c2.7 0 5.2 1 7 2.9 1.9 1.9 2.9 4.4 2.9 7-.1 5.6-4.4 9.9-9.9 9.9z"/></svg>,
  phone: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 1.5h2L6 4 4.5 5C5 6.5 7 8.5 8.5 9L9.5 7.5l2.5 1v2c0 1-.5 1.5-1.5 1.5C5.5 12 2 8.5 2 3.5 2 2.5 2.5 1.5 3 1.5z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/></svg>,
  heart: (filled) => <svg width="16" height="16" viewBox="0 0 16 16" fill={filled ? "#16212B" : "none"} stroke="#16212B" strokeWidth="1.4"><path d="M8 13.5 C 4 11, 1.5 8.5, 1.5 5.5 C 1.5 3.5, 3 2, 5 2 C 6.3 2, 7.3 2.8, 8 4 C 8.7 2.8, 9.7 2, 11 2 C 13 2, 14.5 3.5, 14.5 5.5 C 14.5 8.5, 12 11, 8 13.5 Z"/></svg>,
  close: <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 3 L11 11 M11 3 L3 11" stroke="currentColor" strokeWidth="1.5"/></svg>,
  check: <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6.5 L5 9.5 L10 3" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="square"/></svg>,
};

/* -- Navbar -- */
function Navbar({ scrolled, lang, setLang, shortlistCount, onShortlistClick }) {
  return (
    <header className={`nav ${scrolled ? "nav-light" : "nav-transparent"}`}>
      <div className="nav-inner">
        <Logo light={!scrolled} compact />
        <nav className="nav-links">
          <a href="#fleet">Fleet</a>
          <a href="#experiences">Experiences</a>
          <a href="#routes">Cruise Routes</a>
          <a href="#promise">About</a>
          <a href="#contact">Contact</a>
        </nav>
        <div className="nav-right">
          <div className="lang">
            {["EN","AR","RU","ZH"].map(l => (
              <button key={l} className={lang === l ? "active" : ""} onClick={() => setLang(l)}>{l}</button>
            ))}
          </div>
          {shortlistCount > 0 && (
            <button className="btn btn-ghost" style={{padding: "10px 14px"}} onClick={onShortlistClick}>
              {Icons.heart(true)} <span>{shortlistCount}</span>
            </button>
          )}
          <a className="btn btn-sun" href="#availability" style={{padding: "12px 18px"}}>
            Check Availability {Icons.arrow}
          </a>
        </div>
      </div>
    </header>
  );
}

/* -- Hero (cinematic, image rotates every 7s) -- */
function Hero({ heroIdx, setHeroIdx, headline }) {
  useEffect(() => {
    const t = setInterval(() => setHeroIdx(i => (i + 1) % HEROES.length), 7000);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="hero" id="top">
      {HEROES.map((h, i) => (
        <div
          key={i}
          className={`hero-bg ${i === heroIdx ? "active" : ""}`}
          style={{
            backgroundImage: `url(${h.img})`,
            opacity: i === heroIdx ? 1 : 0,
          }}
        />
      ))}

      <div className="hero-content">
        <div className="hero-meta">
          <div>
            <div className="mono" style={{opacity:0.7}}>{HEROES[heroIdx].title} · {HEROES[heroIdx].loc}</div>
          </div>
          <div className="mono" style={{opacity:0.6}}>
            25.0773° N · 55.1373° E — Dubai Marina
          </div>
        </div>
        <h1 className="serif">
          {headline.split(' ').slice(0, -2).join(' ')}
          {' '}
          <em>{headline.split(' ').slice(-2).join(' ')}</em>
        </h1>
        <p className="hero-sub">
          Crewed luxury charters from Dubai Marina since 2014 — celebrations, sunsets and sea days,
          arranged in a single WhatsApp message. Ten vessels, 38 to 120 feet, up to 90 guests.
        </p>
        <div className="hero-credentials">
          <div><span className="dot"></span>Since 2014</div>
          <div><span className="dot"></span>4.8 / 5 · Tripadvisor</div>
          <div><span className="dot"></span>Travellers' Choice 2025</div>
          <div><span className="dot"></span>DMCA registered</div>
        </div>
      </div>

      <div className="hero-indicator">
        {HEROES.map((_, i) => (
          <button key={i} className={i === heroIdx ? "active" : ""} onClick={() => setHeroIdx(i)} aria-label={`Slide ${i+1}`}></button>
        ))}
      </div>
      <div className="scroll-hint">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

/* -- Availability widget -- */
function AvailabilityWidget({ onSubmit, prefilledYacht }) {
  const today = new Date();
  const defaultDate = new Date(today.getTime() + 3*24*3600*1000).toISOString().slice(0,10);
  const [date, setDate] = useState(defaultDate);
  const [time, setTime] = useState("Sunset · 17:00");
  const [guests, setGuests] = useState(8);
  const [duration, setDuration] = useState("3 hours");

  useEffect(() => {
    if (prefilledYacht) {
      // trigger scroll
      document.getElementById("availability")?.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  }, [prefilledYacht]);

  function submit() {
    onSubmit({ date, time, guests, duration, yacht: prefilledYacht });
  }

  return (
    <section className="availability" id="availability">
      <div className="availability-card">
        <div className="field">
          <label>Date</label>
          <input
            type="date"
            value={date}
            min={today.toISOString().slice(0,10)}
            onChange={e => setDate(e.target.value)}
          />
        </div>
        <div className="field">
          <label>Departure</label>
          <select value={time} onChange={e => setTime(e.target.value)}>
            <option>Morning · 09:00</option>
            <option>Midday · 12:00</option>
            <option>Afternoon · 14:00</option>
            <option>Sunset · 17:00</option>
            <option>Evening · 20:00</option>
          </select>
        </div>
        <div className="field">
          <label>Guests</label>
          <div className="stepper">
            <button onClick={() => setGuests(Math.max(1, guests - 1))} aria-label="Decrease">−</button>
            <span className="field-value">{guests}</span>
            <button onClick={() => setGuests(Math.min(90, guests + 1))} aria-label="Increase">+</button>
          </div>
        </div>
        <div className="field">
          <label>Duration</label>
          <select value={duration} onChange={e => setDuration(e.target.value)}>
            <option>2 hours</option>
            <option>3 hours</option>
            <option>4 hours</option>
            <option>Half day · 6 hrs</option>
            <option>Full day · 8 hrs</option>
            <option>Overnight</option>
          </select>
        </div>
        <button className="availability-submit" onClick={submit}>
          Get a Quote {Icons.arrow}
        </button>
      </div>
      <div className="availability-note">
        <span><span className="pip">●</span> From AED 500 / hr · peak & off-peak vary</span>
        <span>● 20% deposit · 48-hr free cancellation</span>
        <span>● Rates confirmed at booking</span>
      </div>
    </section>
  );
}

/* -- Trust strip -- */
function TrustStrip() {
  return (
    <section className="wrap">
      <div className="trust">
        <div className="trust-badge">
          <img src="media/badge-tripadvisor-travelers-choice-2025.webp" alt="Tripadvisor Travellers' Choice 2025" />
          <div className="trust-badge-text">Tripadvisor Travellers' Choice 2025</div>
        </div>
        <div className="trust-stats">
          <div className="trust-stat">
            <div className="num"><em>4.8</em><span style={{fontSize: 18, color: "var(--muted)"}}> / 5</span></div>
            <div className="lbl">464 Tripadvisor reviews</div>
          </div>
          <div className="trust-stat">
            <div className="num">10</div>
            <div className="lbl">Vessels · 38ft → 120ft</div>
          </div>
          <div className="trust-stat">
            <div className="num">#80</div>
            <div className="lbl">of 1,735 Dubai boat tours</div>
          </div>
          <div className="trust-stat">
            <div className="num">12<span style={{fontSize: 18, color: "var(--muted)"}}> yrs</span></div>
            <div className="lbl">Chartering since 2014</div>
          </div>
        </div>
        <div className="notice">
          <span className="pip"></span>
          Live availability · Dubai Marina
        </div>
      </div>
    </section>
  );
}

/* -- Yacht card -- */
function YachtCard({ yacht, favorited, onFavorite, onEnquire }) {
  return (
    <article className="yacht-card" onClick={() => onEnquire(yacht)}>
      <div className={`yacht-img ${!yacht.hero ? "placeholder" : ""}`}>
        {yacht.hero
          ? <img src={yacht.hero} alt={yacht.name} loading="lazy" />
          : <span>{yacht.name} · photography pending</span>}
        <div className="yacht-tag">{yacht.lengthFt}ft · up to {yacht.guests} guests</div>
        <button
          className={`yacht-fav ${favorited ? "active" : ""}`}
          onClick={(e) => { e.stopPropagation(); onFavorite(yacht); }}
          aria-label={favorited ? "Remove from shortlist" : "Add to shortlist"}
        >
          {Icons.heart(favorited)}
        </button>
      </div>
      <div className="yacht-meta">
        <div>
          <h3 className="serif">{yacht.name}</h3>
          <div className="yacht-builder">{yacht.sub}</div>
        </div>
      </div>
      <div className="yacht-specs">
        <div><strong>{yacht.lengthFt}'</strong> length</div>
        <div><strong>{yacht.guests}</strong> guests</div>
        <div>{yacht.builder ? <><strong>{yacht.builder}</strong></> : <span className="unknown">builder TBC</span>}</div>
      </div>
      <div className="yacht-cta">
        <div className="price">
          <span className="from">from</span>
          AED {yacht.indicative.toLocaleString()}/hr
        </div>
        <div className="arrow">{Icons.arrowSm}</div>
      </div>
    </article>
  );
}

Object.assign(window, { Logo, Icons, Navbar, Hero, AvailabilityWidget, TrustStrip, YachtCard });