import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import { featuredArtworks as defaultFeatured, allArtworks as defaultAll } from '@/lib/data/artworks';
import { readData } from '@/lib/cms';
import type { Artwork } from '@/lib/data/artworks';
import LightboxGallery from '@/components/Lightbox';

export const metadata: Metadata = {
  title: 'Art | XHIVA — Visionary Artworks by Ximena Xaguar',
  description: 'Explore the visionary art of Ximena Xaguar — ritual paintings, sacred imagery and living portals born from ancestral memory, shadow work and transformation.',
};

export const dynamic = 'force-dynamic';

export default function ArtPage() {
  const featuredArtworks = readData<Artwork>('artworks-featured', defaultFeatured);
  const allArtworks = readData<Artwork>('artworks', defaultAll);

  return (
    <>
      {/* Page 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/art/featured.jpg?v=2"
            alt="Ritual Art Alchemy"
            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="relative z-10 max-w-4xl mx-auto">
          <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            VISUAL ALCHEMY
          </p>
          <h1 className="text-5xl md:text-6xl font-light tracking-wider mb-6">
            Ritual Art Alchemy
          </h1>
          <div className="divider"></div>
          <p className="text-lg md:text-xl max-w-2xl mx-auto leading-relaxed opacity-80">
            Each artwork emerges through an alchemical process — where dreams, symbolic structures
            and cosmological frameworks are distilled into visual form.
          </p>
        </div>
      </section>

      {/* Artist Statement */}
      <section className="section bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              ARTIST STATEMENT
            </p>
            <div className="divider"></div>
          </div>
          <div className="space-y-6 text-lg leading-relaxed opacity-80">
            <p>
              Guided by lineage, intuitive perception and technical discipline, the painting becomes a
              threshold of inquiry: a reflective surface where inner landscapes encounter archetypal
              forces. It is not designed to instruct, but to accompany — inviting psychological
              integration and contemplative depth.
            </p>
            <p>
              Over time, the work reveals itself in layers. Many collectors describe a sense of dialogue
              with the piece — as if the image continues to unfold, responding to their own inner evolution.
            </p>
            <p>
              My art unfolds as an alchemical process — tracing a journey of transformation.
            </p>
            <p>
              Each canvas becomes a threshold: a space where memory, intuition and lived experience
              converge. Rather than illustrating visions, my work seeks to manifest them — inviting the
              viewer to pause, to resonate and to reconnect with what moves beneath the visible surface of life.
            </p>
            <p>
              For me, painting is not merely technique. It is a process of listening and integration. Each
              work marks individual and collective cycles — moments of emotional release, shadow
              confrontation and resilience shaped into symbolic form. My practice reflects my lived
              journey of individuation as a medicine woman, mother and traveler — navigating cultural
              transitions, structural tensions and personal thresholds, transforming experience into vision.
            </p>
            <p>
              I work with oil, acrylic, watercolor and natural pigments and elements such as earth,
              crystals, sand of sacred sites and organic materials. The dialogue between material and
              symbol is central to my process. Structure and intuition coexist: technical discipline meets
              intuitive perception, and a ritual process, grounding visionary imagery within precision and form.
            </p>
            <p>
              My inspiration draws from Andean and Amazonian cosmovision, universal symbols, traditions
              and the process of inner and collective evolution. These influences are not aesthetic
              references, but relational frameworks — ways of understanding the interconnectedness of life.
            </p>
            <p>
              Trained in Fine Arts in Bolivia and Monaco, later mentored by Ernst Fuchs, pioneer of the
              Vienna School of Fantastic Realism, I carry a lineage that values both visionary imagination
              and technique.
            </p>
            <p>
              My work has been exhibited internationally, and through both artistic and curatorial practice,
              I remain committed to creating platforms where visionary art can be experienced as a space
              of reflection, social transformation, resilience and collective dialogue.
            </p>
            <p>
              Each painting becomes an encounter — not just an object, but a field of meaning where
              transformation and reminiscence unfolds.
            </p>
          </div>
        </div>
      </section>

      {/* Featured Available Artworks */}
      <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">
              AVAILABLE WORKS
            </p>
            <h2 className="text-4xl md:text-5xl font-light mb-6">
              Featured Artworks
            </h2>
            <div className="divider"></div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {featuredArtworks.map((artwork, index) => (
              <div key={index} className="group">
                <div className="relative aspect-[3/4] rounded-xl overflow-hidden shadow-lg mb-4">
                  <Image
                    src={artwork.src}
                    alt={artwork.title}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                </div>
                <div className="text-center">
                  <h3 className="text-xl font-light mb-1">{artwork.title}</h3>
                  {artwork.medium && (
                    <p className="font-sans-alt text-xs tracking-widest text-[var(--text-muted)] mb-2">
                      {artwork.medium}
                    </p>
                  )}
                  <p className="price-tag">{artwork.price}</p>
                  <Link href="/contact" className="inline-block mt-3 font-sans-alt text-xs tracking-widest text-[var(--accent-gold)] hover:text-[var(--text-dark)] transition-colors">
                    Inquire &rarr;
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Biography Brief */}
      <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/about/portrait-1.jpg"
                alt="Ximena Xaguar"
                fill
                className="object-cover object-[30%_center]"
              />
            </div>
            <div className="text-center">
              <p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
                THE ARTIST
              </p>
              <h2 className="text-4xl font-light mb-6">
                Ximena Xaguar
              </h2>
              <div className="divider"></div>
              <p className="text-lg leading-relaxed mb-6 opacity-80">
                Ximena, XHIVA is a Bolivian-born visionary artist, ritual guide and cultural curator
                based in Switzerland. Her work explores themes of transformation, resilience, memory
                and the invisible dimensions of human experience.
              </p>
              <p className="text-lg leading-relaxed mb-6 opacity-80">
                Rooted in painting, ritual practice and embodied processes, her artistic language weaves
                symbolism, intuitive perception and lived experience. Through exhibitions, workshops
                and curated collective projects, she creates spaces where art becomes a medium for
                reflection, exploration, inner movement and reconnection.
              </p>
              <p className="text-lg leading-relaxed mb-8 opacity-80">
                XHIVA works independently and in collaboration with artists, performers and cultural
                spaces, developing projects that bridge contemporary art, ritual and lived experience.
              </p>
              <Link href="/about" className="btn-outline">
                Full Biography
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Full Gallery */}
      <section 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">
              Previous &mdash; Sold Art & Private Collection
            </h2>
            <div className="divider"></div>
          </div>

          <LightboxGallery artworks={allArtworks} />
        </div>
      </section>
    </>
  );
}
