"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { CheckCircle, Shield, Leaf, Sparkles, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Community Tree Care"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Free Consultation",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="COMMUNITY TREE CARE"
          description="Certified arborists. Safety-first crews. Meticulous cleanup. Whether you need a complex removal, strategic pruning, or long-term tree & shrub care—your property is treated like it's our own."
          buttons={[
            { text: "Get a Free Consultation", href: "contact" },
            { text: "Call Now", href: "tel:+1-555-0123" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/sun-shining-through-trees-limekiln-state-park-california_181624-22475.jpg",              imageAlt: "Golden hour tall trees with sunlit canopy"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/sun-rays-coming-through-green-trees_395237-95.jpg",              imageAlt: "Mature forest landscape with peaceful natural light"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/odenwald-foggy-morning_181624-37783.jpg",              imageAlt: "Tree canopy bathed in natural sunlight"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted By Homeowners Who Care About Their Trees"
          description="Join hundreds of satisfied customers who've experienced our safety-first approach and meticulous cleanup."
          tag="Proven Results"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Expert Arborists",            "Free Consultation",            "Thorough Cleanup",            "Prompt Service",            "Safety Priority",            "Employee-Owned",            "Licensed & Insured",            "Storm Specialists"
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyThree
          title="Full-Service Tree Care—Without the Stress"
          description="We bring a calm, professional process to jobs that can feel overwhelming. Every project receives the same meticulous attention."
          features={[
            {
              id: "removal",              title: "Tree Removal",              tags: ["Safe", "Controlled", "Thorough"],
              imageSrc: "https://img.b2bpic.net/free-photo/outdoor-shot-logger-having-rest-open-air-after-cutting-trees_176532-14596.jpg",              imageAlt: "Professional tree removal with safety equipment"
            },
            {
              id: "pruning",              title: "Pruning & Trimming",              tags: ["Structural", "Health-Focused", "Strategic"],
              imageSrc: "https://img.b2bpic.net/free-photo/carpenter-working-sawmill-wood-manufacture_1303-22887.jpg",              imageAlt: "Expert pruning for tree structure and health"
            },
            {
              id: "stump",              title: "Stump Grinding",              tags: ["Clean", "Below-Grade", "Efficient"],
              imageSrc: "https://img.b2bpic.net/free-photo/carpenter-working-sawmill-wood-manufacture_1303-22880.jpg",              imageAlt: "Professional stump grinding service"
            },
            {
              id: "health",              title: "Tree & Shrub Health Care",              tags: ["Targeted Care", "Long-Term", "Expert Guidance"],
              imageSrc: "https://img.b2bpic.net/free-photo/carpenter-working-sawmill-wood-manufacture_1303-22881.jpg",              imageAlt: "Professional plant health care and maintenance"
            },
            {
              id: "storm",              title: "Storm Damage & Hazard Response",              tags: ["Emergency", "Fast Response", "Safe Removal"],
              imageSrc: "https://img.b2bpic.net/free-photo/climber-looking-his-carabiners_23-2147665142.jpg",              imageAlt: "Storm damage response and hazard mitigation"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="why-us" data-section="why-us">
        <MetricCardOne
          title="Professionalism You'll Notice From Day One"
          description="Our approach combines expertise, safety, and respect for your property at every stage."
          metrics={[
            {
              id: "certified",              value: "100%",              title: "Certified",              description: "Arborist-led guidance on options and outcomes",              icon: CheckCircle
            },
            {
              id: "safety",              value: "Zero",              title: "Shortcuts",              description: "Safety is our standard—every job, every time",              icon: Shield
            },
            {
              id: "respect",              value: "Your",              title: "Space",              description: "Gardens and beds protected with care and intention",              icon: Leaf
            },
            {
              id: "cleanup",              value: "100%",              title: "Clean",              description: "Meticulous cleanup is part of our craft",              icon: Sparkles
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Rooted in the Community. Built on Craft." }
          ]}
          useInvertedBackground={false}
          buttons={[
            { text: "Our Team & Values", href: "#team" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardTwentyThree
          title="A Smooth, Clear Process"
          description="From first call to final walkthrough, we keep you informed and your property protected."
          features={[
            {
              id: "step1",              title: "Free Consultation",              tags: ["Assessment", "Education", "No Pressure"],
              imageSrc: "https://img.b2bpic.net/free-photo/sun-shining-through-trees-limekiln-state-park-california_181624-22475.jpg",              imageAlt: "Professional arborist consultation on property"
            },
            {
              id: "step2",              title: "Clear Quote & Plan",              tags: ["Transparent", "Written", "Timeline"],
              imageSrc: "https://img.b2bpic.net/free-photo/sun-rays-coming-through-green-trees_395237-95.jpg",              imageAlt: "Detailed project planning and scope"
            },
            {
              id: "step3",              title: "Precision Work Day",              tags: ["On-Time", "Safety-First", "Respectful"],
              imageSrc: "https://img.b2bpic.net/free-photo/outdoor-shot-logger-having-rest-open-air-after-cutting-trees_176532-14596.jpg",              imageAlt: "Professional crew executing tree care project"
            },
            {
              id: "step4",              title: "Thorough Cleanup",              tags: ["Complete", "Better Than Found", "Verified"],
              imageSrc: "https://img.b2bpic.net/free-photo/carpenter-working-sawmill-wood-manufacture_1303-22880.jpg",              imageAlt: "Final cleanup and site restoration"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/attractive-blonde-girl-tulle-skirt-having-fun-stairs-she-is-smiling-down_197531-617.jpg",              imageAlt: "Sarah Johnson, satisfied customer"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg",              imageAlt: "Michael Chen, happy homeowner"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/man-shirt-smiling-posing-kitchen_23-2148414940.jpg",              imageAlt: "Emily Rodriguez, trusted customer"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-cute-barista-girl_23-2148436121.jpg",              imageAlt: "David Kim, satisfied homeowner"
            },
            {
              id: "5",              name: "Jessica Watson",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-with-cleaning-equipment-living-room_329181-649.jpg",              imageAlt: "Jessica Watson, community member"
            },
            {
              id: "6",              name: "Robert Taylor",              imageSrc: "https://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg",              imageAlt: "Robert Taylor, verified customer"
            }
          ]}
          cardTitle="Trusted by hundreds of homeowners who value safety, professionalism, and meticulous cleanup."
          cardTag="Verified Customer Reviews"
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get Your Free Consultation Today"
          tagIcon={Zap}
          title="Tree Work Doesn't Have to Be Stressful."
          description="Get expert guidance, respectful crews, and spotless cleanup. Schedule your free assessment with certified arborists who care about your property as much as you do."
          buttons={[
            { text: "Request Free Consultation", href: "https://calendly.com" },
            { text: "Call Now", href: "tel:+1-555-0123" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="CTC"
          leftLink={{
            text: "Privacy Policy",            href: "#"
          }}
          rightLink={{
            text: "Terms of Service",            href: "#"
          }}
        />
      </div>
    </ThemeProvider>
  );
}