"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBase from '@/components/sections/footer/FooterBase';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="medium"
        background="grid"
        cardStyle="gradient-radial"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "About Ryan",
          id: "/about",
        },
        {
          name: "Treatments",
          id: "/treatments",
        },
        {
          name: "Locations",
          id: "/locations",
        },
        {
          name: "Before & After",
          id: "/gallery",
        },
        {
          name: "Financing",
          id: "/financing",
        },
        {
          name: "Blog",
          id: "/blog",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ga8cvi"
      logoAlt="TREAT Medspa Logo"
      brandName="TREAT Medspa"
      button={{
        text: "Book Consultation",
        href: "/contact",
      }}
    />
  </div>

  <div id="contact-form" data-section="contact-form">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Get in Touch with TREAT Medspa"
      description="Whether you have questions about our treatments, want to schedule a consultation, or need assistance, our team is ready to help."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Your Phone Number",
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Your Message",
        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-women-using-digital-tablet_107420-65283.jpg"
      imageAlt="Two women discussing medspa services on a tablet"
      mediaAnimation="blur-reveal"
      mediaPosition="left"
      buttonText="Send Message"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",
          title: "What services does TREAT Medspa offer?",
          content: "We offer a comprehensive range of luxury medical aesthetic treatments including injectables (Botox, fillers), advanced skincare, laser therapies, body contouring, and wellness infusions, all tailored to your unique needs.",
        },
        {
          id: "2",
          title: "How can I book a consultation?",
          content: "You can easily book a complimentary consultation through our website's booking portal, by calling our clinic directly, or by filling out the contact form on this page. Our team will then reach out to confirm your appointment.",
        },
        {
          id: "3",
          title: "Do you offer financing options for treatments?",
          content: "Yes, we understand that investing in yourself is important. We partner with leading financing providers to offer flexible payment plans. Please inquire with our front desk for more details during your consultation.",
        },
        {
          id: "4",
          title: "What should I expect during my first visit?",
          content: "Your first visit will begin with a thorough consultation with one of our expert practitioners. We'll discuss your aesthetic goals, assess your needs, and develop a personalized treatment plan to help you achieve optimal results in a luxurious setting.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/business-women-collaborating-medium-shot_23-2148352585.jpg?_wi=2"
      imageAlt="Woman looking at financing options for medspa services"
      mediaAnimation="blur-reveal"
      mediaPosition="right"
      title="Frequently Asked Questions"
      description="Find answers to common inquiries about appointments, services, and what to expect at TREAT Medspa."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="cta-contact" data-section="cta-contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      tag="Ready to Experience Luxury?"
      title="Book Your Personalized Consultation Today"
      description="Take the first step towards achieving your aesthetic goals. Our expert team is here to guide you through a bespoke treatment journey."
      buttons={[
        {
          text: "Schedule Now",
          href: "/booking",
        },
        {
          text: "Explore Services",
          href: "/services",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Injectables",
              href: "/services/injectables",
            },
            {
              label: "Skincare",
              href: "/services/skincare",
            },
            {
              label: "Body Contouring",
              href: "/services/body-contouring",
            },
            {
              label: "Wellness",
              href: "/services/wellness",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "/about",
            },
            {
              label: "Our Team",
              href: "/team",
            },
            {
              label: "Careers",
              href: "/careers",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact",
              href: "/contact",
            },
            {
              label: "FAQs",
              href: "/faq",
            },
            {
              label: "Privacy Policy",
              href: "/privacy",
            },
          ],
        },
      ]}
      logoText="TREAT Medspa"
      copyrightText="© 2024 TREAT Medspa. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
