/* Momo Studio — main app, tweaks panel, palette swap */

const { useState: useStateApp, useEffect: useEffectApp, useMemo: useMemoApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "earth",
  "fontHeading": "fraunces",
  "fontBody": "inter",
  "portfolioMode": "discs",
  "tagline": "Landscape planning and design rooted in Georgia\u2019s protected places \u2014 from canopy walks above old-growth forest to courtyards in Tbilisi.",
  "showGrain": true
}/*EDITMODE-END*/;

const PALETTES = {
  earth: {
    label: 'Earth',
    vars: {
      '--bg':'#f1ece1','--bg-deep':'#e7dfd0','--paper':'#faf6ec',
      '--ink':'#2a2620','--ink-soft':'#5b544a',
      '--moss':'#4f5d3b','--moss-2':'#6e7f55',
      '--clay':'#b25e3a','--clay-2':'#d18a5a',
      '--sand':'#c9b896','--line':'#cbc1ad',
    }
  },
  forest: {
    label: 'Forest',
    vars: {
      '--bg':'#ecede4','--bg-deep':'#d8dccc','--paper':'#f6f7ee',
      '--ink':'#1f2419','--ink-soft':'#4a5240',
      '--moss':'#2d3a23','--moss-2':'#56693f',
      '--clay':'#7d5a35','--clay-2':'#a47c4d',
      '--sand':'#bbb38d','--line':'#bcc1ac',
    }
  },
  clay: {
    label: 'Clay',
    vars: {
      '--bg':'#f5ede2','--bg-deep':'#ecdcc4','--paper':'#fbf3e6',
      '--ink':'#2c1f15','--ink-soft':'#6a5340',
      '--moss':'#7d7547','--moss-2':'#9a956b',
      '--clay':'#a04323','--clay-2':'#cc6f43',
      '--sand':'#d8b48a','--line':'#d4c2a4',
    }
  },
  monochrome: {
    label: 'Monochrome',
    vars: {
      '--bg':'#efece6','--bg-deep':'#dedbd3','--paper':'#f7f5f0',
      '--ink':'#1a1a1a','--ink-soft':'#525050',
      '--moss':'#2c2c2c','--moss-2':'#5a5a5a',
      '--clay':'#7a4a35','--clay-2':'#9c6a4f',
      '--sand':'#b8b4ac','--line':'#c8c4bc',
    }
  },
  dawn: {
    label: 'Dawn',
    vars: {
      '--bg':'#f4ebe5','--bg-deep':'#e8d6c8','--paper':'#fbf2eb',
      '--ink':'#2b1f1c','--ink-soft':'#6b554c',
      '--moss':'#5e6651','--moss-2':'#84876b',
      '--clay':'#c4684a','--clay-2':'#dc8b6a',
      '--sand':'#dcc09e','--line':'#d6c4b3',
    }
  },
};

const FONTS = {
  heading: {
    fraunces:    { stack:`"Fraunces", "Cormorant Garamond", Georgia, serif`, label:'Fraunces' },
    cormorant:   { stack:`"Cormorant Garamond", Georgia, serif`, label:'Cormorant' },
    tenor:       { stack:`"Tenor Sans", "Cormorant Garamond", Georgia, serif`, label:'Tenor Sans' },
    playfair:    { stack:`"Playfair Display", Georgia, serif`, label:'Playfair' },
    instrument:  { stack:`"Instrument Serif", Georgia, serif`, label:'Instrument' },
  },
  body: {
    inter:       { stack:`"Inter", system-ui, sans-serif`, label:'Inter' },
    manrope:     { stack:`"Manrope", "Inter", system-ui, sans-serif`, label:'Manrope' },
    spectral:    { stack:`"Spectral", Georgia, serif`, label:'Spectral (serif)' },
    grotesk:     { stack:`"Space Grotesk", "Inter", system-ui, sans-serif`, label:'Space Grotesk' },
  }
};

