"use client";

import React from "react";
import Image from "next/image";
import { Button } from "@/components/Button";
import { Counter } from "@/components/Counter";
import { Reveal } from "@/components/Reveal";
import { TechBackground } from "@/components/TechBackground";

interface HeroProps {
  tag: string;
  title: React.ReactNode;
  subtitle: string;
  ctaPrimary: string;
  ctaSecondary: string;
}

export function Hero({
  tag,
  title,
  subtitle,
  ctaPrimary,
  ctaSecondary,
}: HeroProps) {
  return (
    <section className="relative min-h-[90vh] flex items-center pt-44 pb-20 overflow-hidden">
      <div className="absolute inset-0 z-0">
        <Image
          src="/media/business/hero-bg.jpg"
          alt="MB Grid Solutions Hero"
          fill
          className="object-cover"
          priority
          quality={75}
        />
        <div className="absolute inset-0 bg-gradient-to-r from-slate-100/80 via-white/90 to-white/40 md:to-transparent" />
        <TechBackground />
      </div>

      <div className="container-custom relative z-10">
        <div className="text-left relative">
          <Counter value={1} className="section-number" />
          <Reveal delay={0.1}>
            <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-bold uppercase tracking-wider mb-6">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
              </span>
              {tag}
            </span>
          </Reveal>

          <Reveal delay={0.2}>
            <h1 className="text-4xl sm:text-5xl md:text-7xl font-extrabold text-primary mb-6 md:mb-8 leading-[1.1]">
              {title}
            </h1>
          </Reveal>

          <Reveal delay={0.3}>
            <p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8 md:mb-12 max-w-2xl">
              {subtitle}
            </p>
          </Reveal>

          <Reveal delay={0.4}>
            <div className="flex flex-wrap gap-4">
              <Button href="/kontakt" variant="accent" showArrow>
                {ctaPrimary}
              </Button>
              <Button href="/ueber-uns" variant="ghost">
                {ctaSecondary}
              </Button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}