import React from "react";
import { Mail, Bike, Music2 } from "lucide-react";

export default function TourDeJazz() {
  return (
    <main className="min-h-screen bg-[#050505] text-white">
      <section className="relative min-h-screen overflow-hidden flex items-center justify-center">
        <div className="absolute inset-0 bg-gradient-to-b from-black via-[#111]/90 to-black" />
        <div className="relative z-10 w-full max-w-6xl mx-auto px-6 py-12 text-center">
          <img
            src="/tour-de-jazz.png"
            alt="Tour de Jazz"
            className="mx-auto w-full max-w-5xl object-contain drop-shadow-2xl"
          />

          <div className="mt-8 flex items-center justify-center gap-3 text-[#f7b916]">
            <Bike className="h-6 w-6" />
            <span className="h-px w-12 bg-[#f7b916]" />
            <Music2 className="h-6 w-6" />
          </div>

          <h1 className="mt-6 text-3xl md:text-5xl font-black uppercase tracking-tight">
            Tour de Jazz
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg md:text-xl text-zinc-300">
            Pyöräilyä, musiikkia ja Poria.
          </p>
          <p className="mx-auto mt-2 max-w-2xl text-zinc-400">
            Koe kesäinen Pori kahdella pyörällä jazzin hengessä.
          </p>

          <a
            href="mailto:info@tourdejazz.fi"
            className="mt-9 inline-flex items-center gap-3 rounded-2xl bg-[#f7b916] px-6 py-3.5 font-bold text-black shadow-lg transition hover:bg-[#ffd04d] hover:-translate-y-0.5"
          >
            <Mail className="h-5 w-5" />
            info@tourdejazz.fi
          </a>
        </div>
      </section>

      <footer className="border-t border-zinc-900 bg-black px-6 py-8 text-center text-sm text-zinc-500">
        © Tour de Jazz • Pori
      </footer>
    </main>
  );
}