// components/sections/HighlightCards.tsx
// Two-card highlight section with icons, supports 3 themes
import React from 'react';
import Link from 'next/link';
import { getLinkAttributes, type LinkTarget, type LinkRel } from '@/lib/puck/linkHelpers';
import { resolveIcon } from '@/lib/puck/iconMap';

type ThemeKey = 'glass' | 'solid' | 'outlined' | 'ocean' | 'forest';

interface ThemeStyles {
  sectionBg: string;
  headlineColor: string;
  subtitleColor: string;
  dividerColor: string;
  card: string;
  cardHover: string;
  iconPanelBg1: string;
  iconPanelBg2: string;
  iconColor1: string;
  iconColor2: string;
  titleColor: string;
  descColor: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  glass: {
    sectionBg: 'bg-crimson-red',
    headlineColor: 'text-white',
    subtitleColor: 'text-white/90',
    dividerColor: 'bg-hover-red',
    card: 'bg-white/10 backdrop-blur-md border border-white/20 shadow-2xl',
    cardHover: 'hover:-translate-y-1 hover:bg-white/15',
    iconPanelBg1: 'bg-hover-red/80',
    iconPanelBg2: 'bg-[#D3DEDC]/80',
    iconColor1: 'text-white/90',
    iconColor2: 'text-[#2D3A45]/90',
    titleColor: 'text-white',
    descColor: 'text-white/80',
  },
  solid: {
    sectionBg: 'bg-slate-900',
    headlineColor: 'text-white',
    subtitleColor: 'text-slate-300',
    dividerColor: 'bg-amber-400',
    card: 'bg-slate-800 border border-slate-700 shadow-2xl',
    cardHover: 'hover:-translate-y-1 hover:bg-slate-750 hover:border-slate-600',
    iconPanelBg1: 'bg-gradient-to-br from-emerald-500 to-teal-600',
    iconPanelBg2: 'bg-gradient-to-br from-amber-400 to-orange-500',
    iconColor1: 'text-white',
    iconColor2: 'text-white',
    titleColor: 'text-white',
    descColor: 'text-slate-300',
  },
  outlined: {
    sectionBg: 'bg-gradient-to-br from-orange-500 via-red-500 to-pink-500',
    headlineColor: 'text-white',
    subtitleColor: 'text-white/90',
    dividerColor: 'bg-white/40',
    card: 'bg-white/10 backdrop-blur-md border-2 border-white/30 shadow-2xl',
    cardHover: 'hover:-translate-y-1 hover:bg-white/20 hover:border-white/50',
    iconPanelBg1: 'bg-white/20',
    iconPanelBg2: 'bg-white/20',
    iconColor1: 'text-white',
    iconColor2: 'text-white',
    titleColor: 'text-white',
    descColor: 'text-white/80',
  },
  ocean: {
    sectionBg: 'bg-gradient-to-br from-blue-600 to-indigo-700',
    headlineColor: 'text-white',
    subtitleColor: 'text-white/90',
    dividerColor: 'bg-cyan-300',
    card: 'bg-white/10 backdrop-blur-md border border-white/20 shadow-2xl',
    cardHover: 'hover:-translate-y-1 hover:bg-white/15',
    iconPanelBg1: 'bg-gradient-to-br from-blue-400 to-indigo-500',
    iconPanelBg2: 'bg-gradient-to-br from-cyan-400 to-blue-500',
    iconColor1: 'text-white',
    iconColor2: 'text-white',
    titleColor: 'text-white',
    descColor: 'text-white/80',
  },
  forest: {
    sectionBg: 'bg-gradient-to-br from-emerald-600 to-teal-700',
    headlineColor: 'text-white',
    subtitleColor: 'text-white/90',
    dividerColor: 'bg-green-300',
    card: 'bg-white/10 backdrop-blur-md border border-white/20 shadow-2xl',
    cardHover: 'hover:-translate-y-1 hover:bg-white/15',
    iconPanelBg1: 'bg-gradient-to-br from-emerald-400 to-teal-500',
    iconPanelBg2: 'bg-gradient-to-br from-green-400 to-emerald-500',
    iconColor1: 'text-white',
    iconColor2: 'text-white',
    titleColor: 'text-white',
    descColor: 'text-white/80',
  },
};

