"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TeamCardSix from "@/components/sections/team/TeamCardSix";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import { Users, Zap, 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 AboutPage() {
  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="about" data-section="about">
        <MetricSplitMediaAbout
          title="Our Mission & Values"
          description="MediaVision Academy was founded on the principle that every educational institution has a unique story worth telling. We believe in the power of visual storytelling to inspire, connect, and elevate school communities. Our commitment to excellence, innovation, and partnership drives everything we do. We're not just content creators—we're storytellers dedicated to amplifying your school's voice and vision to the world."
          tag="About Us"
          tagIcon={Award}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/press-reporter-fallowing-leads-case_23-2149579746.jpg?_wi=2"
          imageAlt="Professional media production team collaboration"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          metrics={[
            { value: "15+", title: "Years in Media Production" },
            { value: "150+", title: "Successful Projects" },
            { value: "50+", title: "School Partners" },
            { value: "95%", title: "Client Retention" },
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSix
          title="Meet Our Team"
          description="A collective of talented creatives and technical experts dedicated to bringing your vision to life. Each member brings specialized expertise and a passion for educational storytelling."
          tag="Creative Professionals"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          members={[
            {
              id: "member-1",
              name: "Jonathan Price",
              role: "Executive Director & Lead Producer",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman-office_23-2148452664.jpg",
              imageAlt: "Jonathan Price executive director",
            },
            {
              id: "member-2",
              name: "Alexandra Foster",
              role: "Creative Director",
              imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-happy-girl-with-brown-hair_132075-12334.jpg",
              imageAlt: "Alexandra Foster creative director",
            },
            {
              id: "member-3",
              name: "Marcus Webb",
              role: "Senior Cinematographer",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-cameraman-doing-his-job_23-2149037887.jpg",
              imageAlt: "Marcus Webb cinematographer",
            },
          ]}
        />
      </div>

      <div id="values" data-section="values">
        <FeatureCardTwentySeven
          title="Our Core Values"
          description="These principles guide every project and interaction, ensuring we deliver excellence that extends beyond production."
          tag="What Drives Us"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          features={[
            {
              id: "value-excellence",
              title: "Excellence",
              descriptions: [
                "We maintain the highest standards of quality in every deliverable",
                "Continuous improvement and innovation in our craft",
                "Attention to detail that transforms good work into exceptional work",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/sport-news-with-professional-recording-side-view_23-2149900289.jpg?_wi=2",
              imageAlt: "Professional excellence in production",
            },
            {
              id: "value-partnership",
              title: "Partnership",
              descriptions: [
                "We work collaboratively with our clients as true partners",
                "Your success is our success",
                "Open communication and transparent processes throughout every engagement",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/colleagues-doing-team-work-project_23-2149361573.jpg?_wi=2",
              imageAlt: "Collaborative team partnership",
            },
            {
              id: "value-innovation",
              title: "Innovation",
              descriptions: [
                "We stay at the forefront of media technology and storytelling techniques",
                "Creative problem-solving for unique institutional challenges",
                "Bringing fresh perspectives to educational narratives",
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-talking-radio-station_23-2148802327.jpg?_wi=2",
              imageAlt: "Innovative media solutions",
            },
          ]}
        />
      </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>
  );
}