"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import LegalSection from '@/components/legal/LegalSection';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "How we do it", id: "about" },
              { name: "Services", id: "services" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="Vellum®"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardRotatedCarousel
            background={{ variant: "gradient-bars" }}
            title="Moving irreplaceable objects"
            description="Specialist Logistics Since 2016. Founded by conservators, we engineer their safe passage."
            buttons={[{ text: "Request a Quote", href: "#contact" }]}
            carouselItems={[
              { id: "slide-1", imageSrc: "http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827315.jpg", imageAlt: "professional logistics handling art" },
              { id: "slide-2", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-playing-piano_23-2150060693.jpg", imageAlt: "grand piano professional move" },
              { id: "slide-3", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-against-wall_171337-16420.jpg", imageAlt: "sculpture installation art gallery" },
              { id: "slide-4", imageSrc: "http://img.b2bpic.net/girl-with-color-palette-outdoors_23-2148014086.jpg", imageAlt: "fine art crating detail" },
              { id: "slide-5", imageSrc: "http://img.b2bpic.net/free-photo/empty-drawing-class-with-nobidy-it-prepared-drawing-lesson-paintng-canvas-no-people-creativity-workshop-equipped-with-professional-tools-develop-artistic-students-skills_482257-38988.jpg", imageAlt: "secure storage warehouse" },
              { id: "slide-6", imageSrc: "http://img.b2bpic.net/man-his-work-office_329181-10276.jpg", imageAlt: "expert conservator working" },
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <TextAbout
            useInvertedBackground={false}
            title="We don't move objects. We engineer their safe passage."
            buttons={[{ text: "Learn More", href: "#about" }]}
          />
        </div>

        <div id="services" data-section="services">
          <FeatureCardSix
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              { title: "Crating", description: "Bespoke crating designed to protect your most delicate items.", imageSrc: "http://img.b2bpic.net/free-photo/worker-carrying-cardboard-box-warehouse_107420-96566.jpg", imageAlt: "fine art crating detail" },
              { title: "Transport", description: "Specialist transport infrastructure across continents.", imageSrc: "http://img.b2bpic.net/free-photo/retro-digital-art-illustration-person-using-radio-technology_23-2151356029.jpg", imageAlt: "professional logistics handling art" },
              { title: "Installation", description: "Professional installation by our specialist team.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-couple-looking-painting_23-2149911913.jpg", imageAlt: "sculpture installation art gallery" },
            ]}
            title="Specialist Services"
            description="Comprehensive care for your most valuable pieces."
          />
        </div>

        <div id="legal" data-section="legal">
          <LegalSection
            layout="section"
            title="Legal & Compliance"
            sections={[
              {
                heading: "Our Standards",                content: { type: "paragraph", text: "Vellum operates under strict adherence to international museum-standard handling protocols. We maintain full insurance for all items in transit and storage." }
              },
              {
                heading: "Terms of Service",                content: { type: "list", items: ["Professional handling insurance for all consignments", "Compliance with international customs regulations", "Strict confidentiality regarding client collections", "Regular audit of safety equipment and logistics fleet"] }
              }
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Request a Quote"
            description="Get in touch with our specialist team for your move."
            inputs={[
              { name: "name", type: "text", placeholder: "Name", required: true },
              { name: "email", type: "email", placeholder: "Email", required: true },
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/smiling-blonde-woman-holding-carton-box-moving-home_329181-282.jpg"
            imageAlt="professional logistics dispatch center"
            textarea={{
              name: "message",              placeholder: "Tell us about your requirements",              rows: 4,
              required: true,
            }}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="Vellum®"
            columns={[
              {
                title: "Services",                items: [
                  { label: "Survey", href: "#" },
                  { label: "Crating", href: "#" },
                  { label: "Transport", href: "#" },
                ],
              },
              {
                title: "Company",                items: [
                  { label: "About", href: "#" },
                  { label: "Compliance", href: "#" },
                  { label: "Insurance", href: "#" },
                ],
              },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}