frontend/src/components/Header.tsx

export function Header() {
  return (
    <div className="w-full bg-white">
      {/* Banner */}
      <div
        className="w-full h-24 bg-cover bg-center"
        style={{
          backgroundImage:
            "url('/banner.jpeg')",
        }}
      >
        <div className="w-full h-full bg-gradient-to-r from-blue-900/80 to-teal-900/80 flex items-center px-8">
          {/* Logo + Title */}
          <div className="flex items-center gap-4">
            <img
              src="/white_logo.png"
              alt="Manalife Logo"
              className="h-16 w-auto"
            />
            <h1 className="text-white text-2xl font-semibold tracking-wide">
              Manalife AI Pathology Assistant
            </h1>
          </div>
        </div>
      </div>

      {/* Disclaimer */}
      <div className="bg-blue-50 border-b border-blue-200 px-8 py-3">
        <h3 className="font-semibold text-blue-900 mb-1">Public Disclaimer</h3>
        <p className="text-sm text-blue-800">
          Manalife AI models are research prototypes developed to advance
          innovation in women's health and digital pathology. They are not
          certified medical devices and are not intended for direct diagnosis or
          treatment. Clinical validation and regulatory approval are required
          before any medical use.
        </p>
      </div>
    </div>
  );
}