import { useEffect, useRef, useState } from "react";
import { ArrowRight, ShieldCheck, Sparkles } from "lucide-react";
import heroNetwork from "@/assets/hero-network.jpg";

const particles = Array.from({ length: 26 }, (_, i) => ({
  left: (i * 37) % 100,
  delay: (i % 9) * 1.4,
  duration: 9 + (i % 5) * 2.5,
  size: 2 + (i % 3),
}));

const nodes = [
  { x: 18, y: 34 },
  { x: 32, y: 58 },
  { x: 47, y: 26 },
  { x: 58, y: 62 },
  { x: 72, y: 38 },
  { x: 86, y: 54 },
];

export function Hero() {
  const ref = useRef<HTMLDivElement>(null);
  const [parallax, setParallax] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e: MouseEvent) => {
      const r = el.getBoundingClientRect();
      setParallax({
        x: (e.clientX - r.width / 2) / r.width,
        y: (e.clientY - r.height / 2) / r.height,
      });
    };
    el.addEventListener("mousemove", onMove);
    return () => el.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section
      id="top"
      ref={ref}
      className="relative flex min-h-screen items-center overflow-hidden bg-navy-deep pt-32 pb-20"
    >
      <img
        src={heroNetwork}
        alt="Global enterprise network visualization with cloud infrastructure and cybersecurity nodes"
        width={1600}
        height={1200}
        className="pointer-events-none absolute inset-0 size-full object-cover opacity-45"
        style={{
          transform: `scale(1.08) translate3d(${parallax.x * -18}px, ${parallax.y * -14}px, 0)`,
          transition: "transform 400ms cubic-bezier(0.22,1,0.36,1)",
        }}
      />
      <div className="absolute inset-0 bg-[linear-gradient(110deg,oklch(0.16_0.045_258/0.96),oklch(0.16_0.045_258/0.72)_45%,oklch(0.2_0.06_262/0.45))]" />

      <svg
        className="pointer-events-none absolute inset-0 size-full opacity-70"
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        aria-hidden
      >
        {nodes.map((n, i) =>
          nodes.slice(i + 1, i + 3).map((m, j) => (
            <line
              key={`${i}-${j}`}
              x1={n.x}
              y1={n.y}
              x2={m.x}
              y2={m.y}
              stroke="oklch(0.78 0.145 217 / 0.35)"
              strokeWidth="0.12"
              strokeDasharray="1.6 2.4"
              style={{ animation: `dash-flow ${14 + i * 2}s linear infinite` }}
            />
          )),
        )}
        {nodes.map((n, i) => (
          <circle
            key={i}
            cx={n.x}
            cy={n.y}
            r="0.35"
            fill="oklch(0.85 0.13 210)"
            style={{ animation: `pulse-node ${3 + (i % 4)}s ease-in-out infinite`, transformOrigin: `${n.x}% ${n.y}%` }}
          />
        ))}
      </svg>

      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        {particles.map((p, i) => (
          <span
            key={i}
            className="absolute bottom-0 rounded-full bg-cyan/70"
            style={{
              left: `${p.left}%`,
              width: p.size,
              height: p.size,
              animation: `drift ${p.duration}s linear ${p.delay}s infinite`,
            }}
          />
        ))}
      </div>

      <div className="relative mx-auto grid w-full max-w-7xl gap-14 px-5 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
        <div>
          <span className="glass inline-flex items-center gap-2 rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-cyan">
            <Sparkles size={14} /> Global Enterprise IT Partner
          </span>
          <h1 className="mt-6 text-4xl leading-[1.08] text-white sm:text-5xl lg:text-[3.65rem]">
            Reliable Technology Solutions Built for the{" "}
            <span className="text-gradient">Modern Enterprise</span>
          </h1>
          <p className="mt-6 max-w-xl text-base leading-relaxed text-white/70 sm:text-lg">
            Verity Partners delivers secure, scalable, and innovative technology solutions
            that help businesses design, deploy, secure, and manage mission-critical IT
            infrastructure worldwide.
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-4">
            <a
              href="#services"
              className="group inline-flex items-center gap-2 rounded-full bg-brand-gradient px-7 py-3.5 text-sm font-semibold text-white shadow-[var(--glow-brand)] transition-transform hover:scale-[1.03]"
            >
              Explore Services
              <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
            </a>
            <a
              href="#contact"
              className="inline-flex items-center gap-2 rounded-full border border-white/25 px-7 py-3.5 text-sm font-semibold text-white transition-colors hover:border-cyan hover:text-cyan"
            >
              Contact Us
            </a>
          </div>
          <div className="mt-12 flex flex-wrap items-center gap-x-10 gap-y-4 text-sm text-white/55">
            <span className="inline-flex items-center gap-2">
              <ShieldCheck size={16} className="text-cyan" /> 99.99% availability
            </span>
            <span>500+ projects delivered</span>
            <span>Cisco · EMC · VMware certified</span>
          </div>
        </div>

        <div
          className="glass animate-float relative hidden rounded-[1.6rem] p-6 lg:block"
          style={{
            transform: `translate3d(${parallax.x * 16}px, ${parallax.y * 12}px, 0)`,
            transition: "transform 500ms cubic-bezier(0.22,1,0.36,1)",
          }}
        >
          <div className="rounded-2xl bg-navy-deep/60 p-5">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-cyan">
              Live infrastructure
            </p>
            <div className="mt-5 grid gap-4">
              {[
                { label: "Global network uptime", value: "99.99%", w: "99%" },
                { label: "Threats mitigated / mo", value: "1.2M", w: "84%" },
                { label: "Managed endpoints", value: "48,300", w: "72%" },
              ].map((row) => (
                <div key={row.label}>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-white/60">{row.label}</span>
                    <span className="font-semibold text-white">{row.value}</span>
                  </div>
                  <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-white/10">
                    <div
                      className="h-full rounded-full bg-brand-gradient"
                      style={{ width: row.w }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}