/* Royal Yachts — shared UI primitives */

const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Icons ---------- */
const Icon = {
  arrow: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...props}>
      <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
    </svg>
  ),
  arrowR: (props) => (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" {...props}>
      <path d="M3 9h12M10 4l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
    </svg>
  ),
  close: (props) => (
    <svg width="14" height="14" viewBox="0 0 14 14" {...props}>
      <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.4" />
    </svg>
  ),
  heart: (filled, props = {}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.6" {...props}>
      <path d="M12 21s-7-4.5-9.5-9C.7 8.4 2.5 4 6.5 4c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 4 0 5.8 4.4 4 8-2.5 4.5-9.5 9-9.5 9z" />
    </svg>
  ),
  wa: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.1-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.8 1-.1.2-.3.2-.5 0-.2-.1-1-.4-1.9-1.1-.7-.6-1.2-1.4-1.4-1.6-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.2.2-.4 0-.1.1-.3 0-.4 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9 0 1.1.8 2.2.9 2.4.1.2 1.6 2.4 3.8 3.4 1.4.6 1.9.6 2.6.5.4-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1-.1-.1-.2-.2-.4-.3z" />
    </svg>
  ),
  call: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...props}>
      <path d="M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6.4 6.4l1.1-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6A2 2 0 0 1 22 16.9z" />
    </svg>
  ),
  check: (props) => (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" {...props}>
      <path d="M2 8.5l4 4 8-9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
    </svg>
  ),
  ruler: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
      <path d="M3 17l14-14 4 4L7 21z" /><path d="M7 13l2 2M11 9l2 2M15 5l2 2" />
    </svg>
  ),
  guests: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
      <circle cx="9" cy="8" r="3.5"/><path d="M2 21c0-4 3.5-6 7-6s7 2 7 6"/>
      <circle cx="17" cy="6" r="2.5"/><path d="M22 18c0-3-2-4-5-4"/>
    </svg>
  ),
};

/* ---------- Logo (as inline img — already vector svg in /media) ---------- */
function Logo({ dark }) {
  return (
    <a className="nav-logo" href="#top" aria-label="Royal Yachts">
      <img src="media/logo-royal-yachts-1.svg" alt="Royal Yachts" />
    </a>
  );
}

