'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import { ArrowRight, Shield, TrendingUp, Calculator, Sparkles } from 'lucide-react';

export function HeroSection() {
  return (
    <section className="relative min-h-[90vh] flex items-center overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#081526] via-[#0d2137] to-[#1e4a6e]" />

      {/* Mesh gradient overlays */}
      <div className="absolute inset-0">
        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-[var(--gold)]/[0.07] rounded-full blur-[120px] -translate-y-1/3 translate-x-1/4" />
        <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-[var(--teal)]/[0.06] rounded-full blur-[100px] translate-y-1/3 -translate-x-1/4" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-[var(--navy-light)]/20 rounded-full blur-[80px]" />
      </div>

      {/* Dot grid pattern */}
      <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '32px 32px' }} />

      {/* Floating 3D shapes */}
      <motion.div
        animate={{ y: [0, -25, 0], rotate: [0, 8, 0] }}
        transition={{ duration: 7, repeat: Infinity, ease: 'easeInOut' }}
        className="absolute top-24 right-[12%] w-24 h-24 rounded-3xl bg-gradient-to-br from-[var(--gold)]/15 to-[var(--gold)]/5 backdrop-blur-sm border border-[var(--gold)]/15 hidden lg:block"
        style={{ transform: 'perspective(500px) rotateX(15deg) rotateY(-15deg)' }}
      />
      <motion.div
        animate={{ y: [0, 18, 0], rotate: [0, -5, 0] }}
        transition={{ duration: 9, repeat: Infinity, ease: 'easeInOut', delay: 1 }}
        className="absolute bottom-28 right-[22%] w-16 h-16 rounded-2xl bg-gradient-to-br from-white/[0.08] to-white/[0.02] backdrop-blur-sm border border-white/10 hidden lg:block"
      />
      <motion.div
        animate={{ y: [0, -15, 0], x: [0, 10, 0] }}
        transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut', delay: 2 }}
        className="absolute top-44 left-[8%] w-14 h-14 rounded-xl bg-gradient-to-br from-[var(--teal)]/10 to-[var(--teal)]/[0.02] backdrop-blur-sm border border-[var(--teal)]/10 hidden lg:block"
      />
      <motion.div
        animate={{ scale: [1, 1.1, 1], opacity: [0.3, 0.5, 0.3] }}
        transition={{ duration: 5, repeat: Infinity, ease: 'easeInOut' }}
        className="absolute bottom-40 left-[15%] w-3 h-3 rounded-full bg-[var(--gold)] hidden lg:block"
      />
      <motion.div
        animate={{ scale: [1, 1.2, 1], opacity: [0.2, 0.4, 0.2] }}
        transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut', delay: 1.5 }}
        className="absolute top-32 right-[35%] w-2 h-2 rounded-full bg-[var(--teal)] hidden lg:block"
      />

      {/* Content */}
      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="max-w-3xl">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 px-4 py-2 bg-white/[0.06] backdrop-blur-md border border-white/10 rounded-full text-[var(--gold-light)] text-sm font-medium mb-8"
          >
            <Sparkles className="w-4 h-4 text-[var(--gold)]" />
            Trusted CPA & Tax Professionals
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.1 }}
            className="font-display text-4xl sm:text-5xl lg:text-[3.5rem] xl:text-6xl font-bold text-white leading-[1.1] tracking-tight mb-7"
          >
            Expert Financial
            <br />
            Solutions for Your{' '}
            <span className="text-gradient-gold">Business Growth</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="text-lg sm:text-xl text-white/60 leading-relaxed mb-10 max-w-2xl"
          >
            From tax preparation to payroll management, we provide comprehensive accounting services that help small businesses, startups, and corporations thrive.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.3 }}
            className="flex flex-col sm:flex-row gap-4"
          >
            <Link
              href="/contact"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-[var(--gold)] to-[#d4b060] text-[var(--navy-dark)] font-bold rounded-xl hover:shadow-xl hover:shadow-[var(--gold)]/20 transition-all duration-300 hover:-translate-y-0.5"
            >
              Schedule a Free Consultation
              <ArrowRight className="w-4 h-4" />
            </Link>
            <Link
              href="/services"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white/[0.06] text-white font-semibold rounded-xl hover:bg-white/[0.12] backdrop-blur-md border border-white/10 transition-all duration-300"
            >
              Explore Services
            </Link>
          </motion.div>

          {/* Feature pills */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="flex flex-wrap gap-6 mt-14"
          >
            {[
              { icon: Calculator, text: 'Tax Preparation' },
              { icon: TrendingUp, text: 'Business Growth' },
              { icon: Shield, text: 'IRS Compliance' },
            ]?.map((item: any, i: number) => (
              <div key={i} className="flex items-center gap-2.5 text-white/40 text-sm">
                <div className="w-8 h-8 rounded-lg bg-white/[0.06] flex items-center justify-center">
                  <item.icon className="w-4 h-4 text-[var(--gold)]" />
                </div>
                {item?.text ?? ''}
              </div>
            ))}
          </motion.div>
        </div>
      </div>
    </section>
  );
}