"use client";

import React from "react";
import Link from "next/link";
import { ChevronRight, Zap, Shield, BarChart3 } from "lucide-react";
import { Reveal } from "@/components/Reveal";
import { Counter } from "@/components/Counter";
import { TechBackground } from "@/components/TechBackground";
import { useTranslations } from "next-intl";

interface PortfolioItem {
  icon: React.ReactNode;
  title: string;
  desc: string;
}

interface PortfolioSectionProps {
  tag?: string;
  title?: string;
  description?: string;
  linkText?: string;
  items?: PortfolioItem[];
}

export const PortfolioSection = ({
  tag,
  title,
  description,
  linkText,
  items,
}: PortfolioSectionProps) => {
  const t = useTranslations("Index");

  const displayTag = tag || t("portfolio.tag");
  const displayTitle = title || t("portfolio.title");
  const displayDescription = description || t("portfolio.description");
  const displayLinkText = linkText || t("portfolio.link");

  const defaultItems = [
    {
      icon: <Zap size={32} />,
      title: t("portfolio.items.beratung.title"),
      desc: t("portfolio.items.beratung.desc"),
    },
    {
      icon: <Shield size={32} />,
      title: t("portfolio.items.begleitung.title"),
      desc: t("portfolio.items.begleitung.desc"),
    },
    {
      icon: <BarChart3 size={32} />,
      title: t("portfolio.items.beschaffung.title"),
      desc: t("portfolio.items.beschaffung.desc"),
    },
  ];

  const displayItems = items || defaultItems;

  return (
    <section className="bg-slate-950 text-accent relative overflow-hidden">
      <TechBackground />
      <div className="container-custom relative z-10">
        <Counter value={2} className="section-number !text-white/5" />
        <Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
          <div>
            <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>
            <p className="text-slate-400 text-base md:text-xl">
              {displayDescription}
            </p>
          </div>
          <Link
            href="/ueber-uns"
            className="text-accent font-bold flex items-center gap-2 hover:text-white transition-colors group"
          >
            {displayLinkText}{" "}
            <ChevronRight
              className="transition-transform group-hover:translate-x-1"
              size={20}
            />
          </Link>
        </Reveal>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {displayItems.map((item, i) => (
            <Reveal key={i} delay={i * 0.1}>
              <div className="bg-white/5 p-8 rounded-2xl border border-white/10 group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full relative overflow-hidden">
                <div className="absolute top-0 right-0 w-16 h-16 bg-accent/5 -mr-8 -mt-8 rounded-full group-hover:bg-accent/10 transition-colors" />
                <div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors relative z-10">
                  {item.icon}
                </div>
                <h3 className="text-2xl font-bold text-white mb-4 relative z-10">
                  {item.title}
                </h3>
                <p className="text-slate-400 leading-relaxed relative z-10">
                  {item.desc}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};