"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import { Sparkles, Zap, Camera, Star, Award } 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 HomePage() {
  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="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Elevate Your School's Visual Story"
          description="Professional media production and content creation tailored for educational institutions. We transform your school's narrative into compelling visual experiences."
          tag="Premium Media Solutions"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore Our Work", href: "/services" },
            { text: "Schedule Consultation", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          carouselItems={[
            {
              id: "carousel-1",
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-talking-radio-station_23-2148802327.jpg",
              imageAlt: "Professional video production studio setup",
            },
            {
              id: "carousel-2",
              imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-recording-himself-personal-blog_23-2148581826.jpg",
              imageAlt: "Student testimonial video recording interview",
            },
            {
              id: "carousel-3",
              imageSrc: "http://img.b2bpic.net/free-photo/colleagues-doing-team-work-project_23-2149361573.jpg",
              imageAlt: "Educational media production classroom",
            },
            {
              id: "carousel-4",
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-specialized-photographers-working-studio_23-2150247227.jpg",
              imageAlt: "School event professional photography documentation",
            },
            {
              id: "carousel-5",
              imageSrc: "http://img.b2bpic.net/free-photo/african-american-tracking-engineer-works-with-greenscreen_482257-122061.jpg",
              imageAlt: "Professional multimedia production facility",
            },
            {
              id: "carousel-6",
              imageSrc: "http://img.b2bpic.net/free-photo/person-home-working-late-night_23-2150064907.jpg",
              imageAlt: "Professional video editing suite workstation",
            },
          ]}
          autoPlay={true}
          autoPlayInterval={5000}
          ariaLabel="Hero section showcasing media production work"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Who We Are"
          description="MediaVision Academy is a dedicated team of creative professionals specializing in educational media production. With over a decade of experience working with premier schools and institutions, we bring expertise, innovation, and passion to every project. Our mission is to help educational organizations tell their unique stories through compelling visual content that inspires, engages, and connects communities."
          tag="Our Story"
          tagIcon={Award}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/press-reporter-fallowing-leads-case_23-2149579746.jpg"
          imageAlt="Professional media production team collaboration"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          metrics={[
            { value: "150+", title: "Projects Completed" },
            { value: "95%", title: "Client Satisfaction" },
            { value: "15+", title: "Years Experience" },
            { value: "50+", title: "School Partners" },
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySeven
          title="Comprehensive Media Services"
          description="From concept to delivery, we provide end-to-end media production solutions designed specifically for educational environments."
          tag="What We Offer"
          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 and cinematic storytelling",
                "4K and broadcast-ready deliverables",
              ],
              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",
                "Editorial calendar planning and execution",
                "Multi-platform content distribution",
              ],
              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",
                "Multi-platform streaming capabilities",
                "Interactive audience engagement tools",
              ],
              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",
                "Candid and formal portrait sessions",
                "Rapid turnaround digital delivery",
              ],
              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 effects",
                "Professional sound design and mixing",
                "Animation and motion graphics",
              ],
              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: [
                "Student and staff workshops",
                "Technical skills development",
                "Creative storytelling techniques",
              ],
              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="portfolio" data-section="portfolio">
        <ProductCardThree
          title="Featured Projects"
          description="A selection of our finest work showcasing the breadth and quality of our media production capabilities for schools."
          tag="Portfolio"
          tagIcon={Camera}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "project-1",
              name: "Annual Gala 2024",
              price: "Premium Production",
              imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-with-women-standing-working-cafe_1157-28487.jpg",
              imageAlt: "Annual school gala professional video",
            },
            {
              id: "project-2",
              name: "Student Spotlight Series",
              price: "Content Series",
              imageSrc: "http://img.b2bpic.net/free-photo/teenage-boy-girl-recording-music-their-home-studio-with-guitar_23-2149666503.jpg",
              imageAlt: "Student testimonial video series",
            },
            {
              id: "project-3",
              name: "Campus Tour Documentary",
              price: "Documentary",
              imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-corporate-buildings-west-london-uk_181624-17106.jpg",
              imageAlt: "Comprehensive campus tour video",
            },
            {
              id: "project-4",
              name: "Graduation Ceremony",
              price: "Live Streamed",
              imageSrc: "http://img.b2bpic.net/free-photo/college-graduates-smiling-camera_23-2148232754.jpg",
              imageAlt: "Graduation ceremony live stream",
            },
            {
              id: "project-5",
              name: "Sports Highlights Reel",
              price: "Action Content",
              imageSrc: "http://img.b2bpic.net/free-photo/male-sportsperson-sitting-race-track-showing-mobile-phone-screen_23-2148162104.jpg",
              imageAlt: "Athletic competition highlights",
            },
            {
              id: "project-6",
              name: "Alumni Reunion Video",
              price: "Event Documentation",
              imageSrc: "http://img.b2bpic.net/free-photo/young-friends-hostel_23-2150518145.jpg",
              imageAlt: "Alumni reunion event coverage",
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Schools Say"
          description="Hear from our trusted partners about their experience working with MediaVision Academy."
          tag="Client Testimonials"
          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",
              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",
              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",
              imageAlt: "Social media marketing strategy planning",
            },
            {
              id: "testimonial-4",
              name: "Michael Thompson",
              title: "Dean of Student Life",
              date: "December 2023",
              quote: "The live streaming service during our virtual open house was flawless. Students and families felt genuinely connected despite the distance.",
              tag: "Reliability",
              avatarSrc: "http://img.b2bpic.net/free-photo/concentrated-young-businessman-walking-near-business-center_171337-19782.jpg",
              avatarAlt: "Michael Thompson headshot",
              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-with-books-lecture-hall_23-2147679197.jpg",
              imageAlt: "Student life event organization planning",
            },
            {
              id: "testimonial-5",
              name: "Patricia Gonzalez",
              title: "Principal",
              date: "November 2023",
              quote: "Their media training workshops have empowered our staff to create quality content in-house. A true investment in our institution's future.",
              tag: "Empowerment",
              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-woman-black-jacket-happy-short-haired-girl-dark-suit-widely-sincerely-smiles-isolated-background_197531-18508.jpg",
              avatarAlt: "Patricia Gonzalez headshot",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-desk_23-2148204490.jpg",
              imageAlt: "School principal office professional setting",
            },
            {
              id: "testimonial-6",
              name: "David Kim",
              title: "Admissions Director",
              date: "October 2023",
              quote: "The promotional videos they created dramatically improved our application rates. Their storytelling approach truly captures what makes our school special.",
              tag: "Impact",
              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-indian-businessman-standing-boardroom_231208-2564.jpg",
              avatarAlt: "David Kim headshot",
              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-correcting-grammar-mistakes_23-2150171039.jpg",
              imageAlt: "Admissions office student meeting counseling",
            },
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="By The Numbers"
          tag="Our Impact"
          tagAnimation="slide-up"
          useInvertedBackground={false}
          metricsAnimation="slide-up"
          metrics={[
            { id: "metric-1", value: "500+", description: "Hours of Video Content Produced" },
            { id: "metric-2", value: "10M+", description: "Total Views Across Platforms" },
            { id: "metric-3", value: "98%", description: "On-Time Project Delivery Rate" },
            { id: "metric-4", value: "12+", description: "Industry Awards Won" },
          ]}
        />
      </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>
  );
}