"use client";

import { useState } from "react";
import {
  ServerIcon,
  CodeIcon,
  BrainIcon,
  ZapIcon,
  LayersIcon,
  WalletIcon,
  ArrowRightIcon,
  CheckIcon,
} from "./Icons";
import type { SVGProps, ComponentType } from "react";

const iconMap: Record<string, ComponentType<SVGProps<SVGSVGElement> & { size?: number }>> = {
  server: ServerIcon,
  code: CodeIcon,
  brain: BrainIcon,
  zap: ZapIcon,
  layers: LayersIcon,
  wallet: WalletIcon,
};

const gradients = [
  "from-blue-500 to-indigo-600",
  "from-purple-500 to-pink-600",
  "from-cyan-500 to-blue-600",
  "from-amber-500 to-orange-600",
  "from-green-500 to-emerald-600",
  "from-rose-500 to-red-600",
];

const pricingTiers = [
  {
    name: "Starter",
    price: "$500",
    description: "Perfect for small projects and MVPs",
    features: [
      "Single page website or app",
      "Responsive design",
      "Basic SEO optimization",
      "1 week delivery",
      "30 days support",
    ],
    popular: false,
    cta: "Get Started",
  },
  {
    name: "Professional",
    price: "$2,000",
    description: "For growing businesses and complex apps",
    features: [
      "Full web application",
      "Admin dashboard",
      "API development",
      "Database design",
      "Payment integration",
      "2-4 weeks delivery",
      "90 days support",
    ],
    popular: true,
    cta: "Most Popular",
  },
  {
    name: "Enterprise",
    price: "Custom",
    description: "Large-scale systems and ongoing partnership",
    features: [
      "Custom architecture",
      "Multiple integrations",
      "AI/ML features",
      "Scalable infrastructure",
      "Dedicated support",
      "Ongoing maintenance",
      "Priority response",
    ],
    popular: false,
    cta: "Contact Me",
  },
];

interface Service {
  id: number;
  title: string;
  description: string | null;
  icon: string | null;
  sortOrder: number | null;
}

