"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { HelpCircle } from 'lucide-react';
import Link from 'next/link';

export default function ContactPage() {
  const handleContactSubmit = (data: Record<string, string>) => {
    console.log("Contact form submitted:", data);
    // Handle form submission here
  };

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLarge"
      background="blurBottom"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="WebVitrina"
          bottomLeftText="Strategic Web Design"
          bottomRightText="hello@webvitrina.it"
        />
      </div>

      {/* Contact Form */}
      <div id="contact" data-section="contact" className="mx-auto px-4 md:px-6">
        <ContactSplitForm
          title="Ready to Transform Your Business Online?"
          description="Book a free consultation. We'll analyze your current situation, discuss your goals, and show you exactly how we can help you attract more local customers."
          inputs={[
            {
              name: "businessName",
              type: "text",
              placeholder: "Business Name",
              required: true
            },
            {
              name: "ownerName",
              type: "text",
              placeholder: "Your Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Email Address",
              required: true
            },
            {
              name: "phone",
              type: "tel",
              placeholder: "Phone Number",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your business and what you're looking to achieve. What's your main goal?",
            rows: 5,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/friendly-consultation-meeting-between-we-1772481394854-2c43c9b8.png"
          imageAlt="Free consultation meeting"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Book Free Consultation"
          onSubmit={handleContactSubmit}
        />
      </div>

      {/* Contact FAQ */}
      <div id="contact-faq" data-section="contact-faq" className="mx-auto px-4 md:px-6">
        <FaqBase
          faqs={[
            {
              id: "1",
              title: "How can I get in touch with your team?",
              content: "You can fill out the form above to book a free consultation, or email us at hello@webvitrina.it. We respond to all inquiries within 24 business hours. For urgent matters, call us directly—we're here to help."
            },
            {
              id: "2",
              title: "What should I prepare for the free consultation?",
              content: "It's helpful to have: your current website (if you have one), your main business goals, your target customer profile, and your timeline. But don't worry—we'll guide you through everything. Most consultations are 30 minutes and very conversational."
            },
            {
              id: "3",
              title: "Is the consultation truly free with no obligation?",
              content: "Yes, completely free with zero obligation. We provide genuine advice on how we can help, or suggest alternatives if we're not the right fit. Our goal is building long-term relationships based on real value."
            },
            {
              id: "4",
              title: "How quickly can you get started?",
              content: "After we agree on the project scope, we typically start within 1-2 weeks. For urgent projects, we can discuss expedited timelines. Most websites launch 3-8 weeks after project kick-off."
            },
            {
              id: "5",
              title: "What areas do you serve?",
              content: "We work with local businesses throughout Europe and worldwide. Geography isn't a barrier—we handle everything digitally. If you're a local business owner wanting to attract customers online, we can help."
            },
            {
              id: "6",
              title: "Do you offer emergency support for existing websites?",
              content: "Yes. If your website is down or has critical issues, contact us immediately. We offer emergency response services even if we didn't build your original site. Let's discuss your situation."
            },
            {
              id: "7",
              title: "How do you handle project communication?",
              content: "We provide a dedicated project manager, regular update calls, and a shared project portal where you can see progress in real-time. You'll never wonder what's happening with your project."
            },
            {
              id: "8",
              title: "What's your typical response time for questions?",
              content: "During business hours, we typically respond within 2-4 hours. For non-urgent questions, we provide comprehensive responses within 24 hours. We prioritize clear communication because your success is our success."
            }
          ]}
          title="Contact & Support FAQ"
          description="Have questions? We have answers"
          tag="Help"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="WebVitrina"
          leftLink={{ text: "Privacy Policy", href: "#privacy" }}
          rightLink={{ text: "Terms of Service", href: "#terms" }}
        />
      </div>
    </ThemeProvider>
  );
}