export default function BedfordDemoPage() {
  const quickActions = [
    {
      title: "Calendar",
      icon: (
        <svg className="h-6 w-6 sm:h-7 sm:w-7 lg:h-8 lg:w-8 text-blue-900" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path
            fillRule="evenodd"
            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
            clipRule="evenodd"
          />
        </svg>
      ),
    },
    {
      title: "Agendas & Minutes",
      icon: (
        <svg className="h-6 w-6 sm:h-7 sm:w-7 lg:h-8 lg:w-8 text-blue-900" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path
            fillRule="evenodd"
            d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"
            clipRule="evenodd"
          />
        </svg>
      ),
    },
    {
      title: "Submit a Request",
      icon: (
        <svg className="h-6 w-6 sm:h-7 sm:w-7 lg:h-8 lg:w-8 text-blue-900" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path
            fillRule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
            clipRule="evenodd"
          />
        </svg>
      ),
    },
    {
      title: "Pay My Bill",
      icon: (
        <svg className="h-6 w-6 sm:h-7 sm:w-7 lg:h-8 lg:w-8 text-blue-900" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path
            fillRule="evenodd"
            d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
            clipRule="evenodd"
          />
        </svg>
      ),
    },
    {
      title: "Public Notices",
      icon: (
        <svg className="h-6 w-6 sm:h-7 sm:w-7 lg:h-8 lg:w-8 text-blue-900" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path
            fillRule="evenodd"
            d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
            clipRule="evenodd"
          />
        </svg>
      ),
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm">
        <div className="w-full px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col items-start justify-between space-y-3 py-4 sm:flex-row sm:items-center sm:space-y-0">
            <div className="flex items-center space-x-4">
              <img
                src="/Emblema de Bedford.png"
                alt="Town of Bedford Emblem"
                className="h-16 w-16 object-contain"
              />
              <div className="text-left">
                <h1 className="text-2xl font-light italic text-gray-600">Welcome to the city of</h1>
                <h2 className="text-3xl font-bold text-gray-800 sm:text-4xl">BEDFORD</h2>
              </div>
            </div>

            <div className="flex w-full items-center sm:w-auto">
              <div className="relative w-full sm:w-auto">
                <input
                  type="text"
                  placeholder="Search"
                  className="w-full rounded bg-yellow-400 px-4 py-2 pr-10 text-gray-800 placeholder-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 sm:w-auto"
                />
                <button
                  type="button"
                  className="absolute right-2 top-1/2 -translate-y-1/2 transform"
                  aria-label="Search"
                >
                  <svg className="h-5 w-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>

          <nav className="border-t border-gray-200">
            <div className="grid grid-cols-2 gap-4 py-4 sm:flex sm:items-center sm:justify-between w-full">
              <div className="text-center sm:flex-1">
                <h3 className="text-base font-semibold text-blue-900 sm:text-lg">COMMUNITY</h3>
                <p className="text-xs text-blue-700 sm:text-sm">Residents & Visitors</p>
              </div>
              <div className="text-center sm:flex-1">
                <h3 className="text-base font-semibold text-blue-900 sm:text-lg">BEDFORD</h3>
                <p className="text-xs text-blue-700 sm:text-sm">Departments & Services</p>
              </div>
              <div className="text-center sm:flex-1">
                <h3 className="text-base font-semibold text-blue-900 sm:text-lg">BUSINESS</h3>
                <p className="text-xs text-blue-700 sm:text-sm">Licensing & Development</p>
              </div>
              <div className="text-center sm:flex-1">
                <h3 className="text-base font-semibold text-blue-900 sm:text-lg">HOW DO I?</h3>
                <p className="text-xs text-blue-700 sm:text-sm">Resources & FAQs</p>
              </div>
            </div>
          </nav>
        </div>
      </header>

      <section
        className="relative h-64 bg-cover bg-center sm:h-96"
        style={{
          backgroundImage:
            "linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/kansas-city-5111838_1920.jpg')",
        }}
      >
        <div className="absolute inset-0 flex items-center">
          <div className="w-full px-4 sm:px-6 lg:px-8">
            <div className="max-w-2xl">
              <div className="rounded-lg bg-white/90 p-8">
                <h2 className="mb-4 text-3xl font-bold text-gray-900">
                  Bedford Opens New Community Center to Support Local Businesses
                </h2>
                <p className="mb-6 text-gray-700">
                  BEDFORD (January 15, 2025) – Today, Mayor Johnson was joined by business owners and community leaders to celebrate the official grand opening of the Bedford Community Center, featuring modern meeting spaces, networking areas, and resources for local entrepreneurs...
                </p>
                <button type="button" className="rounded bg-gray-200 px-6 py-2 text-gray-800 transition-colors hover:bg-gray-300">
                  Read More
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="absolute bottom-4 left-1/2 hidden -translate-x-1/2 transform space-x-2 sm:flex">
          <div className="h-3 w-3 rounded-full bg-white" />
          <div className="h-3 w-3 rounded-full bg-yellow-400" />
          <div className="h-3 w-3 rounded-full rounded-full bg-white opacity-60" />
          <div className="h-3 w-3 rounded-full bg-white opacity-60" />
          <div className="h-3 w-3 rounded-full bg-white opacity-60" />
        </div>
      </section>

      <section className="bg-blue-800 py-6 sm:py-8">
        <div className="w-full px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-5 lg:gap-8">
            {quickActions.map((item) => (
              <div key={item.title} className="text-center">
                <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-500 sm:h-14 sm:w-14 lg:mb-3 lg:h-16 lg:w-16">
                  {item.icon}
                </div>
                <h4 className="text-sm font-semibold text-white sm:text-base lg:text-lg">{item.title}</h4>
              </div>
            ))}
          </div>
        </div>
      </section>

      <main className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
          <div className="lg:col-span-2">
            <h3 className="mb-6 text-2xl font-bold text-gray-900">Latest News & Updates</h3>

            <div className="mb-6 rounded-lg bg-white p-6 shadow">
              <h4 className="mb-3 text-xl font-semibold text-gray-900">Town Council Meeting - February 15th</h4>
              <p className="mb-4 text-gray-600">
                Join us for the monthly town council meeting where we&apos;ll discuss upcoming infrastructure projects, budget allocations, and community initiatives.
              </p>
              <span className="text-sm text-blue-700">Posted: February 10, 2025</span>
            </div>

            <div className="mb-6 rounded-lg bg-white p-6 shadow">
              <h4 className="mb-3 text-xl font-semibold text-gray-900">Winter Snow Removal Updates</h4>
              <p className="mb-4 text-gray-600">
                The Public Works Department has updated snow removal priorities. Please review the new guidelines for parking restrictions during snow events.
              </p>
              <span className="text-sm text-blue-700">Posted: February 8, 2025</span>
            </div>
          </div>

          <div>
            <h3 className="mb-6 text-2xl font-bold text-gray-900">Quick Links</h3>

            <div className="mb-6 rounded-lg bg-white p-6 shadow">
              <h4 className="mb-4 font-semibold text-gray-900">Popular Services</h4>
              <ul className="space-y-3">
                <li><a href="#" className="text-blue-700 hover:text-blue-900">Property Tax Information</a></li>
                <li><a href="#" className="text-blue-700 hover:text-blue-900">Trash & Recycling Schedule</a></li>
                <li><a href="#" className="text-blue-700 hover:text-blue-900">Building Permits</a></li>
                <li><a href="#" className="text-blue-700 hover:text-blue-900">Public Transit Routes</a></li>
                <li><a href="#" className="text-blue-700 hover:text-blue-900">City Hall Hours</a></li>
              </ul>
            </div>

            <div className="rounded-lg bg-blue-50 p-6">
              <h4 className="mb-3 font-semibold text-gray-900">Contact Information</h4>
              <div className="space-y-2 text-sm text-gray-600">
                <p>
                  <strong>City Hall:</strong>
                  <br />
                  123 Main Street
                  <br />
                  Bedford, XY 75001
                </p>
                <p><strong>Phone:</strong> (555) 123-4567</p>
                <p>
                  <strong>Hours:</strong>
                  <br />
                  Mon-Fri: 8:00 AM - 5:00 PM
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>

      <section className="bg-gray-100 py-12">
        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
          <h2 className="mb-8 text-3xl font-bold text-gray-900">SUBSCRIBE TO THE BEDFORD NEWSLETTER</h2>
          <div className="mx-auto flex max-w-2xl flex-col gap-3 sm:flex-row sm:gap-0">
            <input
              type="email"
              placeholder="Your email address"
              className="flex-1 bg-yellow-400 px-6 py-4 text-lg text-gray-800 placeholder-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500"
            />
            <button type="button" className="bg-blue-800 px-8 py-4 text-lg font-semibold text-white transition-colors hover:bg-blue-900">
              SUBMIT
            </button>
          </div>
        </div>
      </section>

      <footer className="bg-gray-800 py-8 text-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
            <div>
              <h5 className="mb-4 font-semibold">Government</h5>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="hover:text-gray-300">Mayor&apos;s Office</a></li>
                <li><a href="#" className="hover:text-gray-300">Town Council</a></li>
                <li><a href="#" className="hover:text-gray-300">Departments</a></li>
              </ul>
            </div>

            <div>
              <h5 className="mb-4 font-semibold">Services</h5>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="hover:text-gray-300">Public Works</a></li>
                <li><a href="#" className="hover:text-gray-300">Parks & Recreation</a></li>
                <li><a href="#" className="hover:text-gray-300">Public Safety</a></li>
              </ul>
            </div>

            <div>
              <h5 className="mb-4 font-semibold">Residents</h5>
              <ul className="space-y-2 text-sm">
                <li><a href="#" className="hover:text-gray-300">Community Events</a></li>
                <li><a href="#" className="hover:text-gray-300">Local Resources</a></li>
                <li><a href="#" className="hover:text-gray-300">Emergency Information</a></li>
              </ul>
            </div>

            <div>
              <h5 className="mb-4 font-semibold">Contact</h5>
              <div className="text-sm">
                <p>123 Main Street</p>
                <p>Bedford, XY 75001</p>
                <p>(555) 123-4567</p>
              </div>
            </div>
          </div>

          <div className="mt-8 border-t border-gray-700 pt-8 text-center text-sm">
            <p>This is an independent prototype for demonstration purposes only.</p>
          </div>
        </div>
      </footer>

      <div className="fixed bottom-4 right-4 z-50 sm:bottom-6 sm:right-6">
        <button
          type="button"
          className="flex items-center space-x-3 rounded-full border border-blue-700 bg-blue-600 p-4 text-white shadow-lg transition-colors hover:bg-blue-700"
        >
          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.959 8.959 0 01-4.5-1.207l-3.5 3.5V12a8 8 0 018-8 8 8 0 018 8z"
            />
          </svg>
          <span className="hidden font-medium lg:block">Bedford Assistant</span>
        </button>
      </div>
    </div>
  );
}