import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger,
  } from "@/components/ui/navigation-menu";
  
  export default function Navbar() {
    return (
      <header className="fixed top-0 left-0 w-full bg-slate-400 text-white shadow-md z-50">
        <div className="flex items-center justify-between p-4">
          {/* Logo */}
          <div className="flex items-center">
            <img src="./next.svg" alt="Logo" className="h-8 w-8 mr-2" />
            <span className="text-lg font-bold">MyApp</span>
          </div>
  
          {/* Center Menu */}
          <NavigationMenu>
            <NavigationMenuList className="flex space-x-6">
              <NavigationMenuItem>
                <NavigationMenuTrigger>Home</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <NavigationMenuLink href="/">Dashboard</NavigationMenuLink>
                </NavigationMenuContent>
              </NavigationMenuItem>
  
              <NavigationMenuItem>
                <NavigationMenuTrigger>About</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <NavigationMenuLink href="/about">Our Team</NavigationMenuLink>
                </NavigationMenuContent>
              </NavigationMenuItem>
  
              <NavigationMenuItem>
                <NavigationMenuTrigger>Services</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="p-2 bg-gray-700 rounded-md">
                    <li>
                      <NavigationMenuLink href="/services/web">
                        Web Development
                      </NavigationMenuLink>
                    </li>
                    <li>
                      <NavigationMenuLink href="/services/mobile">
                        Mobile Development
                      </NavigationMenuLink>
                    </li>
                    <li>
                      <NavigationMenuLink href="/services/seo">
                        SEO Optimization
                      </NavigationMenuLink>
                    </li>
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
  
              <NavigationMenuItem>
                <NavigationMenuTrigger>Contact</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <NavigationMenuLink href="/contact">Get in Touch</NavigationMenuLink>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
  
          {/* Login Button */}
          <div>
            <a
              href="/login"
              className="px-4 py-2 bg-blue-600 rounded hover:bg-blue-700 transition"
            >
              Login
            </a>
          </div>
        </div>
      </header>
    );
  }
  



  ------------------------------

  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                  <li className="row-span-3">
                    <NavigationMenuLink asChild>
                      <a
                        className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                        href="/"
                      >
                        <Icons.logo className="h-6 w-6" />
                        <div className="mb-2 mt-4 text-lg font-medium">
                          shadcn/ui
                        </div>
                        <p className="text-sm leading-tight text-muted-foreground">
                          Beautifully designed components built with Radix UI and
                          Tailwind CSS.
                        </p>
                      </a>
                    </NavigationMenuLink>
                  </li>
                  <ListItem href="/docs" title="Introduction">
                    Re-usable components built using Radix UI and Tailwind CSS.
                  </ListItem>
                  <ListItem href="/docs/installation" title="Installation">
                    How to install dependencies and structure your app.
                  </ListItem>
                  <ListItem href="/docs/primitives/typography" title="Typography">
                    Styles for headings, paragraphs, lists...etc
                  </ListItem>
                </ul>


                ----------------------

                  <header className="fixed top-0 left-0 w-full bg-white shadow-md z-50">
      <div className="container mx-auto px-4 flex items-center justify-between  h-16">
        {/* Logo */}
        <Link href="#" className="flex items-center gap-2" prefetch={false}>
          LOGO
          <span className="sr-only">banksFinders</span>
        </Link>
        <div className="flex-grow flex justify-center">
        {/* Navigation */}
        <nav className="hidden md:flex items-center space-x-6">
          <Link href="/" className="hover:text-blue-600">Home</Link>
          <div className="relative">
            <button
              onClick={() => setOpenMegaMenu(!openMegaMenu)}
              className="flex items-center space-x-1 hover:text-blue-600"
            >
              <span>Services</span>
              <ChevronDown size={16} />
            </button>
            {openMegaMenu && (
              <div className="absolute left-0 mt-2 w-64 bg-white shadow-lg p-4">
                <Link href="/service1" className="block p-2 hover:bg-gray-100">Service 1</Link>
                <Link href="/service2" className="block p-2 hover:bg-gray-100">Service 2</Link>
                <Link href="/service3" className="block p-2 hover:bg-gray-100">Service 3</Link>
              </div>
            )}
          </div>
          <div className="relative">
            <button className="flex items-center space-x-1 hover:text-blue-600">
              <span>More</span>
              <ChevronDown size={16} />
            </button>
            <div className="absolute left-0 mt-2 w-40 bg-white shadow-lg hidden group-hover:block">
              <Link href="/about" className="block p-2 hover:bg-gray-100">About</Link>
              <Link href="/contact" className="block p-2 hover:bg-gray-100">Contact</Link>
            </div>
          </div>
        </nav>
