'use client';

import React from 'react';
import Link from 'next/link';

interface SplitContentHeroProps {
  title?: string;
  subtitle?: string;
  buttonText?: string;
  buttonUrl?: string;
  image?: string;
  imagePosition?: string;
  theme?: string;
}

export function SplitContentHero({
  title = 'はじめての家づくりを、\n迷わず進めるために',
  subtitle = 'プロセス、コスト、デザインを、わかりやすいステップで学べます。',
  buttonText = 'まず何から始めるかを見る',
  buttonUrl = '#',
  image = '',
  imagePosition = 'right',
  theme = 'default',
}: SplitContentHeroProps) {
  const themeClasses: Record<string, { bg: string; text: string; sub: string; btn: string }> = {
    default: { bg: 'bg-white', text: 'text-white', sub: 'text-text-light-gray', btn: 'bg-crimson-red text-white hover:bg-crimson-red/90 shadow-lg' },
    warm: { bg: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', btn: 'bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg hover:shadow-xl' },
    professional: { bg: 'bg-slate-50', text: 'text-slate-800', sub: 'text-slate-500', btn: 'bg-slate-800 text-white hover:bg-slate-700 shadow-lg' },
    ocean: { bg: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', btn: 'bg-blue-600 text-white hover:bg-blue-700 shadow-lg' },
    forest: { bg: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', btn: 'bg-emerald-600 text-white hover:bg-emerald-700 shadow-lg' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  const textBlock = (
    <div className="flex flex-col justify-center">
      <h2 className={`text-2xl sm:text-3xl md:text-4xl font-bold leading-tight mb-4 whitespace-pre-line ${t.text}`}>
        {title}
      </h2>
      {subtitle && (
        <p className={`text-sm sm:text-base leading-relaxed mb-6 max-w-md ${t.sub}`}>
          {subtitle}
        </p>
      )}
      {buttonText && (
        <Link
          href={buttonUrl || '#'}
          className={`inline-flex items-center gap-2 px-7 py-3.5 rounded-xl font-semibold text-sm transition-all duration-200 w-fit ${t.btn}`}
        >
          {buttonText}
        </Link>
      )}
    </div>
  );

  const imageBlock = (
    <div className="flex items-center justify-center">
      {image ? (
        <img
          src={image}
          alt=""
          className="rounded-2xl shadow-lg object-cover w-full max-h-[400px]"
        />
      ) : (
        <div className="aspect-[4/3] w-full rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400 text-sm">
          📷 画像を追加してください
        </div>
      )}
    </div>
  );

  return (
    <section className={`w-full py-12 md:py-16 ${t.bg}`}>
      <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-8 md:gap-12 items-center">
          {imagePosition === 'left' ? (
            <>
              {imageBlock}
              {textBlock}
            </>
          ) : (
            <>
              {textBlock}
              {imageBlock}
            </>
          )}
        </div>
      </div>
    </section>
  );
}
