// Main App + Tweaks integration

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm",
  "density": "spacious",
  "hero": "split",
  "lang": "en"
}/*EDITMODE-END*/;

const PALETTE_OPTIONS = [
  ['#0B1F33', '#F3EEE5', '#C8923C'],   // warm — default
  ['#0B1F33', '#FFFFFF', '#0E7C86'],   // classic — navy/white/teal
  ['#0F1115', '#13283F', '#E0A93E']    // midnight — dark
];

const PALETTE_NAMES = ['warm', 'classic', 'midnight'];

// Apply palette via html data attribute and inline overrides
const applyPalette = (p) => {
  const root = document.documentElement;
  if (p === 'classic') {
    root.style.setProperty('--paper', '#FFFFFF');
    root.style.setProperty('--paper-2', '#F4F6F9');
    root.style.setProperty('--accent', '#0E7C86');
    root.style.setProperty('--accent-2', '#0A6A72');
    root.style.setProperty('--accent-tint', '#E6F4F5');
    root.style.setProperty('--accent-soft', '#B5DDDF');
    root.style.setProperty('--line', '#E5EAF0');
  } else if (p === 'midnight') {
    root.setAttribute('data-palette', 'midnight');
    root.style.setProperty('--paper', '#0F1115');
    root.style.setProperty('--paper-2', '#191C22');
    root.style.setProperty('--surface', '#191C22');
    root.style.setProperty('--text', '#F3EEE5');
    root.style.setProperty('--ink', '#F3EEE5');
    root.style.setProperty('--ink-2', '#22262E');
    root.style.setProperty('--ink-3', '#2D323C');
    root.style.setProperty('--muted', '#9AA3B0');
    root.style.setProperty('--muted-2', '#6B7280');
    root.style.setProperty('--line', '#2A2F38');
    root.style.setProperty('--line-dark', '#2A2F38');
    root.style.setProperty('--accent', '#E0A93E');
    root.style.setProperty('--accent-2', '#C8923C');
    root.style.setProperty('--accent-tint', '#2A241A');
    root.style.setProperty('--accent-soft', '#3D3520');
  } else {
    // warm (default) — clear overrides
    root.removeAttribute('data-palette');
    ['--paper','--paper-2','--surface','--text','--ink','--ink-2','--ink-3','--muted','--muted-2','--line','--line-dark','--accent','--accent-2','--accent-tint','--accent-soft'].forEach(k => root.style.removeProperty(k));
  }
};

const applyDensity = (d) => document.documentElement.setAttribute('data-density', d);
const applyLang = (lang) => {
  document.documentElement.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr');
  document.documentElement.setAttribute('lang', lang);
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);
  useEffect(() => { applyDensity(tweaks.density); }, [tweaks.density]);
  useEffect(() => { applyLang(tweaks.lang); }, [tweaks.lang]);

  return (
    <>
      <Nav lang={tweaks.lang} onLang={(l) => setTweak('lang', l)} />
      <Hero lang={tweaks.lang} variant={tweaks.hero} />
      <Services lang={tweaks.lang} />
      <Jurisdictions lang={tweaks.lang} />
      <Estimator lang={tweaks.lang} />
      <Leadership lang={tweaks.lang} />
      <Resources />
      <Reviews />
      <Contact lang={tweaks.lang} />
      <Footer />
      <WhatsAppFab />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor
          label="System"
          value={PALETTE_OPTIONS[PALETTE_NAMES.indexOf(tweaks.palette)] || PALETTE_OPTIONS[0]}
          onChange={v => {
            // v is one of our palette arrays; map back to name
            const idx = PALETTE_OPTIONS.findIndex(p => p[0] === v[0] && p[2] === v[2]);
            setTweak('palette', PALETTE_NAMES[idx === -1 ? 0 : idx]);
          }}
          options={PALETTE_OPTIONS}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={v => setTweak('density', v)}
          options={[
            { value: 'spacious', label: 'Spacious' },
            { value: 'compact', label: 'Compact' }
          ]}
        />
        <TweakRadio
          label="Hero style"
          value={tweaks.hero}
          onChange={v => setTweak('hero', v)}
          options={[
            { value: 'split', label: 'Image' },
            { value: 'centered', label: 'Type-led' }
          ]}
        />

        <TweakSection label="Language" />
        <TweakRadio
          label="Locale"
          value={tweaks.lang}
          onChange={v => setTweak('lang', v)}
          options={[
            { value: 'en', label: 'English' },
            { value: 'ar', label: 'العربية' }
          ]}
        />
      </TweaksPanel>
    </>
  );
};

// Patch: TweakColor doesn't natively support labels, so let's render a custom swatch row if labels prop
// Detection: if options are arrays of arrays we render palette swatches. Already supported in starter.

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