export default function FastTechITWebsite() {
  return (
    <div className="min-h-screen bg-white text-gray-900 font-sans">
      {/* Header */}
      <header className="bg-blue-950 text-white">
        <div className="max-w-7xl mx-auto flex items-center justify-between px-6 py-5">
          <div>
            <h1 className="text-3xl font-extrabold tracking-wide">
              FAST <span className="text-green-400">TECH-IT</span>
            </h1>
            <p className="text-sm text-gray-300">Solutions That Work</p>
          </div>

          <nav className="hidden md:flex gap-8 text-sm font-semibold">
            <a href="#home" className="hover:text-green-400">Home</a>
            <a href="#services" className="hover:text-green-400">Services</a>
            <a href="#about" className="hover:text-green-400">About</a>
            <a href="#reviews" className="hover:text-green-400">Reviews</a>
            <a href="#contact" className="hover:text-green-400">Contact</a>
          </nav>

          <button className="bg-red-500 hover:bg-red-600 transition px-5 py-3 rounded-xl font-bold shadow-lg">
            Call 619-404-8244
          </button>
        </div>
      </header>

      {/* Hero */}
      <section id="home" className="bg-gradient-to-r from-blue-950 to-blue-800 text-white">
        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-10 px-6 py-20 items-center">
          <div>
            <p className="text-green-400 text-2xl font-bold mb-3">
              COMPUTER PROBLEMS?
            </p>

            <h2 className="text-5xl md:text-7xl font-extrabold leading-tight mb-6">
              WE’RE HERE <br />
              <span className="text-red-500">TO HELP!</span>
            </h2>

            <p className="text-xl text-gray-200 mb-8 max-w-xl">
              Fast, friendly, and reliable support for all your computer,
              network, and security camera needs.
            </p>

            <div className="flex flex-wrap gap-4">
              <button className="bg-green-500 hover:bg-green-600 px-6 py-4 rounded-xl font-bold text-lg shadow-lg">
                Get Support
              </button>

              <button className="border border-white hover:bg-white hover:text-blue-900 transition px-6 py-4 rounded-xl font-bold text-lg">
                Learn More
              </button>
            </div>
          </div>

          <div className="flex justify-center">
            <img
              src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop"
              alt="IT Support"
              className="rounded-3xl shadow-2xl w-full max-w-xl"
            />
          </div>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-14">
            <p className="text-red-500 font-bold uppercase tracking-widest">
              We Can Help With
            </p>
            <h3 className="text-4xl font-extrabold mt-3">
              Computer & IT Services
            </h3>
            <p className="text-gray-600 mt-4 max-w-2xl mx-auto">
              From computer repair to security camera installation, we provide
              reliable support for homes and businesses.
            </p>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: 'Computer Repair',
                text: 'Fix slow computers, startup issues, crashes, and hardware problems.',
              },
              {
                title: 'Virus & Malware Removal',
                text: 'Remove viruses and keep your devices secure and protected.',
              },
              {
                title: 'Internet & Wi‑Fi Support',
                text: 'Improve Wi‑Fi speed and solve internet connection issues.',
              },
              {
                title: 'Security Camera Installation',
                text: 'Professional indoor and outdoor security camera systems for homes and businesses.',
              },
              {
                title: 'Remote IT Support',
                text: 'Fast remote troubleshooting and support without needing a visit.',
              },
              {
                title: 'Data Recovery',
                text: 'Recover important files, photos, and documents safely.',
              },
            ].map((service, index) => (
              <div
                key={index}
                className="bg-white rounded-3xl p-8 shadow-md hover:shadow-2xl transition"
              >
                <h4 className="text-2xl font-bold mb-4 text-blue-900">
                  {service.title}
                </h4>
                <p className="text-gray-600 leading-7">{service.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="bg-blue-950 text-white py-20">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-14">
            <h3 className="text-4xl font-extrabold">Why Choose Fast Tech‑IT?</h3>
          </div>

          <div className="grid md:grid-cols-4 gap-8 text-center">
            <div className="bg-blue-900 rounded-3xl p-6 shadow-lg">
              <h4 className="font-bold text-xl mb-3 text-green-400">Local & Trusted</h4>
              <p className="text-gray-200">Serving homes and businesses in San Diego with reliable IT support.</p>
            </div>

            <div className="bg-blue-900 rounded-3xl p-6 shadow-lg">
              <h4 className="font-bold text-xl mb-3 text-red-400">Affordable Pricing</h4>
              <p className="text-gray-200">Professional service at fair and competitive prices.</p>
            </div>

            <div className="bg-blue-900 rounded-3xl p-6 shadow-lg">
              <h4 className="font-bold text-xl mb-3 text-cyan-400">Remote Support</h4>
              <p className="text-gray-200">Quick remote troubleshooting for many common computer issues.</p>
            </div>

            <div className="bg-blue-900 rounded-3xl p-6 shadow-lg">
              <h4 className="font-bold text-xl mb-3 text-yellow-400">Flexible Scheduling</h4>
              <p className="text-gray-200">Evening and weekend appointments available.</p>
            </div>
          </div>
        </div>
      </section>

      {/* About */}
      <section id="about" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
          <div>
            <img
              src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop"
              alt="Technician"
              className="rounded-3xl shadow-xl"
            />
          </div>

          <div>
            <p className="text-red-500 font-bold uppercase tracking-widest mb-4">
              About Us
            </p>

            <h3 className="text-4xl font-extrabold mb-6 text-blue-950">
              Here To Keep You Connected & Protected
            </h3>

            <p className="text-gray-700 leading-8 mb-6">
              Fast Tech‑IT provides professional IT support, computer repair,
              Wi‑Fi troubleshooting, and security camera installation services
              for homes and businesses throughout San Diego.
            </p>

            <ul className="space-y-3 text-gray-700">
              <li>✔ Quick response times</li>
              <li>✔ Friendly customer service</li>
              <li>✔ Reliable and honest support</li>
              <li>✔ Satisfaction guaranteed</li>
            </ul>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="bg-gray-100 py-20">
        <div className="max-w-5xl mx-auto px-6">
          <div className="bg-blue-950 rounded-3xl text-white p-10 shadow-2xl">
            <div className="grid md:grid-cols-2 gap-10 items-center">
              <div>
                <h3 className="text-4xl font-extrabold mb-6">
                  Need Help? Contact Us Today!
                </h3>

                <div className="space-y-4 text-lg">
                  <p>📞 619-404-8244</p>
                  <p>📧 fast_tech2026@gmail.com</p>
                  <p>📍 San Diego, California</p>
                </div>
              </div>

              <form className="space-y-4">
                <input
                  type="text"
                  placeholder="Your Name"
                  className="w-full rounded-xl p-4 text-black"
                />

                <input
                  type="email"
                  placeholder="Your Email"
                  className="w-full rounded-xl p-4 text-black"
                />

                <textarea
                  rows="4"
                  placeholder="How can we help you?"
                  className="w-full rounded-xl p-4 text-black"
                ></textarea>

                <button className="bg-red-500 hover:bg-red-600 px-6 py-4 rounded-xl font-bold w-full text-lg">
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-black text-gray-400 py-8">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between gap-4 items-center">
          <div>
            <h4 className="text-2xl font-bold text-white">
              FAST <span className="text-green-400">TECH‑IT</span>
            </h4>
            <p className="mt-2">© 2026 Fast Tech‑IT. All rights reserved.</p>
          </div>

          <div className="flex gap-6 text-white font-semibold">
            <a href="#">Facebook</a>
            <a href="#">Instagram</a>
            <a href="#">Google</a>
          </div>
        </div>
      </footer>
    </div>
  );
}