import { Metadata } from "next";
import Link from "next/link";
import { Shield, Truck, Award, Users, Phone, Bot } from "lucide-react";

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

const values = [
  { icon: Shield, title: "100% Genuine Products", desc: "Every product we sell is sourced directly from authorized distributors. No counterfeits, no surprises." },
  { icon: Truck, title: "Same-Day Delivery", desc: "Order before 2PM in Nairobi and receive your product the same day. Nationwide delivery within 24 hours." },
  { icon: Award, title: "1-Year Warranty", desc: "All products come with a minimum 1-year warranty. We stand behind every product we sell." },
  { icon: Bot, title: "AI-Powered Advice", desc: "Not sure what to buy? Our AI laptop finder helps you choose the perfect device for your needs and budget." },
  { icon: Users, title: "Expert Team", desc: "Our staff are certified tech experts who can guide you through specs, comparisons and recommendations." },
  { icon: Phone, title: "24/7 Support", desc: "Reach us on WhatsApp, phone, or email any time. We're here to help before and after your purchase." },
];

const team = [
  { name: "Brian Otieno", role: "Founder & CEO", emoji: "👨‍💼" },
  { name: "Grace Wanjiru", role: "Head of Sales", emoji: "👩‍💼" },
  { name: "Kevin Kamau", role: "Tech Specialist", emoji: "👨‍💻" },
  { name: "Faith Achieng", role: "Customer Support", emoji: "👩‍🎧" },
];

export default function AboutPage() {
  return (
    <div>
      {/* Hero */}
      <div className="bg-gradient-to-br from-sky-900 via-sky-800 to-blue-900 text-white py-20">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <div className="w-20 h-20 rounded-3xl bg-white/10 border border-white/20 flex items-center justify-center mx-auto mb-6">
            <span className="text-4xl font-black text-white">P</span>
          </div>
          <h1 className="text-4xl sm:text-5xl font-black mb-4">About ProTouch</h1>
          <p className="text-sky-200 text-lg leading-relaxed max-w-2xl mx-auto">
            Kenya&apos;s most trusted tech store for laptops and iPhones since 2019. We&apos;re passionate about connecting Kenyans with world-class technology at fair prices.
          </p>
        </div>
      </div>

      {/* Stats */}
      <div className="bg-white border-b border-slate-100">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-2 sm:grid-cols-4 divide-x divide-slate-100">
            {[
              { num: "5,000+", label: "Happy Customers" },
              { num: "500+", label: "Products in Stock" },
              { num: "5 Years", label: "In Business" },
              { num: "4.9★", label: "Customer Rating" },
            ].map(({ num, label }) => (
              <div key={label} className="px-8 py-8 text-center">
                <p className="text-3xl font-black text-sky-600 mb-1">{num}</p>
                <p className="text-slate-500 text-sm font-medium">{label}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Story */}
      <div className="max-w-7xl mx-auto px-4 py-16">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
          <div>
            <span className="text-sky-600 text-sm font-bold uppercase tracking-wider">Our Story</span>
            <h2 className="text-3xl font-black text-slate-900 mt-2 mb-4">Started with a Vision to Make Tech Accessible</h2>
            <p className="text-slate-600 leading-relaxed mb-4">
              ProTouch was founded in 2019 with a simple mission: to bring genuine, high-quality laptops and iPhones to Kenyans at honest prices. We started as a small shop in Nairobi CBD and have grown into one of the most trusted tech retailers in the country.
            </p>
            <p className="text-slate-600 leading-relaxed mb-6">
              We understand that buying a laptop or smartphone is a significant investment. That&apos;s why we&apos;re committed to helping every customer make an informed choice — from our knowledgeable in-store staff to our AI-powered laptop finder.
            </p>
            <Link href="/contact" className="bg-sky-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-sky-600 transition-colors inline-block">
              Visit Our Store
            </Link>
          </div>
          <div className="bg-gradient-to-br from-sky-50 to-blue-50 rounded-3xl p-10 flex items-center justify-center">
            <div className="text-center">
              <span className="text-8xl">🏪</span>
              <p className="text-sky-700 font-bold mt-4 text-lg">ProTouch Store</p>
              <p className="text-sky-500 text-sm">Tom Mboya Street, Nairobi</p>
            </div>
          </div>
        </div>

        {/* Values */}
        <div className="mb-16">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-black text-slate-900 mb-2">Why Choose ProTouch?</h2>
            <p className="text-slate-500">We go above and beyond for every customer</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {values.map(({ icon: Icon, title, desc }) => (
              <div key={title} className="bg-white rounded-2xl border border-sky-100 p-6 hover:border-sky-300 hover:shadow-lg transition-all group">
                <div className="w-12 h-12 rounded-xl bg-sky-50 flex items-center justify-center mb-4 group-hover:bg-sky-100 transition-colors">
                  <Icon className="w-6 h-6 text-sky-600" />
                </div>
                <h3 className="font-black text-slate-900 mb-2">{title}</h3>
                <p className="text-slate-500 text-sm leading-relaxed">{desc}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Team */}
        <div className="text-center mb-10">
          <h2 className="text-3xl font-black text-slate-900 mb-2">Meet Our Team</h2>
          <p className="text-slate-500">Passionate tech experts at your service</p>
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
          {team.map((member) => (
            <div key={member.name} className="bg-white rounded-2xl border border-sky-100 p-6 text-center hover:border-sky-300 hover:shadow-md transition-all">
              <div className="w-16 h-16 rounded-full bg-sky-50 flex items-center justify-center mx-auto mb-3 text-3xl">
                {member.emoji}
              </div>
              <p className="font-black text-slate-800">{member.name}</p>
              <p className="text-sky-600 text-sm font-medium mt-1">{member.role}</p>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div className="bg-gradient-to-r from-sky-700 to-blue-700 text-white py-16">
        <div className="max-w-2xl mx-auto px-4 text-center">
          <h2 className="text-3xl font-black mb-4">Ready to Find Your Perfect Device?</h2>
          <p className="text-sky-200 mb-8">Browse our collection or let our AI recommend the perfect laptop for you</p>
          <div className="flex flex-wrap gap-3 justify-center">
            <Link href="/laptops" className="bg-white text-sky-700 px-8 py-3 rounded-xl font-bold hover:bg-sky-50 transition-colors">
              Shop Laptops
            </Link>
            <Link href="/ai-finder" className="border-2 border-white text-white px-8 py-3 rounded-xl font-bold hover:bg-white/10 transition-colors flex items-center gap-2">
              <Bot className="w-4 h-4" /> AI Finder
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}