import { useState } from "react";
import { ChevronDown } from "lucide-react";

export default function Scenic20Landing() {
  const [selectedTown, setSelectedTown] = useState("");

  const towns = [
    { name: "Tahoe", url: "https://tahoe.scenic20.com" },
    { name: "Lucerne", url: "https://lucerne.scenic20.com" },
    { name: "Fort Bragg", url: "https://fortbragg.scenic20.com" },
  ];

  const handleTownChange = (e) => {
    const selected = towns.find(t => t.name === e.target.value);
    if (selected) {
      window.location.href = selected.url;
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white text-gray-800">
      <header className="p-4 flex justify-between items-center shadow-md bg-white">
        <h1 className="text-xl font-bold">Scenic20.com</h1>
        <div className="relative">
          <select
            onChange={handleTownChange}
            className="appearance-none bg-white border border-gray-300 rounded-md py-2 px-4 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300"
          >
            <option>Select a Town</option>
            {towns.map((town) => (
              <option key={town.name} value={town.name}>
                {town.name}
              </option>
            ))}
          </select>
          <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none w-4 h-4 text-gray-500" />
        </div>
      </header>

      <main className="p-6 space-y-10">
        <section className="text-center">
          <h2 className="text-3xl font-bold mb-2">Explore the Scenic Route 20</h2>
          <p className="text-gray-600 max-w-md mx-auto">
            Discover the beauty of historic Route 20, stretching from the crystal waters of Tahoe to the rugged Pacific coastline of Fort Bragg. Travel through Lake County and past the breathtaking Berryessa Snow Mountain National Monument.
          </p>
        </section>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <img src="https://source.unsplash.com/featured/?lake" alt="Lake View" className="rounded-2xl shadow-md w-full h-64 object-cover" />
          <img src="https://source.unsplash.com/featured/?mountain" alt="Mountain View" className="rounded-2xl shadow-md w-full h-64 object-cover" />
          <img src="https://source.unsplash.com/featured/?forest" alt="Forest View" className="rounded-2xl shadow-md w-full h-64 object-cover" />
          <img src="https://source.unsplash.com/featured/?coast" alt="Coastal View" className="rounded-2xl shadow-md w-full h-64 object-cover" />
        </div>

        <footer className="text-center text-gray-500 text-sm mt-12">
          © {new Date().getFullYear()} Scenic20.com. All rights reserved.
        </footer>
      </main>
    </div>
  );
}