"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Calendar, Edit, Instagram, Linkedin, MessageSquare, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="fluid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Home", id: "hero" },
              { name: "About Us", id: "about" },
              { name: "Services", id: "features" },
              { name: "Contact", id: "contact" },
            ]}
            brandName="SOS Online Business Solutions"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplit
            background={{ variant: "gradient-bars" }}
            title="SOS ONLINE BUSINESS SOLUTIONS"
            description="Virtual Administrative Services allowing you to focus on growing your business."
            buttons={[{ text: "Get In Touch", href: "#contact" }]}
            imageSrc="http://img.b2bpic.net/free-photo/project-manager-working-with-online-sales-statistics-laptop-create-business-strategy-growth-executive-assistant-using-data-research-charts-plan-financial-presentation_482257-46124.jpg"
            mediaAnimation="slide-up"
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/focused-asian-marketing-agency-office-worker-using-work-computer-analyze-financial-market-data-company-employee-reviewing-organization-market-value-analyzing-finances_482257-40190.jpg", alt: "Agent working" },
              { src: "http://img.b2bpic.net/free-photo/businesswoman-communicates-with-colleagues-online_1163-4283.jpg", alt: "Colleague" },
              { src: "http://img.b2bpic.net/free-photo/portrait-business-woman-working-with-sales-charts-laptop-using-financial-statistics-plan-executive-strategy-project-manager-analyzing-data-research-graphs-startup-growth_482257-41042.jpg", alt: "Strategy" },
              { src: "http://img.b2bpic.net/free-photo/cheerful-office-employee-holding-glasses_23-2147651024.jpg", alt: "Support" },
              { src: "http://img.b2bpic.net/free-photo/focused-young-business-lady-working-her-office-using-computer-workplace-looking-display-medium-shot-digital-communication-business-leader-concept_74855-11733.jpg", alt: "Manager" },
            ]}
            avatarText="Trusted by 100+ growing businesses"
            marqueeItems={[
              { type: "text", text: "Calendar Management" },
              { type: "text", text: "Email Support" },
              { type: "text", text: "Business Editing" },
              { type: "text", text: "Task Coordination" },
              { type: "text", text: "Client Relations" },
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <SplitAbout
            textboxLayout="split"
            useInvertedBackground={true}
            title="Virtual Administration"
            description="SOS Online Business Solutions provides professional virtual administrative assistance and business support services to clients remotely, helping you streamline operations and focus on core growth."
            bulletPoints={[
              { title: "Flexible Support", description: "Contract and freelance solutions tailored to your unique needs." },
              { title: "Expert Management", description: "Professional administrative management to keep your workflow efficient." },
              { title: "Remote Efficiency", description: "Providing services remotely to save you time and overhead." },
              { title: "Precision Tasks", description: "Attention to detail in all administrative operations." },
              { title: "Scalable Growth", description: "Services designed to grow alongside your expanding business." },
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/medium-shot-female-economist-holding-smartphone_23-2150167282.jpg"
            mediaAnimation="slide-up"
          />
        </div>

        <div id="features" data-section="features">
          <FeatureBento
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              { title: "Administrative Support", description: "Calendar management, email handling, and task coordination.", bentoComponent: "reveal-icon", icon: Calendar },
              { title: "Business Editing", description: "Proofreading and editing product descriptions or documentation.", bentoComponent: "reveal-icon", icon: Edit },
              { title: "Client Communication", description: "Professional support for customer interactions and scheduling.", bentoComponent: "reveal-icon", icon: MessageSquare },
            ]}
            title="Our Expert Services"
            description="We offer a wide variety of virtual assistant services designed to support and scale your business."
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardFourteen
            useInvertedBackground={true}
            title="Our Impact"
            tag="Helping Businesses Grow"
            metrics={[
              { id: "m1", value: "100+", description: "Projects Successfully Supported" },
              { id: "m2", value: "5+", description: "Years of Professional Service" },
              { id: "m3", value: "24/7", description: "Commitment to Your Business Growth" },
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardTwelve
            useInvertedBackground={false}
            testimonials={[
              { id: "t1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg" },
              { id: "t2", name: "Michael C.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg" },
              { id: "t3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-business-woman-posing_23-2149457762.jpg" },
              { id: "t4", name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-professional-partners-posing-photo-smiling-looking-camera-african-american-successful-office-employer-caucasian-businesswoman-taking-selfie-teamwork-business-concept_74855-6842.jpg" },
              { id: "t5", name: "Linda M.", imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg" },
            ]}
            cardTitle="What Others Are Saying!"
            cardTag="Testimonials"
            cardAnimation="slide-up"
          />
        </div>

        <div id="social-proof" data-section="social-proof">
          <SocialProofOne
            textboxLayout="default"
            useInvertedBackground={true}
            names={["TechCorp", "InnovateLab", "GrowthCo", "StartupXYZ", "RetailHero", "DesignStudio", "VisionariesInc"]}
            title="Trusted Partners"
            description="Some amazing companies we've had the pleasure to work with."
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitText
            useInvertedBackground={false}
            faqs={[
              { id: "f1", title: "What is a Virtual Assistant?", content: "Virtual Assistants are self-employed or freelance professionals who provide remote business support." },
              { id: "f2", title: "How do I get started?", content: "Simply book a discovery call via our website or reach out to us during business hours." },
              { id: "f3", title: "Can you work with any business?", content: "Yes, we support a diverse range of clients across multiple industries." },
            ]}
            sideTitle="Common Questions"
            sideDescription="Everything you need to know about our virtual assistant services."
            faqsAnimation="slide-up"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactText
            useInvertedBackground={true}
            background={{ variant: "gradient-bars" }}
            text="Better Yet, Call Us! We love to hear from our customers, so feel free to give us a call during normal business hours (Monday-Friday), or book a discovery call through our schedule."
            buttons={[{ text: "Book Discovery Call", href: "https://sosonlinebusinesssolutions.acuityscheduling.com/" }]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterCard
            logoText="SOS Online Business Solutions"
            copyrightText="© Copyright 2025 SOS Online Business Solutions - All Rights Reserved"
            socialLinks={[
              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
              { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
