import Link from 'next/link';
import Image from 'next/image';
import { getArtworks, Artwork } from '@/lib/directus';
import { ArtworkCard } from '@/components/artwork-card';
import { HeroCarousel } from '@/components/hero-carousel';
import { WisdomWordsCarousel } from '@/components/wisdom-words-carousel';

export const revalidate = 60;

async function getFeaturedArtworks(): Promise<Artwork[]> {
  try {
    const artworks = await getArtworks({ status: 'published', limit: 6 });
    return artworks;
  } catch (error) {
    console.error('Error fetching artworks:', error);
    return [];
  }
}

export default async function HomePage() {
  const artworks = await getFeaturedArtworks();

  // Hero carousel paintings - exact images from original site
  const heroImages = [
    { src: '/images/choose-love-choose-life.jpg', alt: 'Choose Love, Choose Life' },
    { src: '/images/at-the-stillpoint.jpg', alt: 'At the Stillpoint' },
    { src: '/images/ecstasy-of-belonging.jpg', alt: 'Ecstasy of Belonging' },
    { src: '/images/births-blessing-way.jpg', alt: 'Birth\'s Blessing Way' },
    { src: '/images/surrender-to-oneself.jpg', alt: 'Surrender to Oneself' },
    { src: '/images/spiralling-into-starlight.jpg', alt: 'Spiralling into Starlight' },
    { src: '/images/edge-of-light-darkness.jpg', alt: 'At the Edge of Light You Must Step into Darkness' },
  ];

  // Wisdom words gallery - all quote images from original site
  const wisdomImages = [
    { src: '/images/wisdom-1.png', alt: 'Thich Nhat Hanh quote' },
    { src: '/images/wisdom-2.png', alt: 'Call it clan quote' },
    { src: '/images/wisdom-3.png', alt: 'James Baldwin quote' },
    { src: '/images/wisdom-4.png', alt: 'David Whyte quote' },
    { src: '/images/wisdom-5.png', alt: 'Gilbert duty quote' },
    { src: '/images/wisdom-6.png', alt: 'Rumi light quote' },
    { src: '/images/wisdom-7.png', alt: 'Jane Howard quote' },
    { src: '/images/wisdom-8.png', alt: 'Katheryn quote - celebrates' },
    { src: '/images/wisdom-9.png', alt: 'Katheryn quote - story' },
    { src: '/images/wisdom-10.png', alt: 'Katheryn quote - viewers' },
    { src: '/images/wisdom-11.jpg', alt: 'IYOS FB quote' },
    { src: '/images/wisdom-12.jpg', alt: 'Oliver quote' },
    { src: '/images/wisdom-13.png', alt: 'Walt Whitman quote' },
    { src: '/images/wisdom-14.jpg', alt: 'Light quote' },
    { src: '/images/wisdom-15.jpg', alt: 'Alan Watts quote' },
    { src: '/images/wisdom-16.png', alt: 'Katheryn beauty quote' },
  ];

  // Instagram feed images
  const instagramImages = [
    { src: '/images/instagram-1.jpg', alt: 'Instagram 1' },
    { src: '/images/instagram-2.jpg', alt: 'Instagram 2' },
    { src: '/images/instagram-3.jpg', alt: 'Instagram 3' },
    { src: '/images/instagram-4.jpg', alt: 'Instagram 4' },
    { src: '/images/instagram-5.jpg', alt: 'Instagram 5' },
    { src: '/images/instagram-6.jpg', alt: 'Instagram 6' },
  ];

  return (
    <div>
      {/* Hero Carousel - Full screen, 2-second autoplay, fade transition */}
      <HeroCarousel images={heroImages} interval={2000} />

      {/* Tagline - Passionate Presence Center */}
      <section className="py-16 bg-white">
        <div className="text-center px-4 max-w-4xl mx-auto">
          <h1 className="font-serif text-3xl md:text-4xl lg:text-5xl leading-tight text-[#222]">
            Passionate Presence Center
            <br />
            for Creative Expression
          </h1>
        </div>
      </section>

      {/* Testimonial Quote - exact text from original */}
      <section className="py-16 bg-white border-t border-gray-100">
        <div className="text-center px-4 max-w-3xl mx-auto">
          <blockquote className="text-lg md:text-xl text-[#222] italic leading-relaxed">
            &ldquo;Working with Katheryn Trenshaw is fun and illuminating. It has served the
            unfolding of my deep remembering. Artist, healer, transformer; Katheryn embodies
            what she teaches.&rdquo;
          </blockquote>
          <footer className="mt-6 text-sm text-gray-500 uppercase tracking-widest">
            — DJ, Counsellor, Maine, USA
          </footer>
        </div>
      </section>

      {/* ARTWORK Section */}
      <section className="py-20 bg-white" id="artwork">
        <div className="mx-auto max-w-5xl px-4">
          <div className="text-center mb-12">
            <p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">ARTWORK</p>
            <h2 className="font-serif text-3xl md:text-4xl text-[#222]">Paintings Store</h2>
          </div>

          {artworks.length > 0 ? (
            <div className="grid gap-8 grid-cols-1 md:grid-cols-2">
              {artworks.map((artwork, index) => (
                <ArtworkCard
                  key={artwork.id}
                  artwork={artwork}
                  priority={index < 2}
                  aspectRatio="3:2"
                />
              ))}
            </div>
          ) : (
            /* Static fallback with hero images as artwork */
            <div className="grid gap-8 grid-cols-1 md:grid-cols-2">
              {heroImages.slice(0, 6).map((img, index) => (
                <Link key={index} href="/store" className="group block">
                  <div className="relative aspect-[3/2] bg-gray-100 overflow-hidden">
                    <Image
                      src={img.src}
                      alt={img.alt}
                      fill
                      className="object-cover transition-transform duration-500 group-hover:scale-105"
                      sizes="(max-width: 768px) 100vw, 50vw"
                      priority={index < 2}
                    />
                  </div>
                  <div className="mt-4 text-center">
                    <h3 className="font-serif text-lg text-[#222]">{img.alt}</h3>
                  </div>
                </Link>
              ))}
            </div>
          )}

          <div className="mt-16 text-center">
            <Link
              href="/store"
              className="inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors"
            >
              View Store
            </Link>
          </div>
        </div>
      </section>

      {/* IN YOUR OWN SKIN Section */}
      <section className="py-20 bg-gray-50" id="in-your-own-skin">
        <div className="mx-auto max-w-6xl px-4">
          <div className="grid gap-12 lg:grid-cols-2 items-center">
            {/* Image */}
            <div className="relative aspect-[4/5] bg-gray-100 overflow-hidden">
              <Image
                src="/images/iyos-book-hands.jpg"
                alt="In Your Own Skin"
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>

            {/* Content */}
            <div>
              <h2 className="font-serif text-4xl md:text-5xl text-[#222]">In Your Own Skin</h2>
              <p className="mt-6 text-gray-600 leading-relaxed">
                <strong>In Your Own Skin: Photographic Portraits Revealing Our Secrets</strong> is
                an antidote to human separation. Katheryn Trenshaw reveals our most powerful
                secrets in photographic autobiographies on skin.
              </p>
              <p className="mt-4 text-gray-600 leading-relaxed">
                Features 54 portraits from 40+ countries exploring themes of identity, belonging,
                and what it means to truly inhabit your own creative space.
              </p>
              <div className="mt-8 flex flex-col sm:flex-row gap-4">
                <Link
                  href="/in-your-own-skin"
                  className="inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors text-center"
                >
                  Watch now
                </Link>
                <a
                  href="https://www.amazon.co.uk/dp/B07KQXNV1S"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-block px-8 py-4 border-2 border-[#222] text-[#222] text-sm uppercase tracking-wider rounded-full hover:bg-[#222] hover:text-white transition-colors text-center"
                >
                  Buy on Amazon
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* EVENTS Section */}
      <section className="py-20 bg-white" id="events">
        <div className="mx-auto max-w-4xl px-4">
          <div className="text-center mb-12">
            <p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">EVENTS</p>
            <h2 className="font-serif text-3xl md:text-4xl text-[#222]">Upcoming</h2>
          </div>

          <div className="space-y-8">
            {/* Event 1 */}
            <div className="border-b border-gray-200 pb-8">
              <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">Feb 2, 2026</p>
              <h3 className="font-serif text-xl text-[#222]">Secret Screening</h3>
              <p className="mt-2 text-gray-600">
                An exclusive preview event for the creative community.
              </p>
              <Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline">
                Learn More
              </Link>
            </div>

            {/* Event 2 */}
            <div className="border-b border-gray-200 pb-8">
              <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">Apr 4-11, 2026</p>
              <h3 className="font-serif text-xl text-[#222]">UnEarthing Templer Way at Birdwood House</h3>
              <p className="mt-2 text-gray-600">
                A week-long creative retreat exploring art and nature.
              </p>
              <Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline">
                Learn More
              </Link>
            </div>

            {/* Event 3 */}
            <div className="pb-8">
              <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">Apr 16-23, 2026</p>
              <h3 className="font-serif text-xl text-[#222]">UNEARTHING TEMPLER WAY EXHIBITION</h3>
              <p className="mt-2 text-gray-600">
                Exhibition showcasing works created during the retreat.
              </p>
              <Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline">
                Learn More
              </Link>
            </div>
          </div>

          <div className="mt-12 text-center">
            <Link
              href="/events"
              className="inline-block px-8 py-4 border-2 border-[#222] text-[#222] text-sm uppercase tracking-wider rounded-full hover:bg-[#222] hover:text-white transition-colors"
            >
              View Events
            </Link>
          </div>
        </div>
      </section>

      {/* WISDOM WORDS Section */}
      <section className="py-20 bg-gray-50" id="wisdom-words">
        <div className="mx-auto max-w-6xl px-4">
          <div className="text-center mb-12">
            <p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">INSPIRATION</p>
            <h2 className="font-serif text-3xl md:text-4xl text-[#222]">Wisdom Words</h2>
            <p className="mt-4 text-gray-600">
              This is a treasure trove of favorite inspirations and wise words to share.
            </p>
          </div>

          <WisdomWordsCarousel images={wisdomImages} interval={6000} />

          <div className="mt-12 text-center">
            <Link
              href="/wisdom-words"
              className="inline-block px-8 py-4 border-2 border-[#222] text-[#222] text-sm uppercase tracking-wider rounded-full hover:bg-[#222] hover:text-white transition-colors"
            >
              Wisdom Words
            </Link>
          </div>
        </div>
      </section>

      {/* INSTAGRAM Section */}
      <section className="py-20 bg-white" id="instagram">
        <div className="mx-auto max-w-6xl px-4">
          <div className="text-center mb-12">
            <p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-2">FOLLOW ALONG</p>
            <h2 className="font-serif text-3xl md:text-4xl text-[#222]">Instagram</h2>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2">
            {instagramImages.map((img, index) => (
              <a
                key={index}
                href="https://instagram.com/katheryn_trenshaw"
                target="_blank"
                rel="noopener noreferrer"
                className="relative aspect-square group overflow-hidden"
              >
                <Image
                  src={img.src}
                  alt={img.alt}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-110"
                  sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 16vw"
                />
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
                  <svg
                    className="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" />
                  </svg>
                </div>
              </a>
            ))}
          </div>

          <div className="mt-12 text-center">
            <a
              href="https://instagram.com/katheryn_trenshaw"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors"
            >
              Visit Instagram
            </a>
          </div>
        </div>
      </section>

      {/* SUBSCRIBE Section - Dark footer style */}
      <section className="py-20 bg-[#222] text-white">
        <div className="mx-auto max-w-xl px-4 text-center">
          <h2 className="font-serif text-3xl md:text-4xl">Get in Touch</h2>
          <p className="mt-4 text-gray-300">
            Receive updates and occasional newsletters about new artwork, events, and creative offerings.
          </p>
          <form className="mt-8 flex flex-col sm:flex-row gap-3">
            <input
              type="email"
              placeholder="Enter your email"
              className="flex-1 px-4 py-4 bg-transparent border border-white/30 text-white placeholder-gray-400 focus:border-white focus:outline-none rounded-full"
            />
            <button
              type="submit"
              className="px-8 py-4 bg-white text-[#222] text-sm uppercase tracking-wider rounded-full hover:bg-gray-100 transition-colors"
            >
              Subscribe
            </button>
          </form>

          {/* Social Links */}
          <div className="mt-12 flex justify-center gap-6">
            <a
              href="mailto:post@ktrenshaw.com"
              className="w-10 h-10 border border-white/30 rounded-full flex items-center justify-center hover:border-white transition-colors"
              aria-label="Email"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </a>
            <a
              href="https://www.youtube.com/channel/UC37yzOhJTfAFGxI_0fL-kUA"
              target="_blank"
              rel="noopener noreferrer"
              className="w-10 h-10 border border-white/30 rounded-full flex items-center justify-center hover:border-white transition-colors"
              aria-label="YouTube"
            >
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
              </svg>
            </a>
            <a
              href="https://instagram.com/katheryn_trenshaw"
              target="_blank"
              rel="noopener noreferrer"
              className="w-10 h-10 border border-white/30 rounded-full flex items-center justify-center hover:border-white transition-colors"
              aria-label="Instagram"
            >
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" />
              </svg>
            </a>
            <a
              href="https://www.facebook.com/KatherynTrenshawRadicalWellbeing"
              target="_blank"
              rel="noopener noreferrer"
              className="w-10 h-10 border border-white/30 rounded-full flex items-center justify-center hover:border-white transition-colors"
              aria-label="Facebook"
            >
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
              </svg>
            </a>
          </div>

          {/* Logo */}
          <div className="mt-12">
            <Image
              src="/images/logo-kt.png"
              alt="Katheryn Trenshaw"
              width={200}
              height={60}
              className="mx-auto opacity-80"
            />
          </div>

          {/* Copyright */}
          <p className="mt-8 text-xs text-gray-500">
            images and writing © Katheryn M. Trenshaw 2025
          </p>
        </div>
      </section>
    </div>
  );
}
