"use client";

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

interface SpecItem {
  label: string;
  value: string;
  desc: string;
}

interface TechnicalSpecsSectionProps {
  tag?: string;
  title?: string;
  items?: SpecItem[];
}

export const TechnicalSpecsSection = ({
  tag,
  title,
  items,
}: TechnicalSpecsSectionProps) => {
  const t = useTranslations("Index");

  const displayTag = tag || t("specs.tag");
  const displayTitle = title || t("specs.title");

  const defaultItems = [
    {
      label: t("specs.items.kabel.label"),
      value: t("specs.items.kabel.value"),
      desc: t("specs.items.kabel.desc"),
    },
    {
      label: t("specs.items.spannung.label"),
      value: t("specs.items.spannung.value"),
      desc: t("specs.items.spannung.desc"),
    },
    {
      label: t("specs.items.technologie.label"),
      value: t("specs.items.technologie.value"),
      desc: t("specs.items.technologie.desc"),
    },
  ];

  const displayItems = items || defaultItems;

  return (
    <section className="relative py-24 md:py-32 text-white overflow-hidden bg-slate-900">
      <div className="absolute inset-0 opacity-20">
        <Image
          src="/media/drums/about-hero.jpg"
          alt="Background"
          fill
          className="object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-900/80 to-slate-900" />
      </div>
      <TechBackground />

      <div className="container-custom relative z-10">
        <Counter value={4} className="section-number !text-white/5" />
        {/* Data Stream Effect */}
        <div className="absolute -top-10 right-0 w-px h-64 bg-gradient-to-b from-transparent via-accent/50 to-transparent animate-pulse" />
        <div className="absolute -bottom-10 left-10 w-px h-64 bg-gradient-to-b from-transparent via-accent/30 to-transparent animate-pulse delay-700" />

        <Reveal className="mb-20">
          <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
            {displayTag}
          </span>
          <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
            {displayTitle}
          </h2>
        </Reveal>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
          {displayItems.map((item, i) => (
            <Reveal key={i} delay={i * 0.1}>
              <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full relative group overflow-hidden">
                <div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />
                <h3 className="text-accent font-bold text-xs uppercase tracking-widest mb-6">
                  {item.label}
                </h3>
                <p className="text-2xl font-bold text-white mb-4 leading-tight">
                  {item.value}
                </p>
                <p className="text-slate-400 leading-relaxed">{item.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};