"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { CheckCircle, MessageSquare, Users, DollarSign, Award, Home, Zap, Star, Mail, Image } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSmall"
      background="fluid"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="FenceCo"
          navItems={[
            { name: "Why FenceCo", id: "benefits" },
            { name: "Fence Types", id: "fence-types" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Process", id: "process" },
            { name: "Get Quote", id: "contact" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Beautiful Fences. Built Right."
          description="Professional fence installation with honest pricing, quality materials, and crews that respect your home."
          background={{ variant: "plain" }}
          buttons={[
            { text: "Get a Free Fence Quote", href: "contact" },
            { text: "See Our Work", href: "gallery" },
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772756839393-j9p6mswa.png", imageAlt: "Luxury wooden privacy fence installation" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772756646721-0d9pmdsd.png", imageAlt: "Modern aluminum fence with gate" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/tmp/picket-fence-1772756139666-c1e31f78.png", imageAlt: "Custom decorative gate installation" },
          ]}
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureHoverPattern
          title="Why Homeowners Choose FenceCo"
          description="We've built our reputation on transparency, quality, and genuine care for our customers."
          tag="Why FenceCo"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          features={[
            { icon: MessageSquare, title: "Crystal Clear Communication", description: "From quote to completion, you'll know exactly what to expect. No surprises, no hidden costs." },
            { icon: Users, title: "Professional, Experienced Crews", description: "Our installers are trained, licensed, and treat your home like their own." },
            { icon: DollarSign, title: "Competitive Pricing Without Compromises", description: "Premium quality at fair prices. Get multiple quotes—we're confident in our value." },
            { icon: Award, title: "Materials Built to Last", description: "We use only high-quality materials that stand up to the elements year after year." },
            { icon: Home, title: "Respect for Your Property", description: "Clean work sites, attention to detail, and professional behavior from start to finish." },
            { icon: Zap, title: "Fast & Easy Process", description: "Simple estimate process and quick installation without unnecessary delays." },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="fence-types" data-section="fence-types">
        <ProductCardThree
          title="Fence Options for Every Home"
          description="Explore the types of fences we install. Each has unique benefits suited to different needs and styles."
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            { id: "wood-privacy", name: "Wood Privacy Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/wood-texture-background_1232-1791.jpg", imageAlt: "Wood Privacy Fence" },
            { id: "shadowbox", name: "Shadowbox Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/wooden-trellis-overgrown-with-greenery-selective-focus-herbal-foliage-with-green-white-leaves-garden-trellis-background-screensaver-nature-banner_166373-2862.jpg", imageAlt: "Shadowbox Fence" },
            { id: "picket", name: "Picket Fence", price: "Custom Quote", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/tmp/picket-fence-1772756139666-c1e31f78.png", imageAlt: "Picket Fence" },
            { id: "aluminum", name: "Aluminum Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-36988.jpg?_wi=2", imageAlt: "Aluminum Fence" },
            { id: "chainlink", name: "Chain Link Fence", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/selective-closeup-shot-chain-link-fence_181624-2493.jpg", imageAlt: "Chain Link Fence" },
            { id: "custom-gates", name: "Custom Gates", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/people-meeting-discussing-neighbourhood_23-2149447188.jpg?_wi=2", imageAlt: "Custom Gate" },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Customers Say"
          description="Hear from homeowners who've trusted FenceCo with their fences."
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          testimonials={[
            { id: "1", name: "Sarah Martinez", handle: "Homeowner, Austin TX", testimonial: "Communication was an A+. The crew was professional and the fence looks absolutely amazing. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-experienced-carpenter_329181-15660.jpg?_wi=1", imageAlt: "Sarah Martinez" },
            { id: "2", name: "James Chen", handle: "Homeowner, Denver CO", testimonial: "Price was very competitive compared to other quotes we received. Fair pricing for excellent work.", imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-son-his-mature-father-holding-hands-while-greeting-each-other-kitchen_637285-10296.jpg?_wi=1", imageAlt: "James Chen" },
            { id: "3", name: "Michelle Rodriguez", handle: "Homeowner, Phoenix AZ", testimonial: "They made buying a fence easy from start to finish. The whole process was smooth and stress-free.", imageSrc: "http://img.b2bpic.net/free-photo/parents-happy-see-their-son-family-looking-happy_259150-56951.jpg", imageAlt: "Michelle Rodriguez" },
            { id: "4", name: "David Thompson", handle: "Homeowner, Portland OR", testimonial: "Our fence looks beautiful and the whole process was smooth. They treated us like real customers. Customer service like this is rare.", imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-man-receiving-package-from-courier-signing-paperwork-front-his-house_637285-1270.jpg", imageAlt: "David Thompson" },
            { id: "5", name: "Lisa Park", handle: "Homeowner, Seattle WA", testimonial: "Professional, respectful, and they delivered exactly what they promised. We're recommending FenceCo to all our neighbors.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-experienced-carpenter_329181-15660.jpg?_wi=2", imageAlt: "Lisa Park" },
            { id: "6", name: "Robert Williams", handle: "Homeowner, San Diego CA", testimonial: "Best fence company we've worked with. Quality materials, clean work, and genuine care about our property.", imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-son-his-mature-father-holding-hands-while-greeting-each-other-kitchen_637285-10296.jpg?_wi=2", imageAlt: "Robert Williams" },
          ]}
          speed={40}
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardTwo
          title="Our Simple 3-Step Process"
          description="From quote to installation, we make it easy."
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            { id: "1", value: "Step 1", description: "Request a Quote - Fill out a quick form or call us" },
            { id: "2", value: "Step 2", description: "On-Site Estimate - We measure and help you choose the right fence" },
            { id: "3", value: "Step 3", description: "Professional Installation - Our crew installs quickly and correctly" },
          ]}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <BlogCardThree
          title="Gallery of Our Work"
          description="See the fences we've built for homeowners just like you."
          tag="Recent Projects"
          tagIcon={Image}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          blogs={[
            { id: "1", category: "Privacy Fence", title: "Modern Privacy Fence Installation", excerpt: "Beautiful wood privacy fence creating privacy and curb appeal for this Denver home.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772757243149-jpiz6t96.png", imageAlt: "Modern Privacy Fence", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-confident-experienced-carpenter_329181-15660.jpg", date: "Completed Recently" },
            { id: "2", category: "Gate Installation", title: "Custom Gate & Fence Combination", excerpt: "Matching aluminum fence with custom decorative gate for this Phoenix residence.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772757022271-8jnfgjlr.png", imageAlt: "Custom Gate Installation", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/happy-adult-son-his-mature-father-holding-hands-while-greeting-each-other-kitchen_637285-10296.jpg", date: "Completed Recently" },
            { id: "3", category: "Backyard Transformation", title: "Complete Backyard Fence Project", excerpt: "Shadowbox fence creating the perfect balance of privacy and style for this Seattle family.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/tmp/shadowbox-fence-1772757332154-ed5c9935.png", imageAlt: "Backyard Transformation", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/parents-happy-see-their-son-family-looking-happy_259150-56951.jpg", date: "Completed Recently" },
            { id: "4", category: "Property Fence", title: "Property Line Fence Installation", excerpt: "Durable chain link fence clearly defining property boundaries for this Austin home.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772756839393-j9p6mswa.png", imageAlt: "Property Fence", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/happy-mature-man-receiving-package-from-courier-signing-paperwork-front-his-house_637285-1270.jpg", date: "Completed Recently" },
            { id: "5", category: "Neighborhood Project", title: "Picket Fence for Curb Appeal", excerpt: "Classic picket fence enhancing the charm and value of this Portland property.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVLGyajHZW1dTvGoIOl6D6seVS/uploaded-1772757298038-4so7axum.png", imageAlt: "Picket Fence", authorName: "FenceCo Team", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-confident-experienced-carpenter_329181-15660.jpg", date: "Completed Recently" },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Get Your Free Fence Quote"
          description="Ready to transform your backyard? Fill out the form below for a free, no-obligation estimate. We'll reach out within 24 hours to discuss your project and answer any questions."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          mediaAnimation="blur-reveal"
          mediaPosition="right"
          imageSrc="http://img.b2bpic.net/free-photo/modern-wooden-fence-lush-green-hedge-garden-landscape_626616-510.jpg?_wi=5"
          imageAlt="Beautiful fence installation"
          inputPlaceholder="Enter your email address"
          buttonText="Get My Free Quote"
          termsText="We respect your privacy. We'll only use your information to contact you about your fence quote."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="FenceCo"
          copyrightText="© 2025 FenceCo. All rights reserved."
          columns={[
            {
              title: "Company",              items: [
                { label: "Why FenceCo", href: "#benefits" },
                { label: "Our Process", href: "#process" },
                { label: "Gallery", href: "#gallery" },
              ],
            },
            {
              title: "Services",              items: [
                { label: "Wood Privacy Fences", href: "#fence-types" },
                { label: "Aluminum Fences", href: "#fence-types" },
                { label: "Custom Gates", href: "#fence-types" },
              ],
            },
            {
              title: "Customer",              items: [
                { label: "Testimonials", href: "#testimonials" },
                { label: "Get a Quote", href: "#contact" },
                { label: "Contact Us", href: "#contact" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}