"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Clock, Truck, MapPin, Users, Star, Facebook, Phone } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="CHICKEN BOX"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Menu", id: "menu" },
            { name: "Order", id: "order" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          button={{
            text: "Order Now",            href: "/order"}}
        />
      </div>

      {/* About Metrics Section */}
      <div id="about" data-section="about">
        <AboutMetric
          title="Welcome to CHICKEN BOX"
          metrics={[
            {
              icon: Clock,
              label: "Open 24/7",              value: "Always Available"},
            {
              icon: Truck,
              label: "Fast Delivery",              value: "30 mins or less"},
            {
              icon: MapPin,
              label: "Prime Location",              value: "306 Corniche El Tor"},
            {
              icon: Users,
              label: "Happy Customers",              value: "4,300+ Followers"},
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      {/* Features Section */}
      <div id="features" data-section="features">
        <FeatureCardTwentyThree
          title="Why Choose CHICKEN BOX?"
          description="Experience the best fried chicken in El Tor with authentic taste, premium ingredients, and exceptional service."
          features={[
            {
              id: "1",              title: "Crispy Fried Chicken",              tags: ["Golden Brown", "Juicy", "Flavorful"],
              imageSrc: "http://img.b2bpic.net/free-photo/fried-chicken-with-fried-potatoes-celebration_140725-113379.jpg",              imageAlt: "Crispy Fried Chicken"},
            {
              id: "2",              title: "Delicious Burgers",              tags: ["Fresh Ingredients", "Big Fire", "Premium"],
              imageSrc: "http://img.b2bpic.net/free-photo/tasty-homemade-sandwich-tomatoes-pepper-cutting-board-dark-color-surface_179666-34107.jpg",              imageAlt: "Big Fire Burger"},
            {
              id: "3",              title: "Multiple Service Options",              tags: ["Dine-in", "Drive-through", "Delivery"],
              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-dining-table-assortment_23-2150312225.jpg",              imageAlt: "Dine-in Service"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="CHICKEN BOX By The Numbers"
          description="Serving delicious food to happy customers in El Tor, South Sinai"
          metrics={[
            {
              id: "1",              value: "24/7",              title: "Hours of Operation",              description: "Always open for your cravings",              videoSrc: "https://example.com/video.mp4",              videoAriaLabel: "Hours of operation video"},
            {
              id: "2",              value: "4,300+",              title: "Happy Customers",              description: "Trusted by thousands",              videoSrc: "https://example.com/video.mp4",              videoAriaLabel: "Happy customers video"},
            {
              id: "3",              value: "30 mins",              title: "Average Delivery",              description: "Fast and hot to your door",              videoSrc: "https://example.com/video.mp4",              videoAriaLabel: "Average delivery video"},
            {
              id: "4",              value: "3 Ways",              title: "Service Options",              description: "Dine-in, Drive-through, Delivery",              videoSrc: "https://example.com/video.mp4",              videoAriaLabel: "Service options video"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="CHICKEN BOX 🍗"
          copyrightText="© 2025 CHICKEN BOX تشكن بوكس. All rights reserved. Open 24/7 | El Tor, South Sinai, Egypt"
          socialLinks={[
            {
              icon: Facebook,
              href: "https://www.facebook.com/people/Chicken-box-306street/61553159303644/",              ariaLabel: "Facebook"},
            {
              icon: Phone,
              href: "tel:+201100016162",              ariaLabel: "Phone"},
            {
              icon: MapPin,
              href: "#contact",              ariaLabel: "Location"},
          ]}
        />
      </div>
    </ThemeProvider>
  );
}