/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;

const D = window.XY_DATA;
const C = window.XY_COPY;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "heroVariant": "wide",
  "yachtsLayout": "grid",
  "photoTreatment": "natural",
  "accentIntensity": "signature"
}/*EDITMODE-END*/;

/* ---------- Icons ---------- */
const I = {
  arrow: (props) => (
    <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" />
    </svg>
  ),
  whatsapp: (props) => (
    <svg {...props} viewBox="0 0 32 32" fill="currentColor">
      <path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.4L3 29l6.8-1.8c1.8 1 3.9 1.5 6.2 1.5 7.2 0 13-5.8 13-13S23.2 3 16 3zm0 23.6c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1 1.1-3.9-.3-.4C5.5 20 4.9 18 4.9 16 4.9 9.9 9.9 4.9 16 4.9c3 0 5.7 1.1 7.8 3.2 2.1 2.1 3.2 4.9 3.2 7.8 0 6.2-5 11.1-11 11.1zm6-8.3c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-2-1.8-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 3 1.2 3 .8 3.6.8.5 0 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.4z" />
    </svg>
  ),
  phone: (props) => (
    <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>
  ),
  pin: (props) => (
    <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z" /><circle cx="12" cy="10" r="3" />
    </svg>
  ),
  ruler: (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M3 12h18M3 8h2M7 8h2M11 8h2M15 8h2M19 8h2M3 16h2M7 16h2M11 16h2M15 16h2M19 16h2"/></svg>,
  users: (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
  bed: (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 11h20v8M2 19v-8a3 3 0 0 1 3-3h9v6"/><circle cx="6" cy="13" r="1.5"/></svg>,
  anchor: (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="5" r="2"/><line x1="12" y1="7" x2="12" y2="22"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/></svg>,
  check: (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 12 10 18 20 6"/></svg>,
  close: (p) => <svg {...p} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>,
};

const SPEC_ICONS = { length: I.ruler, guests: I.users, cabins: I.bed, crew: I.anchor };

/* ---------- Nav ---------- */
function Nav({ t, lang, setLang, onEnquire }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")} data-screen-label="Nav">
      <a href="#" className="nav__brand" aria-label="Xclusive Yachts">
        <span className="nav__mark">
          <svg viewBox="0 0 64 32" fill="none">
            <path d="M10 12 C18 6, 28 8, 36 12 C44 16, 52 18, 60 14 C56 22, 44 24, 32 20 C22 17, 14 14, 8 18 Z" fill="#fff"/>
            <path d="M4 20 C14 12, 28 14, 40 20 C50 25, 58 26, 62 22 C56 30, 42 32, 28 26 C18 22, 10 20, 4 24 Z" fill="#fff" opacity="0.95"/>
          </svg>
        </span>
        <span className="nav__wordmark"><em>X</em>clusive Yachts</span>
      </a>
      <nav className="nav__links" aria-label="Primary">
        <a href="#fleet" className="active">{t.nav.fleet}</a>
        <a href="#experiences">{t.nav.experiences}</a>
        <a href="#about">{t.nav.about}</a>
        <a href="#contact">{t.nav.contact}</a>
      </nav>
      <div className="nav__cta">
        <div className="lang-toggle" role="group" aria-label="Language">
          {["EN", "AR", "RU", "ZH"].map((L) => (
            <button
              key={L}
              className={lang === L.toLowerCase() ? "active" : ""}
              onClick={() => setLang(L.toLowerCase())}
              disabled={L === "RU" || L === "ZH"}
              title={L === "RU" || L === "ZH" ? "Coming soon" : ""}
            >{L}</button>
          ))}
        </div>
        <button className="btn btn--primary" onClick={onEnquire}>
          {t.nav.enquire} <I.arrow className="arrow" width="14" height="14"/>
        </button>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero({ t, onEnquire, photoTreatment }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % D.heroSlides.length), 6000);
    return () => clearInterval(id);
  }, []);
  const filter = photoTreatment === "noir" ? "saturate(0.7) contrast(1.05) brightness(0.92)" : "none";
  return (
    <section className="hero" data-screen-label="Hero" id="hero">
      <div className="hero__slides">
        {D.heroSlides.map((s, i) => (
          <div
            key={i}
            className={"hero__slide" + (i === idx ? " active" : "")}
            style={{ backgroundImage: `url(${s.img})`, filter }}
            aria-hidden={i !== idx}
          />
        ))}
        <div className="hero__veil" />
      </div>
      <div className="hero__content">
        <div className="hero__eyebrow">
          <span className="dot"></span>
          <span>{t.hero.eyebrow}</span>
        </div>
        <h1 className="hero__h1">
          {t.hero.h1Pre}<br/>
          <em className="crimson">{t.hero.h1Em}</em>
        </h1>
        <div>
          <p className="hero__sub">{t.hero.sub}</p>
          <div className="hero__bottom">
            <div className="hero__ctas">
              <a href="#fleet" className="btn btn--primary">{t.hero.browse} <I.arrow className="arrow" width="14" height="14"/></a>
              <a href="#experiences" className="btn btn--ghost">{t.hero.experiences}</a>
            </div>
            <div className="hero__meta">
              <div className="stat">
                <div className="stat__big">70<span style={{fontSize:18, verticalAlign:"super"}}>+</span></div>
                <div className="stat__lab">Boats &amp; yachts</div>
              </div>
              <div className="stat">
                <div className="stat__big">4.9<span style={{color:"var(--brand)"}}>★</span></div>
                <div className="stat__lab">26,667 reviews</div>
              </div>
              <div className="stat">
                <div className="stat__big">2006</div>
                <div className="stat__lab">On the water since</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="hero__slidebar">
        {D.heroSlides.map((_, i) => (
          <button key={i} className={i === idx ? "active" : ""} onClick={() => setIdx(i)} aria-label={"Slide " + (i+1)} />
        ))}
      </div>
      <div className="hero__scroll">{t.hero.scroll}</div>
    </section>
  );
}

/* ---------- Trust ---------- */
function Trust({ t }) {
  return (
    <section className="trust" data-screen-label="Trust">
      <div className="trust__row">
        {t.trust.map((it, i) => (
          <div className="trust__item" key={i}>
            <div className="trust__icon">0{i+1}</div>
            <div className="trust__body">
              <div className="lab">{it.lab}</div>
              <div className="val">{it.val}</div>
              <div className="sup">{it.sup}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Fleet ---------- */
function Fleet({ t, onEnquire }) {
  const [filter, setFilter] = useState(0);
  return (
    <section className="fleet" data-screen-label="Fleet" id="fleet">
      <div className="section__head">
        <div>
          <div className="eyebrow">{t.fleet.eyebrow}</div>
          <h2 className="section__h2">{t.fleet.h2Pre}<em>{t.fleet.h2Em}</em></h2>
        </div>
        <div>
          <p className="section__intro" style={{marginBottom: 18}}>{t.fleet.intro}</p>
          <div className="fleet__filter">
            {t.fleet.filters.map((f, i) => (
              <button key={i} className={filter === i ? "active" : ""} onClick={() => setFilter(i)}>{f}</button>
            ))}
          </div>
        </div>
      </div>
      <div className="yacht-grid">
        {D.yachts.map((y) => (
          <article className={"yacht-card " + (y.lengthN >= 140 ? "featured" : "small")} key={y.id} onClick={onEnquire}>
            <div className="yacht-card__media">
              <img src={y.img} alt={y.name + " " + y.length} loading="lazy" />
              <div className="yacht-card__tag">{y.tag}</div>
              <div className="yacht-card__price">
                <span className="from">From / hr</span>
                AED {y.from}
              </div>
            </div>
            <div className="yacht-card__body">
              <div>
                <div className="yacht-card__name">{y.name}<span className="len">{y.length}</span></div>
                <div className="yacht-card__builder">{y.builder}</div>
              </div>
            </div>
            <div style={{padding: "0 28px"}}>
              <div className="yacht-card__specs">
                <div className="yacht-card__spec"><span className="v">{y.guests}</span><span className="l">Guests</span></div>
                <div className="yacht-card__spec"><span className="v">{y.cabins}</span><span className="l">Cabins</span></div>
                <div className="yacht-card__spec"><span className="v">{y.crew}</span><span className="l">Crew</span></div>
                <div className="yacht-card__spec"><span className="v">{y.sleeps}</span><span className="l">Sleeps</span></div>
              </div>
            </div>
            <div className="yacht-card__cta">
              <button className="btn btn--primary" onClick={(e) => { e.stopPropagation(); onEnquire(y); }}>
                {t.fleet.ctaPrimary} <I.arrow className="arrow" width="12" height="12"/>
              </button>
              <button className="btn btn--ghost" onClick={(e) => e.stopPropagation()}>{t.fleet.ctaSecondary}</button>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ---------- Experiences ---------- */
function Experiences({ t, onEnquire }) {
  return (
    <section className="experiences" data-screen-label="Experiences" id="experiences">
      <div className="section__head">
        <div>
          <div className="eyebrow">{t.experiences.eyebrow}</div>
          <h2 className="section__h2" style={{color: "var(--ink)"}}>{t.experiences.h2Pre}<em>{t.experiences.h2Em}</em></h2>
        </div>
        <p className="section__intro" style={{color: "var(--muted)"}}>{t.experiences.intro}</p>
      </div>
      <div className="exp-grid">
        {D.experiences.map((e, i) => {
          const span = i % 4 === 0 ? "tall" : (i % 3 === 0 ? "wide" : "med");
          return (
            <article className={"exp-card " + span} key={e.id} onClick={() => onEnquire({ name: e.name })}>
              <img src={e.img} alt={e.name} loading="lazy" />
              <div className="exp-card__veil"></div>
              <div className="exp-card__arrow"><I.arrow width="14" height="14"/></div>
              <div className="exp-card__body">
                <div className="exp-card__cat">{e.cat}</div>
                <div className="exp-card__name">{e.name}</div>
                <div className="exp-card__sub">{e.sub}</div>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

/* ---------- Booking ---------- */
function Booking({ t, onSubmit }) {
  const [form, setForm] = useState({ yacht: "", date: "", guests: "", name: "", phone: "" });
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  return (
    <section className="booking" data-screen-label="Booking">
      <div className="booking__inner">
        <div className="booking__copy">
          <div className="eyebrow" style={{color: "var(--brand)"}}>{t.booking.eyebrow}</div>
          <h2>{t.booking.h2Pre}<em>{t.booking.h2Em}</em></h2>
          <p>{t.booking.copy}</p>
          <ul className="ticks">
            {t.booking.ticks.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>
        <form className="booking__form" onSubmit={(e) => { e.preventDefault(); onSubmit(form); }}>
          <h3>{t.booking.formTitle}</h3>
          <div className="sub">{t.booking.formSub}</div>
          <div className="form-row">
            <div className="field">
              <label>Yacht or experience</label>
              <select value={form.yacht} onChange={upd("yacht")}>
                <option value="">Any — surprise me</option>
                {D.yachts.map((y) => <option key={y.id} value={y.id}>{y.name} — {y.length}</option>)}
                <option disabled>──────────</option>
                {D.experiences.map((e) => <option key={e.id} value={e.id}>{e.name}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Guests</label>
              <select value={form.guests} onChange={upd("guests")}>
                <option value="">Select</option>
                <option>1–6</option><option>7–12</option><option>13–25</option><option>26–50</option><option>51–100</option>
              </select>
            </div>
          </div>
          <div className="form-row">
            <div className="field">
              <label>Date</label>
              <input type="date" value={form.date} onChange={upd("date")} />
            </div>
            <div className="field">
              <label>Duration</label>
              <select>
                <option>1 hour</option><option>2 hours</option><option>3 hours</option><option>4 hours</option><option>Overnight</option>
              </select>
            </div>
          </div>
          <div className="form-row full">
            <div className="field">
              <label>Your name</label>
              <input type="text" placeholder="Full name" value={form.name} onChange={upd("name")} />
            </div>
          </div>
          <div className="form-row full">
            <div className="field">
              <label>Phone / WhatsApp</label>
              <input type="tel" placeholder="+971…" value={form.phone} onChange={upd("phone")} />
            </div>
          </div>
          <div className="booking__submit">
            <button type="submit" className="btn btn--dark">
              Check availability <I.arrow className="arrow" width="14" height="14"/>
            </button>
            <span className="or">or</span>
            <a className="btn btn--outline-dark" href="https://wa.me/97144327233" target="_blank" rel="noreferrer">
              <I.whatsapp width="14" height="14"/> WhatsApp
            </a>
          </div>
        </form>
      </div>
    </section>
  );
}

/* ---------- Heritage ---------- */
function Heritage({ t }) {
  return (
    <section className="heritage" data-screen-label="Heritage" id="about">
      <div className="heritage__inner">
        <div className="heritage__media">
          <img src="media/exp-marina-tour.webp" alt="On the water in Dubai Marina" loading="lazy" />
          <div className="badge">
            <div className="y">{t.heritage.badge.y}</div>
            <div className="t">{t.heritage.badge.t}</div>
          </div>
        </div>
        <div className="heritage__copy">
          <div className="eyebrow">{t.heritage.eyebrow}</div>
          <h2>{t.heritage.h2Pre}<em>{t.heritage.h2Em}</em></h2>
          <p>{t.heritage.p1}</p>
          <p>{t.heritage.p2}</p>
          <div className="heritage__quotes">
            {D.reviews.slice(0, 2).map((r, i) => (
              <div className="q" key={i}>
                {r.q}
                <span className="src">— {r.who}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Marina / contact ---------- */
function Marina({ t }) {
  return (
    <section className="marina" data-screen-label="Marina" id="contact">
      <div className="marina__media">
        <img src="media/marina-berth.webp" alt="Dubai Marina" loading="lazy" />
      </div>
      <div className="marina__inner">
        <div className="marina__copy">
          <div className="eyebrow light">{t.marina.eyebrow}</div>
          <h2>{t.marina.h2Pre}<em>{t.marina.h2Em}</em></h2>
          <p>{t.marina.copy}</p>
        </div>
        <div className="marina__details">
          <h4>{t.marina.label}</h4>
          <ul>
            <li><span className="lab">Address</span><span className="val" style={{whiteSpace:"pre-line"}}>{t.marina.addr}</span></li>
            <li><span className="lab">Hours</span><span className="val" style={{whiteSpace:"pre-line"}}>{t.marina.hours}</span></li>
            <li><span className="lab">{t.marina.phoneLab}</span><span className="val"><a href="tel:+97144327233">{t.marina.phone}</a></span></li>
            <li><span className="lab">{t.marina.emailLab}</span><span className="val"><a href="mailto:book@xclusiveyachts.com">{t.marina.email}</a></span></li>
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__brand">
          <div className="lock">
            <span className="nav__mark" style={{width: 34, height: 34}}>
              <svg viewBox="0 0 64 32" fill="none">
                <path d="M10 12 C18 6, 28 8, 36 12 C44 16, 52 18, 60 14 C56 22, 44 24, 32 20 C22 17, 14 14, 8 18 Z" fill="#fff"/>
                <path d="M4 20 C14 12, 28 14, 40 20 C50 25, 58 26, 62 22 C56 30, 42 32, 28 26 C18 22, 10 20, 4 24 Z" fill="#fff" opacity="0.95"/>
              </svg>
            </span>
            <span className="nav__wordmark" style={{fontSize: 14}}><em>X</em>clusive Yachts</span>
          </div>
          <p>Dubai Marina's most-reviewed luxury yacht charter — chartered, crewed, concierge. Founded 2006 as Xclusive Boats Charter LLC.</p>
        </div>
        <div className="footer__col">
          <h5>Fleet</h5>
          <ul>
            <li><a href="#fleet">Icon · 110ft</a></li>
            <li><a href="#fleet">Stardom · 141ft</a></li>
            <li><a href="#fleet">Encore · 131ft</a></li>
            <li><a href="#fleet">Behike · 141ft</a></li>
            <li><a href="#fleet">Day-charter fleet</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>Experiences</h5>
          <ul>
            <li><a href="#experiences">Sunset & Dinner Cruise</a></li>
            <li><a href="#experiences">Yacht Party</a></li>
            <li><a href="#experiences">Private Charter</a></li>
            <li><a href="#experiences">Corporate Hire</a></li>
            <li><a href="#experiences">Fishing &amp; Watersports</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>Contact</h5>
          <ul>
            <li><a href="tel:+97144327233">+971 4 432 7233</a></li>
            <li><a href="https://wa.me/97144327233">WhatsApp concierge</a></li>
            <li><a href="mailto:book@xclusiveyachts.com">book@xclusiveyachts.com</a></li>
            <li><a href="#contact">Al Majara Tower, Dubai Marina</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Xclusive Boats Charter LLC · DED Trade Licence — confirm at launch.</span>
        <span>EN · العربية · РУ · 中文 — coming</span>
      </div>
    </footer>
  );
}

/* ---------- WhatsApp FAB ---------- */
function Fab() {
  return (
    <a className="fab" href="https://wa.me/97144327233" target="_blank" rel="noreferrer">
      <span className="fab__icon"><I.whatsapp/></span>
      <span className="fab__txt">Concierge<br/><small>Reply within the hour</small></span>
    </a>
  );
}

/* ---------- Modal ---------- */
function EnquireModal({ open, onClose, prefill }) {
  const [sent, setSent] = useState(false);
  useEffect(() => { if (!open) setSent(false); }, [open]);
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="Close"><I.close/></button>
        {!sent ? (
          <>
            <h3>Tell us about your day</h3>
            <div className="modal-sub">{prefill?.name ? `Enquiring about ${prefill.name}. ` : ""}We respond inside the hour.</div>
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="form-row">
                <div className="field"><label>Your name</label><input required type="text" /></div>
                <div className="field"><label>Phone / WhatsApp</label><input required type="tel" placeholder="+971…"/></div>
              </div>
              <div className="form-row">
                <div className="field"><label>Date</label><input type="date" /></div>
                <div className="field"><label>Guests</label><input type="number" min="1" defaultValue="6" /></div>
              </div>
              <div className="form-row full">
                <div className="field"><label>Anything else?</label><textarea placeholder="Occasion, dietary notes, route ideas…"/></div>
              </div>
              <div className="booking__submit" style={{marginTop: 16}}>
                <button type="submit" className="btn btn--dark" style={{flex: 1, justifyContent: "center"}}>
                  Send enquiry <I.arrow className="arrow" width="14" height="14"/>
                </button>
                <span className="or">or</span>
                <a className="btn btn--outline-dark" href="https://wa.me/97144327233" target="_blank" rel="noreferrer">
                  <I.whatsapp width="14" height="14"/> WhatsApp
                </a>
              </div>
            </form>
          </>
        ) : (
          <div className="modal__success">
            <div className="check"><I.check width="28" height="28"/></div>
            <h3>Enquiry received.</h3>
            <p style={{color: "var(--muted)", fontSize: 14, marginTop: 6}}>
              Our concierge will reply within the hour, 8:30am–10:30pm Gulf time. For anything urgent, message us on WhatsApp.
            </p>
            <div style={{marginTop: 24}}>
              <a className="btn btn--dark" href="https://wa.me/97144327233" target="_blank" rel="noreferrer">
                <I.whatsapp width="14" height="14"/> Open WhatsApp
              </a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- App ---------- */
function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang;
  const setLang = (l) => setTweak("lang", l);
  const dict = C[lang] || C.en;

  useEffect(() => {
    document.documentElement.dir = dict.dir;
    document.documentElement.lang = lang;
  }, [lang, dict.dir]);

  const [modal, setModal] = useState({ open: false, prefill: null });
  const openModal = (prefill) => setModal({ open: true, prefill: prefill && prefill.name ? prefill : null });

  // Accent intensity tweak
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.accentIntensity === "muted") {
      root.style.setProperty("--brand", "#A0394A");
    } else if (tweaks.accentIntensity === "bold") {
      root.style.setProperty("--brand", "#E20E33");
    } else {
      root.style.setProperty("--brand", "#C8102E");
    }
  }, [tweaks.accentIntensity]);

  return (
    <>
      <Nav t={dict} lang={lang} setLang={setLang} onEnquire={() => openModal()} />
      <Hero t={dict} onEnquire={openModal} photoTreatment={tweaks.photoTreatment} />
      <Trust t={dict} />
      <Fleet t={dict} onEnquire={openModal} />
      <Experiences t={dict} onEnquire={openModal} />
      <Booking t={dict} onSubmit={() => openModal()} />
      <Heritage t={dict} />
      <Marina t={dict} />
      <Footer />
      <Fab />
      <EnquireModal open={modal.open} prefill={modal.prefill} onClose={() => setModal({ open: false, prefill: null })} />

      <window.TweaksPanel>
        <window.TweakSection label="Language">
          <window.TweakRadio label="UI language" value={tweaks.lang}
            options={[{ value: "en", label: "EN" }, { value: "ar", label: "العربية" }]}
            onChange={(v) => setTweak("lang", v)} />
        </window.TweakSection>
        <window.TweakSection label="Look & feel">
          <window.TweakRadio label="Crimson" value={tweaks.accentIntensity}
            options={[
              { value: "muted", label: "Muted" },
              { value: "signature", label: "Signature" },
              { value: "bold", label: "Bold" },
            ]}
            onChange={(v) => setTweak("accentIntensity", v)} />
          <window.TweakRadio label="Hero photography" value={tweaks.photoTreatment}
            options={[
              { value: "natural", label: "Natural" },
              { value: "noir", label: "Cinema" },
            ]}
            onChange={(v) => setTweak("photoTreatment", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
