'use client';

import { useTranslation } from 'react-i18next';
import { motion } from 'motion/react';
import { CheckCircle } from 'lucide-react';
import { Container } from '@/components/ui';

export function FeatureSections() {
  const { t } = useTranslation();

  const scrollToForm = () => {
    document
      .getElementById("lead-form")
      ?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      {/* Feature Section 1: Dashboard & Tracking (Text Left, Image Right) */}
      <section className="py-24 bg-gradient-to-b from-white to-blue-50/30">
        <Container>
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <div className="inline-block px-4 py-2 bg-gradient-to-r from-[#3A4A9C]/10 to-blue-100 rounded-full mb-6">
                <span className="text-sm font-semibold text-[#3A4A9C]">
                  {t("features.tracking.badge", "Suivi en temps réel")}
                </span>
              </div>
              <h2 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">
                {t(
                  "features.tracking.title",
                  "Gérez vos livraisons avec un tableau de bord moderne",
                )}
              </h2>
              <p className="text-lg text-gray-600 mb-8 leading-relaxed">
                {t(
                  "features.tracking.description",
                  "Suivez tous vos colis en temps réel, consultez les statistiques de performance et optimisez vos opérations avec notre plateforme intuitive.",
                )}
              </p>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start gap-3">
                  <CheckCircle className="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5" />
                  <span className="text-gray-700">
                    {t(
                      "features.tracking.benefit1",
                      "Tableau de bord complet avec statistiques en direct",
                    )}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle className="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5" />
                  <span className="text-gray-700">
                    {t(
                      "features.tracking.benefit2",
                      "Notifications automatiques à chaque étape",
                    )}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle className="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5" />
                  <span className="text-gray-700">
                    {t(
                      "features.tracking.benefit3",
                      "Historique complet de toutes les livraisons",
                    )}
                  </span>
                </li>
              </ul>
              <button
                onClick={scrollToForm}
                className="inline-flex items-center gap-2 bg-[#3A4A9C] text-white px-8 py-4 rounded-xl font-semibold hover:bg-[#2d3a7a] transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
                data-cta-button="true"
              >
                {t("features.cta", "Demander une démo")}
              </button>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="relative"
            >
              {/* Professional Dashboard Mockup */}
              <div className="relative">
                <img
                  src="/sec1-image.png"
                  alt="Tracking Dashboard"
                  className="w-full h-auto"
                />
              </div>
            </motion.div>
          </div>
        </Container>
      </section>

      {/* Feature Section 2: COD & Payments (Image Left, Text Right) */}
      <section className="py-24 bg-white">
        <Container>
          <div className="grid md:grid-cols-2 gap-16 items-center">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="relative order-2 md:order-1"
            >
              {/* Professional Payments/Invoice Mockup */}
              <div className="relative">
                <img
                  src="/sec2-image.png"
                  alt="Payments & Invoices Dashboard"
                  className="w-full h-auto"
                />
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="order-1 md:order-2"
            >
              <div className="inline-block px-4 py-2 bg-gradient-to-r from-green-100 to-emerald-100 rounded-full mb-6">
                <span className="text-sm font-semibold text-green-700">
                  {t("features.payments.badge", "Paiement COD")}
                </span>
              </div>
              <h2 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">
                {t(
                  "features.payments.title",
                  "Recevez vos paiements rapidement et en toute sécurité",
                )}
              </h2>
              <p className="text-lg text-gray-600 mb-8 leading-relaxed">
                {t(
                  "features.payments.description",
                  "Collecte automatique des paiements COD avec réconciliation instantanée et virement rapide sur votre compte bancaire.",
                )}
              </p>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start gap-3">
                  <CheckCircle className="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5" />
                  <span className="text-gray-700">
                    {t(
                      "features.payments.benefit1",
                      "Versements hebdomadaires garantis",
                    )}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle className="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5" />
                  <span className="text-gray-700">
                    {t(
                      "features.payments.benefit2",
                      "Réconciliation automatique des montants",
                    )}
                  </span>
                </li>
                <li className="flex items-start gap-3">
                  <CheckCircle className="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5" />
                  <span className="text-gray-700">
                    {t(
                      "features.payments.benefit3",
                      "Rapports financiers détaillés",
                    )}
                  </span>
                </li>
              </ul>
              <button
                onClick={scrollToForm}
                className="inline-flex items-center gap-2 bg-[#3A4A9C] text-white px-8 py-4 rounded-xl font-semibold hover:bg-[#2d3a7a] transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
                data-cta-button="true"
              >
                {t("features.cta", "Demander une démo")}
              </button>
            </motion.div>
          </div>
        </Container>
      </section>
    </>
  );
}