"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Mail, Quote, Rocket } from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="blurBottom"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="Proof Digital"
          bottomLeftText="Global Reach"
          bottomRightText="hello@proofdigital.com"
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactCTA
          tag="Get in Touch"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Let's Start a Conversation"
          description="Ready to transform your digital presence? Reach out to us today and let's discuss how Proof Digital can help you achieve your goals. Our team is excited to hear about your project."
          buttons={[
            { text: "Send Email", href: "mailto:hello@proofdigital.com" },
            { text: "Schedule Call", href: "#" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-testimonials" data-section="contact-testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Real experiences from businesses we've partnered with to transform their digital presence"
          tag="Client Reviews"
          tagIcon={Quote}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              handle: "@sarahjohnson",
              testimonial: "Proof Digital transformed our online presence completely. Their team was professional, responsive, and delivered exactly what we needed.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-portrait-of-a-conf-1772538616642-48480d7d.png?_wi=3",
              imageAlt: "Sarah Johnson",
            },
            {
              id: "2",
              name: "David Kim",
              handle: "@davidkim",
              testimonial: "The best digital agency we've worked with. Their strategic insights and execution are unmatched in the industry.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-an-asian-male-i-1772538616949-bfc92c2b.png?_wi=2",
              imageAlt: "David Kim",
            },
            {
              id: "3",
              name: "Jessica Martinez",
              handle: "@jessicamartinez",
              testimonial: "From concept to launch, Proof Digital handled everything with professionalism and expertise. Highly recommended!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-a-confident-wom-1772538616544-05f319c0.png?_wi=2",
              imageAlt: "Jessica Martinez",
            },
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

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