"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Globe, Package, Smile, ShieldCheck } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="mediumLarge"
        background="circleGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Products",          id: "#products"},
        {
          name: "Reviews",          id: "#testimonials"},
        {
          name: "Support",          id: "#faq"},
      ]}
      brandName="ShopifyDrop"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Upgrade Your Daily Lifestyle"
      description="Discover curated high-tech gear designed to simplify your routine and elevate your personal efficiency."
      testimonials={[
        {
          name: "Alex R.",          handle: "@alextech",          testimonial: "The quality of products is unmatched. Fast shipping and great support.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman_23-2149153813.jpg",          imageAlt: "Professional portrait"},
        {
          name: "Jordan S.",          handle: "@jsdev",          testimonial: "My new favorite store for gadget essentials.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",          imageAlt: "Professional portrait"},
        {
          name: "Sarah K.",          handle: "@sarahk",          testimonial: "Everything I bought works perfectly. Really impressed.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg",          imageAlt: "Professional portrait"},
        {
          name: "Mike D.",          handle: "@miked",          testimonial: "Reliable and fast delivery, definitely coming back.",          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",          imageAlt: "Professional portrait"},
        {
          name: "Elena V.",          handle: "@elenav",          testimonial: "Top-tier tech gear at great prices. Very satisfied.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",          imageAlt: "Professional portrait"},
      ]}
      buttons={[
        {
          text: "Shop Now",          href: "#products"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/modern-kitchen-interior-design_23-2151821330.jpg"
      imageAlt="High-tech workspace"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12307.jpg",          alt: "User 1"},
        {
          src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",          alt: "User 2"},
        {
          src: "http://img.b2bpic.net/free-photo/closeup-relaxed-content-woman-leaning-wall_1262-1749.jpg",          alt: "User 3"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-teenager_23-2149153360.jpg",          alt: "User 4"},
        {
          src: "http://img.b2bpic.net/free-photo/attractive-brunette-female-dressed-long-neck-brown-jacket-grey-background_613910-15043.jpg",          alt: "User 5"},
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "1",          title: "Free Shipping",          subtitle: "On all orders worldwide",          category: "Logistics",          value: "Express"},
        {
          id: "2",          title: "Secure Payment",          subtitle: "Encrypted checkout process",          category: "Safety",          value: "SSL"},
        {
          id: "3",          title: "24/7 Support",          subtitle: "Help whenever you need it",          category: "Service",          value: "Live"},
      ]}
      title="Why Shop With Us"
      description="Quality assurance and excellence in every transaction."
      tag="Trusted & Reliable"
      tagIcon={ShieldCheck}
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "Pro Headphones",          price: "$129.00",          imageSrc: "http://img.b2bpic.net/free-photo/headphones-record-player_23-2147781816.jpg"},
        {
          id: "p2",          name: "Smart Watch",          price: "$199.00",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-hipster-arab-man-guy-sunglasses-posed-outdoor-street-sunset-sitting-road-shadows_627829-2723.jpg"},
        {
          id: "p3",          name: "Mini Speaker",          price: "$89.00",          imageSrc: "http://img.b2bpic.net/free-photo/music-decoration-black-friday_23-2147696826.jpg"},
        {
          id: "p4",          name: "Mechanical Keyboard",          price: "$149.00",          imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074256.jpg"},
        {
          id: "p5",          name: "Wireless Mouse",          price: "$59.00",          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-tech-setup-with-nvme-ssd_58702-17244.jpg"},
        {
          id: "p6",          name: "Fast Charger",          price: "$39.00",          imageSrc: "http://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309662.jpg"},
      ]}
      title="Featured Gear"
      description="Our best-selling essentials for your modern workspace."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Sarah W.",          role: "Designer",          testimonial: "Amazing store, my order arrived within 3 days!",          imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg"},
        {
          id: "t2",          name: "Mark D.",          role: "Engineer",          testimonial: "Products are exactly as described. Very happy.",          imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg"},
        {
          id: "t3",          name: "Linda M.",          role: "Creative",          testimonial: "Stylish and functional gadgets that just work.",          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-posing-wrapping-up-grey-cloth_176420-16804.jpg"},
        {
          id: "t4",          name: "Chris B.",          role: "Developer",          testimonial: "Super reliable service and quality gear.",          imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"},
        {
          id: "t5",          name: "Emily K.",          role: "Consultant",          testimonial: "Highly recommended for tech enthusiasts.",          imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
      ]}
      title="Trusted by Thousands"
      description="See why our customers love our curated collection."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          title: "Happy Customers",          value: "15,000+",          icon: Smile,
        },
        {
          id: "m2",          title: "Products Shipped",          value: "50,000+",          icon: Package,
        },
        {
          id: "m3",          title: "Global Presence",          value: "40+",          icon: Globe,
        },
      ]}
      title="Our Impact"
      description="Delivering quality products across the globe."
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Tech Insider",        "Gadget Daily",        "Digital Trends",        "Future Gear",        "Retail Weekly",        "Startup Hub",        "Global Daily"]}
      title="As Seen In"
      description="Trusted by industry leaders."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "How long is shipping?",          content: "Orders typically ship within 3-5 business days."},
        {
          id: "f2",          title: "Do you offer returns?",          content: "Yes, we offer a 30-day return policy for all items."},
        {
          id: "f3",          title: "Is my payment secure?",          content: "Absolutely, we use industry-standard encryption for your data."},
      ]}
      title="Common Questions"
      description="Answers to everything you need to know."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Contact Us"
      title="Need Help With Your Order?"
      description="Reach out to our dedicated support team, and we will get back to you within 24 hours."
      buttons={[
        {
          text: "Contact Support",          href: "mailto:support@shopifydrop.com"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Shop All",              href: "#products"},
            {
              label: "About Us",              href: "#"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          items: [
            {
              label: "Contact",              href: "mailto:support@shopifydrop.com"},
            {
              label: "Shipping Policy",              href: "#"},
            {
              label: "Returns",              href: "#"},
          ],
        },
        {
          items: [
            {
              label: "Instagram",              href: "#"},
            {
              label: "Twitter",              href: "#"},
            {
              label: "Facebook",              href: "#"},
          ],
        },
      ]}
      logoText="ShopifyDrop"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}