"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Home, MapPin, Phone, Shield, Star, Utensils } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="large"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Menu", id: "menu" },
            { name: "Peking Duck", id: "duck" },
            { name: "About", id: "about" },
            { name: "Visit", id: "visit" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Moys"
          bottomLeftText="Near OSU Campus • Cozy Seating"
          bottomRightText="Call for Reservations"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          background={{ variant: "plain" }}
          title="Moys Chinese Restaurant"
          description="Cantonese comfort, crafted with care. Family-run for over 30 years—famous for our authentic Peking Duck dinner and handmade egg rolls."
          tag="Near OSU Campus"
          tagIcon={MapPin}
          buttons={[
            { text: "Reserve a Table", href: "contact" },
            { text: "Explore the Menu", href: "#" }
          ]}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/restaurant-gourmet-breast-lunch-fillet_1203-4699.jpg",              imageAlt: "Lacquered Peking Duck being sliced with warm steam"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/meat-slices_1157-772.jpg",              imageAlt: "Golden crispy handmade egg rolls"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/view-delicious-dish-food_23-2150777691.jpg",              imageAlt: "Sesame chicken with signature sauce"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/grilled-duck-meat-white-plate_1203-2546.jpg",              imageAlt: "Spicy shrimp lo mein noodles"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/tables-chairs-arranged-empty-coffee-shop_107420-96463.jpg",              imageAlt: "Cozy intimate dining room corner"
            }
          ],
          mediaAnimation="slide-up",          ariaLabel="Moys Chinese Restaurant hero section with featured dishes"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="What People Love"
          description="Loved by locals and visitors touring OSU"
          tag="Reviews"
          tagIcon={Star}
          names={[
            "\"Probably best restaurant experience I've had.\"",            "\"Best Peking Duck in Columbus—authentic four-course dinner.\"",            "\"Handmade egg roll… best I've had in my life.\""
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
          ariaLabel="Customer reviews and testimonials"
        />
      </div>

      <div id="signatures" data-section="signatures">
        <FeatureCardThree
          title="Signature Favorites"
          description="Our most celebrated dishes, crafted with care and authenticity"
          tag="Menu Highlights"
          tagIcon={Utensils}
          features={[
            {
              id: "01",              title: "Peking Duck Dinner",              description: "Four-course traditional experience with crisp skin, tender meat, and authentic service. An experience worth gathering for.",              imageSrc: "https://img.b2bpic.net/free-photo/restaurant-gourmet-breast-lunch-fillet_1203-4699.jpg",              imageAlt: "Peking Duck presentation"
            },
            {
              id: "02",              title: "Handmade Egg Rolls",              description: "Freshly made, golden-crisp, and famously addictive. The perfect appetizer or standalone craving satisfied.",              imageSrc: "https://img.b2bpic.net/free-photo/meat-slices_1157-772.jpg",              imageAlt: "Golden handmade egg rolls"
            },
            {
              id: "03",              title: "Spicy Shrimp Lo Mein",              description: "Never dry. Balanced heat. Comfort you can taste. Fresh noodles with perfectly cooked shrimp.",              imageSrc: "https://img.b2bpic.net/free-photo/grilled-duck-meat-white-plate_1203-2546.jpg",              imageAlt: "Spicy shrimp lo mein bowl"
            },
            {
              id: "04",              title: "Sesame Chicken (Moys Style)",              description: "More chicken than breading, with our signature sesame sauce. A house favorite that keeps guests coming back.",              imageSrc: "https://img.b2bpic.net/free-photo/view-delicious-dish-food_23-2150777691.jpg",              imageAlt: "Sesame chicken with sauce"
            }
          ]
          gridVariant="four-items-2x2-equal-grid"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          ariaLabel="Our signature dishes and menu highlights"
        />
      </div>

      <div id="atmosphere" data-section="atmosphere">
        <MetricSplitMediaAbout
          tag="Our Space"
          tagIcon={Home}
          title="Small, Cozy, and Welcoming"
          description="We're not a huge dining hall—and that's the point. Moys is a calm, intimate spot where guests feel at home and every dish is made fresh. Limited seating means every table gets personal attention and warm hospitality from owners who've been serving this community for over 30 years."
          metrics={[
            { value: "30+", title: "Years Serving OSU Community" },
            { value: "Family-Run", title: "Authentic Cantonese Kitchen" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/tables-chairs-arranged-empty-coffee-shop_107420-96463.jpg"
          imageAlt="Cozy intimate dining room with warm lighting"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </div>

      <div id="transparency" data-section="transparency">
        <FaqBase
          title="Clear, Fair, and Always Transparent"
          description="We believe great hospitality includes clear billing and honest service. Your questions matter."
          tag="Trust"
          tagIcon={Shield}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How does your gratuity policy work?",              content: "Automatic gratuity is added only to parties of five (5) or more. For smaller parties, gratuity is optional and at your discretion. We always provide itemized receipts so you can review your bill."
            },
            {
              id: "2",              title: "Can I see an itemized receipt?",              content: "Absolutely. Itemized receipts are always available—just ask your server. We're committed to transparency in every bill."
            },
            {
              id: "3",              title: "Do you have vegetarian options?",              content: "Yes. We offer several vegetarian dishes, all clearly labeled on our menu. Let your server know about any dietary preferences and we'll make sure you're well taken care of."
            },
            {
              id: "4",              title: "Is parking available?",              content: "Free parking lot available. We're located near OSU campus with easy access and ample space for our guests."
            },
            {
              id: "5",              title: "Do I need a reservation?",              content: "Reservations are not required, but strongly recommended—especially for our Peking Duck dinner and weekend dining. Call ahead to secure your table: (614) 291-MOYS."
            }
          ]
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get in Touch"
          tagIcon={Phone}
          title="Dinner Near OSU, Done Right"
          description="Call ahead to reserve your table, especially for Peking Duck dinners. Our team is ready to make your evening special."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/duck-breast-steak_1203-2299.jpg"
          imageAlt="Invitation to dine at Moys"
          inputPlaceholder="Your phone number"
          buttonText="Call Now"
          termsText="We serve lunch and dinner daily. Free parking lot. Cozy seating with warm hospitality."
          mediaPosition="right"
          mediaAnimation="slide-up"
          ariaLabel="Contact and reservation section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Moys"
          leftLink={{ text: "Hours & Location", href: "#visit" }}
          rightLink={{ text: "Call (614) 291-MOYS", href: "tel:+16142916699" }}
          ariaLabel="Moys Chinese Restaurant footer"
        />
      </div>
    </ThemeProvider>
  );
}