"use client";

import React from 'react';
import Image from 'next/image';

interface ServiceItem {
  title: string;
  description: string;
  keyPoints: string[];
  image: string;
  icon: React.ReactNode;
}

interface ServiceHighlightProps {
  title: string;
  subtitle: string;
  items: ServiceItem[];
}

export const ServiceHighlight: React.FC<ServiceHighlightProps> = ({
  title,
  subtitle,
  items,
}) => {
  const [activeIndex, setActiveIndex] = React.useState(0);

  return (
    <section className="py-24 bg-background relative overflow-hidden">
      <div className="container mx-auto px-4 relative z-10">
        <div className="max-w-4xl mx-auto text-center mb-20">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent-teal">
            {title}
          </h2>
          <p className="text-lg md:text-xl text-neutral-light max-w-2xl mx-auto leading-relaxed">
            {subtitle}
          </p>
        </div>

        {/* Desktop Layout */}
        <div className="hidden md:grid grid-cols-12 gap-12 items-start">
          <div className="col-span-5 space-y-4">
            {items.map((item, index) => (
              <div 
                key={index}
                className={`p-6 rounded-xl cursor-pointer transition-all duration-500 border ${
                  activeIndex === index 
                    ? 'bg-ui-dark/90 border-primary shadow-lg shadow-primary/10' 
                    : 'bg-ui-dark/40 border-ui-border hover:border-ui-border/80'
                }`}
                onClick={() => setActiveIndex(index)}
              >
                <div className="flex items-center gap-4">
                  <div className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
                    activeIndex === index ? 'bg-primary text-white' : 'bg-ui-dark border border-ui-border text-neutral-gray'
                  }`}>
                    {item.icon}
                  </div>
                  <h4 className={`text-lg font-semibold transition-colors ${
                    activeIndex === index ? 'text-white' : 'text-neutral-gray'
                  }`}>
                    {item.title}
                  </h4>
                </div>
              </div>
            ))}
          </div>

          <div className="col-span-7 bg-ui-dark border border-ui-border rounded-2xl overflow-hidden shadow-2xl relative aspect-[4/3]">
            {items.map((item, index) => (
              <div 
                key={index}
                className={`absolute inset-0 transition-all duration-700 ease-in-out ${
                  activeIndex === index ? 'opacity-100 scale-100' : 'opacity-0 scale-105 pointer-events-none'
                }`}
              >
                <Image 
                  src={item.image} 
                  alt={item.title} 
                  fill 
                  className="object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
                <div className="absolute inset-0 p-10 flex flex-col justify-end">
                  <p className="text-neutral-light text-lg mb-6 max-w-md">
                    {item.description}
                  </p>
                  <div className="grid grid-cols-2 gap-4">
                    {item.keyPoints.map((point, pIndex) => (
                      <div key={pIndex} className="flex items-center gap-2 text-sm text-white/80">
                        <div className="w-1.5 h-1.5 rounded-full bg-primary"></div>
                        {point}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Mobile Layout */}
        <div className="md:hidden space-y-8">
          {items.map((item, index) => (
            <div key={index} className="bg-ui-dark border border-ui-border rounded-2xl overflow-hidden">
              <div className="relative aspect-video">
                <Image src={item.image} alt={item.title} fill className="object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-ui-dark to-transparent"></div>
                <div className="absolute bottom-4 left-4 flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
                    {item.icon}
                  </div>
                  <h4 className="text-lg font-bold text-white">{item.title}</h4>
                </div>
              </div>
              <div className="p-6">
                <p className="text-neutral-gray text-sm mb-6">{item.description}</p>
                <div className="grid grid-cols-1 gap-3">
                  {item.keyPoints.map((point, pIndex) => (
                    <div key={pIndex} className="flex items-center gap-2 text-xs text-neutral-light">
                      <div className="w-1.5 h-1.5 rounded-full bg-primary"></div>
                      {point}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};