import { useEffect, useRef } from 'react';
import { Map as MapIcon, BarChart3, Database } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

const integrationFeatures = [
  {
    icon: MapIcon,
    title: 'Visualização do Trajeto',
    description: 'O trajeto completo é exibido no aplicativo do smartphone com mapa interativo e detalhes de elevação.',
  },
  {
    icon: BarChart3,
    title: 'Acompanhamento do Percurso',
    description: 'Após finalizar a corrida, você pode acompanhar o percurso completo com análise detalhada de cada trecho.',
  },
  {
    icon: Database,
    title: 'Dados Registrados',
    description: 'Todos os dados ficam registrados no aplicativo para análise de desempenho e acompanhamento de evolução.',
  },
];

export function Integration() {
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const elements = entry.target.querySelectorAll('.reveal-integration');
            elements.forEach((el, index) => {
              setTimeout(() => {
                el.classList.add('animate-fade-in-up');
              }, index * 150);
            });
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.15 }
    );

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

    return () => observer.disconnect();
  }, []);

  return (
    <section ref={sectionRef} className="py-24 lg:py-32 bg-[#0f172a] overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16 reveal-integration opacity-0">
          <Badge className="mb-4 bg-slate-800 text-cyan-400 border-cyan-500/30 hover:bg-slate-700 px-4 py-1.5 text-xs font-semibold tracking-wider uppercase">
            Conectividade
          </Badge>
          <h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
            Integração com Smartphone
          </h2>
          <div className="w-16 h-1 bg-gradient-to-r from-orange-500 to-orange-400 mx-auto rounded-full mb-6" />
        </div>

        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* App Mockup - Left Side */}
          <div className="reveal-integration opacity-0 relative order-2 lg:order-1">
            <div className="relative max-w-sm mx-auto">
              {/* Phone Frame */}
              <div className="relative bg-slate-800 rounded-[2.5rem] p-3 shadow-2xl shadow-slate-900/50 border border-slate-700">
                {/* Screen */}
                <div className="bg-slate-900 rounded-[2rem] overflow-hidden aspect-[9/19]">
                  {/* App Header */}
                  <div className="bg-slate-800 px-4 py-3 flex items-center justify-between">
                    <span className="text-white font-semibold text-sm">9:41</span>
                    <div className="flex gap-1">
                      <div className="w-4 h-4 rounded-full bg-slate-600" />
                      <div className="w-4 h-4 rounded-full bg-slate-600" />
                    </div>
                  </div>

                  {/* App Content */}
                  <div className="p-4">
                    {/* Run Title */}
                    <div className="mb-4">
                      <h4 className="text-white font-semibold text-lg">Corrida Matinal</h4>
                      <p className="text-slate-400 text-xs">11 de Fevereiro, 2026</p>
                    </div>

                    {/* Map Placeholder */}
                    <div className="bg-slate-800 rounded-xl aspect-square mb-4 relative overflow-hidden">
                      <div className="absolute inset-0 bg-gradient-to-br from-slate-700 to-slate-800">
                        {/* Map Grid */}
                        <div
                          className="absolute inset-0 opacity-20"
                          style={{
                            backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                                              linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
                            backgroundSize: '20px 20px',
                          }}
                        />
                        {/* Route Line */}
                        <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                          <path
                            d="M20,80 Q30,60 40,65 T60,50 T80,30"
                            fill="none"
                            stroke="#f97316"
                            strokeWidth="2"
                            strokeLinecap="round"
                          />
                          {/* Start Point */}
                          <circle cx="20" cy="80" r="3" fill="#0d9488" />
                          {/* End Point */}
                          <circle cx="80" cy="30" r="3" fill="#f97316" />
                        </svg>
                        {/* Location Pin */}
                        <div className="absolute top-1/3 right-1/4">
                          <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center shadow-lg">
                            <MapIcon className="w-3 h-3 text-white" />
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Stats */}
                    <div className="grid grid-cols-3 gap-3">
                      <div className="text-center">
                        <p className="text-orange-400 font-bold text-xl">5.2</p>
                        <p className="text-slate-400 text-xs">km</p>
                      </div>
                      <div className="text-center">
                        <p className="text-orange-400 font-bold text-xl">28:14</p>
                        <p className="text-slate-400 text-xs">tempo</p>
                      </div>
                      <div className="text-center">
                        <p className="text-orange-400 font-bold text-xl">5:25</p>
                        <p className="text-slate-400 text-xs">pace</p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Notch */}
                <div className="absolute top-6 left-1/2 -translate-x-1/2 w-24 h-6 bg-slate-800 rounded-full" />
              </div>

              {/* Floating Badge */}
              <div className="absolute -top-4 -right-4 bg-orange-500 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg">
                APP
              </div>
            </div>
          </div>

          {/* Features List - Right Side */}
          <div className="order-1 lg:order-2 space-y-6">
            {integrationFeatures.map((feature, index) => {
              const Icon = feature.icon;

              return (
                <div
                  key={index}
                  className="reveal-integration opacity-0 group flex gap-4 p-4 rounded-xl hover:bg-slate-800/50 transition-colors duration-300"
                >
                  <div className="w-12 h-12 rounded-xl bg-slate-700/50 border border-slate-600 flex items-center justify-center flex-shrink-0 group-hover:bg-slate-700 transition-colors">
                    <Icon className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-display font-semibold text-lg text-white mb-1">
                      {feature.title}
                    </h3>
                    <p className="text-slate-400 text-sm leading-relaxed">
                      {feature.description}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}