UXplore/relume-test/src/pages/ProgrammDetail.tsx

import { useParams, Navigate, Link } from "react-router-dom";
import { Navbar3 } from "../components/Navbar";
import { Cta30 } from "../components/Cta30";
import { Footer3 } from "../components/Footer";
import { Team4Defaults } from "../components/Team4";
import { ALL_EVENTS } from "../data/events";
import { BiCalendarAlt, BiUser, BiLogoLinkedinSquare, BiLogoDribbble } from "react-icons/bi";
import { SiXing } from "react-icons/si";
import { RxCube } from "react-icons/rx";
import webflowLogo from "../assets/webflow.png";
import relumeLogo from "../assets/relume.png";

const SPONSORS = [
  { src: webflowLogo, alt: "Webflow" },
  { src: relumeLogo, alt: "Relume" },
];

const SponsorsSection = () => (
  <section className="bg-tech-navy px-[5%] py-16 md:py-24 font-barlow">
    <div className="container">
      <h2 className="mb-12 text-center text-4xl font-bold text-cloud-white md:text-5xl">
        Unsere Sponsoren & Partner
      </h2>
      <div className="flex flex-wrap items-center justify-center gap-8">
        {SPONSORS.map((sponsor) => (
          <div
            key={sponsor.alt}
            className="flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-8 py-6"
          >
            <img src={sponsor.src} alt={sponsor.alt} className="h-10 w-auto object-contain" />
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ProgrammDetail = () => {
  const { id } = useParams<{ id: string }>();
  const event = ALL_EVENTS.find((e) => e.id === id);

  if (!event) return <Navigate to="/programm" replace />;

  const speaker = Team4Defaults.teamMembers.find((m) => m.slug === event.speakerSlug);

  const dateLabel = event.day === "Donnerstag"
    ? "Donnerstag, 25. Juni 2026"
    : "Freitag, 26. Juni 2026";

  return (
    <div>
      <Navbar3 />

      {/* Hero section */}
      <section className="bg-tech-navy px-[5%] py-16 md:py-24 font-barlow">
        <div className="container">
          <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
            {/* Left: event info */}
            <div>
              <span className="mb-4 inline-block rounded-full border border-electric-violet px-3 py-1 text-xs font-semibold text-electric-violet">
                {event.type}
              </span>
              <h1 className="mb-4 text-5xl font-bold text-cloud-white md:text-6xl lg:text-7xl">
                {event.title}
              </h1>
              {event.subtitle && (
                <p className="mb-8 text-lg text-cloud-white/70">{event.subtitle}</p>
              )}
              <div className="mb-8 flex flex-col gap-3">
                <div className="flex items-center gap-3 text-cloud-white/80">
                  <BiCalendarAlt className="size-5 shrink-0 text-acid-lime" />
                  <span className="text-sm">{dateLabel}, {event.time}</span>
                </div>
<div className="flex items-center gap-3 text-cloud-white/80">
                  <BiUser className="size-5 shrink-0 text-acid-lime" />
                  <span className="text-sm">{event.speaker}</span>
                </div>
              </div>
              <Link
                to="/tickets"
                className="inline-block rounded-2xl bg-acid-lime px-8 py-3 text-base font-bold text-tech-navy hover:opacity-90 transition-opacity"
              >
                Ticket kaufen
              </Link>
            </div>

            {/* Right: speaker image */}
            <div className="aspect-square w-full max-w-md overflow-hidden lg:ml-auto">
              <img
                src={event.image.src}
                alt={event.image.alt}
                className="size-full object-cover object-top"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Speaker bio + event description */}
      <section className="bg-tech-navy px-[5%] pb-16 md:pb-24 font-barlow">
        <div className="container border-t border-white/10 pt-16">
          <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-20">
            {/* Left: über den speaker */}
            <div>
              <RxCube className="mb-4 size-8 text-electric-violet" />
              <h2 className="mb-6 text-2xl font-bold text-cloud-white md:text-3xl">
                Über den Speaker
              </h2>
              {speaker ? (
                <>
                  <p className="mb-1 text-lg font-bold text-cloud-white">{speaker.name}</p>
                  <p className="mb-1 text-sm text-cloud-white/60">{speaker.role}</p>
                  <p className="mb-4 text-sm text-cloud-white/60">{speaker.company}</p>
                  <div className="flex gap-3 mb-6">
                    <a href="#" className="text-cloud-white/60 hover:text-acid-lime transition-colors">
                      <BiLogoLinkedinSquare className="size-6" />
                    </a>
                    <a href="#" className="text-cloud-white/60 hover:text-acid-lime transition-colors">
                      <SiXing className="size-5" />
                    </a>
                    <a href="#" className="text-cloud-white/60 hover:text-acid-lime transition-colors">
                      <BiLogoDribbble className="size-6" />
                    </a>
                  </div>
                  <Link
                    to={`/speaker/${speaker.slug}`}
                    className="inline-block rounded-2xl border border-acid-lime px-6 py-2.5 text-sm font-semibold text-acid-lime hover:bg-acid-lime hover:text-tech-navy transition-colors"
                  >
                    Speaker Details
                  </Link>
                </>
              ) : (
                <p className="text-cloud-white/60">{event.speaker}</p>
              )}
            </div>

            {/* Right: das erwartete dich */}
            <div>
              <RxCube className="mb-4 size-8 text-electric-violet" />
              <h2 className="mb-6 text-2xl font-bold text-cloud-white md:text-3xl">
                Das erwartet dich
              </h2>
              <p className="text-base leading-relaxed text-cloud-white/80">
                {event.description ?? "Weitere Informationen folgen in Kürze."}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Stay tuned */}
      <Cta30 />

      {/* Sponsors */}
      <SponsorsSection />

      <Footer3 />
    </div>
  );
};

export default ProgrammDetail;