"use client";

import { ThemeProvider } from "@/components/provider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';

export default function AboutUs() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "About Us", id: "/about-us" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <NavbarStyleFullscreen navItems={navItems} brandName="Webild" />

      <main>
        <div id="hero" data-section="hero">
          <HeroOverlay
            title="About Our Company"
            description="We are dedicated to innovation, quality, and making a positive impact on the world. Discover our story, values, and the team driving our success."
            imageSrc="https://picsum.photos/seed/aboutushero/1920/1080"
            imageAlt="Company building with modern architecture"
            buttons={[{ text: "Learn More", href: "#company-overview" }]} 
          />
        </div>

        <div id="company-overview" data-section="company-overview">
          <FeatureCardThree
            title="Our Story and Impact"
            description="Our journey began with a clear vision to revolutionize the industry. Over the years, we've grown through innovation, client collaboration, and an unwavering commitment to excellence."
            features={[
              {
                title: "A Legacy of Excellence",                description: "Our journey began with a vision to revolutionize the industry through cutting-edge solutions and unwavering commitment to our clients. Over the years, we've grown, adapted, and consistently delivered results that exceed expectations, building a reputation for reliability and forward-thinking innovation.",                imageSrc: "https://picsum.photos/seed/companyjourney/400/300"
              },
              {
                title: "Key Milestones & Achievements",                description: "• 15+ Years in Business\n• 500+ Satisfied Clients Worldwide\n• 99% Customer Retention Rate\n• 30+ Industry Awards & Recognitions",                imageSrc: "https://picsum.photos/seed/statsachievements/400/300"
              }
            ]}
            gridVariant="two-columns-alternating-heights"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>

        <div id="mission-vision" data-section="mission-vision">
          <FeatureCardThree
            title="Our Guiding Principles"
            description="Our mission and vision define who we are and where we are headed, inspiring every action we take."
            features={[
              {
                title: "Our Mission",                description: "To empower businesses with transformative technology solutions that drive growth, efficiency, and sustainable success, while fostering a culture of innovation and collaboration.",                imageSrc: "https://picsum.photos/seed/mission/400/300"
              },
              {
                title: "Our Vision",                description: "To be the global leader in digital transformation, recognized for our pioneering spirit, ethical practices, and unwavering dedication to client success and community enrichment.",                imageSrc: "https://picsum.photos/seed/vision/400/300"
              }
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
          />
        </div>

        <div id="core-values" data-section="core-values">
          <SocialProofOne
            title="Our Core Values"
            description="The pillars that define our culture, guide our decisions, and drive our success."
            names={["Integrity", "Innovation", "Excellence", "Collaboration", "Customer Focus", "Accountability", "Sustainability", "Respect", "Passion", "Agility"]}
            showCard={true}
            animationType="opacity"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>

        <div id="compliance-credentials" data-section="compliance-credentials">
          <FeatureCardThree
            title="Trust and Transparency"
            description="Adhering to the highest standards of industry compliance and holding essential certifications to ensure trust and reliability."
            features={[
              {
                title: "ISO 9001 Certified",                description: "Ensuring top-tier quality management systems and operational efficiency.",                imageSrc: "https://picsum.photos/seed/iso9001/400/300"
              },
              {
                title: "GDPR Compliant",                description: "Protecting user data with rigorous privacy standards and secure data handling.",                imageSrc: "https://picsum.photos/seed/gdpr/400/300"
              },
              {
                title: "SOC 2 Type II Audited",                description: "Maintaining high standards for security, availability, and processing integrity.",                imageSrc: "https://picsum.photos/seed/soc2/400/300"
              },
              {
                title: "Certified Ethical AI",                description: "Committed to responsible, fair, and transparent artificial intelligence development.",                imageSrc: "https://picsum.photos/seed/ethicalai/400/300"
              },
              {
                title: "Data Security Standard",                description: "Robust measures in place for protecting all sensitive information and assets.",                imageSrc: "https://picsum.photos/seed/datastandard/400/300"
              }
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
          />
        </div>

        <div id="leadership" data-section="leadership">
          <TeamCardTwo
            title="Meet Our Leadership"
            description="Our leadership team brings together decades of experience, guiding our company with strategic vision and steadfast commitment."
            members={[
              {
                id: "john-doe",                name: "John Doe",                role: "CEO & Founder",                description: "John is a visionary leader with over 20 years of experience in tech innovation and strategic business development, driving our company's pioneering spirit.",                imageSrc: "https://picsum.photos/seed/john/400/400"
              },
              {
                id: "jane-smith",                name: "Jane Smith",                role: "Chief Operating Officer",                description: "Jane brings extensive operational excellence and a passion for scalable growth to our team, ensuring seamless execution and outstanding results.",                imageSrc: "https://picsum.photos/seed/jane/400/400"
              }
            ]}
            gridVariant="two-columns-alternating-heights"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>

        <div id="health-safety-ethics" data-section="health-safety-ethics">
          <FeatureCardThree
            title="Our Commitment to Well-being"
            description="Fostering a responsible, safe, and ethical environment for our employees, partners, and the communities we serve."
            features={[
              {
                title: "Workplace Safety",                description: "Prioritizing the physical and mental well-being of all employees through comprehensive safety protocols.",                imageSrc: "https://picsum.photos/seed/safetyfirst/400/300"
              },
              {
                title: "Ethical Conduct",                description: "Upholding the highest standards of integrity, transparency, and fair dealings in all our operations.",                imageSrc: "https://picsum.photos/seed/ethicalconduct/400/300"
              },
              {
                title: "Environmental Responsibility",                description: "Implementing sustainable practices to minimize our ecological footprint and protect the planet.",                imageSrc: "https://picsum.photos/seed/environmental/400/300"
              },
              {
                title: "Data Privacy",                description: "Rigorous protection of all personal and corporate data, ensuring confidentiality and security.",                imageSrc: "https://picsum.photos/seed/dataprivacysecured/400/300"
              },
              {
                title: "Community Engagement",                description: "Actively contributing to the betterment of our local and global communities through initiatives and partnerships.",                imageSrc: "https://picsum.photos/seed/communitylove/400/300"
              }
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
          />
        </div>
      </main>
    </ThemeProvider>
  );
}
