import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';

export const metadata: Metadata = {
  title: 'About XHIVA | Visionary Artist \u00B7 Ritual Guide \u00B7 Cultural Creator',
  description: 'Multidisciplinary visionary artist working at the intersection of art, ritual and embodied presence.',
};

export default function AboutPage() {
  return (
    <>
      {/* Hero */}
      <section className="page-hero relative flex flex-col items-center justify-center text-center px-6">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/about/portrait-1.jpg"
            alt="Ximena Xaguar"
            fill
            className="object-cover object-[30%_center]"
            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="relative z-10 max-w-4xl mx-auto">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            THE ARTIST
          </p>
          <h1 className="text-5xl md:text-6xl font-light tracking-wider mb-4">
            About XHIVA
          </h1>
          <p className="font-sans-alt text-sm tracking-widest text-[var(--text-muted)] mb-6">
            Visionary Artist &middot; Ritual Guide &middot; Cultural Creator
          </p>
          <div className="divider"></div>
        </div>
      </section>

      {/* Intro */}
      <section className="section bg-white">
        <div className="max-w-4xl 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/about/portrait-1.jpg"
                alt="Ximena Xaguar"
                fill
                className="object-cover object-[30%_center]"
              />
            </div>
            <div className="space-y-5 text-lg leading-relaxed opacity-80">
              <p>
                My path began in childhood, shaped by an unusual sensitivity to energy, dreams and the invisible layers of reality.
              </p>
              <p>
                My life journey converges art, ritual and healing — walking between ancestral traditions from my homeland, the fusion of Andean-Amazonic wisdom and contemporary creation.
              </p>
              <p>
                Today, I weave art, rituals and embodied presence into transformative immersive experiences.
              </p>
              <p>
                Every painting is a portal for me, a space for clarity and a container of subtle information.
              </p>
              <p>
                I offer sessions, emotional release, nervous system regulation and reconnection with the inner medicine.
              </p>
              <p>
                I perceived the world symbolically — through intuition, emotion and subtle visions.
              </p>
              <p>
                Art became my first ritual. Spirit, is my guide&hellip;
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Initiation */}
      <section className="section">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-10">
            <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              THE BEGINNING
            </p>
            <h2 className="text-3xl md:text-4xl font-light mb-6">
              Initiation
            </h2>
            <div className="divider"></div>
          </div>
          <div className="space-y-6 text-lg leading-relaxed opacity-80">
            <p>
              At seventeen, two initiatory currents opened the path that still guides my life: deep diving into rituals and traditions, and the beginning of my formal Fine Arts studies.
            </p>
            <p>
              Through this convergence, art and healing — two movements of the same river, revealing visions and alchemizing the inner processes.
            </p>
            <p>
              This was the moment I committed to a lifelong journey uniting creativity, ritual, vision and deep inner work.
            </p>
          </div>
        </div>
      </section>

      {/* Artistic Lineage */}
      <section className="section bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
                ARTISTIC LINEAGE
              </p>
              <h2 className="text-3xl md:text-4xl font-light mb-6">
                Ernst Fuchs & Visionary Roots
              </h2>
              <div className="divider" style={{ margin: '1.5rem 0' }}></div>
              <div className="space-y-5 text-lg leading-relaxed opacity-80">
                <p>My artistic formation began in La Paz, Bolivia, in 1996.</p>
                <p>
                  In 1998, I continued my studies at the &Eacute;cole Sup&eacute;rieure d&rsquo;Arts
                  Plastiques in Monaco. After that I met Ernst Fuchs, founder of the Vienna School
                  of Fantastic Realism.
                </p>
                <p>
                  I became his apprentice, 1998&ndash;2001, working in his atelier in Monaco and at
                  the Apocalypse Chapel in Klagenfurt.
                </p>
                <p>His mentorship was a turning point:</p>
                <ul className="list-disc pl-6 space-y-2">
                  <li>He validated the visionary dimension I carried since childhood</li>
                  <li>He anchored discipline, lineage, and symbolic precision</li>
                  <li>He helped shape the voice that manifests through my paintings today</li>
                </ul>
              </div>
            </div>
            <div className="relative aspect-[3/4] rounded-2xl overflow-hidden shadow-xl">
              <Image
                src="/images/about/portrait-artist-1.webp"
                alt="Ximena painting"
                fill
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Ceremonial Practice */}
      <section className="section">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-10">
            <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              THE RITUAL PATH
            </p>
            <h2 className="text-3xl md:text-4xl font-light mb-6">
              Ceremonial Practice
            </h2>
            <div className="divider"></div>
          </div>
          <div className="space-y-6 text-lg leading-relaxed opacity-80">
            <p>
              Parallel to my artistic development, I walked a ceremonial path. It was a path of learning how to listen — to enter into deep relationship with the elements, with silence, and with the unseen dimensions of life.
            </p>
            <p>
              Before ever guiding a ceremonial space, I spent years tending the fire — developing an embodied understanding of each element, and learning patience, humility and the weight of holding ritual with care.
            </p>
            <p>
              After years of preparation, I was initiated to guide temazcal ceremonies in 2009. Since then, I have held ceremony for hundreds of people in Peru, Bolivia and here in Switzerland since my arrival in 2016.
            </p>
            <p>
              Through fire, heat, breath, song and silence, I learned the art of holding space for transformation with clarity and compassion.
            </p>
            <p>
              Through carefully structured ceremonial frameworks, I facilitate spaces that prioritize psychological safety, cultural respect and post-experience integration. The emphasis is placed on accountability, grounding and responsible embodiment of insight.
            </p>
          </div>
        </div>
      </section>

      {/* Re Evolution Art */}
      <section className="section bg-white">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-10">
            <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              CULTURAL PLATFORM
            </p>
            <h2 className="text-3xl md:text-4xl font-light mb-6">
              Re Evolution Art
            </h2>
            <div className="divider"></div>
          </div>
          <div className="space-y-6 text-lg leading-relaxed opacity-80">
            <p>
              Re Evolution Art was born from my lived journey between visionary art and ceremonial practice.
            </p>
            <p>
              For over three decades, my work has explored art as a path of self-knowledge, discipline and responsibility. Parallel to formal artistic training, I walked a ceremonial path grounded in service — understanding that both art and ritual require structure, integrity and long-term commitment.
            </p>
            <p>
              Navigating different countries and systems as a mother and independent artist revealed the need for alternative cultural structures — spaces where creators working with depth, symbolism and spiritual dimension are not marginalized.
            </p>
            <p>
              Re Evolution Art emerged as that response: an intercultural platform dedicated to reclaiming art as a transformative force, building ethical bridges between traditions and legacies, fostering collaborative networks rooted in coherence and respect.
            </p>
          </div>
        </div>
      </section>

      {/* Art in Motion */}
      <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">
              THE PROCESS
            </p>
            <h2 className="text-3xl md:text-4xl font-light mb-6">
              Art in Motion
            </h2>
            <div className="divider"></div>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            {[
              { src: '/images/about/painting-process.webp', alt: 'Ximena painting', position: 'top' },
              { src: '/images/art/mural-bio-centro.webp', alt: 'Mural Bio Centro Guembe' },
              { src: '/images/about/portrait-2.jpg', alt: 'Ximena painting mural' },
              { src: '/images/about/portrait-3.jpg', alt: 'Ximena in studio', position: 'top' },
              { src: '/images/about/portrait-4.jpg', alt: 'Ximena at ceremony' },
              { src: '/images/about/pachamama.jpg', alt: 'Ritual with smoke' },
            ].map((photo, index) => (
              <div key={index} className="relative aspect-[4/3] rounded-lg overflow-hidden group">
                <Image
                  src={photo.src}
                  alt={photo.alt}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-105"
                  style={photo.position ? { objectPosition: photo.position } : undefined}
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Work With Me CTA */}
      <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 text-center">
          <h2 className="text-3xl md:text-4xl font-light mb-6 text-[var(--text-light)]">Work With Me</h2>
          <div className="divider"></div>
          <p className="text-lg leading-relaxed mb-10 opacity-80 text-[var(--text-light)] max-w-2xl mx-auto">
            Whether you feel called by the art, ceremonies or one-to-one sessions, this work is for those ready to meet themselves honestly — with courage, sensitivity and presence.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Link href="/art" className="btn-outline btn-outline-light">
              View Gallery
            </Link>
            <Link href="/services" className="btn-outline btn-outline-light">
              Sessions
            </Link>
            <Link href="/contact" className="btn-filled" style={{ background: 'var(--accent-gold)', borderColor: 'var(--accent-gold)' }}>
              Get in Touch
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}
