import React from 'react';
import Link from 'next/link';
import { ArrowRight } from 'lucide-react';

interface LibTargetAudienceProps {
  performanceTitle?: string;
  performanceDescription?: string;
  performanceLinkUrl?: string;
  performanceLinkText?: string;
  healthTitle?: string;
  healthDescription?: string;
  healthLinkUrl?: string;
  healthLinkText?: string;
  theme?: string;
}

export function LibTargetAudience({
  performanceTitle = 'パフォーマンス向上をお求めの方',
  performanceDescription = '仕事や勉強のパフォーマンスをさらに高めたい方のための情報を提供しています。',
  performanceLinkUrl = '#',
  performanceLinkText = '詳しく見る',
  healthTitle = '健康を大切にする方',
  healthDescription = '日々の健康管理や体調改善に関心がある方のための情報をお届けします。',
  healthLinkUrl = '#',
  healthLinkText = '詳しく見る',
  theme = 'default',
}: LibTargetAudienceProps) {
  const themeClasses: Record<string, { card1: string; card2: string; text: string; sub: string; link: string }> = {
    default: {
      card1: 'bg-gradient-to-br from-brand-primary/10 to-brand-accent/10 border-crimson-red/20',
      card2: 'bg-gradient-to-br from-emerald-50 to-teal-50 border-emerald-200',
      text: 'text-white', sub: 'text-text-light-gray', link: 'text-crimson-red',
    },
    warm: {
      card1: 'bg-gradient-to-br from-orange-50 to-amber-50 border-orange-200',
      card2: 'bg-gradient-to-br from-rose-50 to-pink-50 border-rose-200',
      text: 'text-slate-800', sub: 'text-slate-500', link: 'text-orange-600',
    },
    professional: {
      card1: 'bg-slate-800 border-slate-700',
      card2: 'bg-slate-800/80 border-slate-700',
      text: 'text-white', sub: 'text-slate-300', link: 'text-blue-400',
    },
    ocean: {
      card1: 'bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200',
      card2: 'bg-gradient-to-br from-cyan-50 to-blue-50 border-cyan-200',
      text: 'text-slate-800', sub: 'text-slate-500', link: 'text-blue-600',
    },
    forest: {
      card1: 'bg-gradient-to-br from-emerald-50 to-green-50 border-emerald-200',
      card2: 'bg-gradient-to-br from-teal-50 to-emerald-50 border-teal-200',
      text: 'text-slate-800', sub: 'text-slate-500', link: 'text-emerald-600',
    },
  };
  const t = themeClasses[theme] || themeClasses.default;
  const bgClass = theme === 'professional' ? 'bg-slate-900' : '';

  return (
    <section className={`w-full py-12 ${bgClass}`}>
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Card 1 */}
          <div className={`rounded-2xl border p-8 ${t.card1} shadow-sm hover:shadow-md transition-shadow`}>
            <h3 className={`text-xl font-bold mb-3 ${t.text}`}>{performanceTitle}</h3>
            <p className={`text-sm leading-relaxed mb-4 ${t.sub}`}>{performanceDescription}</p>
            {performanceLinkUrl && (
              <Link
                href={performanceLinkUrl}
                className={`inline-flex items-center gap-1.5 text-sm font-semibold ${t.link} hover:underline`}
              >
                {performanceLinkText} <ArrowRight className="w-4 h-4" />
              </Link>
            )}
          </div>

          {/* Card 2 */}
          <div className={`rounded-2xl border p-8 ${t.card2} shadow-sm hover:shadow-md transition-shadow`}>
            <h3 className={`text-xl font-bold mb-3 ${t.text}`}>{healthTitle}</h3>
            <p className={`text-sm leading-relaxed mb-4 ${t.sub}`}>{healthDescription}</p>
            {healthLinkUrl && (
              <Link
                href={healthLinkUrl}
                className={`inline-flex items-center gap-1.5 text-sm font-semibold ${t.link} hover:underline`}
              >
                {healthLinkText} <ArrowRight className="w-4 h-4" />
              </Link>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
