import React from 'react';
import { invertHex } from '@site/src/components/ui-shared/utils';
import { useColorMode } from '@site/src/components/ui-shared/use-color-mode';

interface IntroductionCardProps {
  title: string;
  header?: string;
  content: string;
  backgroundColor: string;
  className?: string;
}

export const IntroductionCard: React.FC<IntroductionCardProps> = ({ 
  title, 
  header, 
  content, 
  backgroundColor,
  className = '' 
}) => {
  const colorMode = useColorMode();
  
  // More subtle background colors with better contrast
  const cardBgColor = colorMode === 'dark' 
    ? `${invertHex(backgroundColor)}15` // Very subtle tint
    : `${backgroundColor}40`; // Reduced opacity for subtlety
  const textColor = colorMode === 'dark' ? '#f1f5f9' : '#0f172a';
  const headerColor = colorMode === 'dark' ? '#94a3b8' : '#475569';

  return (
    <article
      className={`group relative flex-1 min-w-0 transition-all duration-200 ease-out hover:scale-[1.01] focus-within:scale-[1.01] ${className}`}
      style={{
        minWidth: '280px',
      }}
      role="article"
      aria-labelledby={`card-title-${title.toLowerCase().replace(/\s+/g, '-')}`}
    >
      {/* Card container with modern styling */}
      <div
        className="relative h-full overflow-hidden"
        style={{
          backgroundColor: cardBgColor,
          borderRadius: '12px',
          border: colorMode === 'dark' 
            ? '1px solid rgba(255, 255, 255, 0.08)' 
            : '1px solid rgba(0, 0, 0, 0.08)',
          boxShadow: colorMode === 'dark'
            ? '0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.1)'
            : '0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04)',
        }}
      >
        {/* Subtle gradient overlay for depth */}
        <div 
          className="absolute inset-0 opacity-30"
          style={{
            background: colorMode === 'dark'
              ? 'linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%)'
              : 'linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%)',
          }}
        />
        
        {/* Content container */}
        <div className="relative z-10 p-4 sm:p-5 h-full flex flex-col">
          {/* Title */}
          <h2
            id={`card-title-${title.toLowerCase().replace(/\s+/g, '-')}`}
            className="text-base sm:text-lg font-semibold leading-tight mb-2 text-center"
            style={{ 
              color: textColor,
              fontWeight: '600',
              letterSpacing: '-0.015em',
            }}
          >
            {title}
          </h2>
          
          {/* Header/Subtitle */}
          {header && (
            <div className="mb-3">
              <h3
                className="text-xs sm:text-sm font-medium italic text-center leading-snug"
                style={{ 
                  color: headerColor,
                  fontWeight: '500',
                }}
              >
                {header}
              </h3>
            </div>
          )}
          
          {/* Content */}
          <div className="flex-1 flex items-center justify-center">
            <p
              className="text-xs sm:text-sm leading-relaxed text-center max-w-none"
              style={{ 
                color: textColor,
                lineHeight: '1.5',
                opacity: 0.85,
              }}
            >
              {content}
            </p>
          </div>
        </div>
        
        {/* Hover effect border */}
        <div 
          className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-60 transition-opacity duration-200 pointer-events-none"
          style={{
            border: '1px solid rgba(59, 130, 246, 0.2)',
          }}
        />
      </div>
    </article>
  );
};
