/* Visual components: abstract tech imagery — servers, networks, dashboards */
const { useEffect, useRef, useState } = React;

/* Reveal-on-scroll hook */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) {
      els.forEach(e => e.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -80px 0px', threshold: 0.05 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* Mild parallax driver */
function useParallax() {
  useEffect(() => {
    let ticking = false;
    const items = Array.from(document.querySelectorAll('[data-parallax]'));
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const vh = window.innerHeight;
        items.forEach(el => {
          const rect = el.getBoundingClientRect();
          const speed = parseFloat(el.dataset.parallax || '0.08');
          const center = rect.top + rect.height / 2;
          const delta = (center - vh / 2) * speed;
          el.style.transform = `translate3d(0, ${(-delta).toFixed(1)}px, 0)`;
        });
        ticking = false;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
}

/* ───── Hero composition: a "rack + dashboard" abstract scene ───── */
function HeroComposition() {
  return (
    <div className="hero-visual">
      <svg viewBox="0 0 640 600" width="100%" height="100%" aria-hidden="true">
        <defs>
          <linearGradient id="cardG" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#16161b"/>
            <stop offset="1" stopColor="#0b0b0e"/>
          </linearGradient>
          <linearGradient id="redG" x1="0" x2="1">
            <stop offset="0" stopColor="#ff2a2a"/>
            <stop offset="1" stopColor="#b00811"/>
          </linearGradient>
          <linearGradient id="sweep" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="rgba(225,10,23,0)" />
            <stop offset=".5" stopColor="rgba(225,10,23,.55)" />
            <stop offset="1" stopColor="rgba(225,10,23,0)" />
          </linearGradient>
          <radialGradient id="glow" cx=".5" cy=".5" r=".5">
            <stop offset="0" stopColor="rgba(255,42,42,.45)" />
            <stop offset="1" stopColor="rgba(255,42,42,0)" />
          </radialGradient>
        </defs>

        {/* faint grid */}
        <g opacity="0.12" stroke="#fff" strokeWidth="0.5">
          {Array.from({length:12}).map((_,i)=>(
            <line key={`v${i}`} x1={i*55+20} y1="20" x2={i*55+20} y2="580"/>
          ))}
          {Array.from({length:12}).map((_,i)=>(
            <line key={`h${i}`} x1="20" y1={i*50+20} x2="620" y2={i*50+20}/>
          ))}
        </g>

        {/* main dashboard card */}
        <g transform="translate(60,80)">
          <rect width="420" height="290" rx="18" fill="url(#cardG)" stroke="rgba(255,255,255,0.1)"/>
          {/* top bar */}
          <g transform="translate(20,18)">
            <circle cx="6" cy="6" r="4" fill="#ff5f57"/>
            <circle cx="22" cy="6" r="4" fill="#febc2e"/>
            <circle cx="38" cy="6" r="4" fill="#28c840"/>
            <rect x="60" y="0" width="140" height="12" rx="3" fill="rgba(255,255,255,0.06)"/>
          </g>
          {/* dashboard kpis */}
          <g transform="translate(20,50)" fontFamily="JetBrains Mono, monospace">
            <text x="0" y="14" fill="rgba(255,255,255,0.5)" fontSize="9" letterSpacing="2">UPTIME</text>
            <text x="0" y="36" fill="#fff" fontSize="22" fontWeight="600">99.7%</text>
            <text x="120" y="14" fill="rgba(255,255,255,0.5)" fontSize="9" letterSpacing="2">HOSTS</text>
            <text x="120" y="36" fill="#fff" fontSize="22" fontWeight="600">24</text>
            <text x="220" y="14" fill="rgba(255,255,255,0.5)" fontSize="9" letterSpacing="2">CHAMADOS</text>
            <text x="220" y="36" fill="#fff" fontSize="22" fontWeight="600">0</text>
          </g>
          {/* chart */}
          <g transform="translate(20,110)">
            <path d="M0,90 L40,72 L80,80 L120,55 L160,62 L200,40 L240,46 L280,28 L320,34 L360,18 L380,22"
              fill="none" stroke="url(#redG)" strokeWidth="2" />
            <path d="M0,90 L40,72 L80,80 L120,55 L160,62 L200,40 L240,46 L280,28 L320,34 L360,18 L380,22 L380,150 L0,150 Z"
              fill="url(#redG)" opacity="0.12" />
            {/* axis dots */}
            {Array.from({length:8}).map((_,i)=>(
              <line key={i} x1={i*55} y1="0" x2={i*55} y2="150" stroke="rgba(255,255,255,0.06)" />
            ))}
          </g>
          {/* sweep highlight */}
          <rect x="0" y="0" width="420" height="290" rx="18" fill="url(#sweep)" opacity="0.4">
            <animate attributeName="x" values="-420;420" dur="6s" repeatCount="indefinite"/>
          </rect>
        </g>

        {/* server rack */}
        <g transform="translate(380,180)">
          <rect width="200" height="320" rx="14" fill="url(#cardG)" stroke="rgba(255,255,255,0.1)"/>
          {Array.from({length:7}).map((_,i)=>(
            <g key={i} transform={`translate(14,${20+i*42})`}>
              <rect width="172" height="32" rx="6" fill="#0a0a0d" stroke="rgba(255,255,255,0.06)"/>
              <circle cx="14" cy="16" r="3.2" fill={i===2?"#ff2a2a":"#3aff7f"}>
                {i===2 && <animate attributeName="opacity" values="1;0.3;1" dur="1.6s" repeatCount="indefinite"/>}
              </circle>
              <rect x="28" y="11" width="60" height="3" rx="1.5" fill="rgba(255,255,255,0.18)"/>
              <rect x="28" y="18" width="36" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
              <g transform="translate(110,8)" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="rgba(255,255,255,0.35)">
                <text y="9">NODE-{String(i+1).padStart(2,'0')}</text>
                <text y="20">ON</text>
              </g>
            </g>
          ))}
        </g>

        {/* connection lines */}
        <g stroke="rgba(255,42,42,0.5)" strokeWidth="1.2" fill="none">
          <path d="M 480,260 C 530,260 530,400 580,400" strokeDasharray="4 4">
            <animate attributeName="stroke-dashoffset" values="0;-16" dur="1.4s" repeatCount="indefinite"/>
          </path>
          <path d="M 240,420 C 280,460 380,500 480,500" strokeDasharray="4 4">
            <animate attributeName="stroke-dashoffset" values="0;-16" dur="1.4s" repeatCount="indefinite"/>
          </path>
        </g>

        {/* floating nodes */}
        <g>
          <circle cx="540" cy="80" r="36" fill="url(#glow)"/>
          <circle cx="540" cy="80" r="14" fill="#0f0f12" stroke="rgba(255,255,255,0.2)"/>
          <text x="540" y="84" textAnchor="middle" fill="#fff" fontSize="10" fontFamily="JetBrains Mono, monospace">WAN</text>
        </g>
        <g>
          <circle cx="100" cy="500" r="30" fill="url(#glow)" opacity="0.7"/>
          <circle cx="100" cy="500" r="12" fill="#0f0f12" stroke="rgba(255,255,255,0.2)"/>
        </g>
      </svg>
    </div>
  );
}

/* Small reusable visuals for detalhe blocks */
function ComputerVisual() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      <defs>
        <linearGradient id="screenG" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#1a1a20"/>
          <stop offset="1" stopColor="#0a0a0e"/>
        </linearGradient>
      </defs>
      {/* notebook */}
      <g transform="translate(50,60)">
        <rect width="300" height="180" rx="8" fill="#15151a" stroke="rgba(255,255,255,0.08)"/>
        <rect x="10" y="10" width="280" height="160" rx="4" fill="url(#screenG)"/>
        {/* code-like lines */}
        <g transform="translate(24,30)" fontFamily="JetBrains Mono, monospace" fontSize="8">
          <rect x="0" y="0" width="40" height="3" rx="1.5" fill="#ff2a2a" opacity="0.7"/>
          <rect x="46" y="0" width="80" height="3" rx="1.5" fill="rgba(255,255,255,0.4)"/>
          <rect x="12" y="12" width="120" height="3" rx="1.5" fill="rgba(255,255,255,0.25)"/>
          <rect x="12" y="24" width="60" height="3" rx="1.5" fill="rgba(255,255,255,0.4)"/>
          <rect x="80" y="24" width="40" height="3" rx="1.5" fill="rgba(255,42,42,0.7)"/>
          <rect x="0" y="36" width="20" height="3" rx="1.5" fill="rgba(255,255,255,0.25)"/>
          <rect x="24" y="36" width="60" height="3" rx="1.5" fill="rgba(255,255,255,0.4)"/>
        </g>
        {/* perf gauge */}
        <g transform="translate(170,90)">
          <rect width="110" height="70" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.06)"/>
          <text x="10" y="20" fill="rgba(255,255,255,0.5)" fontSize="7" fontFamily="JetBrains Mono, monospace" letterSpacing="1">PERFORMANCE</text>
          <text x="10" y="44" fill="#fff" fontSize="18" fontWeight="600">+ 64%</text>
          <rect x="10" y="52" width="90" height="3" rx="1.5" fill="rgba(255,255,255,0.1)"/>
          <rect x="10" y="52" width="64" height="3" rx="1.5" fill="#ff2a2a"/>
        </g>
        {/* hinge */}
        <rect x="-6" y="180" width="312" height="6" rx="2" fill="#1a1a1f"/>
      </g>
    </svg>
  );
}

function NetworkVisual() {
  const nodes = [
    {x:80, y:80}, {x:200, y:60}, {x:320, y:90},
    {x:60, y:180}, {x:200, y:150}, {x:340, y:180},
    {x:120, y:250}, {x:280, y:240}
  ];
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      <defs>
        <radialGradient id="ng" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,.5)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
      </defs>
      {/* central router */}
      <circle cx="200" cy="150" r="60" fill="url(#ng)"/>
      {/* lines */}
      <g stroke="rgba(255,255,255,0.18)" strokeWidth="1">
        {nodes.map((n,i) => (
          <line key={i} x1="200" y1="150" x2={n.x} y2={n.y}/>
        ))}
      </g>
      {/* animated pulse on a couple */}
      <g stroke="rgba(255,42,42,0.7)" strokeWidth="1.4" fill="none">
        <line x1="200" y1="150" x2="80" y2="80" strokeDasharray="3 6">
          <animate attributeName="stroke-dashoffset" values="0;-18" dur="1.4s" repeatCount="indefinite"/>
        </line>
        <line x1="200" y1="150" x2="280" y2="240" strokeDasharray="3 6">
          <animate attributeName="stroke-dashoffset" values="0;-18" dur="1.4s" repeatCount="indefinite"/>
        </line>
      </g>
      {nodes.map((n,i) => (
        <g key={i}>
          <circle cx={n.x} cy={n.y} r="11" fill="#0f0f12" stroke="rgba(255,255,255,0.18)"/>
          <rect x={n.x-4} y={n.y-3} width="8" height="6" rx="1" fill="rgba(255,255,255,0.35)"/>
        </g>
      ))}
      <g>
        <circle cx="200" cy="150" r="22" fill="#0f0f12" stroke="rgba(255,42,42,0.6)" strokeWidth="1.4"/>
        <text x="200" y="155" textAnchor="middle" fontSize="10" fill="#fff" fontFamily="JetBrains Mono, monospace">CORE</text>
      </g>
    </svg>
  );
}

