"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Users, Film } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Bee"
          button={{
            text: "Contact Us",
            href: "/contact"
          }}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Our Story"
          description={[
            "Founded in 2010, Bee Movie Studio emerged from a shared vision to create cinema that transcends boundaries. We started as a small collective of filmmakers passionate about storytelling, and have grown into an award-winning production house recognized internationally.",
            "Our journey has been defined by continuous innovation, collaborative partnerships, and an unwavering commitment to artistic excellence. Every film we produce reflects our dedication to crafting stories that resonate deeply with audiences worldwide."
          ]}
          buttons={[
            { text: "View Our Films", href: "/films" }
          ]}
          showBorder={true}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardEleven
          groups={[
            {
              id: "leadership",
              groupTitle: "Leadership",
              members: [
                {
                  id: "1",
                  title: "Marcus Chen",
                  subtitle: "Founder & Director",
                  detail: "marcus@beestudio.com",
                  imageSrc: "https://img.b2bpic.net/free-photo/smiley-man-with-camera_23-2148602762.jpg",
                  imageAlt: "Marcus Chen, Founder & Director"
                },
                {
                  id: "2",
                  title: "Sofia Rodriguez",
                  subtitle: "Executive Producer",
                  detail: "sofia@beestudio.com",
                  imageSrc: "https://img.b2bpic.net/free-photo/young-male-blogger-recording-station_1303-22012.jpg",
                  imageAlt: "Sofia Rodriguez, Executive Producer"
                }
              ]
            },
            {
              id: "creative",
              groupTitle: "Creative Team",
              members: [
                {
                  id: "3",
                  title: "James Park",
                  subtitle: "Director of Photography",
                  detail: "james@beestudio.com",
                  imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5364.jpg",
                  imageAlt: "James Park, Director of Photography"
                },
                {
                  id: "4",
                  title: "Emma Wilson",
                  subtitle: "Lead Editor",
                  detail: "emma@beestudio.com",
                  imageSrc: "https://img.b2bpic.net/free-photo/handsome-caucasian-man-is-sitting-armchair-hotel-room-holding-professional-photo-camera_8353-10904.jpg",
                  imageAlt: "Emma Wilson, Lead Editor"
                }
              ]
            }
          ]}
          title="Meet Our Team"
          description="Talented creators dedicated to bringing stories to life with passion and expertise."
          tag="Our People"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardSix
          features={[
            {
              id: 1,
              title: "Development & Scripting",
              description: "We start with a compelling story, developing scripts with depth, nuance, and cinematic potential. Our writers craft narratives that resonate with audiences.",
              imageSrc: "https://img.b2bpic.net/free-photo/crop-hand-writing-notebook-near-computer_23-2147863504.jpg",
              imageAlt: "Script development and planning phase"
            },
            {
              id: 2,
              title: "Pre-Production",
              description: "Meticulous planning ensures every shot counts. From storyboarding to location scouting, we prepare for excellence.",
              imageSrc: "https://img.b2bpic.net/free-photo/laptop-notebook-wooden-desk_181624-22372.jpg",
              imageAlt: "Pre-production planning and setup"
            },
            {
              id: 3,
              title: "Principal Photography",
              description: "Our cinematographers capture stunning visuals using state-of-the-art equipment and innovative techniques.",
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-is-filling-application-form_53876-47011.jpg",
              imageAlt: "Principal photography and filming"
            },
            {
              id: 4,
              title: "Post-Production & Release",
              description: "Expert editors, colorists, and sound designers refine every frame. We deliver cinema-quality results to audiences worldwide.",
              imageSrc: "https://img.b2bpic.net/free-photo/unrecognizable-man-writing-plan-journal-gadgets-lying-around-desk_1098-20132.jpg",
              imageAlt: "Post-production and final delivery"
            }
          ]}
          title="Our Production Process"
          description="From concept to screen, we follow a meticulous process to bring your vision to life with precision and creativity."
          tag="How We Work"
          tagIcon={Film}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "/about" },
                { label: "Films", href: "/films" }
              ]
            },
            {
              items: [
                { label: "Blog", href: "/blog" },
                { label: "Contact", href: "/contact" },
                { label: "Careers", href: "/careers" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Sitemap", href: "/sitemap" }
              ]
            }
          ]}
          logoText="Bee"
        />
      </div>
    </ThemeProvider>
  );
}