"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Clock, Star, Gift, BookOpen, ShoppingCart, Coffee } from "lucide-react";

export default function OrderPage() {
  const navItems = [{"name":"Home","id":"/"},{"name":"Menu","id":"/menu"},{"name":"About","id":"/about"},{"name":"Order Ahead","id":"/order"},{"name":"Shop","id":"/shop"}];
  const footerColumns = [{"items":[{"label":"Home","href":"/"},{"label":"Menu","href":"/menu"},{"label":"About","href":"/about"},{"label":"Order Ahead","href":"/order"}]},{"items":[{"label":"Hours","href":"/about"},{"label":"Instagram","href":"https://instagram.com/midnightcafe"}]}];
  
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="inset"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={navItems.map(item => ({ ...item, id: item.id }))}
          brandName="Midnight Cafe"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join the Midnight List."
          description="Secret drops. Seasonal drinks. VIP offers."
          inputs={[
            { "name": "name", "type": "text", "placeholder": "Your Name", "required": true },
            { "name": "email", "type": "email", "placeholder": "Your Email", "required": true }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/portrait-cafe-counter-with-barista-girl-working-with-coffee-machine-making-order-client_1258-203416.jpg"
          imageAlt="Modern cafe counter"
          mediaPosition="right"
          buttonText="Get Early Access"
          useInvertedBackground={false}
          mediaAnimation="opacity"
        />
      </div>
      
      <div id="order-benefits" data-section="order-benefits">
        <AboutMetric
          title="Why Order Ahead?"
          metrics={[
            { icon: Clock, label: "Save Time", value: "Skip the line" },
            { icon: Star, label: "Earn Rewards", value: "Points per order" },
            { icon: Gift, label: "Exclusive Offers", value: "App-only deals" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>
      
      <div id="how-to-order" data-section="how-to-order">
        <FeatureHoverPattern
          title="Simple & Fast"
          description="Your coffee is just a few clicks away."
          features={[
            { icon: BookOpen, title: "1. Browse the Menu", description: "Explore our full selection of drinks and pastries." },
            { icon: ShoppingCart, title: "2. Place Your Order", description: "Customize your items and pay securely." },
            { icon: Coffee, title: "3. Quick Pickup", description: "Your order will be ready and waiting for you." }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="Midnight Cafe"
        />
      </div>
    </ThemeProvider>
  );
}