"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="large"
        background="circleGradient"
        cardStyle="soft-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Home", id: "#hero" },
        { name: "About", id: "#about" },
        { name: "Articles", id: "#blog" },
        { name: "Contact", id: "#contact" },
      ]}
      brandName="Your Assistan"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{ variant: "sparkles-gradient" }}
      title="Making Tech Simple and Engaging"
      description="Your go-to source for the latest in technology, AI tools, gaming, and internet tips. Empowering you to master the digital world."
      buttons={[{ text: "Explore Guides", href: "#blog" }]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=crh4fb"
      imageAlt="Futuristic tech workspace"
      mediaAnimation="slide-up"
      avatars={[
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4g5j8i", alt: "tech expert one" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t6yrln", alt: "tech expert two" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2sshoy", alt: "tech expert three" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uc3ezy", alt: "tech expert four" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=94cmo3", alt: "tech expert five" },
      ]}
      avatarText="Trusted by 10k+ readers"
      marqueeItems={[
        { type: "text", text: "AI Innovation" },
        { type: "text", text: "Cybersecurity" },
        { type: "text", text: "Gaming Hardware" },
        { type: "text", text: "Digital Productivity" },
        { type: "text", text: "Internet Privacy" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Welcome to Your Assistan"
      tag="About Us"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { id: "1", title: "AI Tools", descriptions: ["Advanced tutorials on latest AI models", "Practical use cases for productivity"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=55dxvg" },
        { id: "2", title: "Internet Tips", descriptions: ["Browser hacks and privacy guides", "Essential online security tips"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vjedu8" },
        { id: "3", title: "Gaming & Gear", descriptions: ["Latest trends and gaming news", "Hardware recommendations for all"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kihdk3" },
      ]}
      title="What We Cover"
      description="From complex software tutorials to everyday internet shortcuts, we break down technology into bite-sized knowledge."
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      title="Latest Insights"
      description="Stay updated with digital news and trending tech solutions."
      blogs={[
        { id: "b1", category: "AI", title: "Top 10 AI Tools in 2025", excerpt: "Streamline your workflow with these game-changers.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=clqj5e", authorName: "Alex R.", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3gx5zv", date: "Jan 20, 2025" },
        { id: "b2", category: "Tutorial", title: "Mastering Browser Privacy", excerpt: "Protect your digital presence online.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7c71dg", authorName: "Sarah K.", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n9ttow", date: "Jan 18, 2025" },
        { id: "b3", category: "Gaming", title: "Next-Gen Gaming Trends", excerpt: "What to expect from future hardware.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=88sff5", authorName: "Mike L.", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4doivb", date: "Jan 15, 2025" },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "John D.", handle: "@johnd", testimonial: "Finally, a blog that makes AI accessible to everyone!", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4g5j8i" },
        { id: "t2", name: "Emma W.", handle: "@emmaw", testimonial: "Great tips on digital privacy. Very helpful.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t6yrln" },
        { id: "t3", name: "Liam T.", handle: "@liamt", testimonial: "The gaming guides are always spot on.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2sshoy" },
        { id: "t4", name: "Sofia P.", handle: "@sofiap", testimonial: "Incredible content quality and depth.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=uc3ezy" },
        { id: "t5", name: "Rahul M.", handle: "@rahulm", testimonial: "My favorite go-to tech blog online.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=94cmo3" },
      ]}
      showRating={true}
      title="What Readers Say"
      description="Building a community of tech-savvy individuals."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "How often do you post?", content: "We publish fresh tech content every week." },
        { id: "f2", title: "Can I request a tutorial?", content: "Yes, contact us through the contact form below!" },
        { id: "f3", title: "Is all content free?", content: "Absolutely, all our articles are completely free." },
      ]}
      title="Frequently Asked"
      description="Answers to your burning technology questions."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Get in Touch"
      description="Have a tech tip or questions? Send us a message."
      inputs={[
        { name: "name", type: "text", placeholder: "Name", required: true },
        { name: "email", type: "email", placeholder: "Email", required: true },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=04cw8i"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=26jdp4"
      logoText="Your Assistan"
      columns={[
        {
          title: "Links",          items: [
            { label: "Blog", href: "#blog" },
            { label: "About", href: "#about" },
          ],
        },
        {
          title: "Legal",          items: [
            { label: "Privacy", href: "#" },
            { label: "Terms", href: "#" },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
