import Image from "next/image"
import SiteFooter from "@/components/site-footer"

export default function Home() {
  return (
    <div className="min-h-screen bg-black">
      {/* Header */}
      <header className="bg-[#e8e4d3] py-4">
        <div className="container mx-auto px-4 flex items-center justify-between">
          <div className="flex items-center">
            <a href="/" className="flex items-center">
              <Image
                src="/images/logo-black-white.png"
                alt="Aunty Sparkles Logo"
                width={96}
                height={96}
                className="mr-4"
              />
            </a>
          </div>
          <div className="flex items-center space-x-8">
            <nav>
              <ul className="flex space-x-8 text-xl font-bold">
                <li>
                  <a href="/about" className="text-gray-700 hover:text-gray-900 transition-colors">
                    About
                  </a>
                </li>
                <li>
                  <a href="/gallery" className="text-gray-700 hover:text-gray-900 transition-colors">
                    Gallery
                  </a>
                </li>
                <li>
                  <a href="/contact" className="text-gray-700 hover:text-gray-900 transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </nav>
            <a
              href="/shop"
              className="bg-pink-500 text-white px-6 py-2 font-semibold hover:bg-pink-400 transition-colors rounded-full shadow-lg"
            >
              SHOP NOW
            </a>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section
        className="relative py-20 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('/images/denim-hero-background.png')`,
        }}
      >
        {/* Overlay for better text readability */}
        <div className="absolute inset-0 bg-black bg-opacity-40"></div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="flex items-center justify-between">
            <div className="w-1/2">
              <div className="w-96 h-96 mx-auto">
                <Image
                  src="/images/embroidered-patch.webp"
                  alt="Aunty Sparkles Logo"
                  width={384}
                  height={384}
                  className="rounded-full shadow-lg"
                />
              </div>
            </div>
            <div className="w-1/2 text-white">
              <h1 className="text-5xl font-bold mb-4 text-shadow-lg">Aunty Sparkles</h1>
              <div className="w-16 h-1 bg-yellow-400 mb-6"></div>
              <p className="text-lg mb-8 leading-relaxed text-shadow">
                Welcome to Aunty Sparkles – a whimsical little world of upcycled treasures and handmade creations that
                will make you sparkle just like me!
              </p>
              <a
                href="/shop"
                className="bg-yellow-400 text-black px-8 py-3 font-semibold hover:bg-yellow-300 transition-colors mx-auto block shadow-lg text-center"
              >
                SHOP NOW
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* About Section - Photo LEFT, Text RIGHT */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4">
          <div className="flex items-center">
            <div className="w-1/2 pr-12 flex items-start">
              <Image
                src="/images/about-photo.jpeg"
                alt="Person sitting with decorative mushrooms in forest"
                width={500}
                height={600}
                className="rounded-lg w-full h-auto object-cover"
              />
            </div>
            <div className="w-1/2">
              <h2 className="text-4xl font-bold text-white mb-8">About Aunty Sparkles</h2>
              <p className="text-gray-300 leading-relaxed mb-6">
                Aunty Sparkles is a celebration of creativity, sustainability, and a love for the little details that
                make life feel special. Rooted in upcycling and inspired by nature, every piece represents a commitment
                to giving new life to forgotten items while creating something truly unique.
              </p>
              <p className="text-gray-300 leading-relaxed">
                To be unique. Nothing here is mass-produced; each creation carries its own story, designed to bring joy
                and individuality to your life. When you shop at Aunty Sparkles, you'll find treasures that are playful,
                thoughtful, and connected by one thread: the belief that everyone deserves to sparkle.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Collections Section */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4">
          <h2 className="font-bold text-white text-center mb-12 text-6xl">Collections</h2>
          <div className="w-16 h-1 bg-yellow-400 mb-16"></div>

          {/* Upcycled Jackets */}
          <div className="flex items-center mb-20">
            <div className="w-1/2 pr-12">
              <Image
                src="/images/upcycled-jackets.webp"
                alt="Upcycled Jackets and Art Collection"
                width={500}
                height={500}
                className="rounded-lg"
              />
            </div>
            <div className="w-1/2">
              <h3 className="text-3xl font-bold text-white mb-6">Upcycled Jackets</h3>
              <p className="text-gray-300 leading-relaxed mb-8">
                Every Aunty Sparkles jacket is a one-of-a-kind creation, handcrafted from secondhand denim and
                transformed into wearable art. Every piece is upcycled with care, featuring hand-painted designs and
                whimsical patches that tell a story. From bold, colorful graphics to delicate, nature-inspired details,
                each jacket lets you wear your story while keeping sustainability at heart.
              </p>
              <button className="bg-pink-500 text-white px-8 py-3 font-semibold hover:bg-pink-400 transition-colors">
                SHOP FOR JACKETS
              </button>
            </div>
          </div>

          {/* Art and Jewelry */}
          <div className="flex items-center mb-20">
            <div className="w-1/2 pr-12">
              <h3 className="text-3xl font-bold text-white mb-6">Art and Jewelry</h3>
              <p className="text-gray-300 leading-relaxed mb-8">
                Aunty Sparkles brings a touch of whimsy to everyday life. Handmade mushroom art captures the magic of
                nature in soft, playful tones, while unique stickers add a little sparkle to any surface. Each piece is
                designed to bring joy and wonder to your world, with hand-painted details and wearable pieces of
                woodland wonder. Each creation is made with love, inspired by the beauty and curiosity of the natural
                world.
              </p>
              <button className="bg-pink-500 text-white px-8 py-3 font-semibold hover:bg-pink-400 transition-colors">
                SHOP ART AND JEWELRY
              </button>
            </div>
            <div className="w-1/2">
              <Image
                src="/images/product-collage.webp"
                alt="Aunty Sparkles product collage showing art and jewelry pieces"
                width={400}
                height={400}
                className="rounded-lg"
              />
            </div>
          </div>

          {/* Block Prints */}
          <div className="flex items-center">
            <div className="w-1/2 pr-12">
              <Image
                src="/images/embroidered-patch.webp"
                alt="Embroidered patch design"
                width={400}
                height={400}
                className="rounded-lg"
              />
            </div>
            <div className="w-1/2">
              <h3 className="text-3xl font-bold text-white mb-6">Block Prints - COMING SOON</h3>
              <p className="text-gray-300 leading-relaxed mb-8">
                Get ready for Aunty Sparkles' newest adventure! Block Prints will be the place to discover hand-carved
                stamps and printing tools for your own creativity. Stay tuned for our hand-carved stamps and printing
                tools that will help you create your own beautiful designs. You'll discover easy-to-use block tools.
                Carve that look amazing on everything you make and create your own sparkle.
              </p>
              <button className="bg-yellow-400 text-black px-8 py-3 font-semibold hover:bg-yellow-300 transition-colors">
                SHOP PRINTED CLOTHES
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <SiteFooter />
    </div>
  )
}