"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { UtensilsCrossed, Users, Clock, Flame, ChefHat, Camera, HelpCircle, Instagram, Facebook, MessageCircle, Star } from "lucide-react";

const navItems = [
  { name: "Home", id: "home" },
  { name: "Menu", id: "menu" },
  { name: "Reservations", id: "reservations" },
  { name: "Gallery", id: "gallery" },
  { name: "Contact", id: "contact" },
];

const navigationLinks = [
  { label: "Home", href: "/" },
  { label: "Menu", href: "/menu" },
  { label: "Reservations", href: "/reservations" },
  { label: "Gallery", href: "/gallery" },
  { label: "Contact", href: "/contact" },
];

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="animated-grid"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="The Dera"
          navItems={navItems}
          button={{
            text: "Order Online",
            href: "#order",
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="The Dera Cafe & Restaurant"
          description="Karachi's Perfect Night Hangout for Great Food and Relaxed Vibes. ⭐ 4.3 Rating from 151 Reviews"
          background={{ variant: "animated-grid" }}
          buttons={[
            { text: "View Menu", href: "/menu" },
            { text: "Reserve Table", href: "/reservations" },
            { text: "Order Online", href: "#order" },
          ]}
          buttonAnimation="slide-up"
          layoutOrder="default"
          imageSrc="http://img.b2bpic.net/free-photo/classic-old-fashioned-library-space-with-elegant-wooden-interiors_482257-125296.jpg"
          imageAlt="The Dera Cafe & Restaurant - Premium Dining Experience"
          mediaAnimation="blur-reveal"
          frameStyle="card"
          ariaLabel="Hero section - The Dera Cafe & Restaurant"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Experience Premium Dining at The Dera"
          metrics={[
            {
              icon: UtensilsCrossed,
              label: "Relaxing Environment",
              value: "Premium Ambiance",
            },
            {
              icon: Users,
              label: "Perfect for Gatherings",
              value: "Friends & Celebrations",
            },
            {
              icon: Clock,
              label: "Late Night Dining",
              value: "Open Until 3 AM",
            },
            {
              icon: Flame,
              label: "Sheesha Lounge",
              value: "Premium Experience",
            },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={true}
          ariaLabel="About section - The Dera Cafe & Restaurant experience"
        />
      </div>

      <div id="featured-menu" data-section="featured-menu">
        <FeatureCardTwentySeven
          title="Signature Menu Highlights"
          description="Explore our curated selection of premium dishes crafted with the finest ingredients"
          tag="Culinary Excellence"
          tagIcon={ChefHat}
          tagAnimation="slide-up"
          features={[
            {
              id: "bbq",
              title: "Authentic BBQ",
              descriptions: [
                "Slow-cooked premium meats",
                "Traditional smoking techniques",
                "Perfect for gatherings",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-fried-lamb-ribs-garnished-with-grilled-vegetables-fresh-tomatoes-table_140725-11504.jpg",
            },
            {
              id: "gourmet-burgers",
              title: "Gourmet Burgers",
              descriptions: [
                "Hand-crafted premium patties",
                "Premium aged cheese selection",
                "Gourmet bread and sauces",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-delicious-burger_23-2149897395.jpg",
            },
            {
              id: "artisan-pizza",
              title: "Artisan Pizza",
              descriptions: [
                "Wood-fired oven perfection",
                "Premium imported ingredients",
                "Classic and creative varieties",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/baking-delicious-pizza-with-wood-fired-oven_23-2150134253.jpg",
            },
            {
              id: "pakistani-cuisine",
              title: "Pakistani Favorites",
              descriptions: [
                "Traditional authentic recipes",
                "Slow-cooked perfection",
                "Premium spice blends",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-meat-soup-with-potatoes-seasonings-dark-desk_140725-76788.jpg",
            },
            {
              id: "craft-drinks",
              title: "Craft Beverages",
              descriptions: [
                "Premium cocktail selection",
                "Fresh fruit mocktails",
                "Imported beverage collection",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-cheese-set-with-glass-candles-wood-plate_176474-3035.jpg",
            },
            {
              id: "vegan-options",
              title: "Vegan Cuisine",
              descriptions: [
                "Plant-based premium dishes",
                "Creative vegetarian options",
                "Sustainable sourcing",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-food-arrangement_23-2148510958.jpg",
            },
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          buttons={[{ text: "View Full Menu", href: "/menu" }]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Featured menu section"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Karachi's Food Lovers"
          description="Join thousands of satisfied customers who choose The Dera for their dining experiences"
          names={[
            "Over 151 Reviews",
            "4.3 Star Rating",
            "Premium Quality",
            "Exceptional Service",
            "Prime Location",
            "Late Night Vibes",
            "Sheesha Lounge",
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={35}
          showCard={true}
          ariaLabel="Social proof section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Guests Say"
          description="Authentic experiences from our valued customers"
          testimonials={[
            {
              id: "testimonial-1",
              name: "Ahmed Khan",
              handle: "@ahmed.foodlover",
              testimonial: "The ambiance is absolutely stunning! Perfect spot for a night out with friends. The food quality is exceptional and the late-night hours make it my go-to place.",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-male-employee-white-collar-shirt-smiling-camera-standing-selfassured-agai_1258-112592.jpg",
              icon: Star,
            },
            {
              id: "testimonial-2",
              name: "Sophia Ali",
              handle: "@sophia.dining",
              testimonial: "Their sheesha lounge is incredible - such a relaxing environment. The menu variety is impressive with great vegan options. Highly recommend!",
              imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-stylish-woman-glasses-listening-music-earphones-curly-hair-smiling-positive-emotion-happy-isolated-pink-t-shirt-motion_285396-72.jpg",
              icon: Star,
            },
            {
              id: "testimonial-3",
              name: "Hassan Malik",
              handle: "@hassan.karachi",
              testimonial: "Best hangout spot in Karachi! The outdoor seating experience is fantastic, especially during the evening. Great food, great vibes, great people.",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-joyful-bearded-guy-posing-indoors_74855-2696.jpg",
              icon: Star,
            },
            {
              id: "testimonial-4",
              name: "Fatima Hussain",
              handle: "@fatima.eatery",
              testimonial: "I had my private dining event here and it was flawless. The staff was attentive, the food was delicious, and the private room setting was perfect. Will definitely return!",
              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-white-clothes-smiling_23-2148056219.jpg",
              icon: Star,
            },
            {
              id: "testimonial-5",
              name: "Usman Raza",
              handle: "@usman.foodie",
              testimonial: "The BBQ here is absolutely fire! Been coming here for months and never disappointed. True premium quality at reasonable prices.",
              imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-looking-front-clenching-fists-happy-excited-standing-pink-wall_141793-53277.jpg",
              icon: Star,
            },
            {
              id: "testimonial-6",
              name: "Maryam Khan",
              handle: "@maryam.night",
              testimonial: "Perfect spot for late-night cravings! The service is incredibly friendly and welcoming. Love everything about The Dera!",
              imageSrc: "http://img.b2bpic.net/free-photo/happy-carefree-woman-enjoying-morning-outdoor-coffee-shop_74855-3463.jpg",
              icon: Star,
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          topMarqueeDirection="left"
          ariaLabel="Customer testimonials section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about The Dera Cafe & Restaurant"
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",
              title: "What are your opening hours?",
              content: "The Dera Cafe & Restaurant is open daily from morning until 3 AM, making it the perfect spot for late-night dining and hangouts. We're here whenever you need great food and relaxing vibes!",
            },
            {
              id: "faq-2",
              title: "How do I make a table reservation?",
              content: "You can easily reserve a table through our online reservation system on this website. Simply select your preferred date, time, number of guests, and let us know any special requests. You can also call us or message on WhatsApp for immediate assistance.",
            },
            {
              id: "faq-3",
              title: "Do you offer online food ordering?",
              content: "Yes! You can order food online directly through our website or via Foodpanda for convenient delivery or pickup. Browse our full menu, customize your order, and enjoy premium food at your doorstep.",
            },
            {
              id: "faq-4",
              title: "Do you have vegan options?",
              content: "Absolutely! We offer a variety of delicious vegan and vegetarian options on our menu. Our chefs can also customize dishes to meet your dietary preferences. Just let us know your requirements!",
            },
            {
              id: "faq-5",
              title: "Is there a private dining room available?",
              content: "Yes, we have a beautiful private dining room perfect for celebrations, corporate events, and intimate gatherings. Contact us to check availability and customize your private dining experience.",
            },
            {
              id: "faq-6",
              title: "What payment methods do you accept?",
              content: "We accept Visa, Mastercard, Apple Pay, Google Pay, and Cash on Delivery. All online payments are securely processed through our encrypted payment gateway.",
            },
            {
              id: "faq-7",
              title: "Can I visit your sheesha lounge?",
              content: "Of course! Our premium sheesha lounge is one of our most popular features. Enjoy relaxed vibes, comfortable seating, premium sheesha flavors, and a perfect hangout atmosphere. No reservation needed, but you can book in advance for groups.",
            },
            {
              id: "faq-8",
              title: "What's your location and how do I find you?",
              content: "We're located at Behind GEO Shinwari, Karachi–Hyderabad Motorway, near Nasra School, Sector 3B Gulzar-e-Hijri Scheme 33, Karachi, Pakistan. Check our location section for Google Maps directions and contact us for guidance.",
            },
          ]}
          faqsAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
          ariaLabel="FAQ section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to Experience The Dera? Connect With Us Today"
          animationType="reveal-blur"
          buttons={[
            { text: "Reserve Table", href: "/reservations" },
            { text: "Order Online", href: "#order" },
            { text: "WhatsApp Us", href: "https://wa.me/923001234567" },
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
          ariaLabel="Contact and call-to-action section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="The Dera Cafe & Restaurant"
          copyrightText="© 2025 The Dera Cafe & Restaurant. All rights reserved. | Karachi, Pakistan"
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: MessageCircle, href: "https://wa.me/923001234567", ariaLabel: "WhatsApp" },
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}