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

export const metadata = {
  title: "Contact Chris — Nusqool",
  description: "Get in touch with Chris Harris at Nusqool Audio. Audio engineering, mastering, and studio work.",
};

export default function ContactChris() {
  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 Chris</h1>
          <p className="body-text max-w-2xl mx-auto">
            Fill out this form to get more info, work with or visit the studio, or find him on Facebook or{" "}
            <a
              href="https://instagram.com/nusqoolaudio"
              target="_blank"
              rel="noopener noreferrer"
              className="text-nusqool-yellow hover:underline"
            >
              @nusqoolaudio
            </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>
      </section>

      <Footer />
    </main>
  );
}
