"use client";

import React from 'react';
import Link from 'next/link';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

import { CalendarCheck } from 'lucide-react';

export default function HomePage() {
  const navItems = [
    { name: 'Home', id: '/' },
    { name: 'Services', id: '/services' },
    { name: 'Our Work', id: '/work' },
    { name: 'Testimonials', id: '/testimonials' },
    { name: 'Contact', id: '/contact' },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Services", href: "/services" },
        { label: "Our Work", href: "/work" },
      ],
    },
    {
      items: [
        { label: "Testimonials", href: "/testimonials" },
        { label: "Contact Us", href: "/contact" },
        { label: "(XXX) XXX-XXXX", href: "tel:XXX-XXX-XXXX" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Custom European Landscaping"
          bottomLeftText="Timeless Craftsmanship"
          bottomRightText="(XXX) XXX-XXXX"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="Custom European Landscaping"
          description="Custom stonework, retaining walls, patios, drainage solutions, and transformative outdoor spaces crafted with precision and pride."
          buttons={[
            { text: "Request a Consultation", href: "/contact" },
            { text: "View Our Work", href: "/work" },
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/two-waiters-far-away-ready-service-prepared-desk-waiting-food-visitors-evening-time_146671-14405.jpg",
              imageAlt: "Luxury retaining wall and patio at dusk with warm lighting",
            },
          ]}
          autoplayDelay={6000}
          showDimOverlay={true}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted Craftsmanship"
          description="5.0 Star Rated | 7+ Years of Excellence | Hundreds of Projects Completed"
          names={[
            "5.0 Star Rated",
            "7+ Years of Excellence",
            "Hundreds of Projects Completed",
            "Precision Craftsmanship",
            "No Shortcuts",
            "Complex Retaining Walls",
            "Drainage Expertise",
            "Professional & Punctual",
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={60}
          showCard={false}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Craftsmanship Without Compromise"
          description={[
            "At Custom European Landscaping, we don’t cut corners. We build landscapes the right way.",
            "Founded by Harvey and built on reputation, integrity, and communication, our team specializes in high-quality retaining walls, patios, grading, drainage correction, and full landscape transformations.",
            "We believe: Communication is everything. Engineering matters. Details make the difference. Your home deserves more than “good enough.”",
            "From small refinements to 12-foot engineered retaining walls, every project is treated with the same level of care.",
          ]}
          useInvertedBackground={false}
          titleClassName="text-5xl lg:text-6xl font-serif text-foreground leading-tight"
          descriptionClassName="text-lg leading-relaxed text-foreground/80"
          buttonContainerClassName="mt-8"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne
          title="Our Specialties"
          description="Our expertise covers the full spectrum of outdoor transformations, from foundational structural elements to exquisite aesthetic enhancements."
          features={[
            {
              title: "Retaining Walls",
              description: "Engineered, reinforced, and built to last. From decorative garden walls to 100+ foot structural systems.",
              imageSrc: "https://img.b2bpic.net/free-photo/gray-brick-wall-background_1372-494.jpg",
              imageAlt: "Engineered retaining wall in a luxurious garden",
            },
            {
              title: "Patios & Outdoor Living",
              description: "Custom stone patios, fire features, pergolas, and elegant hardscapes that transform how you use your yard.",
              imageSrc: "https://img.b2bpic.net/free-photo/rustic-patio-with-deck-furniture-vegetation_23-2150698338.jpg",
              imageAlt: "Custom stone patio with fire feature",
            },
          ]}
          gridVariant="two-items-per-row"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          cardClassName="bg-card p-6 rounded-soft border border-border transition-all duration-300 hover:scale-[1.02]"
          cardTitleClassName="text-2xl font-semibold text-foreground"
          cardDescriptionClassName="text-foreground/70"
          mediaClassName="rounded-soft mb-4 object-cover h-48 w-full"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Clients Say It Best"
          description="Hear directly from homeowners and businesses who entrusted us with their outdoor visions and experienced our commitment to quality and communication."
          testimonials={[
            {
              id: "1",
              name: "Sarah J.",
              date: "July 2023",
              title: "Craftsmanship without compromise!",
              quote: "“Custom European Landscaping truly delivers on their promise. No engineering shortcuts, everything done the right way. We couldn't be happier with our new retaining wall.”",
              tag: "Retaining Wall Project",
              avatarSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
              avatarAlt: "Sarah J.",
            },
            {
              id: "2",
              name: "Michael C.",
              date: "April 2024",
              title: "Top-notch work and incredible crew.",
              quote: "“The team is professional, punctual, and their work is top-notch. Best experience I’ve ever had with a landscaping company. They transformed our yard.”",
              tag: "Full Landscape Transformation",
              avatarSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
              avatarAlt: "Michael C.",
            },
            {
              id: "3",
              name: "Emily R.",
              date: "November 2023",
              title: "Honest, straight-shooting, and professional.",
              quote: "“Harvey and his crew are straight shooting and honest. They listened to our vision and delivered beyond expectations. Highly recommend their precision stonework.”",
              tag: "Custom Patio Installation",
              avatarSrc: "https://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg",
              avatarAlt: "Emily R.",
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Ready To Transform Your Property?"
          description="Let’s build something exceptional. Schedule your complimentary consultation today and envision your dream outdoor space, crafted with integrity and European precision."
          tagIcon={CalendarCheck}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/greenhouse-owner-presenting-flowers-options-potential-customer-retailer_158595-7007.jpg"
          imageAlt="Luxury landscaping design consultation with client and architect"
          mediaAnimation="opacity"
          mediaPosition="right"
          inputPlaceholder="Your Name or Email"
          buttonText="Schedule Your Consultation"
          termsText="Or call us directly at (XXX) XXX-XXXX for immediate assistance."
          titleClassName="text-5xl lg:text-6xl font-serif leading-tight"
          descriptionClassName="text-lg leading-relaxed text-foreground/80"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="Custom European Landscaping"
          className="bg-card"
          logoClassName="text-4xl font-serif text-foreground mb-4"
          columnClassName="text-foreground/80"
          itemClassName="text-foreground/70 hover:text-foreground transition-colors"
          containerClassName="border-t-2 border-border pt-12 pb-8"
        />
      </div>
    </ThemeProvider>
  );
}