/* Hadef & Partners — root app */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "heritage",
  "displayFont": "Cormorant",
  "rtl": false,
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const [page, setPageRaw] = useState({ name: "home" });
  const [lang, setLang] = useState("en");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // wire window.LOCALE for the simple t() helper used in components
  useEffect(() => {
    window.LOCALE = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
    document.documentElement.lang = lang;
    window.dispatchEvent(new Event("locale-change"));
  }, [lang]);

  // sync the rtl tweak with the actual lang toggle (rtl on = arabic)
  useEffect(() => {
    if (tweaks.rtl && lang !== "ar") setLang("ar");
    if (!tweaks.rtl && lang === "ar") setLang("en");
    // eslint-disable-next-line
  }, [tweaks.rtl]);

  // apply palette tweak
  useEffect(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette);
  }, [tweaks.palette]);

  // apply display font tweak
  useEffect(() => {
    const map = {
      Cormorant: "'Cormorant Garamond', 'EB Garamond', serif",
      Playfair:  "'Playfair Display', 'EB Garamond', serif",
      Tenor:     "'Tenor Sans', 'Helvetica Neue', sans-serif",
    };
    document.documentElement.style.setProperty("--display", map[tweaks.displayFont] || map.Cormorant);
  }, [tweaks.displayFont]);

  // density tweak
  useEffect(() => {
    if (tweaks.density === "compact") {
      document.documentElement.style.setProperty("--section-y", "clamp(56px, 6vw, 100px)");
      document.documentElement.style.setProperty("--gutter", "clamp(16px, 3vw, 40px)");
    } else {
      document.documentElement.style.setProperty("--section-y", "clamp(80px, 9vw, 160px)");
      document.documentElement.style.setProperty("--gutter", "clamp(20px, 4vw, 56px)");
    }
  }, [tweaks.density]);

  // wrap setPage to scroll to top on nav (unless scroll target provided)
  const setPage = (next) => {
    setPageRaw(next);
    if (!next.scroll) window.scrollTo({top:0, behavior:'instant'});
  };

  const dataScreenLabel =
    page.name === "home" ? "01 Home" :
    page.name === "expertise" ? "02 Expertise Hub" :
    page.name === "practice" ? `03 Practice — ${page.slug}` :
    page.name === "people" ? "04 People Hub" :
    page.name === "lawyer" ? `05 Lawyer — ${page.slug}` :
    page.name === "insights" ? "06 Insights Hub" :
    page.name === "article" ? `07 Article — ${page.slug}` :
    page.name === "about" ? "08 About" :
    page.name === "contact" ? "09 Contact" :
    page.name === "awards" ? "10 Awards" :
    page.name === "careers" ? "11 Careers" :
    page.name;

  let pageEl = null;
  switch (page.name) {
    case "home":      pageEl = <HomePage setPage={setPage}/>; break;
    case "expertise": pageEl = <ExpertisePage setPage={setPage}/>; break;
    case "practice":  pageEl = <PracticePage setPage={setPage} slug={page.slug}/>; break;
    case "people":    pageEl = <PeoplePage setPage={setPage}/>; break;
    case "lawyer":    pageEl = <LawyerPage setPage={setPage} slug={page.slug}/>; break;
    case "insights":  pageEl = <InsightsPage setPage={setPage}/>; break;
    case "article":   pageEl = <ArticlePage setPage={setPage} slug={page.slug}/>; break;
    case "about":     pageEl = <AboutPage setPage={setPage} scroll={page.scroll}/>; break;
    case "contact":   pageEl = <ContactPage setPage={setPage} scroll={page.scroll} practice={page.practice} lawyer={page.lawyer}/>; break;
    case "awards":    pageEl = <AwardsPage setPage={setPage}/>; break;
    case "careers":   pageEl = <CareersPage setPage={setPage}/>; break;
    default:          pageEl = <HomePage setPage={setPage}/>;
  }

  return (
    <div data-screen-label={dataScreenLabel}>
      <Navbar page={page} setPage={setPage} lang={lang} setLang={setLang}/>
      {pageEl}
      <Footer setPage={setPage}/>
      <StickyCTA setPage={setPage}/>
      <HadefTweaks tweaks={tweaks} setTweak={setTweak} setPage={setPage}/>
    </div>
  );
}

/* ============ TWEAKS PANEL ============ */
function HadefTweaks({ tweaks, setTweak, setPage }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakColor
          label="Theme"
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "heritage", colors: ["#0F1A2B","#F4EFE5","#A8884F"] },
            { value: "marine",   colors: ["#0B2330","#F1ECE2","#3A7E92"] },
            { value: "sand",     colors: ["#2B2114","#EFE5D2","#B86A2C"] },
          ]}
        />
      </TweakSection>

      <TweakSection title="Display type">
        <TweakRadio
          value={tweaks.displayFont}
          onChange={(v) => setTweak("displayFont", v)}
          options={[
            { value: "Cormorant", label: "Cormorant" },
            { value: "Playfair",  label: "Playfair" },
            { value: "Tenor",     label: "Tenor" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Density">
        <TweakRadio
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "comfortable", label: "Editorial" },
            { value: "compact",     label: "Compact" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Locale">
        <TweakToggle
          label="Arabic / RTL"
          value={tweaks.rtl}
          onChange={(v) => setTweak("rtl", v)}
        />
      </TweakSection>

      <TweakSection title="Jump to page">
        <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
          {[
            ["home","Home"],["expertise","Expertise"],
            ["practice","Practice","corporate-ma"],
            ["people","People"],
            ["lawyer","Lawyer","sadiq-jafar"],
            ["insights","Insights"],
            ["article","Article","hadef-highlights"],
            ["about","About"],["contact","Contact"],
            ["awards","Awards"],["careers","Careers"],
          ].map(([n,label,slug]) =>
            <button key={n} onClick={() => setPage({name:n, slug})}
              style={{
                fontFamily:'ui-monospace,monospace',
                fontSize:10, letterSpacing:'.06em', textTransform:'uppercase',
                padding:'5px 9px', border:'1px solid rgba(0,0,0,.15)',
                background:'#fff', cursor:'pointer', color:'#1f2937'
              }}>{label}</button>
          )}
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

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