import React, { FC } from 'react';
import { motion } from 'framer-motion';
import { FadeIn } from '../components/FadeIn';

interface ServiceItemProps {
  number: string;
  name: string;
  description: string;
  delay: number;
}

/**
 * Individual service item component.
 */
const ServiceItem: FC<ServiceItemProps> = ({ number, name, description, delay }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.3 }}
      transition={{ delay: delay, duration: 0.8 }}
      className="flex items-start py-8 sm:py-10 md:py-12 border-b border-gray-200/15 last:border-b-0"
    >
      {/* Number */}
      <div className="font-black text-black text-clamp-3 sm:text-clamp-10 md:text-clamp-140 mr-8 flex-shrink-0">
        {number}
      </div>
      
      {/* Content */}
      <div className="flex-grow">
        <h3 className="font-medium uppercase text-clamp-1 sm:text-clamp-2 md:text-clamp-21">
          {name}
        </h3>
        <p className="text-[#D7E2EA] font-light leading-relaxed max-w-2xl mt-2 text-base sm:text-xl md:text-2xl opacity-60">
          {description}
        </p>
      </div>
    </motion.div>
  );
};

/**
 * Services Section component.
 */
export const ServicesSection: FC = () => {
  const services = [
    { number: "01", name: "3D Modeling", description: "Creation of detailed objects, characters, or environments tailored to specific client needs, ideal for games, products, and visualizations." },
    { number: "02", name: "Rendering", description: "High-quality, photorealistic renders that showcase designs with custom lighting, textures, and materials to bring concepts to life." },
    { number: "03", name: "Motion Design", description: "Dynamic animations and motion graphics that add energy and storytelling to brands, products, and digital experiences." },
    { number: "04", name: "Branding", description: "Crafting cohesive visual identities -- from logos to full brand systems -- that communicate a clear and memorable presence." },
    { number: "05", name: "Web Design", description: "Designing clean, modern, and conversion-focused websites with attention to layout, typography, and user experience." },
  ];

  return (
    <section className="bg-white rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px] main-wrapper shadow-2xl shadow-gray-900/50">
      <div className="py-20 sm:py-24 md:py-32 px-5 sm:px-8 md:px-10 main-wrapper">
        {/* Heading */}
        <div className="text-center mb-16 sm:mb-20 md:mb-28">
          <h2 className="hero-heading text-black font-black uppercase leading-none tracking-tight text-clamp-3 sm:text-clamp-12 md:text-clamp-160">
            Services
          </h2>
        </div>

        {/* Service List */}
        <div className="max-w-5xl mx-auto">
          {services.map((service, index) => (
            <ServiceItem
              key={index}
              number={service.number}
              name={service.name}
              description={service.description}
              delay={index * 0.1}
            />
          ))}
        </div>
      </div>
    </section>
  );
};