'use client';

import * as React from 'react';
import { motion, Variants } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';

interface SubCompanyTilesProps {
  data?: {
    badge?: string;
    title?: string;
    companies?: {
      title?: string;
      description?: string;
      icon?: string;
      backgroundImage?: {
        url?: string;
        alt?: string;
      } | any;
    }[];
  };
}

const defaultCompanies = [
  {
    title: 'E-TIB GmbH',
    desc: 'Ausführung elektrischer Infrastrukturprojekte und komplexer Tiefbaumaßnahmen.',
    icon: 'M13 10V3L4 14h7v7l9-11h-7z',
    bgImage: '/assets/photos/DJI_0243.JPG',
  },
  {
    title: 'Bohrtechnik GmbH',
    desc: 'Präzise Horizontalbohrungen und steuerbare Spülbohrtechnik in allen Bodenklassen.',
    icon: 'M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0zm10-8v16m-8-8h16', 
    bgImage: '/assets/photos/DSC08653.JPG',
  },
  {
    title: 'Ingenieurgesellschaft',
    desc: 'Fachübergreifende Planung, Projektierung und digitale Dokumentation von Leitungsnetzen.',
    icon: 'M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z M14 3v5h5 M16 13H8 M16 17H8 M10 9H8',
    bgImage: '/assets/photos/DSC01137.JPG',
  },
  {
    title: 'Verwaltung GmbH',
    desc: 'Zentrale Koordination, moderner Einkauf und effizientes Finanzmanagement der Gruppe.',
    icon: 'M3 21h18 M3 7h18 M5 21V7 M19 21V7 M9 21v-5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v5 M12 3v4',
    bgImage: '/assets/photos/DJI_0037.JPG',
  },
];

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
    },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } },
};

export function SubCompanyTiles({ data }: SubCompanyTilesProps) {
  const badge = data?.badge || 'Die Gruppe';
  const title = data?.title || 'Geballte Kompetenz unter einem Dach';
  const companiesData = data?.companies?.map(c => ({
    title: c.title,
    desc: c.description,
    icon: c.icon || 'M13 10V3L4 14h7v7l9-11h-7z',
    bgImage: c.backgroundImage?.url || '/assets/photos/DJI_0243.JPG',
  })) || defaultCompanies;

  return (
    <section id="unternehmen" className="py-24 bg-neutral overflow-hidden">
      <div className="container relative z-10">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
          <h3 className="font-heading text-4xl md:text-5xl font-extrabold text-text-primary">{title}</h3>
        </div>
        
        <motion.div 
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
        >
          {companiesData.map((company, index) => (
            <motion.div 
              key={index}
              variants={itemVariants}
              className="group relative rounded-none overflow-hidden aspect-[4/5] flex flex-col justify-end p-8 shadow-xl border-b-4 border-primary transition-colors duration-500 bg-white"
            >
              <div className="absolute inset-0 bg-white z-0">
                <Image
                  src={company.bgImage}
                  alt={company.title || ''}
                  fill
                  className="object-cover opacity-80 group-hover:scale-105 group-hover:opacity-100 transition-all duration-700 ease-in-out"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
                />
              </div>
              
              {/* Premium Bright Gradient */}
              <div className="absolute inset-0 bg-gradient-to-t from-white via-white/80 to-white/10 opacity-90 group-hover:opacity-100 transition-opacity duration-500 z-0" />
              
              <div className="relative z-10 flex flex-col h-full justify-between">
                <div className="w-12 h-12 rounded-none bg-primary text-white flex items-center justify-center group-hover:bg-primary-dark transition-all duration-300 shadow-md">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d={company.icon} />
                  </svg>
                </div>
                
                <div className="mt-auto transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 ease-out">
                  <h4 className="font-heading font-bold text-2xl text-text-primary mb-2 leading-tight group-hover:text-primary transition-colors">{company.title}</h4>
                  <p className="text-text-secondary leading-relaxed text-sm h-0 opacity-0 group-hover:h-auto group-hover:opacity-100 group-hover:mt-3 transition-all duration-500 ease-out overflow-hidden line-clamp-3">
                    {company.desc}
                  </p>
                </div>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}