'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';

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

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.8 },
  },
};

const expertise = [
  {
    emoji: '🏥',
    title: '医療システム分野',
    description: '高い信頼性と複雑な業務ロジックが求められる医療分野での豊富な実績',
    image: '/images/healthcare.svg',
    items: [
      '医療系業務システム・データベースの設計・保守',
      '複雑なストアドプロシージャやバッチ処理の解析・改善',
      'データ不整合・重複データ・依存関係問題の調査',
      '既存 VB / .NET システムの保守・改修・原因分析',
      '医療システムの環境移行、バージョンアップ、緊急復旧対応',
    ],
  },
  {
    emoji: '🚚',
    title: '物流・業務システム',
    description: '大量データ・複雑な連携・長年の運用履歴への対応',
    image: '/images/logistics.svg',
    items: [
      '受注・在庫・入出庫・ロット管理などの業務ロジック整理',
      '複数システム間のデータ連携・整合性確保',
      'SQL / ストアドプロシージャ / 定期バッチの整理・最適化',
      'Main / Release など既存フォルダ構成・運用ルールの再整理',
      'DLL 差分分析・依存関係の可視化',
    ],
  },
  {
    emoji: '🤖',
    title: 'AI・インテリジェント活用',
    description: 'AIを目的ではなく手段として捉えた実用的な導入',
    image: '/images/ai.svg',
    items: [
      'ローカル／オンプレミス環境での AI（LLM）構築',
      '社内向け AI アシスタント（ログ・仕様・業務知識検索）',
      '既存業務システム・データベースとの AI 連携',
      'クラウド依存しない、安全で制御可能な AI 導入',
    ],
  },
  {
    emoji: '📊',
    title: '会計・財務システム',
    description: '日本の中小企業における実務ベースの会計処理',
    image: '/images/accounting.svg',
    items: [
      '勘定科目マスタ設計',
      '仕訳・試算表・期首残高管理',
      '消費税（税抜・税込）の正確な取り扱い',
      '銀行手数料、利息、税金の適切な仕訳',
      '税理士と共有可能な会計ロジック設計',
    ],
  },
  {
    emoji: '💴',
    title: '給与・人事システム',
    description: '法律・数値計算・システム設計が密接に絡む分野',
    image: '/images/payroll.svg',
    items: [
      '源泉所得税（扶養判定・年度切替）',
      '健康保険・介護保険・厚生年金',
      '子ども・子育て拠出金',
      '月給・賞与・年末調整を考慮した設計',
      '設定変更・履歴管理が可能な給与ロジック',
    ],
  },
];

export default function Expertise() {
  return (
    <section className="py-20 px-4 sm:px-6 lg:px-8">
      <motion.div
        className="max-w-6xl mx-auto"
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, margin: '-100px' }}
      >
        <motion.h2
          className="text-4xl sm:text-5xl font-bold mb-16 text-center"
          variants={itemVariants}
        >
          実務経験
        </motion.h2>

        <motion.div
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
          variants={containerVariants}
        >
          {expertise.map((exp, index) => (
            <motion.div
              key={index}
              className="p-8 rounded-lg border border-gray-700 hover:border-blue-500 transition-all hover:shadow-lg hover:shadow-blue-500/10 group"
              variants={itemVariants}
            >
              <div className="mb-4 h-32 relative overflow-hidden rounded-lg bg-gray-800">
                <Image
                  src={exp.image}
                  alt={exp.title}
                  width={200}
                  height={200}
                  className="w-full h-full object-cover transform group-hover:scale-105 transition-transform"
                />
              </div>
              <div className="text-4xl mb-4 transform group-hover:scale-110 transition-transform">
                {exp.emoji}
              </div>
              <h3 className="text-xl font-semibold mb-2">{exp.title}</h3>
              <p className="text-gray-400 text-sm mb-4">{exp.description}</p>
              <ul className="space-y-2">
                {exp.items.map((item, i) => (
                  <li key={i} className="text-sm text-gray-400 flex items-start">
                    <span className="mr-3 text-blue-400">•</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}
        </motion.div>
      </motion.div>
    </section>
  );
}