// components/sections/AppPromoSection.tsx
// App promotion with device mockups and feature cards, 3 themes
import React from 'react';
import { Check, LineChart } from 'lucide-react';
import { resolveIcon } from '@/lib/puck/iconMap';

type ThemeKey = 'default' | 'dark' | 'vibrant' | 'ocean' | 'forest';

interface ThemeStyles {
  sectionBg: string;
  headlineColor: string;
  subtitleColor: string;
  dividerColor: string;
  tabletBorder: string;
  tabletHeader: string;
  phoneBg: string;
  phoneAccent: string;
  featureIconBg: string;
  featureIconColor: string;
  featureIconHover: string;
  featureTitle: string;
  featureDesc: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    sectionBg: 'bg-deep-black',
    headlineColor: 'text-white',
    subtitleColor: 'text-text-light-gray',
    dividerColor: 'bg-crimson-red',
    tabletBorder: 'border-text-primary bg-text-primary',
    tabletHeader: 'bg-crimson-red',
    phoneBg: 'bg-[#1a252f]',
    phoneAccent: 'bg-hover-red',
    featureIconBg: 'bg-white border-soft-gray-border/20',
    featureIconColor: 'text-crimson-red',
    featureIconHover: 'group-hover:bg-brand-highlight',
    featureTitle: 'text-white',
    featureDesc: 'text-text-light-gray',
  },
  dark: {
    sectionBg: 'bg-slate-900',
    headlineColor: 'text-white',
    subtitleColor: 'text-slate-400',
    dividerColor: 'bg-amber-400',
    tabletBorder: 'border-slate-700 bg-slate-800',
    tabletHeader: 'bg-slate-700',
    phoneBg: 'bg-slate-800',
    phoneAccent: 'bg-emerald-500',
    featureIconBg: 'bg-slate-800 border-slate-700',
    featureIconColor: 'text-amber-400',
    featureIconHover: 'group-hover:bg-slate-700',
    featureTitle: 'text-white',
    featureDesc: 'text-slate-400',
  },
  vibrant: {
    sectionBg: 'bg-gradient-to-b from-orange-50 to-white',
    headlineColor: 'text-slate-900',
    subtitleColor: 'text-slate-600',
    dividerColor: 'bg-orange-500',
    tabletBorder: 'border-slate-800 bg-slate-800',
    tabletHeader: 'bg-orange-500',
    phoneBg: 'bg-slate-800',
    phoneAccent: 'bg-orange-500',
    featureIconBg: 'bg-white border-orange-200 shadow-sm',
    featureIconColor: 'text-orange-500',
    featureIconHover: 'group-hover:bg-orange-50',
    featureTitle: 'text-slate-900',
    featureDesc: 'text-slate-600',
  },
  ocean: {
    sectionBg: 'bg-gradient-to-b from-blue-50 to-white',
    headlineColor: 'text-slate-900',
    subtitleColor: 'text-slate-600',
    dividerColor: 'bg-blue-500',
    tabletBorder: 'border-slate-800 bg-slate-800',
    tabletHeader: 'bg-blue-600',
    phoneBg: 'bg-slate-800',
    phoneAccent: 'bg-blue-600',
    featureIconBg: 'bg-white border-blue-200 shadow-sm',
    featureIconColor: 'text-blue-500',
    featureIconHover: 'group-hover:bg-blue-50',
    featureTitle: 'text-slate-900',
    featureDesc: 'text-slate-600',
  },
  forest: {
    sectionBg: 'bg-gradient-to-b from-emerald-50 to-white',
    headlineColor: 'text-slate-900',
    subtitleColor: 'text-slate-600',
    dividerColor: 'bg-emerald-500',
    tabletBorder: 'border-slate-800 bg-slate-800',
    tabletHeader: 'bg-emerald-600',
    phoneBg: 'bg-slate-800',
    phoneAccent: 'bg-emerald-600',
    featureIconBg: 'bg-white border-emerald-200 shadow-sm',
    featureIconColor: 'text-emerald-500',
    featureIconHover: 'group-hover:bg-emerald-50',
    featureTitle: 'text-slate-900',
    featureDesc: 'text-slate-600',
  },
};

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

interface AppPromoSectionProps {
  title?: string;
  subtitle?: string;
  features?: AppPromoFeature[];
  theme?: ThemeKey;
}

const DEFAULT_FEATURES: AppPromoFeature[] = [
  { title: '市場のリアルタイム把握', description: 'スマートフォンからいつでも最新の相場状況を確認し、投資タイミングを逃しません。', icon: 'clock' },
  { title: 'オンライン学習の進捗', description: 'あなたの金融リテラシー向上具合やテスト結果をアプリ上で簡単に管理できます。', icon: 'graduation-cap' },
  { title: 'グローバルニュース', description: '世界の重要な金融動向が瞬時に手元へ。素早い意思決定をサポートします。', icon: 'globe' },
];

