"use client"

import { useState } from "react"

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

export default function Contact() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Handle form submission
    console.log("Form submitted:", formData)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

  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-blue-600 hover:text-blue-800 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 text-center">
          <h1 className="text-5xl font-bold text-white mb-4">Contact</h1>
          <div className="w-16 h-1 bg-yellow-400 mb-8 mx-auto"></div>
          <p className="text-lg text-gray-300 max-w-2xl mx-auto">
            Got questions, custom requests, or just want to say hi? I'd love to hear from you!
          </p>
        </div>
      </section>

      {/* Contact Cards */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4">
          <div className="flex justify-center gap-8 mb-20">
            <div className="bg-white rounded-lg p-8 text-center max-w-sm">
              <h3 className="text-2xl font-bold text-gray-800 mb-4">INSTAGRAM</h3>
              <p className="text-gray-600 mb-6">
                Follow me on Instagram for behind-the-scenes peeks, new creations, market updates, and a little dose of
                upcycled magic.
              </p>
              <p className="font-semibold text-gray-800">@Aunty.Sparkles</p>
            </div>

            <div className="bg-white rounded-lg p-8 text-center max-w-sm">
              <h3 className="text-2xl font-bold text-gray-800 mb-4">EMAIL</h3>
              <p className="text-gray-600 mb-6">
                I'd love to hear from you! Whether it's about a custom piece, a market inquiry, or just to say hi, you
                can email me anytime and I'll get back to you as soon as I can.
              </p>
              <p className="font-semibold text-gray-800">Aunty.Sparkles@gmail.com</p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Form */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl mx-auto text-center mb-12">
            <h2 className="text-4xl font-bold text-white mb-4">Let's Talk</h2>
            <div className="w-16 h-1 bg-yellow-400 mb-8 mx-auto"></div>
            <p className="text-gray-300">
              Have a question, a custom request, or just want to say hi? Fill out the form below with your details and
              message, and I'll get back to you as soon as I can!
            </p>
          </div>

          <form onSubmit={handleSubmit} className="max-w-2xl mx-auto">
            <div className="mb-6">
              <input
                type="text"
                name="name"
                placeholder="Name"
                value={formData.name}
                onChange={handleChange}
                className="w-full bg-transparent border border-gray-600 rounded px-4 py-3 text-white placeholder-gray-400 focus:border-yellow-400 focus:outline-none"
                required
              />
            </div>

            <div className="mb-6">
              <input
                type="email"
                name="email"
                placeholder="Email Address"
                value={formData.email}
                onChange={handleChange}
                className="w-full bg-transparent border border-gray-600 rounded px-4 py-3 text-white placeholder-gray-400 focus:border-yellow-400 focus:outline-none"
                required
              />
            </div>

            <textarea
              name="message"
              placeholder="Message"
              value={formData.message}
              onChange={handleChange}
              rows={6}
              className="w-full bg-transparent border border-gray-600 rounded px-4 py-3 text-white placeholder-gray-400 focus:border-yellow-400 focus:outline-none mb-8"
              required
            ></textarea>

            <div className="text-center">
              <button
                type="submit"
                className="bg-yellow-400 text-black px-8 py-3 font-semibold hover:bg-yellow-300 transition-colors"
              >
                SEND MESSAGE
              </button>
            </div>
          </form>
        </div>
      </section>

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