function applyTweaks(t) {
  const root = document.documentElement;
  const p = PALETTES[t.palette] || PALETTES.earth;
  Object.entries(p.vars).forEach(([k,v]) => root.style.setProperty(k,v));
  root.style.setProperty('--serif', FONTS.heading[t.fontHeading]?.stack || FONTS.heading.fraunces.stack);
  root.style.setProperty('--sans',  FONTS.body[t.fontBody]?.stack       || FONTS.body.inter.stack);
  document.body.dataset.grain = t.showGrain ? 'on' : 'off';
}

function App() {
  const [tweaks, setTweaks] = useStateApp(TWEAK_DEFAULTS);
  const [active, setActive] = useStateApp(null);

  useEffectApp(() => { applyTweaks(tweaks); }, [tweaks]);

  // Reveal-on-scroll
  useEffectApp(() => {
    const els = document.querySelectorAll('.reveal, .reveal-clip');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => {
        if (en.isIntersecting) {
          en.target.classList.add('in');
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [active, tweaks.portfolioMode]);

  // Lock body scroll when case panel open
  useEffectApp(() => {
    document.body.style.overflow = active ? 'hidden' : '';
  }, [active]);

  // Scroll to hash after React mounts (handles cross-page anchor links)
  useEffectApp(() => {
    const hash = window.location.hash;
    if (!hash) return;
    const target = document.querySelector(hash);
    if (target) {
      setTimeout(() => target.scrollIntoView({ behavior: 'smooth' }), 100);
    }
  }, []);

  const setTweak = (key, value) => {
    const patch = (typeof key === 'object') ? key : { [key]: value };
    setTweaks(prev => ({ ...prev, ...patch }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  const site = window.LANDMARK_SITE || {};
  const contact = {
    email:    site['contact.email']    || 'studio@landmark.ge',
    phone:    site['contact.phone']    || '+995 32 555 0142',
    address:  site['contact.address']  || '14 Kote Apkhazi St., Tbilisi 0105, Georgia',
    linkedin: site['contact.linkedin'] || 'https://www.linkedin.com/company/landmark-studio-georgia/',
  };

  const heroSlides = (window.LANDMARK_HERO_SLIDES && window.LANDMARK_HERO_SLIDES.length)
    ? window.LANDMARK_HERO_SLIDES
    : [
        { src: 'images/hero-3.jpg' },
        { src: 'images/hero-2.jpg' },
        { src: 'images/hero-1.jpg' },
        { src: 'images/hero-4.jpg' },
      ];

  const heroTagline = site['hero.tagline'] || tweaks.tagline;

  return (
    <>
      <Nav />
      <HeroCarousel
        tagline={heroTagline}
        slides={heroSlides}
      />
      <About />
      <Team team={MOMO_TEAM} limit={5} allLink="Team.html" />
      <Portfolio
        projects={MOMO_PROJECTS}
        themes={MOMO_THEMES}
        onPick={setActive}
      />
      <Contact contact={contact} />
      <Footer />
      <CaseStudy item={active} onClose={()=>setActive(null)}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakSelect
          label="Color palette"
          value={tweaks.palette}
          onChange={(v)=>setTweak('palette', v)}
          options={Object.entries(PALETTES).map(([k,v]) => ({ value:k, label:v.label }))}
        />
        <TweakToggle
          label="Paper grain"
          value={tweaks.showGrain}
          onChange={(v)=>setTweak('showGrain', v)}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Headlines"
          value={tweaks.fontHeading}
          onChange={(v)=>setTweak('fontHeading', v)}
          options={Object.entries(FONTS.heading).map(([k,v]) => ({ value:k, label:v.label }))}
        />
        <TweakSelect
          label="Body"
          value={tweaks.fontBody}
          onChange={(v)=>setTweak('fontBody', v)}
          options={Object.entries(FONTS.body).map(([k,v]) => ({ value:k, label:v.label }))}
        />

        <TweakSection label="Portfolio" />
        <TweakRadio
          label="Default layout"
          value={tweaks.portfolioMode}
          onChange={(v)=>setTweak('portfolioMode', v)}
          options={[
            { value:'discs', label:'Constellation' },
            { value:'list',  label:'Index' },
          ]}
        />

        <TweakSection label="Hero" />
        <TweakText
          label="Tagline"
          value={tweaks.tagline}
          onChange={(v)=>setTweak('tagline', v)}
        />
      </TweaksPanel>
    </>
  );
}

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