"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import FaqBase from "@/components/sections/faq/FaqBase";
import { Zap, 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 ServicesPage() {
  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="services" data-section="services">
        <FeatureCardTwentySeven
          title="Our Complete Media Services"
          description="We offer comprehensive, integrated solutions for every aspect of educational media production. From pre-production planning to final delivery, our team manages every detail with precision and creativity."
          tag="Full-Service Media Solutions"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="bento-grid"
          animationType="slide-up"
          features={[
            {
              id: "video-production",
              title: "Professional Video Production",
              descriptions: [
                "High-quality event documentation and promotional videos",
                "Multi-camera setups with professional crew coordination",
                "4K and broadcast-ready deliverables for all platforms",
                "Concept development through final delivery",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/sport-news-with-professional-recording-side-view_23-2149900289.jpg",
              imageAlt: "Professional video camera 4k production",
            },
            {
              id: "content-creation",
              title: "Content Creation & Strategy",
              descriptions: [
                "Social media content optimization for maximum engagement",
                "Editorial calendar planning and strategic execution",
                "Multi-platform content distribution and management",
                "Audience analysis and performance metrics",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/copy-space-calendar-cyber-monday-concept_23-2148670023.jpg",
              imageAlt: "Digital marketing content strategy planning",
            },
            {
              id: "live-streaming",
              title: "Live Streaming Solutions",
              descriptions: [
                "Real-time event broadcasting to global audiences",
                "Multi-platform streaming to YouTube, Facebook, and beyond",
                "Interactive audience engagement features and moderation",
                "Professional technical support throughout events",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/female-student-using-sound-mixer_107420-64841.jpg",
              imageAlt: "Live streaming broadcast control room operation",
            },
            {
              id: "photography",
              title: "Event Photography",
              descriptions: [
                "Professional event documentation with experienced photographers",
                "Candid moments and formal portrait sessions included",
                "Rapid turnaround digital delivery with professional editing",
                "Unlimited shots with comprehensive coverage",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/female-photographer-blurred-models_23-2148565543.jpg",
              imageAlt: "Professional event photographer working",
            },
            {
              id: "post-production",
              title: "Post-Production & Editing",
              descriptions: [
                "Advanced color grading and visual effects enhancement",
                "Professional sound design and mixing for broadcast quality",
                "Animation and motion graphics for compelling visuals",
                "Multi-version editing for various platforms and formats",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-lifestyle-blogger-girl-records-video-her-camera-social-media-shows_1258-281864.jpg",
              imageAlt: "Video editor color grading software",
            },
            {
              id: "training",
              title: "Media Training Programs",
              descriptions: [
                "Customized student and staff workshops on latest techniques",
                "Technical skills development for in-house content creation",
                "Creative storytelling techniques and narrative development",
                "Equipment operation and best practices certification",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-learning-language-work_23-2149300729.jpg",
              imageAlt: "Media production workshop training session",
            },
          ]}
        />
      </div>

      <div id="service-metrics" data-section="service-metrics">
        <MetricCardFourteen
          title="Service Performance"
          tag="Our Commitment"
          tagAnimation="slide-up"
          useInvertedBackground={false}
          metricsAnimation="slide-up"
          metrics={[
            { id: "metric-1", value: "98%", description: "On-Time Delivery Rate" },
            { id: "metric-2", value: "24h", description: "Average Turnaround" },
            { id: "metric-3", value: "10+", description: "Service Offerings" },
            { id: "metric-4", value: "100%", description: "Quality Guaranteed" },
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Service FAQs"
          description="Common questions about our services, pricing, and process. If you need more information, reach out to our team directly."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",
              title: "What types of schools do you work with?",
              content: "We work with independent schools, private institutions, charter schools, and public school districts. Our experience spans K-12 and higher education. Regardless of school size or type, we tailor our services to your unique needs and budget.",
            },
            {
              id: "faq-2",
              title: "How long does a typical project take?",
              content: "Project timelines vary based on scope and complexity. Simple promotional videos typically take 2-3 weeks, while comprehensive documentary-style projects may take 6-8 weeks. We provide detailed timelines during our consultation phase.",
            },
            {
              id: "faq-3",
              title: "Do you offer package deals?",
              content: "Yes, we offer customized packages based on your annual needs. Whether you need monthly content creation, quarterly event coverage, or comprehensive annual media planning, we can develop a package that maximizes value and ensures consistent quality.",
            },
            {
              id: "faq-4",
              title: "Can you handle live streaming events?",
              content: "Absolutely. We provide professional live streaming for graduations, fundraisers, athletic events, assemblies, and virtual open houses. Our equipment and expertise ensure reliable, high-quality broadcasts to any size audience.",
            },
            {
              id: "faq-5",
              title: "What's your revision process?",
              content: "We include revision rounds in all our projects. We work collaboratively to ensure the final product meets your vision. We welcome your feedback and iterate until you're completely satisfied.",
            },
            {
              id: "faq-6",
              title: "Do you provide training for our staff?",
              content: "Yes, we offer comprehensive media training programs for staff and students. From basic video production to advanced editing techniques, we can customize workshops to match your skill levels and goals.",
            },
          ]}
        />
      </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>
  );
}