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

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="large"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
          brandName="ArbUz"
        />
      </div>

      <div id="contact-hero" data-section="contact-hero">
        <div className="py-16 md:py-24">
          <div className="max-w-4xl mx-auto px-4 text-center">
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              Let's Transform Your Media Buying Together
            </h1>
            <p className="text-xl text-gray-600 mb-8">
              Ready to see how AI can revolutionize your campaigns? Our team of specialists is here to help you 
              get started with a personalized demo and strategy session.
            </p>
            <div className="grid md:grid-cols-3 gap-8 mt-12">
              <div className="text-center">
                <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">📞</span>
                </div>
                <h3 className="font-semibold mb-2">Schedule a Call</h3>
                <p className="text-gray-600">Book a 30-minute strategy session</p>
              </div>
              <div className="text-center">
                <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🚀</span>
                </div>
                <h3 className="font-semibold mb-2">Start Free Trial</h3>
                <p className="text-gray-600">30-day full access, no credit card</p>
              </div>
              <div className="text-center">
                <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">💬</span>
                </div>
                <h3 className="font-semibold mb-2">Live Chat Support</h3>
                <p className="text-gray-600">Get instant help from our team</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="main-contact-form" data-section="main-contact-form">
        <ContactSplitForm
          title="Ready to Get Started?"
          description="Tell us about your current media buying challenges and goals. We'll show you exactly how ArbUz can help you achieve better results with less manual work."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
            { name: "email", type: "email", placeholder: "Business Email Address", required: true },
            { name: "company", type: "text", placeholder: "Company Name", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number (Optional)" },
            { name: "monthly_spend", type: "text", placeholder: "Monthly Ad Spend (e.g. $10,000)" }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your current media buying setup, challenges, and what you'd like to achieve with AI optimization...",
            rows: 6,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/researchers-looking-alternative-energy-souces_23-2149311493.jpg"
          imageAlt="Team of AI specialists ready to help with media buying optimization"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Start Your AI Journey"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqBase
          faqs={[
            {
              id: "contact-faq-1",
              title: "How quickly can I get started with ArbUz?",
              content: "You can start your free trial immediately after signing up. Our onboarding process typically takes 24-48 hours to connect your advertising accounts and configure initial AI settings. Our team provides guided setup to ensure you're optimized from day one."
            },
            {
              id: "contact-faq-2",
              title: "What information do I need for the demo?",
              content: "For the most valuable demo experience, please have your current campaign performance data available (impressions, clicks, conversions, spend). This allows us to show specific improvements ArbUz could make to your actual campaigns."
            },
            {
              id: "contact-faq-3",
              title: "Do you offer migration assistance?",
              content: "Yes! Our customer success team provides full migration support including campaign transfer, historical data import, and strategy optimization. We ensure a smooth transition with zero downtime for your active campaigns."
            }
          ]}
          title="Getting Started Questions"
          description="Common questions about beginning your AI-powered media buying journey with ArbUz. Our team is here to make the process as smooth as possible."
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Quick Answers"
          tagIcon={HelpCircle}
          tagAnimation="opacity"
          buttons={[{ text: "Schedule Demo", href: "/contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <FooterBaseReveal
        columns={[
          {
            title: "Product",
            items: [
              { label: "Features", href: "/features" },
              { label: "Pricing", href: "/pricing" },
              { label: "About", href: "/about" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Resources",
            items: [
              { label: "Documentation", href: "/about" },
              { label: "Blog", href: "/about" },
              { label: "Guides", href: "/contact" },
              { label: "Support", href: "/contact" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Careers", href: "/features" },
              { label: "Contact", href: "/contact" },
              { label: "Partners", href: "/features" }
            ]
          }
        ]}
        copyrightText="© 2023 ArbUz. All rights reserved."
      />
    </ThemeProvider>
  );
}