</div>
        {/* Mobile Menu */}
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="ghost" className="md:hidden">
              <Menu size={24} />
            </Button>
          </SheetTrigger>
          <SheetContent>
            <nav className="flex flex-col space-y-4">
              <Link href="/" className="hover:text-blue-600">Home</Link>
              <Link href="/service1" className="hover:text-blue-600">Service 1</Link>
              <Link href="/service2" className="hover:text-blue-600">Service 2</Link>
              <Link href="/service3" className="hover:text-blue-600">Service 3</Link>
              <Link href="/about" className="hover:text-blue-600">About</Link>
              <Link href="/contact" className="hover:text-blue-600">Contact</Link>
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>

    ------------------------------------

        <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-3 sm:py-0 dark:bg-neutral-800">
    <nav className="max-w-[85rem] w-full mx-auto px-4 md:px-6 lg:px-8">
      <div className="relative sm:flex sm:items-center">
        <div className="flex items-center justify-between">
          <a className="flex-none font-semibold text-xl text-black focus:outline-none focus:opacity-80 dark:text-white" href="#" aria-label="Brand">Brand</a>
          <div className="sm:hidden">
            <button type="button" className="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-x-2 rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-neutral-700 dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10" id="hs-navbar-basic-usage-collapse" aria-expanded="false" aria-controls="hs-navbar-basic-usage" aria-label="Toggle navigation" data-hs-collapse="#hs-navbar-basic-usage">
              <svg className="hs-collapse-open:hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
              <svg className="hs-collapse-open:block hidden shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
            </button>
          </div>
        </div>
  
        <div id="hs-navbar-basic-usage" className="hidden hs-collapse overflow-hidden transition-all duration-300 basis-full grow sm:block" aria-labelledby="hs-navbar-basic-usage-collapse">
          <div className="flex flex-col gap-y-3 sm:gap-y-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5">
            <a className="sm:p-2 font-medium text-blue-500 focus:outline-none" href="#" aria-current="page">Active</a>
  
            <div className="hs-dropdown [--strategy:static] sm:[--strategy:absolute] [--adaptive:none]  [--auto-close:false] [--is-collapse:true] sm:[--is-collapse:false] ">
              <button id="hs-mega-menu" type="button" className="hs-dropdown-toggle sm:p-2 flex items-center w-full text-gray-600 font-medium hover:text-gray-400 focus:outline-none focus:text-gray-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:text-neutral-500" aria-haspopup="menu" aria-expanded="false" aria-label="Mega Menu">
                Mega Menu
                <svg className="hs-dropdown-open:-rotate-180 sm:hs-dropdown-open:rotate-0 duration-300 ms-2 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              </button>
  
              <div className="hs-dropdown-menu sm:transition-[opacity,margin] sm:ease-in-out sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 sm:mt-3 top-full start-0 min-w-60 bg-white sm:shadow-md rounded-lg py-2 sm:px-2 dark:bg-neutral-800 sm:dark:border dark:border-neutral-700 dark:divide-neutral-700 before:absolute" role="menu" aria-orientation="vertical" aria-labelledby="hs-mega-menu">
                <div className="sm:grid sm:grid-cols-3">
                  <div className="flex flex-col">
                    <a className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300" href="#">
                      About
                    </a>
                    <a className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300" href="#">
                      Services
                    </a>
                    <a className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300" href="#">
                      Customer Story
                    </a>
                  </div>
  
                  <div className="flex flex-col">
                    <a className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300" href="#">
                      Careers
                    </a>
                    <a className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300" href="#">
                      Careers: Overview
                    </a>
                    <a className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300" href="#">
                      Careers: Apply
                    </a>
                  </div>
  
                  <div className="flex flex-col">
                    <a className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300" href="#">
                      Log In
                    </a>
                    <a className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus:text-neutral-300" href="#">
                      Sign Up
                    </a>
                  </div>
                </div>
              </div>
            </div>
  
            <a className="sm:p-2 font-medium text-gray-600 hover:text-gray-400 focus:outline-none focus:text-gray-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:text-neutral-500" href="#">Project</a>
          </div>
        </div>
      </div>
    </nav>
  </header>

  --------------------------

  const menuItems = [
    {
      title: "Credit Card",
      href: "/credit-Card",
      icon: <CreditCard className="w-4 h-4 mr-2" />,
      submenu: [
        {
          title: "Card Types",
          items: [
            { key: "cashback", itemName: "Cash Back", href: "/cash-back" },
            { key: "welcomebonus", itemName: "Welcome Bonus", href: "/welcome-bonus" },
            { key: "freeforlife", itemName: "Free For Life", href: "/free-for-life" },
            { key: "travelcard", itemName: "Travel Card", href: "/travel-card" },
            { key: "premiumcard", itemName: "Premium Card", href: "/premium-card" },
            { key: "etihadmiles", itemName: "Etihad Miles", href: "/etihad-miles" },
            { key: "emirateskywords", itemName: "Emirate SkyWords", href: "/emirate-skywords" },
            { key: "balancetransfer", itemName: "Balance Transfer", href: "/balance-transfer" },
            { key: "fixeddeposit", itemName: "Fixed Deposit", href: "/fixed-deposit" },
            { key: "islamiccard", itemName: "Islamic Card", href: "/islamic-card" },
            { key: "businesscard", itemName: "Business Card", href: "/business-card" }
          ]},
        {
          title: "Nationals",
          items: [
            {
                key: "personal-loans-for-uae-nationals",
                itemName: "Personal Loans for UAE Nationals",
                href: "/personal-loans-for-uae-nationals"
            },
            {
                key: "personal-loan-with-salary-transfer",
                itemName: "Personal Loan with Salary Transfer",
                href: "/personal-loan-with-salary-transfer"
            }
        ]
        },
        {
          title: "Special Programs",
          items: [
            {
                key: "personal-loan-without-salary-transfer",
                itemName: "Personal Loan without Salary Transfer",
                href: "/personal-loan-without-salary-transfer"
            },
            {
                key: "personal-loan-for-non-listed-companies",
                itemName: "Personal Loan for Non-Listed Companies",
                href: "/personal-loan-for-non-listed-companies"
            }
        ]
        },
        {
          title: "Employment Types",
          items: [{
            key: "personal-loan-for-self-employed",
            itemName: "Personal Loan for Self-Employed",
            href: "/personal-loan-for-self-employed"
        }]
        },
      ],
    },
    {
      title: "Personal Loan",
      icon: <LineChart className="w-4 h-4 mr-2" />,
      submenu: [
        {
          title: "Loan Types",
          items: ["Personal Loans in UAE", "Personal Loans for Expats"]
        },
        {
          title: "Nationals",
          items: ["Personal Loans for UAE Nationals", "Personal Loan with Salary Transfer"]
        },
        {
          title: "Special Programs",
          items: ["Personal Loan without Salary Transfer", "Personal Loan for Non-Listed Companies"]
        },
        {
          title: "Employment Types",
          items: ["Personal Loan for Self-Employed"]
        },
      ],
    },
    {
      title: "Car Loans",
      icon: <Car className="w-4 h-4 mr-2" />,
      submenu: [
        {
          title: "Car Financing",
          items: [
            {
                key: "car-loans",
                itemName: "Car Loans",
                href: "/car-loans"
            },
            {
                key: "best-car-loan-in-use",
                itemName: "Best Car Loan in Use",
                href: "/best-car-loan-in-use"
            },
            {
                key: "used-car-loan",
                itemName: "Used Car Loan",
                href: "/used-car-loan"
            }
        ]
        },
        {
          title: "Rate & Payment",
          items: ["Car Loan Interest Rate in UAE", "Zero Down Payment Car Loan"]
        },
        {
          title: "Home Loans",
          items: ["Home Loan", "Home Loans for Expats", "Home Loan Eligibility in UAE"]
        },
        {
          title: "Loan Management",
          items: ["Home Loan Pre-Approval in UAE", "Home Loan Balance Transfer in UAE"]
        },
      ],
    },
    {
      title: "Financial Calculators",
      icon: <Calculator className="w-4 h-4 mr-2" />,
      submenu: [
        {
          title: "Calculators",
          items: ["Financial Calculators", "Personal Loan Calculator", "Car Loan Calculator"]
        }
      ],
    },
  ];

  -----------------------------------------------
  'use client';

