// ─────────────────────────────────────────────────────────
//  Hero — Mesh canvas + name lockup + VC dock
// ─────────────────────────────────────────────────────────

const { useEffect, useRef, useState } = React;

function MeshCanvas() {
  const ref = useRef(null);

  useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    let rect, mx = 0.5, my = 0.5, raf;
    const cols = 14, rows = 14;
    let pts = [];

    function size() {
      rect = canvas.getBoundingClientRect();
      canvas.width  = rect.width  * dpr;
      canvas.height = rect.height * dpr;
      pts = [];
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          pts.push({
            x: (j / (cols - 1)) * rect.width,
            y: (i / (rows - 1)) * rect.height,
            ox: (j / (cols - 1)) * rect.width,
            oy: (i / (rows - 1)) * rect.height,
            phase: Math.random() * Math.PI * 2,
          });
        }
      }
    }
    size();
    window.addEventListener('resize', size);

    canvas.addEventListener('mousemove', e => {
      const r = canvas.getBoundingClientRect();
      mx = (e.clientX - r.left) / r.width;
      my = (e.clientY - r.top) / r.height;
    });

    let t = 0;
    function frame() {
      t += 0.012;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, rect.width, rect.height);

      const pulseX = mx * rect.width;
      const pulseY = my * rect.height;

      // update positions
      for (const p of pts) {
        const dx = p.ox - pulseX;
        const dy = p.oy - pulseY;
        const d  = Math.sqrt(dx*dx + dy*dy);
        const influence = Math.max(0, 1 - d / 280);
        const wave = Math.sin(t + p.phase) * 3;
        p.x = p.ox + Math.cos(t * 0.6 + p.phase) * 2.5 + dx * influence * 0.25 + wave * 0.4;
        p.y = p.oy + Math.sin(t * 0.5 + p.phase) * 2.5 + dy * influence * 0.25 + wave * 0.4;
      }

      // draw lines (connections to neighbors)
      ctx.lineWidth = 0.5;
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          const idx = i * cols + j;
          const p = pts[idx];
          // right neighbor
          if (j < cols - 1) {
            const n = pts[idx + 1];
            const d = Math.hypot(p.x - n.x, p.y - n.y);
            const opacity = Math.max(0, 0.18 - d / 800);
            ctx.strokeStyle = `rgba(0, 242, 254, ${opacity})`;
            ctx.beginPath();
            ctx.moveTo(p.x, p.y); ctx.lineTo(n.x, n.y);
            ctx.stroke();
          }
          // down neighbor
          if (i < rows - 1) {
            const n = pts[idx + cols];
            ctx.strokeStyle = `rgba(0, 242, 254, 0.10)`;
            ctx.beginPath();
            ctx.moveTo(p.x, p.y); ctx.lineTo(n.x, n.y);
            ctx.stroke();
          }
        }
      }

      // draw points
      for (const p of pts) {
        const dx = p.ox - pulseX;
        const dy = p.oy - pulseY;
        const d  = Math.sqrt(dx*dx + dy*dy);
        const influence = Math.max(0, 1 - d / 240);
        const r = 0.8 + influence * 2.4;
        ctx.fillStyle = influence > 0.4
          ? `rgba(0, 242, 254, ${0.5 + influence * 0.5})`
          : `rgba(242, 239, 231, 0.4)`;
        ctx.beginPath();
        ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
        ctx.fill();
      }

      raf = requestAnimationFrame(frame);
    }
    frame();

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', size);
    };
  }, []);

  return <canvas ref={ref} />;
}

function Hero() {
  return (
    <section className="section hero shell" data-screen-label="Hero">
      <div className="hero-grid">
        <div>
          <div className="kicker">Independent studio · Jammu / Worldwide</div>
          <h1>
            Architecting<br/>
            <em>autonomous</em> systems<br/>
            &amp; immersive<br/>
            digital showrooms.
          </h1>
          <p className="sub">
            <strong>Rohit Sharma</strong> — Founder &amp; Principal Architect at WebBrandify.
            I bridge the gap between human intent and machine execution, turning legacy
            business workflows into multi-agent growth engines for premium enterprise
            and seed-to-Series-A teams.
          </p>

          <div className="dock">
            <a href="#audit" className="magnetic-trigger">
              <span className="dock-k">01 · Diagnose</span>
              <span className="dock-l">Free AI Site Audit<br/>60-second scan →</span>
            </a>
            <a href="#case" className="magnetic-trigger">
              <span className="dock-k">02 · Proof</span>
              <span className="dock-l">JK Realtors<br/>4-week rebuild →</span>
            </a>
            <a href="#booking" className="magnetic-trigger">
              <span className="dock-k">03 · Engage</span>
              <span className="dock-l">14-min walkthrough<br/>book with Rohit →</span>
            </a>
          </div>
        </div>

        <div className="mesh-wrap">
          <MeshCanvas />
          <div className="mesh-corner tl">
            <div>Signal Mesh</div>
            <div className="v">live</div>
          </div>
          <div className="mesh-corner tr">
            <div>Build #048</div>
            <div className="v">v.04 · 2026</div>
          </div>
          <div className="mesh-corner bl">
            <div>Lat / Lon</div>
            <div className="v">32.73°N · 74.86°E</div>
          </div>
          <div className="mesh-corner br">
            <div>Cursor →</div>
            <div className="v">tracking</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;