'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 {
  badge?: string;
  title?: string;
  companies?: {
    title?: string;
    description?: string;
    icon?: string;
    url?: string;
    backgroundImage?: {
      url?: string;
      alt?: string;
    } | any;
  }[];
  data?: {
    badge?: string;
    title?: string;
    companies?: {
      title?: string;
      description?: string;
      icon?: string;
      url?: 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(props: SubCompanyTilesProps) {
  const { data } = props;
  const badge = props.badge || data?.badge || 'Die Gruppe';
  const title = props.title || data?.title || 'Geballte Kompetenz unter einem Dach';
  const rawCompanies = props.companies || data?.companies;
  const companiesData = rawCompanies?.map(c => ({
    title: c.title,
    desc: c.description,
    url: c.url,
    icon: c.icon || 'M13 10V3L4 14h7v7l9-11h-7z',
    bgImage: c.backgroundImage?.url || c.backgroundImage || '/assets/photos/DJI_0243.JPG',
  })) || defaultCompanies;
  
  const gridColsClass = companiesData.length === 3 
    ? "grid-cols-1 lg:grid-cols-3" 
    : "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";

  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 gap-8 ${gridColsClass}`}
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
        >
          {companiesData.map((company, index) => {
            const CardWrapper = company.url ? 'a' : 'div';
            const wrapperProps = company.url ? { href: company.url, target: "_blank", rel: "noopener noreferrer" } : {};
            
            return (
              <motion.div 
                key={index}
                variants={itemVariants}
                className="h-full"
              >
                <CardWrapper 
                  {...wrapperProps}
                  className="group relative rounded-lg overflow-hidden aspect-[3/4] flex flex-col justify-end p-8 shadow-xl border-t-4 border-primary transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 bg-neutral-dark cursor-pointer block w-full h-full"
                >
                  <div className="absolute inset-0 bg-[#0a192f] z-0">
                    <Image
                      src={company.bgImage}
                      alt={company.title || ''}
                      fill
                      className="object-cover opacity-50 group-hover:opacity-70 group-hover:scale-105 transition-all duration-700 ease-in-out grayscale-[30%] group-hover:grayscale-0"
                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    />
                  </div>
                  
                  {/* Premium Dark Gradient, lighter this time */}
                  <div className="absolute inset-0 bg-gradient-to-t from-[#0a192f]/90 via-[#0a192f]/40 to-transparent z-0" />
                  
                  <div className="relative z-10 flex flex-col h-full justify-between">
                    <div className="w-14 h-14 rounded-none bg-primary/90 text-white flex items-center justify-center group-hover:bg-primary transition-all duration-300 shadow-lg backdrop-blur-sm">
                      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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-6 group-hover:translate-y-0 transition-transform duration-500 ease-out">
                      <h4 className="font-heading font-bold text-3xl text-white mb-3 leading-tight group-hover:text-primary transition-colors">{company.title}</h4>
                      <p className="text-white/80 leading-relaxed text-base h-0 opacity-0 group-hover:h-auto group-hover:opacity-100 group-hover:mt-4 transition-all duration-500 ease-out overflow-hidden line-clamp-4">
                        {company.desc}
                      </p>
                      {company.url && (
                        <div className="h-0 opacity-0 group-hover:h-auto group-hover:opacity-100 group-hover:mt-4 transition-all duration-500 ease-out flex items-center text-primary font-bold uppercase text-xs tracking-widest">
                          Website Besuchen
                          <svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                        </div>
                      )}
                    </div>
                  </div>
                </CardWrapper>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
}