/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */
const { useState, useEffect } = React;

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "accent": "#a855f7",
  "texture": "clean",
  "heroVariant": "manifest"
}/*EDITMODE-END*/;

/* ─── Icons (Tabler outline, inlined) ─── */
const Icon = ({ paths }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    {paths.map((p, i) => <path key={i} d={p} />)}
  </svg>
);

const StarMark = ({ size = 16 }) => (
  <svg className="star-mark" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
    <path d="M12 2.5v19M2.5 12h19M5.4 5.4l13.2 13.2M18.6 5.4 5.4 18.6" />
  </svg>
);

/* ─── Chat reel for hero preview ─── */
const CHAT_LINES = [
  { u: "андрей_к", c: "привет всем"  },
  { u: "лена.пб",  c: "из Питера"    },
  { u: "max_94",   c: "огонь как звучит" },
  { u: "vegastudio", host: true, c: "откуда смотрите?" },
  { u: "irina_m",  c: "Казань на связи" },
  { u: "denч",     c: "ждём 1 сентября" },
  { u: "polly",    c: "это что, без монтажа?" },
  { u: "vegastudio", host: true, c: "да, всё в прямом эфире" },
  { u: "kirill.t", c: "наконец-то по-русски" },
  { u: "майя",     c: "красиво" },
  { u: "rusl4n",   c: "звук чёткий" },
  { u: "olesya",   c: "vegatv.ru запомнила" },
  { u: "никa",     c: "когда iOS?" },
  { u: "vegastudio", host: true, c: "iOS и Android — в день запуска" },
];

function ChatRoll() {
  const [visible, setVisible] = useState(() =>
    CHAT_LINES.slice(0, 4).map((m, i) => ({ ...m, k: i, fresh: false }))
  );
  const idxRef = React.useRef(4);
  const keyRef = React.useRef(100);
  useEffect(() => {
    const id = setInterval(() => {
      const next = CHAT_LINES[idxRef.current % CHAT_LINES.length];
      idxRef.current += 1;
      keyRef.current += 1;
      const k = keyRef.current;
      setVisible((prev) => {
        const arr = [...prev, { ...next, k, fresh: true }];
        return arr.length > 4 ? arr.slice(arr.length - 4) : arr;
      });
      // next frame: drop the "fresh" flag so the CSS transition fires
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          setVisible((prev) => prev.map((m) => (m.k === k ? { ...m, fresh: false } : m)));
        });
      });
    }, 2200);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="chat-roll" aria-hidden="true">
      {visible.map((m) => (
        <div key={m.k} className={`chat-msg ${m.host ? "host" : ""} ${m.fresh ? "enter" : ""}`}>
          <span className="chat-u">{m.u}</span>
          <span className="chat-c">{m.c}</span>
        </div>
      ))}
    </div>
  );
}

const FeatIcons = {
  broadcast: <Icon paths={["M4.93 19.07a10 10 0 0 1 0-14.14", "M7.76 16.24a6 6 0 0 1 0-8.48", "M19.07 4.93a10 10 0 0 1 0 14.14", "M16.24 7.76a6 6 0 0 1 0 8.48", "M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"]} />,
  chat:      <Icon paths={["M8 9h8", "M8 13h6", "M14 19l-3 3v-3H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4z"]} />,
  duet:      <Icon paths={["M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2", "M16 3.13a4 4 0 0 1 0 7.75", "M21 21v-2a4 4 0 0 0-3-3.85"]} />,
  reactions: <Icon paths={["M12 2v4", "M12 18v4", "M4.93 4.93l2.83 2.83", "M16.24 16.24l2.83 2.83", "M2 12h4", "M18 12h4", "M4.93 19.07l2.83-2.83", "M16.24 7.76l2.83-2.83"]} />,
  privacy:   <Icon paths={["M12 11a3 3 0 0 1 3 3v.5", "M5 21h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2z", "M8 8V6a4 4 0 0 1 8 0v2"]} />,
  monetize:  <Icon paths={["M12 1v22", "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"]} />,
  search:    <Icon paths={["M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14z", "M21 21l-6-6"]} />,
  device:    <Icon paths={["M9 2h6a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z", "M12 18h.01"]} />,
};