function ServerVisual() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      <g transform="translate(110,30)">
        <rect width="180" height="240" rx="10" fill="#0f0f12" stroke="rgba(255,255,255,0.1)"/>
        {Array.from({length:6}).map((_,i) => (
          <g key={i} transform={`translate(12,${18+i*36})`}>
            <rect width="156" height="28" rx="5" fill="#08080a" stroke="rgba(255,255,255,0.05)"/>
            <circle cx="12" cy="14" r="3" fill={i===1 ? "#ff2a2a" : "#3aff7f"}/>
            <rect x="24" y="9" width="50" height="3" rx="1.5" fill="rgba(255,255,255,0.2)"/>
            <rect x="24" y="16" width="34" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
            <g transform="translate(104,7)" fontFamily="JetBrains Mono, monospace" fontSize="6.5" fill="rgba(255,255,255,0.35)">
              <text y="8">DISK-{String.fromCharCode(65+i)}</text>
              <text y="18">{['64TB','32TB','16TB','64TB','32TB','64TB'][i]}</text>
            </g>
          </g>
        ))}
      </g>
      {/* backup arrows */}
      <g stroke="rgba(255,42,42,0.7)" strokeWidth="1.2" fill="none">
        <path d="M 60,150 C 90,150 90,120 110,120" strokeDasharray="4 4">
          <animate attributeName="stroke-dashoffset" values="0;-16" dur="1.6s" repeatCount="indefinite"/>
        </path>
        <path d="M 290,180 C 320,180 320,210 340,210" strokeDasharray="4 4">
          <animate attributeName="stroke-dashoffset" values="0;-16" dur="1.6s" repeatCount="indefinite"/>
        </path>
      </g>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.4)">
        <text x="20" y="155">backup</text>
        <text x="345" y="215">cloud</text>
      </g>
    </svg>
  );
}

