"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBase from '@/components/sections/footer/FooterBase';
import { HelpCircle } from "lucide-react";

export default function ContactPage() {
  const handleNewsletterSubmit = (email: string) => {
    console.log("Newsletter signup:", email);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "How It Works", id: "products" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
          ]}
          button={{
            text: "Start Free Trial",            href: "contact"}}
          brandName="ViralAI Studio"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated with ViralAI News"
          description="Get the latest features, tips, and best practices delivered to your inbox. Join our creator community and never miss an update."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/abstract-technology-background-with-warm-1772497231143-4baf05db.png?_wi=2"
          imageAlt="ViralAI Studio technology background"
          mediaAnimation="slide-up"
          mediaPosition="left"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
          onSubmit={handleNewsletterSubmit}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "1",              title: "How does AI highlight detection work?",              content: "Our AI analyzes video content using advanced machine learning models to identify moments with high engagement potential. It considers factors like visual changes, audio peaks, scene transitions, and sentiment analysis. The system learns from viral content patterns to ensure your shorts have maximum impact."},
            {
              id: "2",              title: "What video formats are supported?",              content: "ViralAI Studio supports MP4, MOV, AVI, MKV, and WebM formats. We can process videos in any resolution from 720p to 8K, and automatically optimize them for your chosen export format. Upload larger files with our cloud processing or batch upload multiple videos."},
            {
              id: "3",              title: "Can I export to multiple platforms at once?",              content: "Yes! One of our key features is simultaneous multi-platform export. Generate 16:9 (YouTube), 9:16 (TikTok/Reels), and 1:1 (Instagram Feed) versions in a single click. You can also set up direct posting to your social media accounts with our integrations."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APaxq631vx47XjqYF1A9jKfIGG/friendly-customer-support-representative-1772497230606-2e080611.png"
          imageAlt="ViralAI Studio customer support"
          mediaAnimation="slide-up"
          mediaPosition="right"
          faqsAnimation="slide-up"
          title="Frequently Asked Questions"
          description="Everything you need to know about ViralAI Studio. Can't find your answer? Contact our support team."
          tag="Help Center"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <div className="mx-auto px-4 md:px-6 py-20 text-center">
          <h2 className="text-4xl font-light mb-12">Get in Touch</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 max-w-4xl mx-auto">
            <div>
              <h3 className="text-xl font-light mb-3">Email</h3>
              <p className="text-gray-600">support@viralaistudio.com</p>
              <p className="text-sm text-gray-500 mt-2">We respond within 24 hours</p>
            </div>
            <div>
              <h3 className="text-xl font-light mb-3">Chat</h3>
              <p className="text-gray-600">Live chat available 24/7</p>
              <p className="text-sm text-gray-500 mt-2">Start a conversation now</p>
            </div>
            <div>
              <h3 className="text-xl font-light mb-3">Social</h3>
              <p className="text-gray-600">@viralaistudio</p>
              <p className="text-sm text-gray-500 mt-2">Follow for updates and tips</p>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "pricing" },
                { label: "API Docs", href: "https://docs.viralaistudio.com" },
                { label: "Roadmap", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "https://blog.viralaistudio.com" },
                { label: "Careers", href: "#" },
                { label: "Press Kit", href: "#" },
              ],
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "faq" },
                { label: "Contact", href: "contact" },
                { label: "Community", href: "#" },
                { label: "Status Page", href: "#" },
              ],
            },
          ]}
          logoText="ViralAI Studio"
          copyrightText="© 2025 ViralAI Studio. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}