"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Mail, Headphones } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="plain"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="PowerFlow"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Products", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Shop Now", href: "/products" }}
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Connected with PowerFlow"
          description="Subscribe to our newsletter for exclusive product launches, charging tips, early access to sales, and industry insights delivered directly to your inbox."
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="We respect your privacy and will never share your email. You can unsubscribe anytime with one click."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="support" data-section="support">
        <MediaAbout
          title="We're Here to Help"
          description="Our dedicated support team is available to assist you with product questions, warranty claims, technical support, and any other inquiries. We typically respond within 24 hours and are committed to your satisfaction."
          tag="Customer Support"
          tagIcon={Headphones}
          imageSrc="https://img.b2bpic.net/free-photo/black-power-bank-digital-device_53876-96820.jpg"
          imageAlt="PowerFlow customer support"
          buttons={[
            { text: "Email Support", href: "mailto:support@powerflow.com" },
            { text: "View FAQ", href: "/about" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactCenter
          tag="Get in Touch"
          tagIcon={Mail}
          title="Have Questions? We'd Love to Hear From You"
          description="Whether you need technical assistance, have product questions, or want to share feedback, our team is ready to help. Send us your details and we'll get back to you promptly."
          inputPlaceholder="Enter your email for quick response"
          buttonText="Contact Us"
          termsText="By contacting us, you agree to our Terms of Service and Privacy Policy. We aim to respond within 24 hours."
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-vector/blue-technology-wire-mesh-background_1017-17262.jpg"
        imageAlt="Technology background"
        logoText="PowerFlow"
        copyrightText="© 2025 PowerFlow. All rights reserved. Empowering your mobile lifestyle."
        columns={[
          {
            title: "Products",
            items: [
              { label: "Power Banks", href: "/products" },
              { label: "Accessories", href: "/products" },
              { label: "Bundles", href: "/products" },
              { label: "Compare", href: "/products" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Documentation", href: "/about" },
              { label: "Warranty", href: "/about" },
              { label: "Returns", href: "/about" },
              { label: "Contact Us", href: "/contact" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "/about" },
              { label: "Careers", href: "/about" },
              { label: "Press", href: "/about" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}