/* Paid-priority block, Trust list, Investor block */

const PaidPriority = ({ onCta }) => {
  const yes = [
    "Ранний разбор заявки",
    "Место выше обычной очереди",
    "Быструю оценку сроков и тиража",
    "Приоритетную проработку концепции",
    "Возможность заранее занять слот под релиз",
  ];
  const no = [
    "Невозможные сроки",
    "Универсальное проигрывание на любом оборудовании",
    "Серийное производство без проверки",
    "Фиксированную цену до брифа",
  ];
  const ioRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const spinRef = React.useRef(0);
  const [num, setNum] = React.useState("——");
  React.useEffect(() => {
    const wrap = ioRef.current, card = cardRef.current;
    if (!wrap || !card) return;
    let reduce = false;
    try { reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; } catch (e) {}
    const io = "IntersectionObserver" in window ? new IntersectionObserver((es) => {
      es.forEach((en) => { if (en.isIntersecting) { wrap.classList.add("in"); io.disconnect(); } });
    }, { threshold: 0.25 }) : null;
    if (io) io.observe(wrap); else wrap.classList.add("in");
    if (reduce) return () => { if (io) io.disconnect(); };
    let raf = 0, tx = 0, ty = 0, cx = 0, cy = 0;
    const onMove = (e) => {
      const r = wrap.getBoundingClientRect();
      tx = Math.max(-0.5, Math.min(0.5, (e.clientX - r.left) / r.width - 0.5));
      ty = Math.max(-0.5, Math.min(0.5, (e.clientY - r.top) / r.height - 0.5));
    };
    /* барабан номера: цифры крутятся и возвращаются к «——» — номер ещё не выдан */
    const spin = () => {
      if (spinRef.current) return;
      const t0 = performance.now();
      spinRef.current = setInterval(() => {
        if (performance.now() - t0 > 640) {
          clearInterval(spinRef.current); spinRef.current = 0; setNum("——");
        } else {
          setNum(String(10 + Math.floor(Math.random() * 89)));
        }
      }, 55);
    };
    const onEnter = () => { wrap.classList.add("lvl"); spin(); };
    const onLeave = () => { wrap.classList.remove("lvl"); tx = 0; ty = 0; };
    const loop = () => {
      raf = requestAnimationFrame(loop);
      const t = performance.now() / 1000;
      cx += (tx - cx) * 0.12;
      cy += (ty - cy) * 0.12;
      card.style.transform =
        "translateY(" + (Math.sin(t * 0.7) * 4).toFixed(2) + "px)" +
        " rotate(" + (Math.sin(t * 0.45) * 0.5).toFixed(3) + "deg)" +
        " rotateY(" + (cx * 14).toFixed(2) + "deg)" +
        " rotateX(" + (-cy * 10).toFixed(2) + "deg)";
    };
    raf = requestAnimationFrame(loop);
    wrap.addEventListener("pointermove", onMove, { passive: true });
    wrap.addEventListener("pointerenter", onEnter);
    wrap.addEventListener("pointerleave", onLeave);
    return () => {
      cancelAnimationFrame(raf);
      if (io) io.disconnect();
      if (spinRef.current) clearInterval(spinRef.current);
      wrap.removeEventListener("pointermove", onMove);
      wrap.removeEventListener("pointerenter", onEnter);
      wrap.removeEventListener("pointerleave", onLeave);
    };
  }, []);
  return (
    <section className="paid">
      <div className="wrap">
        <div className="layout">
          <div className="copy">
            <div className="eyebrow">[ 08 ] Платный приоритет</div>
            <h2>Хотите быть среди первых? Забронируйте место.</h2>
            <p className="lede">
              На&nbsp;старте производственных слотов мало. Платный приоритет&nbsp;— для тех, кто не&nbsp;хочет ждать общий поток: артистам с&nbsp;ближайшим релизом, лейблам с&nbsp;графиком запусков и&nbsp;брендам, которым важна конкретная дата.
            </p>
            <div className="ctas">
              <button className="btn lg" onClick={() => onCta("priority")}>
                Занять платный приоритет <Arrow />
              </button>
              <button className="btn ghost lg" onClick={() => onCta("regular")}>
                Сначала обсудить релиз
              </button>
            </div>
            <div className="paid-no">
              <div className="cap">Честно: чего приоритет не&nbsp;обещает</div>
              <ul>
                {no.map((t, i) => <li key={i}>{t}</li>)}
              </ul>
            </div>
            <div className="fine">Без обещаний серийного производства · Условия по запросу</div>
          </div>

          <div className="pass-io" ref={ioRef}>
            <aside className="pass" ref={cardRef} aria-label="Что даёт платный приоритет">
              <div className="pass-top">
                <span className="id"><Mark /> Вкусноты · Пропуск приоритета</span>
                <span className="num">№ {num}</span>
              </div>
              <div className="pass-head">
                <div className="t">Приоритет</div>
                <div className="s">Доступ к&nbsp;первым производственным слотам&nbsp;— до&nbsp;общего потока.</div>
              </div>
              <div className="pass-perf" aria-hidden="true"></div>
              <ul className="pass-list">
                {yes.map((t, i) => <li key={i}>{t}</li>)}
              </ul>
              <div className="pass-perf" aria-hidden="true"></div>
              <div className="pass-foot">
                <span className="note">Номер слота выдаётся после брифа</span>
                <span className="pass-code" aria-hidden="true"></span>
              </div>
            </aside>
          </div>
        </div>
      </div>
    </section>
  );
};

