import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Monitor, Search, ExternalLink, Check, Star, Smartphone, PenTool, ShieldCheck, Clock, Info } from 'lucide-react';
import { Button } from '../components/Button';
import { ServiceCard } from '../components/ServiceCard';
import { OrderForm } from '../components/OrderForm';
import { ProcessSection } from '../components/ProcessSection';
import { supabase } from '../lib/supabaseClient';
import { ProductPackage } from '../types';
import { defaultPlans } from '../lib/defaultPlans';

export const Home: React.FC = () => {
  const [packages, setPackages] = useState<ProductPackage[]>(defaultPlans);

  useEffect(() => {
    const fetchPlans = async () => {
      try {
        const { data, error } = await supabase
          .from('plans')
          .select('*');
        
        if (!error && data && data.length > 0) {
          const sortedData = [...data].sort((a, b) => {
            const priceA = a.is_custom_price ? Infinity : (a.total_price || 0);
            const priceB = b.is_custom_price ? Infinity : (b.total_price || 0);
            return priceA - priceB;
          });
          setPackages(sortedData);
        } else {
          const sortedDefaults = [...defaultPlans].sort((a, b) => {
            const priceA = a.is_custom_price ? Infinity : (a.total_price || 0);
            const priceB = b.is_custom_price ? Infinity : (b.total_price || 0);
            return priceA - priceB;
          });
          setPackages(sortedDefaults);
        }
      } catch (e) {
        console.error("Error fetching plans:", e);
      }
    };
    fetchPlans();
  }, []);

  const formatPrice = (num: number) => num.toLocaleString('hu-HU') + ' Ft';

  return (
    <div className="overflow-x-hidden">
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center pt-20 bg-gray-900 overflow-hidden px-4">
        {/* Background Elements */}
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-[#0f172a] to-purple-900"></div>
          <div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
          <div className="absolute top-[-20%] left-[-10%] w-[300px] md:w-[500px] h-[300px] md:h-[500px] bg-purple-600/20 rounded-full blur-[80px] md:blur-[100px] animate-pulse"></div>
          <div className="absolute bottom-[-20%] right-[-10%] w-[300px] md:w-[500px] h-[300px] md:h-[500px] bg-blue-600/20 rounded-full blur-[80px] md:blur-[100px] animate-pulse"></div>
        </div>

        <div className="max-w-5xl mx-auto relative z-10 py-12 text-center">
          <div 
            className="inline-block px-4 py-2 bg-white/5 backdrop-blur-sm rounded-full border border-white/10 animate-fade-in-up mb-6 md:mb-8" 
            style={{ animationDelay: '0.1s' }}
          >
            <span className="text-blue-300 font-medium text-xs md:text-sm tracking-wide uppercase">Innovatív Megoldások Neked</span>
          </div>

          <h1 
            className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-extrabold text-white leading-tight animate-fade-in-up mb-4 md:mb-6 tracking-tight" 
            style={{ animationDelay: '0.2s' }}
          >
            Motion Web Stúdió
          </h1>

          <h2 
            className="text-xl sm:text-2xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 animate-fade-in-up mb-8"
            style={{ animationDelay: '0.3s' }}
          >
            Vigye vállalkozását a következő szintre
          </h2>
          
          <p 
            className="text-base md:text-lg text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up mb-10 md:mb-12 px-2" 
            style={{ animationDelay: '0.5s' }}
          >
            A MotionWeb csapata prémium minőségű weboldalakat és webáruházakat fejleszt, amelyek nemcsak szépek, de vevőket is hoznak.
          </p>
          
          <div 
            className="flex flex-col sm:flex-row gap-4 md:gap-5 justify-center animate-fade-in-up px-4 sm:px-0" 
            style={{ animationDelay: '0.7s' }}
          >
            <Link to="/#rendeles" className="w-full sm:w-auto">
              <Button size="lg" className="w-full shadow-lg shadow-purple-900/20">
                Kezdjük el <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
            </Link>
            <Link to="/#references" className="w-full sm:w-auto">
              <Button variant="outline" size="lg" className="border-white/20 text-white hover:bg-white/10 hover:border-white w-full backdrop-blur-sm">
                Referenciák
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 md:py-24 bg-gray-50 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-12 md:mb-16">
            <h2 className="text-sm md:text-base font-semibold text-primary tracking-wide uppercase">Szolgáltatásaink</h2>
            <p className="mt-2 text-2xl sm:text-3xl md:text-4xl font-extrabold text-gray-900">
              Minden, ami a sikeres online jelenléthez kell
            </p>
            <p className="mt-4 text-lg md:text-xl text-gray-500 px-2">
              Teljeskörű digitális kivitelezés a tervezéstől az üzemeltetésig.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
            <ServiceCard 
              title="Egyedi Weboldal"
              description="Modern, gyors és reszponzív weboldalak, amelyek tükrözik márkája értékeit."
              Icon={Monitor}
            />
            <ServiceCard 
              title="Reszponzív Design"
              description="Mobile-first szemléletünk garantálja, hogy oldala minden eszközön tökéletesen jelenjen meg."
              Icon={Smartphone}
            />
            <ServiceCard 
              title="SEO Optimalizálás"
              description="Keresőoptimalizált tartalom és stratégia, hogy ügyfelei könnyen megtalálják."
              Icon={Search}
            />
            <ServiceCard 
              title="UI/UX Design"
              description="Felhasználóbarát felületek tervezése a maximális látogatói élményért és konverzióért."
              Icon={PenTool}
            />
          </div>
        </div>
      </section>

      {/* References Section */}
      <section id="references" className="py-20 md:py-24 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-2xl md:text-4xl font-bold text-gray-900 mb-4">Referenciák</h2>
            <p className="text-base md:text-lg text-gray-600 max-w-2xl mx-auto">
              Tekintsd meg, milyen modern és reszponzív weboldalakat készítünk ügyfeleink számára.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
            <div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col">
              <div className="h-48 sm:h-64 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="SweetCraving" className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" />
              </div>
              <div className="p-6 md:p-8 flex flex-col flex-grow">
                <h3 className="text-xl font-bold text-gray-900 mb-2">SweetCraving</h3>
                <p className="text-xs text-gray-500 font-medium mb-4 uppercase tracking-wider">Landing Page csomag</p>
                <p className="text-gray-600 mb-6 flex-grow leading-relaxed text-sm md:text-base">Fiatalos, barátságos hangulatú bemutatkozó oldalt hoztunk létre.</p>
                <Link to="/demos/sweetcraving">
                  <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300">
                    Oldal megtekintése <ExternalLink className="w-4 h-4 ml-2" />
                  </Button>
                </Link>
              </div>
            </div>
            <div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col">
              <div className="h-48 sm:h-64 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="BlueWave" className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" />
              </div>
              <div className="p-6 md:p-8 flex flex-col flex-grow">
                <h3 className="text-xl font-bold text-gray-900 mb-2">BlueWave Solar Kft.</h3>
                <p className="text-xs text-gray-500 font-medium mb-4 uppercase tracking-wider">Pro Web csomag</p>
                <p className="text-gray-600 mb-6 flex-grow leading-relaxed text-sm md:text-base">Modern, üzleti stílusú, reszponzív weboldal kalkulátorral.</p>
                <Link to="/demos/bluewave">
                  <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300">
                    Oldal megtekintése <ExternalLink className="w-4 h-4 ml-2" />
                  </Button>
                </Link>
              </div>
            </div>
            <div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col md:col-span-2 lg:col-span-1">
              <div className="h-48 sm:h-64 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Steelguard" className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" />
              </div>
              <div className="p-6 md:p-8 flex flex-col flex-grow">
                <h3 className="text-xl font-bold text-gray-900 mb-2">Steelguard</h3>
                <p className="text-xs text-gray-500 font-medium mb-4 uppercase tracking-wider">Enterprise csomag</p>
                <p className="text-gray-600 mb-6 flex-grow leading-relaxed text-sm md:text-base">Technológiai, sötét tónusú enterprise weboldal.</p>
                <Link to="/demos/steelguard">
                  <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300">
                    Oldal megtekintése <ExternalLink className="w-4 h-4 ml-2" />
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Products/Packages Section */}
      <section id="products" className="py-20 md:py-24 bg-gray-50 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-2xl md:text-4xl font-bold text-gray-900 mb-4">Csomagajánlataink</h2>
            <p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
              Átlátható árazás, rejtett költségek nélkül.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
            {packages.map((pkg, index) => {
              const remaining = (pkg.total_price || 0) - (pkg.advance_price || 0);
              
              return (
                <div 
                  key={index} 
                  className={`relative bg-white rounded-2xl shadow-xl flex flex-col p-6 md:p-8 transition-transform hover:-translate-y-2 duration-300 ${pkg.isPopular ? 'border-2 border-primary ring-4 ring-purple-100' : 'border border-gray-100'}`}
                >
                  {pkg.isPopular && (
                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white px-4 py-1 rounded-full text-xs md:text-sm font-bold shadow-lg flex items-center gap-1">
                      <Star className="w-3 h-3 md:w-4 h-4 fill-current" /> Legnépszerűbb
                    </div>
                  )}
                  
                  <div className="mb-6">
                    <h3 className="text-xl md:text-2xl font-bold text-gray-900">{pkg.name}</h3>
                    <p className="text-gray-500 mt-2 text-xs md:text-sm min-h-[40px]">{pkg.desc}</p>
                  </div>

                  <div className="mb-8">
                    <span className="text-2xl md:text-3xl font-extrabold text-gray-900 block">
                      {pkg.is_custom_price ? 'Egyedi árazás' : (pkg.price || 'Egyedi árazás')}
                    </span>
                    {!pkg.is_custom_price && pkg.advance_price && pkg.advance_price > 0 ? (
                      <div className="mt-3 space-y-1 border-t border-gray-100 pt-3">
                        <div className="flex items-center text-[10px] md:text-xs font-bold text-gray-400 uppercase tracking-tight">
                          <div className="w-1.5 h-1.5 rounded-full bg-blue-400 mr-2"></div>
                          <span>Előleg: {formatPrice(pkg.advance_price)}</span>
                        </div>
                        <div className="flex items-center text-[10px] md:text-xs font-bold text-gray-400 uppercase tracking-tight">
                          <div className="w-1.5 h-1.5 rounded-full bg-primary mr-2"></div>
                          <span>Fennmaradó: {formatPrice(remaining)} (demó elfogadása után)</span>
                        </div>
                      </div>
                    ) : null}
                  </div>

                  <ul className="space-y-3 md:space-y-4 mb-8 flex-grow">
                    {pkg.features.map((feature, i) => (
                      <li key={i} className="flex items-start text-gray-600">
                        <Check className="w-4 h-4 md:w-5 h-5 text-green-500 mr-2 md:mr-3 flex-shrink-0 mt-0.5" />
                        <span className="text-xs md:text-sm">{feature}</span>
                      </li>
                    ))}
                  </ul>

                  <div className="mt-auto">
                    <Link to="/#rendeles" className="w-full">
                      <Button 
                        variant={pkg.isPopular ? 'primary' : 'outline'} 
                        fullWidth
                      >
                        {pkg.cta}
                      </Button>
                    </Link>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Maintenance Info Panel */}
          <div className="mt-12 w-full animate-fade-in">
            <div className="bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-[32px] p-6 md:p-10 shadow-sm flex flex-col md:flex-row items-center gap-6 md:gap-10">
              <div className="w-16 h-16 md:w-20 md:h-20 bg-primary/10 rounded-3xl flex items-center justify-center text-primary shrink-0 shadow-inner">
                <ShieldCheck className="w-8 h-8 md:w-10 md:h-10" />
              </div>
              <div className="flex-grow text-center md:text-left">
                <h4 className="text-lg md:text-xl font-black text-gray-900 mb-2 uppercase tracking-tighter">Éves üzemeltetés és karbantartás</h4>
                <p className="text-sm md:text-base text-gray-600 leading-relaxed mb-4">
                  A weboldal stabil működéséhez, a tárhely biztosításához és a folyamatos biztonsági frissítésekhez éves díjat alkalmazunk. <strong>A rendelés ára tartalmazza az első év üzemeltetését, így az éves díj megfizetése csak az átadást követő egy év múlva válik először esedékessé.</strong>
                </p>
                <div className="flex flex-wrap justify-center md:justify-start gap-4 text-[10px] md:text-xs font-bold uppercase tracking-widest text-gray-400">
                  <span className="flex items-center gap-1.5"><Clock className="w-3.5 h-3.5 text-primary" /> 2026-ig garantált ár</span>
                  <span className="flex items-center gap-1.5"><Info className="w-3.5 h-3.5 text-primary" /> Évente inflációkövető módosítás lehetséges</span>
                </div>
              </div>
              <div className="bg-white border-2 border-primary/20 rounded-[24px] px-8 py-6 text-center shadow-lg shadow-primary/5 min-w-[200px]">
                <p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mb-1">Díj / Év</p>
                <p className="text-2xl md:text-3xl font-black text-primary">59 990 Ft</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Process Section */}
      <ProcessSection />

      {/* Order Form Section */}
      <section id="rendeles" className="py-16 md:py-20 bg-white scroll-mt-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <OrderForm />
        </div>
      </section>
    </div>
  );
};