import React, { useEffect, useRef, useState } from 'react';
import Image from 'next/image';

const cardData = [
  {
    imgSrc: '/gems-world-card.webp',
    title: 'Detail 1',
    points: ['Cashback up to 5%', 'No Annual Fee', 'Airport Lounge Access'],
  },
  {
    imgSrc: '/du-titanium-credit-card-2.webp',
    title: 'Detail 2',
    points: ['Earn Reward Points', 'Fuel Discounts', 'Dining Offers'],
  },
  {
    imgSrc: '/fab-cashback-credit-card.webp',
    title: 'Detail 3',
    points: ['1% Cashback on All Purchases', 'Low Interest Rate', 'Free Movie Tickets'],
  },
  {
    imgSrc: '/fab-low-rate-credit-card.webp',
    title: 'Detail 4',
    points: ['0% Balance Transfer', 'No Foreign Transaction Fee', 'Bonus Points on Signup'],
  },
  {
    imgSrc: '/du-titanium-credit-card-2.webp',
    title: 'Detail 5',
    points: ['Exclusive Travel Benefits', 'Hotel Discounts', 'Priority Customer Support'],
  },
  {
    imgSrc: '/fab-cashback-credit-card.webp',
    title: 'Detail 3',
    points: ['1% Cashback on All Purchases', 'Low Interest Rate', 'Free Movie Tickets'],
  },
  {
    imgSrc: '/fab-low-rate-credit-card.webp',
    title: 'Detail 4',
    points: ['0% Balance Transfer', 'No Foreign Transaction Fee', 'Bonus Points on Signup'],
  },
  {
    imgSrc: '/du-titanium-credit-card-2.webp',
    title: 'Detail 5',
    points: ['Exclusive Travel Benefits', 'Hotel Discounts', 'Priority Customer Support'],
  },
  {
    imgSrc: '/gems-world-card.webp',
    title: 'Detail 1',
    points: ['Cashback up to 5%', 'No Annual Fee', 'Airport Lounge Access'],
  },
  {
    imgSrc: '/du-titanium-credit-card-2.webp',
    title: 'Detail 2',
    points: ['Earn Reward Points', 'Fuel Discounts', 'Dining Offers'],
  },
];

