"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { CheckCircle, Shield, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="mediumLarge"
        background="aurora"
        cardStyle="solid"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Results",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Mr. Octopus Softwash"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "plain",
      }}
      title="Your Home Restored To Perfection"
      description="From mold-stained stucco to dirty roofs and cloudy windows, Mr Octopus Softwash delivers premium exterior cleaning with incredible attention to detail. See the transformation homeowners trust."
      kpis={[
        {
          value: "500+",
          label: "Homes Cleaned",
        },
        {
          value: "100%",
          label: "Satisfaction",
        },
        {
          value: "24/7",
          label: "Support",
        },
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Get Your Free Quote",
          href: "#contact",
        },
        {
          text: "Call Now",
          href: "tel:5550199",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/hands-disinfecting-gate-handle_23-2148705106.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-man-working-as-real-estate-agent_23-2151065037.jpg",
          alt: "Satisfied customer",
        },
        {
          src: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3864.jpg",
          alt: "Happy homeowner",
        },
        {
          src: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3863.jpg",
          alt: "Client review",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-man-with-keys-just-bought-new-appartment_1303-28896.jpg",
          alt: "Professional client",
        },
        {
          src: "http://img.b2bpic.net/free-photo/business_23-2148006261.jpg",
          alt: "Happy resident",
        },
      ]}
      avatarText="Trusted by over 500+ local homeowners"
      marqueeItems={[
        {
          type: "text",
          text: "Eco-Friendly",
        },
        {
          type: "text",
          text: "Licensed & Insured",
        },
        {
          type: "text",
          text: "Same-Day Quotes",
        },
        {
          type: "text",
          text: "Damage-Free",
        },
        {
          type: "text",
          text: "Professional Crew",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Why Choose Softwash?"
      description="We use gentle, eco-friendly cleaning methods to remove algae, moss, and dirt without causing the damage often associated with high-pressure cleaning. Your property stays clean longer and looks beautiful."
      metrics={[
        {
          value: "Safe",
          title: "Damage-Free",
        },
        {
          value: "Eco",
          title: "Biodegradable",
        },
        {
          value: "Fast",
          title: "Same-Week",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-with-face-protection-cleaning_23-2148645173.jpg"
      mediaAnimation="blur-reveal"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "s1",
          title: "Roof Cleaning",
          descriptions: [
            "Safe, softwash removal of moss and algae that preserves shingle integrity.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/two-workers-washing-windows-outside-building_1268-20391.jpg",
        },
        {
          id: "s2",
          title: "Window Restoration",
          descriptions: [
            "Crystal-clear results with our streak-free filtration system.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/couple-collects-leaves-cleans-park_1157-27392.jpg",
        },
        {
          id: "s3",
          title: "Paver Restoration",
          descriptions: [
            "Deep cleaning and sealing to revitalize your walkways and driveways.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/cafe-owner-cleaning-tables-with-disinfectant-while-reopening-covid19-pandemic_637285-8020.jpg",
        },
        {
          id: "s4",
          title: "Stucco Wash",
          descriptions: [
            "Gentle removal of stains without eroding the finish.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/man-delivering-food_1098-17908.jpg",
        },
      ]}
      title="Premium Exterior Services"
      description="Comprehensive care for your property's exterior surfaces, utilizing advanced softwashing technology."
    />
  </div>

  <div id="process" data-section="process">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: CheckCircle,
          title: "Algae Removal",
          value: "99.9%",
        },
        {
          id: "m2",
          icon: Shield,
          title: "Safety Rating",
          value: "10/10",
        },
        {
          id: "m3",
          icon: Zap,
          title: "Cleaning Time",
          value: "2h",
        },
      ]}
      title="Proven Results"
      description="Our cleaning solutions are verified by industry performance standards."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah J.",
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-man-with-blue-house-hands_23-2147694208.jpg",
        },
        {
          id: "2",
          name: "Mike R.",
          imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3862.jpg",
        },
        {
          id: "3",
          name: "Emily P.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-couple-celebrating-engagement_23-2149401298.jpg",
        },
        {
          id: "4",
          name: "David K.",
          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-enjoying-music_23-2148602721.jpg",
        },
        {
          id: "5",
          name: "Linda M.",
          imageSrc: "http://img.b2bpic.net/free-photo/female-colleagues-with-tablet-computer-outdoor_1262-21040.jpg",
        },
      ]}
      cardTitle="Client Transformations"
      cardTag="Reviews"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "Is softwashing safe?",
          content: "Yes, our low-pressure approach ensures zero surface damage.",
        },
        {
          id: "f2",
          title: "How long does it last?",
          content: "Typical cleanings last 12-18 months depending on surroundings.",
        },
        {
          id: "f3",
          title: "Do I need to be home?",
          content: "No, as long as exterior access is provided, we work independently.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Common inquiries about our softwashing process."
      faqsAnimation="blur-reveal"
      imageSrc="http://img.b2bpic.net/free-photo/young-woman-washing-blue-car-car-wash_1153-8840.jpg"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "gradient-bars",
      }}
      text="Ready to transform your home? Get your free, no-obligation quote today and see the Mr Octopus difference."
      buttons={[
        {
          text: "Get Your Free Quote",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-vector/logo-design-with-octopus_23-2148493897.jpg"
      logoText="Mr. Octopus Softwash"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Roof",
              href: "#services",
            },
            {
              label: "Windows",
              href: "#services",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
