import storyboard from "../../../scripts/product-video/storyboard.json";

export function ProductVideo() {
  return (
    <section id="produkt-video" aria-labelledby="produkt-video-heading" className="mx-auto w-full max-w-7xl scroll-mt-8 px-5 pt-16 pb-4 sm:px-6 lg:pt-24">
      <div className="mb-8 grid gap-5 lg:grid-cols-[0.85fr_1.15fr] lg:items-end">
        <div>
          <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">In Ruhe kennenlernen</p>
          <h2 id="produkt-video-heading" className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">Kita-Planer in zwei Minuten.</h2>
        </div>
        <p className="max-w-2xl text-sm leading-6 text-slate-600 lg:justify-self-end">
          Ein Rundgang durch die sechs Bereiche mit echten App-Ansichten und Beispieldaten.
          Deutsche Untertitel und markierte Hinweise erklären die Abläufe – ohne Ton und ohne Gesprächstermin.
        </p>
      </div>
      <video
        controls
        playsInline
        preload="none"
        width={1920}
        height={1080}
        poster="/landing/video/kita-planer-poster.jpg"
        aria-label="Kita-Planer: zweiminütiger Rundgang mit deutschen Untertiteln und visuellen Hinweisen"
        className="aspect-video h-auto w-full rounded-2xl border border-slate-200 bg-[#f7f4ed] shadow-sm [&::cue]:text-[clamp(12px,1.8vw,24px)]"
      >
        <source src="/landing/video/kita-planer-rundgang-web.mp4" type="video/mp4" />
        <track src="/landing/video/kita-planer-untertitel.vtt" kind="captions" srcLang="de" label="Deutsch" default />
        <track src="/landing/video/kita-planer-kapitel.vtt" kind="chapters" srcLang="de" label="Kapitel" />
        Dein Browser unterstützt die Videoanzeige nicht. Das Video kannst du über den Link unten herunterladen.
      </video>
      <div className="mt-4 flex flex-wrap items-center justify-between gap-3 text-xs leading-6 text-slate-500">
        <p>2:00 Min. · Ohne Ton · Deutsche Untertitel</p>
        <div className="flex flex-wrap gap-x-5 gap-y-1">
          <a href="/landing/video/kita-planer-rundgang.mp4" download className="font-medium text-emerald-800 underline-offset-4 hover:underline">Video herunterladen</a>
          <a href="/landing/video/kita-planer-untertitel.vtt" download className="text-emerald-800 underline-offset-4 hover:underline">Untertitel als Datei</a>
        </div>
      </div>
      <details className="mt-5 rounded-xl border border-slate-200 bg-white px-5 py-4 text-sm text-slate-600">
        <summary className="cursor-pointer font-medium text-slate-800">Videoinhalt als Text lesen</summary>
        <div className="mt-5 grid gap-5 md:grid-cols-2">
          {storyboard.chapters.map((chapter, index) => (
            <div key={chapter.title}>
              <h3 className="font-semibold text-slate-800">{chapter.title}</h3>
              <div className="mt-2 space-y-2 leading-6">
                {storyboard.scenes.filter((scene) => scene.chapter === index).map((scene) => <p key={scene.title.join(" ")}>{scene.subtitle.join(" ")}</p>)}
              </div>
            </div>
          ))}
        </div>
      </details>
    </section>
  );
}