import React from 'react';
import Link from 'next/link';
import { resolveIcon } from '@/lib/puck/iconMap';

interface Feature {
  title: string;
  description: string;
  icon: string;
}

interface FeaturesGridProps {
  title?: string;
  subtitle?: string;
  features?: Feature[];
  buttonText?: string;
  buttonUrl?: string;
  buttonStyle?: string;
  theme?: string;
}

export function FeaturesGrid({
  title = '特長',
  subtitle = '私たちの強みをご紹介します。',
  features = [],
  buttonText = '',
  buttonUrl = '',
  buttonStyle = 'filled',
  theme = 'default',
}: FeaturesGridProps) {
  const themeClasses: Record<string, { bg: string; card: string; iconBg: string; iconColor: string; text: string; sub: string; border: string }> = {
    default: { bg: '', card: 'bg-dark-gray', iconBg: 'bg-crimson-red/10', iconColor: 'text-crimson-red', text: 'text-white', sub: 'text-text-light-gray', border: 'border-soft-gray-border/20' },
    warm: { bg: 'bg-orange-50/30', card: 'bg-white', iconBg: 'bg-orange-100', iconColor: 'text-orange-600', text: 'text-slate-800', sub: 'text-slate-500', border: 'border-orange-200' },
    professional: { bg: 'bg-slate-900', card: 'bg-slate-800', iconBg: 'bg-slate-700', iconColor: 'text-blue-400', text: 'text-white', sub: 'text-slate-300', border: 'border-slate-700' },
    ocean: { bg: 'bg-blue-50/30', card: 'bg-white', iconBg: 'bg-blue-100', iconColor: 'text-blue-600', text: 'text-slate-800', sub: 'text-slate-500', border: 'border-blue-200' },
    forest: { bg: 'bg-emerald-50/30', card: 'bg-white', iconBg: 'bg-emerald-100', iconColor: 'text-emerald-600', text: 'text-slate-800', sub: 'text-slate-500', border: 'border-emerald-200' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  const getIcon = (iconName: string) => {
    const Icon = resolveIcon(iconName);
    return <Icon className={`w-6 h-6 ${t.iconColor}`} />;
  };

  return (
    <section className={`w-full py-12 ${t.bg}`}>
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-10">
          <h2 className={`text-2xl sm:text-3xl font-bold mb-3 ${t.text}`}>{title}</h2>
          {subtitle && <p className={`text-sm ${t.sub} max-w-lg mx-auto`}>{subtitle}</p>}
        </div>

        <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6`}>
          {features.map((feature, i) => (
            <div
              key={i}
              className={`${t.card} border ${t.border} rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow`}
            >
              <div className={`w-12 h-12 rounded-xl ${t.iconBg} flex items-center justify-center mb-4`}>
                {getIcon(feature.icon)}
              </div>
              <h3 className={`font-bold text-lg mb-2 ${t.text}`}>{feature.title}</h3>
              <p className={`text-sm leading-relaxed ${t.sub}`}>{feature.description}</p>
            </div>
          ))}
        </div>

        {features.length === 0 && (
          <p className="text-center text-text-light-gray py-8">特長を追加してください。</p>
        )}

        {/* CTA Button */}
        {buttonText && (
          <div className="text-center mt-10">
            <Link
              href={buttonUrl || '#'}
              className={`inline-flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm transition-all duration-200 ${
                buttonStyle === 'outlined' ? `border-2 border-current ${t.text} hover:opacity-80`
                : buttonStyle === 'ghost' ? `${t.text} hover:opacity-70 underline underline-offset-4`
                : `bg-crimson-red text-white hover:bg-crimson-red/90 shadow-md`
              }`}
            >
              {buttonText}
            </Link>
          </div>
        )}
      </div>
    </section>
  );
}
