'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';

// Navigation Component
function Navigation() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <>
      <nav className="fixed top-0 left-0 right-0 z-50 glass">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <Link href="/" className="text-2xl font-light tracking-widest">
            XHIVA ART
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-2">
            <Link href="/" className="nav-link">Home</Link>
            <Link href="#art" className="nav-link">Art</Link>
            <Link href="#about" className="nav-link">About</Link>
            <Link href="#services" className="nav-link">Services</Link>
            <Link href="#reevolution" className="nav-link">Re Evolution Art</Link>
            <Link href="#contact" className="nav-link">Contact</Link>
          </div>

          {/* Mobile Menu Button */}
          <button
            className="md:hidden p-2"
            onClick={() => setMobileMenuOpen(true)}
            aria-label="Open menu"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <line x1="3" y1="6" x2="21" y2="6"/>
              <line x1="3" y1="12" x2="21" y2="12"/>
              <line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
          </button>
        </div>
      </nav>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="mobile-menu">
          <button
            className="absolute top-6 right-6 p-2"
            onClick={() => setMobileMenuOpen(false)}
            aria-label="Close menu"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <line x1="18" y1="6" x2="6" y2="18"/>
              <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
          <Link href="/" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Home</Link>
          <Link href="#art" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Art</Link>
          <Link href="#about" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>About</Link>
          <Link href="#services" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Services</Link>
          <Link href="#reevolution" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Re Evolution Art</Link>
          <Link href="#contact" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>Contact</Link>
        </div>
      )}
    </>
  );
}

// Hero Section
function HeroSection() {
  return (
    <section className="min-h-screen relative flex flex-col items-center justify-center text-center px-6 pt-20">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <Image
          src="/images/hero/hero-main.jpg"
          alt="Ximena Xaguar"
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-b from-[var(--bg-cream)]/90 via-[var(--bg-cream)]/70 to-[var(--bg-cream)]/90" />
      </div>

      <div className="max-w-4xl mx-auto relative z-10">
        <p className="font-sans-alt text-xs tracking-[0.3em] text-[var(--text-muted)] mb-6 fade-in">
          MULTIDISCIPLINARY VISIONARY ARTIST
        </p>
        <h1 className="text-5xl md:text-7xl lg:text-8xl font-light tracking-wider mb-8 fade-in stagger-1">
          XIMENA XAGUAR
        </h1>
        <div className="divider fade-in stagger-2"></div>
        <p className="text-lg md:text-xl max-w-2xl mx-auto mb-16 leading-relaxed opacity-80 fade-in stagger-2">
          Working at the intersection of art, ritual and embodied presence, creating experiences
          that support clarity, integration, exploration and transformation.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center fade-in stagger-3">
          <Link href="#art" className="btn-outline">
            Explore Art & Ritual Sessions
          </Link>
          <Link href="#reevolution" className="btn-filled">
            Discover Re Evolution Art
          </Link>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce opacity-50 z-10">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M12 5v14M5 12l7 7 7-7"/>
        </svg>
      </div>
    </section>
  );
}

