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

export default function About() {
  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-blue-600 hover:text-blue-800 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="hero-bg py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl">
            <h1 className="text-5xl font-bold text-white mb-4">About Aunty Sparkles</h1>
            <div className="w-16 h-1 bg-yellow-400 mb-6"></div>
            <p className="text-lg text-gray-300">The heart behind Aunty Sparkles</p>
          </div>
        </div>
      </section>

      {/* Main Content */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4">
          <div className="flex items-start max-w-6xl">
            <div className="w-2/3 pr-12">
              <p className="text-gray-300 leading-relaxed mb-6">
                Hi, I'm Kiersten, the creator behind Aunty Sparkles! I've always been drawn to nature, creativity, and
                the little details that make life feel magical. I love wandering through thrift stores and vintage
                shops, finding inspiration in the textures, colors, and shapes of the natural world. I'm also fascinated
                by handmade fashion—the freedom, the playfulness, and the way people express themselves as boldly and
                beautifully.
              </p>

              <p className="text-gray-300 leading-relaxed mb-6">
                Aunty Sparkles grew out of my love for giving forgotten things new life. I adore hunting for thrifted
                treasures, repurposing materials, and turning them into something completely unique, whether it's a
                hand-painted denim jacket, a piece of whimsical mushroom art, or a watercolor painting that captures a
                bit of woodland wonder. Each creation is made with intention and care.
              </p>

              <p className="text-gray-300 leading-relaxed mb-12">
                This brand is my way of blending sustainability, creativity, and a love for the earth into something
                that can be shared. My hope is that when you wear or see an Aunty Sparkles piece, you remember you are
                unique and beautiful, and that beauty can be found everywhere—especially in the things we choose to give
                a second life.
              </p>
            </div>
            <div className="w-1/3">
              <Image
                src="/images/about-photo.jpeg"
                alt="Person sitting with decorative mushrooms in forest"
                width={400}
                height={500}
                className="rounded-lg w-full h-auto object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Why Upcycling Matters */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4">
          <div className="flex items-start">
            <div className="w-1/3 pr-8">
              <Image
                src="/images/textile-waste.webp"
                alt="Mountain of textile waste showing environmental impact"
                width={300}
                height={300}
                className="rounded-lg"
              />
            </div>
            <div className="w-2/3">
              <h2 className="text-3xl font-bold text-white mb-6">Why Upcycling Matters</h2>
              <p className="text-gray-300 leading-relaxed mb-8">
                The fashion industry produces over 100 billion garments annually, yet we wear a million tonnes of
                clothing and up to landfills annually. Most of these textiles take decades—or even centuries—to break
                down, releasing harmful chemicals and microplastics into the environment. Upcycling helps change that by
                giving forgotten items a second chance at life, and cutting down the demand for new production. Every
                upcycled piece keeps fabric out of a landfill and turns it into something beautiful and
                meaningful—proving that sustainability and style can go hand in hand.
              </p>

              <div className="space-y-4">
                <div>
                  <div className="flex justify-between text-sm text-gray-300 mb-1">
                    <span>60% of fast fashion is discarded within the year</span>
                  </div>
                  <div className="w-full bg-gray-700 rounded-full h-2">
                    <div className="bg-pink-500 h-2 rounded-full" style={{ width: "60%" }}></div>
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-sm text-gray-300 mb-1">
                    <span>85% of all discarded clothing ends up in landfills</span>
                  </div>
                  <div className="w-full bg-gray-700 rounded-full h-2">
                    <div className="bg-pink-500 h-2 rounded-full" style={{ width: "85%" }}></div>
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-sm text-gray-300 mb-1">
                    <span>35% of microplastics in the ocean are from textiles</span>
                  </div>
                  <div className="w-full bg-gray-700 rounded-full h-2">
                    <div className="bg-pink-500 h-2 rounded-full" style={{ width: "35%" }}></div>
                  </div>
                </div>

                <div>
                  <div className="flex justify-between text-sm text-gray-300 mb-1">
                    <span>20% of global wastewater is from dying textiles</span>
                  </div>
                  <div className="w-full bg-gray-700 rounded-full h-2">
                    <div className="bg-pink-500 h-2 rounded-full" style={{ width: "20%" }}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Finding Treasure */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4">
          <div className="flex items-start">
            <div className="w-2/3 pr-8">
              <h2 className="text-3xl font-bold text-white mb-6">Finding Treasure in the Forgotten</h2>
              <p className="text-gray-300 leading-relaxed mb-8">
                Aunty Sparkles creations start with a hunt through thrift stores and vintage shops, where I search for
                overlooked and discarded items just for a second chance. Denim jackets have become my favorite
                canvas—they're durable, timeless, and full of character. I look for pieces that have lived a life: faded
                denim, vintage cuts, or forgotten prints. Even pieces that are stained or damaged can make beautiful
                fabrics and textures worth saving. By rescuing these forgotten textiles, they are transformed into
                something new, unique, and full of character, keeping them out of landfills and giving them a second
                life.
              </p>
            </div>
            <div className="w-1/3">
              <Image
                src="/images/thrift-store.webp"
                alt="Thrift store exterior showing secondhand shopping"
                width={300}
                height={300}
                className="rounded-lg"
              />
            </div>
          </div>

          {/* Map */}
          <div className="mt-16">
            <Image
              src="/placeholder.svg?height=400&width=800&text=Location+Map"
              alt="Location map"
              width={800}
              height={400}
              className="rounded-lg mx-auto"
            />
          </div>
        </div>
      </section>

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