"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Send } from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "About", id: "/about" },
  { name: "Services", id: "/services" },
  { name: "Portfolio", id: "/portfolio" },
  { name: "Pricing", id: "/pricing" },
];

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="MDX" navItems={navItems} />
      </div>

      {/* Contact Information Section */}
      <div id="contact-info" data-section="contact-info">
        <FeatureCardThree
          title="Get In Touch"
          description="Multiple ways to connect with the MDX team. We're excited to hear about your project and how we can help."
          features={[
            {
              id: "01",
              title: "Strategy Call",
              description:
                "Schedule a 30-minute consultation to discuss your business goals, challenges, and how we can help you succeed online.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-meeting-office_1268-21517.jpg?_wi=3",
              imageAlt: "Strategy call",
            },
            {
              id: "02",
              title: "Email Us",
              description:
                "Send us a message about your project, and we'll get back to you within 24 hours with next steps and custom recommendations.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/focus-concentrate-clarity-determine-inspiration-concept_53876-133862.jpg?_wi=6",
              imageAlt: "Email contact",
            },
            {
              id: "03",
              title: "Project Form",
              description:
                "Fill out our quick project intake form to share details about your business, goals, timeline, and budget so we can prepare for our meeting.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg?_wi=6",
              imageAlt: "Project form",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Why Contact Section */}
      <div id="why-contact" data-section="why-contact">
        <FeatureCardThree
          title="Why Reach Out Now?"
          description="The sooner you connect with us, the sooner your business can start benefiting from a strategic, high-performance website."
          features={[
            {
              id: "01",
              title: "Free Assessment",
              description:
                "We'll analyze your current situation, identify opportunities, and give you honest feedback about what your website needs to succeed.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/unrecognizable-colleagues-standing-table-looking-design-projects_1098-20475.jpg?_wi=4",
              imageAlt: "Free assessment",
            },
            {
              id: "02",
              title: "Personalized Strategy",
              description:
                "No cookie-cutter templates. We develop a unique roadmap tailored specifically to your industry, audience, and revenue goals.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/marketing-conversion-flat-background_23-2148000676.jpg?_wi=4",
              imageAlt: "Personalized strategy",
            },
            {
              id: "03",
              title: "Clear Timeline",
              description:
                "We'll give you a realistic project timeline, deliverables breakdown, and ongoing support plan so you know exactly what to expect.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg?_wi=3",
              imageAlt: "Clear timeline",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Contact CTA */}
      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Let's Connect"
          tagIcon={Send}
          title="Ready to Grow Your Business?"
          description="Take the first step toward a web presence that actually drives results. Schedule a consultation with the MDX team today."
          buttons={[
            { text: "Book a Call Now", href: "/booking" },
            { text: "Send a Message", href: "#" },
          ]}
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="MDX"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}