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

export const metadata = {
  title: "Work with Chris — Nusqool",
  description: "New school audio engineering and mastering studio. Chris Harris has 20+ years experience in audio production.",
};

const portfolio = [
  { title: "Tiesto: The Business Remix Competition", date: "Apr 11, 2021" },
  { title: "Peacebeam: Creating a Forgiveness Practice", date: "Mar 5, 2021" },
  { title: "Peacebeam: Heartbreak Series", date: "Feb 26, 2021" },
  { title: "Peacebeam: How To Be Kind", date: "Feb 1, 2021" },
  { title: "Tyler Bopp: Kind, Sober & Fully Dressed", date: "Jan 22, 2021" },
  { title: "The Mindful Gupshup Podcast", date: "Nov 2, 2020" },
  { title: "Peacebeam: Letters to A Young Woman", date: "Nov 2, 2020" },
  { title: "Tombz the Nish", date: "Aug 19, 2020" },
  { title: "Hammock Stories", date: "Aug 19, 2020", description: "A podcast featuring everyday heroes in a hammock." },
];

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

      {/* Hero */}
      <section className="relative 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">
            New school audio engineering and mastering studio
          </h1>
          <Link href="/contact-chris" className="btn-primary">
            Get Connected
          </Link>
        </div>
      </section>

      {/* About Chris */}
      <section className="section-padding bg-white">
        <div className="max-w-5xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            <div className="relative aspect-[4/3] rounded-sm overflow-hidden">
              <Image
                src="/images/chris-portrait.jpg"
                alt="Chris Harris"
                fill
                className="object-cover"
              />
            </div>

            <div>
              <h2 className="heading-lg text-nusqool-brown mb-6">Meet Chris Harris</h2>
              <p className="body-text">
                Chris is the Chief Engineer at Nusqool Audio and has 20+ years experience in audio production. He has worked with top artists in Toronto and collaborated with musicians at the Rehearsal Factory. He makes music and has been featured at many events such as the World of Drum and Bass.
              </p>
              <div className="mt-8">
                <Link href="/contact-chris" className="btn-secondary">
                  Contact Chris
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Studio Image */}
      <section className="section-padding bg-nusqool-cream">
        <div className="max-w-5xl mx-auto">
          <div className="relative aspect-video rounded-sm overflow-hidden mb-8">
            <Image
              src="/images/chris-studio.jpg"
              alt="Nusqool Audio Studio"
              fill
              className="object-cover"
            />
          </div>
        </div>
      </section>

      {/* Portfolio */}
      <section className="section-padding bg-white">
        <div className="max-w-3xl mx-auto">
          <h2 className="heading-lg text-nusqool-brown mb-12 text-center">Sounds We&apos;ve Elevated</h2>

          <div className="space-y-6">
            {portfolio.map((item, index) => (
              <div
                key={index}
                className="flex items-center justify-between p-4 bg-nusqool-cream rounded-sm hover:shadow-md transition-shadow"
              >
                <div>
                  <h3 className="font-serif text-nusqool-brown">{item.title}</h3>
                  {item.description && (
                    <p className="text-sm text-nusqool-warmGray mt-1">{item.description}</p>
                  )}
                </div>
                <span className="text-sm text-nusqool-warmGray whitespace-nowrap ml-4">{item.date}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

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