"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, CheckCircle, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="medium"
        background="aurora"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Services",
          id: "services",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="A2 Yard Works"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "plain",
      }}
      title="Your yard. Done right."
      description="Ottawa's go-to lawn care duo. Reliable, thorough, and obsessively tidy."
      buttons={[
        {
          text: "Get in Touch",
          href: "#contact",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-fresh-spring-green-grass_1232-4935.jpg?_wi=1",
          imageAlt: "Manicured lawn",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/flay-lay-gardening-tools-flower-pots_23-2148223997.jpg?_wi=1",
          imageAlt: "Professional tools",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-father-kid-playing-outdoors_23-2148504004.jpg?_wi=1",
          imageAlt: "Striped lawn",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-still-life_23-2148127862.jpg",
          imageAlt: "Edged walk",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/african-american-activist-volunteering-tidy-forest-ecosystem_482257-93953.jpg",
          imageAlt: "Leaf cleanup",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/inspection-vegetable-garden-quality-by-farmers_1150-7402.jpg",
          imageAlt: "Tech landscape",
        },
      ]}
    />
  </div>

  <div id="stats" data-section="stats">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: CheckCircle,
          title: "Lawns Serviced",
          value: "10+",
        },
        {
          id: "m2",
          icon: Award,
          title: "Repeat Clients",
          value: "99%",
        },
        {
          id: "m3",
          icon: Users,
          title: "Active Crew",
          value: "2",
        },
      ]}
      title="Built on trust"
      description="A small team with a massive impact on your home's curb appeal."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "s1",
          title: "Lawn Mowing",
          description: "Precision mowing with clean, striped finishes every time.",
          tag: "01",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-textile_23-2148817554.jpg",
          imageAlt: "Top view of textile",
        },
        {
          id: "s2",
          title: "Edging & Trimming",
          description: "Sharp edges along driveways and walkways.",
          tag: "02",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-fresh-spring-green-grass_1232-4935.jpg?_wi=2",
          imageAlt: "Top view of textile",
        },
        {
          id: "s3",
          title: "Garden Cleanup",
          description: "Weeding and debris removal to keep beds looking clean.",
          tag: "03",
          imageSrc: "http://img.b2bpic.net/free-photo/flay-lay-gardening-tools-flower-pots_23-2148223997.jpg?_wi=2",
          imageAlt: "Top view of textile",
        },
        {
          id: "s4",
          title: "Leaf Removal",
          description: "Thorough fall cleanup for a spotless yard.",
          tag: "04",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-father-kid-playing-outdoors_23-2148504004.jpg?_wi=2",
          imageAlt: "Top view of textile",
        },
      ]}
      title="What We Do"
      description="Precision mowing and comprehensive care for Ottawa properties."
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Two guys, one standard."
      description="A2 Yard Works is a two-person lawn care team serving Ottawa. We started because we wanted to do the job the right way—showing up on time and leaving your yard spotless. We're your neighbors."
      imageSrc="http://img.b2bpic.net/free-photo/man-florist-working-green-house_1303-29878.jpg"
      imageAlt="The A2 team"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Sarah Miller",
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-holding-phone-medium-shot_23-2149246349.jpg",
        },
        {
          id: "t2",
          name: "Mark Johnson",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-short-curly-hair-colorful-shirt-smiling-cheerfully-showing-thumbs-up-green-wall_141793-29344.jpg",
        },
        {
          id: "t3",
          name: "Elena Rodriguez",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-white-shirt-black-pants-looking-happy-cheerful-showing-thumbs-up-sitting-chair-light-living-room_141793-98823.jpg",
        },
        {
          id: "t4",
          name: "David Chen",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-african-american-woman-smiling-cheerful-friendly-face-laughing-confident_839833-29956.jpg",
        },
        {
          id: "t5",
          name: "Linda White",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13213.jpg",
        },
      ]}
      cardTitle="What Clients Say"
      cardTag="Reviews"
      cardAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Contact"
      title="Ready for a yard you're proud of?"
      description="Usually respond within a few hours. Get your free quote today."
      buttons={[
        {
          text: "Get in Touch",
          href: "mailto:lawnmowingottawa@gmail.com",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="A2 Yard Works"
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "Services",
              href: "#services",
            },
            {
              label: "About",
              href: "#about",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "Email",
              href: "mailto:lawnmowingottawa@gmail.com",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
