/* Queue cards */

const Queue = ({ onPick }) => {
  const cards = [
    {
      kind: "regular",
      badge: "Обычная очередь",
      title: "Обычная очередь",
      sub: "Для плановых релизов",
      body: "Когда до запуска есть время на концепцию, тест вкуса и спокойную подготовку партии.",
      cta: "Встать в очередь",
      points: ["Без доплаты за место", "Подготовка в общем потоке", "Слот по мере очереди"],
    },
    {
      kind: "priority",
      badge: "Платный приоритет",
      title: "Платный приоритет",
      sub: "Когда дата близко и важно быть первым",
      body: "Бронь места в очереди для срочных и важных запусков: ранний доступ к производственным слотам.",
      cta: "Запросить приоритет",
      points: ["Место выше в очереди", "Ранний разбор и оценка сроков", "Подходит для срочных дат"],
    },
  ];

  return (
    <section className="section-tight" id="queue" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="title-block">
          <div className="left">
            <div className="eyebrow acid">[ 07 ] Очередь</div>
            <h2>Слоты ограничены.<br/>Релизы не&nbsp;ждут.</h2>
          </div>
          <div className="right">
            <p className="lede muted">
              Два способа зайти. Чем раньше понятны дата и&nbsp;тираж, тем выше шанс собрать сильный формат без пожарного режима.
            </p>
          </div>
        </div>

        <div className="queue-grid two">
          {cards.map((c) => (
            <article key={c.kind} className={`q-card ${c.kind}`}>
              <div className="toprow">
              </div>
              <div>
                <span className="sub" style={{ display: "block", marginBottom: 10 }}>{c.sub}</span>
                <h3 className="qtitle">{c.title}</h3>
              </div>
              <p>{c.body}</p>

              <ul className="q-points">
                {c.points.map((p, i) => <li key={i}>{p}</li>)}
              </ul>

              <button
                className={`btn block ${c.kind === "priority" ? "acid" : "ghost"}`}
                onClick={() => onPick(c.kind)}
              >
                {c.cta} <Arrow />
              </button>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Queue });