Login

'use client';

import {
	Button,
	Heading,
	IconButton,
	Text,
	TextLink,
} from '@adaptavant/eds-core';
import { PhoneIcon } from '@adaptavant/eds-icons/icons';
import { SetmoreLogo } from '@adaptavant/eds-icons/logos';
import {
	AppleColorIcon,
	FacebookColorIcon,
	GoogleColorIcon,
	MicrosoftColorIcon,
} from '@adaptavant/eds-icons/symbols';

const SOCIAL_PROVIDERS = [
	{ label: 'Google', icon: GoogleColorIcon },
	{ label: 'Apple', icon: AppleColorIcon },
	{ label: 'Microsoft', icon: MicrosoftColorIcon },
	{ label: 'Facebook', icon: FacebookColorIcon },
];

/**
 * A login card pinned to the start of a full-bleed background. The card holds
 * the brand header, the sign-in options, and the legal footer.
 */
export default function LoginTemplate() {
	return (
		<div className="flex min-h-screen bg-inverse p-4 md:p-8">
			<main className="flex w-full max-w-[520px] flex-col gap-10 rounded-16px bg-canvas px-6 py-10 md:px-10">
				<header className="flex flex-wrap items-center justify-between gap-4">
					<SetmoreLogo
						aria-hidden={false}
						// The logo hard-codes a dark fill; the icon token follows the theme.
						className="h-10 w-auto [&_path]:fill-primary"
					/>
					<div className="flex items-center gap-2">
						<PhoneIcon size="20" />
						<Text className="text-body-14">Call 24/7</Text>
						<TextLink className="text-body-14" href="tel:+18007494920">
							+1 800-749-4920
						</TextLink>
					</div>
				</header>

				{/* my-auto centres the sign-in block between header and footer. */}
				<section className="my-auto flex flex-col gap-6">
					<Heading as="h1" className="text-heading-28">
						Login
					</Heading>
					<div className="grid grid-cols-4 gap-3">
						{SOCIAL_PROVIDERS.map(({ label, icon }) => (
							<IconButton
								aria-label={`Login with ${label}`}
								className="w-full"
								icon={icon}
								key={label}
								size="large"
								variant="neutralSecondary"
							/>
						))}
					</div>
					<div className="flex items-center justify-center gap-3">
						<span className="w-8 border-t border-solid border-tertiary" />
						<Text className="text-body-14 text-secondary">or</Text>
						<span className="w-8 border-t border-solid border-tertiary" />
					</div>
					<Button size="xLarge" variant="neutralSecondary">
						Login with email
					</Button>
					<Text className="text-center text-body-14 text-secondary">
						New user? <TextLink href="#">Create an account</TextLink>
					</Text>
				</section>

				<footer className="flex flex-col gap-3">
					<Text className="text-body-12 text-secondary">
						By logging in, you agree to our{' '}
						<TextLink href="#" variant="neutralSecondary">
							Terms of Use
						</TextLink>{' '}
						&amp;{' '}
						<TextLink href="#" variant="neutralSecondary">
							Privacy Policy
						</TextLink>
					</Text>
					<Text className="text-body-12 text-secondary">
						©2026 Setmore. All Rights Reserved.
					</Text>
				</footer>
			</main>
		</div>
	);
}