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 na aplicação do telemóvel com mapa interativo e detalhes de elevação.',
  },
  {
    icon: BarChart3,
    title: 'Acompanhamento do Percurso',
    description: 'Após finalizar a corrida, pode acompanhar o percurso completo com análise detalhada de cada trecho.',
  },
  {
    icon: Database,
    title: 'Dados Registados',
    description: 'Todos os dados ficam registados na aplicação 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 Telemóvel
          </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-slate-900">
                        {/* Map Grid - City Style */}
                        <div
                          className="absolute inset-0 opacity-[0.15]"
                          style={{
                            backgroundImage: `linear-gradient(#475569 1px, transparent 1px),
                                              linear-gradient(90deg, #475569 1px, transparent 1px)`,
                            backgroundSize: '40px 40px',
                          }}
                        />
                        <div
                          className="absolute inset-0 opacity-[0.05]"
                          style={{
                            backgroundImage: `linear-gradient(#475569 1px, transparent 1px),
                                              linear-gradient(90deg, #475569 1px, transparent 1px)`,
                            backgroundSize: '10px 10px',
                          }}
                        />
                        
                        {/* Park Area */}
                        <div className="absolute top-1/4 left-1/4 w-1/3 h-1/4 bg-teal-900/20 rounded-lg rotate-12 border border-teal-800/30" />
                        
                        {/* Route Line - More Complex */}
                        <svg className="absolute inset-0 w-full h-full p-6" viewBox="0 0 100 100">
                          <defs>
                            <linearGradient id="routeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                              <stop offset="0%" stopColor="#22d3ee" />
                              <stop offset="100%" stopColor="#f97316" />
                            </linearGradient>
                          </defs>
                          <path
                            d="M 10,85 L 25,85 L 25,60 L 45,60 L 45,40 L 70,40 L 70,20 L 85,20"
                            fill="none"
                            stroke="url(#routeGradient)"
                            strokeWidth="3"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            className="drop-shadow-[0_0_8px_rgba(249,115,22,0.5)]"
                          />
                          {/* Mile Markers */}
                          <circle cx="25" cy="85" r="1.5" fill="white" />
                          <circle cx="45" cy="60" r="1.5" fill="white" />
                          <circle cx="70" cy="40" r="1.5" fill="white" />
                          
                          {/* Start Point */}
                          <g>
                            <circle cx="10" cy="85" r="4" fill="#22d3ee" className="animate-pulse" />
                            <circle cx="10" cy="85" r="2" fill="white" />
                          </g>
                          
                          {/* End Point */}
                          <g>
                            <circle cx="85" cy="20" r="5" fill="#f97316" />
                            <MapIcon className="w-3 h-3 text-white" x="83.5" y="18.5" />
                          </g>
                        </svg>

                        {/* Elevation Sparkline Placeholder */}
                        <div className="absolute bottom-10 left-2 right-2 h-8 bg-slate-900/80 backdrop-blur-sm border border-slate-700/50 rounded-md p-1 flex items-end gap-1 px-2">
                           {[20, 40, 35, 50, 65, 45, 60, 80].map((h, i) => (
                             <div key={i} className="flex-1 bg-teal-500/40 rounded-t-[1px]" style={{ height: `${h}%` }} />
                           ))}
                           <span className="absolute top-1 left-2 text-[8px] text-teal-400 uppercase font-bold tracking-tighter">Elevation Gain: 42m</span>
                        </div>

                        {/* Pace Sparkline Placeholder */}
                        <div className="absolute bottom-2 left-2 right-2 h-8 bg-slate-900/80 backdrop-blur-sm border border-slate-700/50 rounded-md p-1 flex items-end gap-1 px-2">
                           {[60, 55, 70, 45, 40, 50, 45, 30].map((h, i) => (
                             <div key={i} className="flex-1 bg-orange-500/40 rounded-t-[1px]" style={{ height: `${h}%` }} />
                           ))}
                           <span className="absolute top-1 left-2 text-[8px] text-orange-400 uppercase font-bold tracking-tighter">Average Pace: 5:25 min/km</span>
                        </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>
  );
}
