import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import {
  Target, Eye, Heart, Shield, Award, Users,
  ShoppingBag, BookOpen, GraduationCap, Briefcase, MapPin,
  ArrowRight, CheckCircle, Globe, TrendingUp
} from "lucide-react";

export const metadata: Metadata = { title: "About Us" };

const values = [
  { icon: Target, title: "Our Mission", text: "To empower Malaysians with access to quality products, career opportunities, and world-class education — all in one platform." },
  { icon: Eye, title: "Our Vision", text: "To become Southeast Asia's most trusted multi-service platform for individuals and businesses alike." },
  { icon: Heart, title: "Our Values", text: "Integrity, innovation, and a deep commitment to our community's growth and well-being." },
];

const services = [
  { icon: ShoppingBag, title: "Online Shop", description: "A curated marketplace offering quality electronics, fashion, and everyday essentials with fast delivery across Malaysia.", href: "/shop", color: "bg-blue-50 text-blue-600 border-blue-100" },
  { icon: BookOpen, title: "Journals", description: "A subscription-based knowledge platform. Read expert insights, write your own articles, and grow within a community of professionals.", href: "/journal", color: "bg-emerald-50 text-emerald-600 border-emerald-100" },
  { icon: GraduationCap, title: "Scholarships", description: "Discover 500+ international scholarship opportunities from local grants to fully-funded programmes in 40+ countries.", href: "/scholarships", color: "bg-purple-50 text-purple-600 border-purple-100" },
  { icon: Briefcase, title: "Jobs Portal", description: "Live job listings updated every 6 hours via API. Apply for positions, manage your resume, and track applications.", href: "/jobs", color: "bg-amber-50 text-amber-600 border-amber-100" },
  { icon: MapPin, title: "Tours & Travel", description: "Handcrafted travel packages — from local getaways in Malaysia to international adventures across Asia, Europe, and beyond.", href: "/tours", color: "bg-rose-50 text-rose-600 border-rose-100" },
];

const stats = [
  { value: "12,000+", label: "Active Members", icon: Users },
  { value: "2,400+", label: "Job Listings", icon: Briefcase },
  { value: "500+", label: "Scholarships", icon: GraduationCap },
  { value: "45+", label: "Countries Reached", icon: Globe },
];

const milestones = [
  { year: "2021", event: "KC Systems was founded in Kuala Lumpur with a vision to unify essential services." },
  { year: "2022", event: "Launched our e-commerce platform with 200+ curated products." },
  { year: "2023", event: "Introduced the Jobs Portal — 500+ applications processed in the first month." },
  { year: "2024", event: "Expanded scholarship listings to 40+ countries worldwide." },
  { year: "2025", event: "Reached 12,000 active members. Launched Tours & Travel module." },
];

