import React, { useState } from "react";

// Self-contained React + Tailwind component.
// Removed external libs (framer-motion, lucide-react, custom UI libs)
// so this file can be dropped into any React + Tailwind project without
// missing imports.

export default function LandingPage() {
  const [emergencyRemoved, setEmergencyRemoved] = useState(false);

  const tours = [
    { id: 1, title: "Сплав Дністром — 5 днів", desc: "Пригодницький тур для новачків", price: "$250", img: "/images/dnister-5.jpg" },
    { id: 2, title: "Сплав Дністром — 10 днів", desc: "Для тих, хто хоче зануритись у дикість", price: "$450", img: "/images/dnister-10.jpg" },
    { id: 3, title: "Сплав Дністром — 14 днів", desc: "Максимальне виживання на воді", price: "$600", img: "/images/dnister-14.jpg" },
    { id: 4, title: "Ексклюзив — 1 місяць", desc: "Тільки сірники, ніж і шнурок", price: "$1200", img: "/images/exclusive-1m.jpg" },
    { id: 5, title: "ТОП Ексклюзив — 2 місяці Карпати", desc: "Виживання без спорядження!", price: "$3000", img: "/images/exclusive-2m.jpg" },
  ];

  function AlertIcon({ className = "w-5 h-5" }) {
    return (
      <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden>
        <path d="M12 9v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M12 17.5v.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
  }

  function MapPinIcon({ className = "w-4 h-4" }) {
    return (
      <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden>
        <path d="M21 10c0 7-9 12-9 12S3 17 3 10a9 9 0 1 1 18 0z" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="12" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.4" />
      </svg>
    );
  }

  function StarIcon({ className = "w-4 h-4" }) {
    return (
      <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
        <path d="M12 .587l3.668 7.431 8.2 1.193-5.934 5.788 1.401 8.162L12 18.896 4.665 23.161l1.401-8.162L.132 9.211l8.2-1.193z" />
      </svg>
    );
  }

  const handleBook = (tour) => {
    // lightweight demo behaviour so integration is safe in any environment
    if (typeof window !== "undefined") {
      window.alert(`Бронювання: ${tour.title} — ${tour.price}`);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      {/* HERO */}
      <header className="relative h-[80vh] flex items-center justify-center bg-cover bg-center" style={{ backgroundImage: "url('/images/hero-dnister.jpg')" }}>
        <div className="absolute inset-0 bg-black/45" />
        <div className="relative z-10 text-center px-6 max-w-3xl">
          <h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight">Виживання. Пригоди. Враження.</h1>
          <p className="mt-4 text-lg text-white/90">Сплави по Дністру та екстремальні тури в Карпатах — обирай свій рівень</p>
          <div className="mt-6 flex justify-center gap-4">
            <button className="px-6 py-3 bg-yellow-400 hover:bg-yellow-500 rounded-lg font-semibold">Обрати тур</button>
            <a href="#tours" className="px-6 py-3 border border-white/30 rounded-lg text-white/90">Деталі</a>
          </div>
        </div>
      </header>

      {/* TOURS */}
      <main className="py-16 px-6 max-w-7xl mx-auto" id="tours">
        <h2 className="text-3xl font-bold text-center mb-10">Наші тури</h2>
        <div className="grid gap-8 md:grid-cols-3">
          {tours.map((tour) => (
            <article key={tour.id} className="bg-white rounded-2xl shadow-md overflow-hidden">
              <img src={tour.img} alt={tour.title} className="h-44 w-full object-cover" />
              <div className="p-5">
                <h3 className="text-xl font-semibold mb-2">{tour.title}</h3>
                <p className="text-gray-600 mb-4">{tour.desc}</p>
                <div className="flex items-center justify-between">
                  <span className="font-bold">{tour.price}</span>
                  <button onClick={() => handleBook(tour)} className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg">Забронювати</button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </main>

      {/* EMERGENCY BUTTON */}
      <section className="py-12 bg-red-50 text-center">
        <div className="max-w-3xl mx-auto px-4">
          {!emergencyRemoved ? (
            <>
              <div className="inline-block bg-red-600 text-white rounded-full px-4 py-2 shadow-lg transform-gpu animate-pulse">
                <button aria-label="Emergency button" className="flex items-center gap-2">
                  <AlertIcon className="w-5 h-5" />
                  Emergency Button
                </button>
              </div>
              <p className="mt-4 text-gray-700">Emergency Button входить у всі тури. За <span className="font-semibold">+$100</span> ми його викидаємо.</p>
              <div className="mt-4">
                <button onClick={() => setEmergencyRemoved(true)} className="px-4 py-2 bg-gray-800 text-white rounded-md">Викинути Emergency (+$100)</button>
              </div>
            </>
          ) : (
            <>
              <div className="inline-flex items-center gap-3 bg-gray-100 border border-gray-300 px-4 py-3 rounded-full">
                <span className="text-gray-700">Emergency button видалено (доплата +$100)</span>
                <button onClick={() => setEmergencyRemoved(false)} className="px-3 py-1 bg-yellow-500 rounded-md">Повернути</button>
              </div>
              <p className="mt-3 text-sm text-gray-600">Пам'ятай: без Emergency — повна відповідальність на учасниках.</p>
            </>
          )}
        </div>
      </section>

      {/* REVIEWS */}
      <section className="py-16 px-6 max-w-6xl mx-auto text-center">
        <h2 className="text-3xl font-bold mb-10">Відгуки</h2>
        <div className="grid md:grid-cols-3 gap-6">
          {[1, 2, 3].map((i) => (
            <blockquote key={i} className="bg-white p-6 rounded-2xl shadow-sm">
              <p className="mb-4">“Найсильніші емоції в житті — рекомендую всім, хто хоче вийти з зони комфорту.”</p>
              <div className="flex justify-center gap-1 text-yellow-400">
                {Array.from({ length: 5 }).map((_, j) => (
                  <StarIcon key={j} />
                ))}
              </div>
            </blockquote>
          ))}
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-gray-900 text-gray-200 py-10">
        <div className="max-w-4xl mx-auto text-center px-4">
          <h3 className="text-xl font-semibold mb-2">Контакти</h3>
          <p className="flex items-center justify-center gap-2 mb-2"><MapPinIcon /> Старт: м. Галич, Україна</p>
          <p className="mb-1">Email: info@dnister-adventure.ua</p>
          <p className="text-sm text-gray-400 mt-4">© {new Date().getFullYear()} Dnister Adventure. Всі права захищені.</p>
        </div>
      </footer>
    </div>
  );
}