"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { DollarSign, Leaf, ShoppingBag, Users } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="medium"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Providencia Market"
          navItems={[
            { name: "Home", id: "home" },
            { name: "About", id: "about" },
            { name: "Products", id: "products" },
            { name: "Reviews", id: "testimonials" },
            { name: "Visit Us", id: "contact" }
          ]}
          button={{ text: "Get Directions", href: "https://maps.google.com" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="PROVIDENCIA MARKET"
          description="Experience Authentic African Groceries in DFW. At Providencia Market African Store, we bring the flavors of Africa closer to home. From fresh ingredients to beloved pantry staples, our shelves are stocked with quality products and served with genuine hospitality."
          buttons={[
            { text: "Shop In Store", href: "https://maps.google.com" },
            { text: "Explore Products", href: "#products" }
          ]}
          layoutOrder="default"
          imageSrc="http://img.b2bpic.net/free-photo/vegetables-stall-market-sanarysurmer_268835-3780.jpg"
          imageAlt="Fresh authentic African groceries and spices"
          frameStyle="card"
          mediaAnimation="slide-up"
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          tag="Our Story"
          title="A Market Built on Community"
          description="Providencia Market African Store was created to give the African community in the Dallas–Fort Worth area a place where culture, food, and hospitality come together. Customers come here not just for groceries — they come because they feel welcome."
          bulletPoints={[
            { title: "Clean and Organized", description: "Well-maintained aisles and organized shelving for easy shopping", icon: ShoppingBag },
            { title: "Authentic African Foods", description: "Genuine ingredients and products sourced from across Africa", icon: Leaf },
            { title: "Friendly Staff", description: "Welcoming, helpful team ready to assist with your needs", icon: Users },
            { title: "Great Prices", description: "Quality products without overpriced goods", icon: DollarSign }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/man-woman-keeping-social-distance_23-2148626201.jpg"
          imageAlt="Clean and organized Providencia Market interior"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          tagAnimation="slide-up"
        />
      </div>

      <div id="products" data-section="products">
        <FeatureCardEight
          title="Authentic African Groceries"
          description="Everything you need for traditional African cooking, from hard-to-find staples to fresh ingredients and household essentials."
          tag="What We Offer"
          features={[
            { id: 1, title: "Fresh Ingredients", description: "Quality meats, vegetables, and fresh foods sourced daily for your family", imageSrc: "http://img.b2bpic.net/free-photo/front-view-fresh-vegetables-red-tomatoes-cucumbers-squashes-with-greens-grey-space_140725-84254.jpg" },
            { id: 2, title: "Cooking Essentials", description: "Palm oil, spices, flours, grains, and traditional cooking ingredients", imageSrc: "http://img.b2bpic.net/free-photo/reggae-kiosk-green-yellow-red-rasta-man-items_169016-1978.jpg" },
            { id: 3, title: "Traditional Snacks", description: "Popular African treats and beverages loved by the community", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-groceries-local-store_482257-76135.jpg" },
            { id: 4, title: "Household Goods", description: "Everything you need for your kitchen and home at competitive prices", imageSrc: "http://img.b2bpic.net/free-photo/top-view-oil-garlic-black_140725-104312.jpg" }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="why-choose" data-section="why-choose">
        <MetricCardSeven
          title="Why Customers Love Providencia Market"
          description="Our reputation is built on these core commitments to our community."
          tag="Customer Favorites"
          metrics={[
            { id: "1", value: "100%", title: "Always Welcoming", items: ["Owner and staff are incredibly friendly", "Customers consistently mention warm service", "Everyone is treated like family"] },
            { id: "2", value: "★★★★★", title: "Clean & Organized", items: ["Neat and easy to navigate aisles", "Always well stocked with products", "Professional store presentation"] },
            { id: "3", value: "+10 mi", title: "Worth the Drive", items: ["Customers travel extra distances", "Never disappoint on selection", "Dedicated community loyalty"] },
            { id: "4", value: "Best", title: "Great Prices", items: ["Quality without premium markups", "Competitive market pricing", "Excellent value for money"] }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          tagAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by our community. Join thousands of happy customers who choose Providencia Market."
          cardTag="Customer Reviews"
          cardAnimation="slide-up"
          useInvertedBackground={false}
          testimonials={[
            { id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/woman-having-iced-coffee-break-outside_23-2149567309.jpg", imageAlt: "Sarah Johnson" },
            { id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-man-posing-outside_23-2148448861.jpg", imageAlt: "Michael Chen" },
            { id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling-leaning-forward_1187-3159.jpg", imageAlt: "Emily Rodriguez" },
            { id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-african-man-looking_171337-9852.jpg", imageAlt: "David Kim" },
            { id: "5", name: "Maria Santos", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", imageAlt: "Maria Santos" },
            { id: "6", name: "James Wilson", imageSrc: "http://img.b2bpic.net/free-photo/tablet-digital-using-american-bus_1303-2163.jpg", imageAlt: "James Wilson" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Stay Connected"
          title="Your African Grocery Destination in DFW"
          description="Subscribe to our newsletter for weekly product updates, special deals, and community news. Whether you're cooking traditional dishes or exploring new flavors, Providencia Market has everything you need."
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/street-market-sunset_23-2151529917.jpg"
          imageAlt="Welcoming community market atmosphere"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Providencia Market"
          copyrightText="© 2025 Providencia Market African Store. All rights reserved."
          columns={[
            { title: "Quick Links", items: [{ label: "Home", href: "#home" }, { label: "About Us", href: "#about" }, { label: "Products", href: "#products" }, { label: "Reviews", href: "#testimonials" }] },
            { title: "Contact", items: [{ label: "Visit Us", href: "#contact" }, { label: "Get Directions", href: "https://maps.google.com" }, { label: "Hours & Info", href: "#" }, { label: "WhatsApp", href: "https://wa.me" }] },
            { title: "Follow Us", items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Facebook", href: "https://facebook.com" }, { label: "Google Reviews", href: "https://google.com/maps" }, { label: "Privacy Policy", href: "#" }] }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
