import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Eye, Glasses, Users, Star, Heart, Zap, Phone, Shield, Settings, Menu, X, ArrowUp, Play, Mail, MapPin, Target } from 'lucide-react';

export default function Index() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrollY, setScrollY] = useState(0);
  const [showScrollTop, setShowScrollTop] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
      setShowScrollTop(window.scrollY > 300);
    };
    window.addEventListener('scroll', handleScroll);    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const kantaLogos = [
    { src: "data:image/png;base64,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", alt: "BBGR Optique" },
    { src: "https://1000logos.net/wp-content/uploads/2017/03/Kodoak-logo.jpg", alt: "Kodak Lens" },
    { src: "data:image/png;base64,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", alt: "Essilor" },
    { src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACUCAMAAABC4vDmAAAAXVBMVEX///8pdLn4+vxWi8Mgcbgbb7eowN5um8s7fL1fkcdik8fw9PkAZ7NEgr8AX7CZuNq90OXg6PLV4e9Qh8GIq9MPa7Wiutp5oc63y+PG1ukAZLOvxuHn7vWUs9d+ptH0B23fAAACLElEQVR4nO2Y23aCMBBFQTJcROoFU6tV//8zi8nQXAZoXXQVH85+kgyZbEiWyZAkAAAAAAAAAAAAAAAAAAAAAAAAAAAASFYTTN01lWA870+Dc3s2TrO3t9R5IYPcf/8uYu2pi320gylPH57X4VbF8SKvHxFSo7wdTN9zSfImbToneapFjNouluvBlETtvn9Lxy5t3Jl0c+5iriF1+FJnrYJW7myk8osSIZaiOMBJKGWrYhOl5atLZ+XeYNkrUdm66atJ9a1i+g59ImqCOVo5KTepJbdQZpw+N71kVhgaHkiVV2/VFdzrcvNbt9xZ5fEqTZIT8aPuRIylvAGuxz7/Y4LqVrHi93R+prZJ51KKbkH2zN652QmlpOYs6VnGeqm913bTdoD74yXb36qtXXzHz5hJqeDtJXWjxI3fsTebpBiIDUnVPD/rh8DFCr77nRp+SCEVDc9SdByX0ttfSq0y00hGyq4KHbzkfgH9q9RaCanDDCnVymW+uNTwQl9aKqX8Gu9Sy0ulm2ZdeaxeQirYSszet7zUwIa8uFRZRbzA9NF94Di2uNQr/nlCanGpORvynxxdAqk5R5e/POT5Us8d8mKpmcfhMannjsOx1LzCYVTqucJBrJ5ZJda41GSJ5UmZ+lGLJT2jGKVQqrKNlb2aKEYdx9YW3bHUnLJ9HVQhdzvCnS/Hy3bvQYY/QgSxpz9wTI/w0wcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAHF8rly71b5qtsQAAAABJRU5ErkJggg==", alt: "Techno Lens" },
    { src: "data:image/png;base64,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", alt: "ZEISS" },
  ];

  const bingkaiLogos = [
    { src: "data:image/png;base64,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", alt: "Alfio Raldo" },
    { src: "data:image/png;base64,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", alt: "Hang Ten" },
    { src: "/logos/teddy.png", alt: "Teddy Bear" },
    { src: "/logos/kyu.png", alt: "Kyu Unique" },
    { src: "data:image/png;base64, ", alt: "Alain Delon" },
    { src: "data:image/jpeg;base64, ", alt: "Ray-Ban" },
  ];

    const [kantaIndex, setKantaIndex] = useState(0);
    const [bingkaiIndex, setBingkaiIndex] = useState(0);
    const [paused, setPaused] = useState(false);
   // ================= AUTO SLIDE =================
    useEffect(() => {
      if (paused) return;

      const interval = setInterval(() => {
        setKantaIndex((prev) => (prev + 1) % kantaLogos.length);
        setBingkaiIndex((prev) => (prev + 1) % bingkaiLogos.length);
      }, 1000);

      return () => clearInterval(interval);
    }, [paused, kantaLogos.length, bingkaiLogos.length]);

    // ================= NAV =================
    const prev = (type) => {
      if (type === "kanta") {
        setKantaIndex((prev) =>
          prev === 0 ? kantaLogos.length - 1 : prev - 1
        );
      } else {
        setBingkaiIndex((prev) =>
          prev === 0 ? bingkaiLogos.length - 1 : prev - 1
        );
      }
    };

    const next = (type) => {
      if (type === "kanta") {
        setKantaIndex((prev) => (prev + 1) % kantaLogos.length);
      } else {
        setBingkaiIndex((prev) => (prev + 1) % bingkaiLogos.length);
      }
    };

    // ================= ANIMATION =================
    const animation = {
      initial: { opacity: 0, scale: 0.8 },
      animate: { opacity: 1, scale: 1 },
      exit: { opacity: 0, scale: 0.8 },
    };

    return (
      <div className="min-h-screen bg-white overflow-hidden">
        {/* Premium Sunglasses Preloader */}
        <div className="preloader fixed inset-0 z-[9999] bg-gradient-to-br from-white via-purple-500/5 to-secondary/5 flex items-center justify-center" style={{ display: 'none' }}>
          <div className="relative flex flex-col items-center justify-center">
            {/* Floating Circle Background */}
            <div className="absolute inset-0 -z-10">
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 border-2 border-purple-500/20 rounded-full animate-spin" style={{ animationDuration: '8s' }}></div>
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 border border-secondary/10 rounded-full animate-spin" style={{ animationDuration: '12s', animationDirection: 'reverse' }}></div>
            </div>

            {/* Glasses Image Container */}
            <div className="relative animate-bounce" style={{ animationDuration: '2s' }}>
              <img
                src="https://cdn.builder.io/api/v1/image/assets%2Fe577ba706fcd4e29bcbe5fed7ba7fa66%2F8b2e18444fa34221adb7484f7b9d93d7?format=webp&width=800&height=1200"
                alt="Loading..."
                className="w-48 h-auto object-contain drop-shadow-2xl"
              />
            </div>

            {/* Loading Text */}
            <div className="mt-12 text-center">
              <p className="text-foreground font-semibold text-lg mb-4">CelikMata</p>
              <div className="flex items-center justify-center gap-1">
                <div className="w-2 h-2 rounded-full bg-purple-500 animate-bounce" style={{ animationDelay: '0s' }}></div>
                <div className="w-2 h-2 rounded-full bg-secondary animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                <div className="w-2 h-2 rounded-full bg-accent animate-bounce" style={{ animationDelay: '0.4s' }}></div>
              </div>
              <p className="text-foreground/60 text-sm mt-4">Loading premium eye care experience...</p>
            </div>
          </div>
        </div>

        {/* Demo Header */}
        <nav className="demo-header transparent fixed top-0 w-full z-50 py-4 backdrop-blur-sm transition-all" style={{ background: scrollY > 50 ? 'rgba(255,255,255,0.95)' : 'transparent' }}>
          <div className="container max-w-6xl mx-auto px-4 flex justify-between items-center">
            <div className="site-brand">
              <a href="#" className="logo text-3xl font-bold transition-colors" style={{ color: scrollY > 50 ? '#0F1D46' : '#ffffff' }}>
                CelikMata
              </a>
            </div>

            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden">
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>

            <div className="buy-btn hidden md:block">
              {/*<a href="https://www.instagram.com/celikmata_optometry/" target="_blank" rel="noopener noreferrer" className="bttn-1 px-8 py-3 bg-purple-500 text-white rounded-lg hover:shadow-lg transition-all">
              Follow Us
            </a>*/}
            </div>
          </div>

          {mobileMenuOpen && (
            <div className="md:hidden mt-4 space-y-4 px-4 pb-4">
              <a href="#demo" className="block text-foreground hover:text-purple-500 font-medium">Services</a>
              <a href="#features" className="block text-foreground hover:text-purple-500 font-medium">Features</a>
              <a href="#contact" className="block text-foreground hover:text-purple-500 font-medium">Contact</a>
            </div>
          )}
        </nav>

        {/* Hero Section */}
        <header className="header-area relative w-full pt-56 pb-20 mb-32 overflow-hidden min-h-[800px]">

          {/* Background Image */}
          <div
            className="absolute inset-0 z-0"
            style={{
              backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1593214451196-37e0651f8ef2?...')`,
              backgroundPosition: 'center center',
              backgroundSize: 'cover',
              backgroundAttachment: 'fixed'
            }}
          />

          {/* Blur Overlay */}
          <div className="absolute inset-0 z-10 bg-white/5 backdrop-blur-sm pointer-events-none"></div>

          {/* CONTENT */}
          <div className="container max-w-6xl mx-auto px-4 text-center relative z-20">

            <div className="text-box text-center mb-12 animate-fade-in">
              <h1 className="title text-6xl md:text-7xl font-bold text-white mb-8  leading-tight">
                Premium Eye Care Excellence
              </h1>
              <p className="text-xl text-white/80 max-w-2xl mx-auto mb-8">
                Your trusted one-stop centre for comprehensive eye health screening and premium optical solutions for all ages.
              </p>
              <a href="#demo" className="px-10 py-4 bg-purple text-white rounded-lg hover:shadow-xl transition-all inline-block text-lg font-semibold">
                Explore Services
              </a>
            </div>

            {/* Glass Card */}
            <div className="mt-16 relative animate-fade-in-up">
              <div className="max-w-4xl mx-auto">
                <div className="rounded-3xl border border-white/10 bg-white/10 p-12 backdrop-blur-md shadow-2xl">
                  <p className="text-white/60 uppercase tracking-widest font-medium">
                    Expert Optometry Services in
                  </p>
                  <span className="uppercase tracking-widest font-medium text-white">
                    Cybersouth
                  </span>
                </div>
              </div>
            </div>

          </div>

          {/* ✅ GLASSES IMAGE — NOW ABOVE EVERYTHING */}
          <div className="absolute -bottom-[300px] left-1/2 -translate-x-[-20%] z-30 hidden md:block">
            <img
              src="https://cdn.builder.io/api/v1/image/assets%2Fe577ba706fcd4e29bcbe5fed7ba7fa66%2F0ee5bce3208244c3b768be080aba8a03?format=webp&width=800&height=1200"
              alt="Premium Glasses"
              className="w-[850px] h-auto object-contain drop-shadow-2xl animate-fade-in-up"
              style={{ animationDelay: '0.3s' }}
            />
          </div>

        </header>

        {/* Vision, Mission & Values - Venn Diagram Section */}
        <section className="py-24 px-4 relative overflow-hidden bg-gradient-to-b from-white via-purple-50/30 to-white">
          {/* Background animation elements */}
          <div className="absolute top-20 left-10 w-72 h-72 bg-purple-400/10 rounded-full blur-3xl -z-10 animate-float" style={{ animationDelay: '0s' }}></div>
          <div className="absolute bottom-10 right-10 w-96 h-96 bg-blue-400/10 rounded-full blur-3xl -z-10 animate-float" style={{ animationDelay: '3s' }}></div>

          <div className="max-w-7xl mx-auto">
            {/* Section Title */}
            <div className="text-center mb-16 animate-fade-in">
              <p className="text-purple-600 uppercase tracking-widest font-semibold text-sm mb-2">Our Foundation</p>
              <h2 className="text-5xl font-bold text-[#0F1D46] mb-4 font-playfair">Vision, Mission & Values</h2>
              <p className="text-gray-600 max-w-2xl mx-auto text-lg">The core principles that guide everything we do at CelikMata</p>
            </div>

            {/* Venn Diagram Container */}
            <div className="relative w-full flex justify-center items-center" style={{ height: '600px' }}>
              {/* Vision - Top Left Circle */}
              <div className="absolute animate-fade-in-up" style={{
                width: '300px',
                height: '300px',
                top: '0',
                left: '38%',
                transform: 'translateX(-200px)',
                animationDelay: '0.1s'
              }}>
                <div className="relative w-full h-full rounded-full bg-gradient-to-br from-purple-500 to-purple-600 shadow-2xl p-8 flex flex-col items-center justify-center text-white overflow-hidden group hover:shadow-3xl transition-all duration-500">
                  {/* Hover overlay */}
                  <div className="absolute inset-0 bg-purple-700/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                  <div className="relative z-10 text-center">
                    <Eye className="w-12 h-12 mx-auto mb-3 group-hover:scale-110 transition-transform duration-500" />
                    <h3 className="text-2xl font-bold mb-3 font-playfair">Vision</h3>
                    <p className="text-sm leading-relaxed text-white/95">
                      To be the premier eye care destination delivering exceptional visual solutions with cutting-edge technology.
                    </p>
                  </div>
                </div>
              </div>

              {/* Mission - Bottom Left Circle */}
              <div className="absolute animate-fade-in-up" style={{
                width: '300px',
                height: '300px',
                bottom: '0',
                left: '50%',
                transform: 'translateX(-200px)',
                animationDelay: '0.3s'
              }}>
                <div className="relative w-full h-full rounded-full bg-gradient-to-br from-blue-500 to-blue-600 shadow-2xl p-8 flex flex-col items-center justify-center text-white overflow-hidden group hover:shadow-3xl transition-all duration-500">
                  {/* Hover overlay */}
                  <div className="absolute inset-0 bg-blue-700/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                  <div className="relative z-10 text-center">
                    <Target className="w-12 h-12 mx-auto mb-3 group-hover:scale-110 transition-transform duration-500" />
                    <h3 className="text-2xl font-bold mb-3 font-playfair">Mission</h3>
                    <p className="text-sm leading-relaxed text-white/95">
                      To provide comprehensive eye care services with professionalism, innovation, and genuine care for every patient.
                    </p>
                  </div>
                </div>
              </div>

              {/* Values - Bottom Right Circle */}
              <div className="absolute animate-fade-in-up" style={{
                width: '300px',
                height: '300px',
                bottom: '0',
                right: '50%',
                transform: 'translateX(200px)',
                animationDelay: '0.5s'
              }}>
                <div className="relative w-full h-full rounded-full bg-gradient-to-br from-amber-500 to-amber-600 shadow-2xl p-8 flex flex-col items-center justify-center text-white overflow-hidden group hover:shadow-3xl transition-all duration-500">
                  {/* Hover overlay */}
                  <div className="absolute inset-0 bg-amber-700/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                  <div className="relative z-10 text-center">
                    <Heart className="w-12 h-12 mx-auto mb-3 group-hover:scale-110 transition-transform duration-500" />
                    <h3 className="text-2xl font-bold mb-3 font-playfair">Values</h3>
                    <p className="text-sm leading-relaxed text-white/95">
                      Integrity, excellence, innovation, compassion, and commitment to lifelong patient relationships.
                    </p>
                  </div>
                </div>
              </div>

              {/* Background Center Logo */}
              {/* Background Image */}
              <div className="absolute inset-0 flex items-center justify-center z-0 pointer-events-none">
                <img
                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLRCkMge9YLxwPiG4Xk2Qw7MkaDGNCCYj8sg&s"
                  alt="Background Logo"
                  className="w-full h-full object-contain opacity-5"
                />
              </div>
            </div>

            {/* Bottom tagline */}
            <div className="text-center mt-20 animate-fade-in" style={{ animationDelay: '0.7s' }}>
              <p className="text-gray-700 max-w-3xl mx-auto text-lg leading-relaxed">
                Every decision we make, every service we provide, and every interaction we have reflects our commitment to these core principles. Your vision is our priority.
              </p>
            </div>
          </div>
        </section>

        {/* Services/Demos Section */}
        <section id="demo" className="section-padding-top pt-96 pb-20 px-4 relative">
          <div className="container max-w-6xl mx-auto">
            {/* Section Title */}
            <div className="title-box text-center mb-16 animate-fade-in">
              <h2 className="text-5xl font-extrabold text-[#0F1D46] leading-tight">Our Premium Services</h2>
            </div>

            {/* Service Cards Grid */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                {
                  icon: Eye,
                  title: 'Eye Health Screening',
                  description: 'Complete eye examinations with advanced diagnostic technology for all ages',
                  delay: '0.3s',
                  image: 'https://images.ctfassets.net/pyp8qw75m305/2gxSrCKQkz6GUszZiDibpz/90a82a1cb6ee67d5dfecd6a0793f6ed9/iStock-1189208254.jpg?w=840&h=600'
                },
                {
                  icon: Glasses,
                  title: 'Premium Optical Solutions',
                  description: 'Quality eyeglasses and lenses including FREE upgrades and transition lenses',
                  delay: '0.6s',
                  image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=500&h=400&fit=crop'
                },
                {
                  icon: Star,
                  title: 'Personalized Care',
                  description: 'Expert consultations tailored to your unique vision needs and lifestyle',
                  delay: '0.9s',
                  image: 'https://spectaclepdx.com/wp-content/uploads/2024/11/spectacle-modern-vision-care-optical-spectacle-modern-vision-care-optical-portland-oregon-gracie-birk-photography-07172024-1141-1021x1024.jpg'
                }
              ].map((service, idx) => (
                <div
                  key={idx}
                  className="single-demo group animate-fade-in-up"
                  style={{ animationDelay: service.delay }}
                >
                  <div className="demo-image relative overflow-hidden rounded-lg shadow-xl transition-all duration-300 group-hover:shadow-2xl mb-6">
                    <img
                      src={service.image}
                      alt={service.title}
                      className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                      <a href="#contact" className="bttn-1 px-6 py-2 bg-purple-500 text-white rounded-lg text-sm font-semibold hover:shadow-lg">
                        Learn More
                      </a>
                    </div>
                  </div>
                  <h3 className="title text-2xl font-bold text-foreground mb-3">{service.title}</h3>
                  <p className="text-foreground/70">{service.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* PROMOTIONS */}
        <section style={{ padding: "5rem 2rem", background: "linear-gradient(135deg, #f5f3ff 0%, #eff6ff 100%)" }}>
          <div style={{ maxWidth: 900, margin: "0 auto" }}>
            <div style={{ textAlign: "center", marginBottom: "3rem" }}>
              <p style={{ color: "#7c3aed", letterSpacing: "0.2em", fontSize: "0.8rem", textTransform: "uppercase", marginBottom: "0.75rem" }}>Limited Time</p>
              <h2 style={{ fontFamily: "'Georgia', serif", fontSize: "clamp(1.8rem, 3vw, 2.5rem)", fontWeight: 700, color: "#0F1D46" }}>Special Offers</h2>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "1.5rem" }}>
              {[
                { emoji: "✨", title: "FREE Lens Upgrade", desc: "Upgrade to premium lenses absolutely free with any frame purchase." },
                { emoji: "🌓", title: "Transition Lenses", desc: "Experience our advanced photochromic lens technology at special pricing." },
              ].map((offer, i) => (
                <div key={i} style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: 8, padding: "2rem", display: "flex", gap: "1rem", alignItems: "flex-start", transition: "box-shadow 0.2s" }} onMouseEnter={e => e.currentTarget.style.boxShadow = "0 8px 30px rgba(124,58,237,0.12)"} onMouseLeave={e => e.currentTarget.style.boxShadow = "none"}>
                  <span style={{ fontSize: "2rem" }}>{offer.emoji}</span>
                  <div>
                    <h4 style={{ fontFamily: "'Georgia', serif", fontSize: "1.1rem", fontWeight: 700, color: "#0F1D46", marginBottom: "0.4rem" }}>{offer.title}</h4>
                    <p style={{ color: "#6b7280", fontSize: "0.9rem", lineHeight: 1.6 }}>{offer.desc}</p>
                  </div>
                </div>
              ))}
            </div>
            <p style={{ textAlign: "center", color: "#9ca3af", fontSize: "0.8rem", marginTop: "2rem", letterSpacing: "0.08em" }}>Valid until April 30, 2026</p>
          </div>
        </section>

        {/* Product List Section */}
        <section className="py-24 px-4 bg-gradient-to-b from-white to-gray-50">
          <div className="max-w-6xl mx-auto text-center">

            {/* Title */}
            <h2 className="text-4xl md:text-5xl font-extrabold text-[#0F1D46]">
              PRODUCT LIST
            </h2>

            {/* ================= KANTA SECTION ================= */}
            <div
              className="mt-16"
              onMouseEnter={() => setPaused(true)}
              onMouseLeave={() => setPaused(false)}
            >
              <h3 className="text-2xl font-bold mb-6">
                LENS LIST
              </h3>

              <div className="relative flex items-center justify-center">

                {/* Left Button */}
                <button
                  onClick={() => prev("kanta")}
                  className="absolute left-0 text-3xl text-orange-400 hover:scale-125 transition"
                >
                  ❮
                </button>

                {/* Animated Image */}
                <AnimatePresence mode="wait">
                  <motion.img
                    key={kantaIndex}
                    src={kantaLogos[kantaIndex].src}
                    alt={kantaLogos[kantaIndex].alt}
                    className="h-16 grayscale opacity-60"
                    variants={animation}
                    initial="initial"
                    animate="animate"
                    exit="exit"
                    transition={{ duration: 0.4 }}
                  />
                </AnimatePresence>

                {/* Right Button */}
                <button
                  onClick={() => next("kanta")}
                  className="absolute right-0 text-3xl text-orange-400 hover:scale-125 transition"
                >
                  ❯
                </button>
              </div>

              {/* DOT INDICATORS */}
              <div className="flex justify-center gap-2 mt-4">
                {kantaLogos.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => setKantaIndex(i)}
                    className={`w-2.5 h-2.5 rounded-full transition ${i === kantaIndex ? "bg-orange-400 scale-125" : "bg-gray-300"
                      }`}
                  />
                ))}
              </div>
            </div>

            {/* ================= FRAME MATERIAL SECTION ================= */}
            <div
              className="mt-20"
              onMouseEnter={() => setPaused(true)}
              onMouseLeave={() => setPaused(false)}
            >
              <h3 className="text-2xl font-bold mb-6">
                FRAME MATERIAL LIST
              </h3>

              <div className="relative flex items-center justify-center">

                {/* Left Button */}
                <button
                  onClick={() => prev("bingkai")}
                  className="absolute left-0 text-3xl text-orange-400 hover:scale-125 transition"
                >
                  ❮
                </button>

                {/* Animated Image */}
                <AnimatePresence mode="wait">
                  <motion.img
                    key={bingkaiIndex}
                    src={bingkaiLogos[bingkaiIndex].src}
                    alt={bingkaiLogos[bingkaiIndex].alt}
                    className="h-16 grayscale opacity-60"
                    variants={animation}
                    initial="initial"
                    animate="animate"
                    exit="exit"
                    transition={{ duration: 0.4 }}
                  />
                </AnimatePresence>

                {/* Right Button */}
                <button
                  onClick={() => next("bingkai")}
                  className="absolute right-0 text-3xl text-orange-400 hover:scale-125 transition"
                >
                  ❯
                </button>
              </div>

              {/* DOT INDICATORS */}
              <div className="flex justify-center gap-2 mt-4">
                {bingkaiLogos.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => setBingkaiIndex(i)}
                    className={`w-2.5 h-2.5 rounded-full transition ${i === bingkaiIndex ? "bg-orange-400 scale-125" : "bg-gray-300"
                      }`}
                  />
                ))}
              </div>
            </div>

          </div>
        </section>

 {/* FACILITIES */}
        <section style={{ padding: "6rem 2rem", background: "#fff" }}>
          <div style={{ maxWidth: 1000, margin: "0 auto" }}>
            <div style={{ marginBottom: "3rem" }}>
              <p style={{ color: "#7c3aed", letterSpacing: "0.2em", fontSize: "0.8rem", textTransform: "uppercase", marginBottom: "0.75rem" }}>Our Space</p>
              <h2 style={{ fontFamily: "'Georgia', serif", fontSize: "clamp(1.8rem, 3vw, 2.5rem)", fontWeight: 700, color: "#0F1D46" }}>Premises & Facilities</h2>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
              {[
                { img: "https://www.superudisplay.com/wp-content/uploads/2022/11/belle-vie-optic-eyeglasses-store-thumbnail-768x432.jpg", text: "An open-concept cabinet layout that allows customers to try on frames and sunglasses comfortably without any barriers.", reverse: false },
                { img: "https://nassaufultonvisioncenter.com/wp-content/uploads/2024/09/The-Importance-and-Benefits-of-a-Diabetic-Eye-Exam.jpg", text: "Frames are neatly organized by size and design across dedicated cabinet sections. Separate displays are available for children, teenagers, and adults — for both men and women.", reverse: true },
                { img: "https://images.unsplash.com/photo-1574258495973-f010dfbb5371?w=600&h=400&fit=crop", text: "Our premium sunglasses collection features the latest trends alongside classic styles, displayed in dedicated showcases for easy browsing.", reverse: false },
              ].map((row, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "2rem", alignItems: "center" }}>
                  <img src={row.img} alt="" style={{ width: "100%", height: 260, objectFit: "cover", borderRadius: 6, order: row.reverse ? 2 : 1, display: "block" }} />
                  <p style={{ color: "#4b5563", lineHeight: 1.8, fontSize: "1rem", order: row.reverse ? 1 : 2 }}>{row.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Features Section */}
        <section
          id="features"
          className="relative py-28 px-4 bg-gradient-to-b from-white via-slate-50 to-white overflow-hidden"
        >
          {/* subtle background glow */}
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(99,102,241,0.08),transparent_60%)]" />

          <div className="relative container max-w-6xl mx-auto">

            {/* Title */}
            <div className="text-center mb-24">
              <h2 className="text-4xl md:text-5xl font-extrabold tracking-tight text-[#0F1D46]">
                Why Choose <span className="text-purple-500">CelikMata</span>
              </h2>
              <p className="mt-4 text-base md:text-lg text-slate-500 max-w-2xl mx-auto">
                Experience premium eye care with advanced technology and personalized service tailored for you.
              </p>
            </div>

            {/* Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

              {[
                { icon: Eye, title: 'Expert Screening', description: 'Advanced diagnostic technology' },
                { icon: Glasses, title: 'Premium Lenses', description: 'High-quality eyewear solutions' },
                { icon: Users, title: 'All Ages', description: 'Care for every generation' },
                { icon: Heart, title: 'Personalized Care', description: 'Tailored just for you' },
                { icon: Star, title: 'Professional Team', description: 'Experienced specialists' },
                { icon: Shield, title: 'Safe & Hygienic', description: 'Strict hygiene standards' },
                { icon: Settings, title: 'Modern Equipment', description: 'Latest eye care tech' },
                { icon: Zap, title: 'Fast Service', description: 'Quick & efficient process' }
              ].map((feature, idx) => (
                <div
                  key={idx}
                  className="group relative p-7 rounded-3xl bg-white/60 backdrop-blur-xl border border-white/40 shadow-md hover:shadow-[0_20px_60px_rgba(0,0,0,0.08)] hover:-translate-y-2 transition-all duration-500"
                >

                  {/* glow ring */}
                  <div className="absolute inset-0 rounded-3xl opacity-0 group-hover:opacity-100 transition duration-500 bg-gradient-to-br from-indigo-400/10 via-fuchsia-400/10 to-cyan-400/10 blur-xl" />

                  <div className="relative z-10 text-center">

                    {/* Icon */}
                    <div className="w-16 h-16 mx-auto mb-5 rounded-2xl flex items-center justify-center bg-gradient-to-br from-indigo-500/10 to-purple-500/10 group-hover:from-indigo-500 group-hover:to-purple-500 transition-all duration-300 shadow-sm">
                      <feature.icon className="w-7 h-7 text-indigo-600 group-hover:text-white transition-all duration-300" />
                    </div>

                    {/* Title */}
                    <h3 className="text-lg font-semibold text-slate-800 group-hover:text-indigo-600 transition">
                      {feature.title}
                    </h3>

                    {/* Description */}
                    <p className="mt-1 text-sm text-slate-500 leading-relaxed">
                      {feature.description}
                    </p>

                  </div>
                </div>
              ))}

            </div>
          </div>
        </section>

        {/* Contact/CTA Section */}
        <section id="contact" className="footer-area relative w-full py-20 px-4"
          style={{
            backgroundImage: 'linear-gradient(135deg, rgba(168, 25, 250, 0.15) 0%, rgba(18, 168, 250, 0.15) 100%)',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
            backgroundAttachment: 'fixed'
          }}>

          <div className="container max-w-6xl mx-auto text-center relative z-10">
            <div className="title-box white-box mb-12 animate-fade-in">
              <h2 className="text-5xl font-extrabold text-[#0F1D46] leading-tight">Ready for Your Vision Journey?</h2>
            </div>

            <p className="text-xl text-foreground/70 max-w-2xl mx-auto mb-12">
              Visit CelikMata Optometry today for a comprehensive eye health screening and discover the perfect vision solution for you.
            </p>

            <div className="contact-info grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">


              {/* Card 1 */}
              <div
                className="group relative rounded-xl p-[1px] bg-gradient-to-br from-purple-400/40 to-purple-700/40 
                      animate-fade-in-up h-full"
                style={{ animationDelay: '0s' }}
              >
                <div className="bg-white/80 backdrop-blur-xl rounded-xl p-6 text-center
                            shadow-md group-hover:shadow-2xl shadow-purple-500/10
                            transition-all duration-500 transform group-hover:-translate-y-2
                            h-full flex flex-col justify-between">

                  <div>
                    <div className="w-16 h-16 mx-auto rounded-full 
                                bg-gradient-to-br from-purple-500 to-purple-700 
                                flex items-center justify-center mb-4 shadow-lg
                                group-hover:scale-110 transition-transform duration-300">
                      <Eye className="w-7 h-7 text-white" />
                    </div>

                    <p className="text-foreground/60 text-sm mb-1">Location</p>
                  </div>

                  <p className="font-semibold text-foreground leading-relaxed mt-2">
                    No 19-G, Jalan PP 1<br />Kampung Dengkil, Malaysia
                  </p>
                </div>
              </div>

              {/* Card 2 */}
              <div
                className="group relative rounded-xl p-[1px] bg-gradient-to-br from-purple-400/40 to-purple-700/40 
                      animate-fade-in-up h-full"
                style={{ animationDelay: '0.1s' }}
              >
                <div className="bg-white/80 backdrop-blur-xl rounded-xl p-6 text-center
                            shadow-md group-hover:shadow-2xl shadow-purple-500/10
                            transition-all duration-500 transform group-hover:-translate-y-2
                            h-full flex flex-col justify-between">

                  <div>
                    <a href="tel:+60103506061"
                      className="w-16 h-16 mx-auto rounded-full 
                              bg-gradient-to-br from-purple-500 to-purple-700 
                              flex items-center justify-center mb-4 shadow-lg
                              group-hover:scale-110 transition-transform duration-300">
                      <Users className="w-7 h-7 text-white" />
                    </a>

                    <p className="text-foreground/60 text-sm mb-1">Call Us</p>
                  </div>

                  <a href="tel:+60103506061"
                    className="font-semibold text-foreground hover:text-purple-600 transition-colors mt-2">
                    +60 10-3506061
                  </a>
                </div>
              </div>

              {/* Card 3 */}
              <div
                className="group relative rounded-xl p-[1px] bg-gradient-to-br from-purple-400/40 to-purple-700/40 
                      animate-fade-in-up h-full"
                style={{ animationDelay: '0.2s' }}
              >
                <div className="bg-white/80 backdrop-blur-xl rounded-xl p-6 text-center
                            shadow-md group-hover:shadow-2xl shadow-purple-500/10
                            transition-all duration-500 transform group-hover:-translate-y-2
                            h-full flex flex-col justify-between">

                  <div>
                    <a href="mailto:celikmataoptometry@gmail.com"
                      className="w-16 h-16 mx-auto rounded-full 
                              bg-gradient-to-br from-purple-500 to-purple-700 
                              flex items-center justify-center mb-4 shadow-lg
                              group-hover:scale-110 transition-transform duration-300">
                      <Star className="w-7 h-7 text-white" />
                    </a>

                    <p className="text-foreground/60 text-sm mb-1">Email</p>
                  </div>

                  <a href="mailto:celikmataoptometry@gmail.com"
                    className="font-semibold text-foreground hover:text-purple-600 transition-colors text-sm break-all mt-2">
                    celikmataoptometry@gmail.com
                  </a>
                </div>
              </div>

            </div>

            <div className="flex flex-col sm:flex-row gap-6 justify-center items-center flex-wrap mt-8">
              {/* Call Now Button */}
              <a href="tel:+60103506061" className="flex items-center gap-2 px-8 py-3 bg-slate-800 text-white rounded-full hover:bg-slate-700 hover:shadow-lg transition-all font-semibold">
                <Phone className="w-5 h-5" />
                <span>Call Now</span>
              </a>

              {/* WhatsApp Button */}
              <a href="https://wa.me/60103506061" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-8 py-3 bg-[#25D366] text-white rounded-full hover:shadow-[0_0_20px_rgba(37,211,102,0.4)] transition-all font-semibold">
                <img
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAS1BMVEVHcEz////////////////////////////////////////////////r+vDc9uXO8tps3ZIAzE4jz2iQ5Km97c+g5roH0VxQ2IJ+4KHEIdFQAAAADXRSTlMANIbD6v+HM2HwFt8+TenAQgAAAPtJREFUeAF9kwWCxSAMRFOZOlb0/hfdL1NY76tCZIJJo+uHERiHaZafLCsa6yJf2XZ8Y9+kceAXx42tWTc0lFaoMHPVM9Y9OX3VfdcJYp0NSumYkmHHq+aVv9mZ5sW/VWRmT3QaleL47WTij4swZ7Un6vYyMDABOVmQeOLFICN17FejdgpPRmEzeyCkAKKukr4YYZMG1NtI9SttycArcQzOKhgHpmVBhirFpeT05YpBeuY9C9ViCdCO4pN0lzGiok4GYhZZwRJM5IqEdNnWOvExvdSyj+V0BWSpS2ZLUAgl5xxVWzIu9p9st9vkfoPdb837Td2YJx6HvpPKAzrFFKvJE7iaAAAAAElFTkSuQmCC"
                  alt="WhatsApp Logo"
                  className="w-6 h-6 object-contain"
                />
                <span>WhatsApp</span>
              </a>

              {/* Facebook Button */}
              <a href="https://www.facebook.com/celikmataoptometry/?locale=ms_MY" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-8 py-3 bg-[#1877F2] text-white rounded-full hover:shadow-[0_0_20px_rgba(24,119,242,0.4)] transition-all font-semibold">
                <img
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAV1BMVEVHcEwHZv/O1v8HaP8Haf8IZ/8IaP8IZv8IZ/8IaP/r7/8IZ/8IZ/8AW/////+fsf8HZv////8AYP8AWf8AZP+Vqf/V3P8IZ/9wlP9jiv+tvP+Lpf82c/8XNRKaAAAAEHRSTlMAM/2GGN1h9exC+8LBwcGFy8UXywAAAPNJREFUKJFlk+kSgyAMhDnUQe2BQQtU3/85yxEi0P3l+E1gkyyMFXG5KmvVKjnrNSlNUlODhlE3GoebzVZ3sjMx+reDiYLwiXSgOrCHWJaPcIHafDLdB27L+sbSMfkk5rca6uiZejBLC1XoncxcSM7T7+kPZ7K78TIAmWnJHgTPyD7mbna9r4Sjh4phk7sxqVLEIeCxFiG1mISGLB67+xrmUqvQENRwMcWQ/D9WmNIKxwk4/01uvXMXGuJlfGFZR66iGahq8H99TtXKejjWy+4gLhtj0sG5CVgD74DlaNawjmYKNRxlAF2o03N4v0JOxLN6Dj8GhSiE70/PKAAAAABJRU5ErkJggg=="
                  alt="Facebook Logo"
                  className="w-6 h-6 object-contain"
                />
                <span>Facebook</span>
              </a>

              {/* Instagram Button */}
              <a href="https://www.instagram.com/celikmata_optometry/" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-8 py-3 bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white rounded-full hover:shadow-[0_0_20px_rgba(238,42,123,0.4)] transition-all font-semibold">
                <img
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAABcVBMVEVHcEx3GPlwGPx1FvyDC/OWBumqA+K+AeDQANvVAs7rDa7jAtfoAMflAriKGP2ZCvunAvLEG/TgV9/oZt72G8nxB8nxALCKHPymGf7Pg/H86vf////zds79AcD9ALT3DZ30t+j63fP1st31quT8AKf8AJn98/jaO973Lr38AIvAAOz8Drn4V7370PHiGe34E6n7HZv9AHv5wOP1Wpr8D5H9AGz9GYX6q8r2YKL5dZP3tMT8D2/8KW31Y5f9AV/9Inn+G17+KFf3v879J0f+MUf5g2v3wbr9Nyz6RUP9Ml/9Qxr+SjX7zcr6Gkb8AEL+UQ/9Wiv98uT70rD8XQT8ZxD9ZCr40sP4Tn/9cAz+egj9ciX1km/1X1L9O0j4nD7+hAT9hRb8fh34unb9jQT3jZX73a78dwX+mwL6ymPzoZD8YSf9qAD+sQD7wBL8zEn5tV79jwb+uAD+vgH+wwD+LHP8owX+ygD6Olj7rQz+twf8UjMSMf5jAAAAe3RSTlMAW9L////////FW///2P///////////8b/////////xf///////////////////////////v/////////////////////////////////////////////////////////////////F////W////f//2f///9fY/9hbxcXA5ZvtAAACBUlEQVR4AUTPRaLkNhSF4f9IV3Kp/JjfCzMzM8xCG8lWMs9SsoIkTdNmZubiKtvqduMnZl0BkgCBEI+zhiBwD5f0ZA3wQj1Eu1YiMZQADyAA9SRXgpCEaGXcODFKoq/NEXRHXYmnshMak0xdGC/PiO1Mi1rTbA0LyM/BOOWyuISrHyLPTRoKZDaBndvoQrezQA/IWlBe6DXCsOdgong+bdCLyzW5F3VzpY7TckLH4ESRlvsbNlj2V4DNu3klk/Ed8HUvYlVKwa4NSmedWzNX1dbUcxlzsJMgxNppsywKv6l5M9YJZtizxOfObknxVOkVaAblle1BB0JNssXaJhA05tlKMOrcIXcMSOBc8IBvqzbQZC8SjIfMwxxz0iLnn0vQS+cx7ye0nPcPT7qPBmk2my7b4A0XlmiNzEMDQfD53vLF6sigLHLGMyzBCMzaawXf/HcAPqpmvqbDq5dGlQVjlexMYvqD0C3P+iVOccGBM0L1+d6uYozzRc6TbvA3/cI0r7g4dgoKy/SCee+akH32ltf38muG0kzR+PUfPl+DHq1in3jnSp8ZtjAxgz+u7OUJfb51cmk0Tqf158QwgcQUmM5zy9+tqnr9+nCf+3seU4hFCKHsptStxoEQg4fPhp7dP1dB8u6+LFzjqOq6afof/IWH/38O40irXXZ1g2+q99K9TWBgAACS27uoe/IOhgAAAABJRU5ErkJggg=="
                  alt="Instagram Logo"
                  className="w-6 h-6 object-contain"
                />
                <span>Instagram</span>
              </a>
              <a href="https://www.tiktok.com/@celikmataoptometry" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 px-8 py-3 bg-black text-white rounded-full hover:shadow-[0_0_20px_rgba(0,0,0,0.4)] transition-all font-semibold">
                <img
                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEUAAAAAAAAFT1IAQUMDAABBub6i5Oe5wcRyQ0wIAABaxsv5////9/nGkJs5AAf////94OWSZW3m4uN4f4AhPj8AFBXt+vu019lzZG0mAAD91Nz/6e3wnq9VAAIALzAkfoM+o6djpqpGMDbNcIHVo632gJdrABPf+vvx7/HJYnUdAAA/AACNLD89zNLH9PfhXXcYnaO99vi8MU5Yz9SbCieE3uGtN1EAa3A9jI+ftLX//f7gN1pYAA8YHh/9tsToq7a3ADN4LtD7AAAAAXRSTlP+GuMHfQAAANJJREFUeAG90gMSxEAQBdDt2D9r27Z5/0ttUIhTThcGbzydy1FyZIMMwyYixwuiJCcgKaqmG8kIM5+CKBRL5UREpVqrR7DsoNZoAq12EDvdXn9gY3OYHzXGkwAyvDCdzRcOLgfSyvBjZ70BtG3dRSKZ8+NuD3O8PSxcDF2lc0RzfKoTxSFzRuNQp3hkBZgXp3JUzXkYy2do+oLo6q4QQroBs3t3d5w+Wqfor1QBtTJV0Xi+KIJvUXvg8fg8JxRFWuRH39b296I45Kjefi2zSc20sABZBhbHh+pZTQAAAABJRU5ErkJggg=="
                  alt="Tiktok Logo"
                  className="w-6 h-6 object-contain"
                />
                <span>Tiktok</span>
              </a>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="bg-foreground text-white py-16 px-4">
          <div className="container max-w-6xl mx-auto">
            {/* Footer Content Grid */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
              {/* Brand Section */}
              <div className="animate-fade-in">
                <h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
                  <div className="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
                    <Eye className="w-5 h-5 text-white" />
                  </div>
                  CelikMata
                </h3>
                <p className="text-white/70 text-sm leading-relaxed">
                  Your trusted one-stop centre for premium eye health screening and optical solutions for all ages.
                </p>
              </div>

              {/* Services Section */}
              <div className="animate-fade-in" style={{ animationDelay: '0.1s' }}>
                <h4 className="text-lg font-bold mb-6">Our Services</h4>
                <ul className="space-y-3">
                  <li><a href="#demo" className="text-white/70 hover:text-purple-500 transition-colors text-sm">Eye Health Screening</a></li>
                  <li><a href="#demo" className="text-white/70 hover:text-purple-500 transition-colors text-sm">Premium Optical Solutions</a></li>
                  <li><a href="#demo" className="text-white/70 hover:text-purple-500 transition-colors text-sm">Personalized Care</a></li>
                  <li><a href="#demo" className="text-white/70 hover:text-purple-500 transition-colors text-sm">Special Promotions</a></li>
                </ul>
              </div>

              {/* Quick Links Section */}
              <div className="animate-fade-in" style={{ animationDelay: '0.2s' }}>
                <h4 className="text-lg font-bold mb-6">Quick Links</h4>
                <ul className="space-y-3">
                  <li><a href="#" className="text-white/70 hover:text-purple-500 transition-colors text-sm">Home</a></li>
                  <li><a href="#demo" className="text-white/70 hover:text-purple-500 transition-colors text-sm">Services</a></li>
                  <li><a href="#features" className="text-white/70 hover:text-purple-500 transition-colors text-sm">Features</a></li>
                  <li><a href="#contact" className="text-white/70 hover:text-purple-500 transition-colors text-sm">Contact</a></li>
                </ul>
              </div>

              {/* Contact Section */}
              <div className="animate-fade-in" style={{ animationDelay: '0.3s' }}>
                <h4 className="text-lg font-bold mb-6">Contact Info</h4>
                <div className="space-y-4">
                  <div className="flex gap-3">
                    <MapPin className="w-5 h-5 text-pruple-500  flex-shrink-0 mt-1" />
                    <p className="text-white/70 text-sm">No 19-G, Jalan PP 1, Kampung Dengkil, Malaysia</p>
                  </div>
                  <div className="flex gap-3">
                    <Phone className="w-5 h-5 text-pruple-500  flex-shrink-0 mt-1" />
                    <a href="tel:+60103506061" className="text-white/70 hover:text-purple-500 transition-colors text-sm">+60 10-3506061</a>
                  </div>
                  <div className="flex gap-3">
                    <Mail className="w-5 h-5 text-pruple-500  flex-shrink-0 mt-1" />
                    <a href="mailto:celikmataoptometry@gmail.com" className="text-white/70 hover:text-purple-500 transition-colors text-sm">celikmataoptometry@gmail.com</a>
                  </div>
                </div>
              </div>
            </div>

            {/* Social Media Links */}
            <div className="border-t border-white/10 pt-8 mb-8">
              <p className="text-white/70 text-sm mb-4 font-semibold">Follow Us</p>
              <div className="flex flex-wrap gap-4">
                <a href="https://www.facebook.com/celikmataoptometry/?locale=ms_MY" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/10 hover:bg-[#0e0eed] flex items-center justify-center transition-all hover:scale-110">
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAV1BMVEVHcEwHZv/O1v8HaP8Haf8IZ/8IaP8IZv8IZ/8IaP/r7/8IZ/8IZ/8AW/////+fsf8HZv////8AYP8AWf8AZP+Vqf/V3P8IZ/9wlP9jiv+tvP+Lpf82c/8XNRKaAAAAEHRSTlMAM/2GGN1h9exC+8LBwcGFy8UXywAAAPNJREFUKJFlk+kSgyAMhDnUQe2BQQtU3/85yxEi0P3l+E1gkyyMFXG5KmvVKjnrNSlNUlODhlE3GoebzVZ3sjMx+reDiYLwiXSgOrCHWJaPcIHafDLdB27L+sbSMfkk5rca6uiZejBLC1XoncxcSM7T7+kPZ7K78TIAmWnJHgTPyD7mbna9r4Sjh4phk7sxqVLEIeCxFiG1mISGLB67+xrmUqvQENRwMcWQ/D9WmNIKxwk4/01uvXMXGuJlfGFZR66iGahq8H99TtXKejjWy+4gLhtj0sG5CVgD74DlaNawjmYKNRxlAF2o03N4v0JOxLN6Dj8GhSiE70/PKAAAAABJRU5ErkJggg==" alt="Facebook" className="w-6 h-6" />
                </a>
                <a href="https://www.instagram.com/celikmata_optometry/" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/10 hover:bg-gradient-to-tr hover:from-[#f9ce34] hover:via-[#ee2a7b] hover:to-[#6228d7] flex items-center justify-center transition-all hover:scale-110">
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAABcVBMVEVHcEx3GPlwGPx1FvyDC/OWBumqA+K+AeDQANvVAs7rDa7jAtfoAMflAriKGP2ZCvunAvLEG/TgV9/oZt72G8nxB8nxALCKHPymGf7Pg/H86vf////zds79AcD9ALT3DZ30t+j63fP1st31quT8AKf8AJn98/jaO973Lr38AIvAAOz8Drn4V7370PHiGe34E6n7HZv9AHv5wOP1Wpr8D5H9AGz9GYX6q8r2YKL5dZP3tMT8D2/8KW31Y5f9AV/9Inn+G17+KFf3v879J0f+MUf5g2v3wbr9Nyz6RUP9Ml/9Qxr+SjX7zcr6Gkb8AEL+UQ/9Wiv98uT70rD8XQT8ZxD9ZCr40sP4Tn/9cAz+egj9ciX1km/1X1L9O0j4nD7+hAT9hRb8fh34unb9jQT3jZX73a78dwX+mwL6ymPzoZD8YSf9qAD+sQD7wBL8zEn5tV79jwb+uAD+vgH+wwD+LHP8owX+ygD6Olj7rQz+twf8UjMSMf5jAAAAe3RSTlMAW9L////////FW///2P///////////8b/////////xf///////////////////////////v/////////////////////////////////////////////////////////////////F////W////f//2f///9fY/9hbxcXA5ZvtAAACBUlEQVR4AUTPRaLkNhSF4f9IV3Kp/JjfCzMzM8xCG8lWMs9SsoIkTdNmZubiKtvqduMnZl0BkgCBEI+zhiBwD5f0ZA3wQj1Eu1YiMZQADyAA9SRXgpCEaGXcODFKoq/NEXRHXYmnshMak0xdGC/PiO1Mi1rTbA0LyM/BOOWyuISrHyLPTRoKZDaBndvoQrezQA/IWlBe6DXCsOdgong+bdCLyzW5F3VzpY7TckLH4ESRlvsbNlj2V4DNu3klk/Ed8HUvYlVKwa4NSmedWzNX1dbUcxlzsJMgxNppsywKv6l5M9YJZtizxOfObknxVOkVaAblle1BB0JNssXaJhA05tlKMOrcIXcMSOBc8IBvqzbQZC8SjIfMwxxz0iLnn0vQS+cx7ye0nPcPT7qPBmk2my7b4A0XlmiNzEMDQfD53vLF6sigLHLGMyzBCMzaawXf/HcAPqpmvqbDq5dGlQVjlexMYvqD0C3P+iVOccGBM0L1+d6uYozzRc6TbvA3/cI0r7g4dgoKy/SCee+akH32ltf38muG0kzR+PUfPl+DHq1in3jnSp8ZtjAxgz+u7OUJfb51cmk0Tqf158QwgcQUmM5zy9+tqnr9+nCf+3seU4hFCKHsptStxoEQg4fPhp7dP1dB8u6+LFzjqOq6afof/IWH/38O40irXXZ1g2+q99K9TWBgAACS27uoe/IOhgAAAABJRU5ErkJggg==" alt="Instagram" className="w-6 h-6" />
                </a>
                <a href="https://wa.me/60103506061" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/10 hover:bg-[#25D366] flex items-center justify-center transition-all hover:scale-110">
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAS1BMVEVHcEz////////////////////////////////////////////////r+vDc9uXO8tps3ZIAzE4jz2iQ5Km97c+g5roH0VxQ2IJ+4KHEIdFQAAAADXRSTlMANIbD6v+HM2HwFt8+TenAQgAAAPtJREFUeAF9kwWCxSAMRFOZOlb0/hfdL1NY76tCZIJJo+uHERiHaZafLCsa6yJf2XZ8Y9+kceAXx42tWTc0lFaoMHPVM9Y9OX3VfdcJYp0NSumYkmHHq+aVv9mZ5sW/VWRmT3QaleL47WTij4swZ7Un6vYyMDABOVmQeOLFICN17FejdgpPRmEzeyCkAKKukr4YYZMG1NtI9SttycArcQzOKhgHpmVBhirFpeT05YpBeuY9C9ViCdCO4pN0lzGiok4GYhZZwRJM5IqEdNnWOvExvdSyj+V0BWSpS2ZLUAgl5xxVWzIu9p9st9vkfoPdb837Td2YJx6HvpPKAzrFFKvJE7iaAAAAAElFTkSuQmCC" alt="WhatsApp" className="w-6 h-6" />
                </a>
                <a href="https://www.tiktok.com/@celikmataoptometry" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/10 hover:bg-[#030303] flex items-center justify-center transition-all hover:scale-110">
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEUAAAAAAAAFT1IAQUMDAABBub6i5Oe5wcRyQ0wIAABaxsv5////9/nGkJs5AAf////94OWSZW3m4uN4f4AhPj8AFBXt+vu019lzZG0mAAD91Nz/6e3wnq9VAAIALzAkfoM+o6djpqpGMDbNcIHVo632gJdrABPf+vvx7/HJYnUdAAA/AACNLD89zNLH9PfhXXcYnaO99vi8MU5Yz9SbCieE3uGtN1EAa3A9jI+ftLX//f7gN1pYAA8YHh/9tsToq7a3ADN4LtD7AAAAAXRSTlP+GuMHfQAAANJJREFUeAG90gMSxEAQBdDt2D9r27Z5/0ttUIhTThcGbzydy1FyZIMMwyYixwuiJCcgKaqmG8kIM5+CKBRL5UREpVqrR7DsoNZoAq12EDvdXn9gY3OYHzXGkwAyvDCdzRcOLgfSyvBjZ70BtG3dRSKZ8+NuD3O8PSxcDF2lc0RzfKoTxSFzRuNQp3hkBZgXp3JUzXkYy2do+oLo6q4QQroBs3t3d5w+Wqfor1QBtTJV0Xi+KIJvUXvg8fg8JxRFWuRH39b296I45Kjefi2zSc20sABZBhbHh+pZTQAAAABJRU5ErkJggg==" alt="WhatsApp" className="w-6 h-6" />
                </a>
              </div>
            </div>

            {/* Footer Bottom */}
            <div className="border-t border-white/10 pt-8">
              <div className="flex flex-col md:flex-row justify-between items-center gap-6">
                <p className="text-white/60 text-sm text-center md:text-left">
                  &copy; 2024 CelikMata Optometry. All rights reserved. | Premium Eye Care Excellence
                </p>
                <div className="flex gap-6">
                  <a href="#" className="text-white/60 hover:text-pruple-500  transition-colors text-sm">Privacy Policy</a>
                  <a href="#" className="text-white/60 hover:text-pruple-500  transition-colors text-sm">Terms of Service</a>
                  <a href="#" className="text-white/60 hover:text-pruple-500  transition-colors text-sm">Sitemap</a>
                </div>
              </div>
            </div>
          </div>
        </footer>

        {/* Scroll to Top Button */}
        {showScrollTop && (
          <a
            onClick={scrollToTop}
            className="scroll-top fixed bottom-8 right-8 w-14 h-14 rounded-full bg-puple-500 text-pruple-500 flex items-center justify-center shadow-xl hover:shadow-2xl hover:scale-110 transition-all cursor-pointer z-40"
          >
            <ArrowUp className="w-6 h-6" />
          </a>
        )}
      </div>
    );
  }
