helix-engage/src/pages/login.tsx

import { useState } from 'react';
import { useNavigate } from 'react-router';
import { useAuth } from '@/providers/auth-provider';
import { Button } from '@/components/base/buttons/button';
import { SocialButton } from '@/components/base/buttons/social-button';
import { Input } from '@/components/base/input/input';

const features = [
    {
        title: 'Unified Lead Inbox',
        description: 'All channels in one workspace',
    },
    {
        title: 'Campaign Intelligence',
        description: 'Real-time performance tracking',
    },
    {
        title: 'Speed to Contact',
        description: 'Automated assignment and outreach',
    },
];

type RoleTab = 'executive' | 'cc-agent' | 'admin';

export const LoginPage = () => {
    const { login, setRole } = useAuth();
    const navigate = useNavigate();

    const [activeTab, setActiveTab] = useState<RoleTab>('executive');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleTabChange = (tab: RoleTab) => {
        setActiveTab(tab);
        setRole(tab);
    };

    const handleSubmit = (event: React.FormEvent) => {
        event.preventDefault();
        login();
        navigate('/');
    };

    const handleGoogleSignIn = () => {
        login();
        navigate('/');
    };

    return (
        <div className="flex h-screen w-full overflow-hidden">
            {/* Left panel — 60% — hidden on mobile */}
            <div
                className="relative hidden lg:flex flex-col justify-center items-center bg-brand-section overflow-hidden"
                style={{ flex: '0 0 60%' }}
            >
                {/* Abstract corner gradients */}
                <div
                    className="pointer-events-none absolute -top-24 -left-24 size-[400px] rounded-full"
                    style={{
                        background:
                            'radial-gradient(circle, rgba(var(--color-brand-600-rgb, 99,102,241), 0.2) 0%, transparent 70%)',
                        filter: 'blur(200px)',
                    }}
                    aria-hidden="true"
                />
                <div
                    className="pointer-events-none absolute -bottom-24 -right-24 size-[400px] rounded-full"
                    style={{
                        background:
                            'radial-gradient(circle, rgba(var(--color-blue-light-600-rgb, 56,189,248), 0.2) 0%, transparent 70%)',
                        filter: 'blur(200px)',
                    }}
                    aria-hidden="true"
                />

                {/* Content */}
                <div className="relative z-10 flex flex-col gap-10 w-full max-w-[560px] px-12">
                    {/* Logo lockup */}
                    <div className="flex items-center gap-3">
                        <div className="flex items-center justify-center bg-brand-solid rounded-xl p-2 size-10 shrink-0">
                            <span className="text-white font-bold text-lg leading-none font-display">H</span>
                        </div>
                        <span className="text-white font-bold text-xl font-display tracking-tight">Helix Engage</span>
                    </div>

                    {/* Headline */}
                    <div className="flex flex-col gap-4">
                        <h1 className="text-display-md font-bold text-white tracking-tight font-display leading-tight">
                            Smarter lead management for healthcare teams.
                        </h1>
                        <p className="text-lg text-white/70">
                            Unified visibility into leads, campaigns, and team performance. Built for Global Hospital.
                        </p>
                    </div>

                    {/* Feature cards */}
                    <div className="flex flex-col gap-3">
                        {features.map((feature) => (
                            <div
                                key={feature.title}
                                className="flex flex-col gap-1 rounded-2xl p-4 backdrop-blur-sm"
                                style={{ background: 'rgba(255,255,255,0.05)' }}
                            >
                                <span className="text-sm font-semibold text-white">{feature.title}</span>
                                <span className="text-sm" style={{ color: 'rgba(255,255,255,0.6)' }}>{feature.description}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {/* Right panel — 40% on desktop, full width on mobile */}
            <div className="flex flex-1 flex-col justify-center items-center bg-primary px-6 py-12">
                <form
                    onSubmit={handleSubmit}
                    className="flex flex-col w-full max-w-[448px]"
                    noValidate
                >
                    {/* Heading */}
                    <h2 className="text-display-xs font-bold text-primary font-display">Sign in to Helix Engage</h2>
                    <p className="mt-1 text-sm text-tertiary">Global Hospital</p>

                    {/* Role selector tabs */}
                    <div
                        className="mt-8 flex items-center gap-1 rounded-xl p-1 bg-secondary"
                    >
                        {([
                            { key: 'executive' as const, label: 'Marketing Executive' },
                            { key: 'cc-agent' as const, label: 'Call Center' },
                            { key: 'admin' as const, label: 'Admin' },
                        ]).map((tab) => (
                            <button
                                key={tab.key}
                                type="button"
                                onClick={() => handleTabChange(tab.key)}
                                className={[
                                    'flex-1 rounded-lg px-3 py-2 text-sm font-semibold transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
                                    activeTab === tab.key
                                        ? 'bg-primary text-brand-secondary shadow-sm'
                                        : 'text-tertiary hover:text-secondary',
                                ].join(' ')}
                            >
                                {tab.label}
                            </button>
                        ))}
                    </div>

                    {/* Google sign-in */}
                    <div className="mt-6">
                        <SocialButton
                            social="google"
                            size="lg"
                            theme="gray"
                            type="button"
                            onClick={handleGoogleSignIn}
                            className="w-full rounded-xl py-3 border-2 border-secondary font-semibold hover:bg-secondary transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
                        >
                            Sign in with Google
                        </SocialButton>
                    </div>

                    {/* Divider */}
                    <div className="mt-6 flex items-center gap-3">
                        <div className="flex-1 h-px bg-secondary" />
                        <span className="text-xs font-semibold text-quaternary tracking-wider uppercase">or continue with</span>
                        <div className="flex-1 h-px bg-secondary" />
                    </div>

                    {/* Email input */}
                    <div className="mt-6">
                        <Input
                            label="Email"
                            type="email"
                            placeholder="sanjay@globalhospital.com"
                            value={email}
                            onChange={(value) => setEmail(value)}
                            size="md"
                        />
                    </div>

                    {/* Password input */}
                    <div className="mt-4">
                        <Input
                            label="Password"
                            type="password"
                            placeholder="Enter your password"
                            value={password}
                            onChange={(value) => setPassword(value)}
                            size="md"
                        />
                    </div>

                    {/* Sign in button */}
                    <div className="mt-6">
                        <Button
                            type="submit"
                            size="lg"
                            color="primary"
                            className="w-full rounded-xl py-3 font-semibold active:scale-[0.98] transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
                        >
                            Sign in
                        </Button>
                    </div>
                </form>
            </div>
        </div>
    );
};