han-app/figma/src/app/pages/AuthPhone.tsx

import { useState } from 'react';
import { useNavigate } from 'react-router';
import { ArrowRight } from 'lucide-react';
import { setAuthStatus } from '../data/session';

export function AuthPhone() {
  const navigate = useNavigate();
  const [phone, setPhone] = useState('');

  function formatPhone(raw: string) {
    const digits = raw.replace(/\D/g, '').slice(0, 11);
    if (digits.length === 0) return '';
    let result = '+7';
    if (digits.length > 1) result += ' (' + digits.slice(1, 4);
    if (digits.length >= 4) result += ') ' + digits.slice(4, 7);
    if (digits.length >= 7) result += ' ' + digits.slice(7, 9);
    if (digits.length >= 9) result += ' ' + digits.slice(9, 11);
    return result;
  }

  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
    const raw = e.target.value.replace(/\D/g, '');
    // Если начинается с 8, заменяем на 7
    const normalized = raw.startsWith('8') ? '7' + raw.slice(1) : raw.startsWith('7') ? raw : '7' + raw;
    setPhone(formatPhone(normalized));
  }

  const isValid = phone.replace(/\D/g, '').length === 11;

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (isValid) navigate('/auth/otp', { state: { phone } });
  }

  return (
    <div className="flex flex-col h-full bg-background">
      <div className="flex-1 flex flex-col justify-between px-6 pt-16 pb-8">
        {/* Верхняя часть */}
        <div className="flex-1 flex flex-col">
          {/* Логотип */}
          <div className="mb-12">
            <div className="flex items-end gap-1 mb-3">
              <span className="text-4xl font-bold tracking-tight text-foreground">HAN</span>
              <span className="w-2 h-2 rounded-full bg-primary mb-2" />
            </div>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Персональный консультант мигранта
            </p>
          </div>

          {/* Заголовок */}
          <div className="mb-8">
            <h1 className="text-2xl font-semibold text-foreground mb-2">
              Добро пожаловать
            </h1>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Введите номер телефона — отправим код подтверждения
            </p>
          </div>

          {/* Форма */}
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-1.5">
              <label className="text-sm font-medium text-foreground">Номер телефона</label>
              <div className="relative">
                <input
                  type="tel"
                  inputMode="numeric"
                  value={phone}
                  onChange={handleInput}
                  placeholder="+7 (___) ___ __ __"
                  className="w-full h-14 px-4 rounded-xl border border-border bg-input-background text-foreground text-base placeholder:text-muted-foreground/60 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50 transition-all"
                  autoComplete="tel"
                />
              </div>
              <p className="text-xs text-muted-foreground px-1">
                Россия · Код страны +7
              </p>
            </div>

            <button
              type="submit"
              disabled={!isValid}
              className="w-full h-14 bg-primary text-primary-foreground rounded-xl font-medium flex items-center justify-center gap-2.5 transition-all disabled:opacity-40 disabled:cursor-not-allowed hover:bg-primary/90 active:scale-[0.98]"
            >
              Получить код
              <ArrowRight className="w-4 h-4" />
            </button>
          </form>
        </div>

        {/* Низ страницы */}
        <div className="space-y-4 text-center">
          <button
            type="button"
            onClick={() => { setAuthStatus('guest'); navigate('/'); }}
            className="w-full text-sm text-muted-foreground hover:text-foreground transition-colors py-1"
          >
            Войти как гость
          </button>
          <p className="text-xs text-muted-foreground leading-relaxed">
            Нажимая «Получить код», вы соглашаетесь с{' '}
            <span className="text-foreground/70 underline underline-offset-2">условиями использования</span>
            {' '}и{' '}
            <span className="text-foreground/70 underline underline-offset-2">политикой конфиденциальности</span>
          </p>
        </div>
      </div>
    </div>
  );
}