/* Hero section with canvas node animation */
(function() {
const { useEffect, useRef } = React;

function HeroSection() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let raf, w, h;

    const resize = () => {
      w = canvas.width = canvas.offsetWidth;
      h = canvas.height = canvas.offsetHeight;
    };
    resize();
    window.addEventListener('resize', resize);

    // Nodes
    const NODE_COUNT = 52;
    const nodes = Array.from({ length: NODE_COUNT }, (_, i) => ({
      x: Math.random() * w, y: Math.random() * h,
      vx: (Math.random() - 0.5) * 0.28, vy: (Math.random() - 0.5) * 0.28,
      r: Math.random() * 1.8 + 0.6,
      type: i % 7 === 0 ? 'hub' : 'node',
      pulse: Math.random() * Math.PI * 2,
    }));

    // Floating UI rectangles
    const panels = [
      { x: 0.72, y: 0.22, w: 160, h: 68, label: 'Stock Overview', val: '4,812 items', color: '#2E8FFF' },
      { x: 0.18, y: 0.55, w: 148, h: 60, label: 'Pending Approvals', val: '24 requests', color: '#F5A623' },
      { x: 0.78, y: 0.65, w: 152, h: 60, label: 'CO Pilot Alert', val: '3 critical signals', color: '#00C9A7' },
      { x: 0.10, y: 0.28, w: 140, h: 56, label: 'Purchase Orders', val: '117 open', color: '#8A9BB0' },
    ];
    let panelOpacity = 0;

    let t = 0;
    const draw = () => {
      t += 0.008;
      panelOpacity = Math.min(1, panelOpacity + 0.004);
      ctx.clearRect(0, 0, w, h);

      // Grid dots
      ctx.fillStyle = 'rgba(42,51,70,0.5)';
      for (let gx = 0; gx < w; gx += 48) {
        for (let gy = 0; gy < h; gy += 48) {
          ctx.beginPath(); ctx.arc(gx, gy, 0.8, 0, Math.PI * 2); ctx.fill();
        }
      }

      // Connections
      nodes.forEach((a, i) => {
        nodes.forEach((b, j) => {
          if (j <= i) return;
          const dx = a.x - b.x, dy = a.y - b.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < 140) {
            const alpha = (1 - dist / 140) * 0.22;
            ctx.beginPath();
            ctx.strokeStyle = `rgba(46,143,255,${alpha})`;
            ctx.lineWidth = 0.7;
            ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
          }
        });
      });

      // Nodes
      nodes.forEach(n => {
        n.x += n.vx; n.y += n.vy; n.pulse += 0.04;
        if (n.x < 0 || n.x > w) n.vx *= -1;
        if (n.y < 0 || n.y > h) n.vy *= -1;

        if (n.type === 'hub') {
          const pr = n.r * 3 + Math.sin(n.pulse) * 1.5;
          const grad = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, pr * 4);
          grad.addColorStop(0, 'rgba(46,143,255,0.5)');
          grad.addColorStop(1, 'rgba(46,143,255,0)');
          ctx.beginPath(); ctx.arc(n.x, n.y, pr * 4, 0, Math.PI * 2);
          ctx.fillStyle = grad; ctx.fill();
          ctx.beginPath(); ctx.arc(n.x, n.y, pr, 0, Math.PI * 2);
          ctx.fillStyle = '#2E8FFF'; ctx.fill();
        } else {
          ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(138,155,176,0.5)'; ctx.fill();
        }
      });

      // Floating panels
      panels.forEach((p, i) => {
        const px = p.x * w - p.w / 2;
        const py = p.y * h + Math.sin(t + i * 1.2) * 6 - p.h / 2;
        const alpha = panelOpacity * (0.7 + Math.sin(t * 0.5 + i) * 0.15);

        ctx.save();
        ctx.globalAlpha = alpha;
        // Panel bg
        ctx.fillStyle = 'rgba(17,19,24,0.85)';
        ctx.strokeStyle = `${p.color}44`;
        ctx.lineWidth = 1;
        roundRect(ctx, px, py, p.w, p.h, 8);
        ctx.fill(); ctx.stroke();

        // Accent line
        ctx.fillStyle = p.color;
        ctx.fillRect(px + 12, py + 10, 3, p.h - 20);

        // Label
        ctx.fillStyle = '#4A5568';
        ctx.font = '10px Inter, sans-serif';
        ctx.fillText(p.label.toUpperCase(), px + 22, py + 22);

        // Value
        ctx.fillStyle = '#F0F2F5';
        ctx.font = '600 13px JetBrains Mono, monospace';
        ctx.fillText(p.val, px + 22, py + 40);

        ctx.restore();
      });

      raf = requestAnimationFrame(draw);
    };

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

  const sectionStyle = {
    position: 'relative', minHeight: '100vh', display: 'flex',
    alignItems: 'center', justifyContent: 'center',
    overflow: 'hidden', paddingTop: '60px',
  };

  const canvasStyle = {
    position: 'absolute', inset: 0, width: '100%', height: '100%',
    pointerEvents: 'none',
  };

  const overlayStyle = {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse 60% 70% at 50% 50%, rgba(10,11,13,0) 0%, rgba(10,11,13,0.7) 100%)',
    pointerEvents: 'none',
  };

  const contentStyle = {
    position: 'relative', zIndex: 2, textAlign: 'center',
    maxWidth: '780px', padding: '0 24px',
  };

  const overlineStyle = {
    fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: 600,
    letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2E8FFF',
    marginBottom: '24px', display: 'block',
  };

  const headlineStyle = {
    fontFamily: 'DM Sans, sans-serif', fontWeight: 600, fontSize: 'clamp(42px, 6vw, 72px)',
    lineHeight: 1.05, letterSpacing: '-0.035em', color: '#F0F2F5',
    marginBottom: '24px',
  };

  const subStyle = {
    fontFamily: 'Inter, sans-serif', fontSize: '17px', fontWeight: 400,
    color: '#8A9BB0', lineHeight: 1.65, maxWidth: '560px', margin: '0 auto 40px',
  };

  const ctaRow = { display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' };

  const btnPrimary = {
    fontFamily: 'Inter, sans-serif', fontSize: '14px', fontWeight: 500,
    color: '#fff', background: '#2E8FFF', border: 'none', borderRadius: '6px',
    padding: '12px 28px', cursor: 'pointer', transition: 'all 220ms',
    boxShadow: '0 0 28px rgba(46,143,255,0.35)',
  };
  const btnSecondary = {
    fontFamily: 'Inter, sans-serif', fontSize: '14px', fontWeight: 500,
    color: '#F0F2F5', background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(255,255,255,0.1)', borderRadius: '6px',
    padding: '12px 28px', cursor: 'pointer', transition: 'all 220ms',
  };

  const statsRow = {
    display: 'flex', gap: '48px', justifyContent: 'center',
    marginTop: '72px', paddingTop: '40px',
    borderTop: '1px solid rgba(255,255,255,0.06)',
  };
  const statItem = { textAlign: 'center' };
  const statVal = { fontFamily: 'DM Sans, sans-serif', fontSize: '32px', fontWeight: 600, color: '#F0F2F5', display: 'block', letterSpacing: '-0.03em' };
  const statLbl = { fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#4A5568', marginTop: '4px', display: 'block' };

  return (
    <section id="top" style={sectionStyle}>
      <canvas ref={canvasRef} style={canvasStyle}></canvas>
      <div style={overlayStyle}></div>

      <div style={contentStyle}>
        <span className="reveal" style={overlineStyle}>Enterprise Operations Platform</span>
        <h1 className="reveal reveal-delay-1" style={headlineStyle}>
          Unify warehouse,<br />procurement, and<br />field operations.
        </h1>
        <p className="reveal reveal-delay-2" style={subStyle}>
          Operasis helps multi-site organizations manage stock, approvals, receiving, transfers, and operational visibility from one platform.
        </p>
        <div className="reveal reveal-delay-3" style={ctaRow}>
          <button style={btnPrimary}
            onMouseEnter={e => { e.target.style.filter='brightness(1.1)'; e.target.style.boxShadow='0 0 40px rgba(46,143,255,0.5)'; }}
            onMouseLeave={e => { e.target.style.filter=''; e.target.style.boxShadow='0 0 28px rgba(46,143,255,0.35)'; }}>
            Request Demo
          </button>
          <button style={btnSecondary}
            onMouseEnter={e => { e.target.style.background='rgba(255,255,255,0.1)'; }}
            onMouseLeave={e => { e.target.style.background='rgba(255,255,255,0.06)'; }}>
            Watch Product Flow
          </button>
          <button style={{...btnSecondary, color: '#8A9BB0', borderColor: 'rgba(255,255,255,0.07)'}}
            onMouseEnter={e => { e.target.style.color='#F0F2F5'; e.target.style.background='rgba(255,255,255,0.06)'; }}
            onMouseLeave={e => { e.target.style.color='#8A9BB0'; e.target.style.background='transparent'; }}>
            Book 30-min Introduction
          </button>
        </div>

        <div className="reveal reveal-delay-4" style={statsRow}>
          {[['Multi-site','Operations Ready'],['Web + Mobile','Unified Platform'],['Request → Stock','Full Traceability'],['Role-based','Access Control']].map(([v,l]) => (
            <div key={v} style={statItem}>
              <span style={statVal}>{v}</span>
              <span style={statLbl}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function roundRect(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y); ctx.quadraticCurveTo(x + w, y, x + w, y + r);
  ctx.lineTo(x + w, y + h - r); ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
  ctx.lineTo(x + r, y + h); ctx.quadraticCurveTo(x, y + h, x, y + h - r);
  ctx.lineTo(x, y + r); ctx.quadraticCurveTo(x, y, x + r, y);
  ctx.closePath();
}

Object.assign(window, { HeroSection });
})();