/* Horizons & Co — main app */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "saffron",
  "serif": "cormorant",
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  saffron:  { c1: '#F2C744', c2: '#C99B1F', name: 'Saffron (brand)' },
  rust:     { c1: '#D9744A', c2: '#A8512F', name: 'Rust' },
  olive:    { c1: '#A8A642', c2: '#7E7B26', name: 'Olive' },
  teal:     { c1: '#3F8C84', c2: '#2A6863', name: 'Teal' },
};

const SERIF_OPTIONS = {
  cormorant:  { family: 'Cormorant Garamond', name: 'Cormorant (default)' },
  playfair:   { family: 'Playfair Display', name: 'Playfair Display' },
  fraunces:   { family: 'Fraunces', name: 'Fraunces' },
  ibmplex:    { family: 'IBM Plex Serif', name: 'IBM Plex Serif' },
};

function App() {
  const [page, setPage] = useState('home');
  const [locale, setLocale] = useState('EN');
  const [modal, setModal] = useState({ open: false, prefill: null });
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply RTL on AR
  useEffect(() => {
    const root = document.documentElement;
    if (locale === 'AR') {
      root.classList.add('rtl');
      root.setAttribute('dir', 'rtl');
      root.setAttribute('lang', 'ar');
    } else {
      root.classList.remove('rtl');
      root.setAttribute('dir', 'ltr');
      root.setAttribute('lang', locale.toLowerCase());
    }
  }, [locale]);

  // Apply tweaks
  useEffect(() => {
    const root = document.documentElement;
    const a = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.saffron;
    root.style.setProperty('--saffron', a.c1);
    root.style.setProperty('--saffron-deep', a.c2);

    const s = SERIF_OPTIONS[tweaks.serif] || SERIF_OPTIONS.cormorant;
    document.querySelectorAll('style[data-serif-override]').forEach(n => n.remove());
    const style = document.createElement('style');
    style.dataset.serifOverride = '1';
    style.textContent = `
      .serif, .serif-tight, .practice-card .pc-title, .hero-h1, .section-head h2,
      .page-head h1, .insight-card .title, .award .band, .glance-cell .num, .outcome .stat,
      .expert-card .name, .footer .brand, .cta-block h3, .profile-content h1,
      .modal-aside h2, .office h4, .practice-hero h1, .timeline-step .yr,
      .value h4, .modal-success h2, .practice-list-row, .contact-form h3, .nav-logo {
        font-family: '${s.family}', 'Times New Roman', serif !important;
      }
    `;
    document.head.appendChild(style);
  }, [tweaks.accent, tweaks.serif]);

  const t = makeT(locale);
  const openConsult = (prefill) => setModal({ open: true, prefill });
  const closeConsult = () => setModal({ open: false, prefill: null });

  // Scroll to top on page change
  useEffect(() => { window.scrollTo({ top: 0 }); }, [page]);

  // Render page
  let content = null;
  if (page === 'home') content = <HomePage setPage={setPage} openConsult={openConsult} locale={locale} t={t} />;
  else if (page === 'practices') content = <PracticesPage setPage={setPage} locale={locale} />;
  else if (page.startsWith('practice/')) {
    content = <PracticeDetailPage id={page.split('/')[1]} setPage={setPage} openConsult={openConsult} />;
  }
  else if (page === 'experts') content = <ExpertsPage setPage={setPage} />;
  else if (page.startsWith('expert/')) {
    content = <ExpertProfilePage id={page.split('/')[1]} setPage={setPage} openConsult={openConsult} />;
  }
  else if (page === 'insights') content = <InsightsPage />;
  else if (page === 'about') content = <AboutPage openConsult={openConsult} />;
  else if (page === 'contact') content = <ContactPage openConsult={openConsult} />;

  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TSel = window.TweakSelect;
  const TR = window.TweakRadio;

  return (
    <div data-screen-label={'00 ' + page}>
      <Nav page={page} setPage={setPage} locale={locale} setLocale={setLocale} openConsult={() => openConsult(null)} t={t} />
      {content}
      <Footer setPage={setPage} />
      <ConsultModal open={modal.open} onClose={closeConsult} prefill={modal.prefill} />

      <TP title="Tweaks">
        <TS label="Brand accent">
          <TSel
            label="Palette"
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={Object.entries(ACCENT_PALETTES).map(([k, v]) => ({ value: k, label: v.name }))}
          />
        </TS>
        <TS label="Typography">
          <TSel
            label="Display serif"
            value={tweaks.serif}
            onChange={v => setTweak('serif', v)}
            options={Object.entries(SERIF_OPTIONS).map(([k, v]) => ({ value: k, label: v.name }))}
          />
        </TS>
        <TS label="Layout">
          <TR
            label="Density"
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'compact', label: 'Tight' },
              { value: 'regular', label: 'Regular' },
              { value: 'spacious', label: 'Airy' },
            ]}
          />
        </TS>
      </TP>
    </div>
  );
}

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