export default function ServicesSection({
  services,
}: {
  services: Service[];
}) {
  const [activeService, setActiveService] = useState<number | null>(null);

  return (
    <section id="services" className="py-24 relative overflow-hidden">
      <div className="absolute inset-0 hero-gradient opacity-30" />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-16">
          <span className="inline-block px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-primary-light bg-primary/10 rounded-full mb-4">
            Services
          </span>
          <h2 className="text-4xl sm:text-5xl font-bold text-text-primary mb-4">
            What I <span className="gradient-text">Build</span>
          </h2>
          <p className="text-text-muted max-w-2xl mx-auto text-lg">
            From backend architecture to AI integration — comprehensive
            solutions for modern businesses
          </p>
        </div>

        {/* Service Cards */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-20">
          {services.map((service, i) => {
            const Icon = iconMap[service.icon || "code"] || CodeIcon;
            const gradient = gradients[i % gradients.length];
            const isActive = activeService === service.id;

            return (
              <div
                key={service.id}
                className={`group glass rounded-2xl p-8 card-hover relative overflow-hidden cursor-pointer transition-all ${
                  isActive ? "ring-2 ring-primary scale-[1.02]" : ""
                }`}
                onClick={() => setActiveService(isActive ? null : service.id)}
              >
                {/* Gradient border top */}
                <div
                  className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${gradient} opacity-0 group-hover:opacity-100 transition-opacity`}
                />

                {/* Icon */}
                <div
                  className={`w-14 h-14 rounded-xl bg-gradient-to-br ${gradient} flex items-center justify-center mb-6 group-hover:shadow-lg transition-shadow group-hover:scale-110`}
                >
                  <Icon size={24} className="text-white" />
                </div>

                <h3 className="text-xl font-bold text-text-primary mb-3">
                  {service.title}
                </h3>

                <p className="text-text-secondary text-sm leading-relaxed mb-6">
                  {service.description}
                </p>

                <div className="flex items-center justify-between">
                  <a
                    href="#contact"
                    className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-light hover:text-accent transition-colors group/link"
                  >
                    Get Quote
                    <ArrowRightIcon
                      size={14}
                      className="group-hover/link:translate-x-1 transition-transform"
                    />
                  </a>
                  <span className="text-xs text-text-muted">
                    Click for details
                  </span>
                </div>

                {/* Expanded details */}
                {isActive && (
                  <div className="mt-6 pt-6 border-t border-border animate-fade-in">
                    <h4 className="text-sm font-semibold text-text-primary mb-3">
                      What&apos;s Included:
                    </h4>
                    <ul className="space-y-2">
                      {[
                        "Custom development",
                        "Code documentation",
                        "Testing & QA",
                        "Deployment support",
                        "Post-launch support",
                      ].map((item) => (
                        <li
                          key={item}
                          className="flex items-center gap-2 text-sm text-text-secondary"
                        >
                          <CheckIcon size={14} className="text-success" />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Pricing Section */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-text-primary mb-4">
              Transparent <span className="gradient-text">Pricing</span>
            </h3>
            <p className="text-text-muted max-w-xl mx-auto">
              Clear pricing for common project types. Custom quotes for unique
              requirements.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {pricingTiers.map((tier) => (
              <div
                key={tier.name}
                className={`glass rounded-2xl p-8 relative ${
                  tier.popular
                    ? "ring-2 ring-primary shadow-lg shadow-primary/10 scale-105"
                    : ""
                }`}
              >
                {tier.popular && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-primary to-accent text-white text-xs font-semibold rounded-full">
                    Most Popular
                  </div>
                )}

                <h4 className="text-lg font-bold text-text-primary mb-2">
                  {tier.name}
                </h4>
                <div className="mb-4">
                  <span className="text-3xl font-bold gradient-text">
                    {tier.price}
                  </span>
                  {tier.price !== "Custom" && (
                    <span className="text-text-muted text-sm"> starting</span>
                  )}
                </div>
                <p className="text-sm text-text-muted mb-6">{tier.description}</p>

                <ul className="space-y-3 mb-8">
                  {tier.features.map((feature) => (
                    <li
                      key={feature}
                      className="flex items-start gap-2 text-sm text-text-secondary"
                    >
                      <CheckIcon
                        size={16}
                        className="text-success shrink-0 mt-0.5"
                      />
                      {feature}
                    </li>
                  ))}
                </ul>

                <a
                  href="#contact"
                  className={`block w-full py-3 text-center font-semibold rounded-xl transition-all ${
                    tier.popular
                      ? "bg-gradient-to-r from-primary to-primary-light text-white hover:shadow-lg hover:shadow-primary/25"
                      : "border border-border text-text-primary hover:bg-white/5"
                  }`}
                >
                  {tier.cta}
                </a>
              </div>
            ))}
          </div>
        </div>

        {/* Trust Badges */}
        <div className="glass rounded-2xl p-8 max-w-4xl mx-auto">
          <div className="grid sm:grid-cols-4 gap-6 text-center">
            {[
              { icon: "🏆", label: "8+ Years Experience" },
              { icon: "✅", label: "50+ Projects Delivered" },
              { icon: "⭐", label: "100% Client Satisfaction" },
              { icon: "🚀", label: "Fast Turnaround" },
            ].map((badge) => (
              <div key={badge.label} className="flex flex-col items-center">
                <span className="text-3xl mb-2">{badge.icon}</span>
                <span className="text-sm font-medium text-text-secondary">
                  {badge.label}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div className="mt-16 text-center glass rounded-2xl p-10 max-w-3xl mx-auto bg-gradient-to-r from-primary/5 via-transparent to-accent/5">
          <h3 className="text-2xl font-bold text-text-primary mb-3">
            Ready to Build Something Amazing?
          </h3>
          <p className="text-text-muted mb-6">
            Let&apos;s discuss how I can help bring your idea to life with
            clean, scalable, and modern solutions.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <a
              href="#contact"
              className="px-7 py-3.5 bg-gradient-to-r from-primary to-primary-light text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/25 transition-all btn-shimmer flex items-center gap-2"
            >
              🚀 Start a Project
            </a>
            <a
              href="https://wa.me/2348000000000"
              target="_blank"
              rel="noopener noreferrer"
              className="px-7 py-3.5 border border-border text-text-primary font-semibold rounded-xl hover:bg-white/5 transition-all flex items-center gap-2"
            >
              💬 WhatsApp Chat
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}