// App root — full Attora site. Signal hero + sections 2-7.
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [tweaks, setTweaks] = useStateA(window.__ATTORA_TWEAKS__ || {
    variation: 'signal', accentHue: 42, motionIntensity: 'full', headlineIndex: 0,
  });
  const [waitlistOpen, setWaitlistOpen] = useStateA(false);

  // Accent hue → CSS var (lower lightness/darker for blood-red range)
  useEffectA(() => {
    const h = tweaks.accentHue;
    // Blood-red range (hue 15-30): go darker + more chromatic
    const isRed = h >= 10 && h <= 35;
    const L = isRed ? 0.48 : 0.78;
    const C = isRed ? 0.18 : 0.11;
    document.documentElement.style.setProperty('--accent', `oklch(${L} ${C} ${h})`);
    document.documentElement.style.setProperty('--accent-soft', `oklch(${L} ${C} ${h} / 0.18)`);
  }, [tweaks.accentHue]);

  // Custom cursor — the dot IS the cursor. No native cursor on desktop.
  useEffectA(() => {
    if (window.matchMedia('(pointer: coarse)').matches) return;

    // Hide native cursor everywhere on desktop (inputs still get the text caret)
    const cursorStyle = document.createElement('style');
    cursorStyle.textContent = `
      html, body, * { cursor: none !important; }
      input, textarea { cursor: text !important; }
    `;
    document.head.appendChild(cursorStyle);

    const dot = document.createElement('div');
    dot.id = 'attora-cursor-dot';
    dot.style.cssText = `
      position: fixed; top: 0; left: 0;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--accent);
      opacity: 0;
      pointer-events: none;
      z-index: 2147483646;
      mix-blend-mode: screen;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 16px var(--accent);
      transition: opacity 200ms ease, width 160ms ease, height 160ms ease;
      will-change: left, top;
    `;
    document.body.appendChild(dot);

    const onMove = (e) => {
      dot.style.left = e.clientX + 'px';
      dot.style.top = e.clientY + 'px';
      dot.style.opacity = '1';
      // Grow slightly over interactive elements
      const hit = e.target?.closest?.('button, a, input, textarea, [role=button]');
      if (hit) {
        dot.style.width = '18px';
        dot.style.height = '18px';
      } else {
        dot.style.width = '10px';
        dot.style.height = '10px';
      }
    };
    const onLeave = () => { dot.style.opacity = '0'; };
    window.addEventListener('pointermove', onMove, { passive: true });
    window.addEventListener('pointerleave', onLeave);

    return () => {
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerleave', onLeave);
      dot.remove();
      cursorStyle.remove();
    };
  }, []);

  const headline = HEADLINES[tweaks.headlineIndex] || HEADLINES[0];
  const openWaitlist = () => setWaitlistOpen(true);

  return (
    <React.Fragment>
      <SignalVariation headline={headline} tweaks={tweaks} openWaitlist={openWaitlist} />
      <ShapeSection />
      <TridentSection />
      <InsideSection />
      <MoatSection />
      <CTASection openWaitlist={openWaitlist} />
      <Footer />
      <WaitlistModal open={waitlistOpen} onClose={() => setWaitlistOpen(false)} />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />
    </React.Fragment>
  );
}

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