"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 FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Image, Layers, Layout } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="grid"
        cardStyle="layered-gradient"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "about" },
        { name: "Features", id: "features" },
        { name: "Pricing", id: "pricing" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="ResponsiveCo"
      button={{ text: "Get Started", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{ variant: "sparkles-gradient" }}
      title="Responsive Excellence for Every Screen"
      description="We build websites that adapt seamlessly, ensuring your users enjoy a perfect experience whether they are on mobile, tablet, or desktop."
      buttons={[{ text: "Get Started", href: "#contact" }]}
      imageSrc="http://img.b2bpic.net/free-photo/responsive-design-layout-software-concept_53876-124325.jpg"
      mediaAnimation="slide-up"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/responsive-design-layout-internet-concept_53876-124371.jpg", alt: "Responsive Design Layout Internet Concept" },
        { src: "http://img.b2bpic.net/free-photo/top-view-hands-holding-tablet_23-2150162740.jpg", alt: "Top view hands holding tablet" },
        { src: "http://img.b2bpic.net/free-photo/homepage-seen-computer-screen_23-2149416723.jpg", alt: "Homepage seen on computer screen" },
        { src: "http://img.b2bpic.net/free-photo/remote-control-digital-devices_23-2147929629.jpg", alt: "Remote control of digital devices" },
        { src: "http://img.b2bpic.net/free-photo/lifestyle-people-office_23-2149173721.jpg", alt: "Lifestyle of people in the office" }
      ]}
      marqueeItems={[{ type: "text", text: "Mobile-First" }, { type: "text", text: "Adaptive" }, { type: "text", text: "Fluid" }, { type: "text", text: "Modern" }, { type: "text", text: "Scalable" }]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Built for the Modern Web"
      description="Our architecture prioritizes performance and fluid responsiveness, giving your brand the foundation it needs to thrive in a multi-device world."
      metrics={[
        { value: "99.9%", title: "Uptime" },
        { value: "100ms", title: "Load Time" },
        { value: "500+", title: "Responsive Sites" }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/man-listens-black-woman-with-clipboard_482257-120085.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          title: "Fluid Grids",          description: "Layouts that resize proportionally.",          icon: Layout,
          mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160270.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-kit-collection_23-2149203473.jpg" }]
        },
        {
          title: "Flexible Media",          description: "Images that scale to fit any container.",          icon: Image,
          mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/gradient-3d-fluid-background_23-2150499029.jpg" }]
        },
        {
          title: "Adaptive Modules",          description: "Components that change based on context.",          icon: Layers,
          mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/interconnected-screens-collage-showing-modern-social-media-feed-clips_482257-129691.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg" }]
        }
      ]}
      title="Engineered for Flexibility"
      description="Advanced technical features that make your content work beautifully everywhere."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Base Framework", price: "$99", variant: "Basic", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169854.jpg" },
        { id: "p2", name: "Pro Kit", price: "$199", variant: "Advanced", imageSrc: "http://img.b2bpic.net/free-photo/mockup-tablet-servers-monitoring_482257-89019.jpg" },
        { id: "p3", name: "Enterprise Shell", price: "$499", variant: "Corporate", imageSrc: "http://img.b2bpic.net/free-photo/general-headquarters-monitoring-room-with-mockup-screen-tablet_482257-90086.jpg" },
        { id: "p4", name: "Mobile Suite", price: "$149", variant: "Mobile", imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-house-with-automation-light-system-holding-smartphone-turning-light-using-voice-activated-application_482257-2271.jpg" },
        { id: "p5", name: "Desktop Optimizer", price: "$249", variant: "Desktop", imageSrc: "http://img.b2bpic.net/free-photo/glowing-finger-controls-modern-nightlife-technology-table-generated-by-ai_188544-27026.jpg" },
        { id: "p6", name: "Cloud Sync", price: "$299", variant: "Cloud", imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg" }
      ]}
      title="Our Solutions"
      description="Explore our suite of responsive web tools."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",          tag: "Essential",          price: "$49",          period: "/mo",          description: "Perfect for individuals and small sites.",          button: { text: "Choose Basic" },
          featuresTitle: "Included",          features: ["Responsive Layouts", "Basic Optimization", "Email Support"]
        },
        {
          id: "pro",          tag: "Professional",          price: "$99",          period: "/mo",          description: "Best for growing businesses.",          button: { text: "Choose Pro" },
          featuresTitle: "Included",          features: ["Everything in Basic", "Advanced Analytics", "Priority Support"]
        },
        {
          id: "ent",          tag: "Enterprise",          price: "$299",          period: "/mo",          description: "Customized for global teams.",          button: { text: "Contact Us" },
          featuresTitle: "Included",          features: ["Everything in Pro", "Custom Development", "24/7 Dedicated Support"]
        }
      ]}
      title="Flexible Pricing Plans"
      description="Transparent pricing for all project scales."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Sarah J.", handle: "@sarahj", testimonial: "The responsiveness is flawless on every single device.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg" },
        { id: "2", name: "Mike T.", handle: "@miket", testimonial: "Finally, a site that looks good on my phone and my laptop.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-takes-selfie-with-her-phone-emotions-concept_169016-64227.jpg" },
        { id: "3", name: "Emily R.", handle: "@emilyr", testimonial: "Fast, clean, and truly responsive development.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg" },
        { id: "4", name: "David K.", handle: "@davidk", testimonial: "Exceeded all our expectations regarding user experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-businessman-standing-office_23-2147899580.jpg" },
        { id: "5", name: "Lisa B.", handle: "@lisab", testimonial: "Excellent service and top-tier responsive design.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-legs-fashion-models-tulle-skirts-sneakers_197531-590.jpg" }
      ]}
      showRating={true}
      title="Trusted by Leaders"
      description="Hear what our clients say about our responsive designs."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        { id: "q1", title: "What does responsive mean?", content: "It means your site adapts to every screen size automatically." },
        { id: "q2", title: "Is SEO better?", content: "Yes, search engines prefer responsive sites significantly." },
        { id: "q3", title: "How long does it take?", content: "We can get your responsive site ready within weeks." }
      ]}
      title="Frequently Asked Questions"
      description="Quick answers to common questions about responsive design."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      tag="Contact Us"
      title="Ready to build your responsive site?"
      description="Reach out and let's start creating a superior experience for your users today."
      buttons={[{ text: "Send a Message", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/flat-lay-pattern-with-different-shades-colors_23-2148263956.jpg"
      logoText="ResponsiveCo"
      columns={[
        { title: "Product", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] },
        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }] }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
