import React, { useEffect } from "react";
import { motion } from "framer-motion";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { Button } from "@/components/ui/button";
import { CheckCircle, Award, Users, Shield, Clock, Globe, Zap } from "lucide-react";
import { Link } from "react-router-dom";
import SEOHead from "@/components/SEOHead";
import { Helmet } from "react-helmet";
import CinematicBackdrop from "@/components/CinematicBackdrop";
import GoogleReviewsSection from "@/components/GoogleReviewsSection";

const AboutUs = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  const aboutPageSchema = {
    "@context": "https://schema.org",
    "@type": "AboutPage",
    "name": "About Fast Track Fix Tech Solutions - Leading IT Support Company",
    "description": "Learn about Fast Track Fix Tech Solutions, a trusted IT services company founded in 2018. We provide expert computer repair, cybersecurity, cloud solutions, and 24/7 technical support for businesses and individuals worldwide.",
    "url": "https://www.ftfxtechsolutions.com/about-us",
    "mainEntity": {
      "@type": "Organization",
      "name": "Fast Track Fix Tech Solutions",
      "foundingDate": "2018",
      "founder": {
        "@type": "Person",
        "name": "FTFX Founder",
        "jobTitle": "CEO & Founder"
      },
      "numberOfEmployees": {
        "@type": "QuantitativeValue",
        "minValue": 10,
        "maxValue": 50
      },
      "award": [
        "Best IT Support Provider 2024",
        "Top Cybersecurity Solutions Provider",
        "Excellence in Customer Service Award"
      ]
    }
  };

  const teamExpertiseSchema = {
    "@context": "https://schema.org",
    "@type": "ItemList",
    "name": "FTFX Tech Solutions Team Certifications",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@type": "EducationalOccupationalCredential",
          "name": "Microsoft Certified Professionals",
          "credentialCategory": "Certificate"
        }
      },
      {
        "@type": "ListItem",
        "position": 2,
        "item": {
          "@type": "EducationalOccupationalCredential",
          "name": "CompTIA Security+ Certified",
          "credentialCategory": "Certificate"
        }
      },
      {
        "@type": "ListItem",
        "position": 3,
        "item": {
          "@type": "EducationalOccupationalCredential",
          "name": "AWS Certified Solutions Architects",
          "credentialCategory": "Certificate"
        }
      }
    ]
  };

  return (
    <div className="min-h-screen bg-background text-foreground relative">
      <CinematicBackdrop />
      <SEOHead
        title="About Us | IT Support Company Gurgaon | FTFX"
        description="Trusted IT services provider since 2018. Computer repair, cybersecurity, cloud & M365 support. 24/7 technical assistance across India."
        keywords="about FTFX tech solutions, IT support company, computer repair experts, cybersecurity specialists, cloud solutions provider"
        canonicalUrl="/about-us"
        ogType="website"
      />
      
      <Helmet>
        <script type="application/ld+json">{JSON.stringify(aboutPageSchema)}</script>
        <script type="application/ld+json">{JSON.stringify(teamExpertiseSchema)}</script>
      </Helmet>

      <Navbar />

      <main className="relative z-10" itemScope itemType="https://schema.org/AboutPage">
        {/* Hero Section */}
        <section className="pt-32 pb-20 px-4" aria-label="About Us Introduction">
          <div className="container mx-auto max-w-6xl">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="text-center"
            >
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 speakable">
                About <span className="bg-gradient-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent">Fast Track Fix</span> Tech Solutions
              </h1>
              <p className="text-lg md:text-xl text-muted-foreground mb-12 max-w-3xl mx-auto speakable" itemProp="description">
                Founded in 2018, Fast Track Fix Tech Solutions is a leading IT services provider dedicated to making technology work for you. 
                We deliver expert computer repair, cybersecurity solutions, cloud services, and 24/7 technical support to businesses and individuals worldwide.
              </p>
              
              {/* Stats */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
                className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 max-w-4xl mx-auto"
              >
                <StatCard icon={<Clock className="w-6 h-6" />} value="24/7" label="Support Available" delay={0} />
                <StatCard icon={<Users className="w-6 h-6" />} value="10,000+" label="Clients Served" delay={0.1} />
                <StatCard icon={<Globe className="w-6 h-6" />} value="50+" label="Countries Reached" delay={0.2} />
                <StatCard icon={<Award className="w-6 h-6" />} value="6+" label="Years Experience" delay={0.3} />
              </motion.div>
            </motion.div>
          </div>
        </section>

        {/* Our Story Section */}
        <section className="py-20 px-4">
          <div className="container mx-auto max-w-6xl">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
              >
                <h2 className="text-3xl md:text-4xl font-bold mb-6 text-foreground">
                  Our <span className="text-primary">Story</span>
                </h2>
                <div className="space-y-4 text-muted-foreground">
                  <p>
                    FTFX Tech Solutions was founded in 2018 with a simple yet powerful vision: to provide technology solutions that actually solve problems for real people and businesses.
                  </p>
                  <p>
                    After years of working in corporate IT environments, our founder recognized a significant gap in the market. Most tech support services were either too complicated, too expensive, or simply not focused on what clients actually needed.
                  </p>
                  <p>
                    We built FTFX Tech Solutions to bridge that gap – offering accessible, human-centered technology support that prioritizes your needs, explains complex concepts in simple language, and delivers sustainable solutions rather than quick fixes.
                  </p>
                </div>
              </motion.div>
              
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
                className="relative"
              >
                <div className="bg-white/5 backdrop-blur-xl border border-white/10 p-3 rounded-2xl shadow-[0_8px_32px_hsla(0,0%,0%,0.4)]">
                  <img 
                    src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=1800"
                    alt="FTFX Team" 
                    className="rounded-xl w-full h-auto object-cover aspect-video"
                    loading="lazy"
                  />
                </div>
                <div className="absolute -bottom-5 -right-5 bg-white/5 backdrop-blur-xl border border-white/10 p-4 rounded-xl shadow-[0_8px_32px_hsla(0,0%,0%,0.4)] max-w-[220px]">
                  <p className="text-sm font-medium text-foreground">
                    "Technology made simple, support made human."
                  </p>
                  <p className="text-xs text-muted-foreground mt-2">— Our guiding principle</p>
                </div>
              </motion.div>
            </div>
          </div>
        </section>

        {/* Mission & Values Section */}
        <section className="py-20 px-4">
          <div className="container mx-auto max-w-6xl">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
                Our Mission & <span className="text-primary">Values</span>
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                We're guided by a set of core principles that inform everything we do.
              </p>
            </motion.div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {[
                { title: "Client-First Approach", description: "We prioritize your needs and goals above all else, designing solutions that work for your specific situation." },
                { title: "Clear Communication", description: "We explain technical concepts in plain language and keep you informed throughout every process." },
                { title: "Continuous Learning", description: "Technology evolves rapidly, and so do we. We're committed to staying ahead of the curve." },
                { title: "Ethical Practices", description: "We recommend only what you need, never upselling unnecessary services or products." },
                { title: "Long-term Solutions", description: "We focus on sustainable fixes and proactive measures, not just temporary patches." },
                { title: "Accessibility", description: "We believe quality tech support should be available to everyone, regardless of technical background." }
              ].map((value, index) => (
                <ValueCard key={index} title={value.title} description={value.description} delay={index * 0.1} />
              ))}
            </div>
          </div>
        </section>

        {/* Why Choose Us Section */}
        <section className="py-20 px-4">
          <div className="container mx-auto max-w-6xl">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
              >
                <h2 className="text-3xl md:text-4xl font-bold mb-8 text-foreground">
                  Why Choose <span className="text-primary">FTFX</span>?
                </h2>
                
                <div className="space-y-4">
                  {[
                    { title: "Expert Team", description: "Our specialists have extensive experience across all aspects of modern technology." },
                    { title: "Personalized Solutions", description: "We don't offer one-size-fits-all packages. Every solution is tailored to your specific needs." },
                    { title: "Transparent Pricing", description: "No hidden fees or unexpected costs. We're upfront about what you'll pay." },
                    { title: "Ongoing Support", description: "Our relationship doesn't end after implementation. We're here for you long-term." },
                    { title: "Proactive Approach", description: "We identify and address potential issues before they become problems." }
                  ].map((benefit, index) => (
                    <BenefitItem key={index} title={benefit.title} description={benefit.description} delay={index * 0.1} />
                  ))}
                </div>
              </motion.div>
              
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
                className="grid grid-cols-2 gap-4"
              >
                {[
                  "https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&q=80&w=1800",
                  "https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&q=80&w=1800",
                  "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80&w=1800",
                  "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=1800"
                ].map((src, index) => (
                  <div key={index} className={`bg-white/5 backdrop-blur-xl border border-white/10 p-2 rounded-xl shadow-[0_8px_32px_hsla(0,0%,0%,0.4)] ${index % 2 === 1 ? 'mt-8' : ''}`}>
                    <img 
                      src={src}
                      alt={`Team image ${index + 1}`}
                      className="rounded-lg w-full h-64 sm:h-72 object-cover"
                      loading="lazy"
                    />
                  </div>
                ))}
              </motion.div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 px-4">
          <div className="container mx-auto max-w-4xl">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="bg-gradient-to-br from-primary/20 via-white/5 to-accent/10 backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12 text-center shadow-[0_0_60px_hsla(var(--primary),0.15)]"
            >
              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
                Ready to Work With Us?
              </h2>
              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
                Contact us today to discuss how we can help with your technology challenges.
              </p>
              <Link to="/contact-us">
                <Button className="px-8 py-6 text-lg font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300 hover:shadow-[0_0_30px_hsla(var(--primary),0.4)]">
                  Get in Touch
                </Button>
              </Link>
            </motion.div>
          </div>
        </section>

        <GoogleReviewsSection />
      </main>

      <Footer />
    </div>
  );
};