/* ---------- Nav ---------- */
function Nav({ lang, setLang, onEnquire, t }) {
  return (
    <nav className="nav" id="top">
      <div className="shell nav-row">
        <Logo />
        <ul className="nav-links">
          <li><a href="#fleet">{t.nav.fleet}</a></li>
          <li><a href="#experiences">{t.nav.experiences}</a></li>
          <li><a href="#destinations">{t.nav.destinations}</a></li>
          <li><a href="#sales">{t.nav.sales}</a></li>
          <li><a href="#legacy">{t.nav.about}</a></li>
        </ul>
        <div className="nav-cta">
          <div className="lang-toggle" role="tablist">
            <button onClick={() => setLang("en")} className={lang === "en" ? "on" : ""}>EN</button>
            <button onClick={() => setLang("ar")} className={lang === "ar" ? "on" : ""}>عر</button>
          </div>
          <a href="tel:+97145514040" className="btn ghost" aria-label="Call office" style={{padding: "8px 0"}}>
            <Icon.call /> +971 4 551 4040
          </a>
          <button className="btn primary" onClick={() => onEnquire({})}>
            {t.nav.enquire} <Icon.arrow />
          </button>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero({ t, onEnquire }) {
  const [live, setLive] = useState(false);
  useEffect(() => { const id = setTimeout(() => setLive(true), 80); return () => clearTimeout(id); }, []);
  return (
    <header className={"hero " + (live ? "live" : "")}>
      <div className="hero-img" style={{ backgroundImage: "url('media/hero-home-yacht.webp')" }} />
      <div className="shell hero-inner">
        <div className="hero-top">
          <span className="eyebrow on-dark">{t.heroEyebrow}</span>
          <span className="mono" style={{ color: "rgba(255,255,255,0.65)" }}>
            25.0772° N · 55.1408° E
          </span>
        </div>

        <div className="hero-headline">
          <span className="eyebrow on-dark"><span className="dot" />Concierge charter · brokerage · management</span>
          <h1 className="display">
            {t.heroTitle1} <br/>
            {t.heroTitle2} <br/>
            <span className="italic">{t.heroTitleItalic}</span>
          </h1>
          <p>{t.heroLede}</p>
        </div>

        <div className="hero-foot">
          <div className="hero-ctas">
            <button className="btn primary on-dark" onClick={() => onEnquire({ intent: "charter" })}>
              {t.heroCtaCharter} <Icon.arrow />
            </button>
            <a href="#sales" className="btn on-dark">{t.heroCtaOwn} <Icon.arrow /></a>
          </div>
          <div className="hero-meta">
            <span><b>05</b> &nbsp; CHARTER YACHTS · LIVE</span>
            <span><b>09:00 — 17:00</b> &nbsp; OFFICE GST</span>
            <span><b>+971 50 226 6906</b> &nbsp; CHARTER LINE</span>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---------- Trust strip ---------- */
function TrustStrip({ t }) {
  return (
    <div className="trust">
      <div className="shell trust-row">
        <div className="trust-item">
          <div>
            <span className="lbl">{t.trustEst}</span>
            <span className="val">2011</span>
          </div>
        </div>
        <div className="trust-item">
          <div>
            <span className="lbl">{t.trustService}</span>
            <span className="val ed-display" style={{fontSize: 18, lineHeight:1.2}}>{t.trustBody}</span>
          </div>
        </div>
        <div className="trust-item">
          <div>
            <span className="lbl">{t.trustReach}</span>
            <span className="val ed-display" style={{fontSize: 18, lineHeight:1.2}}>{t.trustReachBody}</span>
          </div>
        </div>
        <div className="trust-item">
          <div className="lma-badge">
            <img src="media/badge-lma-member.webp" alt="LMA member" />
            <div>
              <div className="b1">Member</div>
              <div className="b2">Leisure Marine Association</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Dual entry ---------- */
function DualEntry({ onCharter, onSales, t }) {
  return (
    <div className="shell">
      <div className="dual-entry">
        <div className="dual-card" onClick={onCharter}>
          <div>
            <span className="eyebrow">01 · For the day, for the week</span>
            <h3 className="display">Charter <span className="italic">a yacht.</span></h3>
            <p>From a four-hour sunset out of Dubai Marina to a fortnight on the Adriatic. Quote, route and crew — handled by one team.</p>
          </div>
          <div className="arrow-pill"><Icon.arrowR /></div>
        </div>
        <div className="dual-card" onClick={onSales}>
          <div>
            <span className="eyebrow">02 · For the long haul</span>
            <h3 className="display">Buy, build <span className="italic">&amp; own.</span></h3>
            <p>Brokerage, new-build commissioning, co-ownership programmes and full management — the lifecycle of an asset that floats.</p>
          </div>
          <div className="arrow-pill"><Icon.arrowR /></div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Yacht card ---------- */
function YachtCard({ y, faved, onFave, onOpen, onEnquire, idx }) {
  return (
    <article className="yacht-card" onClick={() => onOpen(y)}>
      <div className="yacht-media">
        <span className="yacht-badge">{String(idx + 1).padStart(2, "0")} · {y.builder}</span>
        <button
          className={"yacht-fave " + (faved ? "on" : "")}
          onClick={(e) => { e.stopPropagation(); onFave(y.id); }}
          aria-label="Add to shortlist"
        >
          {Icon.heart(faved)}
        </button>
        <img src={y.hero} alt={y.name} loading="lazy" />
      </div>
      <div className="yacht-meta-row">
        <h3 className="yacht-name">{y.name}</h3>
        <span className="yacht-builder">{y.year}</span>
      </div>
      <div className="yacht-spec">
        <span><b>{y.length}</b> ft</span><span className="sep" />
        <span><b>{y.guests}</b> guests</span><span className="sep" />
        <span><b>{y.cabins}</b> cabins</span><span className="sep" />
        <span><b>{y.crew}</b> crew</span>
      </div>
      <div className="yacht-cta">
        <button onClick={(e) => { e.stopPropagation(); onOpen(y); }}>View yacht</button>
        <button onClick={(e) => { e.stopPropagation(); onEnquire({ yachtId: y.id, intent: "charter" }); }}>Enquire</button>
        <span className="price">On request</span>
      </div>
    </article>
  );
}

/* ---------- Experience grid ---------- */
function ExperienceGrid({ exps, onEnquire }) {
  return (
    <div className="exp-grid">
      {exps.map((e) => (
        <div
          key={e.id}
          className={"exp-tile" + (e.tall ? " tall" : "")}
          onClick={() => onEnquire({ intent: "experience", experienceId: e.id })}
        >
          <img src={e.img} alt={e.title} loading="lazy" />
          <div className="exp-tile-body">
            <div>
              <span className="tag">{e.tag}</span>
              <h3 className="display">{e.title}</h3>
            </div>
            <span className="btn on-dark" style={{borderRadius:0, padding:"10px 14px", fontSize:11}}>Enquire <Icon.arrow /></span>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Destinations rail ---------- */
function DestinationRail({ dests, onEnquire }) {
  return (
    <div className="dest-rail">
      {dests.map((d, i) => (
        <div key={d.id} className="dest-card" onClick={() => onEnquire({ intent: "destination", destinationId: d.id })}>
          <div className="dest-media">
            <span className="dest-num">{String(i + 1).padStart(2, "0")} / {String(dests.length).padStart(2, "0")} · {d.region}</span>
            <img src={d.img} alt={d.name} loading="lazy" />
          </div>
          <div className="dest-body">
            <h4 className="display">{d.name}</h4>
            <span className="duration">{d.duration}</span>
            <p>{d.pitch}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  Icon, Logo, Nav, Hero, TrustStrip, DualEntry, YachtCard, ExperienceGrid, DestinationRail
});