const CardOfferFirst: React.FC = () => {
  const carouselRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);

  // Calculate total slides based on the number of cards to display per view based on screen size
  const getCardsPerSlide = () => {
    if (window.innerWidth <= 640) {
      return 1; // Mobile view, 1 card per slide
    } else if (window.innerWidth <= 1024) {
      return 1; // Tablet view, 1 card per slide
    } else {
      return 5; // Desktop view, 5 cards per slide
    }
  };

  const [cardsPerSlide, setCardsPerSlide] = useState(getCardsPerSlide());
  const totalSlides = Math.ceil(cardData.length / cardsPerSlide); // Number of total slides

  // Listen for window resizing and update cards per slide accordingly
  useEffect(() => {
    const handleResize = () => {
      setCardsPerSlide(getCardsPerSlide());
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // Update carousel automatically in a loop without reversing
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % totalSlides);
    }, 10000);

    return () => clearInterval(interval);
  }, [totalSlides]);

  // Scroll to the active index position
  useEffect(() => {
    if (carouselRef.current) {
      carouselRef.current.scrollTo({ left: activeIndex * carouselRef.current.clientWidth, behavior: 'smooth' });
    }
  }, [activeIndex]);

  return (
    <section className="py-5 bg-gray-100">
      <h2 className="text-center mb-6 text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text">
        Best Cash Back Card
      </h2>

      {/* ✅ Horizontal Scroll Wrapper */}
      <div
        ref={carouselRef}
        className="flex space-x-4 overflow-hidden scroll-smooth px-4"
        style={{ scrollBehavior: 'smooth' }}
      >
        {Array.from({ length: totalSlides }).map((_, slideIndex) => (
          <div key={slideIndex} className="flex space-x-4">
            {cardData.slice(slideIndex * cardsPerSlide, (slideIndex + 1) * cardsPerSlide).map((card, index) => (
              <div
                key={index}
                className="min-w-[250px] sm:w-[90%] md:w-[90%] lg:w-1/5 xl:w-1/5 2xl:w-1/5 bg-white shadow-lg rounded-lg p-4 flex flex-col justify-between"
              >
                {/* ✅ Image */}
                <Image src={card.imgSrc} width={200} height={120} alt={card.title} className="rounded-lg w-full h-32 object-cover" />

                {/* ✅ Title */}
                <h5 className="text-md font-semibold text-center mt-2">{card.title}</h5>

                {/* ✅ Bulleted List */}
                <ul className="text-sm text-gray-700 mt-2 pl-4 list-disc">
                  {card.points.map((point, i) => (
                    <li key={i}>{point}</li>
                  ))}
                </ul>

                {/* ✅ Buttons Row */}
                <div className="flex justify-between mt-4">
                  <a href="#" className="border border-blue-500 text-blue-500 px-3 py-1 text-sm rounded-md hover:bg-blue-500 hover:text-white">
                    Know More
                  </a>
                  <a href="#" className="border border-red-500 text-red-500 px-3 py-1 text-sm rounded-md hover:bg-red-500 hover:text-white">
                    Apply Now
                  </a>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>

      {/* ✅ Dots Navigation */}
      <div className="flex justify-center mt-4">
        {Array.from({ length: totalSlides }).map((_, i) => (
          <button
            key={i}
            className={`w-3 h-3 mx-1 rounded-full transition-all ${activeIndex === i ? 'bg-blue-500 w-4' : 'bg-gray-300'}`}
            onClick={() => setActiveIndex(i)}
          ></button>
        ))}
      </div>
    </section>
  );
};

export default CardOfferFirst;