"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 ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

import { CalendarCheck } from 'lucide-react';

export default function ContactPage() {
  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="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="process" data-section="process">
        <FaqDouble
          title="Our Process Explained"
          description="We believe in transparency and meticulous planning. Here’s what you can expect when you work with us."
          faqs={[
            { id: "step-1", title: "Step 1: Consultation", content: "We begin with a detailed on-site consultation. We walk the property with you, listen carefully to your ideas and aspirations, and discuss your specific goals and challenges to understand your vision completely." },
            { id: "step-2", title: "Step 2: Design & Planning", content: "Following the consultation, our experts refine the vision. We provide thoughtful recommendations, present design concepts, and detail the scope of work, ensuring alignment with your aesthetic and functional requirements before any work begins." },
            { id: "step-3", title: "Step 3: Precision Execution", content: "Once the plan is approved, our master craftsmen bring your vision to life. We commit to on-time project commencement, maintain clean and organized job sites, and provide clear communication throughout every phase of construction. No shortcuts, ever." },
            { id: "step-4", title: "Step 4: Final Walkthrough", content: "Our commitment extends to the very end. We conduct a thorough final walkthrough with you to ensure every detail meets our exacting standards and, most importantly, your complete satisfaction. We don’t leave until it’s done right." },
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          accordionClassName="bg-card rounded-soft border border-border p-5 my-2"
          accordionTitleClassName="text-xl font-semibold text-foreground"
          accordionContentClassName="text-foreground/70 mt-3"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Our Company"
          description={[
            "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."
          ]}
          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="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>
  );
}