function SupportVisual() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      {/* chat window */}
      <g transform="translate(40,40)">
        <rect width="320" height="220" rx="12" fill="#0f0f12" stroke="rgba(255,255,255,0.1)"/>
        <rect width="320" height="36" rx="12" fill="rgba(255,255,255,0.03)"/>
        <circle cx="18" cy="18" r="6" fill="#ff2a2a"/>
        <rect x="34" y="14" width="80" height="3" rx="1.5" fill="rgba(255,255,255,0.4)"/>
        <rect x="34" y="22" width="40" height="3" rx="1.5" fill="rgba(255,255,255,0.18)"/>
        {/* messages */}
        <g transform="translate(18,52)">
          <rect width="140" height="36" rx="10" fill="rgba(255,255,255,0.06)"/>
          <rect x="10" y="11" width="120" height="3" rx="1.5" fill="rgba(255,255,255,0.5)"/>
          <rect x="10" y="20" width="86" height="3" rx="1.5" fill="rgba(255,255,255,0.25)"/>
        </g>
        <g transform="translate(160,104)">
          <rect width="140" height="36" rx="10" fill="#ff2a2a" opacity="0.95"/>
          <rect x="10" y="11" width="120" height="3" rx="1.5" fill="rgba(255,255,255,0.85)"/>
          <rect x="10" y="20" width="64" height="3" rx="1.5" fill="rgba(255,255,255,0.6)"/>
        </g>
        <g transform="translate(18,156)">
          <rect width="100" height="36" rx="10" fill="rgba(255,255,255,0.06)"/>
          <rect x="10" y="11" width="80" height="3" rx="1.5" fill="rgba(255,255,255,0.5)"/>
          <rect x="10" y="20" width="46" height="3" rx="1.5" fill="rgba(255,255,255,0.25)"/>
        </g>
        {/* typing indicator */}
        <g transform="translate(180,170)">
          <circle cx="0" cy="0" r="3" fill="rgba(255,255,255,0.45)">
            <animate attributeName="opacity" values="0.3;1;0.3" dur="1.2s" repeatCount="indefinite"/>
          </circle>
          <circle cx="10" cy="0" r="3" fill="rgba(255,255,255,0.45)">
            <animate attributeName="opacity" values="0.3;1;0.3" dur="1.2s" begin="0.2s" repeatCount="indefinite"/>
          </circle>
          <circle cx="20" cy="0" r="3" fill="rgba(255,255,255,0.45)">
            <animate attributeName="opacity" values="0.3;1;0.3" dur="1.2s" begin="0.4s" repeatCount="indefinite"/>
          </circle>
        </g>
      </g>
    </svg>
  );
}

