import React, { useState, useEffect } from "react";
import { Element } from "react-scroll";
import { useTranslation } from "react-i18next";
import { motion, AnimatePresence } from "framer-motion";
import {
  Globe,
  MessageSquare,
  Bell,
  Package,
  BarChart3,
  Zap,
  Shield,
  Users,
  Clock,
  CheckCircle
} from "lucide-react";

const CARDS_PER_PAGE = 4;

const Services = () => {
  const { t, ready } = useTranslation();
  const servicesData = [
    {
      id: "service-1",
      title: t('tradesafe.services.platform.title'),
      description: t('tradesafe.services.platform.description'),
      details: t('tradesafe.services.platform.details'),
      icon: <Globe className="w-10 h-10" />,
      color: "from-[#23558f] to-[#3360b2]",
      bgColor: "bg-gradient-to-br from-[#23558f]/20 to-[#3360b2]/20",
      features: t('tradesafe.services.platform.features', { returnObjects: true })
    },
    {
      id: "service-2",
      title: t('tradesafe.services.orders.title'),
      description: t('tradesafe.services.orders.description'),
      details: t('tradesafe.services.orders.details'),
      icon: <Package className="w-10 h-10" />,
      color: "from-[#3360b2] to-[#3c5ee3]",
      bgColor: "bg-gradient-to-br from-[#3360b2]/20 to-[#3c5ee3]/20",
      features: t('tradesafe.services.orders.features', { returnObjects: true })
    },
    {
      id: "service-3",
      title: t('tradesafe.services.communication.title'),
      description: t('tradesafe.services.communication.description'),
      details: t('tradesafe.services.communication.details'),
      icon: <MessageSquare className="w-10 h-10" />,
      color: "from-[#3c5ee3] to-[#5c7ce3]",
      bgColor: "bg-gradient-to-br from-[#3c5ee3]/20 to-[#5c7ce3]/20",
      features: t('tradesafe.services.communication.features', { returnObjects: true })
    },
    {
      id: "service-4",
      title: t('tradesafe.services.notifications.title'),
      description: t('tradesafe.services.notifications.description'),
      details: t('tradesafe.services.notifications.details'),
      icon: <Bell className="w-10 h-10" />,
      color: "from-[#4a90e2] to-[#6aa8f2]",
      bgColor: "bg-gradient-to-br from-[#4a90e2]/20 to-[#6aa8f2]/20",
      features: t('tradesafe.services.notifications.features', { returnObjects: true })
    },
    {
      id: "service-5",
      title: t('tradesafe.services.dashboard.title'),
      description: t('tradesafe.services.dashboard.description'),
      details: t('tradesafe.services.dashboard.details'),
      icon: <BarChart3 className="w-10 h-10" />,
      color: "from-[#2ecc71] to-[#1abc9c]",
      bgColor: "bg-gradient-to-br from-[#2ecc71]/20 to-[#1abc9c]/20",
      features: t('tradesafe.services.dashboard.features', { returnObjects: true })
    },
    {
      id: "service-6",
      title: t('tradesafe.services.solutions.title'),
      description: t('tradesafe.services.solutions.description'),
      details: t('tradesafe.services.solutions.details'),
      icon: <Shield className="w-10 h-10" />,
      color: "from-[#9b59b6] to-[#8e44ad]",
      bgColor: "bg-gradient-to-br from-[#9b59b6]/20 to-[#8e44ad]/20",
      features: t('tradesafe.services.solutions.features', { returnObjects: true })
    },
    {
      id: "service-7",
      title: t('tradesafe.services.speed.title'),
      description: t('tradesafe.services.speed.description'),
      details: t('tradesafe.services.speed.details'),
      icon: <Zap className="w-10 h-10" />,
      color: "from-[#f39c12] to-[#e67e22]",
      bgColor: "bg-gradient-to-br from-[#f39c12]/20 to-[#e67e22]/20",
      features: t('tradesafe.services.speed.features', { returnObjects: true })
    },
    {
      id: "service-8",
      title: t('tradesafe.services.network.title'),
      description: t('tradesafe.services.network.description'),
      details: t('tradesafe.services.network.details'),
      icon: <Users className="w-10 h-10" />,
      color: "from-[#3498db] to-[#2980b9]",
      bgColor: "bg-gradient-to-br from-[#3498db]/20 to-[#2980b9]/20",
      features: t('tradesafe.services.network.features', { returnObjects: true })
    }
  ];

  const reasonsToChooseUs = [
    {
      icon: <Zap className="w-8 h-8" />,
      text: t('tradesafe.reasons.speed.text'),
      description: t('tradesafe.reasons.speed.description')
    },
    {
      icon: <Shield className="w-8 h-8" />,
      text: t('tradesafe.reasons.reliability.text'),
      description: t('tradesafe.reasons.reliability.description')
    },
    {
      icon: <Globe className="w-8 h-8" />,
      text: t('tradesafe.reasons.connection.text'),
      description: t('tradesafe.reasons.connection.description')
    },
    {
      icon: <MessageSquare className="w-8 h-8" />,
      text: t('tradesafe.reasons.communication.text'),
      description: t('tradesafe.reasons.communication.description')
    },
    {
      icon: <Clock className="w-8 h-8" />,
      text: t('tradesafe.reasons.time.text'),
      description: t('tradesafe.reasons.time.description')
    },
    {
      icon: <CheckCircle className="w-8 h-8" />,
      text: t('tradesafe.reasons.solutions.text'),
      description: t('tradesafe.reasons.solutions.description')
    }
  ];

  const [expandedCards, setExpandedCards] = useState({});
  const [hoveredCard, setHoveredCard] = useState(null);
  const [page, setPage] = useState(0);

  const startIndex = page * CARDS_PER_PAGE;
  const endIndex = startIndex + CARDS_PER_PAGE;
  const visibleServices = servicesData.slice(startIndex, endIndex);
  const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE);

  const toggleCard = (cardId) => {
    setExpandedCards(prev => ({
      ...prev,
      [cardId]: !prev[cardId]
    }));
  };
  
  const toggleAllCards = () => {
    const allExpanded = Object.values(expandedCards).every(Boolean);
    const newState = {};
    visibleServices.forEach(service => {
      newState[service.id] = !allExpanded;
    });
    setExpandedCards(newState);
  };

  const handleNextPage = () => {
    const newExpandedState = {};
    visibleServices.forEach(service => {
      newExpandedState[service.id] = false;
    });
    setExpandedCards(newExpandedState);
    setPage((prev) => (prev + 1) % totalPages);
  };

  const handlePrevPage = () => {
    const newExpandedState = {};
    visibleServices.forEach(service => {
      newExpandedState[service.id] = false;
    });
    setExpandedCards(newExpandedState);
    setPage((prev) => (prev - 1 + totalPages) % totalPages);
  };

  useEffect(() => {
    const newExpandedState = {};
    visibleServices.forEach(service => {
      newExpandedState[service.id] = expandedCards[service.id] || false;
    });
    setExpandedCards(newExpandedState);
  }, [page]);
  
  const openPdfPresentation = () => {
    const pdfUrl = `${window.location.origin}/trader-safe.pdf`;
    window.open(pdfUrl, "_blank", "noopener,noreferrer");
  };
  
  const openPlatformLink = () => {
    const platformUrl = "http://45.93.137.91/";
    window.open(platformUrl, "_blank", "noopener,noreferrer");
  };

  if (!ready) return (
    <div className="flex justify-center items-center h-screen bg-gradient-to-br from-[#23558f] via-[#3360b2] to-[#3c5ee3]">
      <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-white"></div>
    </div>
  );

  return (
    <>
      <Element name="services">
        <motion.section
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.8 }}
          className="w-full min-h-screen py-12 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
          style={{ 
            direction: "rtl",
            background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
          }}
        >
          <div className="absolute inset-0 overflow-hidden">
            <div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
            <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
            <div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
            <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
            <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
          </div>

          <div className="relative z-10 w-full max-w-7xl mx-auto">
            <motion.div
              initial={{ y: -50, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ duration: 0.6 }}
              className="text-center mb-8"
            >
              <h1 className="pt-6 mb-4 text-4xl font-extrabold md:text-5xl lg:text-6xl">
                <motion.span
                  className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
                  animate={{
                    backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
                  }}
                  transition={{
                    duration: 5,
                    repeat: Infinity,
                    ease: "linear"
                  }}
                  style={{
                    backgroundSize: "200% 100%"
                  }}
                >
                  {t('tradesafe.services.title')}
                </motion.span>
              </h1>
              <p className="text-lg font-medium text-gray-700 lg:text-xl mb-6 max-w-3xl mx-auto">
                 {t('tradesafe.subtitle')}
              </p>
              <div className="flex justify-center mb-8">
                <motion.button
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  onClick={toggleAllCards}
                  className="px-6 py-3 bg-gradient-to-r from-[#23558f] to-[#3c5ee3] text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2"
                >
                  {Object.values(expandedCards).every(Boolean) ? (
                    <>
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
                      </svg>
                      {t('tradesafe.buttons.collapseAll')}
                    </>
                  ) : (
                    <>
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                      </svg>
                      {t('tradesafe.buttons.showDetails')}
                    </>
                  )}
                </motion.button>
              </div>
            </motion.div>

            <div className="w-full px-4 relative z-10">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <AnimatePresence>
                  {visibleServices.map((service, index) => {
                    const isExpanded = expandedCards[service.id] || false;
                    const isHovered = hoveredCard === service.id;
                    return (
                      <motion.div
                        key={service.id}
                        initial={{ scale: 0.9, opacity: 0, y: 20 }}
                        animate={{ 
                          scale: 1, 
                          opacity: 1, 
                          y: 0,
                        }}
                        exit={{ scale: 0.9, opacity: 0, y: -20 }}
                        transition={{ 
                          duration: 0.4, 
                          delay: index * 0.1,
                          type: "spring",
                          stiffness: 100
                        }}
                        whileHover={{ 
                          y: -5, 
                          transition: { duration: 0.2 } 
                        }}
                        onHoverStart={() => setHoveredCard(service.id)}
                        onHoverEnd={() => setHoveredCard(null)}
                        onClick={() => toggleCard(service.id)}
                        className={`relative cursor-pointer transition-all duration-300 ease-in-out p-6 rounded-2xl shadow-lg backdrop-blur-sm bg-white/90 border-2 ${
                          isExpanded 
                            ? 'border-[#3c5ee3] shadow-xl' 
                            : 'border-white/20 hover:border-[#3c5ee3]/30'
                        }`}
                      >
                        <div className={`absolute inset-0 rounded-2xl ${service.bgColor} opacity-20`}></div>
                        <div className="relative z-10 h-full flex flex-col">
                          <div className="flex items-center justify-between mb-4">
                            <div className={`p-3 rounded-xl bg-gradient-to-br ${service.color} text-white shadow-lg`}>
                              {service.icon}
                            </div>
                            <motion.div
                              animate={{ rotate: isExpanded ? 180 : 0 }}
                              transition={{ duration: 0.3 }}
                              className="w-6 h-6 text-gray-500"
                            >
                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                              </svg>
                            </motion.div>
                          </div>
                          <div className="flex-1">
                            <h3 className="text-xl font-bold text-gray-800 mb-2">
                              {service.title}
                            </h3>
                            <p className="text-gray-600 text-sm mb-4">
                              {service.description}
                            </p>
                            <AnimatePresence>
                              {isExpanded && (
                                <motion.div
                                  initial={{ height: 0, opacity: 0 }}
                                  animate={{ height: 'auto', opacity: 1 }}
                                  exit={{ height: 0, opacity: 0 }}
                                  transition={{ duration: 0.3 }}
                                  className="overflow-hidden"
                                >
                                  <div className="pt-4 border-t border-gray-200">
                                    <p className="text-gray-700 text-sm mb-3 leading-relaxed">
                                      {service.details}
                                    </p>
                                    <div className="flex flex-wrap gap-2">
                                      {Array.isArray(service.features) && service.features.map((feature, idx) => (
                                        <motion.span
                                          key={idx}
                                          initial={{ scale: 0.8, opacity: 0 }}
                                          animate={{ scale: 1, opacity: 1 }}
                                          transition={{ delay: idx * 0.05 }}
                                          className="px-3 py-1 bg-gradient-to-r from-white to-gray-50 text-[#23558f] text-xs font-medium rounded-full border border-[#23558f]/20 shadow-sm"
                                        >
                                          {feature}
                                        </motion.span>
                                      ))}
                                    </div>
                                  </div>
                                </motion.div>
                              )}
                            </AnimatePresence>
                            <AnimatePresence>
                              {!isExpanded && isHovered && (
                                <motion.div
                                  initial={{ height: 0, opacity: 0 }}
                                  animate={{ height: 'auto', opacity: 1 }}
                                  exit={{ height: 0, opacity: 0 }}
                                  transition={{ duration: 0.2 }}
                                  className="overflow-hidden"
                                >
                                  <div className="pt-3 border-t border-dashed border-gray-300 mt-3">
                                    <p className="text-gray-700 text-xs mb-2 line-clamp-2">
                                      {service.details.split(' - ')[0]}
                                    </p>
                                    <div className="flex flex-wrap gap-1">
                                      {Array.isArray(service.features) && service.features.slice(0, 2).map((feature, idx) => (
                                        <span
                                          key={idx}
                                          className="px-2 py-1 bg-gradient-to-r from-[#dceafe] to-[#e8f4ff] text-[#23558f] text-xs font-medium rounded-full"
                                        >
                                          {feature}
                                        </span>
                                      ))}
                                    </div>
                                  </div>
                                </motion.div>
                              )}
                            </AnimatePresence>
                          </div>
                        </div>
                        {isHovered && !isExpanded && (
                          <motion.div
                            className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/5 to-transparent"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                          />
                        )}
                        {isExpanded && (
                          <motion.div
                            className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/10 to-transparent"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                          />
                        )}
                      </motion.div>
                    );
                  })}
                </AnimatePresence>
              </div>
              <div className="flex justify-center items-center gap-6 mt-12">
                <motion.button
                  whileHover={{ scale: 1.05, x: -5 }}
                  whileTap={{ scale: 0.95 }}
                  onClick={handlePrevPage}
                  className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                  </svg>
                </motion.button>
                <div className="flex gap-3">
                  {Array.from({ length: totalPages }).map((_, idx) => (
                    <motion.button
                      key={idx}
                      whileHover={{ scale: 1.2 }}
                      whileTap={{ scale: 0.9 }}
                      onClick={() => {
                        const newExpandedState = {};
                        visibleServices.forEach(service => {
                          newExpandedState[service.id] = false;
                        });
                        setExpandedCards(newExpandedState);
                        setPage(idx);
                      }}
                      className={`w-10 h-10 rounded-full flex items-center justify-center font-medium transition-all ${
                        page === idx 
                          ? 'bg-gradient-to-r from-[#3c5ee3] to-[#2ecc71] text-white shadow-lg scale-110' 
                          : 'bg-white/80 text-gray-600 hover:bg-white'
                      }`}
                    >
                      {idx + 1}
                    </motion.button>
                  ))}
                </div>
                <motion.button
                  whileHover={{ scale: 1.05, x: 5 }}
                  whileTap={{ scale: 0.95 }}
                  onClick={handleNextPage}
                  className="p-4 rounded-full bg-gradient-to-r from-[#23558f] to-[#3360b2] text-white shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </motion.button>
              </div>
              <div className="text-center mt-4">
                <span className="text-gray-600 font-medium">
                  {t('tradesafe.buttons.page', { current: page + 1, total: totalPages })}
                </span>
              </div>
            </div>
          </div>
        </motion.section>
      </Element>

      <Element name="why-us">
        <motion.section
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="w-full py-16 px-4 sm:px-6 text-gray-800 flex flex-col items-center font-sans relative overflow-hidden"
          style={{ 
            direction: "rtl",
            background: "linear-gradient(135deg, #dceafe 0%, #e8f4ff 25%, #c6e2ff 50%, #a3d0ff 75%, #23558f 100%)"
          }}
        >
          <div className="absolute inset-0 bg-white/90"></div>
          
          <div className="absolute inset-0 overflow-hidden">
            <div className="absolute -top-40 -right-40 w-80 h-80 bg-[#3c5ee3] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
            <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[#2ecc71] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-1000"></div>
            <div className="absolute top-1/2 left-1/3 w-60 h-60 bg-[#9b59b6] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse delay-500"></div>
            
            <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#23558f]/30 to-transparent"></div>
            <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#3c5ee3]/30 to-transparent"></div>
          </div>
          
          <div className="relative z-10 w-full max-w-6xl mx-auto">
            <motion.h1
              initial={{ y: -30, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              transition={{ duration: 0.6 }}
              className="pt-6 mb-12 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center"
            >
              <motion.span
                className="bg-clip-text text-transparent bg-gradient-to-r from-[#2d59b3] via-blue-200 to-[#32a896]"
                animate={{
                  backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
                }}
                transition={{
                  duration: 5,
                  repeat: Infinity,
                  ease: "linear"
                }}
                style={{
                  backgroundSize: "200% 100%"
                }}
              >
                {t('tradesafe.reasons.title')}
              </motion.span>
            </motion.h1>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
              {reasonsToChooseUs.map((reason, index) => (
                <motion.div
                  key={index}
                  initial={{ y: 50, opacity: 0, scale: 0.9 }}
                  whileInView={{ y: 0, opacity: 1, scale: 1 }}
                  transition={{ 
                    duration: 0.5, 
                    delay: index * 0.1,
                    type: "spring",
                    stiffness: 100
                  }}
                  whileHover={{ 
                    y: -8, 
                    scale: 1.02,
                    transition: { duration: 0.2 } 
                  }}
                  className="group relative bg-white/95 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-gray-100 hover:border-[#3c5ee3]/50 hover:shadow-2xl transition-all duration-300"
                >
                  <div className="flex items-start gap-4">
                    <motion.div
                      whileHover={{ rotate: [0, -10, 10, 0] }}
                      transition={{ duration: 0.5 }}
                      className={`p-3 rounded-xl bg-gradient-to-br ${
                        index % 3 === 0 ? 'from-[#23558f] to-[#3360b2]' :
                        index % 3 === 1 ? 'from-[#3c5ee3] to-[#5c7ce3]' :
                        'from-[#2ecc71] to-[#1abc9c]'
                      } text-white shadow-lg`}
                    >
                      {reason.icon}
                    </motion.div>
                    
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-gray-800 mb-2">
                        {reason.text}
                      </h3>
                      <p className="text-gray-600 text-sm leading-relaxed">
                        {reason.description}
                      </p>
                    </div>
                  </div>
                  <motion.div
                    className="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#3c5ee3]/0 via-[#3c5ee3]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                    initial={false}
                  />
                  <motion.div
                    className="absolute bottom-0 left-1/2 h-1 w-0 group-hover:w-3/4 bg-gradient-to-r from-transparent via-[#3c5ee3] to-transparent rounded-full"
                    initial={{ x: "-50%", width: "0%" }}
                    whileHover={{ width: "75%" }}
                    transition={{ duration: 0.3 }}
                  />
                </motion.div>
              ))}
            </div>
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 30 }}
              whileInView={{ opacity: 1, scale: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="mt-16 p-8 rounded-2xl shadow-2xl text-center relative overflow-hidden"
              style={{
                background: "linear-gradient(135deg, #23558f 0%, #3360b2 33%, #3c5ee3 66%, #2ecc71 100%)"
              }}
            >
              <div className="absolute inset-0">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
                <div className="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
              </div>
              
              <div className="relative z-10">
                <h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
                  {t('tradesafe.reasons.cta.title')}
                </h3>
                <p className="text-white/90 text-lg mb-6 max-w-2xl mx-auto">
                  {t('tradesafe.reasons.cta.subtitle')}
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <motion.button
                    whileHover={{ 
                      scale: 1.05,
                      boxShadow: "0 10px 25px rgba(0,0,0,0.2)"
                    }}
                    whileTap={{ scale: 0.95 }}
                    onClick={openPlatformLink}
                    className="px-8 py-3 bg-white text-[#23558f] font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center gap-2"
                  >
                    <svg 
                      xmlns="http://www.w3.org/2000/svg" 
                      className="h-5 w-5" 
                      fill="none" 
                      viewBox="0 0 24 24" 
                      stroke="currentColor"
                    >
                      <path 
                        strokeLinecap="round" 
                        strokeLinejoin="round" 
                        strokeWidth={2} 
                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" 
                      />
                    </svg>
                    {t('tradesafe.buttons.startNow')}
                  </motion.button>
                  <motion.button
                    whileHover={{ 
                      scale: 1.05,
                      boxShadow: "0 10px 25px rgba(255,255,255,0.2)"
                    }}
                    whileTap={{ scale: 0.95 }}
                    onClick={openPdfPresentation}
                    className="px-8 py-3 bg-transparent border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition-all duration-300 flex items-center justify-center gap-2"
                  >
                    <svg 
                      xmlns="http://www.w3.org/2000/svg" 
                      className="h-5 w-5" 
                      fill="none" 
                      viewBox="0 0 24 24" 
                      stroke="currentColor"
                    >
                      <path 
                        strokeLinecap="round" 
                        strokeLinejoin="round" 
                        strokeWidth={2} 
                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" 
                      />
                    </svg>
                    {t('tradesafe.buttons.viewPresentation')}
                  </motion.button>
                </div>
              </div>
            </motion.div>
          </div>
        </motion.section>
      </Element>
    </>
  );
};

export default Services;
