"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import Link from "next/link";

export default function FAQPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "About", id: "about" },
    { name: "Services", id: "services" },
    { name: "Gallery", id: "gallery" },
    { name: "Reviews", id: "reviews" },
    { name: "FAQ", id: "faq" },
  ];

  const footerColumns = [
    {
      title: "Company",
      items: [
        { label: "Home", href: "/" },
        { label: "About", href: "/about" },
        { label: "Services", href: "/services" },
        { label: "Gallery", href: "/gallery" },
      ],
    },
    {
      title: "Customer",
      items: [
        { label: "Reviews", href: "/reviews" },
        { label: "FAQ", href: "/faq" },
        { label: "Get a Quote", href: "/contact" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Disclaimer", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="TD's Lawn-Care"
          navItems={navItems}
          button={{
            text: "Get a Quote",
            href: "/contact",
          }}
        />
      </div>

      <div id="faq-intro" data-section="faq-intro" className="mx-auto px-4 md:px-6 py-16 md:py-24">
        <div className="max-w-3xl mx-auto text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Frequently Asked Questions</h1>
          <p className="text-lg text-gray-600 mb-12">
            Find answers to common questions about TD's Lawn-Care services, scheduling, and pricing.
          </p>
        </div>
      </div>

      <div id="faq-content" data-section="faq-content" className="mx-auto px-4 md:px-6 py-12 md:py-16">
        <div className="max-w-3xl mx-auto">
          <div className="space-y-8">
            <div className="border-b pb-6">
              <h3 className="text-xl font-semibold mb-3">How often should I have my lawn mowed?</h3>
              <p className="text-gray-600">
                Most homeowners benefit from weekly or bi-weekly mowing during the growing season. During peak growth in spring and early fall, weekly service keeps your lawn looking its best. Summer maintenance is typically bi-weekly. We'll recommend the perfect schedule for your property.
              </p>
            </div>

            <div className="border-b pb-6">
              <h3 className="text-xl font-semibold mb-3">Do you offer one-time services or only recurring maintenance?</h3>
              <p className="text-gray-600">
                We offer both! Whether you need a one-time spring cleanup, seasonal leaf removal, or ongoing weekly maintenance, we're flexible. Many clients start with one-time services and then transition to regular maintenance programs.
              </p>
            </div>

            <div className="border-b pb-6">
              <h3 className="text-xl font-semibold mb-3">What areas do you service?</h3>
              <p className="text-gray-600">
                We serve the entire local community and surrounding areas. Contact us for a free quote—we'll let you know if we service your location and provide pricing based on your property's size and service needs.
              </p>
            </div>

            <div className="border-b pb-6">
              <h3 className="text-xl font-semibold mb-3">How much does lawn mowing cost?</h3>
              <p className="text-gray-600">
                Pricing varies based on lawn size, terrain, and service frequency. We always provide transparent, upfront pricing with no hidden fees. Request a free quote online or call us, and we'll give you an exact estimate within 24 hours.
              </p>
            </div>

            <div className="border-b pb-6">
              <h3 className="text-xl font-semibold mb-3">Can you handle commercial properties?</h3>
              <p className="text-gray-600">
                Absolutely! We service residential homes, small businesses, and rental properties. Our commercial clients appreciate our professionalism, reliability, and ability to work around their schedules.
              </p>
            </div>

            <div className="pb-6">
              <h3 className="text-xl font-semibold mb-3">What if I need to reschedule my appointment?</h3>
              <p className="text-gray-600">
                We understand that life happens. Contact us as soon as possible to reschedule. We work hard to accommodate requests and typically can reschedule within a few days. Our goal is to fit your lawn care around your schedule.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div id="cta-contact" data-section="cta-contact">
        <ContactText
          text="Still have questions? Reach out to TD's Lawn-Care directly. We're happy to discuss your lawn care needs and provide a free, no-obligation quote."
          animationType="entrance-slide"
          background={{
            variant: "radial-gradient",
          }}
          useInvertedBackground={false}
          buttons={[
            {
              text: "Get a Free Quote",
              href: "/contact",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="TD's Lawn-Care"
          copyrightText="© 2025 TD's Lawn-Care. Professional, Reliable, Always On Schedule."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}