"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextAbout from '@/components/sections/about/TextAbout';
import { Award, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmall"
        background="floatingGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Clients",          id: "#clients"},
        {
          name: "Team",          id: "#team"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="DesignCraft Agency"
      button={{
        text: "Get a Quote",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "sparkles-gradient"}}
      title="Crafting Digital Experiences That Convert"
      description="Your vision, our design expertise. We build stunning, high-performing websites tailored to your business goals, ensuring every pixel drives impact."
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/business-people-teamwork_23-2148826999.jpg",          imageAlt: "Design team collaborating on a web project"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749867.jpg",          imageAlt: "Creative professionals brainstorming digital strategy"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blooming-floral-arts-crafts-nature_53876-124885.jpg",          imageAlt: "Responsive website design mockups on multiple devices"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/male-female-graphic-designers-using-graphics-tablet_1170-2948.jpg",          imageAlt: "UI/UX designer working on user flows"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164840.jpg",          imageAlt: "Modern coding environment with design elements"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/team-database-admins-analyzing-source-code-wall-screen-tv-comparing-errors-using-digital-tablet-busy-server-room-two-cloud-programers-debugging-algorithm-software-innovation-office_482257-43976.jpg",          imageAlt: "Creative agency workspace with diverse team"},
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="We blend creativity with strategy to deliver impactful web solutions."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="Our Expertise: Design, Develop, Deliver"
      description="From concept to launch, we handle every aspect of your digital presence with precision and passion, ensuring a seamless journey from idea to impactful reality."
      accordionItems={[
        {
          id: "custom-web-design",          title: "Custom Web Design",          content: "Bespoke website designs tailored to your brand's unique identity and business objectives, focusing on aesthetics and user experience."},
        {
          id: "ecommerce-solutions",          title: "E-commerce Solutions",          content: "Robust and secure online stores designed to maximize conversions and provide a seamless shopping experience for your customers."},
        {
          id: "ui-ux-optimization",          title: "UI/UX Optimization",          content: "Enhancing user interfaces and experiences through research-backed design, resulting in intuitive and engaging digital products."},
        {
          id: "digital-branding",          title: "Digital Branding",          content: "Developing a cohesive online brand presence, including logo design, brand guidelines, and consistent visual language across all digital touchpoints."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/analysis-strategy-study-information-business-planning_53876-133682.jpg"
      imageAlt="Web development interface showing code and design elements"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="clients" data-section="clients">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "InnovateCorp",        "Global Dynamics",        "Summit Ventures",        "Aether Labs",        "Quantum Shift",        "Evergreen Solutions",        "Nexus Innovations",        "Pioneer Tech"]}
      title="Trusted by Industry Leaders"
      description="Our commitment to excellence and innovative web solutions has earned the trust of diverse clients across various sectors, helping them achieve their digital goals."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      members={[
        {
          id: "1",          name: "Alex Chen",          role: "Lead Web Designer",          description: "Specializing in intuitive UI/UX, Alex crafts captivating visual experiences that drive engagement and conversion.",          imageSrc: "http://img.b2bpic.net/free-photo/man-tired-from-video-call_23-2148854849.jpg",          imageAlt: "Portrait of Alex Chen"},
        {
          id: "2",          name: "Sarah Miller",          role: "Head of Development",          description: "With a strong background in frontend and backend, Sarah builds robust and scalable web applications.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-wearing-apron_23-2149007471.jpg",          imageAlt: "Portrait of Sarah Miller"},
        {
          id: "3",          name: "David Lee",          role: "Digital Strategist",          description: "David focuses on aligning design with business goals, ensuring every project delivers measurable impact.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-man-flannel-suit-glasses-listening-music_613910-12191.jpg",          imageAlt: "Portrait of David Lee"},
      ]}
      title="Meet Our Creative Innovators"
      description="Our diverse team of experts brings a unique blend of skills and passion to every project, dedicated to bringing your digital vision to life."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "starter",          badge: "Basic",          badgeIcon: Sparkles,
          price: "$2,500+",          name: "Starter Website",          buttons: [
            {
              text: "Get Started"},
          ],
          features: [
            "5-Page Custom Design",            "Responsive Layout",            "Basic SEO Setup",            "Contact Form Integration",            "1 Month Support"],
        },
        {
          id: "professional",          badge: "Popular",          badgeIcon: Star,
          price: "$7,500+",          name: "Professional Presence",          buttons: [
            {
              text: "Choose Plan"},
          ],
          features: [
            "Up to 15 Pages",            "Advanced UI/UX",            "E-commerce Ready",            "Content Management System (CMS)",            "3 Months Premium Support",            "Analytics Integration"],
        },
        {
          id: "enterprise",          badge: "Premium",          badgeIcon: Award,
          price: "Custom",          name: "Enterprise Solution",          buttons: [
            {
              text: "Contact Us"},
          ],
          features: [
            "Unlimited Pages",            "Custom Integrations",            "Dedicated Project Manager",            "Ongoing SEO & Marketing",            "Priority 24/7 Support",            "Scalable Infrastructure"],
        },
      ]}
      title="Transparent Pricing for Every Project"
      description="Choose a plan that fits your needs, or contact us for a custom quote tailored to your unique vision and requirements."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="DesignCraft Agency exceeded our expectations! Their team delivered a stunning website that perfectly captures our brand, and the entire process was seamless and highly collaborative. We've seen a significant increase in engagement since launch."
      rating={5}
      author="Emily R., Marketing Director at Nexus Corp."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",          alt: "Avatar of Emily R."},
        {
          src: "http://img.b2bpic.net/free-photo/clsoe-up-woman-working-laptop_23-2148128282.jpg",          alt: "Avatar of Michael S."},
        {
          src: "http://img.b2bpic.net/free-photo/business-graphics-presentation-illustration_23-2151876369.jpg",          alt: "Avatar of Jessica L."},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-bald-senior-dressed-stylish-suit-posing-against-dark-background_613910-17578.jpg",          alt: "Avatar of Robert D."},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-busy-woman-her-office_329181-10294.jpg",          alt: "Avatar of Olivia P."},
      ]}
      ratingAnimation="opacity"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",          title: "What is your typical web design process?",          content: "Our process typically involves discovery, planning, design, development, testing, and launch. We maintain open communication and client collaboration at every stage."},
        {
          id: "faq2",          title: "How long does a website project take?",          content: "The timeline varies based on complexity and features, but a standard project can range from 4-12 weeks. We provide a detailed project timeline after our initial consultation."},
        {
          id: "faq3",          title: "Do you offer ongoing website maintenance?",          content: "Yes, we offer various maintenance packages including updates, security monitoring, and content management to ensure your site remains optimal and secure post-launch."},
        {
          id: "faq4",          title: "Can you help with SEO and digital marketing?",          content: "Absolutely. We integrate SEO best practices into every design and can offer ongoing digital marketing strategies to improve your online visibility and drive traffic."},
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find quick answers to common questions about our web design services and the collaborative process we follow."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      text="Ready to transform your online presence? Let's build something amazing together."
      buttons={[
        {
          text: "Get a Free Consultation",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/water-ripple-texture-background-blue-design_53876-142917.jpg"
      imageAlt="Abstract blue gradient background with digital patterns"
      logoText="DesignCraft Agency"
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Web Design",              href: "#services"},
            {
              label: "E-commerce",              href: "#services"},
            {
              label: "UI/UX",              href: "#services"},
            {
              label: "Branding",              href: "#services"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Our Team",              href: "#team"},
            {
              label: "Clients",              href: "#clients"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Blog",              href: "#"},
            {
              label: "Support",              href: "#"},
            {
              label: "Privacy Policy",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 DesignCraft Agency. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
