"use client";

import React from "react";
import { motion } from "framer-motion";
import {
  ArrowRight,
  Shield,
  Zap,
  TrendingUp,
  Database,
  Briefcase,
  Scale,
} from "lucide-react";
import { cn } from "@/lib/utils";

interface WavyGridHeroProps {
  className?: string;
}

export function WavyGridHero({ className }: WavyGridHeroProps) {
  const containerVariants = {
    hidden: {},
    visible: {
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.8,
        ease: [0.16, 1, 0.3, 1] as const, // Custom premium ease out
      },
    },
  };

  const metrics = [
    {
      value: "2.0x",
      label: "Guaranteed ROI Ratio",
      description: "12-month de-risking protocol",
      icon: TrendingUp,
      color: "text-emerald-400",
      glow: "rgba(16, 185, 129, 0.15)",
    },
    {
      value: "17",
      label: "Specialized Agent Skills",
      description: "Fiduciary, tax & legal expertise",
      icon: Briefcase,
      color: "text-[var(--velyon-azure)]",
      glow: "rgba(59, 130, 246, 0.15)",
    },
    {
      value: "$5M–$50M",
      label: "ARR Scaling Engine",
      description: "Target mid-market enterprise focus",
      icon: Zap,
      color: "text-[var(--velyon-gold)]",
      glow: "rgba(234, 179, 8, 0.15)",
    },
    {
      value: "Active",
      label: "MCP database grids",
      description: "UK-Law & Companies House feeds",
      icon: Database,
      color: "text-purple-400",
      glow: "rgba(139, 92, 246, 0.15)",
    },
  ];

  return (
    <div
      className={cn(
        "relative min-h-[90vh] w-full flex items-center justify-center py-20 overflow-hidden",
        className
      )}
    >
      {/* Background organic wave mesh grid */}
      <div className="absolute inset-0 z-0 pointer-events-none opacity-40 mix-blend-screen">
        <svg
          className="absolute w-[200%] h-[200%] -top-1/2 -left-1/2 animate-[spin_120s_linear_infinite]"
          viewBox="0 0 100 100"
          preserveAspectRatio="none"
        >
          <defs>
            <radialGradient id="wave-gradient" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="var(--velyon-azure)" stopOpacity="0.15" />
              <stop offset="60%" stopColor="transparent" stopOpacity="0" />
            </radialGradient>
          </defs>
          <path
            d="M0,50 Q25,30 50,50 T100,50 L100,100 L0,100 Z"
            fill="url(#wave-gradient)"
            className="animate-[pulse_10s_ease-in-out_infinite]"
          />
          <path
            d="M0,60 Q25,80 50,60 T100,60 L100,100 L0,100 Z"
            fill="url(#wave-gradient)"
            className="animate-[pulse_15s_ease-in-out_infinite_1.5s]"
          />
        </svg>
        {/* Subtle grid backdrop */}
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0)`,
            backgroundSize: "24px 24px",
          }}
        />
      </div>

      <motion.div
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        className="max-w-6xl w-full mx-auto px-6 md:px-10 relative z-10 flex flex-col items-center text-center"
      >
        {/* Elite Badge */}
        <motion.div
          variants={itemVariants}
          className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-emerald-500/20 bg-emerald-500/5 backdrop-blur-xl text-xs font-mono text-emerald-300 mb-6 shadow-[0_0_15px_rgba(16,185,129,0.05)]"
        >
          <Shield className="h-3.5 w-3.5" />
          Outcome-Backed: The 2X ROI Guarantee
        </motion.div>

        {/* Display Headline */}
        <motion.h1
          variants={itemVariants}
          className="text-4xl sm:text-6xl md:text-7xl font-extralight tracking-tight text-white max-w-4xl leading-[1.1] mb-6"
        >
          Technology without strategy is{" "}
          <span className="relative inline-block font-normal">
            <span className="absolute -inset-x-2 -inset-y-1 bg-[var(--velyon-azure)]/10 rounded-lg blur-md" />
            <span className="relative bg-gradient-to-r from-[var(--velyon-azure)] to-purple-400 bg-clip-text text-transparent">
              overhead.
            </span>
          </span>
        </motion.h1>

        {/* Body Paragraph */}
        <motion.p
          variants={itemVariants}
          className="text-base sm:text-lg md:text-xl text-[var(--velyon-muted)] max-w-2xl leading-relaxed mb-10 font-light"
        >
          By combining fractional Chief Revenue Officer thinking with custom agentic AI
          infrastructure, VELYON turns{" "}
          <span className="text-white font-medium">human latency</span> into{" "}
          <span className="text-[var(--velyon-azure)] font-medium">digital velocity</span>.
          We replace fragmented software, creative, and consulting agencies with a unified,
          ROI-aligned scale engine.
        </motion.p>

        {/* CTA Buttons */}
        <motion.div
          variants={itemVariants}
          className="flex flex-col sm:flex-row items-center gap-4 mb-20"
        >
          {/* Primary CTA button with glowing shadow */}
          <button className="group relative h-12 px-6 rounded-lg font-medium text-white overflow-hidden transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] cursor-pointer bg-[var(--velyon-azure)] shadow-[0_0_30px_-5px_var(--velyon-azure)]">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-600 via-[var(--velyon-azure)] to-purple-600 bg-[size:200%_auto] opacity-0 group-hover:opacity-100 transition-all duration-500 animate-[shimmer_3s_linear_infinite]" />
            <span className="relative flex items-center justify-center gap-2">
              Accelerate Growth
              <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
            </span>
          </button>

          {/* Secondary Glass CTA with border-beam accent */}
          <button className="group relative h-12 px-6 rounded-lg font-medium text-[var(--velyon-offwhite)] bg-[var(--velyon-glass)] border border-[var(--velyon-border)] hover:bg-white/[0.06] transition-all duration-300 hover:border-white/20 hover:scale-[1.02] active:scale-[0.98] cursor-pointer backdrop-blur-xl">
            <span className="relative flex items-center justify-center gap-2">
              Audit Capabilities
              <Scale className="h-4 w-4 text-[var(--velyon-gold)] group-hover:rotate-12 transition-transform" />
            </span>
          </button>
        </motion.div>

        {/* Dynamic Metric Grid */}
        <motion.div
          variants={itemVariants}
          className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
        >
          {metrics.map((metric, index) => {
            const Icon = metric.icon;
            return (
              <div
                key={index}
                className="group relative rounded-2xl border border-[var(--velyon-border)] bg-[var(--velyon-glass)] backdrop-blur-xl p-6 text-left overflow-hidden transition-all duration-300 hover:border-white/10 hover:shadow-[0_8px_32px_rgba(0,0,0,0.5)]"
              >
                {/* Active glow backing */}
                <div
                  className="absolute -right-12 -bottom-12 w-24 h-24 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                  style={{ backgroundColor: metric.glow }}
                />

                <div className="flex justify-between items-start mb-4">
                  <div className={cn("text-3xl sm:text-4xl font-light tracking-tight text-white", metric.color)}>
                    {metric.value}
                  </div>
                  <Icon className={cn("h-5 w-5 opacity-40 group-hover:opacity-100 group-hover:scale-110 transition-all", metric.color)} />
                </div>
                <div className="text-xs font-mono uppercase tracking-wider text-white/80 mb-1">
                  {metric.label}
                </div>
                <div className="text-xs text-[var(--velyon-muted)] leading-relaxed">
                  {metric.description}
                </div>
              </div>
            );
          })}
        </motion.div>
      </motion.div>

      {/* Styled custom keyframes */}
      <style>{`
        @keyframes shimmer {
          0% { background-position: 0% center; }
          100% { background-position: 200% center; }
        }
      `}</style>
    </div>
  );
}

"use client";

import { useEffect, useRef } from "react";

export function DotPatternMinimal() {
  return (
    <div 
      className="absolute inset-0 opacity-[0.02] bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none"
      style={{ minHeight: "100%" }}
    />
  );
}