"use client";

import { useState } from "react";
import { Hero } from "@/components/Hero";
import { ImagePlaceholder } from "@/components/ImagePlaceholder";

const reasons = [
  {
    title: "Barriers to Focused Work",
    content:
      "Some may argue that mobile devices are a distraction, and with the rise of addictive apps such as TikTok, Instagram, and Twitter, for some that may be the case. However, for many, cell phones are tools for efficient work, enhancing one's scheduling, communication, productivity, and more.",
  },
  {
    title: "Limited Access to Appropriate Tools",
    content:
      "The bill permits schools to issue their own devices, however, these devices are often cheap, have limited functionality, and are surveilled by the district. Often these devices come with strict content filters, blocking many of the websites students may use to boost their productivity, such as Spotify, Apple Music, or Youtube.",
  },
  {
    title: "Placeholder Title",
    content:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
  },
  {
    title: "Placeholder Title",
    content:
      "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.",
  },
];

export default function Home() {
  // Toggle to show/hide modal (set to true during development)
  const [showModal, setShowModal] = useState(true);
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div className="min-h-screen relative">
      {/* Modal Overlay */}
      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70">
          <div className="bg-gray-900 text-gray-100 rounded-lg shadow-lg p-6 max-w-lg w-full mx-4">
            <h2 className="text-2xl font-bold mb-4 text-white">Disclaimer</h2>
            <p className="text-gray-300 mb-4">
              This website is still under development. All content is subject
              to change. Placeholder text and images may be visible.
            </p>

            <label className="flex items-center space-x-2 mb-4">
              <input
                type="checkbox"
                checked={isChecked}
                onChange={(e) => setIsChecked(e.target.checked)}
                className="h-4 w-4 text-blue-500 bg-gray-800 border-gray-600 rounded focus:ring-blue-500 focus:ring-offset-gray-900"
              />
              <span className="text-gray-200">I understand and wish to proceed.</span>
            </label>

            <button
              onClick={() => setShowModal(false)}
              disabled={!isChecked}
              className={`px-4 py-2 rounded text-white ${
                isChecked
                  ? "bg-blue-600 hover:bg-blue-700"
                  : "bg-gray-600 cursor-not-allowed"
              }`}
            >
              Proceed
            </button>
          </div>
        </div>
      )}
      
      {/* Main Page Content */}
      <Hero />

      <section className="py-16 px-4">
        <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
          <div className="space-y-8">
            <h2 className="text-3xl font-bold mb-6 text-primary">
              Why DefendAccess Matters
            </h2>
            <p className="text-lg text-muted-foreground leading-relaxed mb-6">
              Not everyone has equal needs, tolerances, and preferences when it
              comes to learning, working, and living. Some people may be
              detrimented by the presence of technology, while others may be
              empowered by it.
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed mb-6">
              DefendAccess hopes to bring light to the countless people who will 
              loose access to the tools they need with the implementation of 
              <b><a href='https://capitol.texas.gov/tlodocs/89R/billtext/pdf/HB01481I.pdf'>
              Texas House Bill 1481
              </a></b>.
              This bill will require all public schools to adopt policies preventing 
              students from using any personal electronic devices. While written in 
              good faith, the bill creates more hoops for students with needs to jump 
              through, and will negatively impact those without access to offical 
              diagnoises or accomodations.
            </p>
          </div>

          <div className="space-y-6">
            <ImagePlaceholder height="h-64" text="Featured Initiative Image" />
            <div className="grid grid-cols-2 gap-4">
              <ImagePlaceholder height="h-32" text="Community Photo" />
              <ImagePlaceholder height="h-32" text="Technology Demo" />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
