"use client";

import * as React from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { Button } from "./Button";
import { AbstractCircuit } from "./Effects";
import { GlitchText } from "./GlitchText";

/**
 * HeroSection: "Binary Architecture / The Blueprint"
 *
 * - **Concept**: The website as a technical blueprint being rendered in real-time.
 * - **Typography**: Massive scale, mixing black Sans and technical Mono.
 * - **Details**: Coordinate markers, blueprint lines, and binary data integration.
 */

export const HeroSection: React.FC = () => {
  const { scrollY } = useScroll();
  const y = useTransform(scrollY, [0, 800], [0, 300]);
  const opacity = useTransform(scrollY, [0, 600], [1, 0]);

  return (
    <section className="relative min-h-[85dvh] md:min-h-[100dvh] flex items-center justify-center overflow-hidden bg-white px-5 md:px-0">
      {/* 1. The Binary Architecture (Background) */}
      <div className="absolute inset-0 z-0">
        <AbstractCircuit />
      </div>

      {/* 2. Content Layer */}
      <div className="relative z-10 container mx-auto h-full flex flex-col justify-center items-center">
        <motion.div
          style={{ y, opacity }}
          className="text-center relative max-w-full md:max-w-[90vw]"
        >
          {/* Architectural Coordinate Labels */}
          <div className="absolute -left-20 top-0 hidden xl:flex flex-col gap-8 opacity-20 pointer-events-none">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="flex items-center gap-4">
                <span className="text-[10px] font-mono">0x00{i}A</span>
                <div className="w-12 h-[1px] bg-slate-400" />
              </div>
            ))}
          </div>

          {/* Badge */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 1, delay: 0.2 }}
            className="mb-4 md:mb-10 inline-flex items-center gap-3 md:gap-4 px-4 md:px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
          >
            <div className="flex gap-1">
              <div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" />
              <div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" />
            </div>
            <span className="text-[9px] md:text-[10px] font-mono font-bold tracking-[0.3em] md:tracking-[0.4em] text-slate-500 uppercase">
              Digital_Architect // v.2026
            </span>
          </motion.div>

          {/* Headline */}
          <h1 className="text-3xl md:text-[11rem] font-black tracking-tighter leading-[0.9] md:leading-[0.8] text-slate-900 mb-6 md:mb-12 uppercase">
            <div className="block">
              <GlitchText delay={0.5} duration={1.2}>
                Websites
              </GlitchText>
            </div>
            <div
              className="block font-mono text-transparent bg-clip-text bg-gradient-to-r from-slate-400 via-slate-300 to-slate-400 font-light italic"
              style={{ letterSpacing: "-0.02em" }}
            >
              <GlitchText delay={0.9} duration={1}>
                ohne overhead.
              </GlitchText>
            </div>
          </h1>

          {/* Subtext */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.8 }}
            className="flex flex-col items-center gap-6 md:gap-12"
          >
            <p className="text-base md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed px-4">
              Ein Entwickler. Ein Ansprechpartner.{" "}
              <br className="hidden md:block" />
              <span className="text-slate-900 font-bold tracking-tight">
                Systematische Architekturen für das Web.
              </span>
            </p>

            <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 w-full px-5 md:px-0">
              <Button href="/contact" size="large" className="w-full md:w-auto">
                Projekt anfragen
              </Button>
              <Button
                href="/websites"
                variant="outline"
                size="large"
                className="w-full md:w-auto"
              >
                Prozess ansehen
              </Button>
            </div>
          </motion.div>
        </motion.div>
      </div>

      {/* 3. Blueprint Frame (Decorative Borders) */}
      <div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-4 md:m-8 opacity-40 md:opacity-40" />
      <div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group">
        <span className="text-[10px] font-mono tracking-widest text-slate-400">
          POS_TRANSMISSION_001
        </span>
      </div>
      <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 p-4 opacity-20 transition-opacity hover:opacity-100 scale-75 md:scale-100 origin-bottom-right">
        <span className="text-[10px] font-mono tracking-widest text-slate-400">
          EST_2026 // M-ARCH
        </span>
      </div>

      {/* 4. Scroll Indicator */}
      <motion.div
        className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
        style={{ opacity }}
      >
        <div className="w-[1px] h-8 md:h-12 bg-slate-200" />
        <span className="text-[9px] font-mono uppercase tracking-[0.3em] text-slate-400">
          Scroll
        </span>
      </motion.div>
    </section>
  );
};