/* ─── Hero copy variants ─── */
const HERO_VARIANTS = {
  manifest: {
    pre: "РОССИЙСКАЯ ПЛОЩАДКА ДЛЯ СТРИМОВ",
    title: <><span style={{color:"#a855f7"}}>Социальная сеть.</span><br/>В прямом эфире.</>,
    lead: <>Никаких записей и монтажа. Только то, что происходит прямо сейчас — у тебя, у друзей, у тех, кого ты ещё не знаешь.</>,
  },
  poetic: {
    pre: "РОССИЙСКАЯ ПЛОЩАДКА ДЛЯ СТРИМОВ",
    title: <>Жизнь идёт в&nbsp;прямом&nbsp;эфире.<br/>Мы её просто показываем.</>,
    lead: <>Открытая лента, где каждый — автор и зритель одновременно. Включай эфир, заходи в чужой, оставайся тем, кто ты есть.</>,
  },
  data: {
    pre: "РОССИЙСКАЯ ПЛОЩАДКА ДЛЯ СТРИМОВ",
    title: <>Вега.ТВ —<br/>стримы по-русски.</>,
    lead: <>Площадка прямых эфиров с встроенной соцсетью. Лента, чаты, совместные эфиры, реакции в реальном времени — на одном экране, без задержки.</>,
  },
};

/* ─── Marquee tape data ─── */
const TAPE = [
  "Запуск · 01.09.2026",
  "Социальная сеть в прямом эфире",
  "Совместные эфиры до 4 человек",
  "iOS · Android · Web",
  "На русском",
  "Никакого монтажа",
];

