"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { Sparkles, Zap } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Products", id: "/products" },
    { name: "Pricing", id: "/pricing" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Services", href: "/services" },
        { label: "Products", href: "/products" },
        { label: "Blog", href: "#" },
      ],
    },
    {
      title: "Solutions",      items: [
        { label: "Web Development", href: "/services" },
        { label: "Mobile Apps", href: "/services" },
        { label: "Cloud Services", href: "/services" },
        { label: "E-commerce", href: "/services" },
      ],
    },
    {
      title: "Contact",      items: [
        { label: "Email: connect@codesniffs.com", href: "mailto:connect@codesniffs.com" },
        { label: "Phone: +91 91676 20778", href: "tel:+919167620778" },
        { label: "Mumbai, India", href: "#" },
        { label: "Get in Touch", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CodeSniffs"
          navItems={navItems.map((item) => ({
            name: item.name,
            id: item.id,
          }))}
          button={{
            text: "Start Project",            href: "/contact"}}
        />
      </div>

      {/* Contact Hero Section */}
      <div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
        <HeroSplitDualMedia
          title="Get Your Project Started"
          description="Let's discuss how CodeSniffs can transform your business with innovative software solutions. Reach out today and let's build something amazing together."
          tag="Contact Us"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Schedule Call",              href: "#"},
            {
              text: "Send Message",              href: "#"},
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/professional-web-development-workspace-s-1772881146240-2fb6b6ed.png",              imageAlt: "Professional Web Development Workspace"},
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/development-team-working-on-code-impleme-1772881146228-ee1ef7db.png",              imageAlt: "Development Team Collaboration"},
          ]}
          mediaAnimation="blur-reveal"
          rating={5}
          ratingText="Ready to Help"
          background={{
            variant: "plain"}}
        />
      </div>

      {/* Contact Methods Section */}
      <div id="methods" data-section="methods" className="mx-auto px-4 md:px-6">
        <FeatureCardThree
          title="Get In Touch"
          description="Multiple ways to connect with our team. Choose what works best for you."
          tag="Contact Methods"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: "01",              title: "Email Us",              description: "Send us a detailed message about your project and requirements. We'll respond within 24 hours.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/technical-support-team-providing-custome-1772881145456-37e89ce7.png",              imageAlt: "Email Support"},
            {
              id: "02",              title: "Schedule a Call",              description: "Book a consultation call with our team. We'll discuss your project scope and provide a custom quote.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/business-consultation-meeting-showing-st-1772881146105-e7763d39.png",              imageAlt: "Schedule Meeting"},
            {
              id: "03",              title: "Phone Call",              description: "Call us directly on +91 91676 20778 to discuss your project needs immediately with our team.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ac9KYusPGO1ATYFX67WtPqJV0Y/professional-portrait-photograph-of-a-co-1772881145274-12e7a02d.png",              imageAlt: "Phone Support"},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground={false}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="CodeSniffs"
          copyrightText="© 2025 CodeSniffs. All rights reserved. Software Solutions Agency, Mumbai, India."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}