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

export const metadata: Metadata = {
  title: 'Our Artists | Re Evolution Art',
  description: 'Meet the artists of Re Evolution Art — Erofex and XHIVA. Visionary creators bridging ancestral tradition with contemporary expression.',
};

export default function OurArtistsPage() {
  return (
    <>
      {/* Page Hero */}
      <section className="page-hero relative flex flex-col items-center justify-center text-center px-6 dark-section">
        <div className="absolute inset-0 z-0">
          <Image
            src="/images/reevolution/event-2.jpg"
            alt="Our Artists"
            fill
            className="object-cover opacity-30"
            priority
          />
        </div>
        <div className="relative z-10 max-w-4xl mx-auto">
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            RE EVOLUTION ART
          </p>
          <h1 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-5xl md:text-6xl mb-6">
            Our Artists
          </h1>
          <div className="divider"></div>
        </div>
      </section>

      {/* Erofex */}
      <section className="section dark-section">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="relative aspect-square rounded-2xl overflow-hidden shadow-xl">
              <Image
                src="/images/reevolution/event-4.jpg"
                alt="Erofex"
                fill
                className="object-cover"
              />
            </div>
            <div className="text-center">
              <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
                ARTIST / ENGINEER
              </p>
              <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl mb-6">
                Erofex
              </h2>
              <div className="divider"></div>
              <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed mb-6 opacity-80">
                Bolivian artist and sound engineer, Erofex has been a pioneer in the techno and psytrance
                scene since 1997. As co-founder of Neurotrance and Audioreaktor, he brings decades of
                experience in electronic music production, live performance and sound design.
              </p>
              <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed mb-8 opacity-80">
                His work bridges the technical precision of sound engineering with the raw energy of
                underground electronic culture, creating immersive sonic landscapes that drive the
                Re Evolution Art experience.
              </p>
              <a
                href="https://soundcloud.com/erofex"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-outline btn-outline-light"
                style={{ fontFamily: "'Narrenschiff', sans-serif" }}
              >
                SoundCloud
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* XHIVA */}
      <section className="section darker-section">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="text-center order-2 md:order-1">
              <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
                DJ / VISUAL ARTIST
              </p>
              <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl mb-6">
                XHIVA
              </h2>
              <div className="divider"></div>
              <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed mb-6 opacity-80">
                DJing since 2001, XHIVA weaves shamanic, indie, afro, organic, melodic and house
                music into immersive sonic journeys. Her sets are ceremonial in nature — designed
                to move the body while opening the heart and expanding consciousness.
              </p>
              <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed mb-8 opacity-80">
                As a multidisciplinary visionary artist, XHIVA brings the same devotion to her DJ
                practice as to her paintings and ceremonies — each set is a ritual, each transition
                an invitation to go deeper.
              </p>
              <a
                href="https://soundcloud.com/xhiva"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-outline btn-outline-light"
                style={{ fontFamily: "'Narrenschiff', sans-serif" }}
              >
                SoundCloud
              </a>
            </div>
            <div className="relative aspect-square rounded-2xl overflow-hidden shadow-xl order-1 md:order-2">
              <Image
                src="/images/reevolution/dj-xhiva.jpg"
                alt="DJ XHIVA"
                fill
                className="object-cover object-top"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Back to Re Evolution Art */}
      <section className="section dark-section text-center">
        <Link href="/re-evolution-art" className="btn-outline btn-outline-light" style={{ fontFamily: "'Narrenschiff', sans-serif" }}>
          Back to Re Evolution Art
        </Link>
      </section>
    </>
  );
}
