// components/sections/IntroSection.tsx
// Intro content block with title, subtitle, body, and CTA
// 5 themes
import React from 'react';
import Link from 'next/link';
import { getLinkAttributes, type LinkTarget, type LinkRel } from '@/lib/puck/linkHelpers';
import { ArrowRight } from 'lucide-react';

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

interface ThemeStyles {
  sectionBg: string;
  headingColor: string;
  dividerColor: string;
  subtitleColor: string;
  bodyColor: string;
  ctaBtn: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    sectionBg: 'bg-white',
    headingColor: 'text-white',
    dividerColor: 'bg-crimson-red',
    subtitleColor: 'text-white/70',
    bodyColor: 'text-white/80',
    ctaBtn: 'bg-hover-red hover:bg-crimson-red text-white shadow hover:shadow-lg',
  },
  warm: {
    sectionBg: 'bg-white',
    headingColor: 'text-slate-800',
    dividerColor: 'bg-orange-500',
    subtitleColor: 'text-slate-600',
    bodyColor: 'text-slate-600',
    ctaBtn: 'bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white shadow-lg shadow-orange-500/20',
  },
  professional: {
    sectionBg: 'bg-slate-50',
    headingColor: 'text-slate-800',
    dividerColor: 'bg-amber-400',
    subtitleColor: 'text-slate-500',
    bodyColor: 'text-slate-500',
    ctaBtn: 'bg-slate-800 hover:bg-slate-700 text-white shadow-lg',
  },
  ocean: {
    sectionBg: 'bg-white',
    headingColor: 'text-slate-800',
    dividerColor: 'bg-blue-500',
    subtitleColor: 'text-slate-600',
    bodyColor: 'text-slate-600',
    ctaBtn: 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg shadow-blue-600/20',
  },
  forest: {
    sectionBg: 'bg-white',
    headingColor: 'text-slate-800',
    dividerColor: 'bg-emerald-500',
    subtitleColor: 'text-slate-600',
    bodyColor: 'text-slate-600',
    ctaBtn: 'bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white shadow-lg shadow-emerald-600/20',
  },
};

interface IntroSectionProps {
  title?: string;
  subtitle?: string;
  body?: string;
  ctaText?: string;
  ctaHref?: string;
  showDivider?: boolean;
  theme?: ThemeKey;
  openInNewTab?: LinkTarget;
  relAttribute?: LinkRel;
}

export function IntroSection({
  title = '正しいお金の知識と賢い意思決定力を育む',
  subtitle = '',
  body = '',
  ctaText = '最新記事で学ぶ',
  ctaHref = '/category/最新記事',
  showDivider = true,
  theme = 'default',
  openInNewTab = 'same',
  relAttribute = 'follow',
}: IntroSectionProps) {
  const t = THEMES[theme] || THEMES.default;
  const linkAttrs = getLinkAttributes({ openInNewTab, relAttribute });

  return (
    <section className={`w-full ${t.sectionBg} py-16 md:py-24 border-b border-soft-gray-border/20`}>
      <div className="container max-w-4xl mx-auto flex flex-col items-center text-center animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out fill-mode-both">
        <h2 className={`text-2xl md:text-3xl lg:text-4xl font-bold leading-snug tracking-tight mb-4 ${t.headingColor}`}>
          {title}
        </h2>
        {showDivider !== false && (
          <div className={`w-12 h-[3px] ${t.dividerColor} mx-auto mb-8 rounded-full`} />
        )}
        {subtitle && (
          <p className={`text-[15px] md:text-base font-medium leading-relaxed max-w-2xl mb-12 px-4 ${t.subtitleColor}`}>
            {subtitle}
          </p>
        )}
        {body && (
          <p className={`text-[14px] md:text-[15px] leading-[2] md:leading-[2.2] max-w-3xl mb-12 text-justify md:text-center px-4 ${t.bodyColor}`}>
            {body}
          </p>
        )}
        {ctaText && (
          <Link
            href={ctaHref || '#'}
            {...linkAttrs}
            className={`inline-flex items-center gap-2 font-bold text-sm md:text-base py-4 px-10 rounded-full transition-all duration-300 hover:-translate-y-1 ${t.ctaBtn}`}
          >
            {ctaText}
            <ArrowRight className="w-5 h-5" />
          </Link>
        )}
      </div>
    </section>
  );
}
