import { PixelGrid } from '../../workspaces/components/PixelGrid';
import { DuckAvatar } from './DuckAvatar';
import { WaitlistForm } from './WaitlistForm';

const landscapeBg = '/landscape1.webp';
const logoSrc = '/officer-logo.svg';

export const App = () => {
  return (
    <div className="relative overflow-hidden h-dvh outline-none inset-0">
      {/* Background */}
      <div
        className="absolute inset-0 z-0"
        style={{
          backgroundImage: `url(${landscapeBg})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center center',
        }}
      >
        <PixelGrid />
        <DuckAvatar />
      </div>

      {/* Logo */}
      <header className="pt-12 md:pt-20 lg:pt-24 xl:pt-0 z-20 flex justify-center">
        <div className="hidden md:block md:pt-28">
          <img
            src={logoSrc}
            alt="Officer Logo"
            style={{ width: '1500px', height: 'auto', transform: 'skew(-15deg, -2deg)' }}
          />
        </div>
        <div className="block md:hidden">
          <img
            src={logoSrc}
            alt="Officer Logo"
            style={{ width: '900px', height: 'auto', transform: 'skew(-15deg, -2deg)' }}
          />
        </div>
      </header>

      {/* Waitlist form */}
      <div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-18 md:pb-30">
        <WaitlistForm />
      </div>
    </div>
  );
};
