import Link from 'next/link';
import Image from 'next/image';
import { sections, books, getPoemsForSection } from '@/data/poems';

export default function HomePage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Title Page Hero */}
      <section className="relative py-24 md:py-32 bg-gradient-to-b from-stone-50 to-white">
        <div className="mx-auto max-w-4xl px-6 text-center">
          <div className="mx-auto mb-8 w-36 h-36 md:w-44 md:h-44 rounded-full overflow-hidden relative ring-2 ring-stone-200 ring-offset-4 ring-offset-stone-50">
            <Image
              src="/images/cynthia/cynthia-portrait.jpeg"
              alt="Cynthia Trenshaw"
              fill
              className="object-cover"
              sizes="176px"
              priority
            />
          </div>
          <h1 className="font-serif text-5xl md:text-6xl lg:text-7xl text-stone-800 tracking-tight">
            Cynthia Trenshaw
          </h1>
          <p className="mt-4 text-xl md:text-2xl text-stone-500 font-light">
            1942 &mdash; 2024
          </p>
          <p className="mt-8 text-lg md:text-xl text-stone-600 font-serif italic max-w-2xl mx-auto leading-relaxed">
            &ldquo;Guardian and midwife to the dying, a poet who bore witness
            to life&apos;s thresholds&rdquo;
          </p>
          <p className="mt-6 text-sm text-stone-400">
            <Link href="/about" className="underline underline-offset-4 hover:text-stone-600 transition-colors">
              About Cynthia
            </Link>
          </p>
        </div>
      </section>

      {/* Table of Contents */}
      <section className="py-20 bg-white" id="contents">
        <div className="book-page px-6">
          <div className="text-center mb-16">
            <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Collected Poems</p>
            <h2 className="font-serif text-3xl text-stone-800">Contents</h2>
          </div>

          {sections.map((section) => {
            const sectionPoems = getPoemsForSection(section.id);
            return (
              <div key={section.id} className="mb-12">
                {/* Section heading */}
                <div className="text-center mb-6">
                  <p className="section-number text-sm text-stone-400 mb-1">
                    Section {section.number}
                  </p>
                  <h3 className="font-serif text-xl text-stone-700">
                    {section.title}
                  </h3>
                  <p className="text-sm text-stone-400 italic mt-1">
                    {section.subtitle}
                  </p>
                </div>

                {/* Poem links */}
                <div className="space-y-0">
                  {sectionPoems.map((poem) => (
                    <Link
                      key={poem.slug}
                      href={`/poems/${poem.slug}`}
                      className="toc-entry"
                    >
                      {poem.title}
                    </Link>
                  ))}
                </div>

                {section.id < sections.length && (
                  <div className="separator my-10">
                    <span className="text-stone-300">&bull;</span>
                  </div>
                )}
              </div>
            );
          })}

          {/* Afterword */}
          <div className="text-center mt-10 mb-6">
            <div className="separator mb-6">
              <span className="text-stone-300">&bull;</span>
            </div>
            <p className="section-number text-sm text-stone-400 mb-1">Afterword</p>
          </div>
          <Link
            href="/essays/when-a-friend-dies"
            className="toc-entry"
          >
            When A Friend Dies
          </Link>
        </div>
      </section>

      {/* Books Section */}
      <section className="py-20 bg-stone-50" id="books">
        <div className="mx-auto max-w-5xl px-6">
          <div className="text-center mb-16">
            <p className="text-xs uppercase tracking-[0.3em] text-stone-400 mb-4">Published Works</p>
            <h2 className="font-serif text-3xl text-stone-800">Books</h2>
          </div>

          <div className="grid md:grid-cols-2 gap-12">
            {books.map((book) => (
              <div key={book.title} className="flex flex-col items-center text-center">
                <div className="w-48 md:w-56 mb-6">
                  <Image
                    src={book.coverImage}
                    alt={`${book.title} by ${book.author} — book cover`}
                    width={224}
                    height={346}
                    className="w-full h-auto rounded-sm shadow-md"
                    sizes="(max-width: 768px) 192px, 224px"
                  />
                </div>
                <h3 className="font-serif text-xl text-stone-800">{book.title}</h3>
                <p className="text-sm text-stone-400 mt-1">
                  {book.publisher}, {book.year}
                </p>
                <p className="mt-3 text-stone-600 text-sm max-w-xs">
                  {book.description}
                </p>
                {book.amazonUrl && (
                  <a
                    href={book.amazonUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-4 text-xs text-stone-500 uppercase tracking-wider hover:text-stone-800 transition-colors underline underline-offset-4"
                  >
                    View on Amazon
                  </a>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Memorial Footer */}
      <footer className="py-16 bg-stone-800 text-white">
        <div className="mx-auto max-w-4xl px-6 text-center">
          <p className="font-serif text-2xl">In Loving Memory</p>
          <p className="mt-4 text-stone-400">
            Cynthia Trenshaw
            <br />
            1942 &mdash; 2024
          </p>
          <p className="mt-8 text-stone-500 text-sm">
            This memorial site was created by her family to preserve her poetry
            and share her words with those who find comfort in them.
          </p>
          <div className="mt-8 pt-8 border-t border-stone-700">
            <p className="text-xs text-stone-500">
              Site maintained by{' '}
              <a
                href="https://katheryntrenshaw.com"
                target="_blank"
                rel="noopener noreferrer"
                className="underline hover:text-stone-400"
              >
                Katheryn Trenshaw
              </a>
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}
