'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
          </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-14 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"
              alt="Visionary Art by Ximena Xaguar"
              fill
              className="object-cover"
            />
          </div>

          <div className="text-center md:text-left">
            <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 md:ml-0"></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-10 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="md:text-left">
              <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', 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' },
  ];

  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',
    },
  ];

  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-3 gap-8">
          {services.map((service, index) => (
            <div key={index} className="group">
              <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-16">
          <Link href="#contact" className="btn-outline">
            Book a Session
          </Link>
        </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',
    },
  ];

  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-32 h-32 mx-auto mb-6">
            <Image
              src="/images/reevolution/logo.png"
              alt="Re Evolution Art Logo"
              fill
              className="object-contain"
            />
          </div>
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            CULTURAL PLATFORM
          </p>
          <h2 className="text-4xl md:text-5xl font-light mb-6">
            Re Evolution Art
          </h2>
          <div className="divider"></div>
          <p 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"
                />
              </div>
              <h3 className="text-xl font-light mb-3 text-[var(--accent-gold)]">
                {event.title}
              </h3>
              <p className="text-sm opacity-70 leading-relaxed">
                {event.description}
              </p>
            </div>
          ))}
        </div>

        <div className="flex justify-center mt-16">
          <Link href="#" className="btn-outline btn-outline-light">
            Explore Events
          </Link>
        </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 md:text-left 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 md:ml-0"></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-10 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="md:text-left">
              <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"
            />
          </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>
      </div>
    </section>
  );
}

// Work With Me Section
function WorkWithMeSection() {
  return (
    <section className="section darker-section">
      <div className="max-w-3xl mx-auto">
        <div className="text-center">
          <h2 className="text-4xl md:text-5xl font-light mb-6">
            Work With Me
          </h2>
          <div className="divider"></div>
          <p className="text-lg leading-relaxed mb-12 opacity-80 max-w-2xl mx-auto">
            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">
          <Link href="#contact" className="btn-outline btn-outline-light">
            Book a Session
          </Link>
          <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() {
  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>

        {/* Contact Form */}
        <form 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"
              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"
            />
          </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"
              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"
            />
          </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}
              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?"
            />
          </div>
          <button type="submit" className="btn-filled w-full mt-2">
            Send Message
          </button>
        </form>
      </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</h3>
            <p className="text-sm opacity-70 leading-relaxed mb-6">
              Visionary Art · Ritual Healing · Cultural and Artistic Experiences
            </p>
            {/* Social Links */}
            <div className="flex gap-4">
              <a href="https://instagram.com/xhiva_art" target="_blank" rel="noopener noreferrer" className="footer-link">
                Instagram
              </a>
              <a href="https://instagram.com/reevolutionart" target="_blank" rel="noopener noreferrer" className="footer-link">
                @reevolutionart
              </a>
            </div>
          </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="#" className="footer-link">SoundCloud</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. 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 />
      </main>
      <Footer />
    </>
  );
}
