import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Layout from "../components/layout";
import Image from "next/image";
import bgImage from "../../public/eventsimage.jpg";

const NextEvent = () => {
  const { t: translate } = useTranslation();

  const participants = translate("nextevent.participants", {
    returnObjects: true,
  });

  const scheduleDays = translate("schedule_days", {
    returnObjects: true,
  });

  const busTimes = translate("excursion_bus_times", {
    returnObjects: true,
  });

  const itineraries = translate("excursion_itineraries", {
    returnObjects: true,
  });

  return (
    <Layout noHeader>
      {/* Hero section */}
      <div className="relative h-[60vh] flex items-center justify-center">
        <Image
          src={bgImage}
          alt="Workshop background"
          layout="fill"
          objectFit="cover"
          priority
        />
        <div className="absolute inset-0 bg-black bg-opacity-40" />
        <div className="relative z-10 text-center text-white">
          <h1 className="text-5xl font-bold">{translate("nextevent.title")}</h1>
          <p className="text-2xl mt-4">{translate("nextevent.subtitle")}</p>
        </div>
      </div>

      {/* Contenido principal */}
      <div className="max-w-4xl mx-auto px-6 py-12 text-justify">
        {/* Intro */}
        <p className="mb-4">{translate("nextevent.intro")}</p>
        <p className="mb-2">{translate("nextevent.organizers")}</p>
        <p className="mb-8">{translate("nextevent.funding")}</p>

        {/* Participants */}
        <h2 className="text-2xl font-bold text-purple-600 mb-4">
          {translate("nextevent.participants_title")}
        </h2>
        <ul className="list-disc list-inside space-y-2 mb-12">
          {Array.isArray(participants) &&
            participants.map((p, idx) => <li key={idx}>{p}</li>)}
        </ul>

        {/* Schedule */}
        <h2 className="text-2xl font-bold text-purple-600 mb-4">
          {translate("schedule_title")}
        </h2>
        <p className="mb-6">{translate("schedule_description")}</p>

        {Array.isArray(scheduleDays) &&
          scheduleDays.map((dayBlock, idx) => (
            <div key={idx} className="mb-6">
              <h3 className="text-xl font-semibold mb-2">{dayBlock.day}</h3>
              <ul className="list-disc list-inside space-y-1">
                {dayBlock.items.map((item, i) => (
                  <li key={i}>{item}</li>
                ))}
              </ul>
            </div>
          ))}

        {/* Excursion */}
        <h2 className="text-2xl font-bold text-purple-600 mb-4">
          {translate("excursion_title")}
        </h2>
        <div
          className="mb-6 [&_a]:text-blue-600 [&_a]:underline"
          dangerouslySetInnerHTML={{ __html: translate("excursion_intro") }}
        />

        <h3 className="text-lg font-semibold mb-2">Key bus times</h3>
        <ul className="list-disc list-inside space-y-1 mb-6">
          {Array.isArray(busTimes) &&
            busTimes.map((time, idx) => <li key={idx}>{time}</li>)}
        </ul>

        <h3 className="text-lg font-semibold mb-4">Possible itineraries</h3>
        <div className="space-y-6">
          {Array.isArray(itineraries) &&
            itineraries.map((it, idx) => (
              <div key={idx} className="mb-4">
                <p className="font-semibold">{it.title}</p>
                <div
                  className="[&_a]:text-blue-600 [&_a]:underline"
                  dangerouslySetInnerHTML={{ __html: it.description }}
                />
              </div>
            ))}
        </div>
      </div>
    </Layout>
  );
};

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale)),
    },
  };
}

export default NextEvent;
