import { useState } from "react";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Check, User, Users, Building2, Scissors, Calendar, Clock, CreditCard, ChevronDown, ChevronUp, ExternalLink } from "lucide-react";
import serviceImage from "@assets/image_1768676425366.png";

const serviceTypes = [
  {
    id: "solo-service",
    icon: User,
    badge: "Solo Provider",
    title: "Service Providers Working Alone",
    subtitle: "Barbers, Salons, Plumbers, Tutors, Cleaners, Mechanics",
    keyMessage: "T-kash Soko helps you get booked, get paid, and look professional.",
    benefits: [
      "Let customers book and pay for your services online",
      "Reduce no-shows by getting paid before the service",
      "Accept cash and digital payments easily",
      "See how much you earn per day, week, or month",
      "Keep a list of customers and their service history",
      "Build a credit profile using your service income",
      "No hardware needed, just your phone",
      "Pay-as-you-go pricing, no expensive subscriptions",
      "Chance to win up to 1 million bob every month*",
      "Use Soko personally for shopping and payments"
    ]
  },
  {
    id: "service-employees",
    icon: Users,
    badge: "With Employees",
    title: "Service Providers with Employees",
    subtitle: "Salons, Garages, Clinics, Service Centres",
    keyMessage: "T-kash Soko helps you manage staff, bookings, and money in one place.",
    benefits: [
      "Customers can book and pay for services online",
      "Assign bookings and payments to specific staff",
      "Track which employee handled which customer",
      "Reduce cash handling and disputes",
      "Geo-fencing ensures staff only operate at your location",
      "Pay salaries through Blipply easily",
      "Accept cash and digital payments in one system",
      "Full reporting on service performance and income",
      "Build a strong credit profile as a business",
      "Low cost, pay-as-you-go pricing",
      "Monthly chance to win up to 1 million bob*"
    ]
  },
  {
    id: "service-branches",
    icon: Building2,
    badge: "Multiple Branches",
    title: "Multiple Service Branches",
    subtitle: "Salon chains, Garages, Clinics, Service Franchises",
    keyMessage: "T-kash Soko gives you full control of a growing service business without complexity.",
    benefits: [
      "Central booking and payment system for all branches",
      "Customers can book and pay online from anywhere",
      "Track performance by branch and by employee",
      "Geo-fencing controls where staff can operate",
      "Pay salaries and commissions through Blipply",
      "Accept cash and digital payments in one system",
      "Detailed reports on service demand and revenue",
      "Unified customer history across branches",
      "Build business credit for future expansion loans",
      "Low-cost, pay-as-you-go pricing",
      "Chance to win up to 1 million bob monthly*"
    ]
  }
];

export default function ServiceBenefits() {
  const [expandedCards, setExpandedCards] = useState<string[]>([]);

  const toggleCard = (id: string) => {
    setExpandedCards(prev => 
      prev.includes(id) 
        ? prev.filter(cardId => cardId !== id)
        : [...prev, id]
    );
  };

  return (
    <section id="services" className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-16">
          <Badge className="bg-telkom-turquoise/10 text-telkom-turquoise border-telkom-turquoise/20 mb-4">
            For Service Providers
          </Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Grow Your Service Business
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            From solo hustlers to multi-branch operations, T-kash Soko helps you get booked and paid professionally.
          </p>
        </div>
        
        <div className="grid lg:grid-cols-2 gap-12 items-start">
          <div className="order-2 lg:order-1 space-y-6">
            {serviceTypes.map((type) => {
              const Icon = type.icon;
              const isExpanded = expandedCards.includes(type.id);
              const visibleBenefits = isExpanded ? type.benefits : type.benefits.slice(0, 5);
              const hasMoreBenefits = type.benefits.length > 5;
              
              return (
                <Card key={type.id} className="border border-gray-200 hover:border-telkom-turquoise/50 hover:shadow-lg transition-all" data-testid={`card-service-${type.id}`}>
                  <div className="p-6">
                    <div className="flex items-start gap-4">
                      <div className="w-12 h-12 rounded-xl bg-telkom-turquoise/10 flex items-center justify-center flex-shrink-0">
                        <Icon className="w-6 h-6 text-telkom-turquoise" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <Badge variant="secondary" className="text-xs">{type.badge}</Badge>
                        </div>
                        <h3 className="text-lg font-bold text-gray-900 mb-1">{type.title}</h3>
                        <p className="text-sm text-gray-500 mb-3">{type.subtitle}</p>
                        <p className="text-gray-700 font-medium mb-4 italic">"{type.keyMessage}"</p>
                        <div className="grid gap-2">
                          {visibleBenefits.map((benefit, idx) => (
                            <div key={idx} className="flex items-start gap-2">
                              <Check className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                              <span className="text-sm text-gray-600">{benefit}</span>
                            </div>
                          ))}
                          {hasMoreBenefits && (
                            <button 
                              onClick={() => toggleCard(type.id)}
                              className="flex items-center gap-1 text-sm text-telkom-turquoise font-medium mt-2 hover:text-telkom-turquoise/80 transition-colors"
                              data-testid={`button-toggle-${type.id}`}
                            >
                              {isExpanded ? (
                                <>
                                  <ChevronUp className="w-4 h-4" />
                                  Show less
                                </>
                              ) : (
                                <>
                                  <ChevronDown className="w-4 h-4" />
                                  +{type.benefits.length - 5} more benefits
                                </>
                              )}
                            </button>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
          
          <div className="order-1 lg:order-2 relative rounded-2xl overflow-hidden shadow-xl lg:sticky lg:top-24">
            <img
              src={serviceImage}
              alt="African service provider in professional setting"
              className="w-full h-auto object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent" />
            <div className="absolute bottom-0 left-0 right-0 p-6">
              <a 
                  href="https://bookservices.blipply.com" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="bg-white/10 backdrop-blur-md rounded-xl p-4 border border-white/20 block hover:bg-white/20 transition-colors"
                  data-testid="link-service-portal-overlay"
                >
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 rounded-full bg-telkom-turquoise flex items-center justify-center">
                      <Calendar className="w-6 h-6 text-white" />
                    </div>
                    <div className="text-white flex-1">
                      <p className="font-semibold">Service Portal</p>
                      <p className="text-sm text-gray-300">Book services from T-kash Soko providers</p>
                    </div>
                    <ExternalLink className="w-5 h-5 text-white/70" />
                  </div>
                </a>
            </div>
          </div>
        </div>
        
        <p className="text-center text-sm text-gray-500 mt-8">*Lottery feature will be active from February 2026</p>
      </div>
    </section>
  );
}
