'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import type { Artwork, ArtEvent, Service } from '@/lib/types';

// 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="#services" className="nav-link">Services</Link>
            <Link href="#reevolution" className="nav-link">Re Evolution Art</Link>
            <Link href="/about" className="nav-link">About</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="#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="/about" className="nav-link text-xl" onClick={() => setMobileMenuOpen(false)}>About</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">
      <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">
          Visionary art, immersive experiences and ceremonial practice.
          Creating at the intersection of art, ritual and embodied presence.
        </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 the Gallery
          </Link>
          <Link href="#reevolution" className="btn-filled">
            Discover Re Evolution Art
          </Link>
        </div>
      </div>

      <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>
  );
}

// Art Gallery Section — enhanced with featured, metadata, sold carousel
function GallerySection({ artworks }: { artworks: Artwork[] }) {
  const [selectedArtwork, setSelectedArtwork] = useState<Artwork | null>(null);

  const featured = artworks.filter(a => a.featured && a.category !== 'sold').sort((a, b) => a.sortOrder - b.sortOrder);
  const available = artworks.filter(a => !a.featured && a.category === 'available').sort((a, b) => a.sortOrder - b.sortOrder);
  const soldOrPrivate = artworks.filter(a => a.category === 'sold' || a.category === 'private').sort((a, b) => a.sortOrder - b.sortOrder);

  return (
    <section id="art" className="section bg-white">
      <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>

        {/* Featured Artworks — large format */}
        {featured.length > 0 && (
          <div className="grid md:grid-cols-3 gap-6 mb-12">
            {featured.map((artwork) => (
              <div
                key={artwork.id}
                className="relative aspect-[3/4] rounded-xl overflow-hidden group cursor-pointer shadow-lg"
                onClick={() => setSelectedArtwork(artwork)}
              >
                <Image
                  src={artwork.image}
                  alt={artwork.title}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                <div className="absolute bottom-0 left-0 right-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                  <h3 className="text-white text-lg font-light">{artwork.title}</h3>
                  {artwork.medium && <p className="text-white/70 text-xs mt-1">{artwork.medium}</p>}
                  {artwork.price && <p className="text-[var(--accent-gold)] text-sm mt-1">{artwork.price}</p>}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* All Artworks Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {available.map((artwork) => (
            <div
              key={artwork.id}
              className="relative aspect-square rounded-lg overflow-hidden group cursor-pointer"
              onClick={() => setSelectedArtwork(artwork)}
            >
              <Image
                src={artwork.image}
                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>

        {/* Sold & Private Collections */}
        {soldOrPrivate.length > 0 && (
          <div className="mt-16">
            <h3 className="text-center text-2xl font-light mb-2">Sold &amp; Private Collections</h3>
            <div className="divider"></div>
            <div className="flex gap-4 overflow-x-auto pb-4 mt-8 snap-x snap-mandatory">
              {soldOrPrivate.map((artwork) => (
                <div
                  key={artwork.id}
                  className="relative w-48 h-48 rounded-lg overflow-hidden group cursor-pointer shrink-0 snap-start opacity-80 hover:opacity-100 transition-opacity"
                  onClick={() => setSelectedArtwork(artwork)}
                >
                  <Image
                    src={artwork.image}
                    alt={artwork.title}
                    fill
                    className="object-cover"
                  />
                  <div className="absolute bottom-0 left-0 right-0 bg-black/60 p-2">
                    <p className="text-white text-xs font-sans-alt tracking-wider">{artwork.title}</p>
                    <p className="text-white/50 text-[10px] uppercase">{artwork.category}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Lightbox Modal */}
      {selectedArtwork && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 md:p-8"
          onClick={() => setSelectedArtwork(null)}
        >
          <button
            className="absolute top-4 right-4 md:top-6 md:right-6 z-50 text-white/70 hover:text-white transition-colors p-2"
            onClick={() => setSelectedArtwork(null)}
            aria-label="Close"
          >
            <svg width="32" height="32" 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>
          <div className="relative w-full h-full max-w-6xl max-h-[85vh] flex flex-col items-center justify-center">
            <div
              className="relative w-full flex-1 min-h-0"
              onClick={(e) => e.stopPropagation()}
            >
              <Image
                src={selectedArtwork.image}
                alt={selectedArtwork.title}
                fill
                className="object-contain"
                sizes="(max-width: 768px) 100vw, 90vw"
              />
            </div>
            <div
              className="mt-4 text-center"
              onClick={(e) => e.stopPropagation()}
            >
              <p className="text-white/90 font-light text-lg">{selectedArtwork.title}</p>
              <div className="flex items-center justify-center gap-4 mt-2 text-white/50 font-sans-alt text-xs tracking-wider">
                {selectedArtwork.medium && <span>{selectedArtwork.medium}</span>}
                {selectedArtwork.dimensions && <span>{selectedArtwork.dimensions}</span>}
                {selectedArtwork.year && <span>{selectedArtwork.year}</span>}
              </div>
              {selectedArtwork.price && selectedArtwork.category === 'available' && (
                <p className="text-[var(--accent-gold)] text-sm mt-2">{selectedArtwork.price}</p>
              )}
              {selectedArtwork.category === 'sold' && (
                <p className="text-red-400/70 text-xs mt-2 uppercase tracking-widest">Sold</p>
              )}
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// Services Section — restructured with bullet points
function ServicesSection({ services }: { services: Service[] }) {
  const sorted = [...services].sort((a, b) => a.sortOrder - b.sortOrder);

  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">
            Art, Ceremony &amp; Experience
          </h2>
          <div className="divider"></div>
          <p className="text-lg max-w-2xl mx-auto opacity-80">
            Personal offerings rooted in decades of embodied practice — art, ceremony,
            group immersion and creative exploration.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {sorted.map((service) => (
            <div key={service.id} 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-4">
                  {service.duration}
                </p>
                <p className="text-sm leading-relaxed opacity-80 mb-4">
                  {service.description}
                </p>

                {/* How it works */}
                {service.howItWorks.length > 0 && service.howItWorks[0] && (
                  <div className="text-left mt-4 mb-3">
                    <p className="font-sans-alt text-[10px] tracking-[0.2em] text-[var(--text-muted)] mb-2 uppercase">How it works</p>
                    <ul className="space-y-1">
                      {service.howItWorks.filter(Boolean).map((item, i) => (
                        <li key={i} className="text-sm opacity-80 flex items-start gap-2">
                          <span className="text-[var(--accent-gold)] mt-0.5">&#8226;</span>
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {/* Who it is for */}
                {service.whoItIsFor.length > 0 && service.whoItIsFor[0] && (
                  <div className="text-left mb-4">
                    <p className="font-sans-alt text-[10px] tracking-[0.2em] text-[var(--text-muted)] mb-2 uppercase">Who it is for</p>
                    <ul className="space-y-1">
                      {service.whoItIsFor.filter(Boolean).map((item, i) => (
                        <li key={i} className="text-sm opacity-80 flex items-start gap-2">
                          <span className="text-[var(--accent-gold)] mt-0.5">&#8226;</span>
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {service.calendlyLink && (
                  <div className="mt-4">
                    <a href={service.calendlyLink} target="_blank" rel="noopener noreferrer" className="btn-outline text-xs">
                      Book Now
                    </a>
                  </div>
                )}
              </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 — clearly separated
function ReEvolutionSection({ events }: { events: ArtEvent[] }) {
  const reevolutionEvents = events
    .filter(e => e.section === 'reevolution')
    .sort((a, b) => a.sortOrder - b.sortOrder);

  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.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-6">
          {reevolutionEvents.map((event) => (
            <div key={event.id} 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-2 text-[var(--accent-gold)]">
                {event.title}
              </h3>
              {event.date && (
                <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs text-[var(--accent-gold)]/70 mb-2">
                  {event.date}
                </p>
              )}
              <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-sm opacity-70 leading-relaxed">
                {event.description}
              </p>
              {event.link && (
                <a href={event.link} target="_blank" rel="noopener noreferrer"
                  className="inline-block mt-3 text-xs text-[var(--accent-gold)] hover:text-white transition-colors"
                  style={{ fontFamily: "'Narrenschiff', sans-serif" }}>
                  Learn more &rarr;
                </a>
              )}
            </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 \u2014 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">&ldquo;</span>
              <p className="testimonial mb-6">
                {testimonial.quote}
              </p>
              <p className="font-sans-alt text-xs tracking-widest text-[var(--accent-gold)]">
                &mdash; {testimonial.author}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Work With Me Section
function WorkWithMeSection() {
  return (
    <section className="section relative overflow-hidden">
      <div className="absolute inset-0 z-0 bg-[#0f0f0f]">
        <Image
          src="/images/art/wayra-bg.webp"
          alt="Wayra"
          fill
          className="object-contain opacity-40"
        />
      </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">
            Get in Touch
          </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 help?"
                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>

        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-10 max-w-4xl mx-auto">
          {instagramPosts.map((post, index) => (
            <a
              key={index}
              href="https://www.instagram.com/xhiva_art"
              target="_blank"
              rel="noopener noreferrer"
              className="group bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden border border-gray-100"
            >
              <div className="flex items-center gap-2 px-3 py-2.5">
                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[#f09433] via-[#e6683c] to-[#bc1888] p-[2px]">
                  <div className="w-full h-full rounded-full bg-white p-[1px]">
                    <div className="relative w-full h-full rounded-full overflow-hidden">
                      <Image src="/images/about/portrait-1.jpg" alt="xhiva_art" fill className="object-cover object-[30%_center]" />
                    </div>
                  </div>
                </div>
                <span className="text-xs font-semibold text-[var(--text-dark)]">xhiva_art</span>
              </div>
              <div className="relative aspect-square">
                <Image
                  src={post.image}
                  alt={post.alt}
                  fill
                  className="object-cover"
                  style={post.image.includes('portrait-1') ? { objectPosition: '30% center' } : post.image.includes('dj-xhiva') ? { objectPosition: 'center top' } : undefined}
                />
              </div>
              <div className="px-3 py-2.5 flex items-center gap-4">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-[var(--text-dark)] group-hover:text-red-500 transition-colors">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                </svg>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-[var(--text-dark)]">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-[var(--text-dark)]">
                  <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                </svg>
              </div>
            </a>
          ))}
        </div>

        <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">
          <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 &middot; Ceremony &middot; Cultural Experiences
            </p>
          </div>

          <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="#services" className="footer-link">Services</Link>
              <Link href="#reevolution" className="footer-link">Re Evolution Art</Link>
              <Link href="/about" className="footer-link">About</Link>
            </div>
          </div>

          <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>

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

// Main Client Component
export default function HomeClient({
  artworks,
  events,
  services,
}: {
  artworks: Artwork[];
  events: ArtEvent[];
  services: Service[];
}) {
  return (
    <>
      <Navigation />
      <main>
        <HeroSection />
        <GallerySection artworks={artworks} />
        <ServicesSection services={services} />
        <ReEvolutionSection events={events} />
        <TestimonialsSection />
        <WorkWithMeSection />
        <ContactSection />
        <SocialSection />
      </main>
      <Footer />
    </>
  );
}
