'use client'

import Link from 'next/link'
import dynamic from 'next/dynamic'
import { motion } from 'framer-motion'
import { fadeUp, staggerContainer } from '@/lib/animations'

const HeroPhones3D = dynamic(() => import('@/components/three/HeroPhones3D'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex items-center justify-center">
      <span className="font-mono text-xs text-purple-deep tracking-widest uppercase">
        Loading…
      </span>
    </div>
  ),
})

export function Hero() {
  return (
    <div className="relative isolate overflow-hidden bg-gradient-hero min-h-[100svh] flex items-center">
      <div className="absolute inset-0 bg-grid-soft opacity-50 pointer-events-none" />

      <FloatingBlobs />

      <div className="relative z-10 max-w-7xl mx-auto px-5 sm:px-8 w-full grid lg:grid-cols-12 gap-10 items-center pt-28 pb-20">
        <motion.div
          className="lg:col-span-7 text-center lg:text-left"
          variants={staggerContainer}
          initial="hidden"
          animate="visible"
        >
          <motion.span
            variants={fadeUp}
            className="inline-block label-mono text-purple-primary"
          >
            India&apos;s Hyperlocal Platform
          </motion.span>

          <motion.h1
            variants={fadeUp}
            className="h1-display text-nearle-dark mt-5"
          >
            Your Neighbourhood,
            <br />
            <span className="bg-gradient-purple bg-clip-text text-transparent">
              Your World
            </span>
          </motion.h1>

          <motion.p
            variants={fadeUp}
            className="font-body text-nearle-mid text-lg leading-relaxed mt-6 max-w-xl mx-auto lg:mx-0"
          >
            India&apos;s futuristic hyperlocal ecosystem connecting residents
            with groceries, restaurants, local stores, home services,
            and trusted neighbourhood businesses.
          </motion.p>

          <motion.div
            variants={fadeUp}
            className="mt-9 flex flex-col sm:flex-row gap-3 justify-center lg:justify-start"
          >
            <Link
              href="/#download"
              className="inline-flex items-center justify-center gap-2 bg-purple-deep text-white rounded-full px-7 py-3 font-semibold shadow-cta hover:bg-purple-primary hover:shadow-cta-hover transition-all active:scale-95"
            >
              Download App
            </Link>
            <Link
              href="/businesses"
              className="inline-flex items-center justify-center gap-2 border-2 border-purple-deep text-purple-deep rounded-full px-7 py-3 font-semibold hover:bg-purple-deep hover:text-white transition-all active:scale-95"
            >
              Become a Partner
            </Link>
          </motion.div>
        </motion.div>

        <div className="lg:col-span-5 relative h-[440px] sm:h-[520px] lg:h-[560px]">
          <HeroPhones3D />
        </div>
      </div>
    </div>
  )
}

function FloatingBlobs() {
  return (
    <div className="absolute inset-0 -z-0 pointer-events-none">
      <motion.div
        className="absolute top-[-10%] left-[-10%] w-[420px] h-[420px] rounded-full bg-purple-lavender opacity-60 blur-3xl"
        animate={{ x: [0, 40, 0], y: [0, 25, 0] }}
        transition={{ duration: 12, repeat: Infinity, ease: 'easeInOut' }}
      />
      <motion.div
        className="absolute bottom-[-15%] right-[-10%] w-[480px] h-[480px] rounded-full bg-purple-soft opacity-70 blur-3xl"
        animate={{ x: [0, -30, 0], y: [0, -20, 0] }}
        transition={{ duration: 14, repeat: Infinity, ease: 'easeInOut' }}
      />
      <motion.div
        className="absolute top-[30%] right-[10%] w-[260px] h-[260px] rounded-full bg-purple-primary/20 blur-3xl"
        animate={{ x: [0, 20, 0], y: [0, 15, 0] }}
        transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
      />
    </div>
  )
}

