import React from 'react';

interface Service {
  title: string;
  description: string;
  features: string[];
  icon: React.ReactNode;
  color: string;
}

const Services: React.FC = () => {
  const services: Service[] = [
    {
      title: '카드 결제',
      description: '국내외 모든 카드사와 연동된 안전한 카드 결제 서비스',
      features: [
        '국내외 주요 카드사 지원',
        '무이자 할부 서비스',
        '실시간 승인 처리',
        '3D Secure 보안 인증'
      ],
      icon: (
        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
        </svg>
      ),
      color: 'from-blue-500 to-blue-600'
    },
    {
      title: '계좌이체',
      description: '은행 계좌를 통한 직접 이체 결제 서비스',
      features: [
        '전 은행 실시간 이체',
        '낮은 수수료율',
        '자동 입금 확인',
        '환불 처리 자동화'
      ],
      icon: (
        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      ),
      color: 'from-green-500 to-green-600'
    },
    {
      title: '모바일 결제',
      description: '카카오페이, 네이버페이 등 간편결제 서비스',
      features: [
        '주요 간편결제 연동',
        '원터치 결제',
        '포인트 사용 가능',
        '멤버십 혜택 적용'
      ],
      icon: (
        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
        </svg>
      ),
      color: 'from-purple-500 to-purple-600'
    },
    {
      title: '가상계좌',
      description: '개인별 전용 가상계좌를 통한 무통장 입금 서비스',
      features: [
        '실시간 계좌 발급',
        '자동 입금 확인',
        '다중 은행 지원',
        '입금 알림 서비스'
      ],
      icon: (
        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
        </svg>
      ),
      color: 'from-orange-500 to-orange-600'
    }
  ];

  return (
    <section className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            다양한 결제 서비스
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            고객의 다양한 결제 니즈에 맞춰 최적화된 결제 솔루션을 제공합니다.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8">
          {services.map((service, index) => (
            <div 
              key={index}
              className="group bg-white border-2 border-gray-100 rounded-2xl p-8 hover:border-transparent hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
            >
              <div className={`w-16 h-16 bg-gradient-to-r ${service.color} rounded-xl flex items-center justify-center text-white mb-6 group-hover:scale-110 transition-transform duration-300`}>
                {service.icon}
              </div>
              
              <h3 className="text-2xl font-bold text-gray-900 mb-4">
                {service.title}
              </h3>
              
              <p className="text-gray-600 mb-6 leading-relaxed">
                {service.description}
              </p>
              
              <div className="space-y-3">
                <h4 className="font-semibold text-gray-900 mb-3">주요 기능</h4>
                {service.features.map((feature, featureIndex) => (
                  <div key={featureIndex} className="flex items-center space-x-3">
                    <div className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></div>
                    <span className="text-gray-700">{feature}</span>
                  </div>
                ))}
              </div>
              
              <button className="mt-8 w-full bg-gray-50 text-gray-700 py-3 px-6 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition-all duration-300">
                자세히 보기
              </button>
            </div>
          ))}
        </div>

        <div className="text-center mt-16">
          <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-4">
              맞춤형 결제 솔루션이 필요하신가요?
            </h3>
            <p className="text-gray-600 mb-6 max-w-2xl mx-auto">
              비즈니스 규모와 업종에 맞는 최적의 결제 솔루션을 제안해드립니다.
              전문 컨설턴트와 상담을 통해 최고의 결제 환경을 구축하세요.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                무료 상담 신청
              </button>
              <button className="border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition-colors">
                서비스 가이드 다운로드
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Services;