"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Phone, HelpCircle } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Reviews", id: "reviews" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="A-1 Discount Tree & Lawn"
          button={{
            text: "Call Now",
            href: "tel:+1-800-TREE-911",
          }}
        />
      </div>

      <div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
        <HeroLogoBillboardSplit
          logoText="A-1 Discount Tree & Lawn Service"
          description="Get fast, professional help now. Call us 24/7 for emergency service or to schedule your free estimate."
          background={{ variant: "plain" }}
          buttons={[
            {
              text: "Call Now (24/7)",
              href: "tel:+1-800-TREE-911",
            },
            {
              text: "Request Free Estimate",
              href: "#contact-cta",
            },
          ]}
          buttonAnimation="slide-up"
          layoutOrder="default"
          imageSrc="http://img.b2bpic.net/free-photo/crop-woman-adjusting-waist-bag_23-2147714892.jpg?_wi=3"
          imageAlt="professional tree removal crew working safely"
          mediaAnimation="slide-up"
          frameStyle="card"
          ariaLabel="Contact page hero section"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta" className="mx-auto px-4 md:px-6">
        <ContactCTA
          tag="Get Started"
          tagIcon={Phone}
          tagAnimation="slide-up"
          title="Free Estimate or Emergency Service?"
          description="Call us now for immediate assistance or to schedule your free tree service estimate. Available 24 hours a day, 7 days a week."
          buttons={[
            {
              text: "Call Now (24/7)",
              href: "tel:+1-800-TREE-911",
            },
            {
              text: "Request Estimate",
              href: "#contact-form",
            },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
        <FaqBase
          title="Frequently Asked Questions"
          description="Get answers to common questions about our tree removal, trimming, and lawn services."
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",
              title: "How fast can you respond to emergency tree damage?",
              content: "We dispatch crews within 30 minutes of your call, 24/7. Our average response time is typically 20-30 minutes for emergency storm damage. Call us immediately at 1-800-TREE-911.",
            },
            {
              id: "2",
              title: "What is included in your cleanup?",
              content: "Complete cleanup is always included. We remove all branches, logs, and debris from your property. Your yard is swept clean and restored to its original condition. No surprises.",
            },
            {
              id: "3",
              title: "Do you work with insurance companies?",
              content: "Yes, we're an approved vendor with all major insurance carriers. We can work directly with your insurance company and provide all documentation needed for your claim. We handle the paperwork hassle.",
            },
            {
              id: "4",
              title: "How do I get a free estimate?",
              content: "Simply call us at 1-800-TREE-911 or fill out our online form. We'll schedule a convenient time to inspect your property and provide a detailed, no-obligation quote.",
            },
            {
              id: "5",
              title: "Are you licensed and insured?",
              content: "Absolutely. We're fully licensed, bonded, and insured. You can request proof of insurance anytime. Your property and our crew are fully protected on every job.",
            },
            {
              id: "6",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, checks, and bank transfers. We offer flexible payment plans for larger projects. Ask about financing options when you call for your free estimate.",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="A-1 Discount Tree & Lawn"
          leftLink={{
            text: "Privacy Policy",
            href: "#privacy",
          }}
          rightLink={{
            text: "Terms of Service",
            href: "#terms",
          }}
        />
      </div>
    </ThemeProvider>
  );
}