// components/sections/StepsTimeline.tsx
// Vertical timeline with alternating steps, 5 themes
import React from 'react';

type ThemeKey = 'default' | 'warm' | 'professional' | 'ocean' | 'forest';

interface ThemeStyles {
  sectionBg: string;
  dividerColor: string;
  headlineColor: string;
  subtitleColor: string;
  titleColor: string;
  titleHover: string;
  descColor: string;
  circleBorder: string;
  circleText: string;
  circleBg: string;
  timelineLine: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    sectionBg: 'bg-white',
    dividerColor: 'bg-crimson-red',
    headlineColor: 'text-white',
    subtitleColor: 'text-text-light-gray',
    titleColor: 'text-white',
    titleHover: 'group-hover:text-hover-red',
    descColor: 'text-text-light-gray',
    circleBorder: 'border-crimson-red',
    circleText: 'text-crimson-red',
    circleBg: 'bg-white',
    timelineLine: 'bg-soft-dark/50',
  },
  warm: {
    sectionBg: 'bg-white',
    dividerColor: 'bg-orange-500',
    headlineColor: 'text-slate-800',
    subtitleColor: 'text-slate-600',
    titleColor: 'text-slate-800',
    titleHover: 'group-hover:text-orange-600',
    descColor: 'text-slate-600',
    circleBorder: 'border-orange-500',
    circleText: 'text-orange-500',
    circleBg: 'bg-white',
    timelineLine: 'bg-orange-200',
  },
  professional: {
    sectionBg: 'bg-slate-50',
    dividerColor: 'bg-amber-400',
    headlineColor: 'text-slate-800',
    subtitleColor: 'text-slate-500',
    titleColor: 'text-slate-800',
    titleHover: 'group-hover:text-slate-600',
    descColor: 'text-slate-500',
    circleBorder: 'border-slate-800',
    circleText: 'text-slate-800',
    circleBg: 'bg-white',
    timelineLine: 'bg-slate-200',
  },
  ocean: {
    sectionBg: 'bg-white',
    dividerColor: 'bg-blue-500',
    headlineColor: 'text-slate-800',
    subtitleColor: 'text-slate-600',
    titleColor: 'text-slate-800',
    titleHover: 'group-hover:text-blue-600',
    descColor: 'text-slate-600',
    circleBorder: 'border-blue-600',
    circleText: 'text-blue-600',
    circleBg: 'bg-white',
    timelineLine: 'bg-blue-200',
  },
  forest: {
    sectionBg: 'bg-white',
    dividerColor: 'bg-emerald-500',
    headlineColor: 'text-slate-800',
    subtitleColor: 'text-slate-600',
    titleColor: 'text-slate-800',
    titleHover: 'group-hover:text-emerald-600',
    descColor: 'text-slate-600',
    circleBorder: 'border-emerald-600',
    circleText: 'text-emerald-600',
    circleBg: 'bg-white',
    timelineLine: 'bg-emerald-200',
  },
};

interface StepItem {
  title: string;
  description: string;
}

interface StepsTimelineProps {
  title?: string;
  subtitle?: string;
  steps?: StepItem[];
  theme?: ThemeKey;
}

const DEFAULT_STEPS: StepItem[] = [
  {
    title: '学ぶ・情報収集',
    description: 'まずは本サイトの教育コンテンツで、入金不要ボーナスの活用法や基本的な経済用語を学びましょう。基礎固めがリスクを最小限に抑えます。',
  },
  {
    title: '口座開設・ボーナス獲得',
    description: '知識が身についたら、実際に証券口座や投資口座を開設します。初心者向けの入金不要ボーナスを提供するサービスを選べば、手出しゼロで実践の感覚を掴めます。',
  },
  {
    title: '運用スタート・複利の力',
    description: '少額から運用をスタートさせます。長期間続けることで複利の力が働き、あなたのライフプランを支える強固な資産へと成長していきます。',
  },
];

export function StepsTimeline({
  title = '資産形成を始める3ステップ',
  subtitle = '難しそうに見える投資や運用も、順序立てて学べば誰でも実践することができます。',
  steps = DEFAULT_STEPS,
  theme = 'default',
}: StepsTimelineProps) {
  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-7xl mx-auto flex flex-col items-center px-4">
        <div className="text-center mb-16 md:mb-24 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`} />
          {subtitle && (
            <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">
          <div className={`absolute left-[28px] md:left-1/2 -translate-x-1/2 top-0 bottom-0 w-[2px] ${t.timelineLine}`} />
          <div className="flex flex-col gap-12 md:gap-24">
            {steps.map((step, idx) => {
              const isEven = idx % 2 === 0;
              return (
                <div key={idx} className={`relative flex flex-col ${isEven ? 'md:flex-row' : 'md:flex-row-reverse'} items-start md:items-center w-full group`}>
                  <div className={`md:w-1/2 w-full ${isEven ? 'md:pr-16 pl-20 md:pl-0 md:text-right' : 'md:pl-16 pl-20 md:pr-0 md:text-left'} flex flex-col`}>
                    <h3 className={`text-xl font-bold mb-3 transition-colors ${t.titleColor} ${t.titleHover}`}>
                      {step.title}
                    </h3>
                    <p className={`text-[14.5px] leading-relaxed ${t.descColor}`}>
                      {step.description}
                    </p>
                  </div>
                  <div className={`absolute left-[28px] md:left-1/2 top-0 md:top-1/2 -translate-x-1/2 md:-translate-y-1/2 w-14 h-14 ${t.circleBg} border-[3px] ${t.circleBorder} rounded-full shadow-lg flex flex-col items-center justify-center z-10 group-hover:scale-110 transition-transform duration-300`}>
                    <span className={`text-[10px] font-bold leading-none mb-0.5 ${t.circleText}`}>STEP</span>
                    <span className={`text-xl font-black leading-none ${t.circleText}`}>{idx + 1}</span>
                  </div>
                  <div className="md:w-1/2 hidden md:block" />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}
