'use client';

import {useState} from 'react';
import Image from 'next/image';
import {BrandMark} from '@/shared/components/brand/BrandLogo';

const HERO_IMAGE_URL =
  'https://images.unsplash.com/photo-1556742049-0a670fc8078a?q=80&w=1400&auto=format&fit=crop';
const HERO_FALLBACK_URL =
  'https://images.unsplash.com/photo-1441986300917-64674bd600d8?q=80&w=1400&auto=format&fit=crop';

/**
 * The left half of the sign-in screen: photography, scrim, brand watermark.
 *
 * Split from LoginSplit purely so that neither file has to be read to change
 * the other — this one is entirely decorative and holds the only piece of
 * state on the screen that has nothing to do with signing in (the image
 * fallback), while the form half holds all the behaviour.
 *
 * Hidden below `md`, where the photograph would push the form off the fold.
 */
export function LoginHeroPanel() {
  const [heroSrc, setHeroSrc] = useState(HERO_IMAGE_URL);

  return (
    <div className="hidden md:flex md:w-[40%] lg:w-[55%] h-full p-3 relative">
      <div className="w-full h-full rounded-[20px] overflow-hidden relative border border-white/10 bg-[#090A0E]">
        <Image
          src={heroSrc}
          alt=""
          fill
          priority
          sizes="(max-width: 768px) 0vw, (max-width: 1024px) 40vw, 55vw"
          className="object-cover object-center"
          // Unsplash is a third party; a dead URL must degrade to the other
          // photograph rather than to an empty black panel.
          onError={() => setHeroSrc(HERO_FALLBACK_URL)}
        />

        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent pointer-events-none" />
        <div className="absolute inset-0 bg-gradient-to-l from-[#0E0E10]/70 via-transparent to-transparent pointer-events-none" />

        <div className="absolute bottom-6 left-6 flex items-center gap-2.5 px-3.5 py-2 rounded-xl bg-black/50 backdrop-blur-md border border-white/10 text-white/80">
          <BrandMark size={16} priority />
          <span className="text-[11px] font-medium tracking-wide text-neutral-300">
            Loyaly.ai · Merchant Operating System
          </span>
        </div>
      </div>
    </div>
  );
}
