import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Phone, Mail, MapPin, ExternalLink, MessageCircle, HelpCircle, FileText, Users, Calendar } from "lucide-react";

const supportLinks = [
  {
    icon: Calendar,
    title: "Service Portal",
    description: "Book services from T-kash Soko providers",
    url: "https://bookservices.blipply.com",
    color: "bg-telkom-turquoise"
  },
  {
    icon: HelpCircle,
    title: "Help Center",
    description: "FAQs, guides, and support tools",
    url: "https://telkom.co.ke/help-center/",
    color: "bg-telkom-orange"
  },
  {
    icon: MessageCircle,
    title: "Contact Us",
    description: "Get in touch with customer care",
    url: "https://telkom.co.ke/help-center/contact-us/",
    color: "bg-green-500"
  },
  {
    icon: FileText,
    title: "T-kash FAQs",
    description: "Specific T-kash support",
    url: "https://telkom.co.ke/help-center/faqs/t-kash/",
    color: "bg-purple-500"
  }
];

const contactInfo = [
  {
    icon: Phone,
    title: "Merchant Support",
    value: "Dial 100",
    description: "Free from any Telkom number"
  },
  {
    icon: Mail,
    title: "Customer Care Email",
    value: "CustomerCare@telkom.co.ke",
    description: "General support inquiries"
  },
  {
    icon: Phone,
    title: "From Other Networks",
    value: "020 2221000",
    description: "Standard call rates apply"
  },
  {
    icon: MapPin,
    title: "Physical Address",
    value: "Telkom Plaza, Ralph Bunche Road",
    description: "Nairobi, Kenya"
  }
];

export default function SupportSection() {
  return (
    <section id="support" className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Help & Support
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Official Telkom Kenya customer service channels. We're here to help you succeed.
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {supportLinks.map((link, index) => {
            const Icon = link.icon;
            return (
              <a
                key={index}
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                className="group"
                data-testid={`link-support-${index}`}
              >
                <Card className="p-6 h-full border border-gray-200 hover:border-telkom-turquoise/50 hover:shadow-lg transition-all group-hover:-translate-y-1">
                  <div className={`w-12 h-12 rounded-xl ${link.color} flex items-center justify-center mb-4`}>
                    <Icon className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="text-lg font-bold text-gray-900 mb-1 flex items-center gap-2">
                    {link.title}
                    <ExternalLink className="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </h3>
                  <p className="text-sm text-gray-600">{link.description}</p>
                </Card>
              </a>
            );
          })}
        </div>
        
        <div className="bg-gray-50 rounded-3xl p-8 lg:p-12">
          <h3 className="text-2xl font-bold text-gray-900 mb-8 text-center">
            Contact Information
          </h3>
          
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {contactInfo.map((contact, index) => {
              const Icon = contact.icon;
              return (
                <div 
                  key={index} 
                  className="flex items-start gap-4 p-4 bg-white rounded-xl border border-gray-100"
                  data-testid={`contact-info-${index}`}
                >
                  <div className="w-10 h-10 rounded-lg bg-telkom-orange/10 flex items-center justify-center flex-shrink-0">
                    <Icon className="w-5 h-5 text-telkom-orange" />
                  </div>
                  <div>
                    <div className="text-sm text-gray-500 mb-0.5">{contact.title}</div>
                    <div className="font-semibold text-gray-900 mb-0.5">{contact.value}</div>
                    <div className="text-xs text-gray-500">{contact.description}</div>
                  </div>
                </div>
              );
            })}
          </div>
          
          <div className="mt-8 text-center">
            <p className="text-gray-600 mb-4">Follow us on social media for updates:</p>
            <div className="flex justify-center gap-4">
              <a 
                href="https://twitter.com/TelkomKenya" 
                target="_blank" 
                rel="noopener noreferrer"
                className="text-telkom-turquoise hover:text-telkom-orange transition-colors font-medium"
                data-testid="link-twitter"
              >
                @TelkomKenya
              </a>
              <span className="text-gray-300">|</span>
              <a 
                href="https://twitter.com/TelkomCare_Ke" 
                target="_blank" 
                rel="noopener noreferrer"
                className="text-telkom-turquoise hover:text-telkom-orange transition-colors font-medium"
                data-testid="link-twitter-care"
              >
                @TelkomCare_Ke (24/7)
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