/* small icons used in svc grid / dif grid */
function Icon({ name, size = 18 }) {
  const s = size;
  const stroke = "currentColor";
  const sw = 1.6;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case 'monitor': return <svg {...common}><rect x="2" y="4" width="20" height="14" rx="2"/><path d="M8 22h8M12 18v4"/></svg>;
    case 'laptop':  return <svg {...common}><rect x="3" y="5" width="18" height="11" rx="2"/><path d="M2 20h20"/></svg>;
    case 'cloud':   return <svg {...common}><path d="M17 18a4 4 0 0 0 1-7.9 6 6 0 0 0-11.7-1A4 4 0 0 0 7 18h10z"/></svg>;
    case 'wifi':    return <svg {...common}><path d="M5 12.55a11 11 0 0 1 14 0M2 8.82a16 16 0 0 1 20 0M8.5 16.43a6 6 0 0 1 7 0"/><circle cx="12" cy="20" r="0.6" fill={stroke}/></svg>;
    case 'server':  return <svg {...common}><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><path d="M7 7h.01M7 17h.01"/></svg>;
    case 'printer': return <svg {...common}><path d="M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>;
    case 'shield':  return <svg {...common}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case 'cog':     return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1c0 .7.4 1.3 1 1.5a1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.2.6.8 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>;
    case 'database':return <svg {...common}><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v6c0 1.7 4 3 9 3s9-1.3 9-3V5M3 11v6c0 1.7 4 3 9 3s9-1.3 9-3v-6"/></svg>;
    case 'lifebuoy':return <svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/><path d="M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M14.83 9.17l4.24-4.24M14.83 9.17l4.24-4.24M4.93 19.07l4.24-4.24"/></svg>;
    case 'route':   return <svg {...common}><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="5" r="2.5"/><path d="M8 19h7a4 4 0 0 0 0-8h-6a4 4 0 0 1 0-8h7"/></svg>;
    case 'check':   return <svg {...common}><polyline points="20 6 9 17 4 12"/></svg>;
    case 'compass': return <svg {...common}><circle cx="12" cy="12" r="9"/><polygon points="16 8 14 14 8 16 10 10"/></svg>;
    case 'arrow':   return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'plus':    return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'pin':     return <svg {...common}><path d="M12 22s7-7 7-13a7 7 0 0 0-14 0c0 6 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'sparkle': return <svg {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>;
    case 'lock':    return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case 'whats':   return <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A11 11 0 0 0 3.4 17.3L2 22l4.9-1.3A11 11 0 1 0 20.5 3.5zM12 20a8 8 0 0 1-4.2-1.2l-.3-.2-2.9.8.8-2.8-.2-.3A8 8 0 1 1 20 12a8 8 0 0 1-8 8zm4.6-5.9c-.3-.1-1.5-.7-1.8-.8-.2-.1-.4-.1-.6.1-.2.2-.7.8-.8 1-.2.2-.3.2-.6.1-.3-.1-1.1-.4-2-1.3a8 8 0 0 1-1.5-1.8c-.1-.3 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5 0-.2 0-.4 0-.5-.1-.1-.6-1.5-.9-2-.2-.5-.5-.5-.7-.5h-.5c-.2 0-.5.1-.7.3-.3.3-1 .9-1 2.3 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3z"/></svg>;
    default: return null;
  }
}

window.HeroComposition = HeroComposition;
window.ComputerVisual = ComputerVisual;
window.NetworkVisual = NetworkVisual;
window.ServerVisual = ServerVisual;
window.SupportVisual = SupportVisual;
window.Icon = Icon;
window.useReveal = useReveal;
window.useParallax = useParallax;
