import Image from 'next/image';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';

const MarbellaMilosBanner: React.FC = () => {
  const { t } = useTranslation(['locations', 'routes']);

  return (
    <section className="wrapper tw-relative tw-z-10">
      <Link
        href={`${t('routes:/development')}/torre-milos`}
        // Mantenemos exactamente el tamaño y altura que lograste y te gustó, y lo subimos
        // para que ~1/3 de esa altura quede sobrepuesto sobre el banner de Tampico
        className="tw-relative tw-block tw-w-full tw-h-[110px] sm:tw-h-[140px] md:tw-h-[170px] lg:tw-h-[200px] tw-overflow-hidden -tw-mt-[37px] sm:-tw-mt-[47px] md:-tw-mt-[57px] lg:-tw-mt-[67px]"
      >
        <Image
          src="/images/Marbella-Milos.png"
          alt="Marbella - Milos"
          fill
          // Cambiamos a 'contain' para que la imagen de 1920x300 se muestre completa
          // sin recortar los extremos ni verse gigante o cortada.
          style={{ objectFit: 'contain', objectPosition: 'center' }}
        />
        <div className="tw-absolute tw-inset-x-0 tw-bottom-0 tw-bg-gradient-to-t tw-from-black/70 tw-to-transparent tw-pt-8 tw-pb-1 tw-flex tw-items-center tw-justify-center tw-pointer-events-none">
          <p className="tw-text-white tw-font-ibm tw-uppercase tw-text-center tw-text-[10px] sm:tw-text-xs md:tw-text-sm lg:tw-text-base tw-font-semibold tw-px-4 tw-drop-shadow-md">
            {t('locations:marbellaMilos.text')}
          </p>
        </div>
      </Link>
    </section>
  );
};

export default MarbellaMilosBanner;