"use client";

import * as React from "react";
import { motion } from "framer-motion";
import {
  Code2,
  Cpu,
  LayoutDashboard,
  CheckCircle2,
  Package,
} from "lucide-react";
import { MonoLabel, Label, BodyText } from "../Typography";
import { cn } from "../../utils/cn";

const DeliveryCard: React.FC<{
  icon: React.ElementType;
  title: string;
  desc: string;
  delay: number;
}> = ({ icon: Icon, title, desc, delay }) => (
  <motion.div
    initial={{ opacity: 0, y: 20, rotateX: 10 }}
    whileInView={{ opacity: 1, y: 0, rotateX: 0 }}
    transition={{ delay, duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
    className="group relative h-full"
  >
    <div className="h-full bg-white border border-slate-100 rounded-2xl p-6 md:p-8 shadow-sm flex flex-col gap-6 transition-all duration-700 hover:border-slate-300 hover:shadow-xl hover:shadow-slate-100/50">
      <div className="flex justify-between items-start">
        <div className="w-12 h-12 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center text-slate-400 group-hover:text-slate-900 group-hover:bg-white group-hover:border-slate-200 transition-all duration-500">
          <Icon className="w-6 h-6" />
        </div>
        <div className="w-5 h-5 rounded-full border border-green-100 bg-green-50 flex items-center justify-center">
          <CheckCircle2 className="w-3 h-3 text-green-600" />
        </div>
      </div>

      <div className="space-y-2">
        <h4 className="text-xl font-bold tracking-tight text-slate-900">
          {title}
        </h4>
        <BodyText className="text-sm text-slate-400 leading-relaxed group-hover:text-slate-500 transition-colors">
          {desc}
        </BodyText>
      </div>

      <div className="mt-auto pt-6 border-t border-slate-50 flex items-center justify-between">
        <MonoLabel className="text-[8px] text-slate-300 uppercase tracking-widest">
          Ownership: 100%
        </MonoLabel>
        <span className="text-[10px] font-mono font-bold text-slate-900 opacity-0 group-hover:opacity-100 transition-opacity">
          READY
        </span>
      </div>
    </div>

    {/* Subtle hover accent */}
    <div className="absolute -inset-2 bg-gradient-to-tr from-slate-100/50 to-transparent rounded-3xl -z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-700 blur-sm" />
  </motion.div>
);

export const ResultVisualizer: React.FC<{ className?: string }> = ({
  className,
}) => {
  return (
    <div
      className={cn(
        "relative p-6 md:p-12 lg:p-16 rounded-[2.5rem] border border-slate-100 bg-white overflow-hidden",
        className,
      )}
    >
      <div className="absolute inset-0 bg-slate-50/30 opacity-60" />
      <div
        className="absolute inset-0 opacity-[0.02] pointer-events-none"
        style={{
          backgroundImage: "radial-gradient(#000 1px, transparent 1px)",
          backgroundSize: "40px 40px",
        }}
      />

      <div className="relative z-10 space-y-12">
        <div className="flex items-center gap-4">
          <div className="px-4 py-2 bg-slate-900 rounded-xl flex items-center gap-3 shadow-xl">
            <Package className="w-4 h-4 text-white" />
            <MonoLabel className="text-white text-[10px]">
              DELIVERY_PACKAGE_v2
            </MonoLabel>
          </div>
          <div className="h-px flex-1 bg-slate-100" />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
          <DeliveryCard
            icon={Code2}
            title="Quellcode"
            desc="Ihr Eigentum. Versioniert auf GitHub, dokumentiert und jederzeit bereit für Weiterentwicklungen."
            delay={0.1}
          />
          <DeliveryCard
            icon={Cpu}
            title="Infrastruktur"
            desc="Docker-Container & CI/CD Pipelines. Ein System, das überall läuft und sich selbst aktualisiert."
            delay={0.2}
          />
          <DeliveryCard
            icon={LayoutDashboard}
            title="Content System"
            desc="Ein maßgeschneidertes CMS für Ihre Inhalte. Intuitive Pflege ohne das Design zu gefährden."
            delay={0.3}
          />
        </div>

        {/* Status Line */}
        <div className="pt-8 flex flex-col md:flex-row items-center justify-between gap-6 border-t border-slate-100">
          <div className="flex items-center gap-4">
            <div className="flex -space-x-2">
              {[0, 1, 2].map((i) => (
                <div
                  key={i}
                  className="w-8 h-8 rounded-full border-2 border-white bg-slate-100"
                />
              ))}
            </div>
            <Label className="text-slate-400 text-xs">
              Ihre Teams haben die volle Kontrolle.
            </Label>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-ping" />
            <MonoLabel className="text-slate-900 font-bold tracking-tighter">
              PROJECT STATUS: PRODUCTION_READY
            </MonoLabel>
          </div>
        </div>
      </div>
    </div>
  );
};
