"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Leaf, Sprout, Hammer, Image } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="GreenScape"
          bottomLeftText="Transforming Outdoor Spaces"
          bottomRightText="hello@greenscape.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Transform Your Outdoor Space"
          description="Expert landscaping and design services that bring your vision to life. We create stunning outdoor environments that enhance beauty and add value to your property."
          tag="Professional Landscaping"
          tagIcon={Leaf}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          buttons={[
            { text: "Get Started", href: "contact" },
            { text: "View Portfolio", href: "portfolio" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/fountain-park-pedralbes-royal-palace_1398-4394.jpg", imageAlt: "Modern garden design with water features" },
            { imageSrc: "http://img.b2bpic.net/free-photo/vegetated-building_23-2147677722.jpg?_wi=1", imageAlt: "Sustainable landscape project" },
            { imageSrc: "http://img.b2bpic.net/free-photo/path-way_74190-2125.jpg", imageAlt: "Hardscape and patio installation" },
            { imageSrc: "http://img.b2bpic.net/free-photo/nature-garden-leaves-background_1340-7945.jpg", imageAlt: "Native plant landscaping" },
            { imageSrc: "http://img.b2bpic.net/free-photo/tree-with-lamp-lighting_1339-7214.jpg", imageAlt: "Outdoor lighting and garden features" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About GreenScape"
          tagIcon={Sprout}
          tagAnimation="blur-reveal"
          title="We believe every landscape tells a story. With over 15 years of experience, we transform outdoor spaces into beautiful, functional environments that reflect your unique style and values."
          useInvertedBackground={false}
          buttons={[
            { text: "Learn More", href: "#services" }
          ]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNine
          title="Our Services"
          description="Comprehensive landscaping solutions tailored to your needs"
          tag="What We Offer"
          tagIcon={Hammer}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Design & Planning",              description: "Professional landscape design services that combine aesthetics with functionality. We create detailed plans using the latest design software to visualize your dream outdoor space.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-enjoying-sudoku-game-paper_23-2149073695.jpg" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/landscape-garden-design-concept-poster_1284-5948.jpg" }
            },
            {
              id: 2,
              title: "Installation & Build",              description: "Expert installation of hardscaping, planting, and outdoor features. Our skilled team brings your landscape design to life with precision and attention to detail.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-material-pieces-wooden-boxes_181624-18062.jpg?_wi=1" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-material-pieces-wooden-boxes_181624-18062.jpg?_wi=2" }
            },
            {
              id: 3,
              title: "Maintenance & Care",              description: "Ongoing landscape maintenance to keep your outdoor space thriving year-round. From seasonal cleanups to regular pruning, we ensure your garden stays beautiful.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/people-operating-heavy-duty-leaf-blower_1153-7263.jpg" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-cutting-plant_23-2147844324.jpg" }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardTwo
          title="Recent Projects"
          description="Explore our portfolio of successful landscaping transformations"
          tag="Portfolio"
          tagIcon={Image}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              brand: "Residential",              name: "Modern Backyard Oasis",              price: "Completed 2024",              rating: 5,
              reviewCount: "12k+",              imageSrc: "http://img.b2bpic.net/free-photo/stylish-caucasian-woman-trendy-panama-waist-neon-bag-roof-bangkok-with-mobile-phone_343596-30.jpg",              imageAlt: "Modern residential backyard with patio"
            },
            {
              id: "2",              brand: "Commercial",              name: "Corporate Campus Redesign",              price: "Completed 2024",              rating: 5,
              reviewCount: "8.5k+",              imageSrc: "http://img.b2bpic.net/free-photo/city-park-blue-sky-with-downtown-skyline-background_1127-3064.jpg",              imageAlt: "Commercial landscaping project"
            },
            {
              id: "3",              brand: "Residential",              name: "Sustainable Garden Design",              price: "Completed 2023",              rating: 5,
              reviewCount: "10k+",              imageSrc: "http://img.b2bpic.net/free-photo/vegetated-building_23-2147677722.jpg?_wi=2",              imageAlt: "Sustainable landscape with native plants"
            },
            {
              id: "4",              brand: "Residential",              name: "Front Entry Transformation",              price: "Completed 2023",              rating: 5,
              reviewCount: "9.2k+",              imageSrc: "http://img.b2bpic.net/free-photo/village-landscape_1182-948.jpg",              imageAlt: "Front yard landscaping renovation"
            }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View All Projects", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="GreenScape transformed our backyard into the perfect entertaining space. The team was professional, punctual, and truly understood our vision. We couldn't be happier with the results!"
          rating={5}
          author="Sarah & Michael Johnson"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", alt: "Sarah Johnson" },
            { src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", alt: "Michael Johnson" },
            { src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Client testimonial" },
            { src: "http://img.b2bpic.net/free-photo/happy-businesswoman-smiling-looking-camera-successful-confident-grey-haired-manager-sitting-office-room-workplace-business-management-concept_74855-7343.jpg", alt: "Client testimonial" },
            { src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", alt: "Client testimonial" },
            { src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg", alt: "Client testimonial" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to create your dream outdoor space? Let's discuss your landscaping project and bring your vision to life."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Get Free Estimate", href: "#contact-form" },
            { text: "Call Us Today", href: "tel:555-0123" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Services",              items: [
                { label: "Design & Planning", href: "#services" },
                { label: "Installation", href: "#services" },
                { label: "Maintenance", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 GreenScape Landscaping. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
