// src/app/page.tsx
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import Image from 'next/image'

export default function HomePage() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)
  const router = useRouter()

  const handleQuickStart = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email) return

    setLoading(true)
    
    // Сохраняем email в локальном хранилище для автозаполнения формы регистрации
    localStorage.setItem('quickStartEmail', email)
    
    // Перенаправляем на страницу регистрации
    router.push('/auth/register')
  }

  return (
    <>
      <header
        className="text-center text-white masthead position-relative"
        style={{
          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
          minHeight: '100vh',
          display: 'flex',
          alignItems: 'center'
        }}
      >
        <div className="container py-5">
          <div className="row">
            <div className="col-xl-10 mx-auto">
              <div className="mb-4">
                <Image
                  src="/assets/img/CAT.png"
                  alt="CatLink"
                  width={120}
                  height={120}
                  className="mb-4"
                />
              </div>
              <h1 className="display-4 fw-bold mb-4">
                Ваши ссылки. Ваш стиль. Ваш CatLink.
              </h1>
              <p className="lead mb-5 fs-4">
                Создайте красивую персональную страницу со всеми важными ссылками в одном месте. 
                Делитесь профессионально и стильно!
              </p>
            </div>
            <div className="col-md-10 col-lg-8 col-xl-6 mx-auto">
              <form onSubmit={handleQuickStart} className="d-flex flex-column flex-sm-row gap-3">
                <input
                  className="form-control form-control-lg"
                  type="email"
                  placeholder="Введите ваш email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
                <button 
                  className="btn btn-warning btn-lg px-4 fw-bold" 
                  type="submit"
                  disabled={loading}
                  style={{ minWidth: '140px' }}
                >
                  {loading ? (
                    <span className="spinner-border spinner-border-sm"></span>
                  ) : (
                    'Начать бесплатно'
                  )}
                </button>
              </form>
              <div className="mt-3">
                <small className="text-white-50">
                  Уже есть аккаунт? <Link href="/auth/login" className="text-warning text-decoration-none fw-bold">Войти</Link>
                </small>
              </div>
            </div>
          </div>
          
          {/* Анимированная стрелка вниз */}
          <div className="position-absolute bottom-0 start-50 translate-middle-x mb-4">
            <div className="animate-bounce">
              <i className="bi bi-chevron-down text-white fs-3"></i>
            </div>
          </div>
        </div>
      </header>

      {/* Преимущества */}
      <section className="py-5 bg-light">
        <div className="container">
          <div className="row text-center mb-5">
            <div className="col-lg-8 mx-auto">
              <h2 className="display-5 fw-bold mb-3">Почему выбирают CatLink?</h2>
              <p className="lead text-muted">
                Простой и мощный инструмент для создания вашего цифрового присутствия
              </p>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-4 mb-4">
              <div className="text-center h-100">
                <div className="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style={{ width: '80px', height: '80px' }}>
                  <i className="bi bi-link-45deg text-white fs-1"></i>
                </div>
                <h4 className="fw-bold">Один URL — все ссылки</h4>
                <p className="text-muted">
                  Соберите все важные ссылки в одном месте. Социальные сети, портфолио, 
                  контакты — всё под одним адресом.
                </p>
              </div>
            </div>
            <div className="col-lg-4 mb-4">
              <div className="text-center h-100">
                <div className="bg-success rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style={{ width: '80px', height: '80px' }}>
                  <i className="bi bi-palette text-white fs-1"></i>
                </div>
                <h4 className="fw-bold">Персонализация</h4>
                <p className="text-muted">
                  Настройте цвета, шрифты, макеты. Создайте уникальный стиль, 
                  который отражает вашу личность или бренд.
                </p>
              </div>
            </div>
            <div className="col-lg-4 mb-4">
              <div className="text-center h-100">
                <div className="bg-warning rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style={{ width: '80px', height: '80px' }}>
                  <i className="bi bi-graph-up text-white fs-1"></i>
                </div>
                <h4 className="fw-bold">Аналитика</h4>
                <p className="text-muted">
                  Отслеживайте клики, популярность ссылок и активность посетителей. 
                  Понимайте свою аудиторию лучше.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Примеры использования */}
      <section className="py-5">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-6 mb-4">
              <h2 className="display-6 fw-bold mb-4">Для всех и каждого</h2>
              <div className="row">
                <div className="col-sm-6 mb-3">
                  <div className="d-flex align-items-start">
                    <div className="bg-primary rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px', minWidth: '40px' }}>
                      <i className="bi bi-person text-white"></i>
                    </div>
                    <div>
                      <h6 className="fw-bold mb-1">Блогеры</h6>
                      <small className="text-muted">Соберите все социальные сети</small>
                    </div>
                  </div>
                </div>
                <div className="col-sm-6 mb-3">
                  <div className="d-flex align-items-start">
                    <div className="bg-success rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px', minWidth: '40px' }}>
                      <i className="bi bi-briefcase text-white"></i>
                    </div>
                    <div>
                      <h6 className="fw-bold mb-1">Бизнес</h6>
                      <small className="text-muted">Покажите услуги и контакты</small>
                    </div>
                  </div>
                </div>
                <div className="col-sm-6 mb-3">
                  <div className="d-flex align-items-start">
                    <div className="bg-warning rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px', minWidth: '40px' }}>
                      <i className="bi bi-music-note text-white"></i>
                    </div>
                    <div>
                      <h6 className="fw-bold mb-1">Музыканты</h6>
                      <small className="text-muted">Поделитесь творчеством</small>
                    </div>
                  </div>
                </div>
                <div className="col-sm-6 mb-3">
                  <div className="d-flex align-items-start">
                    <div className="bg-info rounded-circle me-3 d-flex align-items-center justify-content-center" style={{ width: '40px', height: '40px', minWidth: '40px' }}>
                      <i className="bi bi-camera text-white"></i>
                    </div>
                    <div>
                      <h6 className="fw-bold mb-1">Фотографы</h6>
                      <small className="text-muted">Покажите портфолио</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-6 text-center">
              <div className="bg-light rounded-3 p-4 shadow-sm">
                <div className="bg-white rounded-3 p-4 mb-3 border">
                  <div className="d-flex align-items-center mb-3">
                    <div className="bg-primary rounded-circle me-3" style={{ width: '40px', height: '40px' }}></div>
                    <div>
                      <h6 className="mb-0">@your_username</h6>
                      <small className="text-muted">Ваша персональная страница</small>
                    </div>
                  </div>
                  <div className="d-grid gap-2">
                    <div className="bg-light rounded-2 p-2 text-start">
                      <small><i className="bi bi-instagram text-danger me-2"></i>Instagram</small>
                    </div>
                    <div className="bg-light rounded-2 p-2 text-start">
                      <small><i className="bi bi-youtube text-danger me-2"></i>YouTube</small>
                    </div>
                    <div className="bg-light rounded-2 p-2 text-start">
                      <small><i className="bi bi-globe text-primary me-2"></i>Личный сайт</small>
                    </div>
                  </div>
                </div>
                <small className="text-muted">Пример вашей страницы</small>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA секция */}
      <section className="py-5 bg-primary text-white">
        <div className="container text-center">
          <div className="row">
            <div className="col-lg-8 mx-auto">
              <h2 className="display-6 fw-bold mb-4">Готовы начать?</h2>
              <p className="lead mb-4">
                Присоединяйтесь к тысячам пользователей, которые уже создали свою идеальную страницу ссылок
              </p>
              <div className="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                <Link href="/auth/register" className="btn btn-warning btn-lg px-4 fw-bold">
                  Создать аккаунт бесплатно
                </Link>
                <Link href="/auth/login" className="btn btn-outline-light btn-lg px-4">
                  У меня есть аккаунт
                </Link>
              </div>
              <div className="mt-3">
                <small className="text-white-75">Бесплатно навсегда • Без ограничений • Быстрая настройка</small>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
