import React, { useState } from 'react';
import { Camera, Egg, Heart, Home, AlertTriangle, Check, ChevronDown, ChevronUp, Star } from 'lucide-react';

export default function ChickenRentalWebsite() {
  const [activeSection, setActiveSection] = useState('home');
  const [expandedFaq, setExpandedFaq] = useState(null);
  const [selectedChicken, setSelectedChicken] = useState(null);

  const chickens = [
    {
      id: 1,
      name: 'Betuška',
      breed: 'Leghorn bílá',
      age: '1 rok',
      eggs: '25-28 vajec/mesíc',
      personality: 'Aktivní, prátelská',
      color: 'bg-white',
      image: '??',
      description: 'Vynikající snáška bílých vajec, klidná povaha'
    },
    {
      id: 2,
      name: 'Renda',
      breed: 'Rhode Island Red',
      age: '1.5 roku',
      eggs: '22-25 vajec/mesíc',
      personality: 'Spolecenská, zvedavá',
      color: 'bg-orange-200',
      image: '??',
      description: 'Krásná cervenohnedá slepice, velká vejce'
    },
    {
      id: 3,
      name: 'Cokoládka',
      breed: 'Marans',
      age: '2 roky',
      eggs: '20-22 vajec/mesíc',
      personality: 'Klidná, majestátní',
      color: 'bg-amber-900',
      image: '??',
      description: 'Tmave hnedá vejce, nádherné perí'
    },
    {
      id: 4,
      name: 'Puntíková',
      breed: 'Plymouth Rock',
      age: '1 rok',
      eggs: '23-26 vajec/mesíc',
      personality: 'Hravá, inteligentní',
      color: 'bg-gray-300',
      image: '??',
      description: 'Cernobílé pruhované perí, velmi prátelská'
    },
    {
      id: 5,
      name: 'Zlatka',
      breed: 'Orpington buff',
      age: '1.5 roku',
      eggs: '21-24 vajec/mesíc',
      personality: 'Laskavá, mazlivá',
      color: 'bg-yellow-200',
      image: '??',
      description: 'Zlatohnedá, skvelá pro zacátecníky'
    },
    {
      id: 6,
      name: 'Modruška',
      breed: 'Araucana',
      age: '1 rok',
      eggs: '18-22 vajec/mesíc',
      personality: 'Exotická, nezávislá',
      color: 'bg-blue-200',
      image: '??',
      description: 'MODRÁ/ZELENÁ vejce! Unikátní plemeno'
    },
    {
      id: 7,
      name: 'Smetanka',
      breed: 'Sussex',
      age: '2 roky',
      eggs: '22-25 vajec/mesíc',
      personality: 'Duverivá, klidná',
      color: 'bg-amber-100',
      image: '??',
      description: 'Svetlé perí, spolehlivá snáška'
    },
    {
      id: 8,
      name: 'Kráska',
      breed: 'Wyandotte',
      age: '1 rok',
      eggs: '20-24 vajec/mesíc',
      personality: 'Elegantní, odolná',
      color: 'bg-rose-200',
      image: '??',
      description: 'Krásné kropenaté perí, odolná vuci chladu'
    }
  ];

  const extras = [
    { name: 'Premium krmivo Bio', price: 150, icon: '??' },
    { name: 'Luxusní kurník s výbehem', price: 300, icon: '??' },
    { name: '24/7 HD webkamera', price: 200, icon: '??' },
    { name: 'Veterinární pojištení', price: 250, icon: '??' },
    { name: 'Týdenní návšteva veterináre', price: 400, icon: '?????' }
  ];

  const toys = [
    { name: 'Houpacka pro slepice', price: 80, emoji: '??' },
    { name: 'Zrcadlo do kurníku', price: 50, emoji: '??' },
    { name: 'Šplhací tyc', price: 100, emoji: '??' },
    { name: 'Písku box na koupání', price: 120, emoji: '???' },
    { name: 'Interaktivní krmítko', price: 150, emoji: '??' }
  ];

  const faqs = [
    { q: 'Kolik vajec slepice snáší?', a: 'Naše slepice snášejí prumerne 5-6 vajec týdne, tedy 20-25 vajec mesícne v závislosti na plemeni.' },
    { q: 'Musím se o slepice starat?', a: 'Ne, o veškerou péci se staráme my. Vy jen dostáváte cerstvá vejce a mužete sledovat své slepice pres webkameru.' },
    { q: 'Mohu navštívit své slepice?', a: 'Ano, návštevy jsou možné po predchozí domluve.' },
    { q: 'Mohu si vybrat konkrétní slepici?', a: 'Ano! V sekci "Naše slepice" si mužete prohlédnout všechny dostupné slepice a vybrat si tu, která vám nejvíce vyhovuje.' }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-amber-50 to-orange-50">
      {/* Navigation */}
      <nav className="bg-white shadow-md sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Egg className="text-orange-500" size={32} />
            <span className="text-2xl font-bold text-gray-800">SlepicíPronájem.cz</span>
          </div>
          <div className="flex gap-6">
            {['home', 'slepice', 'cenik', 'pridatky', 'hracky', 'pravidla'].map((section) => (
              <button
                key={section}
                onClick={() => setActiveSection(section)}
                className={`px-4 py-2 rounded-lg transition-colors ${
                  activeSection === section
                    ? 'bg-orange-500 text-white'
                    : 'text-gray-600 hover:bg-orange-100'
                }`}
              >
                {section === 'home' && 'Domu'}
                {section === 'slepice' && 'Naše slepice'}
                {section === 'cenik' && 'Ceník'}
                {section === 'pridatky' && 'Príplatky'}
                {section === 'hracky' && 'Hracky'}
                {section === 'pravidla' && 'Pravidla'}
              </button>
            ))}
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      {activeSection === 'home' && (
        <div className="max-w-6xl mx-auto px-4 py-16">
          <div className="text-center mb-12">
            <h1 className="text-5xl font-bold text-gray-800 mb-4">
              Pronajmete si slepici a mejte cerstvá vejce každý den! ??
            </h1>
            <p className="text-xl text-gray-600 mb-8">
              Ekologický chov, profesionální péce, HD webkamera pro sledování
            </p>
            <button 
              onClick={() => setActiveSection('slepice')}
              className="bg-orange-500 text-white px-8 py-4 rounded-lg text-xl font-semibold hover:bg-orange-600 transition-colors shadow-lg"
            >
              Vybrat slepici
            </button>
          </div>

          {/* Featured Chickens Preview */}
          <div className="mb-16">
            <h2 className="text-3xl font-bold text-center mb-8">Naše hvezdné slepice</h2>
            <div className="grid md:grid-cols-4 gap-6">
              {chickens.slice(0, 4).map((chicken) => (
                <div key={chicken.id} className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow cursor-pointer" onClick={() => setActiveSection('slepice')}>
                  <div className={`${chicken.color} h-32 flex items-center justify-center text-6xl`}>
                    {chicken.image}
                  </div>
                  <div className="p-4">
                    <h3 className="font-bold text-xl mb-1">{chicken.name}</h3>
                    <p className="text-sm text-gray-600 mb-2">{chicken.breed}</p>
                    <p className="text-orange-500 font-semibold">{chicken.eggs}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="text-center mt-6">
              <button 
                onClick={() => setActiveSection('slepice')}
                className="text-orange-500 font-semibold hover:text-orange-600"
              >
                Zobrazit všechny slepice ?
              </button>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-8 mb-16">
            <div className="bg-white p-6 rounded-xl shadow-lg text-center">
              <Camera className="mx-auto mb-4 text-orange-500" size={48} />
              <h3 className="text-xl font-bold mb-2">Sledujte online</h3>
              <p className="text-gray-600">Vaše slepice 24/7 pres HD webkameru</p>
            </div>
            <div className="bg-white p-6 rounded-xl shadow-lg text-center">
              <Egg className="mx-auto mb-4 text-orange-500" size={48} />
              <h3 className="text-xl font-bold mb-2">Cerstvá vejce</h3>
              <p className="text-gray-600">20-28 bio vajec každý mesíc</p>
            </div>
            <div className="bg-white p-6 rounded-xl shadow-lg text-center">
              <Heart className="mx-auto mb-4 text-orange-500" size={48} />
              <h3 className="text-xl font-bold mb-2">Profesionální péce</h3>
              <p className="text-gray-600">Veterinární dohled a kvalitní krmivo</p>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-lg p-8">
            <h2 className="text-3xl font-bold text-center mb-8">Casto kladené otázky</h2>
            {faqs.map((faq, idx) => (
              <div key={idx} className="border-b border-gray-200 py-4">
                <button
                  onClick={() => setExpandedFaq(expandedFaq === idx ? null : idx)}
                  className="w-full flex justify-between items-center text-left"
                >
                  <span className="font-semibold text-lg">{faq.q}</span>
                  {expandedFaq === idx ? <ChevronUp /> : <ChevronDown />}
                </button>
                {expandedFaq === idx && (
                  <p className="mt-2 text-gray-600">{faq.a}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Chickens Gallery */}
      {activeSection === 'slepice' && (
        <div className="max-w-6xl mx-auto px-4 py-16">
          <h2 className="text-4xl font-bold text-center mb-4">Vyberte si svou slepici</h2>
          <p className="text-center text-gray-600 mb-12">
            Každá z našich slepic má jedinecnou osobnost a vlastnosti
          </p>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {chickens.map((chicken) => (
              <div 
                key={chicken.id} 
                className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all cursor-pointer"
                onClick={() => setSelectedChicken(chicken)}
              >
                <div className={`${chicken.color} h-48 flex items-center justify-center text-8xl relative`}>
                  {chicken.image}
                  {chicken.id <= 3 && (
                    <div className="absolute top-2 right-2 bg-yellow-400 text-white px-2 py-1 rounded-full text-xs font-bold flex items-center gap-1">
                      <Star size={12} fill="white" />
                      Populární
                    </div>
                  )}
                </div>
                <div className="p-6">
                  <h3 className="text-2xl font-bold mb-2">{chicken.name}</h3>
                  <div className="space-y-2 mb-4">
                    <p className="text-gray-700"><strong>Plemeno:</strong> {chicken.breed}</p>
                    <p className="text-gray-700"><strong>Vek:</strong> {chicken.age}</p>
                    <p className="text-orange-500 font-semibold"><strong>Snáška:</strong> {chicken.eggs}</p>
                    <p className="text-gray-700"><strong>Povaha:</strong> {chicken.personality}</p>
                  </div>
                  <p className="text-gray-600 text-sm mb-4 italic">{chicken.description}</p>
                  <button className="w-full bg-orange-500 text-white py-3 rounded-lg font-semibold hover:bg-orange-600 transition-colors">
                    Vybrat {chicken.name}
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* Chicken Detail Modal */}
          {selectedChicken && (
            <div 
              className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
              onClick={() => setSelectedChicken(null)}
            >
              <div 
                className="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
                onClick={(e) => e.stopPropagation()}
              >
                <div className={`${selectedChicken.color} h-64 flex items-center justify-center text-9xl`}>
                  {selectedChicken.image}
                </div>
                <div className="p-8">
                  <h2 className="text-3xl font-bold mb-4">{selectedChicken.name}</h2>
                  <div className="grid md:grid-cols-2 gap-4 mb-6">
                    <div>
                      <p className="text-gray-700 mb-2"><strong>Plemeno:</strong> {selectedChicken.breed}</p>
                      <p className="text-gray-700 mb-2"><strong>Vek:</strong> {selectedChicken.age}</p>
                      <p className="text-orange-500 font-semibold mb-2"><strong>Snáška:</strong> {selectedChicken.eggs}</p>
                    </div>
                    <div>
                      <p className="text-gray-700 mb-2"><strong>Povaha:</strong> {selectedChicken.personality}</p>
                      <p className="text-gray-700 mb-2"><strong>Stav:</strong> <span className="text-green-500 font-semibold">Dostupná</span></p>
                    </div>
                  </div>
                  <p className="text-gray-600 mb-6">{selectedChicken.description}</p>
                  <div className="flex gap-4">
                    <button className="flex-1 bg-orange-500 text-white py-3 rounded-lg font-semibold hover:bg-orange-600 transition-colors">
                      Pronajmout za 500 Kc/mesíc
                    </button>
                    <button 
                      onClick={() => setSelectedChicken(null)}
                      className="px-6 bg-gray-200 text-gray-700 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-colors"
                    >
                      Zavrít
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {/* Pricing Section */}
      {activeSection === 'cenik' && (
        <div className="max-w-4xl mx-auto px-4 py-16">
          <h2 className="text-4xl font-bold text-center mb-12">Základní ceník</h2>
          <div className="bg-white rounded-xl shadow-2xl p-8 max-w-md mx-auto">
            <div className="text-center">
              <div className="text-6xl mb-4">??</div>
              <h3 className="text-3xl font-bold mb-2">Pronájem 1 slepice</h3>
              <div className="text-5xl font-bold text-orange-500 my-6">
                500 Kc<span className="text-2xl text-gray-600">/mesíc</span>
              </div>
              <ul className="text-left space-y-3 mb-8">
                <li className="flex items-center gap-2">
                  <Check className="text-green-500" size={20} />
                  <span>20-28 cerstvých vajec mesícne</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="text-green-500" size={20} />
                  <span>Základní krmivo a péce</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="text-green-500" size={20} />
                  <span>Standardní kurník</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="text-green-500" size={20} />
                  <span>Základní webkamera (SD)</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="text-green-500" size={20} />
                  <span>Veterinární prohlídka 1x mesícne</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="text-green-500" size={20} />
                  <span>Výber z 8 ruzných plemen</span>
                </li>
              </ul>
              <button 
                onClick={() => setActiveSection('slepice')}
                className="w-full bg-orange-500 text-white py-3 rounded-lg font-semibold hover:bg-orange-600 transition-colors"
              >
                Vybrat slepici
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Extras Section */}
      {activeSection === 'pridatky' && (
        <div className="max-w-6xl mx-auto px-4 py-16">
          <h2 className="text-4xl font-bold text-center mb-12">Prémiové príplatky</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {extras.map((extra, idx) => (
              <div key={idx} className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
                <div className="text-4xl mb-4">{extra.icon}</div>
                <h3 className="text-xl font-bold mb-2">{extra.name}</h3>
                <p className="text-3xl font-bold text-orange-500 mb-4">
                  +{extra.price} Kc<span className="text-sm text-gray-600">/mesíc</span>
                </p>
                <button className="w-full bg-orange-100 text-orange-600 py-2 rounded-lg font-semibold hover:bg-orange-200 transition-colors">
                  Pridat
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Toys Section */}
      {activeSection === 'hracky' && (
        <div className="max-w-6xl mx-auto px-4 py-16">
          <h2 className="text-4xl font-bold text-center mb-4">Hracky pro slepice</h2>
          <p className="text-center text-gray-600 mb-12">
            Zpestrete život své slepici interaktivními hrackami a doplnky
          </p>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {toys.map((toy, idx) => (
              <div key={idx} className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
                <div className="text-5xl mb-4 text-center">{toy.emoji}</div>
                <h3 className="text-xl font-bold mb-2 text-center">{toy.name}</h3>
                <p className="text-2xl font-bold text-orange-500 mb-4 text-center">
                  {toy.price} Kc<span className="text-sm text-gray-600">/jednorázove</span>
                </p>
                <button className="w-full bg-orange-100 text-orange-600 py-2 rounded-lg font-semibold hover:bg-orange-200 transition-colors">
                  Koupit
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Rules Section */}
      {activeSection === 'pravidla' && (
        <div className="max-w-4xl mx-auto px-4 py-16">
          <h2 className="text-4xl font-bold text-center mb-12">Pravidla pronájmu</h2>
          
          <div className="bg-white rounded-xl shadow-lg p-8 mb-6">
            <h3 className="text-2xl font-bold mb-4 flex items-center gap-2">
              <Home className="text-orange-500" />
              Obecná pravidla
            </h3>
            <ul className="space-y-3 text-gray-700">
              <li className="flex gap-2">
                <span className="font-bold">•</span>
                <span>Slepice zustávají v naší péci po celou dobu pronájmu</span>
              </li>
              <li className="flex gap-2">
                <span className="font-bold">•</span>
                <span>Vejce si mužete vyzvedávat 1x týdne nebo dle dohody</span>
              </li>
              <li className="flex gap-2">
                <span className="font-bold">•</span>
                <span>Návštevy slepic pouze po predchozí domluve</span>
              </li>
              <li className="flex gap-2">
                <span className="font-bold">•</span>
                <span>Minimální doba pronájmu je 1 mesíc</span>
              </li>
            </ul>
          </div>

          <div className="bg-red-50 border-2 border-red-500 rounded-xl shadow-lg p-8">
            <h3 className="text-2xl font-bold mb-4 flex items-center gap-2 text-red-700">
              <AlertTriangle className="text-red-600" />
              DULEŽITÉ UPOZORNENÍ - Ochrana zvírat
            </h3>
            <div className="bg-white rounded-lg p-6 mb-4">
              <p className="text-lg font-bold mb-3 text-red-700">
                PRÍSNÝ ZÁKAZ JAKÉHOKOLI SEXUÁLNÍHO ZNEUŽÍVÁNÍ ZVÍRAT
              </p>
              <p className="text-gray-800 mb-4">
                V souladu s ceským právem (zákon c. 246/1992 Sb., na ochranu zvírat proti týrání) 
                je jakékoli sexuální zneužívání zvírat prísne zakázáno a predstavuje trestný cin.
              </p>
              <p className="text-gray-800 mb-4">
                Slepice jsou vybaveny 24/7 monitorovacím systémem a jakékoli podezrelé chování 
                bude okamžite nahlášeno policii.
              </p>
            </div>

            <div className="bg-red-100 rounded-lg p-6">
              <h4 className="font-bold text-xl mb-3 text-red-800">Sankce pri porušení:</h4>
              <ul className="space-y-2 text-gray-800">
                <li className="flex gap-2">
                  <span className="font-bold">•</span>
                  <span><strong>Okamžité ukoncení smlouvy</strong> bez vrácení penez</span>
                </li>
                <li className="flex gap-2">
                  <span className="font-bold">•</span>
                  <span><strong>Smluvní pokuta 50 000 Kc</strong></span>
                </li>
                <li className="flex gap-2">
                  <span className="font-bold">•</span>
                  <span><strong>Oznámení policii CR</strong> a veterinární správe</span>
                </li>
                <li className="flex gap-2">
                  <span className="font-bold">•</span>
                  <span><strong>Trvalý zákaz jakéhokoli pronájmu</strong> u naší spolecnosti</span>
                </li>
                <li className="flex gap-2">
                  <span className="font-bold">•</span>
                  <span><strong>Trestní stíhání</strong> dle § 302 trestního zákoníku (týrání zvírat)</span>
                </li>
              </ul>
            </div>

            <p className="mt-6 text-center font-bold text-red-700">
              Zdraví a bezpecí našich zvírat jsou naší nejvyšší prioritou!
            </p>
          </div>

          <div className="mt-6 bg-white rounded-xl shadow-lg p-8">
            <h3 className="text-2xl font-bold mb-4">Kontakt</h3>
            <p className="text-gray-700 mb-2">?? Email: info@slepicipronájem.cz</p>
            <p className="text-gray-700 mb-2">?? Telefon: +420 123 456 789</p>
            <p className="text-gray-700">?? Adresa: Farma Slepicí Dvur, 123 45 Praha</p>
          </div>
        </div>
      )}

      {/* Footer */}
      <footer className="bg-gray-800 text-white py-8 mt-16">
        <div className="max-w-6xl mx-auto px-4 text-center">
          <p className="mb-2">© 2024 SlepicíPronájem.cz - Všechna práva vyhrazena</p>
          <p className="text-sm text-gray-400">
            Registrováno u veterinární správy | IC: 12345678 | Certifikát bio chovu
          </p>
        </div>
      </footer>
    </div>
  );
}