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

export const revalidate = 60;

async function getFeaturedArtworks(): Promise<Artwork[]> {
  try {
    // Fetch more than needed and prefer artworks with images
    const artworks = await getArtworks({ status: 'published', limit: 50 });
    const withImages = artworks.filter((a) => a.image);
    // Return up to 6 artworks that have images, or fall back to whatever is available
    return withImages.length >= 6 ? withImages.slice(0, 6) : artworks.slice(0, 6);
  } catch (error) {
    console.error('Error fetching artworks:', error);
    return [];
  }
}

async function getUpcomingEvents(): Promise<Event[]> {
  try {
    const events = await getEvents({ status: 'published', limit: 4 });
    return events;
  } catch (error) {
    console.error('Error fetching events:', error);
    return [];
  }
}

function formatEventDate(start?: string, end?: string): string {
  if (!start) return '';
  const s = new Date(start);
  const opts: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
  if (!end) return s.toLocaleDateString('en-GB', opts);
  const e = new Date(end);
  return `${s.toLocaleDateString('en-GB', opts)} - ${e.toLocaleDateString('en-GB', opts)}`;
}

export default async function HomePage() {
  const [artworks, upcomingEvents] = await Promise.all([
    getFeaturedArtworks(),
    getUpcomingEvents(),
  ]);

  // 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 - Full screen portrait with quote overlay (matching Squarespace original) */}
      <section className="relative min-h-screen flex items-center justify-center">
        {/* Background Image */}
        <Image
          src="https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1535812716548-IZ9JMMH605VBAMYHL3G3/20180614Katheryn--18.jpg"
          alt="Katheryn Trenshaw"
          fill
          className="object-cover object-[52%_53%]"
          priority
          sizes="100vw"
        />
        {/* Overlay */}
        <div className="absolute inset-0 bg-black/30" />

        {/* Content */}
        <div className="relative z-10 text-center text-white px-4 max-w-3xl mx-auto">
          <blockquote className="text-xl md:text-2xl lg:text-3xl italic leading-relaxed font-serif">
            <span className="text-4xl">&ldquo;</span>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.<span className="text-4xl">&rdquo;</span>
          </blockquote>
          <footer className="mt-8 text-sm uppercase tracking-widest opacity-80">
            — DJ, Counsellor, Maine, USA
          </footer>

          {/* Social Icons */}
          <div className="mt-12 flex justify-center gap-4">
            <a
              href="mailto:post@ktrenshaw.com"
              className="w-10 h-10 border border-white/50 rounded-full flex items-center justify-center hover:border-white hover:bg-white/10 transition-all"
              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/50 rounded-full flex items-center justify-center hover:border-white hover:bg-white/10 transition-all"
              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/50 rounded-full flex items-center justify-center hover:border-white hover:bg-white/10 transition-all"
              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/50 rounded-full flex items-center justify-center hover:border-white hover:bg-white/10 transition-all"
              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>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-white text-center animate-bounce">
          <span className="text-xs uppercase tracking-widest opacity-60">Scroll</span>
          <svg className="w-6 h-6 mx-auto mt-2 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </div>
      </section>

      {/* 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>
          <p className="mt-4 text-sm uppercase tracking-[0.3em] text-gray-500">
            Katheryn Trenshaw
          </p>
        </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 - featured paintings from Squarespace */
            <div className="grid gap-8 grid-cols-1 md:grid-cols-2">
              {[
                { src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1598803728300-94MWPCAF8LXZF2OB1K4Y/image-asset.jpeg', alt: 'Autumn Offerings' },
                { src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636339005-KXP5FWW72I8KV6KNEPU8/%3Cuntitled%3EChoose+Love%2C+Choose+Life.jpg', alt: 'Choose Love, Choose Life' },
                { src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636369170-918IHIE2QG2X8559QZI9/%3Cuntitled%3EKT1050--At_the_Stillpoint.jpg', alt: 'At the Stillpoint' },
                { src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636398212-Z28TYI1OMR1O6LDO1B9R/%3Cuntitled%3EKT1283--Ecstasy+of+Belonging.jpg', alt: 'Ecstasy of Belonging' },
                { src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636452434-S4AS1X4N6FW242BNPYSH/%3Cuntitled%3EKT1033--Births+Blessing+Way.jpg', alt: 'Birth\'s Blessing Way' },
                { src: 'https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1605636538275-DBY1CPYS9K1IXM6D0FBK/%3Cuntitled%3ESpiralling+into+Starlight.jpg', alt: 'Spiralling into Starlight' },
              ].map((img, index) => (
                <Link key={index} href="/store" className="group block">
                  <div className="relative aspect-[3/4] 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 - Video Background */}
      <section className="relative min-h-[80vh] flex items-center justify-center overflow-hidden" id="in-your-own-skin">
        {/* YouTube Video Background */}
        <div className="absolute inset-0 pointer-events-none">
          <iframe
            src="https://www.youtube.com/embed/JnaDOhU0mCs?autoplay=1&mute=1&loop=1&playlist=JnaDOhU0mCs&controls=0&showinfo=0&modestbranding=1&playsinline=1"
            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[177.78vh] min-w-full h-[56.25vw] min-h-full"
            allow="autoplay; fullscreen"
            title="In Your Own Skin Trailer"
          />
        </div>
        {/* Overlay */}
        <div className="absolute inset-0 bg-black/50" />

        {/* Content */}
        <div className="relative z-10 text-center text-white px-4 max-w-2xl mx-auto">
          <h2 className="font-serif text-4xl md:text-5xl lg:text-6xl">In Your Own Skin</h2>
          <p className="mt-2 font-serif text-2xl md:text-3xl opacity-90">trailer</p>
          <div className="mt-12">
            <Link
              href="/in-your-own-skin"
              className="inline-block px-8 py-4 border-2 border-white text-white text-sm uppercase tracking-wider rounded-full hover:bg-white hover:text-[#222] transition-colors"
            >
              Watch now
            </Link>
          </div>
        </div>
      </section>

      {/* BOOK Section */}
      <section className="py-20 bg-white" id="book">
        <div className="mx-auto max-w-5xl px-4">
          <div className="grid gap-12 lg:grid-cols-3 items-start">
            {/* Book Cover */}
            <div className="lg:col-span-1">
              <a
                href="https://www.amazon.co.uk/Your-Own-Skin-Photographic-Portraits/dp/0990542009"
                target="_blank"
                rel="noopener noreferrer"
                className="block"
              >
                <Image
                  src="https://images-eu.ssl-images-amazon.com/images/I/51q58fdCgbL.jpg"
                  alt="In Your Own Skin Book"
                  width={500}
                  height={500}
                  className="w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-shadow"
                />
              </a>
            </div>

            {/* Book Details */}
            <div className="lg:col-span-2">
              <h3 className="font-serif text-2xl text-[#222]">
                In Your Own Skin: Photographic Portraits Revealing Our Secrets
              </h3>
              <p className="mt-2 text-gray-500">By Katheryn M. Trenshaw</p>
              <div className="mt-6 prose prose-lg text-gray-600">
                <p>
                  <strong>In Your Own Skin</strong> is an antidote to human separation. Katheryn
                  Trenshaw reveals our most powerful secrets in photographic autobiographies on
                  skin and turns these portraits into a powerful medium for change.
                </p>
                <p>
                  Katheryn has been travelling around the globe like a peripatetic social
                  anthropologist treasure hunter collecting stories, footage and photographs of
                  strangers in response to the question: &ldquo;What is true of you but not obvious
                  to strangers?&rdquo;
                </p>
                <p>
                  These 54 colour photo portraits and stories of people from over 40 countries
                  have shared their intimate secrets, revealing a living transformative story in
                  a world searching for hope, wisdom and resilience.
                </p>
              </div>
              <div className="mt-8">
                <a
                  href="https://www.amazon.co.uk/Your-Own-Skin-Photographic-Portraits/dp/0990542009"
                  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"
                >
                  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">
            {upcomingEvents.length > 0 ? (
              upcomingEvents.map((event, index) => (
                <div key={event.id} className={index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}>
                  <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
                    {formatEventDate(event.start_date, event.end_date)}
                  </p>
                  <h3 className="font-serif text-xl text-[#222]">{event.title}</h3>
                  {event.location && (
                    <p className="mt-1 text-sm text-gray-500">{event.location}</p>
                  )}
                  {event.description && (
                    <p className="mt-2 text-gray-600 line-clamp-2">{event.description}</p>
                  )}
                  <Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline">
                    Learn More
                  </Link>
                </div>
              ))
            ) : (
              <p className="text-center text-gray-500 py-8">No upcoming events at the moment.</p>
            )}
          </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>

      {/* FOOTER Section - Dark footer style */}
      <section className="py-16 bg-[#222] text-white">
        <div className="mx-auto max-w-xl px-4 text-center">
          {/* Social Links */}
          <div className="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>
  );
}