import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Monitor, Search, ExternalLink, Check, Star, Smartphone, PenTool } 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('*')
          .order('price', { ascending: true }); // Simple text ordering, ideally numerical but works for default prices somewhat
        
        if (!error && data && data.length > 0) {
          setPackages(data);
        }
      } catch (e) {
        console.error("Error fetching plans:", e);
      }
    };
    fetchPlans();
  }, []);

  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">
        {/* 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>
          {/* Subtle texture overlay */}
          <div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
          {/* Animated glow effects */}
          <div className="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] bg-purple-600/20 rounded-full blur-[100px] animate-pulse"></div>
          <div className="absolute bottom-[-20%] right-[-10%] w-[500px] h-[500px] bg-blue-600/20 rounded-full blur-[100px] animate-pulse"></div>
        </div>

        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 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-8" 
            style={{ animationDelay: '0.1s' }}
          >
            <span className="text-blue-300 font-medium text-sm tracking-wide uppercase">Innovatív Megoldások Neked</span>
          </div>

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

          <h2 
            className="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-lg text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up mb-12" 
            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-5 justify-center animate-fade-in-up" 
            style={{ animationDelay: '0.7s' }}
          >
            <Link to="/#rendeles">
              <Button size="lg" className="w-full sm:w-auto shadow-lg shadow-purple-900/20">
                Kezdjük el <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
            </Link>
            <Link to="/#references">
              <Button variant="outline" size="lg" className="border-white/20 text-white hover:bg-white/10 hover:border-white w-full sm:w-auto backdrop-blur-sm">
                Referenciák
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="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-16">
            <h2 className="text-base font-semibold text-primary tracking-wide uppercase">Szolgáltatásaink</h2>
            <p className="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
              Minden, ami a sikeres online jelenléthez kell
            </p>
            <p className="mt-4 text-xl text-gray-500">
              Teljeskörű digitális kivitelezés a tervezéstől az üzemeltetésig.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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-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-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Referenciák</h2>
            <p className="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-3 gap-8">
            {/* Card 1: SweetCraving */}
            <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-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 Desszertműhely" 
                  className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" 
                />
              </div>
              <div className="p-8 flex flex-col flex-grow">
                <h3 className="text-xl font-bold text-gray-900 mb-2">SweetCraving Desszertműhely</h3>
                <p className="text-sm text-gray-500 font-medium mb-4">Kézműves desszertek – Landing Page csomag</p>
                <p className="text-gray-600 mb-6 flex-grow leading-relaxed">
                  A SweetCraving számára egy fiatalos, barátságos hangulatú bemutatkozó oldalt hoztunk létre.
                </p>
                
                <div className="flex items-center gap-3 mb-8">
                  <span className="text-sm text-gray-500 mr-2">Színek:</span>
                  <div className="w-6 h-6 rounded-full bg-pink-300 border border-gray-200"></div>
                  <div className="w-6 h-6 rounded-full bg-yellow-200 border border-gray-200"></div>
                  <div className="w-6 h-6 rounded-full bg-white border border-gray-200"></div>
                </div>

                <div className="w-full">
                  <Link to="/demos/sweetcraving">
                    <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
                      Oldal megtekintése 
                      <ExternalLink className="w-4 h-4 ml-2" />
                    </Button>
                  </Link>
                </div>
              </div>
            </div>

            {/* Card 2: BlueWave */}
            <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-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 Solar Kft." 
                  className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" 
                />
              </div>
              <div className="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-sm text-gray-500 font-medium mb-4">Zöld energia megoldások – Pro Web csomag</p>
                <p className="text-gray-600 mb-6 flex-grow leading-relaxed">
                  A BlueWave Solar számára modern, üzleti stílusú, reszponzív weboldalt készítettünk.
                </p>
                
                <div className="flex items-center gap-3 mb-8">
                  <span className="text-sm text-gray-500 mr-2">Színek:</span>
                  <div className="w-6 h-6 rounded-full bg-sky-600 border border-gray-200"></div>
                  <div className="w-6 h-6 rounded-full bg-green-500 border border-gray-200"></div>
                  <div className="w-6 h-6 rounded-full bg-white border border-gray-200"></div>
                </div>

                <div className="w-full">
                  <Link to="/demos/bluewave">
                    <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
                      Oldal megtekintése 
                      <ExternalLink className="w-4 h-4 ml-2" />
                    </Button>
                  </Link>
                </div>
              </div>
            </div>

            {/* Card 3: Steelguard */}
            <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-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 Biztonságtechnika" 
                  className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" 
                />
              </div>
              <div className="p-8 flex flex-col flex-grow">
                <h3 className="text-xl font-bold text-gray-900 mb-2">Steelguard Biztonságtechnika</h3>
                <p className="text-sm text-gray-500 font-medium mb-4">Biztonságtechnika és IT rendszerek – Enterprise csomag</p>
                <p className="text-gray-600 mb-6 flex-grow leading-relaxed">
                  A Steelguard számára technológiai, sötét tónusú weboldalt készítettünk.
                </p>
                
                <div className="flex items-center gap-3 mb-8">
                  <span className="text-sm text-gray-500 mr-2">Színek:</span>
                  <div className="w-6 h-6 rounded-full bg-black border border-gray-200"></div>
                  <div className="w-6 h-6 rounded-full bg-blue-600 border border-gray-200"></div>
                  <div className="w-6 h-6 rounded-full bg-gray-300 border border-gray-200"></div>
                </div>

                <div className="w-full">
                  <Link to="/demos/steelguard">
                    <Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
                      Oldal megtekintése 
                      <ExternalLink className="w-4 h-4 ml-2" />
                    </Button>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Products/Packages Section */}
      <section id="products" className="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-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Csomagajánlataink</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Átlátható árazás, rejtett költségek nélkül. Válassza az Ön céljaihoz leginkább illeszkedő csomagot.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {packages.map((pkg, index) => (
              <div 
                key={index} 
                className={`relative bg-white rounded-2xl shadow-xl flex flex-col 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-sm font-bold shadow-lg flex items-center gap-1">
                    <Star className="w-4 h-4 fill-current" /> Legnépszerűbb
                  </div>
                )}
                
                <div className="mb-6">
                  <h3 className="text-2xl font-bold text-gray-900">{pkg.name}</h3>
                  <p className="text-gray-500 mt-2 text-sm min-h-[40px]">{pkg.desc}</p>
                </div>

                <div className="mb-8">
                  <span className="text-3xl font-extrabold text-gray-900">{pkg.price}</span>
                  {pkg.price.includes('Ft') && <span className="text-gray-500 text-sm font-normal"> + ÁFA</span>}
                </div>

                <ul className="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-5 h-5 text-green-500 mr-3 flex-shrink-0 mt-0.5" />
                      <span className="text-sm">{feature}</span>
                    </li>
                  ))}
                </ul>

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

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

      {/* Order Form Section */}
      <section id="rendeles" className="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>
  );
};