"use client";

import { Star } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={[{name:"Menu",id:"signature-flavors"},{name:"About",id:"brand-story"},{name:"Delivery",id:"delivery-speed"},{name:"Dine-In",id:"dine-in-experience"}]}
          brandName="bb.q chicken"
          button={{text:"Order Now",href:"#final-cta"}}
          className="py-4 px-6 md:px-8 lg:px-12 xl:px-16"
          buttonClassName="bg-primary-cta text-secondary-cta"
          buttonTextClassName="font-semibold"
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Crispy. Saucy. Unforgettable.\nColumbus’ Korean Fried Chicken Obsession."
          description="Hand-brushed sauces. Double-fried crisp. Delivered hot, fast, and flavor-packed — every time."
          buttons={[{text:"Order Now",href:"#final-cta"},{text:"View Menu",href:"#signature-flavors"}]}
          imageSrc="https://img.b2bpic.net/free-photo/top-view-fried-chicken-with-sauce-peanuts-lemon-table-food-meal-dinner_140725-28138.jpg"
          imageAlt="bb.q chicken hero background with crispy Korean fried chicken"
          textPosition="bottom-left"
          showDimOverlay={true}
          showBlur={true}
          tag="★★★★★ Loved by Columbus locals"
          tagIcon={Star}
          buttonAnimation="text-stagger"
          tagAnimation="reveal-blur"
          className="min-h-[100vh]"
          titleClassName="text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-extrabold"
          descriptionClassName="text-lg md:text-xl lg:text-2xl"
          textBoxClassName="bottom-10 left-10 md:bottom-20 md:left-20 max-w-2xl"
          buttonContainerClassName="mt-8"
          containerClassName="py-20 md:py-32"
        />
      </div>
      <div id="brand-story" data-section="brand-story">
        <TextSplitAbout
          title="Korean Fried Chicken — Perfected"
          description={["At bb.q chicken, fried chicken isn’t fast food — it’s a craft.","Our chicken is double-fried for an ultra-light, ultra-crispy texture that stays crunchy even after it’s sauced. Every batch is hand-coated in our signature Korean flavors, balancing sweet, spicy, savory, and umami in every bite.","With dozens of sauce combinations and premium sides, we’ve become a go-to Columbus destination for dine-in nights, campus cravings, and late-night delivery.","Fresh. Hot. Crispy. Always."]}
          useInvertedBackground={false}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light"
          descriptionClassName="text-lg md:text-xl text-foreground/80"
        />
      </div>
      <div id="signature-flavors" data-section="signature-flavors">
        <FeatureCardSix
          title="Choose Your Flavor Obsession"
          description="Fan-favorite sauces inspired by real reviews"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[{id:1,title:"Honey Garlic",description:"Sweet, glossy, and dangerously addictive. A perfect balance of rich garlic and golden honey.",imageSrc:"https://img.b2bpic.net/free-photo/high-angle-delicious-chicken-dish_23-2148771293.jpg",imageAlt:"Honey Garlic Korean Fried Chicken"},{id:2,title:"Soy Garlic",description:"Classic Korean comfort — savory, aromatic, and crispy perfection.",imageSrc:"https://img.b2bpic.net/free-photo/high-angle-fried-chicken-legs-with-sauce_23-2148646631.jpg",imageAlt:"Soy Garlic Korean Fried Chicken"},{id:3,title:"Gangnam Spicy",description:"Sweet heat that builds with every bite. A Columbus fan favorite.",imageSrc:"https://img.b2bpic.net/free-photo/chicken-fried-spicy-sauce-korean-style_1150-42875.jpg",imageAlt:"Gangnam Spicy Korean Fried Chicken"},{id:4,title:"Secret Sauce",description:"Our signature blend — sweet, tangy, and unforgettable.",imageSrc:"https://img.b2bpic.net/free-photo/fried-crispy-fish-with-narsharab-sauce_140725-4669.jpg",imageAlt:"bb.q chicken Secret Sauce Fried Chicken"},{id:5,title:"Hot Spicy",description:"For serious heat lovers. Crispy outside, fiery inside.",imageSrc:"https://img.b2bpic.net/free-photo/grilled-chicken-wings-with-ketchup-dark-background_84443-72406.jpg",imageAlt:"Hot Spicy Korean Fried Chicken"},{id:6,title:"Spicy Galbi",description:"Smoky, bold, and uniquely Korean BBQ inspired.",imageSrc:"https://img.b2bpic.net/free-photo/uncooked-chicken-meat-with-spices-dark-plate-high-quality-photo_114579-64789.jpg",imageAlt:"Spicy Galbi Korean Fried Chicken"}]}
          buttons={[{text:"Explore Full Menu →",href:"#final-cta"}]}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light text-foreground"
          descriptionClassName="text-lg md:text-xl text-foreground/80"
          cardTitleClassName="text-2xl md:text-3xl lg:text-4xl"
          cardDescriptionClassName="text-base md:text-lg"
          textBoxClassName="text-center mx-auto max-w-3xl"
          stepNumberClassName="text-xl font-bold"
        />
      </div>
      <div id="food-quality" data-section="food-quality">
        <MetricCardFourteen
          title="Why Our Chicken Hits Different"
          tag="Luxury Selling Points"
          metrics={[{id:"1",value:"Double-fried",description:"for extra crispiness"},{id:"2",value:"Never soggy",description:"always crunchy"},{id:"3",value:"Hand-brushed",description:"sauces — never mass tossed"},{id:"4",value:"Juicy inside",description:"crispy outside"}]}
          metricsAnimation="reveal-blur"
          useInvertedBackground={false}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light"
          tagClassName="text-base md:text-lg text-primary-cta"
          valueClassName="text-5xl md:text-6xl lg:text-7xl font-semibold"
          descriptionClassName="text-base md:text-lg text-foreground/80"
          metricClassName="border border-accent/20 rounded-pill p-6 flex flex-col items-center justify-center text-center backdrop-blur-sm"
          metricsContainerClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12"
          containerClassName="max-w-7xl"
        />
      </div>
      <div id="delivery-speed" data-section="delivery-speed">
        <TextSplitAbout
          title="Hot. Fresh. At Your Door — Fast."
          description={["First time ordering? Expect it to become a habit.","Our delivery experience is built for speed without sacrificing freshness. Orders often arrive in 30–45 minutes — hot, crispy, and ready to devour."]}
          buttons={[{text:"Start Delivery Order →",href:"#final-cta"}]}
          useInvertedBackground={true}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light text-foreground"
          descriptionClassName="text-lg md:text-xl text-foreground/80"
          buttonContainerClassName="mt-8"
        />
      </div>
      <div id="dine-in-experience" data-section="dine-in-experience">
        <FeatureCardSix
          title="Dine-In, Level Up"
          description="Located near the OSU campus, bb.q chicken offers a spacious dine-in atmosphere perfect for groups, casual nights, or flavor-packed date nights."
          textboxLayout="default"
          useInvertedBackground={false}
          features={[{id:1,title:"Comfortable seating",description:"Enjoy a relaxing meal in our modern and inviting dining area.",imageSrc:"https://img.b2bpic.net/free-photo/woman-dipping-chicken-croquette-into-sauce-beer-setup-with-nuts_140725-10810.jpg?_wi=1",imageAlt:"Modern restaurant interior with comfortable seating"},{id:2,title:"Friendly, hospitable staff",description:"Our team is dedicated to providing an exceptional dining experience.",imageSrc:"https://img.b2bpic.net/free-photo/woman-dipping-chicken-croquette-into-sauce-beer-setup-with-nuts_140725-10810.jpg?_wi=2",imageAlt:"Friendly restaurant staff serving customers"},{id:3,title:"Alcoholic beverages available",description:"Pair your chicken with a selection of beers, wines, or soju.",imageSrc:"https://img.b2bpic.net/free-photo/woman-dipping-chicken-croquette-into-sauce-beer-setup-with-nuts_140725-10810.jpg?_wi=3",imageAlt:"Alcoholic beverages served at a restaurant"},{id:4,title:"Convenient parking nearby",description:"Easy access with a parking garage located just steps away.",imageSrc:"https://img.b2bpic.net/free-photo/woman-dipping-chicken-croquette-into-sauce-beer-setup-with-nuts_140725-10810.jpg?_wi=4",imageAlt:"Parking garage near a restaurant"}]}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light"
          descriptionClassName="text-lg md:text-xl text-foreground/80"
          cardTitleClassName="text-2xl md:text-3xl lg:text-4xl"
          cardDescriptionClassName="text-base md:text-lg"
          textBoxClassName="text-center mx-auto max-w-3xl"
          stepNumberClassName="text-xl font-bold"
        />
      </div>
      <div id="sides-extras" data-section="sides-extras">
        <ProductCardFour
          title="Don’t Skip The Sides"
          description="Fan mentions pulled from reviews:"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground={true}
          products={[{id:"1",name:"Sweet Potato Fries",price:"$5.99",variant:"Sweet, crispy perfection",imageSrc:"https://img.b2bpic.net/free-photo/traditional-roasted-potatoes-with-herbs-deep-bowl_114579-1927.jpg",imageAlt:"Sweet Potato Fries"},{id:"2",name:"Onion Rings",price:"$6.99",variant:"Crowd favorite crunch",imageSrc:"https://img.b2bpic.net/free-photo/fried-onion-rings-table_140725-6647.jpg",imageAlt:"Crispy Onion Rings"},{id:"3",name:"Dumplings",price:"$7.99",variant:"Classic add-on",imageSrc:"https://img.b2bpic.net/free-photo/delicious-meal-with-sambal-arrangement_23-2149076072.jpg",imageAlt:"Korean Dumplings"},{id:"4",name:"Fries",price:"$4.99",variant:"Perfect with sauce dips",imageSrc:"https://img.b2bpic.net/free-photo/delicious-hot-french-fries-with-red-sauce-served-table_632805-37.jpg",imageAlt:"Classic French Fries"}]}
          buttons={[{text:"Add Sides To Your Order →",href:"#final-cta"}]}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light text-foreground"
          descriptionClassName="text-lg md:text-xl text-foreground/80"
          cardNameClassName="text-lg font-semibold"
          cardPriceClassName="text-xl font-bold"
          cardVariantClassName="text-sm text-foreground/70"
          textBoxClassName="text-center mx-auto max-w-3xl"
        />
      </div>
      <div id="social-proof-reviews" data-section="social-proof-reviews">
        <TestimonialCardTen
          title="Columbus Can’t Get Enough"
          description="See what our customers have to say about bb.q chicken."
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[{id:"1",title:"\"Delivered in 30–45 minutes — fresh and hot. Already can’t wait to order again.\"",quote:"The speed of delivery without compromising quality is truly impressive. This is my new go-to for fried chicken!",name:"Sarah Johnson",role:"Loyal Customer",imageSrc:"https://img.b2bpic.net/free-photo/customer-experience-creative-collage_23-2149346508.jpg"},{id:"2",title:"\"So many flavor options. Crispy, great value, amazing service.\"",quote:"bb.q chicken offers an incredible variety of sauces and the chicken is consistently perfectly crispy. The staff is always friendly.",name:"Michael Chen",role:"Food Enthusiast",imageSrc:"https://img.b2bpic.net/free-photo/young-man-with-dessert-coffee-shop_1150-14277.jpg"},{id:"3",title:"\"Better than similar spots around Columbus. Boneless chicken was juicy and perfectly crispy.\"",quote:"Having tried many fried chicken places in Columbus, bb.q chicken stands out. The boneless option is a game-changer – juicy and never dry.",name:"Emily Rodriguez",role:"Columbus Local",imageSrc:"https://img.b2bpic.net/free-photo/happiness-leisure-lifestyle-concept-smiling-african-american-female-recreates-cafe-restaurant-eats-delicious-dessert-drinks-cocktail-happy-have-pleasant-conversation-with-interlocutor_273609-2194.jpg"},{id:"4",title:"\"Gangnam spicy is the perfect sweet-heat balance. Crispiness is next level.\"",quote:"The Gangnam Spicy sauce is my absolute favorite, a fantastic blend of sweet and spicy. And the crispiness? Unbeatable.",name:"David Kim",role:"Spice Lover",imageSrc:"https://img.b2bpic.net/free-photo/guy-shopping-center-with-thumb-up_1149-241.jpg"},{id:"5",title:"\"Always a fantastic experience, whether dining in or ordering delivery for game nights.\"",quote:"bb.q chicken is perfect for any occasion. The dine-in atmosphere is great, and delivery is consistently quick and hot.",name:"Jessica Lee",role:"OSU Student",imageSrc:"https://img.b2bpic.net/free-photo/close-up-view-american-food_23-2148454903.jpg"}]}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light"
          descriptionClassName="text-lg md:text-xl text-foreground/80"
          testimonialTitleClassName="text-2xl md:text-3xl lg:text-4xl font-semibold"
          quoteClassName="text-base md:text-lg italic"
          nameClassName="text-sm font-semibold"
          roleClassName="text-xs text-foreground/70"
          textBoxClassName="text-center mx-auto max-w-3xl"
        />
      </div>
      <div id="value-portions" data-section="value-portions">
        <TextSplitAbout
          title="Premium Chicken. Worth Every Bite."
          description={["Our portions are generous, our flavors are bold, and our quality speaks for itself. Whether you’re ordering solo or feeding a group, bb.q chicken delivers value that matches the flavor experience.","Average guest spend: $20–30"]}
          useInvertedBackground={true}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light text-foreground"
          descriptionClassName="text-lg md:text-xl text-foreground/80"
        />
      </div>
      <div id="final-cta" data-section="final-cta">
        <ContactCTA
          tag="Your New Favorite Chicken Spot Starts Here"
          title="Crispy. Juicy. Flavor-packed. Delivered fast or served fresh in-house."
          description="Once you try bb.q chicken, ordinary fried chicken just won’t hit the same."
          buttons={[{text:"Order Now",href:"#final-cta"},{text:"View Menu",href:"#signature-flavors"}]}
          background={{variant:"radial-gradient"}}
          useInvertedBackground={true}
          className="py-20 md:py-32 lg:py-40"
          titleClassName="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light text-foreground"
          descriptionClassName="text-lg md:text-xl text-foreground/80"
          tagClassName="text-lg md:text-xl text-primary-cta font-semibold"
          contentClassName="backdrop-blur-sm bg-card/70 rounded-pill p-10 md:p-16 lg:p-20 text-center max-w-4xl mx-auto"
          buttonContainerClassName="mt-8"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="bb.q chicken"
          columns={[{items:[{label:"Hours",href:"#"},{label:"Contact",href:"#"},{label:"Location",href:"#"},{label:"Online Ordering",href:"#"}]},{items:[{label:"Instagram",href:"https://www.instagram.com/bbqchicken_usa",onClick:()=>window.open('https://www.instagram.com/bbqchicken_usa','_blank')},{label:"Facebook",href:"https://www.facebook.com/bbqchickenusa",onClick:()=>window.open('https://www.facebook.com/bbqchickenusa','_blank')},{label:"TikTok",href:"https://www.tiktok.com/@bbqchicken_usa",onClick:()=>window.open('https://www.tiktok.com/@bbqchicken_usa','_blank')}]}]}
          className="py-16 md:py-24 lg:py-32"
          logoClassName="text-5xl font-extrabold"
          itemClassName="text-base hover:text-primary-cta transition-colors duration-200"
          columnsClassName="grid grid-cols-1 md:grid-cols-2 gap-8"
        />
      </div>
    </ThemeProvider>
  );
}