import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import { events as defaultEvents, joinRoles as defaultRoles } from '@/lib/data/events';
import { readData } from '@/lib/cms';
import type { ReEvolutionEvent } from '@/lib/data/events';

export const metadata: Metadata = {
  title: 'Re Evolution Art | Cultural Platform - Bridging Cultures Through Art',
  description: 'A visionary cultural platform based in Switzerland and rooted in Bolivia. Exhibitions, TRIBAL events, immersive gatherings and collaborative projects.',
};

export const dynamic = 'force-dynamic';

export default function ReEvolutionArtPage() {
  const events = readData<ReEvolutionEvent>('events', defaultEvents);
  const joinRoles = readData<{ title: string; description: string }>('join-roles', defaultRoles);

  return (
    <>
      {/* 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-1.jpg"
            alt="Re Evolution Art"
            fill
            className="object-cover opacity-30"
            priority
          />
        </div>
        <div className="relative z-10 max-w-4xl mx-auto">
          <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.3em] text-[var(--accent-gold)] mb-4">
            BRIDGING CULTURES THROUGH ART
          </p>
          <h1 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-5xl md:text-6xl mb-6">
            Re Evolution Art
          </h1>
          <div className="divider"></div>
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg md:text-xl max-w-2xl mx-auto leading-relaxed opacity-80">
            Cultural Hub for Visionaries & Intercultural Exchange
          </p>
        </div>
      </section>

      {/* Who We Are */}
      <section className="section dark-section">
        <div className="max-w-4xl mx-auto text-center">
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            WHO WE ARE
          </p>
          <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl font-light mb-6">
            A Visionary Cultural Platform
          </h2>
          <div className="divider"></div>
          <div style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed opacity-80 space-y-6">
            <p>
              Re Evolution Art is a cultural platform dedicated to restoring art as a living language — a force for reflection, dialogue, personal growth and collective transformation.
            </p>
            <p>
              We bring together immersive exhibitions, interactive workshops, gatherings such as our signature TRIBAL Nights, establishing Visionary Art Week and other intercultural encounters where art, music, ritual frameworks and ancestral knowledge converge — intentionally held environments designed to foster deeper presence, ethical exchange and meaningful connection.
            </p>
            <p>
              Our mission is to build bridges between cultures, generations and systems of knowledge through creative expression, embodied practice and collaborative networks. We cultivate spaces where personal development and collective evolution unfold together.
            </p>
          </div>
        </div>
      </section>

      {/* Our Core Vision */}
      <section className="section darker-section">
        <div className="max-w-4xl mx-auto text-center">
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            OUR CORE VISION
          </p>
          <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl font-light mb-6">
            Art as Transformation
          </h2>
          <div className="divider"></div>
          <div style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed opacity-80 space-y-6">
            <p>
              We believe that art, ritual and exchange are fundamental forces for personal and collective evolution.
            </p>
            <p>
              In a time marked by cultural fragmentation, spiritual superficiality and the commodification of creativity, Re Evolution Art proposes a return to depth: art as a bridge between cultures, traditions and generations — and as a tool for social transformation and collective evolution.
            </p>
            <p>
              We foster inclusive environments where creators contribute from the fullness of their experience, their passions and gifts in mutual respect and co-creation.
            </p>
          </div>
        </div>
      </section>

      {/* Our Roots */}
      <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-[4/3] rounded-2xl overflow-hidden shadow-xl">
              <Image
                src="/images/reevolution/event-3.jpg"
                alt="Re Evolution Art Event"
                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">
                OUR ROOTS
              </p>
              <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl font-light mb-6">
                Bolivia & Switzerland
              </h2>
              <div className="divider"></div>
              <div style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed opacity-80 space-y-6">
                <p>
                  Re Evolution Art carries deep respect for ancestral memory.
                </p>
                <p>
                  We believe that art is more than contemplation. It is a transformative force — a vehicle for self-knowledge, resilience, social cohesion and shared meaning.
                </p>
                <p>
                  Re Evolution Art fosters inclusive environments in which artists, facilitators, wisdom keepers and participants contribute their authentic gifts with integrity, reciprocity and respect for diverse cultural perspectives.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Projects */}
      <section className="section darker-section">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              PROJECTS
            </p>
            <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl md:text-5xl mb-6">
              Our Events & Initiatives
            </h2>
            <div className="divider"></div>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            {events.map((event, index) => (
              <div key={index} 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-3 text-[var(--accent-gold)]">
                  {event.title}
                </h3>
                <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-sm opacity-70 leading-relaxed">
                  {event.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Upcoming Events */}
      <section className="section dark-section">
        <div className="max-w-4xl mx-auto text-center">
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            UPCOMING
          </p>
          <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl font-light mb-6">
            Upcoming Events
          </h2>
          <div className="divider"></div>
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg opacity-70 mt-6">
            New events are being planned. Follow us on social media or get in touch to stay informed.
          </p>
          <div className="flex justify-center gap-4 mt-8">
            <a
              href="https://www.instagram.com/reevolutionart"
              target="_blank"
              rel="noopener noreferrer"
              className="btn-outline btn-outline-light"
              style={{ fontFamily: "'Narrenschiff', sans-serif" }}
            >
              Follow @reevolutionart
            </a>
            <Link href="/contact" className="btn-outline btn-outline-light" style={{ fontFamily: "'Narrenschiff', sans-serif" }}>
              Contact Us
            </Link>
          </div>
        </div>
      </section>

      {/* Join Us */}
      <section className="section darker-section">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
              GET INVOLVED
            </p>
            <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl md:text-5xl mb-6">
              Join Us
            </h2>
            <div className="divider"></div>
            <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg max-w-2xl mx-auto opacity-80">
              Whether through art, ceremony or immersive events, our intention is to create experiences that awaken presence, truth and connection.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {joinRoles.map((role, index) => (
              <div key={index} className="role-card">
                <h3 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-lg mb-2 text-[var(--accent-gold)]">
                  {role.title}
                </h3>
                <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-sm opacity-70 leading-relaxed">
                  {role.description}
                </p>
              </div>
            ))}
          </div>

          <div className="flex justify-center mt-12">
            <Link href="/contact" className="btn-outline btn-outline-light" style={{ fontFamily: "'Narrenschiff', sans-serif" }}>
              Get in Touch
            </Link>
          </div>
        </div>
      </section>

      {/* Social Links */}
      <section className="section dark-section">
        <div className="max-w-4xl mx-auto text-center">
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
            FOLLOW US
          </p>
          <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl font-light mb-6">
            Stay Connected
          </h2>
          <div className="divider"></div>
          <div className="flex justify-center gap-6 mt-8">
            <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>
    </>
  );
}
