"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FaqBase from "@/components/sections/faq/FaqBase";
import { Star, HelpCircle } from "lucide-react";

const navItems = [
  { name: "Home", id: "home" },
  { name: "About", id: "about" },
  { name: "Services", id: "services" },
  { name: "Portfolio", id: "portfolio" },
  { name: "Team", id: "team" },
  { name: "Contact", id: "contact" },
];

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="MediaVision Academy"
          navItems={navItems}
          button={{ text: "Get Started", href: "/contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Ready to Tell Your School's Story?"
          description="Let's discuss how MediaVision Academy can elevate your institution's media presence. Contact us today for a free consultation."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Your email address"
          buttonText="Schedule Call"
          termsText="By submitting your email, you agree to our Terms of Service and Privacy Policy."
        />
      </div>

      <div id="contact-testimonials" data-section="contact-testimonials">
        <TestimonialCardFive
          title="Why Schools Choose Us"
          description="Discover what our partners say about working with MediaVision Academy."
          tag="Client Success Stories"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "testimonial-1",
              name: "Dr. Sarah Mitchell",
              title: "Headmaster",
              date: "March 2024",
              quote: "MediaVision Academy transformed how we tell our school's story. Their team delivered exceptional quality and professionalism throughout every project.",
              tag: "Excellence",
              avatarSrc: "http://img.b2bpic.net/free-photo/young-business-woman-white-background-business-job_185193-110285.jpg",
              avatarAlt: "Dr. Sarah Mitchell headshot",
              imageSrc: "http://img.b2bpic.net/free-photo/brunette-businesswoman-reading-document_23-2148141724.jpg?_wi=2",
              imageAlt: "School administration office professional environment",
            },
            {
              id: "testimonial-2",
              name: "James Rodriguez",
              title: "Director of Communications",
              date: "February 2024",
              quote: "Working with their team was seamless. They understood our vision immediately and brought it to life with creativity and technical expertise beyond expectation.",
              tag: "Professional",
              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-bearded-man-dressed-wool-jacket-bow-tie_613910-3110.jpg",
              avatarAlt: "James Rodriguez headshot",
              imageSrc: "http://img.b2bpic.net/free-photo/hispanic-business-woman-smiling-camera-sitting-couch-typing-computer-while-diverse-colleagues-working-background-multiethnic-coworkers-analysing-startup-financial-reports-modern-office_482257-13476.jpg?_wi=2",
              imageAlt: "Communications director marketing office",
            },
            {
              id: "testimonial-3",
              name: "Emily Chen",
              title: "Marketing Manager",
              date: "January 2024",
              quote: "The content they created increased our social media engagement by 250%. Their understanding of educational marketing is truly exceptional.",
              tag: "Innovation",
              avatarSrc: "http://img.b2bpic.net/free-photo/asian-beauty-office-workplace_1098-17712.jpg",
              avatarAlt: "Emily Chen headshot",
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-using-her-mobile-phone-office_1301-3794.jpg?_wi=2",
              imageAlt: "Social media marketing strategy planning",
            },
          ]}
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqBase
          title="Common Questions"
          description="Have questions before reaching out? Find answers here."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",
              title: "How do I get started with a project?",
              content: "Simply reach out through our contact form or call us directly. We'll schedule a free consultation to discuss your needs, vision, and budget. After our initial conversation, we'll send you a detailed proposal and timeline.",
            },
            {
              id: "faq-2",
              title: "What information do you need for a quote?",
              content: "We'll need details about your project scope, event dates, deliverables required, and any specific vision you have. The more information you can provide, the more accurate our quote will be.",
            },
            {
              id: "faq-3",
              title: "Do you offer discounts for long-term partnerships?",
              content: "Yes! We encourage long-term partnerships and offer special pricing for annual packages and retainer arrangements. Contact us to discuss partnership opportunities.",
            },
            {
              id: "faq-4",
              title: "What's your payment process?",
              content: "We typically require a 50% deposit to secure your project date and begin pre-production planning. The remaining balance is due upon completion. We accept all major payment methods.",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
        <footer className="border-t border-gray-200 py-12">
          <div className="mx-auto max-w-7xl">
            <div className="flex items-center justify-between gap-4">
              <div className="text-lg font-semibold text-foreground">
                MediaVision Academy
              </div>
              <div className="flex items-center gap-6">
                <Link href="#" className="text-sm text-accent hover:text-foreground transition-colors">
                  Privacy Policy
                </Link>
                <Link href="/contact" className="text-sm text-accent hover:text-foreground transition-colors">
                  Contact
                </Link>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </ThemeProvider>
  );
}