const team = [
  { name: "Ahmad Razif", role: "Founder & CEO", image: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&q=80" },
  { name: "Sarah Lee", role: "Head of Product", image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&q=80" },
  { name: "David Tan", role: "Lead Engineer", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80" },
  { name: "Nurul Aina", role: "Head of Marketing", image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&q=80" },
  { name: "Raj Kumar", role: "Travel Director", image: "https://images.unsplash.com/photo-1568992687947-868a62a9f521?w=400&q=80" },
  { name: "Li Mei", role: "Partnerships Lead", image: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=400&q=80" },
];

export default function AboutPage() {
  return (
    <>
      {/* Hero */}
      <section className="relative h-[480px] overflow-hidden">
        <Image
          src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1920&q=80"
          alt="KC Systems team"
          fill
          priority
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-navy-950/90 via-navy-900/70 to-navy-800/50" />
        <div className="relative z-10 h-full flex items-center">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-2xl">
              <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-gold-500/20 text-gold-300 text-xs font-semibold rounded-full mb-5 border border-gold-500/30">
                <TrendingUp size={12} /> Est. 2021 · Kuala Lumpur, Malaysia
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-white leading-tight">
                Building Bridges to
                <span className="text-gold-400"> Opportunity</span>
              </h1>
              <p className="mt-5 text-navy-200 text-lg leading-relaxed">
                KC Systems Limited is a multi-service platform connecting people with quality products,
                career opportunities, knowledge, and travel experiences.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="bg-navy-800 border-b border-navy-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {stats.map(({ value, label, icon: Icon }) => (
              <div key={label} className="flex items-center gap-4">
                <div className="w-10 h-10 bg-navy-700 rounded-xl flex items-center justify-center shrink-0">
                  <Icon size={18} className="text-gold-400" />
                </div>
                <div>
                  <div className="text-2xl font-bold text-white">{value}</div>
                  <div className="text-xs text-navy-400">{label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mission / Vision / Values */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-navy-800">What Drives Us</h2>
            <p className="text-neutral-500 mt-3 max-w-xl mx-auto">The principles that guide every decision we make at KC Systems.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {values.map(({ icon: Icon, title, text }) => (
              <div key={title} className="p-8 rounded-2xl bg-neutral-50 border border-neutral-200 hover:border-navy-300 hover:shadow-md transition-all">
                <div className="inline-flex items-center justify-center w-12 h-12 bg-navy-100 rounded-xl mb-5">
                  <Icon size={22} className="text-navy-700" />
                </div>
                <h3 className="text-lg font-semibold text-navy-800 mb-3">{title}</h3>
                <p className="text-neutral-500 text-sm leading-relaxed">{text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Our Story */}
      <section className="py-20 bg-neutral-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-14 items-center">
            <div>
              <h2 className="text-3xl font-bold text-navy-800 mb-5">Our Story</h2>
              <div className="space-y-4 text-neutral-600 text-sm leading-relaxed mb-8">
                <p>KC Systems Limited was founded with a simple belief: that everyone deserves easy access to quality products, meaningful career opportunities, and world-class education resources.</p>
                <p>Starting as a small e-commerce platform in Kuala Lumpur, we quickly grew to understand what our community truly needed — a single, trusted destination that addresses multiple aspects of modern life.</p>
                <p>Today, we serve over 12,000 members across Malaysia and beyond, with an expanding suite of services built around one mission: connect people with opportunity.</p>
              </div>
              {/* Timeline */}
              <div className="space-y-4">
                {milestones.map(({ year, event }, i) => (
                  <div key={year} className="flex gap-4">
                    <div className="flex flex-col items-center">
                      <div className="w-10 h-7 bg-navy-700 text-white text-xs font-bold flex items-center justify-center rounded-md shrink-0">{year}</div>
                      {i < milestones.length - 1 && <div className="w-px flex-1 bg-navy-200 my-1" />}
                    </div>
                    <p className="text-neutral-600 text-sm leading-relaxed pt-1 pb-2">{event}</p>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative">
              <div className="rounded-2xl overflow-hidden aspect-[4/5]">
                <Image
                  src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&q=80"
                  alt="KC Systems office"
                  width={800}
                  height={1000}
                  className="object-cover w-full h-full"
                />
              </div>
              <div className="absolute -bottom-5 -left-5 bg-white rounded-2xl shadow-xl p-5 border border-neutral-100">
                <div className="text-3xl font-bold text-navy-800">5+</div>
                <div className="text-sm text-neutral-500">Years of Impact</div>
              </div>
              <div className="absolute -top-5 -right-5 bg-gold-500 rounded-2xl shadow-xl p-5">
                <div className="text-2xl font-bold text-white">12K+</div>
                <div className="text-xs text-gold-100">Happy Members</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Our Services */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-navy-800">Everything in One Place</h2>
            <p className="text-neutral-500 mt-3 max-w-xl mx-auto">Five powerful services, one unified platform. Built for Malaysians, growing globally.</p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map(({ icon: Icon, title, description, href, color }) => (
              <Link
                key={title}
                href={href}
                className="group p-6 rounded-2xl border bg-white hover:shadow-lg transition-all"
              >
                <div className={`inline-flex items-center justify-center w-12 h-12 rounded-xl border mb-5 ${color}`}>
                  <Icon size={22} />
                </div>
                <h3 className="font-semibold text-neutral-900 mb-2 group-hover:text-navy-700">{title}</h3>
                <p className="text-neutral-500 text-sm leading-relaxed mb-4">{description}</p>
                <span className="inline-flex items-center gap-1 text-xs font-semibold text-navy-700 group-hover:gap-2 transition-all">
                  Explore <ArrowRight size={12} />
                </span>
              </Link>
            ))}
            {/* Sixth card — CTA */}
            <div className="p-6 rounded-2xl bg-navy-800 flex flex-col justify-between">
              <div>
                <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-navy-700 mb-5">
                  <TrendingUp size={22} className="text-gold-400" />
                </div>
                <h3 className="font-semibold text-white mb-2">More Coming Soon</h3>
                <p className="text-navy-300 text-sm leading-relaxed">We're constantly building new services. Stay tuned for what's next.</p>
              </div>
              <Link href="/register" className="mt-6 inline-flex items-center gap-2 px-4 py-2.5 bg-gold-500 text-white text-sm font-semibold rounded-xl hover:bg-gold-400 transition-colors">
                Join Free <ArrowRight size={14} />
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Office photo full-width */}
      <section className="relative h-72 overflow-hidden">
        <Image
          src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80"
          alt="KC Systems office space"
          fill
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-navy-900/60" />
        <div className="relative z-10 h-full flex items-center justify-center text-center px-4">
          <div>
            <h2 className="text-3xl font-bold text-white mb-3">Come Work With Us</h2>
            <p className="text-navy-200 mb-6">We're always looking for passionate people to join our growing team.</p>
            <Link href="/contact" className="inline-flex items-center gap-2 px-6 py-3 bg-gold-500 text-white font-semibold rounded-xl hover:bg-gold-400 transition-colors">
              Get in Touch <ArrowRight size={16} />
            </Link>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-navy-800">Meet the Team</h2>
            <p className="text-neutral-500 mt-3">The people behind KC Systems — passionate, driven, and always growing.</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            {team.map(({ name, role, image }) => (
              <div key={name} className="text-center group">
                <div className="w-24 h-24 mx-auto mb-3 rounded-2xl overflow-hidden border-2 border-neutral-200 group-hover:border-navy-400 transition-colors">
                  <Image
                    src={image}
                    alt={name}
                    width={96}
                    height={96}
                    className="object-cover w-full h-full"
                  />
                </div>
                <div className="font-semibold text-navy-800 text-sm">{name}</div>
                <div className="text-xs text-neutral-500 mt-0.5">{role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Why us */}
      <section className="py-16 bg-navy-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-white text-center mb-12">Why Choose KC Systems?</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              { icon: Shield, title: "Secure & Trusted", text: "Enterprise-grade security, Stripe-powered payments, and verified listings across all services.", checks: ["SSL encrypted", "Stripe payments", "Verified listings"] },
              { icon: Award, title: "Quality Curated", text: "Every product, job, scholarship, and travel package is reviewed before going live.", checks: ["Human-reviewed", "No spam listings", "Updated regularly"] },
              { icon: Users, title: "Community Driven", text: "A growing community of professionals, learners, travellers, and entrepreneurs.", checks: ["12,000+ members", "Active journals", "Peer support"] },
            ].map(({ icon: Icon, title, text, checks }) => (
              <div key={title} className="bg-navy-700/50 rounded-2xl p-6 border border-navy-600">
                <Icon size={28} className="text-gold-400 mb-4" />
                <h3 className="font-semibold text-white text-lg mb-2">{title}</h3>
                <p className="text-navy-300 text-sm mb-4">{text}</p>
                <ul className="space-y-1.5">
                  {checks.map((c) => (
                    <li key={c} className="flex items-center gap-2 text-xs text-navy-200">
                      <CheckCircle size={13} className="text-emerald-400 shrink-0" /> {c}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}