captive-portal-cms/components/HeroBanner.tsx

import { Portal } from '@/types';
import { withBasePath } from '@/lib/url';

export default function HeroBanner({ portal }: { portal: Partial<Portal> }) {
  const themeColor = portal?.themeColor || '#1e3a8a';
  const heroImageUrl = withBasePath(portal?.heroImageUrl);
  const logoUrl = withBasePath(portal?.logoUrl);

  return (
    <div 
      className="relative text-white text-center py-20 px-4 min-h-[40vh] flex flex-col justify-center"
      style={{ 
        backgroundImage: heroImageUrl ? `url(${heroImageUrl})` : 'none',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundColor: themeColor 
      }}
    >
       {/* Dynamic Overlay: Either a solid dark tint, or a fade into the theme color */}
       <div 
         className="absolute inset-0"
         style={{
           background: portal?.fadeHeroImage 
             ? `linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, ${themeColor} 100%)`
             : 'rgba(0,0,0,0.6)'
         }}
       ></div> 
       
       <div className="relative z-10 max-w-4xl mx-auto flex flex-col items-center">
         {logoUrl && (
           <img
             src={logoUrl}
             alt="Institution Logo"
             className="h-24 mb-6 object-contain"
           />
         )}
         <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 drop-shadow-md">
           {portal?.title || 'Welcome to the Network'}
         </h1>
         <div
           className="text-lg md:text-2xl drop-shadow-md font-light"
           dangerouslySetInnerHTML={{
             __html: portal?.welcomeText || 'Please contact administration to set up.',
           }}
         />
       </div>
    </div>
  );
}