"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactText from "@/components/sections/contact/ContactText";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Phone, MapPin, Facebook } from "lucide-react";

export default function CheckoutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Menu", id: "menu" },
    { name: "Order", id: "order" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  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"
    >
      <div id="nav" data-section="nav" className="relative z-50">
        <NavbarLayoutFloatingInline
          brandName="CHICKEN BOX"
          navItems={navItems}
          button={{
            text: "Order Now",            href: "/order"}}
        />
      </div>

      <div id="checkout-info" data-section="checkout-info" className="mx-auto px-4 md:px-6">
        <ContactText
          text="Complete your order with secure payment. We accept cash on delivery and online card payments. Your meal will arrive hot and fresh within 30 minutes. Call us at 01100016162 for any questions."
          animationType="entrance-slide"
          buttons={[
            {
              text: "Proceed to Payment",              href: "#payment"},
            {
              text: "Call Support",              href: "tel:+201100016162"},
          ]}
          background={{
            variant: "plain"}}
          useInvertedBackground={false}
        />
      </div>

      <div id="payment-methods" data-section="payment-methods" className="mx-auto px-4 md:px-6">
        <MetricCardEleven
          title="Payment Methods"
          description="Choose your preferred payment option for a smooth checkout experience."
          metrics={[
            {
              id: "1",              value: "💳",              title: "Card Payment",              description: "Secure online payment with credit/debit card",              videoSrc: "https://example.com/video.mp4",              videoAriaLabel: "Card payment video"},
            {
              id: "2",              value: "💵",              title: "Cash on Delivery",              description: "Pay when your order arrives at your door",              videoSrc: "https://example.com/video.mp4",              videoAriaLabel: "Cash on delivery video"},
            {
              id: "3",              value: "🚚",              title: "Free Delivery",              description: "For orders above 150 EGP in El Tor",              videoSrc: "https://example.com/video.mp4",              videoAriaLabel: "Free delivery video"},
            {
              id: "4",              value: "⏱️",              title: "Quick Checkout",              description: "Complete your order in under 5 minutes",              videoSrc: "https://example.com/video.mp4",              videoAriaLabel: "Quick checkout video"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="checkout-faq" data-section="checkout-faq" className="mx-auto px-4 md:px-6">
        <FaqDouble
          title="Checkout FAQs"
          description="Common questions about the ordering and payment process"
          faqs={[
            {
              id: "1",              title: "How long does delivery take?",              content: "Our average delivery time is 30 minutes or less. You will receive updates via call or SMS about your delivery status."},
            {
              id: "2",              title: "What areas do you deliver to?",              content: "We deliver throughout El Tor, South Sinai. Additional charges may apply for areas outside the main city zone."},
            {
              id: "3",              title: "Is my payment information secure?",              content: "Yes! We use industry-standard encryption and secure payment gateways to protect your payment information."},
            {
              id: "4",              title: "Can I cancel my order?",              content: "You can cancel your order within 5 minutes of placing it. After that, contact us directly at 01100016162."},
            {
              id: "5",              title: "Do you offer discounts?",              content: "We offer special discounts for bulk orders and regular customers. Follow us on Facebook for latest deals!"},
            {
              id: "6",              title: "What if my order arrives late?",              content: "Contact us immediately at 01100016162. We guarantee quality and will resolve any issues promptly."},
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
        <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>
  );
}