// ── Leo: a 3D AI robot avatar that follows the cursor (CSS 3D) ────────
const { useState, useEffect, useRef } = React;

const NAVA = ['Our work', 'Services', 'Approach', 'Contact'];

function Avatar() {
  const scene = useRef(null);
  const intensity = useRef(1);

  useEffect(() => {
    const el = scene.current;
    if (!el) return;
    let raf, tx = 0, ty = 0, cx = 0, cy = 0;
    const move = (e) => {
      const r = el.getBoundingClientRect();
      const p = e.touches ? e.touches[0] : e;
      tx = ((p.clientX - r.left) / r.width - 0.5) * 2;
      ty = ((p.clientY - r.top) / r.height - 0.5) * 2;
    };
    const loop = () => {
      cx += (tx - cx) * 0.08;
      cy += (ty - cy) * 0.08;
      const k = intensity.current;
      el.style.setProperty('--px', (cx * k).toFixed(3));
      el.style.setProperty('--py', (cy * k).toFixed(3));
      raf = requestAnimationFrame(loop);
    };
    window.addEventListener('pointermove', move);
    window.addEventListener('touchmove', move, { passive: true });
    raf = requestAnimationFrame(loop);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('pointermove', move); window.removeEventListener('touchmove', move); };
  }, []);

  return { scene, intensity };
}

function AvatarScene({ intensityRef, sceneRef }) {
  return (
    <div className="av-scene" ref={sceneRef}>
      <div className="av-glow-bg" />
      <div className="av-ghost">LEAP</div>

      <div className="av-scaler">
        <div className="av-tilt">
          <div className="av-float">
            <div className="robot">
              {/* antenna */}
              <span className="ant-stalk" />
              <span className="ant-ball" />
              {/* ears / audio pods */}
              <span className="ear ear-l" />
              <span className="ear ear-r" />
              {/* head faces */}
              <div className="hf hf-back" />
              <div className="hf hf-left" />
              <div className="hf hf-right" />
              <div className="hf hf-top" />
              <div className="hf hf-bottom" />
              <div className="hf hf-front">
                <div className="visor">
                  <div className="eye eye-l"><span className="eye-light" /></div>
                  <div className="eye eye-r"><span className="eye-light" /></div>
                  <div className="mouth">
                    <i /><i /><i /><i />
                  </div>
                </div>
                <span className="cheek cheek-l" />
                <span className="cheek cheek-r" />
              </div>
            </div>
          </div>
        </div>
        <div className="av-shadow" />
      </div>
    </div>
  );
}

const AV_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandHex": "#1B7340",
  "glow": "#2FE08A",
  "follow": 1,
  "showGhost": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(AV_DEFAULTS);
  const av = Avatar();

  useEffect(() => {
    const r = document.documentElement.style;
    const hex = (t.brandHex && /^#?[0-9a-fA-F]{3,8}$/.test(t.brandHex.trim()))
      ? (t.brandHex.trim().startsWith('#') ? t.brandHex.trim() : '#' + t.brandHex.trim()) : '#1B7340';
    r.setProperty('--accent', hex);
    r.setProperty('--glow', t.glow);
    r.setProperty('--ghost-op', t.showGhost ? '0.5' : '0');
  }, [t.brandHex, t.glow, t.showGhost]);

  useEffect(() => { av.intensity.current = t.follow; }, [t.follow]);

  return (
    <React.Fragment>
    <StickyNav />
    <MobileMenu />
    <section id="top" className="av-section" data-screen-label="AI Avatar Hero">
      <div className="nav3d">
        <img className="nav-logo" src="uploads/logo-1B7340.png" alt="Leaptechnology" />
        <nav>{[['Services','#services'],['Work','#work'],['Approach','#approach'],['Playground','index.html']].map(([l,h]) => <a key={h} href={h} className="cine-nav">{l}</a>)}</nav>
        <a href="#" className="cine-cta cine-cta--sm"><span>Start a project</span></a>
      </div>

      <AvatarScene sceneRef={av.scene} intensityRef={av.intensity} />

      <div className="copy3d">
        <p className="eyebrow3d">AI-powered software studio</p>
        <h1 className="head3d"><WordsPullUp text="Redefine what's possible." style={{ justifyContent: 'flex-start' }} /></h1>
        <p className="tag3d">Your vision is the melody; our technology, the harmony. We turn web, mobile, CRM and loyalty into a symphony of success.</p>
        <a href="#contact" className="cine-cta"><span>Take a leap</span><span className="cine-cta-dot"><IconArrow size={17} /></span></a>
      </div>
    </section>

    <AvServices />
    <EnQuoteSpotlight />
    <AvStats />
    <AvWork />
    <AvApproach />
    <AvContact />

      <TweaksPanel>
        <TweakSection label="Brand colour" />
        <TweakText label="Brand hex" value={t.brandHex} placeholder="#1B7340" onChange={(v) => setTweak('brandHex', v)} />
        <TweakColor label="Or pick" value={t.brandHex} options={['#1B7340', '#0E7A55', '#16794F', '#1F8A3B']} onChange={(v) => setTweak('brandHex', v)} />
        <TweakSection label="Robot" />
        <TweakColor label="Eye glow" value={t.glow} options={['#2FE08A', '#38E0C0', '#9EE05A', '#E0C24A']} onChange={(v) => setTweak('glow', v)} />
        <TweakSlider label="Cursor follow" value={t.follow} min={0.3} max={1.8} step={0.1} onChange={(v) => setTweak('follow', v)} />
        <TweakToggle label="Ghost word" value={t.showGhost} onChange={(v) => setTweak('showGhost', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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