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

export const metadata: Metadata = {
  title: 'Our Ambassadors | Re Evolution Art',
  description: 'Re Evolution Art Ambassador Program — representing visionary culture across borders and communities.',
};

export default function OurAmbassadorsPage() {
  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-3.jpg"
            alt="Our Ambassadors"
            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 Ambassadors
          </h1>
          <div className="divider"></div>
        </div>
      </section>

      {/* Program Description */}
      <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">
            THE PROGRAM
          </p>
          <h2 style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-4xl font-light mb-6">
            Cultural Bridges
          </h2>
          <div className="divider"></div>
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed mb-6 opacity-80">
            Our Ambassadors represent Re Evolution Art in their regions and communities, bridging
            cultures through art, dialogue and creative collaboration. They are the connective tissue
            of our platform — bringing the vision into new territories and expanding the reach of
            conscious cultural expression.
          </p>
          <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-lg leading-relaxed mb-12 opacity-80">
            If you feel called to represent visionary culture in your community, we want to hear from you.
          </p>

          <div className="inline-block border border-[var(--accent-gold)] rounded-2xl p-12">
            <p style={{ fontFamily: "'Krown', sans-serif", fontWeight: 700 }} className="text-2xl text-[var(--accent-gold)] mb-4">
              Coming Soon
            </p>
            <p style={{ fontFamily: "'Narrenschiff', sans-serif" }} className="text-sm opacity-60 mb-8">
              Ambassador profiles will be featured here as the program launches.
            </p>
            <Link href="/contact" className="btn-outline btn-outline-light" style={{ fontFamily: "'Narrenschiff', sans-serif" }}>
              Apply to Become an Ambassador
            </Link>
          </div>
        </div>
      </section>

      {/* Back link */}
      <section className="section darker-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>
    </>
  );
}
