Dev-Landing/src/components/landing-hero-section.tsx

"use client";

import { ArrowUpRight } from "lucide-react";
import { useEffect, useState } from "react";

import { cn } from "@/lib/utils";
import { WebcamPixelGrid } from "@/components/ui/webcam-pixel-grid";

/** Canvas-Hintergrund = Basiston der Raster-Palette (schließt optisch an bg-primary an). */
const PRIMARY_HERO_BG = "#B54440";

const LandingHeroSection = () => {
  const [liveRasterOn, setLiveRasterOn] = useState(false);
  const [hasWebcam, setHasWebcam] = useState(false);

  useEffect(() => {
    const mediaDevices = navigator.mediaDevices;

    if (!mediaDevices?.enumerateDevices) {
      setHasWebcam(false);
      return;
    }

    const updateWebcamAvailability = async () => {
      try {
        const devices = await mediaDevices.enumerateDevices();
        const hasVideoInput = devices.some(
          (device) => device.kind === "videoinput",
        );

        setHasWebcam(hasVideoInput);
        if (!hasVideoInput) {
          setLiveRasterOn(false);
        }
      } catch {
        setHasWebcam(false);
        setLiveRasterOn(false);
      }
    };

    updateWebcamAvailability();
    mediaDevices.addEventListener?.("devicechange", updateWebcamAvailability);

    return () => {
      mediaDevices.removeEventListener?.(
        "devicechange",
        updateWebcamAvailability,
      );
    };
  }, []);

  const handleToggleLiveRaster = () => {
    setLiveRasterOn((isOn) => !isOn);
  };

  return (
    <section className="relative grid min-h-screen grid-cols-1 border-b border-border lg:grid-cols-[1.08fr_0.92fr]">
      <div className="flex min-h-[640px] flex-col justify-between px-5 py-5 sm:px-8 lg:px-12">
        <header className="grid gap-4 border-b border-border pb-5 text-xs uppercase tracking-[0.28em] text-muted-foreground sm:grid-cols-[1fr_auto]">
          <a href="/" className="font-semibold text-foreground">
            Matthias Meister
          </a>
          <nav className="flex flex-wrap gap-5">
            <a href="#leistungen">Leistungen</a>
            <a href="#pakete">Pakete</a>
            <a href="#kontakt">Kontakt</a>
          </nav>
        </header>

        <div className="max-w-5xl py-16 sm:py-20 lg:py-24">
          <p className="mb-6 max-w-sm text-sm uppercase tracking-[0.32em] text-primary">
            Für Betriebe, die lieber arbeiten als basteln
          </p>
          <h1 className="max-w-[11ch] text-[clamp(4.25rem,13vw,11.5rem)] font-black uppercase leading-[0.79] tracking-normal text-foreground">
            Online Fertig Passt
          </h1>
          <div className="mt-8 grid gap-7 border-t border-border pt-7 lg:grid-cols-[0.72fr_1fr]">
            <p className="text-sm uppercase tracking-[0.24em] text-muted-foreground">
              Strategie trifft Umsetzung
            </p>
            <p className="max-w-2xl text-lg leading-8 text-foreground/78">
              Ich baue Websites für Handwerk, Praxen, Salons und
              Dienstleister aus der Region — klar genug, dass Besucher
              anrufen statt weiterklicken.
            </p>
          </div>
        </div>

        <div className="grid gap-4 border-t border-border pt-5 text-sm uppercase tracking-[0.2em] text-muted-foreground sm:grid-cols-3">
          <span>Antwort in 24h</span>
          <span>abmahnsicher</span>
          <span>Hosting in Sachsen</span>
        </div>
      </div>

      <aside className="relative flex min-h-[520px] flex-col overflow-hidden border-t border-primary-foreground/25 bg-primary px-5 py-5 text-primary-foreground sm:px-8 lg:min-h-screen lg:border-t-0 lg:border-l lg:px-12">
        {liveRasterOn ? (
          <div className="pointer-events-none absolute inset-0 z-0 hidden min-h-full lg:block">
            <WebcamPixelGrid
              className="min-h-full"
              gridCols={40}
              gridRows={30}
              maxElevation={10}
              motionSensitivity={0.52}
              elevationSmoothing={0.12}
              colorMode="redscale"
              backgroundColor={PRIMARY_HERO_BG}
              mirror
              gapRatio={0}
              darken={0.08}
              borderColor="#ffffff"
              borderOpacity={0}
              quietWebcamErrors
              onWebcamError={() => setLiveRasterOn(false)}
            />
          </div>
        ) : null}

        <div className="relative z-10 flex min-h-[520px] flex-1 flex-col lg:min-h-0">
          <div className="flex shrink-0 items-start justify-between border-b border-primary-foreground/30 pb-5 text-xs uppercase tracking-[0.28em]">
            <span></span>
            <span>&copy;2026</span>
          </div>

          {hasWebcam ? (
            <div className="hidden shrink-0 flex-col items-end gap-2 pt-4 lg:flex">
              <p
                className={cn(
                  "max-w-[18ch] text-right text-[10px] leading-snug font-medium uppercase tracking-[0.22em] text-primary-foreground/85",
                  !liveRasterOn && "motion-safe:animate-pulse",
                )}
              >
                {liveRasterOn
                  ? "Kamera aus? Schalter zurück, fertig."
                  : "Psst ... einmal wippen, dann lebt die Seite."}
              </p>
              <button
                type="button"
                role="switch"
                aria-checked={liveRasterOn}
                aria-label={
                  liveRasterOn
                    ? "Live-Raster beenden"
                    : "Live-Raster mit Kamera starten"
                }
                onClick={handleToggleLiveRaster}
                className={cn(
                  "relative h-9 w-13 shrink-0 rounded-full border transition-colors duration-300 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary-foreground",
                  liveRasterOn
                    ? "border-primary-foreground/50 bg-primary-foreground/20"
                    : "border-primary-foreground/45 bg-primary-foreground/10 hover:border-primary-foreground/70",
                )}
              >
                <span
                  className={cn(
                    "absolute top-1 left-1 size-7 rounded-full bg-primary-foreground shadow-sm transition-transform duration-300 ease-out",
                    liveRasterOn ? "translate-x-4" : "translate-x-0",
                  )}
                />
              </button>
            </div>
          ) : null}

          <div className="relative mt-auto pt-16 pb-8 lg:pt-24 lg:pb-10">
            <div className="pointer-events-none absolute bottom-0 right-0 h-36 w-36 border border-primary-foreground/35 sm:right-2 lg:right-10" />
            <div className="relative max-w-xl">
              <p className="text-[clamp(4rem,10vw,9rem)] font-black uppercase leading-[0.75] tracking-normal">
                01
              </p>
              <p className="mt-7 max-w-sm text-2xl font-semibold uppercase leading-none">
                Geradeaus. Ohne Buzzwords. Für echte Betriebe.
              </p>
            </div>
          </div>

          <a
            href="#kontakt"
            className="group relative z-10 inline-flex w-fit shrink-0 items-center gap-3 border border-primary-foreground px-5 py-4 text-sm font-semibold uppercase tracking-[0.18em] transition hover:bg-primary-foreground hover:text-primary"
          >
            Projekt anfragen
            <ArrowUpRight className="size-5 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
          </a>
        </div>
      </aside>
    </section>
  );
};

export { LandingHeroSection };