/* global React */
// Shared React components — Header, Footer, Booking form, Pricing table, etc.

const { useState, useEffect, useRef, useMemo } = React;

// ---- Logo + Wordmark ----------------------------------------
function Logo({ size = 40, showWordmark = true, variant = 1 }) {
  return (
    <div className="logo" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <img src="assets/logo.png" alt="Фортуна" style={{ width: size, height: size, borderRadius: '50%' }} />
      {showWordmark && (
        <div className="logo-txt">
          <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '0.03em' }}>ФОРТУНА</div>
          <small>бильярдный клуб · Жуковский</small>
        </div>
      )}
    </div>
  );
}

// ---- Nav (renders links, accepts phone/cta) -----------------
function Header({ cta = 'Забронировать стол', theme = 'dark' }) {
  const nav = window.FORTUNA.nav;
  return (
    <header className="site-header glass">
      <Logo size={40} />
      <nav>
        {nav.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
      </nav>
      <a href="#contact" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>{cta} →</a>
    </header>
  );
}

// ---- Stat row ----------------------------------------------
function StatRow() {
  return (
    <div className="stat-row">
      {window.FORTUNA.stats.map((s, i) => (
        <div key={i} className="stat-cell">
          <div className="stat-value">{s.value}</div>
          <div className="stat-label">{s.label}</div>
        </div>
      ))}
    </div>
  );
}

// ---- Pricing table ------------------------------------------
function PricingTable() {
  const rows = window.FORTUNA.pricing;
  const fmt = n => `${n.toLocaleString('ru-RU')} ₽`;
  return (
    <div>
      <table className="pricing-table">
        <thead>
          <tr>
            <th>Категория стола</th>
            <th>Будни · день</th>
            <th>Будни · вечер</th>
            <th>Выходные</th>
            <th>Ночь</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} className={r.cat.startsWith('VIP') ? 'vip' : ''}>
              <td>{r.cat}</td>
              <td className="price">{fmt(r.day)}</td>
              <td className="price">{fmt(r.eve)}</td>
              <td className="price">{fmt(r.wknd)}</td>
              <td className="price">{fmt(r.night)}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="pricing-note">
        <strong style={{ opacity: 0.8 }}>День</strong> — 12:00–15:00 &nbsp;·&nbsp;
        <strong style={{ opacity: 0.8 }}>Вечер</strong> — 15:00–00:00 &nbsp;·&nbsp;
        <strong style={{ opacity: 0.8 }}>Выходные</strong> — Пт–Вс &nbsp;·&nbsp;
        <strong style={{ opacity: 0.8 }}>Ночь</strong> — после закрытия клуба, по согласованию с администратором клуба. В праздничные дни действует тариф «Выходные».
      </div>
    </div>
  );
}

// ---- Booking form ------------------------------------------
function BookingForm({ compact = false }) {
  const [form, setForm] = useState({ name: '', phone: '', date: '', time: '19:00', table: 'rus', hours: 2 });
  const [sent, setSent] = useState(false);
  const up = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 3500); };

  return (
    <form className="booking-form" onSubmit={submit}>
      <div className="bf-grid">
        <label className="field">
          <span>Имя</span>
          <input required value={form.name} onChange={e => up('name', e.target.value)} placeholder="Как к вам обращаться" />
        </label>
        <label className="field">
          <span>Телефон</span>
          <input required type="tel" value={form.phone} onChange={e => up('phone', e.target.value)} placeholder="+7 (___) ___‑__‑__" />
        </label>
        <label className="field">
          <span>Дата</span>
          <input required type="date" value={form.date} onChange={e => up('date', e.target.value)} />
        </label>
        <label className="field">
          <span>Время</span>
          <input required type="time" value={form.time} onChange={e => up('time', e.target.value)} />
        </label>
        <label className="field">
          <span>Стол</span>
          <select value={form.table} onChange={e => up('table', e.target.value)}>
            <option value="rus">Русский бильярд</option>
            <option value="pool">Американский пул</option>
            <option value="tennis">Настольный теннис</option>
            <option value="vip">VIP-комната</option>
          </select>
        </label>
        <label className="field">
          <span>Часов</span>
          <select value={form.hours} onChange={e => up('hours', e.target.value)}>
            {[1,2,3,4,5,6].map(h => <option key={h} value={h}>{h} ч</option>)}
          </select>
        </label>
      </div>
      <button type="submit" className="btn btn-primary" style={{ marginTop: 20, width: '100%', justifyContent: 'center', fontSize: 16 }}>
        {sent ? '✓ Заявка отправлена — мы перезвоним' : 'Забронировать стол'}
      </button>
    </form>
  );
}

Object.assign(window, { Logo, Header, StatRow, PricingTable, BookingForm });