const Trust = () => {
  const items = [
    // Неразрывный пробел задан символом, а не HTML-сущностью: заголовок выводится
    // как обычный текст, поэтому вставки разметки в него не происходит.
    { t: "Продукт встроен в релизную логику", b: "Артисты и лейблы мыслят датами, инфоповодами, посевами и контентом. Вкусноты попадают ровно в этот момент — не «когда-нибудь», а к релизу." },
    { t: "Объект сам просится в видео", b: "Распаковка, пластинка, проигрыватель, реакция, вкус — всё это легко превращается в короткий контент. Один предмет = несколько роликов." },
    { t: "B2B-first", b: "На старте фокус не на случайной рознице, а на заказах под конкретные кампании — без розничного каталога и магазина." },
    { t: "Кастомизация повышает ценность", b: "Пластинка связывается с визуалом, настроением, вкусом и историей релиза. Каждая партия — отдельный артефакт, не SKU." },
    { t: "Редкость работает на спрос", b: "Не каждый артист может сделать такой объект. Именно поэтому он цепляет — и это закладывается в очередь." },
  ];
  return (
    <section className="section-pad" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="title-block">
          <div className="left">
            <div className="eyebrow">[ 09 ] Логика проекта</div>
            <h2>Почему это<br/>не&nbsp;просто<br/>«прикольная сладость».</h2>
          </div>
          <div className="right">
            <p className="lede muted">
              Это маркетинговый инструмент с&nbsp;понятной B2B-механикой и&nbsp;вирусным потенциалом. Ниже — пять причин, почему мы&nbsp;за это берёмся.
            </p>
          </div>
        </div>

        <div className="trust">
          <div className="f-mono dim" style={{ fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase" }}>
          </div>
          <ol>
            {items.map((it, i) => (
              <li key={i}>
                <div>
                  <h3>{it.t}</h3>
                  <p>{it.b}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
};

const Investors = ({ onCta }) => {
  const why = [
    "Музыкальные релизы постоянно нуждаются в новых инфоповодах",
    "Стандартный мерч перегрет и плохо удивляет",
    "Физический объект ценится, если даёт историю и контент",
    "Продукт легко объяснить и показать в коротком видео",
    "B2B-заказы позволяют стартовать без розничного каталога",
  ];
  const seeking = [
    "Инвестиции на R&D и запуск новых стадий продукта",
    "Партнёры в музыкальной индустрии",
    "Производственные и упаковочные партнёры",
    "Бренды для пилотных коллабораций вне музыкальной индустрии",
  ];
  return (
    <section className="investor section-pad" id="investors">
      <div className="wrap">
        <div className="title-block">
          <div className="left">
            <div className="eyebrow acid">[ 10 ] Инвесторам и&nbsp;партнёрам</div>
            <h2>Продукт на&nbsp;стыке музыки, гастрономии и&nbsp;<span style={{ color: "var(--acid)" }}>вирусного маркетинга</span>.</h2>
          </div>
          <div className="right">
            <p className="lede" style={{ maxWidth: "56ch" }}>
              Мы&nbsp;строим B2B-first продукт для музыкальной индустрии: съедобные музыкальные пластинки под релизы, PR-посевы, лимитированный мерч и&nbsp;брендовые спецпроекты.
            </p>
          </div>
        </div>

        <div className="inv-grid">
          <div className="inv-left">
            <h3 className="inv-h">Почему это интересно</h3>
            <ul className="inv-list">
              {why.map((t, i) => <li key={i}>{t}</li>)}
            </ul>
          </div>

          <div className="inv-right">
            <div className="col">
              <h3 className="inv-h">Что ищем</h3>
              <ul className="inv-list">
                {seeking.map((t, i) => <li key={i}>{t}</li>)}
              </ul>

              <div className="inv-ctas">
                <button className="btn acid lg" onClick={() => onCta("investor")}>
                  Обсудить партнёрство <Arrow />
                </button>
                <button className="btn ghost lg" onClick={() => onCta("investor")}>
                  Запросить инвест-материалы
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PaidPriority, Trust, Investors });