"use client";

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

const navItems = [
  { name: "Services", id: "services" },
  { name: "Portfolio", id: "portfolio" },
  { name: "Insights", id: "blog" },
  { name: "Testimonials", id: "testimonials" },
  { name: "Contact", id: "contact" },
];

const footerColumns = [
  {
    title: "Services",    items: [
      { label: "Short-Form Content", href: "/services" },
      { label: "Long-Form Production", href: "/services" },
      { label: "Strategy Consulting", href: "/services" },
      { label: "Analytics & Optimization", href: "/services" },
    ],
  },
  {
    title: "Company",    items: [
      { label: "About Us", href: "/about" },
      { label: "Our Process", href: "#process" },
      { label: "Case Studies", href: "/portfolio" },
      { label: "Careers", href: "/careers" },
    ],
  },
  {
    title: "Resources",    items: [
      { label: "Content Blog", href: "/blog" },
      { label: "Trend Reports", href: "/trends" },
      { label: "Creator Community", href: "/community" },
      { label: "Contact", href: "#contact" },
    ],
  },
];

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{ text: "Start Growing", href: "#contact" }}
          brandName="ViralFlow"
        />
      </div>

      {/* Contact Form */}
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Go Viral?"
          description="Let's talk about your content vision. Book a free 30-minute strategy session with our team and discover how we can transform your message into your biggest competitive advantage."
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/business-people-meeting_53876-13583.jpg"
          imageAlt="Content strategy meeting"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Schedule Strategy Call"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true,
            },
            {
              name: "email",              type: "email",              placeholder: "your@email.com",              required: true,
            },
          ]}
          textarea={{
            name: "message",            placeholder:
              "Tell us about your content goals, current challenges, and what platforms you want to dominate...",            rows: 5,
            required: true,
          }}
          onSubmit={(data) => {
            console.log("Form submitted:", data);
          }}
        />
      </div>

      {/* Contact FAQs */}
      <div id="contact-faq" data-section="contact-faq">
        <FaqDouble
          title="Contact & Partnership FAQs"
          description="Have questions about getting started with ViralFlow? Here are answers to our most common inquiries."
          tag="Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What's included in the free 30-minute strategy session?",              content:
                "Our strategy sessions cover: audit of your current content performance, competitor analysis, platform-specific recommendations, content calendar overview, and a customized proposal. You'll leave with actionable insights regardless of whether you move forward with our services."},
            {
              id: "2",              title: "What's the minimum engagement timeline?",              content:
                "Most of our clients commit to a 3-month engagement minimum. This allows us time to develop strategy, produce quality content, measure performance, and make optimizations. Short-term projects are available on a case-by-case basis."},
            {
              id: "3",              title: "How do you handle content approval and revisions?",              content:
                "We build in a collaborative approval process. You'll receive drafts for feedback, and we include up to 3 rounds of revisions per campaign. After approval, we manage all distribution, scheduling, and performance monitoring across your channels."},
            {
              id: "4",              title: "What platforms do you specialize in?",              content:
                "We work across all major platforms: TikTok, Instagram (Reels, Feed, Stories), YouTube (Shorts, Long-form, Community), Twitter/X, LinkedIn, and Pinterest. We can customize our focus based on where your audience is most active."},
            {
              id: "5",              title: "Do you offer retainer packages?",              content:
                "Yes! We offer customizable retainer packages ranging from 10-50 content pieces per month. Retainers include strategy, production, distribution, community management, and monthly performance reporting. We can adjust the package based on your specific needs."},
            {
              id: "6",              title: "How quickly can you get started after signing?",              content:
                "We typically begin production within 5-7 business days of contract signing. Initial onboarding includes brand audit, audience research, and strategy development. First content typically launches within 2-3 weeks."},
          ]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 ViralFlow. All rights reserved. | Built for content creators, powered by data."
        />
      </div>
    </ThemeProvider>
  );
}