"use client";

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

interface AboutHeroProps {
  tagline: string;
  title: React.ReactNode;
  subtitle: string;
}

export function AboutHero({ tagline, title, subtitle }: AboutHeroProps) {
  return (
    <section className="relative min-h-[60vh] flex items-center pt-44 pb-20 overflow-hidden">
      <div className="absolute inset-0 z-0">
        <Image
          src="/media/drums/about-hero.jpg"
          alt="About MB Grid Solutions"
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
        <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="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
              {tagline}
            </span>
          </Reveal>
          <Reveal delay={0.2}>
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-primary mb-6 md:mb-8 leading-tight">
              {title}
            </h1>
          </Reveal>
          <Reveal delay={0.3}>
            <p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8">
              {subtitle}
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}