"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { MapPin, ShoppingBag, Star, Mail } from 'lucide-react';

export default function GroceryStorePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Dev Departmental Store"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Categories", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Order Online",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Freshness Delivered to Your Doorstep in Gurugram"
          description="Experience the convenience of high-quality groceries, organic produce, and daily essentials sourced fresh and delivered promptly across Gurugram."
          tag="Your Neighborhood Grocery Partner"
          tagIcon={ShoppingBag}
          background={{ variant: "animated-grid" }}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/hero1.avif", imageAlt: "Fresh organic vegetables" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/hero2.avif", imageAlt: "Premium grocery display" }
          ]}
          rating={5}
          ratingText="4.9/5 Rating from 2000+ Customers"
          buttons={[{ text: "Explore Products", href: "#services" }]}
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardFour
          title="Top Product Categories"
          description="We stock a wide variety of fresh, local, and imported goods to fulfill all your household and dietary needs."
          tag="Quality Selection"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          products={[
            { id: "1", name: "Fresh Organic Produce", price: "Varied", variant: "Fruit & Veg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/cat1.avif" },
            { id: "2", name: "Dairy & Bakery", price: "Varied", variant: "Daily Essentials", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/cat2.avif" },
            { id: "3", name: "Beverages & Snacks", price: "Varied", variant: "Refreshments", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/cat3.avif" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Our Commitment to Quality"
          description={[
            "Dev Departmental Store has been serving the Gurugram community with a commitment to quality and transparency. We prioritize local farmers and reliable suppliers to ensure every product on our shelves meets the highest standards.",            "Our mission is to simplify your shopping experience by providing a premium selection of groceries that you can trust for your family."
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSixteen
          title="Why Shop With Us?"
          description="We balance efficiency with care to deliver a superior shopping experience every single time."
          textboxLayout="default"
          animationType="slide-up"
          positiveCard={{ items: ["Same-day delivery in Gurugram", "Hand-picked fresh produce", "Competitive pricing on all items"] }}
          negativeCard={{ items: ["No hidden service fees", "No long queues at checkout", "No compromise on quality"] }}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Shoppers Say"
          description="Customer satisfaction is our greatest metric of success."
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          testimonials={[
            { id: "1", name: "Anjali Sharma", role: "Local Resident", company: "Gurugram", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/user1.avif" },
            { id: "2", name: "Vikram Singh", role: "Regular Customer", company: "DLF Phase 5", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/user2.avif" },
            { id: "3", name: "Megha Gupta", role: "Homemaker", company: "Sector 54", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/user3.avif" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Visit or Order"
          tagIcon={MapPin}
          title="Get in Touch"
          description="Visit our store in the heart of Gurugram or reach out via phone/email for bulk orders and delivery inquiries."
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={true}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/grocery/contact.avif"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Dev Dept. Store"
          columns={[
            { title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Products", href: "#services" }] },
            { title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Contact", href: "#contact" }] }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
