const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentGlow": true,
  "tileAspect": "standard",
  "headerBlur": "20px"
}/*EDITMODE-END*/;

function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 9000,
      background: 'rgba(17,17,17,0.96)', backdropFilter: 'blur(16px)',
      border: '1px solid rgba(255,255,255,0.1)', borderRadius: 10,
      padding: '18px 20px', minWidth: 220,
      boxShadow: '0 24px 48px rgba(0,0,0,0.6)',
    }}>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.1em', color: 'var(--text-tertiary)', marginBottom: 14 }}>TWEAKS</div>

      <label style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, cursor: 'pointer' }}>
        <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Accent glow</span>
        <input type="checkbox" checked={tweaks.accentGlow}
          onChange={e => setTweaks(t => ({ ...t, accentGlow: e.target.checked }))}
          style={{ accentColor: 'var(--accent)' }} />
      </label>

      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 8 }}>Tile aspect ratio</div>
        {['standard', 'tall'].map(v => (
          <label key={v} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4, cursor: 'pointer' }}>
            <input type="radio" name="tileAspect" value={v} checked={tweaks.tileAspect === v}
              onChange={() => setTweaks(t => ({ ...t, tileAspect: v }))}
              style={{ accentColor: 'var(--accent)' }} />
            <span style={{ fontSize: 12, color: 'var(--text-tertiary)', textTransform: 'capitalize' }}>{v}</span>
          </label>
        ))}
      </div>

      <div>
        <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 8 }}>Header blur</div>
        {['8px', '20px', '32px'].map(v => (
          <label key={v} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4, cursor: 'pointer' }}>
            <input type="radio" name="headerBlur" value={v} checked={tweaks.headerBlur === v}
              onChange={() => setTweaks(t => ({ ...t, headerBlur: v }))}
              style={{ accentColor: 'var(--accent)' }} />
            <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{v}</span>
          </label>
        ))}
      </div>
    </div>
  );
}

function App() {
  const [scrolled, setScrolled] = useState(false);
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  // Sticky header
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Scroll reveal via IntersectionObserver
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  // Apply tweaks to CSS
  useEffect(() => {
    document.documentElement.style.setProperty('--tile-aspect', tweaks.tileAspect === 'tall' ? '3/4' : '4/3');
    if (!tweaks.accentGlow) {
      document.documentElement.style.setProperty('--accent-glow', 'rgba(59,130,246,0.1)');
    } else {
      document.documentElement.style.setProperty('--accent-glow', 'rgba(59,130,246,0.35)');
    }
  }, [tweaks]);

  // Tweaks panel message protocol
  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // Persist tweaks
  useEffect(() => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: tweaks }, '*');
  }, [tweaks]);

  return (
    <>
      <Header scrolled={scrolled} />
      <main>
        <Hero />
        <EquipmentSection />
        <SparePartsSection />
        <Delivery />

        <QuoteForm />
      </main>
      <Footer />



      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={tweaksVisible} />

      <style>{`
        .tile-img-wrap { aspect-ratio: var(--tile-aspect, 4/3); }
      `}</style>
    </>
  );
}

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