import { getI18n } from "@/lib/i18n";
import { Download, Film } from "lucide-react";

export async function SiteTrailer() {
  const { t } = await getI18n();
  return (
    <section
      className="section site-trailer"
      aria-labelledby="site-trailer-title"
    >
      <div className="section-heading">
        <div>
          <span className="eyebrow">
            <Film size={14} aria-hidden="true" /> {t("THE EXPEDITION AWAITS")}
          </span>
          <h2 id="site-trailer-title">{t("A world worth getting lost in.")}</h2>
        </div>
        <span className="trailer-duration">
          {t("30-second cinematic teaser")}
        </span>
      </div>
      <video
        className="site-trailer-player"
        controls
        preload="none"
        playsInline
        poster="/media/minegeo-trailer-poster.jpg"
        aria-label={t("MineGeo cinematic teaser")}
        aria-describedby="site-trailer-description"
      >
        <source src="/media/minegeo-trailer.mp4" type="video/mp4" />
        <track
          kind="captions"
          src="/media/minegeo-trailer.vtt"
          srcLang="en"
          label={t("English")}
        />
        <p>
          {t("Your browser cannot play this video.")}{" "}
          <a href="/media/minegeo-trailer.mp4">{t("Download the trailer")}</a>
        </p>
      </video>
      <div className="trailer-caption">
        <p id="site-trailer-description">
          {t(
            "A tour of the real MineGeo homepage, community maps, map setup, and in-game panorama, blended with animated voxel landscapes. Ambient music; no spoken dialogue.",
          )}
        </p>
        <a className="text-link" href="/media/minegeo-trailer.mp4" download>
          <Download size={15} aria-hidden="true" /> {t("Download the trailer")}
        </a>
      </div>
    </section>
  );
}