import Image from "next/image";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";

export const metadata = {
  title: "Care Tent — Nusqool",
  description: "A pop-up sanctuary for conferences, festivals, and events. Rest, regulation, and gentle reconnection.",
};

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

      {/* Hero */}
      <section className="relative pt-28 pb-20 px-6 bg-nusqool-cream">
        <div className="max-w-4xl mx-auto text-center">
          <span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">Pop-Up Sanctuary</span>
          <h1 className="heading-xl text-nusqool-brown mt-2 mb-6">The Care Tent</h1>
          <p className="body-text max-w-2xl mx-auto">
            A pop-up sanctuary for conferences, festivals, and events &mdash; a space for rest, regulation, and gentle reconnection.
          </p>
        </div>
      </section>

      {/* Image + Description */}
      <section className="section-padding bg-white">
        <div className="max-w-5xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="relative aspect-[4/3] rounded-sm overflow-hidden">
              <Image
                src="/images/caretent.jpg"
                alt="Care Tent at Coralus UnSummit 2025"
                fill
                className="object-cover"
              />
            </div>

            <div>
              <h2 className="heading-lg text-nusqool-brown mb-6">What is the Care Tent?</h2>
              <div className="space-y-4 body-text">
                <p>
                  Launched at the Coralus 10th Year Anniversary at Saunders Farm (Fall 2025), the Care Tent is a pop-up sanctuary designed to provide rest and regulation at large gatherings.
                </p>
                <ul className="space-y-3 pl-4">
                  <li className="flex items-start">
                    <span className="text-nusqool-yellow mr-3">&#8226;</span>
                    Rest spaces with hammocks, rugs, and pillows
                  </li>
                  <li className="flex items-start">
                    <span className="text-nusqool-yellow mr-3">&#8226;</span>
                    Self-guided practices and art supplies
                  </li>
                  <li className="flex items-start">
                    <span className="text-nusqool-yellow mr-3">&#8226;</span>
                    Books, reflection cards, and journaling prompts
                  </li>
                  <li className="flex items-start">
                    <span className="text-nusqool-yellow mr-3">&#8226;</span>
                    Nervous system reset tools
                  </li>
                  <li className="flex items-start">
                    <span className="text-nusqool-yellow mr-3">&#8226;</span>
                    Optional 1:1 somatic sessions
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Invite the Care Tent */}
      <section className="section-padding bg-nusqool-cream">
        <div className="max-w-xl mx-auto">
          <h2 className="heading-lg text-nusqool-brown mb-4 text-center">Invite the Care Tent</h2>
          <p className="body-text text-center mb-8">
            If you would like to invite the Care Tent to your event, festival, or conference, please let us know!
          </p>

          <form className="space-y-6">
            <div>
              <label htmlFor="name" className="block text-sm font-medium text-nusqool-brown mb-2">
                Name
              </label>
              <input
                type="text"
                id="name"
                className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
              />
            </div>

            <div>
              <label htmlFor="email" className="block text-sm font-medium text-nusqool-brown mb-2">
                Email <span className="text-nusqool-yellow">*</span>
              </label>
              <input
                type="email"
                id="email"
                required
                className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
              />
            </div>

            <div>
              <label htmlFor="event-details" className="block text-sm font-medium text-nusqool-brown mb-2">
                Please share your event and ideas <span className="text-nusqool-yellow">*</span>
              </label>
              <textarea
                id="event-details"
                required
                rows={6}
                className="w-full px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors resize-vertical"
              />
            </div>

            <button type="submit" className="btn-primary w-full">
              Send
            </button>
          </form>
        </div>
      </section>

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