interface ValueCardProps {
  title: string;
  description: string;
  delay: number;
}

const ValueCard = ({ title, description, delay }: ValueCardProps) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.6, delay }}
    className="bg-white/5 backdrop-blur-xl border border-white/10 p-6 rounded-2xl shadow-[0_8px_32px_hsla(0,0%,0%,0.4)] hover:bg-white/[0.08] hover:border-white/20 hover:-translate-y-1 transition-all duration-300 group"
  >
    <h3 className="text-xl font-bold mb-3 text-foreground group-hover:text-primary transition-colors">{title}</h3>
    <p className="text-muted-foreground">{description}</p>
  </motion.div>
);

interface BenefitItemProps {
  title: string;
  description: string;
  delay: number;
}

const BenefitItem = ({ title, description, delay }: BenefitItemProps) => (
  <motion.div
    initial={{ opacity: 0, x: -20 }}
    whileInView={{ opacity: 1, x: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.6, delay }}
    className="flex gap-4 p-4 bg-white/5 backdrop-blur-xl border border-white/10 rounded-xl hover:bg-white/[0.08] transition-all duration-300"
  >
    <div className="flex-shrink-0 mt-1">
      <div className="w-8 h-8 bg-primary/20 rounded-lg flex items-center justify-center">
        <CheckCircle className="h-5 w-5 text-primary" />
      </div>
    </div>
    <div>
      <h3 className="text-lg font-semibold mb-1 text-foreground">{title}</h3>
      <p className="text-muted-foreground text-sm">{description}</p>
    </div>
  </motion.div>
);

interface StatCardProps {
  icon: React.ReactNode;
  value: string;
  label: string;
  delay: number;
}

const StatCard = ({ icon, value, label, delay }: StatCardProps) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.6, delay }}
    className="bg-white/5 backdrop-blur-xl border border-white/10 p-4 md:p-6 rounded-2xl text-center hover:bg-white/[0.08] hover:border-white/20 transition-all duration-300"
  >
    <div className="flex justify-center mb-2 text-primary">{icon}</div>
    <div className="text-2xl md:text-3xl font-bold text-foreground">{value}</div>
    <div className="text-sm text-muted-foreground">{label}</div>
  </motion.div>
);

export default AboutUs;