/* Main app for Allsopp & Allsopp — Darren Murphy microsite */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy-classic",
  "heroLayout": "editorial",
  "displayFont": "serif",
  "density": "editorial",
  "language": "en"
}/*EDITMODE-END*/;

const PALETTES = {
  "navy-classic": {
    "--navy": "#002E53",
    "--navy-2": "#1B4A70",
    "--accent": "#002E53",
    "--accent-2": "#1B4A70",
    "--paper": "#FFFFFF",
    "--stone": "#F5F6F7",
    "--ink": "#14181C",
    "--ink-2": "#3a4250",
    "--line": "#E3E6EA",
    "--warm": "#F2EDE4"
  },
  "navy-sand": {
    "--navy": "#002E53",
    "--navy-2": "#1B4A70",
    "--accent": "#002E53",
    "--accent-2": "#B89D6A",
    "--paper": "#FBF8F2",
    "--stone": "#F2EDE4",
    "--ink": "#14181C",
    "--ink-2": "#3a4250",
    "--line": "#E5DDCC",
    "--warm": "#E8DEC8"
  },
  "navy-bronze": {
    "--navy": "#002E53",
    "--navy-2": "#1B4A70",
    "--accent": "#002E53",
    "--accent-2": "#8B5E34",
    "--paper": "#FFFFFF",
    "--stone": "#F5F2EC",
    "--ink": "#14181C",
    "--ink-2": "#3a4250",
    "--line": "#E0DAD0",
    "--warm": "#EFE6D6"
  },
  "mono-editorial": {
    "--navy": "#14181C",
    "--navy-2": "#3a4250",
    "--accent": "#14181C",
    "--accent-2": "#3a4250",
    "--paper": "#FFFFFF",
    "--stone": "#F4F4F4",
    "--ink": "#14181C",
    "--ink-2": "#3a4250",
    "--line": "#E0E0E0",
    "--warm": "#EDEDED"
  }
};

const FONT_PAIRS = {
  serif: { display: "'Cormorant Garamond', 'EB Garamond', Georgia, serif", body: "'Inter', system-ui, sans-serif" },
  grotesque: { display: "'Inter Tight', 'Inter', system-ui, sans-serif", body: "'Inter', system-ui, sans-serif" }
};

function applyTokens(palette, fontKey, density) {
  const p = PALETTES[palette] || PALETTES["navy-classic"];
  const f = FONT_PAIRS[fontKey] || FONT_PAIRS.serif;
  const root = document.documentElement;
  Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));
  root.style.setProperty("--font-display", f.display);
  root.style.setProperty("--font-body", f.body);
  root.style.setProperty("--section-y", density === "compact" ? "64px" : "112px");
  root.style.setProperty("--container-x", density === "compact" ? "20px" : "40px");
  root.style.setProperty("--headline-size", density === "compact" ? "clamp(2.4rem, 4.5vw, 4.4rem)" : "clamp(2.8rem, 5.5vw, 5.6rem)");
}

// Palette swatches control — custom (Tweaks panel doesn't ship a palette grid)
function PaletteSwatches({ value, onChange }) {
  const items = [
    { v: "navy-classic", swatches: ["#002E53", "#1B4A70", "#FFFFFF"], label: "Classic" },
    { v: "navy-sand", swatches: ["#002E53", "#B89D6A", "#FBF8F2"], label: "Sand" },
    { v: "navy-bronze", swatches: ["#002E53", "#8B5E34", "#F5F2EC"], label: "Bronze" },
    { v: "mono-editorial", swatches: ["#14181C", "#3a4250", "#FFFFFF"], label: "Mono" }
  ];
  return (
    <div className="twk-row">
      <div className="twk-lbl"><span>Palette</span><span className="twk-val">{items.find(x => x.v === value)?.label}</span></div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"8px"}}>
        {items.map(it => {
          const active = value === it.v;
          return (
            <button key={it.v} type="button" onClick={() => onChange(it.v)}
              style={{
                display:"flex", alignItems:"center", gap:"8px", padding:"8px 10px",
                background: active ? "rgba(0,46,83,0.06)" : "transparent",
                border: active ? "1.5px solid #002E53" : "1px solid var(--twk-line, #e3e6ea)",
                borderRadius:"8px", cursor:"pointer", color:"inherit", textAlign:"left"
              }}>
              <span style={{display:"flex", gap:"2px"}}>
                <span style={{width:10, height:18, borderRadius:2, background:it.swatches[0]}}/>
                <span style={{width:6, height:18, borderRadius:2, background:it.swatches[1]}}/>
                <span style={{width:6, height:18, borderRadius:2, background:it.swatches[2], boxShadow:"inset 0 0 0 1px #e0e0e0"}}/>
              </span>
              <span style={{fontSize:12, fontWeight:500}}>{it.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookOpen, setBookOpen] = useState(false);

  useEffect(() => {
    applyTokens(t.palette, t.displayFont, t.density);
  }, [t.palette, t.displayFont, t.density]);

  useEffect(() => {
    document.documentElement.lang = t.language;
    document.documentElement.dir = t.language === "ar" ? "rtl" : "ltr";
  }, [t.language]);

  const copy = COPY[t.language] || COPY.en;
  const onLangToggle = () => setTweak("language", t.language === "en" ? "ar" : "en");

  return (
    <>
      <TopNav t={copy} lang={t.language} onLangToggle={onLangToggle} onBook={() => setBookOpen(true)}/>
      <main>
        <Hero t={copy} heroLayout={t.heroLayout} onBook={() => setBookOpen(true)}/>
        <About t={copy}/>
        <ListingsGrid t={copy}/>
        <Communities t={copy}/>
        <ValuationStrip t={copy} onBook={() => setBookOpen(true)}/>
        <Press t={copy}/>
        <Testimonials t={copy}/>
      </main>
      <Footer t={copy}/>
      <WhatsAppFab/>
      <StickyBar t={copy} onBook={() => setBookOpen(true)}/>
      <BookViewingModal open={bookOpen} onClose={() => setBookOpen(false)} t={copy}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual">
          <PaletteSwatches value={t.palette} onChange={v => setTweak("palette", v)}/>
          <TweakRadio label="Display font" value={t.displayFont}
            options={[{value:"serif", label:"Serif"},{value:"grotesque", label:"Grotesque"}]}
            onChange={v => setTweak("displayFont", v)}/>
        </TweakSection>
        <TweakSection label="Layout">
          <TweakSelect label="Hero layout" value={t.heroLayout}
            options={[
              {value:"editorial", label:"Editorial split"},
              {value:"cinematic", label:"Cinematic full-bleed"},
              {value:"magazine", label:"Magazine cover"}
            ]}
            onChange={v => setTweak("heroLayout", v)}/>
          <TweakRadio label="Density" value={t.density}
            options={[{value:"editorial", label:"Editorial"},{value:"compact", label:"Compact"}]}
            onChange={v => setTweak("density", v)}/>
        </TweakSection>
        <TweakSection label="Locale">
          <TweakRadio label="Language" value={t.language}
            options={[{value:"en", label:"English"},{value:"ar", label:"عربي"}]}
            onChange={v => setTweak("language", v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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