'use client';

import {BrandLogo} from '@/shared/components/brand/BrandLogo';
import {LoginCredentialsForm} from './LoginCredentialsForm';
import {LoginHeroPanel} from './LoginHeroPanel';

/**
 * The sign-in screen's frame: ambient background, the split card, and the two
 * halves that fill it.
 *
 * This file used to be 314 lines holding the photograph, the form, the fake
 * submit and the page chrome at once. It is now the composition only —
 * behaviour lives in useLoginForm, the form markup in LoginCredentialsForm,
 * the photograph in LoginHeroPanel — which is what makes each of them
 * separately readable and separately changeable.
 */
export function LoginSplit() {
  return (
    <div className="min-h-screen w-full relative flex items-center justify-center p-4 sm:p-6 lg:p-10 bg-[#050506] overflow-hidden selection:bg-white selection:text-black">
      {/* Premium Charcoal Radial Gradient (Center #17171C -> Mid #101015 -> Edges #050506) */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background: 'radial-gradient(ellipse 110% 110% at 50% 50%, #17171C 0%, #101015 55%, #050506 100%)',
        }}
      />

      {/* Soft Vignette Layer focusing vision on the center container */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background: 'radial-gradient(ellipse 80% 80% at 50% 50%, transparent 35%, rgba(5, 5, 6, 0.75) 100%)',
        }}
      />

      {/* Ultra-subtle High-Frequency Fine Grain Noise Overlay (1.8% Opacity) */}
      <div
        className="absolute inset-0 pointer-events-none opacity-[0.018] mix-blend-overlay"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
          backgroundRepeat: 'repeat',
        }}
      />

      <div className="w-full max-w-[1360px] min-h-[760px] lg:h-[82vh] lg:max-h-[840px] rounded-[24px] bg-[#14151B]/95 border border-white/[0.1] shadow-[0_40px_100px_-20px_rgba(0,0,0,0.85)] backdrop-blur-2xl flex flex-col md:flex-row overflow-hidden relative z-10">
        <LoginHeroPanel />

        <div className="w-full md:w-[60%] lg:w-[45%] h-full p-8 sm:p-10 lg:p-12 flex flex-col justify-between overflow-y-auto">
          <div className="flex items-center justify-between gap-4 mb-8">
            <div className="flex items-center gap-3">
              <BrandLogo height={42} priority />
              <div className="h-4 w-px bg-white/20" />
              <span className="text-xs font-semibold tracking-wide text-neutral-400 uppercase">
                Merchant OS
              </span>
            </div>
            <span className="px-2.5 py-0.5 text-[10px] font-semibold tracking-wider uppercase rounded-full bg-white/[0.06] border border-white/10 text-neutral-300">
              v2.4 Enterprise
            </span>
          </div>

          <div className="my-auto py-4">
            <div className="mb-8">
              <h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-white mb-2.5">
                Welcome back
              </h1>
              <p className="text-sm text-neutral-400 leading-relaxed max-w-md">
                Access your Merchant Operating System to manage stores, rewards,
                staff and AI insights.
              </p>
            </div>

            <LoginCredentialsForm />
          </div>

          <div className="pt-6 border-t border-white/[0.06] mt-4">
            <p className="text-xs text-neutral-400">
              Need access?{' '}
              <a href="#" className="text-white hover:underline font-medium">
                Contact your organization administrator.
              </a>
            </p>
          </div>
        </div>
      </div>

      <div className="absolute bottom-3 text-center w-full pointer-events-auto">
        <p className="text-[11px] text-neutral-500">
          By continuing, you agree to Loyaly&apos;s{' '}
          <a
            href="#"
            className="text-neutral-400 hover:text-white transition-colors underline"
          >
            Terms of Service
          </a>{' '}
          and{' '}
          <a
            href="#"
            className="text-neutral-400 hover:text-white transition-colors underline"
          >
            Privacy Policy
          </a>
          .
        </p>
      </div>
    </div>
  );
}
