import Link from 'next/link';
import Image from 'next/image';
import { services as defaultServices } from '@/lib/data/services';
import { testimonials as defaultTestimonials } from '@/lib/data/testimonials';
import { readData } from '@/lib/cms';
import type { Service } from '@/lib/data/services';
import type { Testimonial } from '@/lib/data/testimonials';

export const dynamic = 'force-dynamic';

// 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">
          Working at the intersection of art, ritual and embodied presence, creating individual and
          collective 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="/re-evolution-art" 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>
  );
}

// Ritual Art Alchemy Preview
function RitualArtSection() {
  return (
    <section className="section bg-white">
      <div className="max-w-6xl mx-auto">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <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-6 opacity-80">
              Through symbolic language and universal cosmovision, I translate inner processes
              into living images. These artworks are not objects. They are portals.
            </p>
            <p className="text-lg leading-relaxed mb-12 opacity-80">
              Allies for emotional integration, transformation, spiritual insight and energetic coherence.
            </p>
            <div className="pt-2">
              <Link href="/art" className="btn-outline">
                Enter the Gallery
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Services Preview (3-column grid, first 3 services)
function ServicesPreview({ services }: { services: Service[] }) {
  const previewServices = services.filter(s => !s.highlighted).slice(0, 3);

  return (
    <section 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>
          <div className="text-lg max-w-3xl mx-auto opacity-80 space-y-4">
            <p>
              This work is rooted in decades of embodied practice and long term commitment.
            </p>
            <p>
              I integrate healing, artistic expression, ritual, body and consciousness into grounded
              processes of transformation.
            </p>
            <p>
              Since 2009, I have guided sweatlodge / temazcal ceremonies — spaces of purification,
              prayer and symbolic rebirth. Years of dedicated work in Bolivia, Peru and Switzerland
              shaped this path through emotional integration, somatic healing and ceremonial support.
            </p>
            <p>
              Today, my focus is integration and embodiment — supporting people to anchor insight,
              develop inner coherence and regulate their nervous system, within a process of deep
              transformation for those who are ready to engage consciously in their healing and evolution.
            </p>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {previewServices.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-20">
          <Link href="/services" className="btn-outline">
            View All Services
          </Link>
        </div>
      </div>
    </section>
  );
}

// Re Evolution Art Preview
function ReEvolutionPreview() {
  return (
    <section className="section dark-section">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <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>
          <div style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg max-w-3xl mx-auto opacity-80 space-y-4">
            <p>
              Re Evolution Art is a visionary cultural platform based in Switzerland and rooted in Bolivia.
            </p>
            <p>
              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>
            <p>
              We bridge ancestral memory with contemporary expression — establishing a platform for visionary artists,
              reviving art as a living practice and a tool for individual and social transformation.
            </p>
          </div>
        </div>

        <div className="flex justify-center gap-4 mt-8">
          <Link href="/re-evolution-art" className="btn-outline btn-outline-light" style={{ fontFamily: "'Narrenschiff', sans-serif" }}>
            Discover Re Evolution Art
          </Link>
        </div>
      </div>
    </section>
  );
}

// Testimonials (showing 3 on homepage)
function TestimonialsSection({ testimonials }: { testimonials: Testimonial[] }) {
  const homeTestimonials = testimonials.slice(0, 3);

  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">
            What People Say
          </h2>
          <div className="divider"></div>
          <p className="text-lg opacity-80 max-w-2xl mx-auto">
            For many years, I worked through referrals and word of mouth. Here are some voices from people who have walked this path.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {homeTestimonials.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)]">
                — {testimonial.author}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Work With Me
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)]">
            Whether you feel called by the art, rituals or one-to-one sessions, 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="/services" 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>
  );
}

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

// Newsletter Section
function NewsletterSection() {
  return (
    <section className="section dark-section">
      <div className="max-w-3xl mx-auto text-center">
        <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
          STAY CONNECTED
        </p>
        <h2 className="text-4xl md:text-5xl font-light mb-6">
          Be Part of the RE EVOLUTION
        </h2>
        <div className="divider"></div>
        <p className="text-lg leading-relaxed mb-10 opacity-80 max-w-2xl mx-auto">
          Receive updates about exhibitions, events, workshops, ceremonies and more.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <Link href="/contact" className="btn-outline btn-outline-light">
            Get in Touch
          </Link>
          <a
            href="https://www.instagram.com/xhiva_art"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-outline btn-outline-light"
          >
            Follow on Instagram
          </a>
        </div>
      </div>
    </section>
  );
}

export default function Home() {
  const services = readData<Service>('services', defaultServices);
  const testimonials = readData<Testimonial>('testimonials', defaultTestimonials);

  return (
    <>
      <HeroSection />
      <RitualArtSection />
      <ServicesPreview services={services} />
      <ReEvolutionPreview />
      <TestimonialsSection testimonials={testimonials} />
      <WorkWithMeSection />
      <SocialSection />
      <NewsletterSection />
    </>
  );
}
