import React, { useState, useEffect } from 'react';
import { 
  Utensils, Trophy, Ticket, Clock, MapPin, Menu, X, 
  Beer, Coffee, ExternalLink, Facebook, Instagram, 
  QrCode, ChevronRight, CreditCard, Mail, Phone, 
  Users, Star, Info, Heart
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('home');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [formStatus, setFormStatus] = useState(null);

  const fbLink = "https://www.facebook.com/malinskyburgerfest";

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

  const goToHome = () => {
    setActiveTab('home');
    window.scrollTo(0, 0);
  };

  const handleArmwrestlingSubmit = async (e) => {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    try {
      // POST na Google Forms (vyžaduje reálné URL a entry IDs)
      fetch(form.action, { method: 'POST', body: formData, mode: 'no-cors' });
      setFormStatus('Registrace byla úspěšně odeslána!');
      form.reset();
      setTimeout(() => setFormStatus(null), 5000);
    } catch (err) {
      setFormStatus('Chyba při odesílání. Zkuste to prosím znovu.');
    }
  };

  const foodVendors = [
    { name: "Cakir´s", desc: "Vymazlené burgery s dlouholetou tradicí a láskou ke gastronomii.", url: "#" },
    { name: "U Dřeváka", desc: "Poctivá klasika z grilu.", url: "#" },
    { name: "Smashing Machine", desc: "Mistři smash burgerů.", url: "#" },
    { name: "Balikejk", desc: "Autentická indonéská restaurace a exotický street food.", url: "#" },
    { name: "Malínské smažené kuře", desc: "Křupavé kousky podle lokální receptury.", url: "#" },
    { name: "Dos Amigos", desc: "Tacos a quesadillas v mexickém stylu.", url: "#" },
    { name: "The Pitmaster's Soul", desc: "Pravé BBQ: Šťavnatá žebírka a křídla v tradičním USA stylu.", url: "#" },
    { name: "Badass American Hot Dog", desc: "Prémiové hot dogy s bohatou oblohou a domácími recepturami.", url: "#" },
    { name: "Underground Burger Station", desc: "Bistro ve sklepě: Burgery se zauzeným jazykem, morkem a Bacon Boom speciál.", url: "#" }
  ];

  const partners = [
    { name: "Obec Nový Malín", role: "Generální partner", url: "https://www.novymalin.cz/" }, 
    { name: "KIA Kašpar Rapotín", role: "Partner", url: "https://www.kiakaspar.cz/" }, 
    { name: "SK Buildings", role: "Partner", url: "https://www.skbuildings.cz/" },
    { name: "Oramont System s.r.o.", role: "Partner", url: "https://www.oramont.cz/" },
    { name: "NFCtron", role: "Cashless podpora", url: "https://www.nfctron.com/cs" },
    { name: "Lité podlahy Hoško", role: "Partner", url: "https://www.litepodlahyhosko.cz/" },
    { name: "Smartstep Šumperk", role: "Partner", url: "https://www.smartstep.cz/" },
    { name: "Tespo", role: "Partner", url: "https://www.tespo-sumperk.cz/" },
    { name: "Statek Winter", role: "Partner", url: "https://www.statekwinter.cz/" },
    { name: "Via Delicia", role: "Partner", url: "https://www.viadelicia.cz/" }, 
    { name: "ČAWA", role: "Sportovní záštita", url: "http://www.armwrestling.cz/" }, 
    { name: "Děti dětem", role: "Iniciativa", url: "http://www.detidetem.com/" }
  ];

  return (
    <div className="min-h-screen bg-neutral-950 text-white selection:bg-orange-500 overflow-x-hidden font-sans">
      {/* NAVIGATION */}
      <nav className={`fixed w-full z-[100] transition-all duration-300 ${scrolled ? 'bg-black/95 py-3 shadow-2xl border-b border-orange-500/30' : 'bg-transparent py-6'}`}>
        <div className="container mx-auto px-4 md:px-6 flex justify-between items-center">
          <div className="flex items-center text-white">
            <div className="text-xl md:text-2xl font-black italic tracking-tighter cursor-pointer group" onClick={goToHome}>
              BURGER <span className="text-orange-500 underline decoration-2 underline-offset-4 uppercase leading-none group-hover:text-orange-400 transition-colors">FESTIVAL</span>
            </div>
          </div>
          <div className="hidden lg:flex space-x-8 items-center font-bold uppercase text-[11px] tracking-[0.2em] text-neutral-300">
            <button onClick={goToHome} className={`hover:text-orange-500 transition ${activeTab === 'home' ? 'text-orange-500' : ''}`}>Domů</button>
            <a href="#info" className="hover:text-orange-500 transition">O Festivalu</a>
            <a href="#jidlo" className="hover:text-orange-500 transition">Gril</a>
            <a href="#souteze" className="hover:text-orange-500 transition">Soutěže</a>
            <a href="#kontakt" className="hover:text-orange-500 transition">Kontakt</a>
            <div className="flex items-center gap-4 border-l border-neutral-700 pl-8 h-6">
              <a href={fbLink} target="_blank" rel="noreferrer" className="hover:text-orange-500 transition"><Facebook size={18} /></a>
            </div>
            <button onClick={() => { setActiveTab('paka'); window.scrollTo(0, 0); }} className="px-5 py-2.5 bg-orange-600 text-white rounded-xl hover:bg-orange-500 transition-all shadow-lg shadow-orange-600/20 active:scale-95">PÁKA</button>
          </div>
          <button onClick={() => setIsMenuOpen(true)} className="lg:hidden text-orange-500 p-2">
            <Menu size={32} />
          </button>
        </div>
      </nav>

      {activeTab === 'home' ? (
        <>
          {/* HERO SECTION */}
          <header className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-neutral-950">
            <div className="absolute inset-0 bg-black/70 z-10"></div>
            <img 
              src="https://images.unsplash.com/photo-1550547660-d9450f859349?auto=format&fit=crop&q=80&w=1920" 
              className="absolute inset-0 w-full h-full object-cover" 
              alt="Burger Festival Background" 
            />
            <div className="relative z-20 text-center px-4 max-w-5xl pt-32 pb-20 md:pt-48">
              <div className="flex flex-col sm:flex-row justify-center items-center gap-4 mb-10">
                <div className="inline-block px-5 py-2 border-2 border-orange-500 text-orange-500 text-[11px] font-black uppercase tracking-[0.3em] rounded-full bg-black/80 backdrop-blur-md animate-pulse shadow-lg shadow-orange-500/10">
                  5. Jubilejní ročník
                </div>
                <div className="inline-block px-5 py-2 border-2 border-white text-white text-[11px] font-black uppercase tracking-[0.3em] rounded-full bg-orange-600/80 backdrop-blur-md shadow-lg shadow-black/20">
                  Vstup Zdarma
                </div>
              </div>
              <h1 className="text-5xl md:text-8xl font-black uppercase mb-6 leading-tight tracking-tighter text-white drop-shadow-2xl">
                MALÍNSKÝ<br /><span className="text-orange-500 italic drop-shadow-[0_0_30px_rgba(249,115,22,0.5)]">BURGER FESTIVAL</span>
              </h1>
              <p className="text-xl md:text-3xl text-white font-bold mb-14 uppercase tracking-[0.25em] italic">27. Června 2026</p>
              <button 
                onClick={() => { setActiveTab('paka'); window.scrollTo(0,0); }} 
                className="group bg-white text-black hover:bg-orange-600 hover:text-white px-10 py-6 rounded-2xl font-black uppercase tracking-widest shadow-2xl transition-all transform hover:scale-105 flex items-center gap-4 mx-auto text-sm"
              >
                <Trophy className="group-hover:animate-bounce" size={24} /> INFO & REGISTRACE PÁKA
              </button>
            </div>
          </header>

          {/* QUICK INFO BAR */}
          <section className="bg-orange-600 py-8 border-y border-orange-400 relative z-30">
            <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-center gap-10 text-white text-center md:text-left">
              <div className="flex flex-col md:flex-row items-center gap-5">
                <CreditCard size={36} />
                <div className="leading-tight">
                  <h3 className="font-black uppercase text-xl italic tracking-tight">Bezhotovostní Festival</h3>
                  <p className="text-[11px] uppercase font-bold opacity-90 tracking-widest">Plaťte kartou, telefonem nebo hodinkami (NFCtron)</p>
                </div>
              </div>
              <div className="h-px w-24 bg-white/30 md:w-px md:h-12"></div>
              <div className="flex items-center gap-6">
                <div className="text-[11px] font-black uppercase opacity-80 italic">Prostory:</div>
                <div className="flex gap-4">
                  <span className="font-black text-xs tracking-widest bg-black/20 px-4 py-1.5 rounded-lg border border-white/10 uppercase">Venkovní i vnitřní</span>
                </div>
              </div>
            </div>
          </section>

          {/* FESTIVAL INFO SECTION */}
          <section id="info" className="py-24 bg-neutral-900 border-b border-white/5">
            <div className="container mx-auto px-4">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
                <div className="space-y-10 text-left">
                  <h2 className="text-5xl md:text-6xl font-black uppercase italic text-white tracking-tighter leading-none">Zábava pro<br /><span className="text-orange-500">celou rodinu</span></h2>
                  <p className="text-neutral-400 text-lg italic leading-relaxed">
                    Náš festival nabízí komfort za každého počasí. Využíváme rozsáhlý venkovní areál i prostorné vnitřní zázemí místní sokolovny.
                  </p>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <div className="p-8 bg-neutral-800 rounded-[2rem] border border-neutral-700 hover:border-orange-500/50 transition-colors group">
                      <Users size={32} className="text-orange-500 mb-5 group-hover:scale-110 transition-transform" />
                      <h4 className="font-black uppercase italic text-white mb-3 text-lg">Rodinná Zóna</h4>
                      <p className="text-sm text-neutral-500 leading-relaxed italic">V krytých prostorech najdete kino s dětskými pořady a tvořivé dílny pro nejmenší.</p>
                    </div>
                    <div className="p-8 bg-neutral-800 rounded-[2rem] border border-neutral-700 hover:border-orange-500/50 transition-colors group">
                      <Coffee size={32} className="text-orange-500 mb-5 group-hover:scale-110 transition-transform" />
                      <h4 className="font-black uppercase italic text-white mb-3 text-lg">Kavárnička</h4>
                      <p className="text-sm text-neutral-500 leading-relaxed italic">Rodiče si mohou odpočinout u skvělé kávy a dezertů přímo v centru dění.</p>
                    </div>
                  </div>
                </div>
                <div className="bg-neutral-800 p-10 md:p-14 rounded-[3.5rem] border border-neutral-700 shadow-2xl relative text-left">
                  <div className="absolute top-0 right-0 p-10 opacity-5 rotate-12"><Star size={150} /></div>
                  <h3 className="text-3xl font-black uppercase italic tracking-tighter mb-10 flex items-center gap-4">
                    <Info className="text-orange-500" size={32} /> Programové <span className="text-orange-500">Tipy</span>
                  </h3>
                  <ul className="space-y-8 relative z-10">
                    <li className="flex gap-6 items-start">
                      <div className="w-12 h-12 bg-orange-600 rounded-2xl flex items-center justify-center shrink-0 text-white font-black italic shadow-lg shadow-orange-600/20">A</div>
                      <div>
                        <strong className="text-white uppercase block mb-1 font-black tracking-wide">Armwrestling ČAWA</strong>
                        <p className="text-sm text-neutral-400 italic">Profesionální turnaj v hale doprovázený velkou OPEN show na venkovním pódiu.</p>
                      </div>
                    </li>
                    <li className="flex gap-6 items-start">
                      <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shrink-0 text-black font-black italic shadow-lg shadow-white/10">S</div>
                      <div>
                        <strong className="text-white uppercase block mb-1 font-black tracking-wide">Soutěže v pití tupláků</strong>
                        <p className="text-sm text-neutral-400 italic">Tradiční klání o hodnotné ceny pro ty, kteří se nebojí pořádné výzvy.</p>
                      </div>
                    </li>
                    <li className="flex gap-6 items-start">
                      <div className="w-12 h-12 bg-orange-600 rounded-2xl flex items-center justify-center shrink-0 text-white font-black italic shadow-lg shadow-orange-600/20">C</div>
                      <div>
                        <strong className="text-white uppercase block mb-1 font-black tracking-wide">Celodenní moderace</strong>
                        <p className="text-sm text-neutral-400 italic">Celým dnem vás provede Petr Kamlar. Hudba, soutěže a zábava od rána do večera.</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          {/* GRILL VENDORS SECTION */}
          <section id="jidlo" className="py-24 bg-neutral-950">
            <div className="container mx-auto px-4">
              <div className="flex flex-col md:flex-row md:items-end gap-5 mb-20 text-left">
                <h2 className="text-5xl md:text-7xl font-black uppercase italic text-white tracking-tighter leading-none">Mistři <span className="text-orange-500">Grilu</span></h2>
                <p className="text-neutral-500 uppercase font-black text-xs tracking-[0.3em] mb-2 border-l-4 border-orange-500 pl-6 italic">Street food elita 2026</p>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {foodVendors.map((v, i) => (
                  <div key={i} className="clickable-card bg-neutral-900 p-10 rounded-[3rem] border border-neutral-800 flex flex-col justify-between group text-left">
                    <div>
                      <div className="text-orange-500 font-black text-6xl mb-8 italic opacity-40 group-hover:opacity-100 transition-opacity">#{i+1}</div>
                      <h4 className="text-2xl font-black text-white mb-5 uppercase italic tracking-tight group-hover:text-orange-500 transition-colors">{v.name}</h4>
                      <p className="text-neutral-400 text-sm leading-relaxed italic mb-4">{v.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          {/* COMPETITION SECTION */}
          <section id="souteze" className="py-24 bg-neutral-900 border-y border-white/5">
            <div className="container mx-auto px-4 text-center">
              <h2 className="text-4xl md:text-6xl font-black uppercase italic text-white tracking-tighter mb-20">Boj o titul <span className="text-orange-500">Burgerfestu</span></h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-10 max-w-5xl mx-auto">
                <div className="p-12 bg-neutral-950 rounded-[3.5rem] border border-orange-500/20 hover:border-orange-500 transition-all group text-left relative overflow-hidden">
                  <div className="absolute -right-8 -top-8 text-orange-500 opacity-5 group-hover:opacity-10 transition-opacity"><Users size={180} /></div>
                  <div className="w-20 h-20 bg-orange-600 rounded-3xl flex items-center justify-center mb-8 shadow-2xl group-hover:scale-110 transition-transform"><Users size={40} className="text-white" /></div>
                  <h3 className="text-2xl font-black uppercase italic mb-5">Hlasování diváků</h3>
                  <p className="text-neutral-500 italic mb-8 leading-relaxed">Každý návštěvník obdrží hlasovací kartu. Rozhodněte svým hlasem, kdo připravil ten nejlepší burger festivalu!</p>
                  <div className="inline-block py-2.5 px-8 bg-white/5 rounded-full text-orange-500 font-black uppercase italic text-[10px] tracking-[0.2em] border border-orange-500/30">HLASUJÍ NÁVŠTĚVNÍCI</div>
                </div>
                <div className="p-12 bg-neutral-950 rounded-[3.5rem] border border-white/10 hover:border-white transition-all group text-left relative overflow-hidden">
                  <div className="absolute -right-8 -top-8 text-white opacity-5 group-hover:opacity-10 transition-opacity"><Trophy size={180} /></div>
                  <div className="w-20 h-20 bg-white rounded-3xl flex items-center justify-center mb-8 shadow-2xl group-hover:scale-110 transition-transform"><Star size={40} className="text-black" /></div>
                  <h3 className="text-2xl font-black uppercase italic mb-5">Champion 2026</h3>
                  <p className="text-neutral-500 italic mb-8 leading-relaxed">Souboj o prestižní putovní pohár. Odborná 4-členná porota anonymně ohodnotí kreativitu a chuť všech stánků.</p>
                  <div className="inline-block py-2.5 px-8 bg-white/5 rounded-full text-white font-black uppercase italic text-[10px] tracking-[0.2em] border border-white/30">ODBORNÁ POROTA</div>
                </div>
              </div>
            </div>
          </section>

          {/* CONTACT SECTION */}
          <section id="kontakt" className="py-24 bg-neutral-950">
            <div className="container mx-auto px-4 max-w-6xl">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
                <div className="text-left">
                  <h2 className="text-5xl font-black uppercase italic text-white tracking-tighter mb-8 leading-none">Kontaktujte <span className="text-orange-500">Nás</span></h2>
                  <p className="text-neutral-400 italic mb-12 leading-relaxed text-lg">Máte dotaz k programu, turnaji nebo chcete zpětnou vazbu? Napište nám!</p>
                  <div className="space-y-8">
                    <div className="flex items-center gap-8 group">
                      <div className="w-14 h-14 bg-neutral-900 rounded-2xl flex items-center justify-center text-orange-500 border border-neutral-800 group-hover:border-orange-500 transition-colors shadow-xl"><Mail size={24} /></div>
                      <div>
                        <p className="text-[10px] uppercase font-black text-neutral-600 tracking-widest mb-1 leading-none">Email pro dotazy</p>
                        <p className="font-bold text-white italic text-lg underline decoration-orange-500/20">malinskyburgerfest@gmail.com</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-8 group">
                      <div className="w-14 h-14 bg-neutral-900 rounded-2xl flex items-center justify-center text-orange-500 border border-neutral-800 group-hover:border-orange-500 transition-colors shadow-xl"><Phone size={24} /></div>
                      <div>
                        <p className="text-[10px] uppercase font-black text-neutral-600 tracking-widest mb-1 leading-none">Telefonní kontakt</p>
                        <p className="font-bold text-white italic text-lg tracking-wider">731 022 813</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="bg-neutral-900 p-10 md:p-14 rounded-[3.5rem] border border-neutral-800 shadow-2xl text-left">
                  <form onSubmit={(e) => { e.preventDefault(); setFormStatus('Zpráva odeslána!'); e.target.reset(); setTimeout(() => setFormStatus(null), 3000); }} className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2"><label className="text-[10px] uppercase font-black text-neutral-500 tracking-widest ml-3">Jméno</label><input type="text" required placeholder="Vaše jméno" className="w-full p-5 rounded-2xl text-white text-sm" /></div>
                      <div className="space-y-2"><label className="text-[10px] uppercase font-black text-neutral-500 tracking-widest ml-3">E-mail</label><input type="email" required placeholder="vas@email.cz" className="w-full p-5 rounded-2xl text-white text-sm" /></div>
                    </div>
                    <div className="space-y-2"><label className="text-[10px] uppercase font-black text-neutral-500 tracking-widest ml-3">Zpráva</label><textarea rows="4" required placeholder="Napište nám..." className="w-full p-5 rounded-2xl text-white text-sm resize-none"></textarea></div>
                    <button type="submit" className="w-full bg-orange-600 hover:bg-orange-500 text-white py-6 rounded-2xl font-black uppercase tracking-widest italic shadow-xl shadow-orange-600/20 active:scale-95 transition-all">Odeslat zprávu</button>
                    {formStatus && <div className="text-center p-4 bg-green-500/10 text-green-500 rounded-2xl text-xs font-bold animate-pulse">{formStatus}</div>}
                  </form>
                </div>
              </div>
            </div>
          </section>

          {/* PARTNERS SECTION */}
          <section className="py-24 bg-neutral-950">
            <div className="container mx-auto px-4 text-center">
              <h2 className="text-[11px] font-black uppercase tracking-[0.5em] text-neutral-600 mb-16 italic">Oficiální Partneři & Podpora</h2>
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-8 max-w-6xl mx-auto">
                {partners.map((p, i) => (
                  <a key={i} href={p.url} target="_blank" rel="noreferrer" className="bg-neutral-900/30 p-10 rounded-[2.5rem] border border-neutral-800 flex flex-col items-center justify-center hover:bg-neutral-900 transition-all group relative overflow-hidden">
                    <div className="absolute top-0 left-0 w-1.5 h-full bg-orange-500 transform -translate-x-full group-hover:translate-x-0 transition-transform"></div>
                    <span className="text-sm font-black uppercase tracking-tighter text-neutral-200 group-hover:text-orange-500 text-center leading-tight transition-colors">{p.name}</span>
                    <span className="text-[9px] uppercase tracking-[0.2em] text-neutral-600 mt-3 font-bold italic">{p.role}</span>
                  </a>
                ))}
              </div>
            </div>
          </section>
        </>
      ) : (
        /* ARM-WRESTLING VIEW */
        <div className="pt-48 pb-24 min-h-screen bg-neutral-950 p-4 md:p-8 text-left">
          <div className="max-w-7xl mx-auto">
            <button onClick={goToHome} className="mb-12 text-orange-500 font-black uppercase text-xs flex items-center gap-3 tracking-[0.2em] hover:translate-x-1 transition-transform">
              <ChevronRight className="rotate-180" size={20} /> Zpět na úvod
            </button>

            <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
              {/* INFO COLUMN */}
              <div className="lg:col-span-7 space-y-10 bg-neutral-900 p-10 md:p-14 rounded-[3.5rem] border border-neutral-800 shadow-2xl relative overflow-hidden">
                <div className="absolute top-0 right-0 p-10 opacity-5 -rotate-12"><Trophy size={200} /></div>
                <h2 className="text-5xl md:text-7xl font-black uppercase italic mb-8 text-white leading-none tracking-tighter relative z-10">ARM<span className="text-orange-500">WRESTLING</span> CHALLENGER</h2>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-10 relative z-10">
                  <div className="space-y-8">
                    <div>
                      <h3 className="text-orange-500 font-black uppercase mb-5 italic tracking-widest border-b border-orange-500/20 pb-2 text-xl">Kategorie</h3>
                      <div className="space-y-4 text-sm font-bold italic text-neutral-300 uppercase leading-relaxed">
                        <p><span className="text-orange-500 block text-xs mb-1">Muži:</span> do 85 kg, 95 kg, 105 kg, nad 105 kg</p>
                        <p><span className="text-orange-500 block text-xs mb-1">Ženy:</span> do 65 kg, nad 65 kg (+ Dívky U18)</p>
                        <p><span className="text-orange-500 block text-xs mb-1">Junioři:</span> U15 (Open), U18 a U23 (do 75 kg, nad 75 kg)</p>
                      </div>
                    </div>
                    <div className="p-8 bg-orange-600/10 rounded-3xl border border-orange-500/30">
                      <h4 className="text-orange-500 font-black uppercase text-xs mb-3 italic">Odměny & Prize Money</h4>
                      <p className="text-white font-black italic text-lg uppercase mb-1 leading-tight tracking-tight">OPEN (venku): 5 000 / 2 000 / 1 000 Kč</p>
                      <p className="text-neutral-400 text-[10px] italic uppercase tracking-wider">Hala: Medaile a věcné ceny</p>
                    </div>
                  </div>

                  <div className="space-y-8">
                    <div>
                      <h4 className="text-white font-black uppercase text-xs italic border-l-4 border-orange-500 pl-4 mb-5 tracking-widest">Harmonogram</h4>
                      <ul className="text-[11px] font-bold italic text-neutral-400 space-y-3 uppercase leading-tight">
                        <li className="flex justify-between border-b border-white/5 pb-2"><span>08:00 – 10:00</span> <span className="text-white">Registrace & Vážení</span></li>
                        <li className="flex justify-between border-b border-white/5 pb-2"><span>10:30</span> <span className="text-white">Zahájení (Hala)</span></li>
                        <li className="flex justify-between"><span>Odpoledne</span> <span className="text-orange-500">Open Show (Venku)</span></li>
                      </ul>
                    </div>
                    <div>
                      <h4 className="text-white font-black uppercase text-xs italic border-l-4 border-white pl-4 mb-5 tracking-widest">Startovné</h4>
                      <div className="space-y-4 text-[11px] font-bold italic text-neutral-400 uppercase leading-tight">
                        <div className="bg-white/5 p-4 rounded-2xl">
                          <p className="text-orange-500 font-black mb-1">Členové ČAWA</p>
                          <p>1 ruka: 100 Kč | Obě ruce: 200 Kč</p>
                        </div>
                        <div className="bg-white/5 p-4 rounded-2xl">
                          <p className="text-white font-black mb-1">Nečlenové</p>
                          <p>1 ruka: 150 Kč | Obě ruce: 250 Kč</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* FORM COLUMN */}
              <div className="lg:col-span-5 bg-white p-10 md:p-14 rounded-[3.5rem] shadow-2xl text-black relative">
                <h3 className="text-3xl font-black uppercase italic mb-2 tracking-tighter">Online Registrace</h3>
                <p className="text-neutral-500 text-[10px] italic mb-10 uppercase font-black tracking-widest">Předregistruj se a ušetři čas na váze</p>
                
                {/* Registrační formulář připravený k odeslání do Google Forms */}
                <form 
                  action="https://docs.google.com/forms/u/0/d/e/VLOZTE_SVE_ID/formResponse" 
                  method="POST" 
                  onSubmit={handleArmwrestlingSubmit} 
                  className="space-y-5"
                >
                  <div className="space-y-1.5">
                    <label className="text-[10px] uppercase font-black text-neutral-400 tracking-widest ml-4">Jméno a Příjmení</label>
                    <input type="text" name="entry.1000001" required placeholder="Jan Novák" className="w-full p-5 rounded-2xl text-sm !bg-neutral-100 !text-black border-transparent" />
                  </div>
                  
                  <div className="grid grid-cols-2 gap-5">
                    <div className="space-y-1.5">
                      <label className="text-[10px] uppercase font-black text-neutral-400 tracking-widest ml-4">Ročník</label>
                      <input type="number" name="entry.1000002" required placeholder="1995" className="w-full p-5 rounded-2xl text-sm !bg-neutral-100 !text-black border-transparent" />
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-[10px] uppercase font-black text-neutral-400 tracking-widest ml-4">Váha (kg)</label>
                      <input type="number" name="entry.1000003" required placeholder="85" className="w-full p-5 rounded-2xl text-sm !bg-neutral-100 !text-black border-transparent" />
                    </div>
                  </div>

                  <div className="space-y-1.5">
                    <label className="text-[10px] uppercase font-black text-neutral-400 tracking-widest ml-4">Klub / Město</label>
                    <input type="text" name="entry.1000004" required placeholder="Název klubu" className="w-full p-5 rounded-2xl text-sm !bg-neutral-100 !text-black border-transparent" />
                  </div>

                  <div className="space-y-1.5">
                    <label className="text-[10px] uppercase font-black text-neutral-400 tracking-widest ml-4">Kategorie</label>
                    <select name="entry.1000005" required className="w-full p-5 rounded-2xl text-sm !bg-neutral-100 !text-black border-transparent cursor-pointer">
                      <option value="">Vyberte kategorii...</option>
                      <option value="muzi">Muži</option>
                      <option value="zeny">Ženy</option>
                      <option value="juniori">Junioři</option>
                    </select>
                  </div>

                  <div className="space-y-1.5">
                    <label className="text-[10px] uppercase font-black text-neutral-400 tracking-widest ml-4">Kontakt (Tel/Email)</label>
                    <input type="text" name="entry.1000006" required placeholder="Ozvěte se nám" className="w-full p-5 rounded-2xl text-sm !bg-neutral-100 !text-black border-transparent" />
                  </div>

                  <button type="submit" className="w-full bg-orange-600 hover:bg-orange-500 text-white py-6 rounded-2xl font-black uppercase tracking-widest italic mt-6 shadow-xl shadow-orange-500/20 active:scale-95 transition-all">
                    Odeslat registraci
                  </button>
                  
                  {formStatus && (
                    <div className="text-center p-5 bg-green-500/10 text-green-600 rounded-2xl text-xs font-bold animate-pulse ring-1 ring-green-600/20">
                      {formStatus}
                    </div>
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* FOOTER */}
      <footer className="bg-black py-20 text-center border-t border-neutral-900">
        <div className="text-3xl font-black italic tracking-tighter mb-12 uppercase text-neutral-100">
          Nový <span className="text-orange-500 underline decoration-[6px] underline-offset-[12px]">Malín</span> 2026
        </div>
        <div className="flex justify-center gap-10 mb-16">
          <a href={fbLink} target="_blank" rel="noreferrer" className="w-14 h-14 bg-neutral-900 rounded-2xl flex items-center justify-center hover:bg-orange-600 hover:text-white transition-all transform hover:rotate-12 border border-neutral-800 shadow-xl active:scale-90"><Facebook size={28} /></a>
          <a href="#" className="w-14 h-14 bg-neutral-900 rounded-2xl flex items-center justify-center hover:bg-orange-600 hover:text-white transition-all transform hover:-rotate-12 border border-neutral-800 shadow-xl active:scale-90"><Instagram size={28} /></a>
        </div>
        <div className="space-y-6 max-w-2xl mx-auto px-6">
          <p className="text-sm uppercase font-black tracking-[0.25em] text-neutral-200 italic">© 2026 Malínský Burger Festival</p>
          <div className="h-px w-24 bg-orange-500 mx-auto opacity-50"></div>
          <div className="flex flex-col md:flex-row justify-center items-center gap-6 text-[13px] uppercase font-black tracking-[0.2em] italic">
            <span className="text-orange-500 underline decoration-2 underline-offset-8">Vstup na akci zdarma</span>
            <span className="hidden md:inline text-neutral-700">/</span>
            <span className="text-white font-bold drop-shadow-sm">Moderuje: Petr Kamlar</span>
          </div>
        </div>
      </footer>

      {/* MOBILE MENU */}
      {isMenuOpen && (
        <div className="mobile-menu-overlay fixed inset-0 flex flex-col items-center justify-center space-y-10 p-10 animate-in slide-in-from-right">
          <button onClick={() => setIsMenuOpen(false)} className="absolute top-8 right-8 text-orange-500 p-2"><X size={48} /></button>
          <button onClick={() => { goToHome(); setIsMenuOpen(false); }} className="text-4xl font-black uppercase italic text-white tracking-tighter">Domů</button>
          <button onClick={() => { setActiveTab('paka'); setIsMenuOpen(false); window.scrollTo(0,0); }} className="text-4xl font-black uppercase italic text-orange-500 tracking-tighter">Turnaj Páka</button>
          <a href="#jidlo" onClick={() => setIsMenuOpen(false)} className="text-4xl font-black uppercase italic text-white tracking-tighter">Gril</a>
          <a href="#info" onClick={() => setIsMenuOpen(false)} className="text-4xl font-black uppercase italic text-white tracking-tighter">O Festivalu</a>
          <div className="flex gap-10 mt-6 pt-10 border-t border-neutral-800 w-full justify-center">
            <a href={fbLink} target="_blank" rel="noreferrer" className="text-white hover:text-orange-500 transition"><Facebook size={40} /></a>
            <a href="#" className="text-white hover:text-orange-500 transition"><Instagram size={40} /></a>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;