// === Seven Yachts — main App ===

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "marine-dark",
  "accent": "gold",
  "heroMode": "kenburns",
  "showRates": true,
  "lang": "en",
  "density": "standard",
  "showConceptBadge": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRouteState] = React.useState({ name: 'home' });
  const [favs, setFavs] = React.useState(['lucien', 'sky-fall']);
  const [favOpen, setFavOpen] = React.useState(false);
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [bookingPrefill, setBookingPrefill] = React.useState(null);

  // Smooth scroll to top on route change
  const setRoute = (r) => {
    setRouteState(r);
    if (typeof window !== 'undefined') window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const toggleFav = (slug) => {
    setFavs(prev => prev.includes(slug) ? prev.filter(s => s !== slug) : [...prev, slug]);
  };

  const openBooking = (prefill) => {
    setBookingPrefill(prefill || null);
    setBookingOpen(true);
  };

  // Apply lang/dir
  React.useEffect(() => {
    document.documentElement.lang = t.lang === 'ar' ? 'ar' : t.lang === 'ru' ? 'ru' : t.lang === 'zh' ? 'zh' : 'en';
    document.documentElement.dir = t.lang === 'ar' ? 'rtl' : 'ltr';
  }, [t.lang]);

  // Apply theme classes
  React.useEffect(() => {
    document.body.classList.toggle('theme-light', t.palette === 'light');
    document.body.classList.toggle('theme-dark', t.palette === 'marine-dark');
    document.body.classList.toggle('theme-mixed', t.palette === 'mixed');
  }, [t.palette]);

  // Accent color override
  React.useEffect(() => {
    const accents = {
      'gold': '#C8AD8D',
      'stone': '#DBD1CA',
      'marine-only': '#0F4C75',
    };
    document.documentElement.style.setProperty('--gold', accents[t.accent] || '#C8AD8D');
  }, [t.accent]);

  // Navbar dark on home/yacht where hero is dark
  const navDark = (route.name === 'home' || route.name === 'yacht') && t.palette !== 'light';

  let page;
  if (route.name === 'home') {
    page = <Home setRoute={setRoute} favs={favs} toggleFav={toggleFav} openBooking={openBooking} lang={t.lang} showRates={t.showRates} heroMode={t.heroMode} />;
  } else if (route.name === 'yacht') {
    page = <YachtPage slug={route.slug} setRoute={setRoute} openBooking={openBooking} favs={favs} toggleFav={toggleFav} showRates={t.showRates} />;
  } else if (route.name === 'fleet') {
    page = <FleetPage setRoute={setRoute} favs={favs} toggleFav={toggleFav} openBooking={openBooking} showRates={t.showRates} density={t.density} />;
  } else if (route.name === 'experiences') {
    page = <PlaceholderPage setRoute={setRoute} eyebrow="Experiences" title="Six ways to spend a day at sea." body="Per-experience pages — celebrations, gourmet dining, floating cinema, wellness, corporate, day at anchor — each with its own lifestyle hero and WhatsApp deep link. Not in this prototype's focus, but the design system extends 1:1 from the home cards." />;
  } else if (route.name === 'destinations') {
    page = <PlaceholderPage setRoute={setRoute} eyebrow="Destinations · Route Ideas" title="From the harbour, ten coastlines." body="Per-destination microsites with map, suggested duration, and a 'build this trip' enquiry. Palm Jumeirah, Burj Al Arab, Dubai Marina, World Islands, Zaya Nurai, Yas Marina, Sir Bani Yas, J1 Beach, RAK." />;
  } else if (route.name === 'sales') {
    page = <PlaceholderPage setRoute={setRoute} eyebrow="Sales & Management" title="Brokerage. Berths. Management." body="Owner-side: buying guide, selling guide, berths for sale; yacht management (maintenance, financial, employment, charter-management). Book-a-consultation flow." />;
  } else if (route.name === 'about') {
    page = <PlaceholderPage setRoute={setRoute} eyebrow="The House" title="Concierge before catalogue." body="Mission, crew ethos, privacy and discretion. Founding year, ownership and licence detail held back until the client confirms — we never invent." />;
  } else {
    page = <Home setRoute={setRoute} favs={favs} toggleFav={toggleFav} openBooking={openBooking} lang={t.lang} showRates={t.showRates} heroMode={t.heroMode} />;
  }

  return (
    <>
      <Navbar
        route={route}
        setRoute={setRoute}
        dark={navDark}
        lang={t.lang}
        setLang={(v) => setTweak('lang', v)}
        openFav={() => setFavOpen(true)}
        openBooking={openBooking}
        favCount={favs.length}
      />
      <main key={route.name + (route.slug || '')} className="fade-in">
        {page}
      </main>

      <WhatsAppFab />
      <FavouritesFab count={favs.length} onClick={() => setFavOpen(true)} />
      {t.showConceptBadge && <ConceptBadge />}

      <FavouritesDrawer
        open={favOpen}
        onClose={() => setFavOpen(false)}
        favs={favs}
        toggleFav={toggleFav}
        onSelect={(slug) => setRoute({ name: 'yacht', slug })}
        openBooking={openBooking}
      />
      <BookingModal
        open={bookingOpen}
        onClose={() => setBookingOpen(false)}
        prefill={bookingPrefill}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakRadio
          label="Theme mode"
          value={t.palette}
          options={[
            { value: 'marine-dark', label: 'Cinematic' },
            { value: 'mixed', label: 'Mixed' },
            { value: 'light', label: 'Editorial' },
          ]}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSelect
          label="Accent tone"
          value={t.accent}
          options={[
            { value: 'gold', label: 'Warm gold (Seven Yachts signature)' },
            { value: 'stone', label: 'Stone (cooler)' },
            { value: 'marine-only', label: 'Marine only (no warm)' },
          ]}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Hero" />
        <TweakRadio
          label="Motion"
          value={t.heroMode}
          options={[
            { value: 'kenburns', label: 'Ken Burns' },
            { value: 'still', label: 'Still' },
          ]}
          onChange={(v) => setTweak('heroMode', v)}
        />

        <TweakSection label="Fleet grid" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: 'cinematic', label: '2-up' },
            { value: 'standard', label: '3-up' },
            { value: 'dense', label: '4-up' },
          ]}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Content" />
        <TweakToggle label="Show indicative AED rates" value={t.showRates} onChange={(v) => setTweak('showRates', v)} />
        <TweakToggle label="Show concept badge" value={t.showConceptBadge} onChange={(v) => setTweak('showConceptBadge', v)} />

        <TweakSection label="Language" />
        <TweakSelect
          label="Locale"
          value={t.lang}
          options={[
            { value: 'en', label: 'English (EN)' },
            { value: 'ar', label: 'Arabic (العربية) — RTL' },
            { value: 'ru', label: 'Russian (Русский)' },
            { value: 'zh', label: 'Chinese (中文)' },
          ]}
          onChange={(v) => setTweak('lang', v)}
        />

        <TweakSection label="Demo nav" />
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <button className="twk-btn" onClick={() => setRoute({ name: 'home' })}>Home</button>
          <button className="twk-btn" onClick={() => setRoute({ name: 'yacht', slug: 'lucien' })}>Lucien</button>
          <button className="twk-btn" onClick={() => setRoute({ name: 'yacht', slug: 'sky-fall' })}>Sky Fall</button>
          <button className="twk-btn" onClick={() => setRoute({ name: 'fleet' })}>Fleet</button>
        </div>
      </TweaksPanel>
    </>
  );
}

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