"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="mediumLargeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Psyche"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="Psyche"
      description="Premium virtual assistant services for modern leaders. Focus on your growth, while we handle the rest."
      buttons={[
        {
          text: "Get Started",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-elder-woman-listening-music-headphones-home-with-laptop_23-2148740651.jpg?_wi=1"
      imageAlt="Modern virtual assistant desk setup"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "Your dedicated ",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
          alt: "About Psyche",
        },
        {
          type: "text",
          content: " partner in productivity.",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Scheduling",
          description: "Seamless calendar coordination and appointment setting.",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-illustration-calendar-with-checkmarks-pen_107791-15855.jpg",
          imageAlt: "schedule management icon 3d",
        },
        {
          title: "Inbox Management",
          description: "Prioritized email communication and filtering.",
          imageSrc: "http://img.b2bpic.net/free-photo/blue-bird-3d-illustration_183364-123380.jpg",
          imageAlt: "email communication icon 3d",
        },
        {
          title: "Reporting",
          description: "Insightful data compilation and weekly analytics.",
          imageSrc: "http://img.b2bpic.net/free-photo/glow-arrow-graph-analytics-3d-icon-bubble-speech-chat-3d-rendering_56104-1929.jpg",
          imageAlt: "data reporting icon 3d",
        },
      ]}
      title="Our Expertise"
      description="Comprehensive administrative support designed to streamline your daily workflow."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",
          title: "Starter",
          price: "$500",
          period: "/mo",
          features: [
            "10 hours/mo",
            "Email support",
          ],
          button: {
            text: "Choose Plan",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-work-having-video-call_23-2148902306.jpg",
          imageAlt: "Portrait female at work having video call",
        },
        {
          id: "pro",
          title: "Professional",
          price: "$1200",
          period: "/mo",
          features: [
            "25 hours/mo",
            "Priority handling",
            "Reporting",
          ],
          button: {
            text: "Choose Plan",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-elder-woman-listening-music-headphones-home-with-laptop_23-2148740651.jpg?_wi=2",
          imageAlt: "Portrait female at work having video call",
        },
        {
          id: "enterprise",
          title: "Enterprise",
          price: "$2500",
          period: "/mo",
          features: [
            "60 hours/mo",
            "24/7 dedicated support",
          ],
          button: {
            text: "Choose Plan",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
          imageAlt: "Portrait female at work having video call",
        },
      ]}
      title="Simple Pricing"
      description="Choose the level of support your business needs to flourish."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Alice M.",
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-11786.jpg",
          imageAlt: "headshot of young entrepreneur",
        },
        {
          id: "2",
          name: "John D.",
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg",
          imageAlt: "professional manager headshot",
        },
        {
          id: "3",
          name: "Sarah P.",
          imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-people-office_23-2149173732.jpg",
          imageAlt: "young creative entrepreneur headshot",
        },
        {
          id: "4",
          name: "Mark L.",
          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-business-woman-with-suitcase-by-bussiness-center_1303-21414.jpg",
          imageAlt: "female executive professional portrait",
        },
        {
          id: "5",
          name: "Elena R.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-standing-white_114579-77821.jpg",
          imageAlt: "professional consultant headshot",
        },
      ]}
      cardTitle="Client Success"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "How do we get started?",
          content: "Schedule a discovery call via the contact form.",
        },
        {
          id: "q2",
          title: "What platforms do you support?",
          content: "We support all major project management and email tools.",
        },
        {
          id: "q3",
          title: "Can I upgrade my plan?",
          content: "Yes, you can upgrade your plan at any time.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/customer-service-representative_23-2151933144.jpg"
      title="Common Questions"
      description="Everything you need to know about working with Psyche."
      faqsAnimation="slide-up"
      mediaAnimation="slide-up"
      imageAlt="support assistant with headset"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Start your journey"
      description="Get in touch today to reclaim your time."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Full Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Email",
          required: true,
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/modern-workplace-white-yellow-colors-with-photo-frame_23-2147878419.jpg"
      imageAlt="professional office desk clean"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Psyche"
      columns={[
        {
          title: "Navigate",
          items: [
            {
              label: "Home",
              href: "#hero",
            },
            {
              label: "Features",
              href: "#features",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "Email us",
              href: "mailto:hello@psyche.com",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
