// ColdOcean — App composition

function CoTweaksPanel({ tweaks, setTweaks }) {
  const accents = [
    { name: 'Flame',  flame: '#ff5a1f', amber: '#ffa726', acid: '#e4ff3f' },
    { name: 'Acid',   flame: '#e4ff3f', amber: '#c8e82a', acid: '#ff5a1f' },
    { name: 'Blood',  flame: '#e11d48', amber: '#f43f5e', acid: '#fde047' },
    { name: 'Electric', flame: '#a855f7', amber: '#d946ef', acid: '#e4ff3f' },
  ];
  const applyAccent = (a) => {
    const r = document.documentElement;
    r.style.setProperty('--co-flame', a.flame);
    r.style.setProperty('--co-amber', a.amber);
    r.style.setProperty('--co-acid', a.acid);
  };
  React.useEffect(() => { applyAccent(accents[tweaks.accentIdx]); }, [tweaks.accentIdx]);

  return (
    <div className="co-tweaks">
      <h4>TWEAKS</h4>
      <label>
        <span>ACCENT</span>
        <div className="swatches">
          {accents.map((a, i) => (
            <div key={a.name}
              className={`swatch ${i === tweaks.accentIdx ? 'active' : ''}`}
              style={{ background: a.flame }}
              onClick={() => setTweaks({ ...tweaks, accentIdx: i })}
              title={a.name}
            />
          ))}
        </div>
      </label>
      <label>
        <span>DENSITY</span>
        <input type="range" min="0.4" max="2" step="0.1" value={tweaks.density}
          onChange={(e) => setTweaks({ ...tweaks, density: +e.target.value })} />
      </label>
      <label>
        <span>SPEED</span>
        <input type="range" min="0.3" max="2.5" step="0.1" value={tweaks.speed}
          onChange={(e) => setTweaks({ ...tweaks, speed: +e.target.value })} />
      </label>
    </div>
  );
}

function CoCursor() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    let x = 0, y = 0, tx = 0, ty = 0;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    const anim = () => {
      x += (tx - x) * 0.25;
      y += (ty - y) * 0.25;
      if (el) el.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      requestAnimationFrame(anim);
    };
    const over = (e) => {
      const t = e.target.closest('a, button, .co-btn, .co-case, .co-tool-row, .co-pillar, .co-usecase');
      if (t) el.classList.add('hover'); else el.classList.remove('hover');
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseover', over);
    anim();
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseover', over);
    };
  }, []);
  return <div ref={ref} className="co-cursor" />;
}

function useScrollReveal() {
  // Disabled — scroll reveal was causing sections to render blank on some
  // layouts. Sections now render immediately (no fade).
}

function CoSite({ direction }) {
  const [tweaks, setTweaks] = React.useState(/*EDITMODE-BEGIN*/{
    "accentIdx": 0,
    "density": 1,
    "speed": 1
  }/*EDITMODE-END*/);

  useScrollReveal();

  const [tweaksVisible, setTweaksVisible] = React.useState(false);
  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setTweaksVisible(true);
      if (d.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);
  React.useEffect(() => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: tweaks }, '*');
  }, [tweaks]);

  return (
    <div className="co-root" data-direction={direction}>
      <CoHero direction={direction} tweaks={tweaks} />
      <CoPillars />
      <CoUseCases />
      <CoWorkflow />
      <CoStack />
      <CoCaseStudies />
      <CoStats />
      <CoTestimonials />
      <CoCTA />
      <CoFooter />
      {tweaksVisible && <CoTweaksPanel tweaks={tweaks} setTweaks={setTweaks} />}
    </div>
  );
}

window.CoSite = CoSite;
window.CoCursor = CoCursor;