/* ─── Sample feed ─── */
const TILES = [
  { title: "Утренний кофе из Питера",     ch: "@lina_morning", v: "1.2K",  cat: "ВЕДУ ЭФИР" },
  { title: "Кодим бэкенд под чай",        ch: "@backwave",     v: "312",   cat: "IT · ЖИВЬЁМ" },
  { title: "Прогулка по Тбилиси",         ch: "@goga_walks",   v: "4.8K",  cat: "IRL · 04:12" },
  { title: "Реакция на новый трейлер",    ch: "@react_max",    v: "2.4K",  cat: "РЕАКЦИЯ" },
  { title: "Мама учит готовить хинкали",  ch: "@hinkali_mom",  v: "850",   cat: "ЕДА · ЭФИР" },
  { title: "Турнир по Counter-Strike",    ch: "@ru_cs2",       v: "12.3K", cat: "ИГРЫ · FINAL" },
  { title: "DJ-сет, ночь",                ch: "@nightowl",     v: "5.1K",  cat: "МУЗЫКА · LIVE" },
  { title: "Чат с подписчиками",          ch: "@askruslan",    v: "921",   cat: "Q&A · ОТКР." },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULS);
  const [login, setLogin] = useState("");
  const [password, setPassword] = useState("");
  const [showPass, setShowPass] = useState(false);
  const [authError, setAuthError] = useState("");

  useEffect(() => {
    const root = document.documentElement;
    const c = t.accent;
    root.style.setProperty("--sv-accent", c);
    root.style.setProperty("--sv-accent-hover", shift(c, 12));
    root.style.setProperty("--sv-accent-press", shift(c, -10));
    root.style.setProperty("--sv-accent-soft",   hexA(c, 0.14));
    root.style.setProperty("--sv-accent-softer", hexA(c, 0.04));
    root.style.setProperty("--sv-shadow-glow",  `0 0 0 3px ${hexA(c, 0.22)}`);
  }, [t.accent]);

  const hero = HERO_VARIANTS[t.heroVariant] || HERO_VARIANTS.manifest;

  async function submit(e) {
    e.preventDefault();
    setAuthError("");
    try {
      const res = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ login, password }),
      });
      const data = await res.json().catch(() => ({}));
      setAuthError(data.error || "Неверный логин или пароль");
    } catch {
      setAuthError("Неверный логин или пароль");
    }
  }

  const texClass = t.texture === "grain" ? "tex-grain" : t.texture === "scan" ? "tex-scan" : "";

  return (
    <div className={`page ${texClass}`}>
      <header className="topbar">
        <div className="wrap topbar-inner">
          <div className="brand">
            <span className="brand-mark"><StarMark size={18} /></span>
            <span className="brand-name">ВЕГА<span className="dot">.</span>ТВ</span>
          </div>
          <nav className="top-nav hidden-sm">
            <a href="#что-это">О площадке</a>
            <a href="#для-кого">Стримерам и зрителям</a>
          </nav>
          <div className="top-right">
          </div>
        </div>
      </header>

      <section className="hero">
        <div className="wrap">
          <div className="hero-pre">
            <span className="rule" />
            <span className="label-caps">{hero.pre}</span>
          </div>
          <div className="hero-grid">
            <div>
              <h1 className="hero-title">{hero.title}</h1>
              <p className="hero-lead">{hero.lead}</p>
              <form className="login-form" onSubmit={submit} autoComplete="on">
                <div className="login-row">
                  <label className="login-label" htmlFor="login">Логин</label>
                  <input
                    id="login"
                    type="text"
                    placeholder="имя или e-mail"
                    value={login}
                    onChange={(e) => setLogin(e.target.value)}
                    autoComplete="username"
                  />
                </div>
                <div className="login-row">
                  <label className="login-label" htmlFor="password">Пароль</label>
                  <div className="login-pass">
                    <input
                      id="password"
                      type={showPass ? "text" : "password"}
                      placeholder="••••••••"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      autoComplete="current-password"
                    />
                    <button type="button" className="login-eye" onClick={() => setShowPass(s => !s)} aria-label="Показать пароль">
                      {showPass ? "скрыть" : "показать"}
                    </button>
                  </div>
                </div>
                <div className="login-actions">
                  <button type="submit" className="btn btn-primary btn-lg">Войти</button>
                  <a href="#" className="login-link">Забыли пароль?</a>
                </div>
              </form>
              <p className="hero-help">
                {authError
                  ? <span className="err">{authError}</span>
                  : <>вход откроется <span className="ok">01.09.2026</span></>}
              </p>
            </div>
            <aside className="hero-live" aria-label="Превью эфира">
              <div className="hl-frame">
                <div className="hl-vid">
                  <span className="hl-badge"><span className="hl-dot" /> LIVE</span>
                  <span className="hl-viewers">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" width="11" height="11"><path d="M3 12s3-7 9-7 9 7 9 7-3 7-9 7-9-7-9-7z"/><circle cx="12" cy="12" r="3"/></svg>
                    <span className="mono">2 471</span>
                  </span>
                  <div className="hl-shimmer" />
                  <div className="hl-chat">
                    <ChatRoll />
                  </div>
                </div>
                <div className="hl-meta">
                  <div className="hl-row">
                    <span className="hl-ch">@vegastudio</span>
                    <span className="hl-time mono">00:42:18</span>
                  </div>
                  <div className="hl-title">Так будет выглядеть Вега ТВ</div>
                  <div className="hl-tags">
                    <span>демо</span>
                    <span>в&nbsp;эфире</span>
                    <span>русский</span>
                  </div>
                </div>
              </div>
              <div className="launch-card" role="note" aria-label="Дата открытия">
                <div className="launch-card__date">
                  <span className="launch-card__day">01</span>
                  <span className="launch-card__mon">СЕН</span>
                  <span className="launch-card__year">2026</span>
                </div>
                <div className="launch-card__body">
                  <span className="launch-card__kicker">
                    <span className="launch-card__pulse" />
                    Открытие платформы
                  </span>
                  <span className="launch-card__title">1 сентября 2026</span>
                  <span className="launch-card__sub">iOS · Android · vegatv.ru</span>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <section className="section section-first" id="что-это">
        <div className="wrap">
          <div className="prose">
            <span className="kicker">О платформе</span>
            <h2 className="prose-h">Лента, в которой никто не нажал кнопку «опубликовать».</h2>
            <p className="prose-p">
              Вега ТВ собирает соцсеть и стрим-платформу в одно. Эфир здесь — это и есть пост: открыл приложение, нажал, и аудитория появилась рядом. Не нужно записывать, монтировать, выкладывать, ждать просмотры.
            </p>
            <p className="prose-p">
              Под каждым эфиром — живой чат, реакции прямо поверх кадра, возможность позвать гостя одним свайпом. Алгоритм показывает эфир тем, кому он интересен, поэтому аудитория растёт не от подписной базы, а от темы.
            </p>
            <p className="prose-p prose-quiet">
              Российская команда, российские серверы, оплата картой любого банка. На русском без машинного перевода — потому что мы и пишем на нём.
            </p>
          </div>
        </div>
      </section>

      <section className="section" id="для-кого">
        <div className="wrap">
          <div className="duo">
            <article className="duo-col">
              <span className="kicker">Стримерам</span>
              <h3 className="duo-h">Аудитория приходит на тему.</h3>
              <p className="duo-p">Можно начинать с нуля. Алгоритм показывает эфир тем, кому он интересен — даже если у тебя пока ни одного подписчика. Студия в приложении, OBS не нужен, гости — одним свайпом.</p>
              <p className="duo-p">Монетизация с первого дня: чаевые, платные эфиры, подписки на канал. Комиссия фиксированная и видна на каждом платеже. Никаких скрытых вычетов.</p>
            </article>
            <article className="duo-col">
              <span className="kicker">Зрителям</span>
              <h3 className="duo-h">Соцсеть, где всё уже сейчас.</h3>
              <p className="duo-p">Не приходится листать вчерашние видео. Лента собирается под тебя — по темам, городам, друзьям. Открыл — и кто-то уже в эфире.</p>
              <p className="duo-p">Можно смотреть тихо, можно зайти в чат, можно сесть рядом гостем. Никакой обязанности подписываться, ставить лайки и оставлять реакции, если не хочется.</p>
            </article>
          </div>
        </div>
      </section>

      <footer className="footer">
        <div className="wrap">
          <div className="fbig" aria-hidden="true">
            ВЕГА<span className="slash">.</span>ТВ
          </div>
          <div className="footer-grid">
            <div className="fcol fcol-wide">
              <h4>Напишите</h4>
              <a href="mailto:hello@vegatv.ru">hello@vegatv.ru — вопросы и предложения</a>
              <a href="mailto:studio@vegatv.ru">studio@vegatv.ru — авторам и стримерам</a>
              <a href="mailto:press@vegatv.ru">press@vegatv.ru — пресса</a>
              <a href="mailto:support@vegatv.ru">support@vegatv.ru — поддержка</a>
            </div>
            <div className="fcol">
              <h4>Где мы</h4>
              <p>iOS · Android</p>
              <p>vegatv.ru</p>
              <p>Москва, Пресненская наб., 12</p>
              <p>БЦ «Башня Федерация», офис 41-08</p>
              <p>пн–пт · 10:00–19:00 МСК</p>
            </div>
          </div>
          <div className="legal">
            <span>© 2026 Вега ТВ</span>
            <span>vegatv.ru</span>
          </div>
        </div>
      </footer>

      <TweaksPanel title="Tweaks · Вега ТВ">
        <TweakSection label="Акцент" />
        <TweakColor
          label="Цвет акцента"
          value={t.accent}
          options={["#a855f7", "#ec4899", "#10b981", "#3b82f6", "#f59e0b", "#ef4444"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Подача" />
        <TweakRadio
          label="Хедлайн"
          value={t.heroVariant}
          options={["manifest", "poetic", "data"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakRadio
          label="Текстура"
          value={t.texture}
          options={["clean", "grain", "scan"]}
          onChange={(v) => setTweak("texture", v)}
        />
      </TweaksPanel>
    </div>
  );
}

function hexA(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return `rgba(${r},${g},${b},${a})`;
}
function shift(hex, amt) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.max(0, Math.min(255, r + amt));
  g = Math.max(0, Math.min(255, g + amt));
  b = Math.max(0, Math.min(255, b + amt));
  return "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join("");
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);