import React from "react";
import {
  Code2,
  Database,
  Globe2,
  Smartphone,
  Server,
  Users,
  Shield,
  Settings,
  CheckCircle,
} from "lucide-react";
import { Link } from "react-router-dom";
import { useLanguage } from "../context/LanguageContext";

const Services: React.FC = () => {
  const { t } = useLanguage();

  const services = [
    {
      icon: <Code2 className="w-12 h-12 text-blue-600" />,
      title: t("services.software.title"),
      description: t("services.software.desc"),
      features: [
        t("services.software.features.analysis"),
        t("services.software.features.design"),
        t("services.software.features.development"),
        t("services.software.features.testing"),
        t("services.software.features.maintenance"),
      ],
    },
    {
      icon: <Users className="w-12 h-12 text-purple-600" />,
      title: t("services.web.title"),
      description: t("services.web.desc"),
      features: [
        t("services.web.features.frontend"),
        t("services.web.features.backend"),
        t("services.web.features.api"),
        t("services.web.features.seo"),
        t("services.web.features.performance"),
      ],
    },
    {
      icon: <Shield className="w-12 h-12 text-green-600" />,
      title: t("services.mobile.title"),
      description: t("services.mobile.desc"),
      features: [
        t("services.mobile.features.design"),
        t("services.mobile.features.native"),
        t("services.mobile.features.cross"),
        t("services.mobile.features.push"),
        t("services.mobile.features.store"),
      ],
    },
    {
      icon: <Server className="w-12 h-12 text-red-600" />,
      title: t("services.database.title"),
      description: t("services.database.desc"),
      features: [
        t("services.database.features.design"),
        t("services.database.features.optimization"),
        t("services.database.features.migration"),
        t("services.database.features.backup"),
        t("services.database.features.recovery"),
      ],
    },
    {
      icon: <Globe2 className="w-12 h-12 text-yellow-600" />,
      title: t("services.integration.title"),
      description: t("services.integration.desc"),
      features: [
        t("services.integration.features.api"),
        t("services.integration.features.middleware"),
        t("services.integration.features.legacy"),
        t("services.integration.features.realtime"),
        t("services.integration.features.monitoring"),
      ],
    },
    {
      icon: <Settings className="w-12 h-12 text-indigo-600" />,
      title: t("services.consulting.title"),
      description: t("services.consulting.desc"),
      features: [
        t("services.consulting.features.tech"),
        t("services.consulting.features.project"),
        t("services.consulting.features.digital"),
        t("services.consulting.features.risk"),
        t("services.consulting.features.training"),
      ],
    },
  ];

  const supportPlans = [
    {
      title: t("services.support.branchRemote.title"),
      price: t("services.support.branchRemote.price"),
      period: t("services.support.branchRemote.period"),
      features: [
        t("services.support.branchRemote.features.priority"),
        t("services.support.branchRemote.features.remote"),
        t("services.support.branchRemote.features.optimization"),
        t("services.support.branchRemote.features.maintenance"),
        t("services.support.branchRemote.features.consulting"),
      ],
    },
    {
      title: t("services.support.backup.title"),
      price: t("services.support.backup.price"),
      period: t("services.support.backup.period"),
      features: [
        t("services.support.backup.features.daily"),
        t("services.support.backup.features.encrypted"),
        t("services.support.backup.features.recovery"),
        t("services.support.backup.features.verification"),
        t("services.support.backup.features.access"),
      ],
    },
    {
      title: t("services.support.sms.title"),
      price: t("services.support.sms.price"),
      period: t("services.support.sms.period"),
      features: [
        t("services.support.sms.features.packages"),
        t("services.support.sms.features.bulk"),
        t("services.support.sms.features.template"),
        t("services.support.sms.features.reporting"),
        t("services.support.sms.features.api"),
      ],
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <div className="relative bg-blue-900 text-white py-24">
        <div
          className="absolute inset-0 opacity-20"
          style={{
            backgroundImage:
              'url("https://images.pexels.com/photos/3183173/pexels-photo-3183173.jpeg?auto=compress&cs=tinysrgb&w=1920")',
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        ></div>
        <div className="container mx-auto pt-16 px-4 relative">
          <h1 className="text-5xl font-bold mb-6">{t("services.title")}</h1>
          <p className="text-xl max-w-3xl">{t("services.subtitle")}</p>
        </div>
      </div>

      {/* Services Grid */}
      <div className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <div
                key={index}
                className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow"
              >
                <div className="mb-6">{service.icon}</div>
                <h3 className="text-2xl font-bold text-gray-900 mb-4">
                  {service.title}
                </h3>
                <p className="text-gray-600 mb-6">{service.description}</p>
                <ul className="space-y-2">
                  {service.features.map((feature, fIndex) => (
                    <li
                      key={fIndex}
                      className="flex items-center text-gray-700"
                    >
                      <span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Support Plans */}
      <div className="bg-white py-10">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-10">
            {t("services.support.title")}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {supportPlans.map((plan, index) => (
              <div
                key={index}
                className="bg-white rounded-xl shadow-lg p-8 border border-gray-200"
              >
                <h3 className="text-xl font-bold mb-4">{plan.title}</h3>

                <ul className="space-y-3 mb-8">
                  {plan.features.map((feature, fIndex) => (
                    <li
                      key={fIndex}
                      className="flex items-center space-x-2 text-gray-700"
                    >
                      <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link
                  to="/contact"
                  className="block text-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
                >
                  {t("services.support.contactButton")}
                </Link>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Call to Action */}
      <div className="bg-blue-900 text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">{t("services.cta.title")}</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            {t("services.cta.description")}
          </p>
          <Link
            to="/contact"
            className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
          >
            {t("services.cta.contact")}
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Services;