import { FormEvent, useEffect, useMemo, useState } from 'react'
import { createRoot } from 'react-dom/client'
import './styles.css'

type FormState = {
  name: string
  email: string
  phone: string
  interest: string
  message: string
}

type FormErrors = Partial<Record<keyof FormState, string>>
type Theme = 'dark' | 'light'

const CONTACT_EMAIL = 'info@forgamers.ee'
const productBuilds = [
  {
    number: '01',
    tier: 'БЮДЖЕТНЫЙ УРОВЕНЬ',
    name: 'FG INTEL BUDGET V2',
    price: '€1 279',
    image: '/images/build-budget.webp',
    alt: 'Светлый игровой компьютер — временная визуализация бюджетной сборки',
    url: 'https://forgamer.ee/product/fg-intel-budget/',
    note: '',
    specs: [
      ['CPU', 'Intel Core i5-12400F'],
      ['GPU', 'Intel Arc B580 · 12 GB'],
      ['RAM', '32 GB DDR4 · 3200 MHz'],
      ['SSD', 'NVMe 256 GB + 1 TB'],
    ],
  },
  {
    number: '02',
    tier: 'СБАЛАНСИРОВАННЫЙ УРОВЕНЬ',
    name: 'FG INTEL FRAGHUNTER V2',
    price: '€1 839',
    oldPrice: '€1 950',
    image: '/images/build-balanced.webp',
    alt: 'Чёрный игровой компьютер с синей подсветкой — временная визуализация средней сборки',
    url: 'https://forgamer.ee/product/fg-intel-fraghunter-v2/',
    note: 'Цена на сайте указана со скидкой.',
    specs: [
      ['CPU', 'Intel Core i7-13700F'],
      ['GPU', 'AMD Radeon RX 7600 XT · 16 GB'],
      ['RAM', '16 GB DDR5 · 6000 MHz'],
      ['SSD', 'NVMe 500 GB + 1 TB'],
    ],
  },
  {
    number: '03',
    tier: 'МОЩНЫЙ УРОВЕНЬ',
    name: 'FG INTEL TWO 0',
    price: '€3 477',
    image: '/images/build-performance.webp',
    alt: 'Компактный кастомный игровой компьютер — временная визуализация мощной сборки',
    url: 'https://forgamer.ee/product/fg-intel-two-0/',
    note: '',
    specs: [
      ['CPU', 'Intel Core i7-13700K'],
      ['GPU', 'NVIDIA GeForce RTX 4080'],
      ['RAM', '32 GB · 6000 MHz'],
      ['SSD', 'NVMe 256 GB + 1 TB'],
    ],
  },
]

const services = [
  { icon: '↗', title: 'Подбор и сборка', text: 'Собираем систему вокруг ваших игр, экрана и привычного сценария использования.' },
  { icon: '◌', title: 'Апгрейд', text: 'Находим узкое место и обновляем только то, что реально даст прирост.' },
  { icon: '□', title: 'Сервис и настройка', text: 'Проводим диагностику, чистку и настраиваем систему для стабильной работы.' },
]

const navItems = [
  { href: '#builds', label: 'Сборки' },
  { href: '#services', label: 'Услуги' },
  { href: '#about', label: 'О нас' },
  { href: '#location', label: 'Как нас найти' },
]

function Wordmark() {
  return (
    <a className="wordmark" href="#top" aria-label="ForGamer — на главную">
      <img src="/forgamers-original.png" alt="ForGamer" />
    </a>
  )
}

function validate(values: FormState): FormErrors {
  const errors: FormErrors = {}
  if (values.name.trim().length < 2) errors.name = 'Введите имя минимум из двух символов.'
  if (!/^\S+@\S+\.\S+$/.test(values.email)) errors.email = 'Укажите корректный email.'
  if (!values.interest) errors.interest = 'Выберите тему обращения.'
  if (values.message.trim().length < 12) errors.message = 'Расскажите чуть подробнее — минимум 12 символов.'
  return errors
}

