"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumLarge"
        background="grid"
        cardStyle="inset"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "About Me",
          id: "/about",
        },
        {
          name: "Projects",
          id: "/projects",
        },
        {
          name: "Blog",
          id: "/blog",
        },
        {
          name: "Contact Us",
          id: "/contact",
        },
      ]}
      brandName="My Portfolio"
      bottomLeftText="Motion Design Portfolio"
      bottomRightText="hello@myportfolio.com"
    />
  </div>

  <div id="project-gallery" data-section="project-gallery">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Dynamic App Onboarding",
          price: "UI/UX Motion",
          variant: "Mobile",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-post-its_23-2149930951.jpg",
          imageAlt: "Dynamic App Onboarding UI Animation",
        },
        {
          id: "p2",
          name: "Responsive Web Interactions",
          price: "Web Motion",
          variant: "Desktop",
          imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349213.jpg",
          imageAlt: "Responsive Web Interactions",
        },
        {
          id: "p3",
          name: "Brand Identity Animation",
          price: "Brand Motion",
          variant: "Corporate",
          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-white-red-lights-background_23-2149679067.jpg",
          imageAlt: "Brand Identity Animation",
        },
        {
          id: "p4",
          name: "Gamified UI Feedback",
          price: "Game UI Motion",
          variant: "Gaming",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-vaporwave-style_23-2148950827.jpg",
          imageAlt: "Gamified UI Feedback Animation",
        },
        {
          id: "p5",
          name: "Interactive Data Visualizations",
          price: "Data Motion",
          variant: "Analytics",
          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-95241.jpg",
          imageAlt: "Interactive Data Visualizations Motion",
        },
        {
          id: "p6",
          name: "Product Explainer Video",
          price: "Explainer Motion",
          variant: "Marketing",
          imageSrc: "http://img.b2bpic.net/free-photo/female-photographer-edits-photos-creative-media-agency-office-retouching-client-imagine-with-styl_482257-3417.jpg",
          imageAlt: "Product Explainer Video Animation",
        },
      ]}
      title="My Creative Portfolio"
      description="A curated selection of motion design and UI/UX projects showcasing diverse styles and challenges."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      title="Project FAQs"
      description="Common questions about my design process, project scope, and collaboration."
      faqsAnimation="slide-up"
      faqs={[
        {
          id: "proj-faq-1",
          title: "What's your typical project timeline?",
          content: "Timelines vary depending on complexity, but most UI animation projects range from 2-6 weeks from brief to final delivery.",
        },
        {
          id: "proj-faq-2",
          title: "How do you handle revisions?",
          content: "Each project includes a set number of revision rounds. We work iteratively to ensure satisfaction at every stage.",
        },
        {
          id: "proj-faq-3",
          title: "What tools do you use?",
          content: "My primary tools include Figma for UI, After Effects and Principle for motion, and sometimes Cinema 4D for 3D elements.",
        },
        {
          id: "proj-faq-4",
          title: "Can you work with existing brand guidelines?",
          content: "Absolutely. I excel at integrating motion design seamlessly into established brand identities and design systems.",
        },
        {
          id: "proj-faq-5",
          title: "Do you offer post-launch support?",
          content: "Yes, I provide a period of post-launch support to address any minor adjustments or unforeseen issues.",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="My Portfolio"
      columns={[
        {
          title: "Explore",
          items: [
            {
              label: "About Me",
              href: "/about",
            },
            {
              label: "Projects",
              href: "/projects",
            },
            {
              label: "Blog",
              href: "/blog",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "Contact Us",
              href: "/contact",
            },
            {
              label: "LinkedIn",
              href: "#",
            },
            {
              label: "Dribbble",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 My Portfolio. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
