// components/sections/LibHeroSection.tsx
// Full-width hero banner with tagline, title, subtitle, bg video/image
// 5 themes: default, warm, professional, ocean, forest
import React from 'react';

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

interface ThemeStyles {
  fallbackBg: string;
  taglineColor: string;
  waveFill: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    fallbackBg: 'bg-crimson-red',
    taglineColor: 'text-white/90',
    waveFill: 'fill-brand-bg',
  },
  warm: {
    fallbackBg: 'bg-gradient-to-br from-orange-600 to-red-700',
    taglineColor: 'text-orange-200',
    waveFill: 'fill-white',
  },
  professional: {
    fallbackBg: 'bg-gradient-to-br from-slate-800 to-slate-900',
    taglineColor: 'text-amber-300/90',
    waveFill: 'fill-slate-50',
  },
  ocean: {
    fallbackBg: 'bg-gradient-to-br from-blue-700 to-indigo-800',
    taglineColor: 'text-cyan-200',
    waveFill: 'fill-blue-50',
  },
  forest: {
    fallbackBg: 'bg-gradient-to-br from-emerald-700 to-teal-800',
    taglineColor: 'text-green-200',
    waveFill: 'fill-emerald-50',
  },
};

interface LibHeroSectionProps {
  tagline?: string;
  title?: string;
  subtitle?: string;
  bgVideo?: string;
  bgImage?: string;
  mediaType?: 'video' | 'image';
  overlayOpacity?: number;
  showScrollIndicator?: boolean;
  bgColor?: string;
  bgGradientFrom?: string;
  bgGradientTo?: string;
  bgGradientDirection?: string;
  buttonText?: string;
  buttonUrl?: string;
  buttonStyle?: string;
  theme?: ThemeKey;
}

export function LibHeroSection({
  tagline = '金融リテラシーを高める',
  title = 'グローバルマネーウィーク2025へようこそ',
  subtitle = '正しいお金の知識と賢い意思決定力を育てる、日本最大級の金融教育プラットフォーム。',
  bgVideo = '',
  bgImage = '',
  mediaType = 'video',
  overlayOpacity = 40,
  showScrollIndicator = true,
  bgColor = '',
  bgGradientFrom = '',
  bgGradientTo = '',
  bgGradientDirection = 'to-br',
  buttonText = '',
  buttonUrl = '',
  buttonStyle = 'filled',
  theme = 'default',
}: LibHeroSectionProps) {
  const t = THEMES[theme] || THEMES.default;

  // Background priority: video > image > gradient > solid > theme fallback
  const hasMedia = (mediaType === 'video' && bgVideo) || bgImage;
  const hasGradient = bgGradientFrom && bgGradientTo;
  const hasSolid = bgColor;
  const customBgStyle: React.CSSProperties = !hasMedia
    ? hasGradient
      ? { background: `linear-gradient(${bgGradientDirection === 'to-r' ? 'to right' : bgGradientDirection === 'to-b' ? 'to bottom' : bgGradientDirection === 'to-bl' ? 'to bottom left' : bgGradientDirection === 'to-t' ? 'to top' : 'to bottom right'}, ${bgGradientFrom}, ${bgGradientTo})` }
      : hasSolid
        ? { backgroundColor: bgColor }
        : {}
    : {};
  const useFallbackBg = !hasMedia && !hasGradient && !hasSolid;

  const btnStyles: Record<string, string> = {
    filled: 'bg-white text-slate-900 hover:bg-white/90 shadow-lg',
    outlined: 'border-2 border-white text-white hover:bg-white/10',
    ghost: 'text-white hover:bg-white/10 underline underline-offset-4',
  };

  return (
    <div className={`relative w-full h-[100svh] ${useFallbackBg ? t.fallbackBg : ''} text-white text-center overflow-hidden`} style={customBgStyle}>
      {/* Background media */}
      <div className="absolute inset-0 w-full h-full bg-slate-900 z-0">
        {mediaType === 'video' && bgVideo ? (
          <video
            autoPlay
            loop
            muted
            playsInline
            className="w-full h-full object-cover pointer-events-none"
            src={bgVideo}
          />
        ) : (
          bgImage && (
            <img
              src={bgImage || bgVideo}
              alt="Hero background"
              className="w-full h-full object-cover"
            />
          )
        )}
      </div>

      {/* Dark Overlay */}
      <div className="absolute inset-0 z-10" style={{ backgroundColor: `rgba(0, 0, 0, ${(overlayOpacity ?? 40) / 100})` }} />

      {/* Hero Text */}
      <div className="container mx-auto relative z-20 flex flex-col items-center justify-center h-full pb-16">
        {tagline && (
          <p className={`text-sm md:text-base font-bold tracking-[0.2em] ${t.taglineColor} mb-4 drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]`}>
            {tagline}
          </p>
        )}
        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold drop-shadow-[0_4px_8px_rgba(0,0,0,0.7)] tracking-tight leading-tight">
          {title}
        </h1>
        {subtitle && (
          <p className="max-w-2xl text-white/90 mt-6 text-sm md:text-lg leading-relaxed drop-shadow-md">
            {subtitle}
          </p>
        )}

        {/* CTA Button */}
        {buttonText && (
          <a
            href={buttonUrl || '#'}
            className={`mt-8 inline-flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm transition-all duration-200 ${btnStyles[buttonStyle] || btnStyles.filled}`}
          >
            {buttonText}
          </a>
        )}

        {/* Scroll Down chevron */}
        {showScrollIndicator !== false && (
        <div className="absolute bottom-24 left-1/2 -translate-x-1/2 flex flex-col items-center animate-bounce text-white/70">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
          <span className="text-[10px] uppercase tracking-widest mt-1">Scroll</span>
        </div>
        )}
      </div>

      {/* Wave divider */}
      <div className="absolute -bottom-1 left-0 w-full leading-none z-30 pointer-events-none">
        <svg className="relative block w-full h-[50px] md:h-[80px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
          <path d="M0,0 C300,100 900,100 1200,0 L1200,120 L0,120 Z" className={t.waveFill} />
        </svg>
      </div>
    </div>
  );
}
