import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";

export const metadata = {
  title: "Contact Thu — Nusqool",
  description: "Get in touch with Thu Nguyen at Nusqool. Coaching, workshops, collaborations, and volunteering.",
};

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

      {/* Hero */}
      <section className="pt-28 pb-16 px-6 bg-nusqool-cream">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="heading-xl text-nusqool-brown mb-6">Contact Thu</h1>
          <p className="body-text max-w-2xl mx-auto">
            If you&apos;d like to learn more about ways of working with, learning, volunteering, or collaborating with Thu, feel free to fill out this form or find her on{" "}
            <a
              href="https://ca.linkedin.com/in/2cre8tive"
              target="_blank"
              rel="noopener noreferrer"
              className="text-nusqool-yellow hover:underline"
            >
              LinkedIn
            </a>{" "}
            or{" "}
            <a
              href="https://instagram.com/connectthu"
              target="_blank"
              rel="noopener noreferrer"
              className="text-nusqool-yellow hover:underline"
            >
              @connectthu
            </a>
          </p>
        </div>
      </section>

      {/* Form */}
      <section className="section-padding bg-white">
        <div className="max-w-xl mx-auto">
          <form className="space-y-6">
            <div>
              <label htmlFor="name" className="block text-sm font-medium text-nusqool-brown mb-2">
                Name <span className="text-nusqool-yellow">*</span>
              </label>
              <input
                type="text"
                id="name"
                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="email" className="block text-sm font-medium text-nusqool-brown mb-2">
                Email Address <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="message" className="block text-sm font-medium text-nusqool-brown mb-2">
                Message <span className="text-nusqool-yellow">*</span>
              </label>
              <textarea
                id="message"
                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">
              Submit
            </button>
          </form>

          <div className="mt-12 text-center space-y-4">
            <p className="body-text">Or reach out directly:</p>
            <div className="flex items-center justify-center gap-6">
              <a
                href="mailto:thu@nusqool.net"
                className="text-nusqool-brown hover:text-nusqool-yellow transition-colors"
              >
                thu@nusqool.net
              </a>
              <a
                href="https://instagram.com/connectthu"
                target="_blank"
                rel="noopener noreferrer"
                className="text-nusqool-brown hover:text-nusqool-yellow transition-colors"
              >
                @connectthu
              </a>
              <a
                href="https://ca.linkedin.com/in/2cre8tive"
                target="_blank"
                rel="noopener noreferrer"
                className="text-nusqool-brown hover:text-nusqool-yellow transition-colors"
              >
                LinkedIn
              </a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}
