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

"use client";

import { ArrowUpRight } from "lucide-react";
import { 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);

  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">
            Projektbrief für regionale Unternehmen
          </p>
          <h1 className="max-w-[11ch] text-[clamp(4.25rem,13vw,11.5rem)] font-black uppercase leading-[0.78] tracking-normal text-foreground">
            Website ohne Umweg
          </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. Direkt, glaubwürdig und so
              reduziert, dass der nächste Kontakt naheliegt.
            </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>DSGVO-arm</span>
          <span>Hosting aus DE</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
            />
          </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>Creative Direction</span>
            <span>2026</span>
          </div>

          <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 das Raster."}
            </p>
            <button
              type="button"
              role="switch"
              aria-checked={liveRasterOn}
              aria-label={
                liveRasterOn
                  ? "Live-Raster und Kamera beenden"
                  : "Live-Raster mit Kamera starten"
              }
              onClick={() => setLiveRasterOn((v) => !v)}
              className={cn(
                "relative h-9 w-[3.25rem] shrink-0 rounded-full border transition-colors duration-300 focus-visible:outline focus-visible:outline-2 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>

          <div className="relative flex min-h-0 flex-1 flex-col justify-center py-10 lg:py-14">
            <div className="pointer-events-none absolute bottom-8 right-0 h-36 w-36 border border-primary-foreground/35 sm:bottom-10 sm:right-2 lg:bottom-16 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">
                Klarer Auftritt. Harte Kante. Weniger Agenturlärm.
              </p>
            </div>
          </div>

          <a
            href="#kontakt"
            className="group relative z-10 mt-auto 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 };