// Main app — routing, language, tweaks
const { useState: useState_, useEffect: useEffect_ } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "champagne",
  "displayFont": "Cormorant Garamond",
  "bodyFont": "Inter",
  "language": "en"
}/*EDITMODE-END*/;

const PALETTES = {
  champagne: {
    name: 'Champagne',
    vars: { '--paper': '#F6F1EA', '--cream': '#EFE7DB', '--blush': '#EBD7CF', '--ink': '#1F1B17', '--noir': '#161311', '--muted': '#7A6E62', '--line': '#D9CFC1', '--hairline': '#E5DCCE', '--champagne': '#B58552', '--champagne-deep': '#8E6638' },
  },
  rose: {
    name: 'Dusty Rose',
    vars: { '--paper': '#F7F0EC', '--cream': '#EFE0DA', '--blush': '#E8C7BE', '--ink': '#2A1F1C', '--noir': '#1A1311', '--muted': '#7E665E', '--line': '#DEC8BE', '--hairline': '#E9D7CD', '--champagne': '#B47C6C', '--champagne-deep': '#8A574A' },
  },
  sage: {
    name: 'Olive & Cream',
    vars: { '--paper': '#F4F2EA', '--cream': '#E7E5D5', '--blush': '#D8DAC2', '--ink': '#1F2018', '--noir': '#13140E', '--muted': '#6E7060', '--line': '#CDCFBA', '--hairline': '#DEE0CB', '--champagne': '#7E8A5C', '--champagne-deep': '#5A663D' },
  },
  noir: {
    name: 'Noir & Gold',
    vars: { '--paper': '#EFEAE0', '--cream': '#E2D8C5', '--blush': '#D9C9AE', '--ink': '#161311', '--noir': '#0D0B0A', '--muted': '#6E6253', '--line': '#C9BBA0', '--hairline': '#DAC9AB', '--champagne': '#C09553', '--champagne-deep': '#8A6730' },
  },
};

