import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";
import Link from "next/link";

export const metadata = {
  title: "Peace Pole — Nusqool",
  description: "May Peace Prevail on Earth. A peace pole planted at Nusqool in Kawartha Lakes, Ontario.",
};

const prayers = [
  {
    text: "We ask that the planting of this peace pole becomes a perpetual prayer for peace, a beacon of hope, and a reminder that we are all connected in our desire for a more peaceful world.",
    author: "JM",
  },
  {
    text: "May we be filled with so much love and grace, that every action we perform is gentle, that every word we speak is kind, and that every thought we think is compassionate.",
    author: "PK",
  },
  {
    text: "Where those who have forgotten to listen, begin to. Where those who have forgotten to feel, remember. Where those who have forgotten their belonging, come home.",
    author: "LT",
  },
];

export default function PeacePole() {
  return (
    <main>
      <Navigation />

      {/* Hero */}
      <section className="pt-28 pb-20 px-6 bg-nusqool-brown text-white">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="heading-xl text-nusqool-yellow mb-6">
            May Peace Prevail on Earth
          </h1>
          <p className="text-white/80 text-lg max-w-2xl mx-auto">
            Over 250,000 peace poles exist worldwide in communities, schools, parks, and sacred spaces, representing collective intentions for global peace.
          </p>
        </div>
      </section>

      {/* About */}
      <section className="section-padding bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="space-y-6 body-text">
            <p>
              Our peace pole was planted in <strong>Kawartha Lakes at Nusqool in July 2023</strong>. It stands as a symbol of community peace and intention.
            </p>
            <p>
              We encourage community participation through peace prayers and drawings. A time capsule is being created with wishes from friends and communities around the world.
            </p>
          </div>
        </div>
      </section>

      {/* Why a Peace Pole */}
      <section className="section-padding bg-nusqool-cream">
        <div className="max-w-4xl mx-auto">
          <h2 className="heading-lg text-nusqool-brown mb-8 text-center">
            So why put a Peace Pole in an old school house?
          </h2>
          <div className="space-y-6 body-text">
            <p>
              This schoolhouse intends to serve as a space where visitors can slow down, connect with nature, and experience peace and joy. The peace pole was inspired by Masami Saionji&apos;s healing story and the global peace pole movement.
            </p>
            <p>
              Our pole is now listed on{" "}
              <a
                href="https://www.worldpeace.org/peace-pole-map-2/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-nusqool-yellow hover:underline"
              >
                WorldPeace.org
              </a>{" "}
              as a community resource, connecting us to a worldwide network of peace intentions.
            </p>
          </div>
        </div>
      </section>

      {/* Prayers */}
      <section className="section-padding bg-white">
        <div className="max-w-4xl mx-auto">
          <h2 className="heading-lg text-nusqool-brown mb-12 text-center">Prayers for Peace</h2>

          <div className="space-y-8">
            {prayers.map((prayer, index) => (
              <blockquote
                key={index}
                className="p-8 bg-nusqool-cream rounded-sm"
              >
                <p className="font-serif text-lg text-nusqool-brown italic leading-relaxed">
                  &ldquo;{prayer.text}&rdquo;
                </p>
                <footer className="mt-4 text-nusqool-warmGray font-medium">
                  &mdash; {prayer.author}
                </footer>
              </blockquote>
            ))}
          </div>
        </div>
      </section>

      {/* Submit Prayer */}
      <section className="section-padding bg-nusqool-sage/10 text-center">
        <div className="max-w-2xl mx-auto">
          <h2 className="heading-lg text-nusqool-brown mb-6">Share Your Prayer for Peace</h2>
          <p className="body-text mb-8">
            We invite you to add your peace prayer to our growing collection and time capsule.
          </p>
          <Link href="/contact-thu" className="btn-primary">
            Send Your Peace Prayer
          </Link>
        </div>
      </section>

      <Newsletter />
      <Footer />
    </main>
  );
}
