import React, { useEffect, useRef } from 'react';
import { Check } from 'lucide-react';

export const Offer: React.FC = () => {
  const sectionRef = useRef<HTMLElement>(null);
  const cardRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLHeadingElement>(null);
  const checkRefs = useRef<(HTMLDivElement | null)[]>([]);
  const priceRefs = useRef<(HTMLSpanElement | null)[]>([]);
  const lightningItemsRef = useRef<(HTMLSpanElement | null)[]>([]);
  const categoryRefs = useRef<(HTMLDivElement | null)[]>([]);
  const animatedRef = useRef<boolean>(false);
  const isVisibleRef = useRef<boolean>(true);
  const priceIntervalRef = useRef<NodeJS.Timeout | null>(null);
  const lightningIntervalRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    const handleVisibilityChange = () => {
      isVisibleRef.current = !document.hidden;
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            
            if (!animatedRef.current) {
              animatedRef.current = true;

              if (titleRef.current) {
                titleRef.current.animate([
                  { transform: 'translateY(-100vh)', opacity: 0 },
                  { transform: 'translateY(20px)', opacity: 1, offset: 0.6 },
                  { transform: 'translateY(-10px)', offset: 0.8 },
                  { transform: 'translateY(0)', opacity: 1 }
                ], {
                  duration: 1500,
                  easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
                  fill: 'forwards'
                });
              }

              categoryRefs.current.forEach((category, index) => {
                if (category) {
                  category.classList.add(`slide-up`, `slide-up-delay-${index + 1}`);
                }
              });

              const words = document.querySelectorAll('.slide-from-left, .slide-from-right');
              words.forEach(word => {
                word.classList.remove('slide-from-left', 'slide-from-right');
                void word.offsetWidth;
                if (word.classList.contains('slide-left')) {
                  word.classList.add('slide-from-left');
                } else {
                  word.classList.add('slide-from-right');
                }
              });

              const flashPrices = () => {
                if (!isVisibleRef.current) return;

                priceRefs.current.forEach((priceRef) => {
                  if (priceRef && Math.random() > 0.7) {
                    priceRef.classList.remove('flash-green');
                    void priceRef.offsetWidth;
                    priceRef.classList.add('flash-green');
                  }
                });

                const nextDelay = Math.random() * 2000 + 2000;
                priceIntervalRef.current = setTimeout(flashPrices, nextDelay);
              };

              const flashLightningItems = () => {
                if (!isVisibleRef.current) return;

                lightningItemsRef.current.forEach((item) => {
                  if (item && Math.random() > 0.7) {
                    item.classList.remove('lightning-flash');
                    void item.offsetWidth;
                    item.classList.add('lightning-flash');
                  }
                });

                const nextDelay = Math.random() * 1500 + 1000;
                lightningIntervalRef.current = setTimeout(flashLightningItems, nextDelay);
              };

              flashPrices();
              flashLightningItems();
            }
          }
        });
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    if (cardRef.current) {
      observer.observe(cardRef.current);
    }

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current);
      }
      if (cardRef.current) {
        observer.unobserve(cardRef.current);
      }
      if (priceIntervalRef.current) {
        clearTimeout(priceIntervalRef.current);
      }
      if (lightningIntervalRef.current) {
        clearTimeout(lightningIntervalRef.current);
      }
    };
  }, []);

  return (
    <section id="offer" className="section fade-in" ref={sectionRef}>
      <div className="container">
        <h2 
          ref={titleRef}
          className="text-3xl sm:text-4xl font-light mb-16 text-center falling-title"
          style={{ opacity: 0 }}
        >
          Notre Offre
        </h2>
        
          {/* Section intro */}
          <div className="text-center mb-16 max-w-2xl mx-auto">
            <p className="text-white/70 text-base leading-relaxed tagline">
              Restaurateurs, commerçants, artisans, indépendants, professions libérales… Toute structure souhaitant développer sa présence en ligne grâce à des outils digitaux fiables et abordables.
            </p>
          </div>

          {/* Création de site web */}
          <div ref={el => categoryRefs.current[0] = el} className="mb-16 opacity-0">
            <div className="flex items-center gap-3 mb-2">
              <span className="w-2 h-2 rounded-full bg-white/80 flex-shrink-0"></span>
              <h3 className="text-xl font-light tracking-wide uppercase">Création de site web</h3>
            </div>
            <p className="text-white/50 text-sm mb-8 ml-5">Prestations facturées une seule fois — livraison clé en main</p>

            <div className="grid md:grid-cols-2 gap-6">
              {/* Site web classique */}
              <div className="border border-white/10 p-8 hover:border-white/20 transition-all duration-300">
                <div className="flex items-start justify-between mb-5">
                  <h4 className="text-lg font-light">Site web classique</h4>
                  <div className="text-right flex-shrink-0 ml-4">
                    <span ref={el => priceRefs.current[0] = el} className="text-2xl font-light">320 €</span>
                    <p className="text-white/50 text-xs mt-1">forfait unique HT</p>
                  </div>
                </div>
                <p className="text-white/60 text-sm leading-relaxed mb-5">
                  Site professionnel, design responsive (mobile/tablette/desktop), formulaire de contact.
                </p>
                <div className="space-y-2">
                  <div className="flex items-start space-x-3">
                    <Check className="text-green-400 flex-shrink-0 mt-0.5" size={14} />
                    <span className="text-sm text-white/80">Structure HTML sémantique optimisée pour les moteurs de recherche</span>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="text-green-400 flex-shrink-0 mt-0.5" size={14} />
                    <span className="text-sm text-white/80">Balises meta, title, description et Open Graph configurées</span>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="text-green-400 flex-shrink-0 mt-0.5" size={14} />
                    <span className="text-sm text-white/80">SEO local : Google Business Profile, balisage Schema.org</span>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="text-green-400 flex-shrink-0 mt-0.5" size={14} />
                    <span className="text-sm text-white/80">Responsive design tous écrans</span>
                  </div>
                </div>
              </div>

              {/* Site web avec catalogue */}
              <div className="border border-white/10 p-8 hover:border-white/20 transition-all duration-300">
                <div className="flex items-start justify-between mb-5">
                  <h4 className="text-lg font-light">Site web avec catalogue / menu</h4>
                  <div className="text-right flex-shrink-0 ml-4">
                    <span ref={el => priceRefs.current[1] = el} className="text-2xl font-light">360 €</span>
                    <p className="text-white/50 text-xs mt-1">forfait unique HT</p>
                  </div>
                </div>
                <p className="text-white/60 text-sm leading-relaxed mb-5">
                  Site complet avec affichage en ligne de votre catalogue, menu ou prestations. Mise à jour facile, compatible tous écrans.
                </p>
                <div className="space-y-2">
                  <div className="flex items-start space-x-3">
                    <Check className="text-green-400 flex-shrink-0 mt-0.5" size={14} />
                    <span className="text-sm text-white/80">Tout ce qui est inclus dans le site classique</span>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="text-green-400 flex-shrink-0 mt-0.5" size={14} />
                    <span className="text-sm text-white/80">Pages produits / menu enrichies pour le référencement</span>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="text-green-400 flex-shrink-0 mt-0.5" size={14} />
                    <span className="text-sm text-white/80">Maillage interne optimisé, URLs propres et canoniques</span>
                  </div>
                  <div className="flex items-start space-x-3">
                    <Check className="text-green-400 flex-shrink-0 mt-0.5" size={14} />
                    <span className="text-sm text-white/80">Mise à jour facile du contenu</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Logiciels & Services Métier */}
          <div ref={el => categoryRefs.current[1] = el} className="mb-16 opacity-0">
            <div className="flex items-center gap-3 mb-2">
              <span className="w-2 h-2 rounded-full bg-white/80 flex-shrink-0"></span>
              <h3 className="text-xl font-light tracking-wide uppercase">Logiciels & Services Métier</h3>
            </div>
            <p className="text-white/50 text-sm mb-8 ml-5">Abonnements annuels — entretien, maintenance et assistance inclus</p>

            <div className="grid md:grid-cols-2 gap-6">
              <div className="border border-white/10 p-6 hover:border-white/20 transition-all duration-300">
                <div className="flex items-start justify-between mb-3">
                  <h4 className="text-base font-light">Logiciel de caisse</h4>
                  <div className="text-right flex-shrink-0 ml-4">
                    <span ref={el => priceRefs.current[2] = el} className="text-xl font-light">350 €</span>
                    <p className="text-white/50 text-xs mt-1">/ an TTC</p>
                  </div>
                </div>
                <p className="text-white/60 text-sm leading-relaxed">
                  Bilans journaliers et mensuels, classement des ventes, simulation de salaire, déduction automatique des charges.
                </p>
              </div>

              <div className="border border-white/10 p-6 hover:border-white/20 transition-all duration-300">
                <div className="flex items-start justify-between mb-3">
                  <h4 className="text-base font-light">Logiciel HACCP</h4>
                  <div className="text-right flex-shrink-0 ml-4">
                    <span ref={el => priceRefs.current[3] = el} className="text-xl font-light">200 €</span>
                    <p className="text-white/50 text-xs mt-1">/ an TTC</p>
                  </div>
                </div>
                <p className="text-white/60 text-sm leading-relaxed">
                  Enregistrement des températures, suivi du nettoyage, archivage numérique, conformité aux contrôles d'hygiène. Idéal métiers de bouche.
                </p>
              </div>

              <div className="border border-white/10 p-6 hover:border-white/20 transition-all duration-300">
                <div className="flex items-start justify-between mb-3">
                  <h4 className="text-base font-light">Paiement en ligne</h4>
                  <div className="text-right flex-shrink-0 ml-4">
                    <span ref={el => priceRefs.current[4] = el} className="text-xl font-light">dès 250 €</span>
                    <p className="text-white/50 text-xs mt-1">/ an TTC</p>
                  </div>
                </div>
                <p className="text-white/60 text-sm leading-relaxed">
                  Tarification dégressive : 25 €/article (&lt; 10) — 20 €/article (10 à 20) — 15 €/article (&gt; 20). Entretien et assistance inclus.
                </p>
              </div>

              <div className="border border-white/10 p-6 hover:border-white/20 transition-all duration-300">
                <div className="flex items-start justify-between mb-3">
                  <h4 className="text-base font-light">Hébergement + Nom de domaine</h4>
                  <div className="text-right flex-shrink-0 ml-4">
                    <span ref={el => priceRefs.current[5] = el} className="text-xl font-light">50 €</span>
                    <p className="text-white/50 text-xs mt-1">/ an TTC</p>
                  </div>
                </div>
                <p className="text-white/60 text-sm leading-relaxed">
                  Mise en ligne sécurisée de votre site et réservation de votre adresse web. Certificat SSL inclus.
                </p>
              </div>
            </div>
          </div>

          {/* Pack Complet */}
          <div ref={el => categoryRefs.current[2] = el} className="opacity-0">
            <div className="border border-white/20 p-8 md:p-10 bg-white/3 relative overflow-hidden">
              <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"></div>
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div>
                  <div className="flex items-center gap-3 mb-3">
                    <span className="text-amber-400 text-lg">★</span>
                    <h3 className="text-xl font-light tracking-wide uppercase">Offre Globale — Pack Complet</h3>
                  </div>
                  <div className="flex flex-wrap gap-x-8 gap-y-2">
                    {[
                      '-30 % sur tous les abonnements annuels',
                      'Mise à jour mensuelle offerte',
                      'Assistance prioritaire'
                    ].map((item, i) => (
                      <span
                        key={i}
                        ref={el => lightningItemsRef.current[i] = el}
                        className="flex items-center gap-2 text-sm text-white/80"
                      >
                        <span className="w-1.5 h-1.5 bg-amber-400 rounded-full flex-shrink-0"></span>
                        {item}
                      </span>
                    ))}
                  </div>
                </div>
                <a
                  href="#contact"
                  onClick={(e) => {
                    e.preventDefault();
                    const el = document.getElementById('contact');
                    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
                  }}
                  className="flex-shrink-0 px-6 py-3 border border-white/30 hover:bg-white/10 text-sm transition-all duration-300 text-center whitespace-nowrap"
                >
                  Demander un devis
                </a>
              </div>
            </div>
          </div>
      </div>
    </section>
  );
};