"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, CheckCircle, Clock, Shield, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="mediumLargeSizeMediumTitles"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              { name: "Home", id: "hero" },
              { name: "About", id: "about" },
              { name: "Services", id: "features" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="The Business Exchange"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardTestimonial
            useInvertedBackground={true}
            background={{ variant: "gradient-bars" }}
            title="Your Premium Business Workspace in Sandton"
            description="Located at 90 Rivonia Rd, The Business Exchange provides world-class office solutions designed for productivity and growth."
            testimonials={[]}
            buttons={[{ text: "Contact Us", href: "#contact" }]}
            imageSrc="http://img.b2bpic.net/free-photo/modern-office-building-with-glass-facade_1127-3388.jpg"
            imageAlt="90 Rivonia Rd office location"
          />
        </div>

        <div id="about" data-section="about">
          <AboutMetric
            useInvertedBackground={false}
            title="Premium Location, Elite Performance"
            metrics={[
              { icon: Award, label: "Prime Location", value: "Sandton" },
              { icon: CheckCircle, label: "Business Hub", value: "90 Rivonia" },
              { icon: Shield, label: "Growth Ready", value: "24/7" }
            ]}
            metricsAnimation="blur-reveal"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Secure Your Space Today"
            description="Schedule a tour or enquire about office availability at 90 Rivonia Road."
            inputs={[
              { name: "name", type: "text", placeholder: "Full Name" },
              { name: "email", type: "email", placeholder: "Email Address" }
            ]}
            textarea={{ name: "message", placeholder: "Your enquiry..." }}
            imageSrc="http://img.b2bpic.net/free-photo/meeting-room-office_23-2148493138.jpg"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="The Business Exchange"
            columns={[
              {
                title: "Location",                items: [
                  { label: "90 Rivonia Rd, Sandton", href: "#" }
                ]
              },
              {
                title: "Company",                items: [
                  { label: "About Us", href: "#about" },
                  { label: "Contact", href: "#contact" }
                ]
              }
            ]}
            copyrightText="© 2024 The Business Exchange. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}