interface HighlightCardsProps {
  title?: string;
  subtitle?: string;
  card1Title?: string;
  card1Desc?: string;
  card1Href?: string;
  card1Icon?: string;
  card2Title?: string;
  card2Desc?: string;
  card2Href?: string;
  card2Icon?: string;
  theme?: ThemeKey;
  openInNewTab?: LinkTarget;
  relAttribute?: LinkRel;
}

export function HighlightCards({
  title = '',
  subtitle = '',
  card1Title = '',
  card1Desc = '',
  card1Href = '',
  card1Icon = 'line-chart',
  card2Title = '',
  card2Desc = '',
  card2Href = '',
  card2Icon = 'globe',
  theme = 'glass',
  openInNewTab = 'same',
  relAttribute = 'follow',
}: HighlightCardsProps) {
  const Card1Icon = resolveIcon(card1Icon);
  const Card2Icon = resolveIcon(card2Icon);
  const t = THEMES[theme] || THEMES.glass;
  const linkAttrs = getLinkAttributes({ openInNewTab, relAttribute });

  return (
    <section className={`w-full ${t.sectionBg} py-16 md:py-24 border-b border-white/10 overflow-hidden`}>
      <div className="container max-w-7xl mx-auto flex flex-col items-center px-4 sm:px-6 lg:px-8">
        <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-3xl 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 px-4 ${t.subtitleColor}`}>
              {subtitle}
            </p>
          )}
        </div>

        <div className="flex flex-col gap-8 md:gap-12 w-full px-4 mb-16">
          {/* Card 1 */}
          <Link href={card1Href || '#'} {...linkAttrs} className={`flex flex-col md:flex-row rounded-3xl overflow-hidden ${t.card} ${t.cardHover} transition-all duration-500 ease-out group cursor-pointer no-underline text-inherit`}>
            <div className={`w-full md:w-5/12 aspect-video md:aspect-auto ${t.iconPanelBg1} flex flex-col items-center justify-center p-8 relative overflow-hidden`}>
              <Card1Icon className={`w-16 h-16 md:w-20 md:h-20 ${t.iconColor1} z-10 group-hover:scale-110 transition-transform duration-500 ease-out drop-shadow-lg`} strokeWidth={1} />
            </div>
            <div className="w-full md:w-7/12 p-8 md:p-12 flex flex-col justify-center">
              <h3 className={`font-bold text-xl md:text-2xl leading-snug mb-4 ${t.titleColor}`}>
                {card1Title}
              </h3>
              <p className={`text-[14px] md:text-[15px] leading-relaxed ${t.descColor}`}>
                {card1Desc}
              </p>
            </div>
          </Link>

          {/* Card 2 */}
          <Link href={card2Href || '#'} {...linkAttrs} className={`flex flex-col md:flex-row-reverse rounded-3xl overflow-hidden ${t.card} ${t.cardHover} transition-all duration-500 ease-out group cursor-pointer no-underline text-inherit`}>
            <div className={`w-full md:w-5/12 aspect-video md:aspect-auto ${t.iconPanelBg2} flex flex-col items-center justify-center p-8 relative overflow-hidden`}>
              <Card2Icon className={`w-16 h-16 md:w-20 md:h-20 ${t.iconColor2} z-10 group-hover:scale-110 transition-transform duration-500 ease-out drop-shadow-lg`} strokeWidth={1} />
            </div>
            <div className="w-full md:w-7/12 p-8 md:p-12 flex flex-col justify-center">
              <h3 className={`font-bold text-xl md:text-2xl leading-snug mb-4 ${t.titleColor}`}>
                {card2Title}
              </h3>
              <p className={`text-[14px] md:text-[15px] leading-relaxed ${t.descColor}`}>
                {card2Desc}
              </p>
            </div>
          </Link>
        </div>
      </div>
    </section>
  );
}
