"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Award, MapPin, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="largeSmall"
        background="fluid"
        cardStyle="inset"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Offers",
          id: "products",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Sa-Nkwan Locals"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars",
      }}
      title="Welcome to Sa-Nkwan Locals"
      description="Experience the heart of Ghana through our curated local tours, authentic crafts, and vibrant community stories. Discover the unseen beauty of our home."
      buttons={[
        {
          text: "Explore Experiences",
          href: "#products",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/happy-women-holding-hands-close-up_23-2148959239.jpg"
      imageAlt="Ghanaian culture and community"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/front-view-friends-spending-time-outdoors_23-2148212343.jpg",
          alt: "Front view friends spending time outdoors",
        },
        {
          src: "http://img.b2bpic.net/free-photo/people-cheering-their-country-football-team_23-2149015529.jpg",
          alt: "People cheering for their country football team",
        },
        {
          src: "http://img.b2bpic.net/free-photo/teenage-friends-spending-time-together-outdoors_23-2149053415.jpg",
          alt: "Teenage friends spending time together outdoors",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-women-holding-each-other_23-2148959241.jpg",
          alt: "Close up women holding each other",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-nigerian-woman-dancing-outdoors_23-2149029481.jpg",
          alt: "Medium shot nigerian woman dancing outdoors",
        },
      ]}
      avatarText="Join our community of explorers"
      marqueeItems={[
        {
          type: "text",
          text: "Sustainable Tourism",
        },
        {
          type: "text",
          text: "Cultural Exchange",
        },
        {
          type: "text",
          text: "Handcrafted Artisanship",
        },
        {
          type: "text",
          text: "Authentic Local Cuisine",
        },
        {
          type: "text",
          text: "Community Impact",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Our Impact in Ghana"
      metrics={[
        {
          icon: Users,
          label: "Community Members",
          value: "500+",
        },
        {
          icon: Award,
          label: "Local Partnerships",
          value: "25+",
        },
        {
          icon: MapPin,
          label: "Unique Tours",
          value: "15+",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      textboxLayout="default"
      useInvertedBackground={true}
      negativeCard={{
        items: [
          "No staged experiences",
          "Avoiding tourist traps",
          "No ecological harm",
          "Zero exploitative practices",
          "No mass-market diluted tours",
        ],
      }}
      positiveCard={{
        items: [
          "Genuine local connection",
          "Sustainable tourism practices",
          "Fair compensation for artisans",
          "Community-led initiatives",
          "Direct impact on livelihoods",
        ],
      }}
      title="Why Choose Sa-Nkwan?"
      description="We bridge the gap between visitors and our community, ensuring every experience is authentic and sustainable."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          brand: "Artisan",
          name: "Handwoven Kente Cloth",
          price: "GHS 150",
          rating: 5,
          reviewCount: "24",
          imageSrc: "http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1258.jpg",
        },
        {
          id: "2",
          brand: "Cuisine",
          name: "Traditional Cooking Class",
          price: "GHS 200",
          rating: 5,
          reviewCount: "18",
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-mexican-food_23-2148140195.jpg",
        },
        {
          id: "3",
          brand: "Tour",
          name: "Community Market Walk",
          price: "GHS 100",
          rating: 4,
          reviewCount: "42",
          imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-taking-photo-friend_23-2147771232.jpg",
        },
        {
          id: "4",
          brand: "Jewelry",
          name: "Custom Beaded Waistbands",
          price: "GHS 50",
          rating: 5,
          reviewCount: "56",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-arid-environment-while-wearing-native-african-clothing_23-2150609665.jpg",
        },
        {
          id: "5",
          brand: "Beauty",
          name: "Raw Shea Butter Pack",
          price: "GHS 75",
          rating: 5,
          reviewCount: "31",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-spa-concept-with-woman_23-2147816923.jpg",
        },
        {
          id: "6",
          brand: "Textile",
          name: "Artisan Fabric Scarf",
          price: "GHS 120",
          rating: 4,
          reviewCount: "12",
          imageSrc: "http://img.b2bpic.net/free-photo/cover-empty-background-space-wear_1253-390.jpg",
        },
      ]}
      title="Curated Local Experiences"
      description="From handcrafted treasures to immersive local tours, discover the best of Ghana."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Sarah Miller",
          role: "Visitor",
          company: "USA",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/people-active-lifestyle-travel-adventure-tourism-concept-handsome-trendy-looking-african-american-tourist-with-backpack-spending-vacations-abroad_273609-1125.jpg",
        },
        {
          id: "2",
          name: "Kofi Mensah",
          role: "Local Host",
          company: "Accra",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/lovable-woman-looking-front_197531-19779.jpg",
        },
        {
          id: "3",
          name: "Emma Watson",
          role: "Traveler",
          company: "UK",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-boy-summer-hat-with-camera-happy-positive-showing-thumbs-up-with-both-hands-standing-pink-wall_141793-22839.jpg",
        },
        {
          id: "4",
          name: "David Mensah",
          role: "Visitor",
          company: "Canada",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-making-barbecue-grill_23-2149745563.jpg",
        },
        {
          id: "5",
          name: "Anita Osei",
          role: "Traveler",
          company: "Nigeria",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-with-dreads-representing-rastafari-movement_23-2151532019.jpg",
        },
      ]}
      kpiItems={[
        {
          value: "98%",
          label: "Satisfaction Rate",
        },
        {
          value: "1.2k",
          label: "Happy Visitors",
        },
        {
          value: "10+",
          label: "Years Active",
        },
      ]}
      title="Community Voices"
      description="Hear what our visitors and community members have to say about their experiences."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",
          title: "How do I book a tour?",
          content: "You can contact us through the form on our website or visit our local community center.",
        },
        {
          id: "2",
          title: "Are these experiences sustainable?",
          content: "Yes, we focus on eco-friendly and community-supporting activities.",
        },
        {
          id: "3",
          title: "Can I bring my family?",
          content: "Absolutely, our tours are family-friendly and welcoming to all ages.",
        },
      ]}
      title="Common Questions"
      description="Everything you need to know about booking and participating with Sa-Nkwan."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Get in Touch"
      description="Ready to experience Sa-Nkwan? Send us a message and we'll help plan your visit."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Email Address",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "How can we help?",
        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-happy-friends-outdoors_23-2148931130.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Sa-Nkwan Locals"
      leftLink={{
        text: "Terms & Conditions",
        href: "#",
      }}
      rightLink={{
        text: "Privacy Policy",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
