'use client';

import { motion } from "framer-motion";
import { useInView } from "framer-motion";
import { useRef } from "react";
import { MapPin, Phone, Building2 } from "lucide-react";
import { useAppTheme } from "@/components/ThemeProvider";

export function Location() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const { theme } = useAppTheme();
  const isDark = theme === "dark";

  const cities = [
    "Hollywood, FL",
    "Jacksonville, FL",
    "Miami, FL",
    "Pensacola, FL"
  ];

  const counties = [
    "Broward",
    "Duval",
    "Escambia",
    "Miami-dade"
  ];

  const zips = [
    "32256",
    "32503",
    "33021",
    "33145"
  ];

  const neighborhoods = [
    "Coral Gate",
    "Coral Way",
    "Royal Lakes"
  ];

  return (
    <section 
      id="location"
      ref={ref} 
      className="relative py-20 px-4 overflow-hidden"
    >
      {/* Background Image */}
      <div 
        className="absolute inset-0 z-0"
        style={{
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
        }}
      />
      
      {/* Minimal overlay - allowing background image to show at near original opaqueness */}
      <div 
        className="absolute inset-0 z-[1]" 
        style={{
          backgroundColor: isDark ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.10)'
        }}
      />
      
      {/* Very subtle gradient overlay */}
      {!isDark && (
        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
      )}
      {isDark && (
        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
      )}

      {/* Subtle animated blobs */}
      <div className="absolute inset-0 overflow-hidden z-[3]">
        <motion.div
          className="absolute top-20 left-20 w-72 h-72 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
          animate={{
            x: [0, 80, 0],
            y: [0, 40, 0],
            scale: [1, 1.1, 1],
          }}
          transition={{
            duration: 18,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        />
        <motion.div
          className="absolute bottom-20 right-20 w-96 h-96 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
          animate={{
            x: [0, -80, 0],
            y: [0, 60, 0],
            scale: [1, 1.15, 1],
          }}
          transition={{
            duration: 22,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        />
      </div>

      <div className="container max-w-6xl mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <motion.h2
            className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            Location
          </motion.h2>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-6 mb-8">
          {/* Primary Location */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 transition-all duration-300"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
                <MapPin className="h-6 w-6 text-rose-600 dark:text-rose-400" />
              </div>
              <h3 className="text-xl font-semibold text-foreground">Primary Location</h3>
            </div>
            <p className="text-muted-foreground mb-2">Miami, FL 33145</p>
            <div className="flex items-center gap-2 text-muted-foreground">
              <Phone className="h-4 w-4" />
              <span>(954) 807-3027</span>
            </div>
          </motion.div>

          {/* Additional Location */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 transition-all duration-300"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl">
                <Building2 className="h-6 w-6 text-rose-600 dark:text-rose-400" />
              </div>
              <h3 className="text-xl font-semibold text-foreground">Additional Location</h3>
            </div>
            <p className="text-muted-foreground mb-2">Hollywood, FL 33021</p>
            <div className="flex items-center gap-2 text-muted-foreground">
              <Phone className="h-4 w-4" />
              <span>(954) 807-3027</span>
            </div>
          </motion.div>
        </div>

        {/* Nearby Areas */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.4 }}
          className="bg-card/50 backdrop-blur-sm rounded-2xl p-8 border border-border/50"
        >
          <h3 className="text-2xl font-semibold text-foreground mb-6">Nearby Areas</h3>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {/* Cities */}
            <div>
              <h4 className="font-semibold text-foreground mb-3">Cities</h4>
              <ul className="space-y-2">
                {cities.map((city, index) => (
                  <motion.li
                    key={city}
                    initial={{ opacity: 0, x: -10 }}
                    animate={isInView ? { opacity: 1, x: 0 } : {}}
                    transition={{ duration: 0.3, delay: 0.5 + index * 0.05 }}
                    className="text-sm text-muted-foreground"
                  >
                    {city}
                  </motion.li>
                ))}
              </ul>
            </div>

            {/* Counties */}
            <div>
              <h4 className="font-semibold text-foreground mb-3">Counties</h4>
              <ul className="space-y-2">
                {counties.map((county, index) => (
                  <motion.li
                    key={county}
                    initial={{ opacity: 0, x: -10 }}
                    animate={isInView ? { opacity: 1, x: 0 } : {}}
                    transition={{ duration: 0.3, delay: 0.6 + index * 0.05 }}
                    className="text-sm text-muted-foreground"
                  >
                    {county}
                  </motion.li>
                ))}
              </ul>
            </div>

            {/* Zips */}
            <div>
              <h4 className="font-semibold text-foreground mb-3">Zips</h4>
              <ul className="space-y-2">
                {zips.map((zip, index) => (
                  <motion.li
                    key={zip}
                    initial={{ opacity: 0, x: -10 }}
                    animate={isInView ? { opacity: 1, x: 0 } : {}}
                    transition={{ duration: 0.3, delay: 0.7 + index * 0.05 }}
                    className="text-sm text-muted-foreground"
                  >
                    {zip}
                  </motion.li>
                ))}
              </ul>
            </div>

            {/* Neighborhoods */}
            <div>
              <h4 className="font-semibold text-foreground mb-3">Neighborhoods</h4>
              <ul className="space-y-2">
                {neighborhoods.map((neighborhood, index) => (
                  <motion.li
                    key={neighborhood}
                    initial={{ opacity: 0, x: -10 }}
                    animate={isInView ? { opacity: 1, x: 0 } : {}}
                    transition={{ duration: 0.3, delay: 0.8 + index * 0.05 }}
                    className="text-sm text-muted-foreground"
                  >
                    {neighborhood}
                  </motion.li>
                ))}
              </ul>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}