const DISPLAY_FONTS = ['Cormorant Garamond', 'Playfair Display', 'DM Serif Display', 'EB Garamond'];
const BODY_FONTS = ['Inter', 'Work Sans', 'Outfit'];

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState_('home');
  const [routeParams, setRouteParams] = useState_({});
  const [lang, setLang] = useState_(tweaks.language || 'en');
  const t = I18N[lang];

  // Apply palette
  useEffect_(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.champagne;
    Object.entries(p.vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [tweaks.palette]);

  // Apply fonts via inline style
  useEffect_(() => {
    let id = document.getElementById('__dyn_fonts');
    if (!id) { id = document.createElement('link'); id.id = '__dyn_fonts'; id.rel = 'stylesheet'; document.head.appendChild(id); }
    const d = encodeURIComponent(tweaks.displayFont).replace(/%20/g, '+');
    const b = encodeURIComponent(tweaks.bodyFont).replace(/%20/g, '+');
    id.href = `https://fonts.googleapis.com/css2?family=${d}:ital,wght@0,300;0,400;0,500;1,300;1,400&family=${b}:wght@300;400;500&display=swap`;
    let s = document.getElementById('__dyn_font_style');
    if (!s) { s = document.createElement('style'); s.id = '__dyn_font_style'; document.head.appendChild(s); }
    s.textContent = `
      body { font-family: '${tweaks.bodyFont}', system-ui, sans-serif; }
      .serif { font-family: '${tweaks.displayFont}', 'Times New Roman', serif; }
      [dir="rtl"] body { font-family: 'Noto Kufi Arabic', '${tweaks.bodyFont}', sans-serif; }
      [dir="rtl"] .serif { font-family: 'Noto Kufi Arabic', '${tweaks.displayFont}', serif !important; font-weight: 500 !important; }
    `;
  }, [tweaks.displayFont, tweaks.bodyFont]);

  // Apply lang/dir
  useEffect_(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
  }, [lang]);

  // Reset scroll on route change
  useEffect_(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [route, routeParams.id]);

  const navigate = (r, params = {}) => { setRoute(r); setRouteParams(params); };
  const onEnquire = () => navigate('contact');

  // Decide if hero is dark (homepage and detail page have transparent dark hero)
  const heroDark = route === 'home' || route === 'detail';

  let page;
  if (route === 'home') page = <HomePage t={t} lang={lang} navigate={navigate} onEnquire={onEnquire} />;
  else if (route === 'weddings') page = <WeddingsPage t={t} lang={lang} navigate={navigate} />;
  else if (route === 'detail') page = <WeddingDetailPage t={t} lang={lang} navigate={navigate} id={routeParams.id} onEnquire={onEnquire} />;
  else if (route === 'services') page = <ServicesPage t={t} lang={lang} onEnquire={onEnquire} />;
  else if (route === 'about') page = <AboutPage t={t} lang={lang} navigate={navigate} onEnquire={onEnquire} />;
  else if (route === 'contact') page = <ContactPage t={t} lang={lang} />;
  else page = <HomePage t={t} lang={lang} navigate={navigate} onEnquire={onEnquire} />;

  return (
    <div data-screen-label={`${route}`}>
      <Navbar t={t} route={route} navigate={navigate} onEnquire={onEnquire} lang={lang} setLang={setLang} dark={heroDark} />
      <main>{page}</main>
      <Footer t={t} navigate={navigate} onEnquire={onEnquire} lang={lang} setLang={setLang} />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette" subtitle="Curated for warm romantic / editorial moods.">
          <TweakColor
            label="Theme"
            value={tweaks.palette}
            options={Object.entries(PALETTES).map(([k, v]) => ({ value: k, label: v.name, colors: [v.vars['--paper'], v.vars['--champagne'], v.vars['--ink']] }))}
            onChange={v => setTweak('palette', v)}
          />
        </TweakSection>
        <TweakSection title="Type">
          <TweakSelect label="Display serif" value={tweaks.displayFont} options={DISPLAY_FONTS} onChange={v => setTweak('displayFont', v)} />
          <TweakSelect label="Body sans" value={tweaks.bodyFont} options={BODY_FONTS} onChange={v => setTweak('bodyFont', v)} />
        </TweakSection>
        <TweakSection title="Language">
          <TweakRadio label="Locale" value={lang} options={[{ value: 'en', label: 'English' }, { value: 'ar', label: 'العربية' }]} onChange={v => setLang(v)} />
        </TweakSection>
      </TweaksPanel>
      <PageStyles />
    </div>
  );
}

// Custom TweakColor that displays palette swatches
function TweakColor({ label, value, options, onChange }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 10 }}>{label}</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
        {options.map(o => (
          <button key={o.value} onClick={() => onChange(o.value)} style={{
            padding: '10px 12px', border: `1px solid ${value === o.value ? '#fff' : 'rgba(255,255,255,0.16)'}`,
            background: value === o.value ? 'rgba(255,255,255,0.08)' : 'transparent',
            color: '#fff', cursor: 'pointer', borderRadius: 8, textAlign: 'left',
            display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, fontFamily: 'inherit',
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2, flexShrink: 0 }}>
              {o.colors.map((c, i) => (
                <div key={i} style={{ width: 22, height: 6, background: c, borderRadius: 1 }} />
              ))}
            </div>
            <span>{o.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function PageStyles() {
  return (
    <style>{`
      .card-hover:hover .card-img { transform: scale(1.04); }
      .service-card:hover .service-img { transform: scale(1.04); }
      .nav-desktop a:hover { opacity: 1 !important; }
      input::placeholder, textarea::placeholder { color: rgba(31,27,23,0.35); }
      input:focus, textarea:focus, select:focus { border-bottom-color: var(--champagne) !important; }
      select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
      [dir="rtl"] select { background-position: 16px 18px, 11px 18px; padding-right: 0; padding-left: 28px; }
      @media (max-width: 980px) {
        .nav-desktop { display: none !important; }
        section > div { padding: 80px 24px !important; }
      }
    `}</style>
  );
}

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