// app/learn/page.tsx
"use client";
import Navbar from "@/components/Navbar"; 
import BottomFooter from "@components/BottomFooter";

export default function LearnPage() {
  return (
    <div className="min-h-screen bg-blue-50 flex flex-col">
      {/* (Optional) Navbar */}
      {/* <Navbar /> */}

      <main className="flex-1 flex flex-col items-center justify-start pt-12 px-4">
        <h1 className="text-4xl font-bold mb-4 text-blue-800 text-center">
          Earthquakes
        </h1>
        <p className="max-w-2xl text-lg text-gray-700 mb-6 text-center">
          <span className="font-bold">In this page, you can learn all about what earthquakes are, and how to keep safe!</span>
        </p>
        <div className="max-w-3xl text-base text-gray-600 text-left space-y-8">

          {/* Section 1 */}
          <section>
            <p>
              <span className="font-semibold text-blue-800">What are earthquakes?</span>
              <br />
              Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground.
              They can range in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis.
              Hundreds of earthquakes happen every day—but most are too small to feel.
            </p>
          </section>

          {/* Section 2 */}
          <section>
            <p>
              <span className="font-semibold text-blue-800">What are the types of earthquakes?</span>
              <br />
              Regions near plate boundaries, such as around the Pacific Ocean ("The Ring of Fire"), experience the most activity.
            </p>
          </section>

          {/* Section 3 */}
          <section>
            <p>
              <span className="font-semibold text-blue-800">How can I be prepared?</span>
            </p>
            {/* MAIN BULLET POINTS */}
            <ul className="list-disc list-inside pl-6 space-y-2">
              <li>
                <span className="font-bold text-gray-800">Assemble an emergency kit:</span> 
                This should be stored in your earthquake emergency zone. It may be useful, as in an earthquake, you may lose electricity or water supplies.
                {/* SUB BULLETS */}
                <ul className="list-disc list-inside pl-6 mt-1 space-y-1 text-gray-700">
                  <li>First aid kit and emergency medication</li>
                  <li>Food (non-perishable)</li>
                  <li>Bottled water</li>
                  <li>Torch (flashlight)</li>
                  <li>Satellite phone</li>
                  <li>Warm clothing and blankets</li>
                </ul>
              </li>
              <li>
                <span className="font-bold text-gray-800">Practice the Drop, Cover, and Hold On drill!</span> 
                This helps you protect yourself from falling objects during an earthquake.
                {/* Embed YouTube video */}
                <div className="mt-2 flex justify-center">
                  <iframe
                    width="350"
                    height="200"
                    className="rounded shadow"
                    src="https://www.youtube.com/embed/-MKMiFWK6Xk"
                    title="Drop, Cover, and Hold On - Official Earthquake Drill Video"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  />
                </div>
              </li>
              <li>
                <span className="font-bold text-gray-800">Identify a safe zone:</span> 
                This should be a sturdy place where all members of your household can shelter, such as under a strong table, in a structurally sound room, or your local community’s shared space.
              </li>
              <li>
                <span className="font-bold text-gray-800">Discuss what to do:</span>  
                Share this information with your family and friends! Talk about what each person would do in an emergency.
              </li>
            </ul>
          </section>
        </div>
      </main>
      <BottomFooter />
    </div>
  );
}