ttvfx/components/Hero.tsx

import Link from "next/link";
import Fox from "./Fox";
import PlayReel from "./PlayReel";
import Timecode from "./Timecode";
import { site } from "@/content/site";

export default function Hero() {
  return (
    <section className="relative flex min-h-[100svh] items-end overflow-hidden pt-32 md:pt-44">
      {/* Plate: showreel if configured, otherwise a moving light field */}
      {site.reel ? (
        <video
          className="absolute inset-0 h-full w-full object-cover opacity-55"
          src={site.reel}
          poster={site.reelPoster ?? undefined}
          autoPlay
          muted
          loop
          playsInline
        />
      ) : (
        <div className="absolute inset-0" aria-hidden="true">
          <div className="animate-drift absolute top-[10%] left-[45%] h-[70vmax] w-[70vmax] rounded-full bg-[radial-gradient(circle,rgb(232_87_42/0.28),transparent_60%)] blur-2xl" />
          <div
            className="animate-drift absolute top-[-20%] left-[-20%] h-[60vmax] w-[60vmax] rounded-full bg-[radial-gradient(circle,rgb(70_110_160/0.22),transparent_60%)] blur-2xl"
            style={{ animationDelay: "-9s" }}
          />
          <Fox className="absolute top-1/2 right-[-8vw] h-[85vh] w-auto -translate-y-1/2 text-white/[0.035]" />
          <div className="animate-scan absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
        </div>
      )}
      <div className="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-ink/30" aria-hidden="true" />

      {/* Viewer HUD */}
      <div
        className="pointer-events-none absolute inset-x-5 top-24 bottom-6 hidden font-mono text-[10px] tracking-[0.25em] text-white/40 uppercase md:inset-x-8 md:top-28 md:block"
        aria-hidden="true"
      >
        <span className="absolute top-0 left-0 h-4 w-4 border-t border-l border-white/30" />
        <span className="absolute top-0 right-0 h-4 w-4 border-t border-r border-white/30" />
        <span className="absolute bottom-0 left-0 h-4 w-4 border-b border-l border-white/30" />
        <span className="absolute right-0 bottom-0 h-4 w-4 border-r border-b border-white/30" />
        <span className="absolute top-3 left-6">TTVFX_REEL_v{String(new Date().getFullYear()).slice(2)}1</span>
        <span className="absolute top-3 right-6">ACEScg · 24 fps</span>
        <Timecode className="absolute right-6 bottom-3" />
      </div>

      <div className="relative mx-auto w-full max-w-7xl px-5 pb-20 md:px-8 md:pb-28">
        <p className="mb-6 font-mono text-xs tracking-[0.3em] text-accent uppercase">
          Visual effects studio · Est. {site.founded}
        </p>
        <h1 className="font-display text-[9.5vw] leading-[0.95] font-thin tracking-tight uppercase md:text-[8.5vw] xl:text-[8rem]">
          Invisible work.
          <br />
          <span className="font-light">Unforgettable</span> frames.
        </h1>
        <div className="mt-10 flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
          <p className="max-w-md text-base leading-relaxed text-muted md:text-lg">
            Compositing, CG and finishing for series, film and commercials, built on a pipeline we wrote ourselves.
          </p>
          <div className="flex flex-wrap items-center gap-3">
            {site.fullReel && (
              <span className="mr-3">
                <PlayReel src={site.fullReel} poster={site.reelPoster ?? undefined} />
              </span>
            )}
            <Link
              href="/work/"
              className="bg-fg px-5 py-3.5 whitespace-nowrap md:px-6 font-mono text-xs tracking-[0.2em] text-ink uppercase transition-colors hover:bg-accent"
            >
              View work
            </Link>
            <Link
              href="/#contact"
              className="border border-white/25 px-5 py-3.5 font-mono text-xs tracking-[0.2em] whitespace-nowrap uppercase transition-colors hover:border-fg md:px-6"
            >
              Start a project
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}