src/components/Footer.tsx

import React from 'react'

type Props = {
  compact?: boolean
}

export function Footer({ compact = false }: Props) {
  const heightClass = compact ? 'h-12 md:h-14 lg:h-16' : 'h-16 md:h-20 lg:h-24'

  return (
    <footer className={`relative w-full ${heightClass} overflow-hidden`}>
      {/* Background image – untouched */}
      <img
        src="/banner.jpeg"
        alt="Footer background"
        className="absolute inset-0 w-full h-full object-cover"
      />

      {/* Content */}
      <div className="relative z-10 h-full flex items-center justify-center text-white text-xs px-3 md:px-4">
        {/* Center Text */}
        <div className="text-center leading-tight">
          <div className="text-xs md:text-sm">© 2025 Manalife. All rights reserved.</div>
          <div className="text-xs hidden md:block">
            Advancing innovation in women's health and digital pathology.
          </div>
        </div>

        {/* Logo Bottom Right */}
        <div className="absolute right-2 md:right-3 lg:right-4 bottom-1 md:bottom-2">
          <img
            src="/white_logo.png"
            alt="Manalife logo"
            className={compact ? 'h-5 md:h-6 lg:h-6' : 'h-6 md:h-7 lg:h-8'}
          />
        </div>
      </div>
    </footer>
  )
}