function App() {
  const [menuOpen, setMenuOpen] = useState(false)
  const [theme, setTheme] = useState<Theme>(() => {
    try {
      return localStorage.getItem('forgamer-theme') === 'light' ? 'light' : 'dark'
    } catch {
      return 'dark'
    }
  })
  const [form, setForm] = useState<FormState>({ name: '', email: '', phone: '', interest: '', message: '' })
  const [errors, setErrors] = useState<FormErrors>({})
  const [formStatus, setFormStatus] = useState<'idle' | 'sending' | 'success' | 'fallback'>('idle')

  useEffect(() => {
    document.documentElement.dataset.theme = theme
    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', theme === 'dark' ? '#05070b' : '#f4f7fb')
    try {
      localStorage.setItem('forgamer-theme', theme)
    } catch {
      // The selected theme still works for this page view if storage is unavailable.
    }
  }, [theme])

  useEffect(() => {
    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
    if (reduceMotion || !('IntersectionObserver' in window)) return

    const root = document.documentElement
    root.dataset.revealReady = 'true'
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.setAttribute('data-revealed', 'true')
          observer.unobserve(entry.target)
        }
      })
    }, { threshold: 0.12, rootMargin: '0px 0px -36px 0px' })

    document.querySelectorAll<HTMLElement>('[data-reveal]').forEach((element) => observer.observe(element))
    return () => observer.disconnect()
  }, [])

  const mailto = useMemo(() => {
    const subject = encodeURIComponent(`ForGamer — ${form.interest || 'новое обращение'} от ${form.name || 'клиента'}`)
    const body = encodeURIComponent(`Имя: ${form.name}\nEmail: ${form.email}\nТелефон: ${form.phone || 'не указан'}\nТема: ${form.interest || 'не выбрана'}\n\nСообщение:\n${form.message}`)
    return `mailto:${CONTACT_EMAIL}?subject=${subject}&body=${body}`
  }, [form])

  const updateField = (field: keyof FormState, value: string) => {
    setForm((current) => ({ ...current, [field]: value }))
    if (errors[field]) setErrors((current) => ({ ...current, [field]: undefined }))
    if (formStatus !== 'idle') setFormStatus('idle')
  }

  const askAboutBuild = (name: string) => {
    setForm((current) => ({
      ...current,
      interest: 'Новый игровой компьютер',
      message: `Здравствуйте! Хочу узнать подробнее о сборке ${name}.`,
    }))
  }

  const submitForm = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const nextErrors = validate(form)
    setErrors(nextErrors)
    if (Object.keys(nextErrors).length) return

    setFormStatus('sending')
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (!response.ok) throw new Error('Contact endpoint is unavailable')
      setFormStatus('success')
      setForm({ name: '', email: '', phone: '', interest: '', message: '' })
    } catch {
      setFormStatus('fallback')
      window.location.href = mailto
    }
  }

  return (
    <main id="top">
      <div className="notice">ТАЛЛИН · ИГРОВЫЕ ПК И СЕРВИС <span>•</span> СБОРКИ ПОД ВАШ СЦЕНАРИЙ</div>
      <header className="site-header">
        <Wordmark />
        <button className="menu-toggle" type="button" onClick={() => setMenuOpen((open) => !open)} aria-expanded={menuOpen} aria-label="Открыть меню">
          <span /><span />
        </button>
        <nav className={menuOpen ? 'primary-nav is-open' : 'primary-nav'} aria-label="Основная навигация">
          {navItems.map((item) => <a href={item.href} key={item.href} onClick={() => setMenuOpen(false)}>{item.label}</a>)}
        </nav>
        <div className="header-actions">
          <button className="theme-toggle" type="button" onClick={() => setTheme((current) => current === 'dark' ? 'light' : 'dark')} aria-label={theme === 'dark' ? 'Переключить на светлую тему' : 'Переключить на тёмную тему'} title={theme === 'dark' ? 'Светлая тема' : 'Тёмная тема'}>
            <span aria-hidden="true">{theme === 'dark' ? '◐' : '◑'}</span><span className="theme-toggle-label">{theme === 'dark' ? 'Светлая' : 'Тёмная'}</span>
          </button>
          <a className="header-cta" href="#contact">Обсудить проект <span>↗</span></a>
        </div>
      </header>

      <section className="hero section-shell" aria-labelledby="hero-title">
        <div className="hero-copy" data-reveal>
          <p className="eyebrow"><span /> ИГРОВЫЕ ПК И СЕРВИС В ТАЛЛИНЕ</p>
          <h1 id="hero-title">Система,<br /><em>которая держит темп.</em></h1>
          <p className="hero-lead">ForGamer помогает собрать, обновить и настроить технику, которой хочется пользоваться каждый день — в игре, работе и творчестве.</p>
          <div className="hero-actions">
            <a className="button button-primary" href="#builds">Выбрать свой уровень <span>→</span></a>
            <a className="text-link" href="#contact">Обсудить сборку <span>↓</span></a>
          </div>
          <div className="hero-meta"><span>EST. 2017</span><span>ITKODU OÜ</span><span>EE / EU</span></div>
        </div>
        <div className="hero-visual" aria-label="Игровой компьютер с синей подсветкой" data-reveal>
          <div className="hero-orbit orbit-a" /><div className="hero-orbit orbit-b" />
          <img src="/images/hero-pc.webp" alt="Игровой компьютер в тёмной студии" />
          <div className="hero-spec"><span>FORGE / 01</span><strong>POWER,<br />TUNED.</strong></div>
        </div>
      </section>

      <section className="strip" aria-label="Преимущества ForGamer"><span>ПОДБОР ПОД ВАШ СЦЕНАРИЙ</span><i /><span>ПРОЗРАЧНАЯ СБОРКА</span><i /><span>НАСТРОЙКА И ПОДДЕРЖКА</span></section>

      <section className="builds section-shell" id="builds" aria-labelledby="builds-title">
        <div className="section-heading split-heading" data-reveal>
          <p className="eyebrow"><span /> УРОВНИ СБОРКИ</p>
          <h2 id="builds-title">Три уровня мощности.<br /><em>Одна точка старта.</em></h2>
          <p>От разумной первой сборки до мощного ПК для требовательных игр. Конфигурации и цены сверены с каталогом ForGamer.</p>
        </div>
        <div className="build-grid">
          {productBuilds.map((build) => (
            <article className="build-card" key={build.number} data-reveal>
              <a className="build-image" href={build.url} target="_blank" rel="noreferrer" aria-label={`Посмотреть ${build.name} на сайте ForGamer`}>
                <img src={build.image} alt={build.alt} loading="lazy" />
                <span className="build-number">{build.number}</span>
                <span className="image-caption">ВРЕМЕННАЯ ИИ-ВИЗУАЛИЗАЦИЯ</span>
              </a>
              <div className="build-body">
                <p className="build-tier">{build.tier}</p>
                <div className="build-title-row"><h3>{build.name}</h3><div className="build-price">{build.oldPrice && <del>{build.oldPrice}</del>}<strong>{build.price}</strong><span>цена на сайте</span></div></div>
                <div className="build-specs">{build.specs.map(([label, value]) => <div key={label}><span>{label}</span><strong>{value}</strong></div>)}</div>
                <p className="build-note">{build.note || 'Сверьте актуальную комплектацию перед заказом.'}</p>
                <div className="build-actions">
                  <a className="button button-outline" href={build.url} target="_blank" rel="noreferrer">Все детали <span>↗</span></a>
                  <a className="build-ask" href="#contact" onClick={() => askAboutBuild(build.name)}>Спросить о сборке</a>
                </div>
              </div>
            </article>
          ))}
        </div>
        <p className="build-footnote" data-reveal>Фотографии — временные ИИ-визуализации и могут отличаться от реальных корпусов. Цены и характеристики взяты с карточек товаров ForGamer; перед заказом проверяйте актуальные данные по ссылке.</p>
      </section>

      <section className="services" id="services" aria-labelledby="services-title">
        <div className="section-shell services-inner">
          <div className="services-intro" data-reveal>
            <p className="eyebrow eyebrow-light"><span /> МАСТЕРСКАЯ FORGAMER</p>
            <h2 id="services-title">Техника должна<br /><em>работать на вас.</em></h2>
            <p>От первой консультации до тонкой настройки: объясняем решения простым языком и остаёмся на связи после выдачи системы.</p>
            <a className="button button-ghost" href="#contact">Получить консультацию <span>→</span></a>
          </div>
          <div className="service-grid">
            {services.map((service, index) => <article className="service-card" key={service.title} data-reveal><span className="service-count">0{index + 1}</span><span className="service-icon" aria-hidden="true">{service.icon}</span><h3>{service.title}</h3><p>{service.text}</p></article>)}
          </div>
        </div>
      </section>

      <section className="about section-shell" id="about" aria-labelledby="about-title">
        <div className="about-side" data-reveal><p className="eyebrow"><span /> О FORGAMER</p><span className="vertical-word">PRECISION</span></div>
        <div className="about-copy" data-reveal>
          <h2 id="about-title">Мы за <em>осознанную</em><br />производительность.</h2>
          <p className="about-lead">Команда ForGamer работает с игровыми системами, ноутбуками, периферией и сервисом. Вместо универсальных обещаний — решения, которые подходят именно вам.</p>
          <div className="metrics"><div><strong>01</strong><span>точка контакта:<br />от идеи до поддержки</span></div><div><strong>EU</strong><span>локальная команда<br />в Таллине</span></div><div><strong>360°</strong><span>сборка, настройка<br />и сервис</span></div></div>
        </div>
      </section>

      <section className="location section-shell" id="location" aria-labelledby="location-title">
        <div className="location-intro" data-reveal>
          <p className="eyebrow"><span /> ВСТРЕТИМСЯ В ТАЛЛИНЕ</p>
          <h2 id="location-title">Заходите<br /><em>в ForGamer.</em></h2>
          <p className="location-address">Punane 40, 13619<br />Lasnamäe, Tallinn, Estonia</p>
          <a className="text-link" href="https://www.google.com/maps/search/?api=1&query=Punane%2040%2C%2013619%20Tallinn%2C%20Estonia" target="_blank" rel="noreferrer">Построить маршрут <span>↗</span></a>
          <div className="opening-hours" aria-label="Часы работы"><h3>ЧАСЫ РАБОТЫ</h3><div><span>Пн–Пт</span><strong>10:00–18:00</strong></div><div><span>Сб</span><strong>12:00–16:00</strong></div><div><span>Вс</span><strong>Закрыто</strong></div></div>
        </div>
        <div className="map-frame" data-reveal><iframe title="Карта расположения ForGamer, Punane 40, Tallinn" src="https://maps.google.com/?q=Punane+40%2C+13619+Tallinn%2C+Estonia&output=embed" loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen /></div>
      </section>

      <section className="contact section-shell" id="contact" aria-labelledby="contact-title">
        <div className="contact-intro" data-reveal>
          <p className="eyebrow"><span /> СВЯЖИТЕСЬ С НАМИ</p>
          <h2 id="contact-title">Начнём<br /><em>с вашего сценария.</em></h2>
          <p>Расскажите, что хотите собрать, обновить или настроить. Ответим с понятным следующим шагом.</p>
          <div className="contact-details"><a href="mailto:info@forgamers.ee">info@forgamers.ee <span>↗</span></a><a href="tel:+37256973334">+372 5697 3334 <span>↗</span></a><p>Punane 40, Lasnamäe<br />Tallinn, 13619</p></div>
        </div>
        <form className="contact-form" onSubmit={submitForm} noValidate data-reveal>
          <div className="form-title"><span>НОВОЕ ОБРАЩЕНИЕ</span><span>01 / 01</span></div>
          <label>Как к вам обращаться?<input value={form.name} onChange={(event) => updateField('name', event.target.value)} placeholder="Ваше имя" autoComplete="name" />{errors.name && <small>{errors.name}</small>}</label>
          <div className="field-pair"><label>Email<input type="email" value={form.email} onChange={(event) => updateField('email', event.target.value)} placeholder="name@email.com" autoComplete="email" />{errors.email && <small>{errors.email}</small>}</label><label>Телефон <span className="optional">необязательно</span><input type="tel" value={form.phone} onChange={(event) => updateField('phone', event.target.value)} placeholder="+372 ..." autoComplete="tel" /></label></div>
          <label>Что интересно?<select value={form.interest} onChange={(event) => updateField('interest', event.target.value)}><option value="">Выберите тему</option><option>Новый игровой компьютер</option><option>Апгрейд системы</option><option>Сервис и настройка</option><option>Другое</option></select>{errors.interest && <small>{errors.interest}</small>}</label>
          <label>Расскажите коротко о задаче<textarea value={form.message} onChange={(event) => updateField('message', event.target.value)} placeholder="Например: играю в ... , хочу ..." rows={4} />{errors.message && <small>{errors.message}</small>}</label>
          <button className="button button-primary submit-button" type="submit" disabled={formStatus === 'sending'}>{formStatus === 'sending' ? 'Отправляем…' : 'Отправить обращение'} <span>→</span></button>
          {formStatus === 'success' && <p className="form-status success">Готово. Сообщение уже в почте ForGamer.</p>}
          {formStatus === 'fallback' && <p className="form-status fallback">Откроем почтовое приложение с заполненным письмом. Проверьте адрес и нажмите «Отправить».</p>}
          <p className="form-note">Отправляя форму, вы соглашаетесь на обработку данных для ответа на обращение.</p>
        </form>
      </section>

      <footer className="site-footer"><div className="section-shell footer-inner"><Wordmark /><p>© {new Date().getFullYear()} ITKODU OÜ · reg. 14193868 · VAT EE102154427</p><a href="#top">Наверх ↑</a></div></footer>
    </main>
  )
}

createRoot(document.getElementById('root')!).render(<App />)