"use client";

import React from "react";
import {
  Award,
  Clock,
  Lightbulb,
  Truck,
  MessageSquare,
  ShieldCheck,
} from "lucide-react";
import { Reveal } from "@/components/Reveal";
import { TechBackground } from "@/components/TechBackground";
import { Counter } from "@/components/Counter";

const manifestIcons = [
  Award,
  Clock,
  Lightbulb,
  Truck,
  MessageSquare,
  ShieldCheck,
];

interface ManifestItem {
  title: string;
  desc: string;
}

interface ManifestSectionProps {
  tagline: string;
  title: string;
  subtitle: string;
  items: ManifestItem[];
}

export function ManifestSection({
  tagline,
  title,
  subtitle,
  items,
}: ManifestSectionProps) {
  return (
    <section className="bg-slate-950 text-accent relative overflow-hidden">
      <TechBackground />
      <div className="container-custom relative z-10">
        <Counter value={3} className="section-number !text-white/5" />
        <Reveal className="mb-20">
          <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
            {tagline}
          </span>
          <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
            {title}
          </h2>
          <p className="text-slate-400 text-base md:text-lg">{subtitle}</p>
        </Reveal>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {items.map((item, i) => {
            const Icon = manifestIcons[i % manifestIcons.length];
            return (
              <Reveal key={i} delay={i * 0.1}>
                <div className="bg-white/5 p-10 rounded-3xl border border-white/10 group hover:-translate-y-1 transition-[box-shadow,transform] duration-300 h-full motion-fix relative 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" />
                  <div className="text-accent mb-6">
                    <Icon size={32} />
                  </div>
                  <h3 className="text-xl font-bold text-white mb-4">
                    {i + 1}. {item.title}
                  </h3>
                  <p className="text-slate-400 leading-relaxed">{item.desc}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}