// Ritual Art Alchemy Section
function RitualArtSection() {
  return (
    <section id="art" className="section bg-white">
      <div className="max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          {/* Featured Art Image */}
          <div className="relative aspect-[3/4] rounded-2xl overflow-hidden shadow-xl">
            <Image
              src="/images/art/featured.jpg?v=2"
              alt="Visionary Art by Ximena Xaguar"
              fill
              className="object-cover"
            />
          </div>

          <div className="text-center">
            <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              VISUAL ALCHEMY
            </p>
            <h2 className="text-4xl md:text-5xl font-light mb-6">
              Ritual Art Alchemy
            </h2>
            <div className="divider"></div>
            <p className="text-lg leading-relaxed mb-6 opacity-80">
              My art is my ritual — a journey of transformation. Each painting emerges from
              cycles of death and rebirth, shadow work, intuitive vision and ancestral memory.
            </p>
            <p className="text-lg leading-relaxed mb-12 opacity-80">
              Through symbolic language and universal cosmovision, I translate inner processes
              into living images. These artworks are not objects. They are portals. Allies for
              emotional integration, transformation, spiritual insight and energetic coherence.
            </p>
            <div className="pt-2">
              <Link href="#gallery" className="btn-outline">
                Enter the Gallery
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Art Gallery Section
function GallerySection() {
  const artworks = [
    { src: '/images/art/goddess.webp?v=2', title: 'Goddess' },
    { src: '/images/art/mujer-medicina.webp', title: 'Mujer Medicina' },
    { src: '/images/art/shiva-main.webp', title: 'Shiva' },
    { src: '/images/art/twin-flames.webp', title: 'Twin Flames' },
    { src: '/images/art/soul-agreement.webp', title: 'Soul Agreement' },
    { src: '/images/art/madre.webp', title: 'Madre' },
    { src: '/images/art/warmy-munachi.webp', title: 'Warmy Munachi' },
    { src: '/images/art/mi-uma.webp', title: 'Mi Uma' },
    { src: '/images/art/re-evolucion-arte.webp', title: 'Re Evolución Arte' },
    { src: '/images/art/mujer-ser.webp', title: 'Mujer Ser' },
    { src: '/images/art/mural-bio-centro.webp', title: 'Mural Bio Centro Guembe' },
    { src: '/images/art/arte-parque.webp', title: 'Arte Parque' },
    { src: '/images/art/rainbow-tara.webp', title: 'Rainbow Tara' },
    { src: '/images/art/female-fire.webp', title: 'Female Fire' },
    { src: '/images/art/trinidad.webp', title: 'Trinidad' },
    { src: '/images/art/tantra.webp', title: 'Tantra' },
    { src: '/images/art/amazonas.webp', title: 'Amazonas' },
    { src: '/images/art/mujer-jaguar.webp', title: 'Mujer Jaguar' },
    { src: '/images/art/coming-from-the-darkness.webp', title: 'Coming from the Darkness' },
    { src: '/images/art/white-tara.webp', title: 'White Tara' },
    { src: '/images/art/aya.webp', title: 'Aya' },
    { src: '/images/art/pacha.webp', title: 'Pacha' },
    { src: '/images/art/pacha-detalle.webp', title: 'Pacha (Detalle)' },
    { src: '/images/art/warmy-arkanum.webp', title: 'Warmy Arkanum' },
    { src: '/images/art/sacro.webp', title: 'Sacro' },
    { src: '/images/art/inti-om.webp', title: 'Inti Om' },
    { src: '/images/art/totem-astral.webp', title: 'Totem Astral' },
    { src: '/images/art/ayahuaska.webp', title: 'Ayahuaska' },
    { src: '/images/art/sabiduria-ancestral.webp', title: 'Sabiduría Ancestral' },
    { src: '/images/art/amor-astral.webp', title: 'Amor Astral' },
    { src: '/images/art/escencia-mistica.webp', title: 'Escencia Mística' },
    { src: '/images/art/raiz.webp', title: 'Raíz' },
    { src: '/images/art/uni-verso.webp', title: 'Uni Verso' },
    { src: '/images/art/wayra.webp', title: 'Wayra' },
    { src: '/images/art/la-illimani.webp', title: 'La Illimani' },
  ];

  return (
    <section id="gallery" className="section bg-[var(--bg-cream)]">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            GALLERY
          </p>
          <h2 className="text-4xl md:text-5xl font-light mb-6">
            Visionary Artworks
          </h2>
          <div className="divider"></div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {artworks.map((artwork, index) => (
            <div
              key={index}
              className="relative aspect-square rounded-lg overflow-hidden group cursor-pointer"
            >
              <Image
                src={artwork.src}
                alt={artwork.title}
                fill
                className="object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors duration-300 flex items-end justify-center pb-4">
                <span className="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 font-sans-alt text-xs tracking-widest">
                  {artwork.title}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Services Section
function ServicesSection() {
  const services = [
    {
      title: 'Crystal Therapy',
      subtitle: 'Nervous System Alignment',
      duration: 'Crystal reading / 1 hour',
      description: 'One-to-one sessions supporting nervous system regulation and emotional integration through crystal energetic work, elemental somatic presence and intuitive mapping addressing emotional, physical, mental and spiritual coherence.',
      color: 'lavender',
      image: '/images/services/crystal-therapy.webp',
    },
    {
      title: 'Temazcal',
      subtitle: 'Medicine of the Four Elements',
      duration: 'Fire - Earth - Water - Air',
      description: 'Sweatlodge ceremonies guided for 15+ years, rooted in Native American ancestral tradition. Working with four elements and four bodies (physical, emotional, mental, spiritual) within a contained ritual space supporting purification, closure and renewal.',
      color: 'mint',
      image: '/images/services/temazcal.jpg',
    },
    {
      title: 'Deep Integration',
      subtitle: 'Transformation Session',
      duration: '2 Hours',
      description: 'Tailored container for life transitions, post-ceremonial integration or emotional transformation combining somatic work, crystal mapping, astrological and ritual guidance supporting embodiment of insight and conscious transformation.',
      color: 'rose',
      image: '/images/services/deep-integration.webp',
    },
    {
      title: 'Soul Portrait',
      subtitle: 'Art Alchemy',
      duration: 'Group Workshops · TRIBAL Experience',
      description: 'Weaving visionary art with therapeutic process through guided creative immersion. In group workshop settings, participants access deeper self-expression, emotional release and soul integration.',
      color: 'pink',
      image: '/images/art/soul-agreement.webp',
      highlighted: true,
    },
  ];

  return (
    <section id="services" className="section">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            OFFERINGS
          </p>
          <h2 className="text-4xl md:text-5xl font-light mb-6">
            Ritual Healing & Integration
          </h2>
          <div className="divider"></div>
          <p className="text-lg max-w-2xl mx-auto opacity-80">
            Decades of embodied practice since 2009. Current focus is integration and embodiment—
            supporting people to anchor insight, develop inner coherence and regulate nervous systems
            within deep transformation processes.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {services.map((service, index) => (
            <div key={index} className={`group ${service.highlighted ? 'ring-2 ring-[var(--accent-gold)] rounded-xl' : ''}`}>
              <div className="relative aspect-[4/3] rounded-t-xl overflow-hidden">
                <Image
                  src={service.image}
                  alt={service.title}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
              </div>
              <div className={`service-card ${service.color} rounded-t-none`}>
                <h3 className="text-2xl font-light mb-2">{service.title}</h3>
                <p className="font-sans-alt text-xs tracking-widest text-[var(--text-muted)] mb-1">
                  {service.subtitle}
                </p>
                <p className="font-sans-alt text-xs tracking-widest text-[var(--accent-gold)] mb-6">
                  {service.duration}
                </p>
                <p className="text-sm leading-relaxed opacity-80">
                  {service.description}
                </p>
              </div>
            </div>
          ))}
        </div>

        <div className="flex justify-center mt-20">
          <a href="https://booking.xhiva.art" target="_blank" rel="noopener noreferrer" className="btn-outline">
            Book a Session
          </a>
        </div>
      </div>
    </section>
  );
}

// Re Evolution Art Section
function ReEvolutionSection() {
  const events = [
    {
      title: 'Tribal Nights',
      description: 'A signature event weaving ritual, dance and immersive art into one transformative experience.',
      image: '/images/reevolution/tribal-night.jpg',
    },
    {
      title: 'Tribal Experience',
      description: 'Group immersion exploring the unconscious through shamanic journeying, art alchemy and embodied movement.',
      image: '/images/reevolution/event-2.jpg',
    },
    {
      title: 'Visionary Art Week Zürich',
      description: 'Curated week featuring international artists, performances, live music, talks and workshops.',
      image: '/images/reevolution/event-3.jpg',
    },
    {
      title: 'Future Gatherings',
      description: 'Experimental experiences weaving DJ sets with expanded states of presence.',
      image: '/images/reevolution/dj-xhiva.jpg',
      objectPosition: 'center top',
    },
  ];

  return (
    <section id="reevolution" className="section dark-section">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          {/* Logo */}
          <div className="relative w-full max-w-96 aspect-[3/2] mx-auto mb-2 overflow-hidden">
            <Image
              src="/images/reevolution/logo.png"
              alt="Re Evolution Art Logo"
              fill
              className="object-contain object-center scale-150"
            />
          </div>
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            CULTURAL PLATFORM
          </p>
          <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl md:text-5xl mb-6">
            Re Evolution Art
          </h2>
          <div className="divider"></div>
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg max-w-3xl mx-auto opacity-80">
            A visionary cultural platform based in Switzerland and rooted in Bolivia. Through exhibitions,
            immersive gatherings, TRIBAL events and collaborative projects, we bring together artists,
            ritualists, musicians and independent creators engaged in inner work and cultural dialogue.
            We bridge ancestral memory with contemporary expression.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-6">
          {events.map((event, index) => (
            <div key={index} className="event-card group overflow-hidden">
              <div className="relative aspect-video rounded-lg overflow-hidden mb-4">
                <Image
                  src={event.image}
                  alt={event.title}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                  style={event.objectPosition ? { objectPosition: event.objectPosition } : undefined}
                />
              </div>
              <h3 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-xl mb-3 text-[var(--accent-gold)]">
                {event.title}
              </h3>
              <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-sm opacity-70 leading-relaxed">
                {event.description}
              </p>
            </div>
          ))}
        </div>

        {/* Social Links */}
        <div className="flex justify-center gap-6 mt-16">
          <a
            href="https://www.instagram.com/reevolutionart"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-outline btn-outline-light"
            style={{ fontFamily: "'Narrenschiff', sans-serif" }}
          >
            Instagram
          </a>
          <a
            href="https://www.facebook.com/groups/383432167715274/"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-outline btn-outline-light"
            style={{ fontFamily: "'Narrenschiff', sans-serif" }}
          >
            Facebook Community
          </a>
        </div>
      </div>
    </section>
  );
}

// Testimonials Section
function TestimonialsSection() {
  const testimonials = [
    {
      quote: "The crystal healing session created an immediate connection and brought my soul forth. I deeply appreciate the support through the process.",
      author: "Dieter Katterbach",
    },
    {
      quote: "The sweat lodge ceremony was powerfully moving, highlighting the integration of healing, compassion and authentic expression.",
      author: "Kermit Goodman",
    },
    {
      quote: "The experience was powerfully transformative — it changed my understanding of ceremony itself.",
      author: "Verana Bailowitz",
    },
  ];

  return (
    <section className="section bg-white">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            TESTIMONIALS
          </p>
          <h2 className="text-4xl md:text-5xl font-light mb-6">
            Words of Gratitude
          </h2>
          <div className="divider"></div>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <div key={index} className="testimonial-card">
              <span className="quote-mark">"</span>
              <p className="testimonial mb-6">
                {testimonial.quote}
              </p>
              <p className="font-sans-alt text-xs tracking-widest text-[var(--accent-gold)]">
                — {testimonial.author}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// About Section
function AboutSection() {
  return (
    <section id="about" className="section">
      <div className="max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div className="text-center order-2 md:order-1">
            <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              THE ARTIST
            </p>
            <h2 className="text-4xl md:text-5xl font-light mb-6">
              About Ximena
            </h2>
            <div className="divider"></div>
            <p className="text-lg leading-relaxed mb-6 opacity-80">
              Years dedicated to work in Bolivia, Peru and Switzerland shaped this path through
              emotional integration, somatic healing and ceremonial support.
            </p>
            <p className="text-lg leading-relaxed mb-12 opacity-80">
              A beautiful, talented artist rooted in ancestral culture and land connection —
              healer, visionary artist, mother and friend — providing deep support through inner work.
            </p>
            <div className="pt-2">
              <Link href="#contact" className="btn-outline">
                Connect
              </Link>
            </div>
          </div>

          {/* Portrait */}
          <div className="relative aspect-[3/4] rounded-2xl overflow-hidden shadow-xl order-1 md:order-2">
            <Image
              src="/images/about/portrait-1.jpg"
              alt="Ximena Xaguar"
              fill
              className="object-cover object-[30%_center]"
            />
          </div>
        </div>

        {/* Additional Photos */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12">
          <div className="relative aspect-square rounded-lg overflow-hidden">
            <Image
              src="/images/about/portrait-2.jpg"
              alt="Ximena Xaguar"
              fill
              className="object-cover"
            />
          </div>
          <div className="relative aspect-square rounded-lg overflow-hidden">
            <Image
              src="/images/about/portrait-3.jpg"
              alt="Ximena Xaguar"
              fill
              className="object-cover"
            />
          </div>
          <div className="relative aspect-square rounded-lg overflow-hidden">
            <Image
              src="/images/about/portrait-4.jpg"
              alt="Ximena Xaguar"
              fill
              className="object-cover"
            />
          </div>
          <div className="relative aspect-square rounded-lg overflow-hidden">
            <Image
              src="/images/about/pachamama.jpg"
              alt="Pachamama Art"
              fill
              className="object-cover"
            />
          </div>
        </div>

        {/* Process & Studio Photos */}
        <div className="mt-16 text-center">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            THE PROCESS
          </p>
          <h3 className="text-3xl md:text-4xl font-light mb-6">
            Art in Motion
          </h3>
          <div className="divider"></div>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-8">
          {[
            { src: '/images/about/portrait-artist-1.webp', alt: 'Ximena in studio' },
            { src: '/images/about/portrait-artist-2.webp', alt: 'Ximena Quinteros - XHIVA ART' },
            { src: '/images/about/painting-process.webp', alt: 'Painting process' },
            { src: '/images/about/process-1.webp', alt: 'Creative process' },
            { src: '/images/about/process-2.webp', alt: 'Studio work' },
            { src: '/images/about/process-3.webp', alt: 'Art in progress' },
            { src: '/images/about/process-4.webp', alt: 'Working on art' },
            { src: '/images/about/process-5.webp', alt: 'Art creation' },
            { src: '/images/about/process-6.webp', alt: 'Artistic process' },
            { src: '/images/about/process-7.webp', alt: 'Art studio' },
          ].map((photo, index) => (
            <div key={index} className="relative aspect-square rounded-lg overflow-hidden group">
              <Image
                src={photo.src}
                alt={photo.alt}
                fill
                className="object-cover transition-transform duration-500 group-hover:scale-105"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Work With Me Section
function WorkWithMeSection() {
  return (
    <section className="section relative overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <Image
          src="/images/art/wayra-bg.webp"
          alt="Wayra"
          fill
          className="object-cover"
        />
        <div className="absolute inset-0 bg-black/70" />
      </div>

      <div className="max-w-3xl mx-auto relative z-10">
        <div className="text-center">
          <h2 className="text-4xl md:text-5xl font-light mb-6 text-[var(--text-light)]">
            Work With Me
          </h2>
          <div className="divider"></div>
          <p className="text-lg leading-relaxed mb-16 opacity-80 max-w-2xl mx-auto text-[var(--text-light)]">
            This work is for those ready to meet themselves honestly with courage,
            sensitivity and presence.
          </p>
        </div>
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <a href="https://booking.xhiva.art" target="_blank" rel="noopener noreferrer" className="btn-outline btn-outline-light">
            Book a Session
          </a>
          <Link href="#contact" className="btn-filled" style={{ background: 'var(--accent-gold)', borderColor: 'var(--accent-gold)' }}>
            Contact Me
          </Link>
        </div>
      </div>
    </section>
  );
}

// Contact Section
function ContactSection() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMessage, setErrorMessage] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!name.trim() || !email.trim() || !message.trim()) {
      setStatus('error');
      setErrorMessage('Please fill in all fields.');
      return;
    }

    setStatus('loading');
    setErrorMessage('');

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.trim(), email: email.trim(), message: message.trim() }),
      });

      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error || 'Something went wrong');
      }

      setStatus('success');
      setName('');
      setEmail('');
      setMessage('');
    } catch (err) {
      setStatus('error');
      setErrorMessage(err instanceof Error ? err.message : 'Failed to send message. Please try again.');
    }
  };

  return (
    <section id="contact" className="section bg-white">
      <div className="max-w-4xl mx-auto">
        <div className="text-center">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            GET IN TOUCH
          </p>
          <h2 className="text-4xl md:text-5xl font-light mb-6">
            Begin Your Journey
          </h2>
          <div className="divider"></div>
          <p className="text-lg leading-relaxed mb-12 opacity-80 max-w-2xl mx-auto">
            For inquiries about sessions, art commissions, or event collaborations,
            please reach out through the form below or connect on social media.
          </p>
        </div>

        {status === 'success' ? (
          <div className="max-w-lg mx-auto text-center py-12">
            <div className="text-5xl mb-6 text-[var(--accent-gold)]">&#10003;</div>
            <h3 className="text-2xl font-light mb-4">Message Sent</h3>
            <p className="text-lg opacity-80 mb-8">
              Thank you for reaching out. I will get back to you soon.
            </p>
            <button
              onClick={() => setStatus('idle')}
              className="btn-outline"
            >
              Send Another Message
            </button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="max-w-lg mx-auto text-left">
            <div className="mb-6">
              <label className="block font-sans-alt text-xs tracking-widest mb-2" htmlFor="name">
                NAME
              </label>
              <input
                type="text"
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-[var(--accent-gold)] transition-colors"
                placeholder="Your name"
                disabled={status === 'loading'}
              />
            </div>
            <div className="mb-6">
              <label className="block font-sans-alt text-xs tracking-widest mb-2" htmlFor="email">
                EMAIL
              </label>
              <input
                type="email"
                id="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-[var(--accent-gold)] transition-colors"
                placeholder="your@email.com"
                disabled={status === 'loading'}
              />
            </div>
            <div className="mb-6">
              <label className="block font-sans-alt text-xs tracking-widest mb-2" htmlFor="message">
                MESSAGE
              </label>
              <textarea
                id="message"
                rows={5}
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-[var(--accent-gold)] transition-colors resize-none"
                placeholder="How can I support your journey?"
                disabled={status === 'loading'}
              />
            </div>

            {status === 'error' && errorMessage && (
              <p className="text-red-600 text-sm mb-4 font-sans-alt">{errorMessage}</p>
            )}

            <button
              type="submit"
              className="btn-filled w-full mt-4"
              disabled={status === 'loading'}
              style={status === 'loading' ? { opacity: 0.7, cursor: 'not-allowed' } : undefined}
            >
              {status === 'loading' ? 'Sending...' : 'Send Message'}
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

// Social Connect Section
function SocialSection() {
  const instagramPosts = [
    { image: '/images/art/soul-agreement.webp', alt: 'Soul Agreement' },
    { image: '/images/art/goddess.webp?v=2', alt: 'Goddess' },
    { image: '/images/art/twin-flames.webp', alt: 'Twin Flames' },
    { image: '/images/art/featured.jpg?v=2', alt: 'Featured Art' },
    { image: '/images/about/portrait-1.jpg', alt: 'Portrait' },
    { image: '/images/reevolution/dj-xhiva.jpg', alt: 'DJ XHIVA' },
  ];

  return (
    <section className="section bg-[var(--bg-cream)]">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            FOLLOW THE JOURNEY
          </p>
          <h2 className="text-4xl md:text-5xl font-light mb-6">
            Connect on Socials
          </h2>
          <div className="divider"></div>
        </div>

        {/* Image Grid */}
        <a
          href="https://www.instagram.com/xhiva_art"
          target="_blank"
          rel="noopener noreferrer"
          className="grid grid-cols-3 md:grid-cols-6 gap-2 mb-10 group"
        >
          {instagramPosts.map((post, index) => (
            <div key={index} className="relative aspect-square overflow-hidden rounded-lg">
              <Image
                src={post.image}
                alt={post.alt}
                fill
                className="object-cover transition-all duration-500 group-hover:brightness-90"
                style={post.image.includes('portrait-1') ? { objectPosition: '30% center' } : post.image.includes('dj-xhiva') ? { objectPosition: 'center top' } : undefined}
              />
            </div>
          ))}
        </a>

        {/* Social Buttons */}
        <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
          <a
            href="https://www.instagram.com/xhiva_art"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-filled"
          >
            Follow @xhiva_art on Instagram
          </a>
          <a
            href="https://www.facebook.com/XimenaXhivart"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-outline"
          >
            Follow on Facebook
          </a>
        </div>
      </div>
    </section>
  );
}

// Footer
function Footer() {
  return (
    <footer className="dark-section py-16 px-6">
      <div className="max-w-6xl mx-auto">
        <div className="grid md:grid-cols-4 gap-12 mb-12">
          {/* Brand */}
          <div className="md:col-span-2">
            <h3 className="text-2xl font-light tracking-widest mb-4">XHIVA ART</h3>
            <p className="text-sm opacity-70 leading-relaxed mb-6">
              Visionary Art · Ritual Healing · Cultural and Artistic Experiences
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-sans-alt text-xs tracking-widest mb-4">EXPLORE</h4>
            <div className="flex flex-col gap-2">
              <Link href="#art" className="footer-link">Art</Link>
              <Link href="#gallery" className="footer-link">Gallery</Link>
              <Link href="#about" className="footer-link">About</Link>
              <Link href="#services" className="footer-link">Services</Link>
              <Link href="#reevolution" className="footer-link">Re Evolution Art</Link>
            </div>
          </div>

          {/* Connect */}
          <div>
            <h4 className="font-sans-alt text-xs tracking-widest mb-4">CONNECT</h4>
            <div className="flex flex-col gap-2">
              <Link href="#contact" className="footer-link">Contact</Link>
              <a href="https://instagram.com/ximena_xaguar" target="_blank" rel="noopener noreferrer" className="footer-link">
                @ximena_xaguar
              </a>
              <a href="https://www.facebook.com/XimenaXhivart" target="_blank" rel="noopener noreferrer" className="footer-link">
                Facebook
              </a>
            </div>
          </div>
        </div>

        {/* Copyright */}
        <div className="border-t border-white/10 pt-8 text-center">
          <p className="font-sans-alt text-xs tracking-widest opacity-50">
            © {new Date().getFullYear()} XHIVA ART. ALL RIGHTS RESERVED.
          </p>
        </div>
      </div>
    </footer>
  );
}

// Main Page Component
export default function Home() {
  return (
    <>
      <Navigation />
      <main>
        <HeroSection />
        <RitualArtSection />
        <GallerySection />
        <ServicesSection />
        <ReEvolutionSection />
        <TestimonialsSection />
        <AboutSection />
        <WorkWithMeSection />
        <ContactSection />
        <SocialSection />
      </main>
      <Footer />
    </>
  );
}