export function AppPromoSection({
  title = 'スマートな資産管理ツール',
  subtitle = 'アプリを活用して、毎日の資産推移や最新の金融市場をいつでもチェック。',
  features = DEFAULT_FEATURES,
  theme = 'default',
}: AppPromoSectionProps) {
  const safeFeatures = features && features.length > 0 ? features : DEFAULT_FEATURES;
  const t = THEMES[theme] || THEMES.default;

  return (
    <section className={`w-full ${t.sectionBg} py-16 md:py-24 border-b border-soft-gray-border/20 overflow-hidden`}>
      <div className="container max-w-6xl mx-auto flex flex-col items-center px-4">
        <div className="text-center mb-16 animate-in fade-in slide-in-from-bottom-4 duration-700">
          <h2 className={`text-2xl md:text-3xl lg:text-4xl font-bold leading-snug tracking-tight mb-4 ${t.headlineColor}`}>
            {title}
          </h2>
          <div className={`w-12 h-[3px] ${t.dividerColor} mx-auto mb-6 rounded-full`} />
          <p className={`text-[15px] md:text-base font-medium leading-relaxed max-w-2xl mx-auto px-4 ${t.subtitleColor}`}>
            {subtitle}
          </p>
        </div>

        <div className="relative w-full max-w-4xl mx-auto h-[300px] md:h-[450px] mb-24 md:mb-32 flex justify-center perspective-1000 animate-in fade-in zoom-in duration-1000">
          {/* Tablet Mockup */}
          <div className={`absolute left-1/2 md:left-1/3 -translate-x-1/2 w-[90%] md:w-[600px] h-[250px] md:h-[400px] ${t.tabletBorder} rounded-2xl md:rounded-[2rem] border-[6px] md:border-[10px] shadow-2xl flex flex-col overflow-hidden z-10 transition-transform duration-700 hover:-translate-y-2`}>
            <div className="w-full bg-white h-full overflow-hidden flex flex-col relative">
              <div className={`w-full h-10 md:h-12 ${t.tabletHeader} flex items-center px-4 shadow-sm z-10`}>
                <div className="w-16 md:w-24 h-3 md:h-4 bg-white/20 rounded-full" />
              </div>
              <div className="flex-grow bg-slate-50 p-4 md:p-6 flex flex-col gap-4">
                <div className="w-full h-24 md:h-32 bg-soft-dark/40 rounded-xl relative overflow-hidden">
                  <svg className="absolute bottom-0 w-full h-full text-crimson-red/20" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,100 L0,50 Q25,20 50,60 T100,30 L100,100 Z" fill="currentColor" /></svg>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="w-full h-20 md:h-24 bg-white rounded-xl border border-slate-200 shadow-sm flex items-center justify-center"><Check className="text-hover-red w-8 h-8 opacity-50" /></div>
                  <div className="w-full h-20 md:h-24 bg-white rounded-xl border border-slate-200 shadow-sm flex items-center justify-center"><LineChart className="text-hover-red w-8 h-8 opacity-50" /></div>
                </div>
              </div>
            </div>
          </div>

          {/* Smartphone Mockup */}
          <div className={`absolute right-1/2 md:right-1/4 translate-x-[40%] md:translate-x-0 bottom-[-30px] md:bottom-[-40px] w-[130px] md:w-[220px] h-[260px] md:h-[450px] ${t.phoneBg} rounded-[1.5rem] md:rounded-[2.5rem] border-[5px] md:border-[8px] border-current shadow-[0_20px_50px_rgba(0,0,0,0.5)] flex flex-col overflow-hidden z-20 transition-transform duration-700 hover:-translate-y-4`} style={{ borderColor: 'inherit' }}>
            <div className={`absolute top-0 left-1/2 -translate-x-1/2 w-[40%] md:w-1/3 h-3 md:h-5 ${t.phoneBg} rounded-b-xl z-30`} />
            <div className="w-full bg-slate-50 h-full relative overflow-hidden flex flex-col">
              <div className={`w-full h-[40%] md:h-[45%] ${t.phoneAccent} relative`}>
                <div className="absolute bottom-4 left-4 text-white font-bold opacity-90 text-xs md:text-sm">PORTFOLIO</div>
              </div>
              <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[85%] h-48 md:h-64 bg-white rounded-xl shadow-lg border border-slate-100 p-2 md:p-3 flex flex-col gap-2 md:gap-3">
                <div className="w-full h-1/2 bg-soft-dark/30 rounded-lg flex items-center justify-center font-bold text-crimson-red">¥</div>
                <div className="w-3/4 h-2 md:h-3 bg-slate-200 rounded-full mt-1" />
                <div className="w-1/2 h-2 md:h-3 bg-slate-200 rounded-full" />
                <div className="w-full h-6 md:h-10 bg-brand-highlight rounded-full mt-auto mb-1 flex items-center justify-center"><Check className="w-4 h-4 text-crimson-red" /></div>
              </div>
            </div>
          </div>
        </div>

        <div className={`grid grid-cols-1 md:grid-cols-${safeFeatures.length > 4 ? 4 : safeFeatures.length} gap-8 md:gap-12 w-full max-w-5xl mx-auto`}>
          {safeFeatures.map((feature, i) => {
            const FeatureIcon = resolveIcon(feature.icon);
            return (
              <div key={i} className="flex flex-col items-center text-center group">
                <div className={`w-16 h-16 rounded-full border flex items-center justify-center mb-6 transition-all duration-300 ${t.featureIconBg} ${t.featureIconColor} ${t.featureIconHover}`}>
                  <FeatureIcon className="w-8 h-8" strokeWidth={1.5} />
                </div>
                <h4 className={`font-bold text-[17px] mb-3 ${t.featureTitle}`}>{feature.title}</h4>
                <p className={`text-[14px] leading-relaxed max-w-[280px] ${t.featureDesc}`}>
                  {feature.description}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
