"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import Link from "next/link";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Features", id: "/features" },
    { name: "Pricing", id: "/pricing" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="SponsorDesk"
          bottomLeftText="HR & Legal Solutions"
          bottomRightText="support@sponsordesk.com"
        />
      </div>

      <div id="about-hero" data-section="about-hero" className="mx-auto px-4 md:px-6 py-20">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-5xl md:text-6xl font-bold mb-6 text-foreground">
            Our Mission & Vision
          </h1>
          <p className="text-xl text-foreground/70">
            SponsorDesk was founded to solve the complexity of employee governmental procedures and documentation management.
          </p>
        </div>
      </div>

      <div id="about-mission" data-section="about-mission" className="mx-auto px-4 md:px-6 py-20 bg-card">
        <div className="max-w-4xl mx-auto">
          <InlineImageSplitTextAbout
            heading={[
              { type: "text", content: "Simplifying" },
              {
                type: "image",
                src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aev8H9mL7eFI9KHWlmK4WotoLx/modern-flat-design-icon-representing-a-d-1772966293950-8666e013.png",
                alt: "Dashboard",
              },
              { type: "text", content: "HR Complexity" },
            ]}
            buttons={[
              { text: "Learn More", href: "/" },
              { text: "Contact Us", href: "/contact" },
            ]}
            buttonAnimation="slide-up"
            useInvertedBackground={true}
          />
        </div>
      </div>

      <div id="about-story" data-section="about-story" className="mx-auto px-4 md:px-6 py-20">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-4xl font-bold mb-8 text-foreground">Our Story</h2>
          <div className="space-y-6 text-lg text-foreground/80">
            <p>
              Founded in 2022, SponsorDesk emerged from a simple observation: HR teams across the Middle East were spending countless hours managing employee visas, residency permits, and sponsorship transfers manually.
            </p>
            <p>
              Our founders, a team of HR professionals and software engineers, recognized the opportunity to build a platform that could automate these processes, reduce errors, and give HR managers back their time.
            </p>
            <p>
              Today, SponsorDesk is trusted by over 500 companies managing more than 50,000 employees and processing 200,000+ documents annually. Our mission remains unchanged: to make employee document management effortless and secure.
            </p>
            <p>
              We believe that by eliminating the administrative burden of governmental procedures, companies can focus on what really matters—their people and growth.
            </p>
          </div>
        </div>
      </div>

      <div id="about-team" data-section="about-team" className="mx-auto px-4 md:px-6 py-20 bg-card">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-4xl font-bold mb-12 text-center text-foreground">Our Team</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                name: "Ahmed Al-Mansouri",
                role: "Founder & CEO",
                bio: "Former HR Director at Gulf Trading Co. with 15+ years of experience in employee management and governmental procedures.",
              },
              {
                name: "Layla Hassan",
                role: "Co-Founder & Chief Product Officer",
                bio: "Sponsorship expert with deep knowledge of Middle East visa systems. Leads product strategy and customer success.",
              },
              {
                name: "Mohammed Saeed",
                role: "Chief Technology Officer",
                bio: "Full-stack engineer passionate about building secure, scalable solutions for enterprise HR platforms.",
              },
            ].map((member, index) => (
              <div key={index} className="rounded-lg bg-background p-8 text-center">
                <div className="w-24 h-24 rounded-full bg-primary-cta/20 mx-auto mb-4"></div>
                <h3 className="text-xl font-bold text-foreground mb-2">{member.name}</h3>
                <p className="text-primary-cta font-semibold mb-4">{member.role}</p>
                <p className="text-foreground/70">{member.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div id="about-values" data-section="about-values" className="mx-auto px-4 md:px-6 py-20">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-4xl font-bold mb-12 text-center text-foreground">Our Values</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="p-8 rounded-lg border border-accent">
              <h3 className="text-2xl font-bold text-primary-cta mb-4">Security First</h3>
              <p className="text-foreground/70">
                Your data is sacred. We employ enterprise-grade encryption, regular security audits, and comply with all regional data protection regulations.
              </p>
            </div>
            <div className="p-8 rounded-lg border border-accent">
              <h3 className="text-2xl font-bold text-primary-cta mb-4">Customer Obsessed</h3>
              <p className="text-foreground/70">
                We listen deeply to our customers and iterate continuously to solve their real problems. Your success is our success.
              </p>
            </div>
            <div className="p-8 rounded-lg border border-accent">
              <h3 className="text-2xl font-bold text-primary-cta mb-4">Reliability</h3>
              <p className="text-foreground/70">
                99.9% uptime guarantee. We ensure your critical HR operations never suffer from technical issues or downtime.
              </p>
            </div>
            <div className="p-8 rounded-lg border border-accent">
              <h3 className="text-2xl font-bold text-primary-cta mb-4">Innovation</h3>
              <p className="text-foreground/70">
                We constantly evolve to incorporate the latest technologies and best practices in HR and compliance management.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div id="about-cta" data-section="about-cta" className="mx-auto px-4 md:px-6 py-20 bg-primary-cta">
        <div className="max-w-2xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-6 text-primary-cta-text">
            Join Hundreds of Companies
          </h2>
          <p className="text-lg text-primary-cta-text/90 mb-8">
            Transform your HR operations with SponsorDesk. Start your free trial today.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-primary-cta-text hover:bg-primary-cta-text/90 text-primary-cta font-semibold px-8 py-3 rounded-full transition-colors">
              Start Free Trial
            </button>
            <Link
              href="/contact"
              className="border-2 border-primary-cta-text hover:bg-primary-cta-text/10 text-primary-cta-text font-semibold px-8 py-3 rounded-full transition-colors inline-block text-center"
            >
              Schedule Demo
            </Link>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6 py-16 bg-card border-t border-accent">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
            <div>
              <h3 className="font-bold text-foreground mb-6">Product</h3>
              <ul className="space-y-3">
                <li>
                  <Link href="/" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Features
                  </Link>
                </li>
                <li>
                  <Link href="/pricing" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Pricing
                  </Link>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Security
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold text-foreground mb-6">Company</h3>
              <ul className="space-y-3">
                <li>
                  <Link href="/about" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    About
                  </Link>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Blog
                  </a>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Careers
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-bold text-foreground mb-6">Resources</h3>
              <ul className="space-y-3">
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Documentation
                  </a>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Help Center
                  </a>
                </li>
                <li>
                  <a href="#" className="text-foreground/70 hover:text-primary-cta transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t border-accent pt-8">
            <p className="text-foreground/60 text-center">
              © 2025 SponsorDesk. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}