"use client";

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

interface ExpertiseSectionProps {
  tag?: string;
  title?: string;
  description?: string;
  groups?: string[];
}

export const ExpertiseSection = ({
  tag,
  title,
  description,
  groups,
}: ExpertiseSectionProps) => {
  const t = useTranslations("Index");

  const displayTag = tag || t("expertise.tag");
  const displayTitle = title || t("expertise.title");
  const displayDescription = description || t("expertise.description");
  const displayGroups = groups || t.raw("expertise.groups");

  return (
    <section className="bg-white relative overflow-hidden">
      <TechBackground />
      <div className="container-custom relative z-10">
        <Counter value={3} className="section-number" />
        <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-16 md:gap-24">
          <Reveal direction="right">
            <div className="relative overflow-hidden rounded-2xl shadow-lg group">
              <div className="absolute inset-0 bg-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10 pointer-events-none" />
              <Image
                src="/media/cables/hs-kabel.png"
                alt="Technische Beratung"
                width={800}
                height={600}
                className="w-full h-[400px] md:h-[500px] object-cover hover:scale-105 transition-transform duration-700"
              />
              <div className="tech-corner top-4 left-4 border-t-2 border-l-2 z-20" />
              <div className="tech-corner bottom-4 right-4 border-b-2 border-r-2 z-20" />
            </div>
          </Reveal>
          <div>
            <Reveal>
              <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-primary mb-6 md:mb-8">
                {displayTitle}
              </h2>
              <p className="text-slate-600 text-base md:text-xl mb-8 md:mb-12">
                {displayDescription}
              </p>
            </Reveal>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {displayGroups.map((item: string, i: number) => (
                <Reveal key={i} delay={i * 0.05}>
                  <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group relative overflow-hidden">
                    <div className="absolute top-0 left-0 w-1 h-full bg-accent/0 group-hover:bg-accent/100 transition-all duration-300" />
                    <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm group-hover:bg-accent group-hover:text-white transition-colors">
                      <CheckCircle2 size={16} />
                    </div>
                    <span className="text-primary font-semibold">{item}</span>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};