// PAR GROUP — app root with refreshed Tweaks integration

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "palette": ["#C73A2A", "#8E2618"],
  "displayFont": "Archivo",
  "monoFont": "JetBrains Mono",
  "density": "regular",
  "heroVariant": "photo",
  "crosshair": true,
  "animations": true,
  "showJobMeta": true
}/*EDITMODE-END*/;

const PALETTES = [
  ["#C73A2A", "#8E2618"],   // oxide red (default)
  ["#3E7CB1", "#2A5681"],   // engineer blue
  ["#E6B015", "#A6800B"],   // hi-vis yellow
  ["#7A8C3A", "#566526"],   // moss / olive
  ["#EDE6D6", "#B8B2A4"],   // monochrome cream
];

const DISPLAY_FONTS = ['Archivo', 'Space Grotesk', 'DM Serif Display', 'Anton'];
const MONO_FONTS = ['JetBrains Mono', 'IBM Plex Mono', 'Geist Mono'];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lbIdx, setLbIdx] = useStateA(-1);

  // Apply tweaks live
  useEffectA(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.palette[0]);
    r.style.setProperty('--accent-2', t.palette[1]);
    r.style.setProperty('--display', `"${t.displayFont}", Helvetica, Arial, sans-serif`);
    r.style.setProperty('--mono', `"${t.monoFont}", ui-monospace, Menlo, monospace`);
    const padOuter = {
      compact: 'clamp(16px, 3vw, 36px)',
      regular: 'clamp(20px, 4vw, 56px)',
      comfy:   'clamp(28px, 5vw, 80px)',
    };
    r.style.setProperty('--pad', padOuter[t.density] || padOuter.regular);
    r.setAttribute('data-theme', t.theme);
  }, [t.palette, t.displayFont, t.monoFont, t.density, t.theme]);

  // Job-meta visibility
  useEffectA(() => {
    document.body.classList.toggle('hide-jobmeta', !t.showJobMeta);
  }, [t.showJobMeta]);

  // Animation toggle
  useEffectA(() => {
    document.body.classList.toggle('no-anim', !t.animations);
  }, [t.animations]);

  // Smooth scroll
  useEffectA(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      const el = id ? document.getElementById(id) : null;
      if (el) {
        e.preventDefault();
        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  // Reveal observer — best-effort, IO sometimes doesn't fire in embedded
  // iframes. CSS treats .reveal as always-visible regardless.
  useEffectA(() => {
    if (!('IntersectionObserver' in window)) return;
    try {
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
      }, { threshold: 0, rootMargin: '0px 0px -10% 0px' });
      document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
      return () => io.disconnect();
    } catch (_) { /* ignore */ }
  }, []);

  // Lightbox photo list (mirror of CaseStudy)
  const lbItems = [
    { src: window.__resources.imgGrandSteelBeam,     tag: 'Phase 03 · Primary steel installed' },
    { src: window.__resources.imgStripOutBay,        tag: 'Phase 01 · Strip out to brick' },
    { src: window.__resources.imgFloorFrame,          tag: 'Phase 04 · New first-floor framing' },
    { src: window.__resources.imgLoftBrickwork,       tag: 'Phase 05 · Loft enclosure' },
    { src: window.__resources.imgBeamsOverhead,       tag: 'Phase 03 · Red oxide steels overhead' },
    { src: window.__resources.imgBricksFoundations,   tag: 'Phase 02 · Rear underpinning & brick' },
  ];

  return (
    <React.Fragment>
      {t.showJobMeta && (
        <div className="edge-rail">
          PAR · GROUP / / STRUCTURAL BUILDS / / LONDON · SE / / N° {new Date().getFullYear()}
        </div>
      )}

      <Nav />
      <Hero variant={t.heroVariant} onCrosshair={t.crosshair} />
      <Strip />
      <Services />
      <CaseStudy onPhoto={setLbIdx} />
      <Process />
      <About />
      <Contact />
      <Foot />

      <WhatsAppFab />

      <Lightbox
        open={lbIdx >= 0}
        items={lbItems}
        idx={Math.max(0, lbIdx)}
        onClose={() => setLbIdx(-1)}
        onNav={(d) => setLbIdx((i) => (i + d + lbItems.length) % lbItems.length)}
      />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={['dark', 'paper']}
          onChange={(v) => setTweak('theme', v)} />
        <TweakColor
          label="Accent"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)} />

        <TweakSection label="Hero" />
        <TweakRadio
          label="Variant"
          value={t.heroVariant}
          options={['photo', 'blueprint']}
          onChange={(v) => setTweak('heroVariant', v)} />
        <TweakToggle
          label="Cursor crosshair"
          value={t.crosshair}
          onChange={(v) => setTweak('crosshair', v)} />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Display"
          value={t.displayFont}
          options={DISPLAY_FONTS}
          onChange={(v) => setTweak('displayFont', v)} />
        <TweakSelect
          label="Mono"
          value={t.monoFont}
          options={MONO_FONTS}
          onChange={(v) => setTweak('monoFont', v)} />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)} />
        <TweakToggle
          label="Animations"
          value={t.animations}
          onChange={(v) => setTweak('animations', v)} />
        <TweakToggle
          label="Job-log meta"
          value={t.showJobMeta}
          onChange={(v) => setTweak('showJobMeta', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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