import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Eye, Target, Heart, ArrowRight, CheckCircle } from "lucide-react";

export default function About() {
  return (
    <div>
      {/* Hero */}
      <section className="hero-gradient py-24">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <div className="inline-block bg-white/10 text-white text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-5">
            About Us
          </div>
          <h1 className="text-5xl md:text-6xl font-black text-white mb-5">Our Story</h1>
          <p className="text-white/80 text-xl max-w-2xl mx-auto">A proudly South African, 100% Black owned IT company on a mission to digitally transform Africa.</p>
        </div>
      </section>

      {/* Who We Are */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <div>
              <div className="inline-block bg-blue-100 text-[#0052CC] text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-5">Who We Are</div>
              <h2 className="text-4xl font-black text-[#001F5B] mb-6">People. Technology.<br /><span className="text-gradient">Business.</span></h2>
              <p className="text-gray-600 leading-relaxed mb-4">
                Shenzhen IT Group is a privately owned, 100% Black owned IT Services & Support business company formed in 2024. We believe that bringing together people, technology, and business is the way forward.
              </p>
              <p className="text-gray-600 leading-relaxed mb-4">
                Every day we power sustainable progress for our clients and partners, the wider community and ourselves. Through our unique approach with deep technology expertise and industry knowledge, Shenzhen IT works with clients across different business sectors.
              </p>
              <p className="text-gray-600 leading-relaxed mb-8">
                The general purpose of Shenzhen IT is to develop and promote advanced information technologies for multi-user operation — with the main focus of delivering high quality internet in South Africa.
              </p>
              <div className="grid grid-cols-2 gap-3">
                {[
                  "High-speed Internet",
                  "Managed IT Services",
                  "Cloud Services",
                  "Network Installation",
                  "IT Hardware",
                  "Web & Mobile Apps",
                  "IT Security",
                  "Consulting & Integration"
                ].map((item) => (
                  <div key={item} className="flex items-center gap-2 text-sm text-gray-700">
                    <CheckCircle size={15} className="text-[#0052CC] shrink-0" />
                    {item}
                  </div>
                ))}
              </div>
            </div>
            <div className="space-y-4">
              <div className="rounded-2xl overflow-hidden bg-gradient-to-br from-[#001F5B] to-[#0052CC] p-8 text-white">
                <div className="text-5xl font-black mb-2">2024</div>
                <div className="font-bold text-xl mb-1">Founded</div>
                <div className="text-white/70 text-sm">Building the digital backbone of South Africa</div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="rounded-2xl bg-blue-50 border border-blue-100 p-6 text-center">
                  <div className="text-3xl font-black text-[#0052CC] mb-1">100%</div>
                  <div className="text-sm text-gray-600 font-medium">Black Owned</div>
                </div>
                <div className="rounded-2xl bg-blue-50 border border-blue-100 p-6 text-center">
                  <div className="text-3xl font-black text-[#0052CC] mb-1">SA</div>
                  <div className="text-sm text-gray-600 font-medium">Proudly South African</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Vision & Mission */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4">
          <div className="text-center mb-14">
            <h2 className="text-4xl font-black text-[#001F5B] mb-4">Vision & Mission</h2>
            <p className="text-gray-500 text-lg max-w-xl mx-auto">The principles that guide everything we do at Shenzhen IT Group.</p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="p-8 rounded-3xl hero-gradient text-white relative overflow-hidden">
              <div className="absolute top-4 right-4 opacity-10">
                <Eye size={80} />
              </div>
              <div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center mb-6">
                <Eye size={24} />
              </div>
              <h3 className="text-2xl font-black mb-5">Our Vision</h3>
              <p className="text-white/90 leading-relaxed text-sm">
                "To be the catalyst of digital transformation, pioneering innovative solutions that redefine industries and empower businesses to thrive in a rapidly evolving technological landscape. We envision a future where technology is not just a tool, but a transformative force for positive change, enabling organizations to unlock their full potential and create lasting value for society."
              </p>
            </div>
            <div className="p-8 rounded-3xl bg-white border border-blue-100 relative overflow-hidden">
              <div className="absolute top-4 right-4 opacity-5">
                <Target size={80} className="text-[#0052CC]" />
              </div>
              <div className="w-12 h-12 bg-gradient-to-br from-[#0052CC] to-[#00B4D8] rounded-2xl flex items-center justify-center mb-6">
                <Target size={24} className="text-white" />
              </div>
              <h3 className="text-2xl font-black text-[#001F5B] mb-5">Our Mission</h3>
              <p className="text-gray-600 leading-relaxed text-sm mb-4">
                At Shenzhen IT Group, our mission is to empower businesses with transformative technology solutions that drive growth, efficiency, and sustainability.
              </p>
              <p className="text-gray-600 leading-relaxed text-sm">
                Through our relentless pursuit of innovation, exceptional customer service, and commitment to excellence, we aim to be the trusted partner of choice for organizations seeking to harness the power of technology to achieve their strategic objectives. By understanding and anticipating the evolving needs of our clients, we deliver tailored, high-quality IT services and solutions that enable them to thrive in a digital-first world.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Logo Values */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <div className="w-20 h-20 hero-gradient rounded-3xl flex items-center justify-center mx-auto mb-6">
              <span className="text-white font-black text-4xl">S</span>
            </div>
            <h2 className="text-4xl font-black text-[#001F5B] mb-5">Our Brand Identity</h2>
            <p className="text-gray-600 leading-relaxed text-lg mb-8">
              The logo serves as the visual representation of Shenzhen IT Group, conveying the company's values and commitment to IT excellence. The choice of colors and design elements aims to instill confidence and trust in clients, reflecting the company's professionalism and reliability.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <div className="px-5 py-3 rounded-xl bg-[#001F5B] text-white text-sm font-semibold">Trust</div>
              <div className="px-5 py-3 rounded-xl bg-[#0052CC] text-white text-sm font-semibold">Innovation</div>
              <div className="px-5 py-3 rounded-xl bg-[#00B4D8] text-white text-sm font-semibold">Reliability</div>
              <div className="px-5 py-3 rounded-xl border-2 border-[#001F5B] text-[#001F5B] text-sm font-semibold">Excellence</div>
            </div>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="py-20 bg-gradient-to-br from-blue-50 to-white">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <div className="inline-block bg-blue-100 text-[#0052CC] text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-5">Professional Team</div>
          <h2 className="text-4xl font-black text-[#001F5B] mb-5">Legendary Support</h2>
          <p className="text-gray-600 text-lg max-w-3xl mx-auto leading-relaxed mb-12">
            We have a variety of members in our team who specialize in IT Technical Support, installation and cabling, software development, and Windows Azure. With these skills and expertise, we position ourselves not only to make our mark in the IT industry but to offer and deliver superior service to our clients.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {[
              { title: "IT Technical Support", desc: "Dedicated technicians for all your hardware, software and network needs.", icon: "🛠️" },
              { title: "Installation & Cabling", desc: "Professional fiber and network installation teams across South Africa.", icon: "🔧" },
              { title: "Software Development", desc: "Engineers delivering custom web, mobile, and enterprise solutions.", icon: "💻" },
            ].map((t) => (
              <div key={t.title} className="p-7 bg-white rounded-2xl border border-blue-100 card-hover text-left">
                <div className="text-3xl mb-4">{t.icon}</div>
                <h3 className="font-bold text-[#001F5B] text-lg mb-2">{t.title}</h3>
                <p className="text-gray-500 text-sm leading-relaxed">{t.desc}</p>
              </div>
            ))}
          </div>
          <div className="mt-12">
            <Link to={createPageUrl("Contact")} className="btn-primary text-base">
              Work With Us <ArrowRight size={16} className="inline ml-1" />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}