"use client";

import { motion, Variants } from "framer-motion";
import Image from "next/image";
import { MapPin, Globe, ExternalLink, Utensils, ArrowRight } from "lucide-react";

const locations = [
  {
    id: "burlington",
    name: "Burlington",
    address: "1860 Appleby Line, Burlington, ON L7L 7H7",
    image: "/images/restaurant-interior.png",
    url: "https://burlington.antalyarestaurant.ca",
    description: "Experience Antalya’s fire-kissed flavours in Burlington, where elegance meets authentic Turkish cuisine for a truly memorable dining experience.",
  },
  {
    id: "kitchener",
    name: "Kitchener",
    address: "1187 Fischer-Hallman Rd #435, Kitchener, ON N2E 4H9",
    image: "/images/kitchener.png",
    url: "https://kitchener.antalyarestaurant.ca",
    description: "Experience the charcoal-grilled kebabs and signature classics in Kitchener. A refined atmosphere meets time-tested traditional Mediterranean recipes.",
  },
];

const container: Variants = {
  hidden: { opacity: 0 },
  visible: (i = 1) => ({
    opacity: 1,
    transition: { staggerChildren: 0.15, delayChildren: 0.2 * i },
  }),
};

const child: Variants = {
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      damping: 15,
      stiffness: 80,
    },
  },
  hidden: {
    opacity: 0,
    y: 40,
  },
};

export default function Home() {
  const handleLocationSelect = (url: string) => {
    if (url && url !== "#") {
      window.open(url, "_blank");
    } else {
      alert("Website coming soon!");
    }
  };

  return (
    <main className="main-container">
      {/* Dynamic Environment */}
      <div className="hero-gradient" />
      <div className="noise-bg" />

      <div style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
        <Image
          src="/images/home-banner.webp"
          alt="Luxury Turkish Dining Experience"
          fill
          style={{
            objectFit: 'cover',
            opacity: 0.35,
            filter: 'grayscale(0.1) contrast(1.1)'
          }}
          priority
        />
        <div style={{
          position: 'absolute',
          inset: 0,
          background: 'radial-gradient(circle at center, transparent 0%, rgba(10,10,10,0.95) 100%)'
        }} />
      </div>

      <div className="decorative-blob blob-1" />
      <div className="decorative-blob blob-2" />

      {/* Content */}
      <div className="content-wrapper">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
          className="hero-section"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="flex-center gap-4 mb-8"
          >
            <div style={{ height: '1px', width: '60px', background: 'linear-gradient(to right, transparent, var(--color-gold))' }} />
            {/* <Utensils className="text-gold" size={18} /> */}
            <span style={{ color: 'var(--color-gold)', letterSpacing: '0.5em', fontWeight: 600, fontSize: '0.75rem', textTransform: 'uppercase', fontFamily: 'var(--font-accent)' }}>
              Legacy of Flavor
            </span>
            <div style={{ height: '1px', width: '60px', background: 'linear-gradient(to left, transparent, var(--color-gold))' }} />
          </motion.div>

          {/* <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.4 }}
            style={{ display: 'flex', justifyContent: 'center' }}
          >
            <Image
              src="/images/logo.png"
              alt="Antalya Logo"
              width={180}
              height={90}
              style={{ objectFit: 'contain', filter: 'drop-shadow(0 0 20px rgba(210, 136, 57, 0.3))' }}
              priority
            />
          </motion.div> */}

          <motion.h1
            variants={container}
            initial="hidden"
            animate="visible"
            style={{
              fontSize: 'clamp(3.5rem, 15vw, 4rem)',
              lineHeight: 1.2,
              // marginBottom: '32px',
              display: 'flex',
              justifyContent: 'center',
              gap: '0.02em',
              paddingBottom: '0.1em'
            }}
            className="grand-text shine-effect"
          >
            {"Antalya".split("").map((letter, index) => (
              <motion.span variants={child} key={index}>{letter}</motion.span>
            ))}
          </motion.h1>

          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1, duration: 1.5 }}
            style={{
              color: 'var(--color-paragraph)',
              fontSize: 'clamp(1rem, 2.5vw, 1.35rem)',
              maxWidth: '840px',
              margin: '0 auto',
              fontWeight: 300,
              lineHeight: 1.8,
              letterSpacing: '0.02em'
            }}
          >
            Experience the art of authentic Turkish charcoal grilling. A culinary heritage crafted with fire, passion, and Mediterranean excellence since 2022.
          </motion.p>
        </motion.div>

        <motion.div
          className="locations-grid"
          variants={container}
          initial="hidden"
          animate="visible"
          custom={1.5}
        >
          {locations.map((loc) => (
            <motion.div
              key={loc.id}
              variants={child}
              className="glass-card group"
              style={{ cursor: 'pointer' }}
              onClick={() => handleLocationSelect(loc.url)}
            >
              <div className="card-image-container">
                <div className="card-frame" />
                <Image
                  src={loc.image}
                  alt={loc.name}
                  fill
                  style={{ objectFit: 'cover' }}
                  className="transition-image"
                  sizes="(max-width: 860px) 100vw, 50vw"
                />
                <div className="overlay" />

                <div style={{ position: 'absolute', top: '32px', right: '32px', zIndex: 20 }}>
                  <motion.div
                    whileHover={{ scale: 1.1, rotate: 90 }}
                    style={{
                      backgroundColor: 'rgba(0,0,0,0.6)',
                      backdropFilter: 'blur(12px)',
                      width: '52px',
                      height: '52px',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: '50%',
                      border: '1px solid rgba(210, 136, 57, 0.4)',
                      boxShadow: '0 0 20px rgba(0,0,0,0.4)'
                    }}
                  >
                    <ExternalLink size={24} style={{ color: 'var(--color-gold)', flexShrink: 0 }} />
                  </motion.div>
                </div>

                <div style={{
                  position: 'absolute',
                  bottom: '48px',
                  left: '48px',
                  right: '48px',
                  zIndex: 20,
                }}>
                  <h2 style={{ fontSize: 'clamp(2.5rem, 5vw, 2.5rem)', fontWeight: 700, marginBottom: '20px', color: '#fff', textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>
                    {loc.name}
                  </h2>

                  <div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: 'rgba(255,255,255,0.7)', fontSize: '0.9rem', fontFamily: 'var(--font-accent)' }}>
                    <MapPin size={20} style={{ color: 'var(--color-gold)', flexShrink: 0 }} />
                    <span style={{ fontWeight: 400, letterSpacing: '0.05em' }}>{loc.address}</span>
                  </div>
                  <div className="explore-btn" style={{ marginTop: '20px' }}>
                    <span>Visit Restaurant</span>
                    <ArrowRight size={22} style={{ flexShrink: 0 }} />
                  </div>
                </div>
              </div>

              {/* <div className="card-content">
                <p style={{ fontSize: '1.05rem', color: 'rgba(245, 230, 211, 0.7)', marginBottom: '40px', fontWeight: 300, lineHeight: 1.8 }}>
                  {loc.description}
                </p>
                <div className="explore-btn">
                  <span>Visit Restaurant</span>
                  <ArrowRight size={18} />
                </div>
              </div> */}
            </motion.div>
          ))}
        </motion.div>

        <motion.footer
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          className="footer-copyright"
        >
          <p>© 2026 Antalya Restaurant Group
            {/* | Handcrafted by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer">MetatronCube</a> */}
          </p>
        </motion.footer>
      </div>
    </main>
  );
}
