import React, { useState, useEffect } from 'react';
import { 
  ChevronDown, 
  Play, 
  CheckCircle2, 
  XCircle, 
  Zap, 
  Video, 
  Mic, 
  Scissors, 
  LayoutTemplate, 
  Calendar, 
  FileText, 
  Camera, 
  MonitorPlay,
  ArrowRight,
  ChevronUp,
  Sparkles,
  Wand2,
  Loader2,
  Copy
} from 'lucide-react';

export default function App() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [niche, setNiche] = useState('');
  const [generatedScript, setGeneratedScript] = useState('');
  const [isGenerating, setIsGenerating] = useState(false);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const fetchWithBackoff = async (url, options, retries = 5) => {
    const delays = [1000, 2000, 4000, 8000, 16000];
    for (let i = 0; i < retries; i++) {
      try {
        const response = await fetch(url, options);
        if (response.ok) return await response.json();
      } catch (error) {
        if (i === retries - 1) throw error;
      }
      if (i < retries - 1) {
        await new Promise(resolve => setTimeout(resolve, delays[i]));
      }
    }
    throw new Error('All retries failed');
  };

  const handleGenerateScript = async () => {
    if (!niche.trim()) return;
    setIsGenerating(true);
    setGeneratedScript('');
    setCopied(false);
    
    const apiKey = "";
    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
    
    const prompt = `Jesteś ekspertem od wideo marketingu. Napisz krótki, bardzo angażujący, 30-sekundowy skrypt wideo (tylko tekst mówiony przez avatara, bez didaskaliów, bez emoji i hashtagów) na TikToka/Reels dla branży: ${niche}. Użyj języka polskiego. Skrypt ma mieć potężny "hook" (przyciągacz uwagi) na początku i jasne wezwanie do działania na końcu (CTA). Maksymalnie 4-5 krótkich, dynamicznych zdań.`;

    try {
      const data = await fetchWithBackoff(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: prompt }] }],
          generationConfig: {
            temperature: 0.7,
            maxOutputTokens: 250,
          }
        })
      });

      if (data.candidates && data.candidates[0]) {
        setGeneratedScript(data.candidates[0].content.parts[0].text);
      } else {
        setGeneratedScript("Przepraszamy, nie udało się wygenerować skryptu. Spróbuj ponownie.");
      }
    } catch (error) {
      setGeneratedScript("Wystąpił błąd połączenia z serwerami AI. Spróbuj ponownie za chwilę.");
    } finally {
      setIsGenerating(false);
    }
  };

  const copyToClipboard = () => {
    if (!generatedScript) return;
    document.execCommand('copy');
    navigator.clipboard.writeText(generatedScript).catch(() => {
        // Fallback dla iframe'ów
        const textArea = document.createElement("textarea");
        textArea.value = generatedScript;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try { document.execCommand('copy'); } catch (err) {}
        document.body.removeChild(textArea);
    });
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="min-h-screen bg-black text-slate-200 font-sans selection:bg-blue-600 selection:text-white">
      
      {/* NAVBAR */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-black/80 backdrop-blur-md border-b border-white/10 py-4' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center">
              <Video size={18} className="text-white" />
            </div>
            <span className="text-white font-bold text-xl tracking-tight">AI Video Pro</span>
          </div>
          
          <div className="hidden md:flex items-center gap-8">
            <a href="#kursy" className="text-white/80 hover:text-white transition-colors flex items-center gap-1 text-sm font-medium">
              Kursy <ChevronDown size={14} />
            </a>
            <a href="#narzedzia" className="text-white/80 hover:text-white transition-colors text-sm font-medium">Narzędzia</a>
            <a href="#roi" className="text-white/80 hover:text-white transition-colors text-sm font-medium">Opłacalność</a>
          </div>

          <div className="flex items-center gap-6">
            <a href="#" className="hidden md:block text-white/80 hover:text-white text-sm font-medium transition-colors">
              Zaloguj
            </a>
            <a href="#pricing" className="bg-white text-black px-6 py-2.5 rounded-full text-sm font-bold hover:scale-105 transition-transform duration-300 shadow-[0_0_20px_rgba(255,255,255,0.2)]">
              Rozpocznij
            </a>
          </div>
        </div>
      </nav>

      {/* HERO SECTION */}
      <section className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-black pt-20">
        {/* Background Video */}
        <div className="absolute inset-0 w-full h-full overflow-hidden z-0">
          <video 
            autoPlay 
            loop 
            muted 
            playsInline
            className="absolute inset-0 w-full h-full object-cover scale-150 object-left-top origin-top-left opacity-60"
          >
            <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260207_050933_33e2620d-09cd-43a2-80ef-4cdbb42f4194.mp4" type="video/mp4" />
          </video>
          {/* Gradient Overlay */}
          <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/60 to-black"></div>
        </div>

        {/* Hero Content */}
        <div className="relative z-10 flex-1 flex flex-col items-center justify-center text-center px-4 max-w-5xl mx-auto w-full mt-10 md:mt-0">
          
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8">
            <span className="flex h-2 w-2 rounded-full bg-blue-500 animate-pulse"></span>
            <span className="text-xs md:text-sm font-semibold text-white tracking-wide uppercase">3 kursy - 1 potężna kompetencja</span>
          </div>

          <h1 className="text-5xl md:text-7xl lg:text-[90px] font-black text-white leading-[1.1] tracking-tighter mb-6">
            Zostań <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-blue-500">AI Video</span> Producerem
          </h1>

          <p className="text-lg md:text-xl text-white/70 max-w-2xl mx-auto mb-10 font-light leading-relaxed">
            Transformuj dzisiejsze pomysły w profesjonalne wideo dzięki potędze AI. Zastąp drogie agencje samodzielną produkcją i skaluj swój biznes.
          </p>

          <a href="#pricing" className="group flex items-center gap-3 bg-white text-black px-8 py-4 rounded-full text-lg font-bold hover:scale-105 transition-all duration-300 shadow-[0_0_30px_rgba(255,255,255,0.15)] hover:shadow-[0_0_40px_rgba(255,255,255,0.3)]">
            Wybierz Pakiet i Zacznij
            <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
          </a>
        </div>

        {/* Floating Bottom Grid */}
        <div className="relative z-10 w-full max-w-7xl mx-auto px-4 pb-12 pt-20 md:pt-0">
          <div className="bg-black/70 backdrop-blur-xl border border-white/15 rounded-3xl p-6 md:p-8 shadow-2xl">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="flex flex-col gap-3">
                <div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center border border-blue-500/30">
                  <span className="text-blue-400 font-bold">1</span>
                </div>
                <h3 className="text-white font-bold text-lg">Odbierz Dostęp</h3>
                <p className="text-sm text-white/60 leading-relaxed">Zaloguj się na platformę od razu po zakupie i zyskaj dostęp do materiałów, skryptów i społeczności.</p>
              </div>
              <div className="flex flex-col gap-3">
                <div className="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center border border-purple-500/30">
                  <span className="text-purple-400 font-bold">2</span>
                </div>
                <h3 className="text-white font-bold text-lg">Skonfiguruj AI</h3>
                <p className="text-sm text-white/60 leading-relaxed">Połącz HeyGen, ElevenLabs i inne narzędzia krok po kroku z naszymi dokładnymi instrukcjami.</p>
              </div>
              <div className="flex flex-col gap-3">
                <div className="w-10 h-10 rounded-full bg-pink-500/20 flex items-center justify-center border border-pink-500/30">
                  <span className="text-pink-400 font-bold">3</span>
                </div>
                <h3 className="text-white font-bold text-lg">Stwórz Avatara</h3>
                <p className="text-sm text-white/60 leading-relaxed">Nagraj jedną krótką próbkę, aby wygenerować swojego cyfrowego bliźniaka i sklonować głos.</p>
              </div>
              <div className="flex flex-col gap-3">
                <div className="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center border border-green-500/30">
                  <span className="text-green-400 font-bold">4</span>
                </div>
                <h3 className="text-white font-bold text-lg">Produkuj i Skaluj</h3>
                <p className="text-sm text-white/60 leading-relaxed">Użyj 39 gotowych skryptów, aby generować dziesiątki profesjonalnych filmów w kilka minut.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* AI SCRIPT GENERATOR SECTION (GEMINI API) */}
      <section className="py-24 px-6 max-w-5xl mx-auto relative z-10">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-[500px] bg-blue-600/10 rounded-full blur-[120px] pointer-events-none"></div>
        
        <div className="bg-gradient-to-br from-[#12141d] to-[#0a0b10] border border-white/10 rounded-3xl p-8 md:p-12 shadow-2xl relative overflow-hidden">
          <div className="absolute top-0 right-0 p-8 opacity-10">
            <Wand2 size={120} />
          </div>

          <div className="relative z-10 max-w-2xl">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-wider mb-6">
              <Sparkles size={14} /> Powered by Gemini AI
            </div>
            
            <h2 className="text-3xl md:text-4xl font-black text-white mb-4 tracking-tight">
              Przetestuj magię AI przed zakupem
            </h2>
            <p className="text-slate-400 mb-8 leading-relaxed">
              Nie wiesz co powiedzieć na wideo? Podaj swoją branżę, a w 5 sekund napiszemy dla Ciebie w 100% darmowy, viralowy skrypt pod TikToka lub Instagram Reels.
            </p>

            <div className="flex flex-col sm:flex-row gap-3 mb-8">
              <input 
                type="text" 
                placeholder="np. Agent nieruchomości, trener personalny..." 
                value={niche}
                onChange={(e) => setNiche(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleGenerateScript()}
                className="flex-1 bg-black/50 border border-white/10 rounded-xl px-5 py-4 text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
              />
              <button 
                onClick={handleGenerateScript}
                disabled={isGenerating || !niche.trim()}
                className="bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold px-8 py-4 rounded-xl flex items-center justify-center gap-2 hover:scale-[1.02] transition-transform disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed whitespace-nowrap shadow-[0_0_20px_rgba(37,99,235,0.2)]"
              >
                {isGenerating ? (
                  <><Loader2 size={18} className="animate-spin" /> Piszę...</>
                ) : (
                  <><Sparkles size={18} /> ✨ Wygeneruj Skrypt</>
                )}
              </button>
            </div>

            {generatedScript && (
              <div className="bg-black/60 border border-white/10 rounded-2xl p-6 backdrop-blur-md mt-6 transform transition-all animate-in fade-in slide-in-from-bottom-4">
                <div className="flex items-center justify-between mb-4 border-b border-white/10 pb-4">
                  <div className="flex items-center gap-2 text-emerald-400 font-bold text-sm">
                    <CheckCircle2 size={16} /> Gotowy skrypt (Teleprompter)
                  </div>
                  <button 
                    onClick={copyToClipboard}
                    className="text-slate-400 hover:text-white transition-colors flex items-center gap-1.5 text-xs font-semibold bg-white/5 px-3 py-1.5 rounded-lg border border-white/10"
                  >
                    {copied ? <CheckCircle2 size={14} className="text-emerald-400" /> : <Copy size={14} />}
                    {copied ? 'Skopiowano!' : 'Kopiuj'}
                  </button>
                </div>
                <p className="text-slate-300 text-lg leading-relaxed font-medium">
                  "{generatedScript}"
                </p>
                <div className="mt-6 text-sm text-slate-500 flex items-start gap-2">
                  <span className="text-blue-500 font-bold mt-0.5">💡</span>
                  <span>W kursie <strong>Talking Head AI</strong> nauczysz się jak ożywić ten tekst tworząc realistycznego Avatara jednym kliknięciem.</span>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PROBLEM SECTION */}
      <section className="py-24 px-6 max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-5xl font-black text-white mb-6 tracking-tight">Filmy dla firmy w 2026</h2>
          <p className="text-lg text-slate-400 max-w-2xl mx-auto">Dwa podejścia. Jedno kosztuje 10x więcej i uzależnia Cię od wykonawcy na zawsze.</p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          {/* Tradycyjnie */}
          <div className="bg-red-950/10 border border-red-900/30 rounded-3xl p-8 md:p-12 backdrop-blur-sm relative overflow-hidden group">
            <div className="absolute top-0 right-0 w-64 h-64 bg-red-600/5 rounded-full blur-3xl -mr-20 -mt-20"></div>
            <h3 className="text-2xl font-bold text-red-400 mb-8 flex items-center gap-3">
              <XCircle className="text-red-500" /> Tradycyjnie
            </h3>
            <ul className="space-y-5">
              {[
                "Agencja: 500 - 2 000 zł za JEDEN film",
                "10 filmów = 5 000 - 20 000 zł",
                "Każda zmiana = kolejna faktura",
                "Czekasz na wolny termin ekipy",
                "Zależność od wykonawcy na zawsze"
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-3 text-slate-300">
                  <span className="mt-1 text-red-500/70 text-sm">✖</span> {item}
                </li>
              ))}
            </ul>
          </div>

          {/* AI Video */}
          <div className="bg-emerald-950/20 border border-emerald-500/30 rounded-3xl p-8 md:p-12 backdrop-blur-sm relative overflow-hidden shadow-[0_0_40px_rgba(16,185,129,0.05)]">
            <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl -mr-20 -mt-20"></div>
            <h3 className="text-2xl font-bold text-emerald-400 mb-8 flex items-center gap-3">
              <CheckCircle2 className="text-emerald-500" /> Z AI Video
            </h3>
            <ul className="space-y-5">
              {[
                "Narzędzia AI: ~200-500 zł miesięcznie",
                "20+ filmów miesięcznie samodzielnie",
                "Zmiany w 5 minut (nowy skrypt = nowy film)",
                "Talking head, cinematic, product video",
                "Pełna niezależność od pierwszego dnia"
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-3 text-slate-200">
                  <CheckCircle2 size={20} className="text-emerald-500 shrink-0 mt-0.5" /> {item}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* 3 COURSES */}
      <section id="kursy" className="py-24 bg-white/[0.02] border-y border-white/5">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-black text-white mb-6 tracking-tight">3 kursy. 1 ścieżka.</h2>
            <p className="text-lg text-slate-400 max-w-2xl mx-auto">Każdy kurs to osobny produkt. Możesz kupić Level 1 i na nim poprzestać - albo wziąć pełny pakiet i zostać mistrzem AI Video.</p>
          </div>

          <div className="grid lg:grid-cols-3 gap-8">
            {/* L1 */}
            <div className="bg-[#0f1115] border border-emerald-500/30 rounded-3xl p-8 relative overflow-hidden hover:-translate-y-2 transition-transform duration-300">
              <div className="absolute top-0 inset-x-0 h-1 bg-emerald-500"></div>
              <div className="flex justify-between items-start mb-6">
                <span className="px-3 py-1 bg-emerald-500/10 text-emerald-400 text-xs font-bold rounded-lg uppercase tracking-wider">Level 1</span>
                <span className="px-3 py-1 bg-white/5 text-slate-300 text-xs font-semibold rounded-lg">Dostępny</span>
              </div>
              <h3 className="text-2xl font-bold text-white mb-3">Talking Head AI</h3>
              <p className="text-slate-400 text-sm mb-6 min-h-[60px]">Avatar AI mówi do kamery za Ciebie. Nagraj się raz - produkuj filmy bez limitu. Najprostszy workflow.</p>
              
              <div className="flex flex-wrap gap-2 mb-8">
                {['HeyGen', 'ElevenLabs', 'CapCut'].map(t => (
                  <span key={t} className="px-2.5 py-1 bg-white/5 border border-white/10 rounded-md text-xs text-slate-300">{t}</span>
                ))}
              </div>

              <div className="space-y-3 mb-8">
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> 8 modułów (~2h)</div>
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> 39 gotowych skryptów</div>
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> Prompty, instrukcje, szablony</div>
              </div>

              <div className="pt-6 border-t border-white/10 mt-auto">
                <p className="text-sm text-slate-500 mb-1">Cena od</p>
                <div className="text-3xl font-black text-white">2 900 <span className="text-lg font-normal text-slate-500">zł netto</span></div>
              </div>
            </div>

            {/* L2 */}
            <div className="bg-[#0f1115] border border-blue-500/20 rounded-3xl p-8 relative overflow-hidden hover:-translate-y-2 transition-transform duration-300 opacity-80 hover:opacity-100">
              <div className="absolute top-0 inset-x-0 h-1 bg-blue-500"></div>
              <div className="flex justify-between items-start mb-6">
                <span className="px-3 py-1 bg-blue-500/10 text-blue-400 text-xs font-bold rounded-lg uppercase tracking-wider">Level 2</span>
                <span className="px-3 py-1 bg-white/5 text-slate-400 text-xs font-semibold rounded-lg">Wkrótce</span>
              </div>
              <h3 className="text-2xl font-bold text-white mb-3">AI Video Production</h3>
              <p className="text-slate-400 text-sm mb-6 min-h-[60px]">Cinematic video, product shots, character consistency. Multi-model workflow z najnowszymi AI.</p>
              
              <div className="flex flex-wrap gap-2 mb-8">
                {['Higgsfield', 'LTX Studio', 'Runway'].map(t => (
                  <span key={t} className="px-2.5 py-1 bg-white/5 border border-white/10 rounded-md text-xs text-slate-300">{t}</span>
                ))}
              </div>

              <div className="space-y-3 mb-8">
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div> 8 modułów (~3h)</div>
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div> Character consistency</div>
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div> Product video z AI</div>
              </div>

              <div className="pt-6 border-t border-white/10 mt-auto">
                <p className="text-sm text-slate-500 mb-1">Cena od</p>
                <div className="text-3xl font-black text-white">3 900 <span className="text-lg font-normal text-slate-500">zł netto</span></div>
              </div>
            </div>

            {/* L3 */}
            <div className="bg-[#0f1115] border border-purple-500/20 rounded-3xl p-8 relative overflow-hidden hover:-translate-y-2 transition-transform duration-300 opacity-80 hover:opacity-100">
              <div className="absolute top-0 inset-x-0 h-1 bg-purple-500"></div>
              <div className="flex justify-between items-start mb-6">
                <span className="px-3 py-1 bg-purple-500/10 text-purple-400 text-xs font-bold rounded-lg uppercase tracking-wider">Level 3</span>
                <span className="px-3 py-1 bg-white/5 text-slate-400 text-xs font-semibold rounded-lg">Wkrótce</span>
              </div>
              <h3 className="text-2xl font-bold text-white mb-3">Virtual Staging & Visual</h3>
              <p className="text-slate-400 text-sm mb-6 min-h-[60px]">Fotorealistyczny staging, product photography AI, animacje architektoniczne. Premium.</p>
              
              <div className="flex flex-wrap gap-2 mb-8">
                {['Nano Banana Pro', 'VEO 3.1', 'Midjourney'].map(t => (
                  <span key={t} className="px-2.5 py-1 bg-white/5 border border-white/10 rounded-md text-xs text-slate-300">{t}</span>
                ))}
              </div>

              <div className="space-y-3 mb-8">
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-purple-500"></div> 6 modułów (~2h)</div>
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-purple-500"></div> Fotorealistyczne wnętrza</div>
                <div className="flex items-center gap-3 text-sm text-slate-300"><div className="w-1.5 h-1.5 rounded-full bg-purple-500"></div> Sketch → render → animacja</div>
              </div>

              <div className="pt-6 border-t border-white/10 mt-auto">
                <p className="text-sm text-slate-500 mb-1">Cena od</p>
                <div className="text-3xl font-black text-white">3 900 <span className="text-lg font-normal text-slate-500">zł netto</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ROI SECTION */}
      <section id="roi" className="py-24 px-6 relative overflow-hidden">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-900/10 rounded-full blur-[100px] -z-10"></div>
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-black text-white mb-6">Matematyka jest prosta</h2>
            <p className="text-lg text-slate-400">Zobacz ile oszczędzasz decydując się na produkcję In-House.</p>
          </div>

          <div className="bg-gradient-to-br from-white/5 to-transparent border border-white/10 rounded-3xl p-8 md:p-16 backdrop-blur-xl">
            <div className="flex flex-col md:flex-row items-center justify-between gap-12">
              <div className="flex-1 text-center md:text-left">
                <p className="text-sm font-bold text-slate-400 uppercase tracking-widest mb-4">Agencja (15 filmów/msc)</p>
                <div className="text-4xl md:text-5xl font-black text-white mb-2 line-through decoration-red-500/50 decoration-4">~15 000 zł</div>
                <p className="text-slate-500 text-sm">Zależność od wykonawcy, brak elastyczności</p>
              </div>
              
              <div className="w-16 h-16 shrink-0 rounded-full bg-white/5 border border-white/10 flex items-center justify-center font-bold text-slate-400 text-xl">
                VS
              </div>

              <div className="flex-1 text-center md:text-right">
                <p className="text-sm font-bold text-emerald-400 uppercase tracking-widest mb-4">Sam z AI (15 filmów/msc)</p>
                <div className="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400 mb-2">~250 zł</div>
                <p className="text-slate-400 text-sm">Zawsze na czas, nielimitowane poprawki</p>
              </div>
            </div>

            <div className="mt-12 pt-8 border-t border-white/10 text-center">
              <p className="text-lg text-slate-300">
                Wiedza z kursu zwraca się zazwyczaj przy <span className="text-white font-bold border-b-2 border-emerald-500 pb-1">pierwszym pozyskanym kliencie</span> z Twojego nowego wideo.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* TOOLS TABLE */}
      <section id="narzedzia" className="py-24 bg-white/[0.02] border-y border-white/5">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Transparentne koszty narzędzi</h2>
            <p className="text-slate-400">Płacisz tylko za to, czego używasz. Konta zakładasz bezpośrednio u dostawców.</p>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="border-b border-white/10">
                  <th className="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-wider">Narzędzie</th>
                  <th className="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-wider">Zastosowanie</th>
                  <th className="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-wider">Kurs</th>
                  <th className="py-4 px-6 text-xs font-bold text-slate-500 uppercase tracking-wider">Koszt/msc</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-white/5 text-sm">
                <tr className="hover:bg-white/[0.02] transition-colors">
                  <td className="py-4 px-6 font-bold text-white">HeyGen</td>
                  <td className="py-4 px-6 text-slate-400">Avatary AI, generowanie filmów</td>
                  <td className="py-4 px-6"><span className="px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 text-xs">L1</span></td>
                  <td className="py-4 px-6 text-blue-400 font-medium">~100-200 zł</td>
                </tr>
                <tr className="hover:bg-white/[0.02] transition-colors">
                  <td className="py-4 px-6 font-bold text-white">ElevenLabs</td>
                  <td className="py-4 px-6 text-slate-400">Klonowanie i generowanie głosu</td>
                  <td className="py-4 px-6"><span className="px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 text-xs">L1</span></td>
                  <td className="py-4 px-6 text-blue-400 font-medium">~22-90 zł</td>
                </tr>
                <tr className="hover:bg-white/[0.02] transition-colors">
                  <td className="py-4 px-6 font-bold text-white">CapCut Pro</td>
                  <td className="py-4 px-6 text-slate-400">Montaż, napisy, efekty</td>
                  <td className="py-4 px-6"><span className="px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 text-xs">L1</span></td>
                  <td className="py-4 px-6 text-blue-400 font-medium">~35 zł</td>
                </tr>
                <tr className="hover:bg-white/[0.02] transition-colors opacity-70">
                  <td className="py-4 px-6 font-bold text-white">Higgsfield</td>
                  <td className="py-4 px-6 text-slate-400">Cinematic video, modele AI</td>
                  <td className="py-4 px-6">
                    <span className="px-2 py-1 rounded bg-blue-500/10 text-blue-400 text-xs mr-2">L2</span>
                    <span className="px-2 py-1 rounded bg-purple-500/10 text-purple-400 text-xs">L3</span>
                  </td>
                  <td className="py-4 px-6 text-slate-400">~35-475 zł</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" className="py-32 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-20">
            <h2 className="text-4xl md:text-6xl font-black text-white mb-6">Wybierz swój pakiet</h2>
            <p className="text-xl text-slate-400 max-w-2xl mx-auto">Materiały zostają u Ciebie na zawsze. Płacisz raz, korzystasz latami.</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 items-end">
            
            {/* STARTER */}
            <div className="bg-[#0f1115] border border-white/10 rounded-3xl p-8 h-full flex flex-col hover:border-white/30 transition-colors">
              <h3 className="text-xl font-bold text-white mb-2">STARTER</h3>
              <p className="text-sm text-slate-400 mb-6">Level 1: Talking Head AI</p>
              <div className="mb-8">
                <span className="text-4xl font-black text-white">2 900</span>
                <span className="text-slate-500 ml-2">zł netto</span>
              </div>
              <ul className="space-y-4 mb-8 flex-1">
                {['Level 1 kurs nagrany (8 modułów)', '39 gotowych skryptów', 'Prompty AI (4 pliki)', 'Instrukcje krok po kroku', 'Szablony + kalendarz contentu'].map((f,i) => (
                  <li key={i} className="flex items-start gap-3 text-sm text-slate-300">
                    <CheckCircle2 size={18} className="text-emerald-500 shrink-0" /> {f}
                  </li>
                ))}
              </ul>
              <button className="w-full py-3 rounded-xl border border-white/20 text-white font-bold hover:bg-white/5 transition-colors">
                Wybierz Starter
              </button>
            </div>

            {/* PRO */}
            <div className="bg-gradient-to-b from-blue-900/20 to-[#0f1115] border border-blue-500/50 rounded-3xl p-8 h-full flex flex-col relative transform lg:-translate-y-4 shadow-[0_0_40px_rgba(59,130,246,0.15)]">
              <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-wider">
                Najpopularniejszy
              </div>
              <h3 className="text-xl font-bold text-white mb-2">PRO</h3>
              <p className="text-sm text-blue-200/70 mb-6">Level 1 + Level 2</p>
              <div className="mb-2">
                <span className="text-4xl font-black text-white">5 900</span>
                <span className="text-slate-500 ml-2">zł netto</span>
              </div>
              <div className="text-xs font-bold text-emerald-400 mb-6 bg-emerald-500/10 inline-block px-2 py-1 rounded w-max">Oszczędzasz 900 zł</div>
              <ul className="space-y-4 mb-8 flex-1">
                {['Wszystko z pakietu Starter', 'Level 2: AI Video Production', 'Prompty do LTX Studio + Higgsfield', 'Brief klienta + wycena usług', 'Priorytetowe wsparcie'].map((f,i) => (
                  <li key={i} className="flex items-start gap-3 text-sm text-slate-200">
                    <CheckCircle2 size={18} className="text-blue-400 shrink-0" /> {f}
                  </li>
                ))}
              </ul>
              <button className="w-full py-3 rounded-xl bg-white text-black font-bold hover:scale-[1.02] transition-transform shadow-[0_0_20px_rgba(255,255,255,0.2)]">
                Wybierz PRO
              </button>
            </div>

            {/* COMPLETE */}
            <div className="bg-[#0f1115] border border-white/10 rounded-3xl p-8 h-full flex flex-col hover:border-white/30 transition-colors">
              <h3 className="text-xl font-bold text-white mb-2">COMPLETE</h3>
              <p className="text-sm text-slate-400 mb-6">Wszystkie 3 kursy</p>
              <div className="mb-2">
                <span className="text-4xl font-black text-white">7 900</span>
                <span className="text-slate-500 ml-2">zł netto</span>
              </div>
              <div className="text-xs font-bold text-emerald-400 mb-6 bg-emerald-500/10 inline-block px-2 py-1 rounded w-max">Oszczędzasz 2 800 zł</div>
              <ul className="space-y-4 mb-8 flex-1">
                {['Level 1, Level 2 oraz Level 3', 'Pełen pakiet materiałów i skryptów', 'Virtual staging prompty', 'Product photography prompty'].map((f,i) => (
                  <li key={i} className="flex items-start gap-3 text-sm text-slate-300">
                    <CheckCircle2 size={18} className="text-purple-400 shrink-0" /> {f}
                  </li>
                ))}
              </ul>
              <button className="w-full py-3 rounded-xl border border-white/20 text-white font-bold hover:bg-white/5 transition-colors">
                Wybierz Complete
              </button>
            </div>

            {/* VIP */}
            <div className="bg-[#0f1115] border border-white/10 rounded-3xl p-8 h-full flex flex-col hover:border-white/30 transition-colors bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] bg-blend-overlay">
              <h3 className="text-xl font-bold text-white mb-2 text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-500">VIP + WARSZTAT</h3>
              <p className="text-sm text-slate-400 mb-6">Wszystko + 1 dzień live</p>
              <div className="mb-2">
                <span className="text-4xl font-black text-white">9 900</span>
                <span className="text-slate-500 ml-2">zł netto</span>
              </div>
              <div className="text-xs font-bold text-emerald-400 mb-6 bg-emerald-500/10 inline-block px-2 py-1 rounded w-max">Oszczędzasz 6 800 zł</div>
              <ul className="space-y-4 mb-8 flex-1">
                {['Wszystkie 3 kursy', 'Warsztat live 6-8h (Zoom/Offline)', 'Wspólny setup kont i avatarów', 'Workflow produkcyjny hands-on'].map((f,i) => (
                  <li key={i} className="flex items-start gap-3 text-sm text-amber-200/80">
                    <CheckCircle2 size={18} className="text-amber-500 shrink-0" /> {f}
                  </li>
                ))}
              </ul>
              <button className="w-full py-3 rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 text-white font-bold hover:scale-[1.02] transition-transform">
                Aplikuj o VIP
              </button>
            </div>

          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-white/10 py-12 text-center text-slate-500 text-sm">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
          <div className="flex items-center gap-2">
             <div className="w-6 h-6 rounded-md bg-white/10 flex items-center justify-center">
              <Video size={12} className="text-white" />
            </div>
            <span className="text-white font-bold">AI Video Pro</span>
          </div>
          <p>© 2026 Piotr Krawczyk / nieprzelewki.pl. Wszelkie prawa zastrzeżone.</p>
          <div className="flex gap-4">
            <a href="mailto:piotr@nieprzelewki.pl" className="hover:text-white transition-colors">piotr@nieprzelewki.pl</a>
            <span>516 955 528</span>
          </div>
        </div>
      </footer>

    </div>
  );
}