/* Apply Form, FAQ, Footer */

// Приёмник заявок. Провайдер меняется правкой этих двух строк — остальной код от него не зависит.
// Ключ публичный (publishable) и рассчитан на отдачу в браузер; защита данных держится на
// insert-only RLS на стороне БД: анониму разрешена только вставка, чтение/правка/удаление закрыты.
const APPLY_ENDPOINT = "https://bkhprvcxqnuocuemslgf.supabase.co/rest/v1/applications";
const APPLY_KEY = "sb_publishable_MUdQ8VaSkTaH75XmbabKRQ_D00VPmzA";

// Версия текста согласия и таймаут отправки.
const CONSENT_VERSION = "2026-07-31";
const SEND_TIMEOUT_MS = 12000;

const TYPES = [
  { id: "regular",  label: "Обычная очередь" },
  { id: "priority", label: "Платный приоритет" },
  { id: "investor", label: "Инвестор / партнёр" },
];

const Form = React.forwardRef(({ type, setType, submitted, onSubmit }, ref) => {
  const isInvestor = type === "investor";
  const [sending, setSending] = React.useState(false);
  // null | "fields" | "consent" | "send" — чтобы не винить человека в сбое сервера
  const [errKind, setErrKind] = React.useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (sending) return;
    const formEl = e.currentTarget;
    const fd = new FormData(formEl);

    // Ловушка для ботов: поле спрятано от людей, заполнить его может только автоматика.
    // Боту показываем обычный успех, наружу не отправляем ничего.
    if (String(fd.get("company_site") || "").trim()) {
      onSubmit();
      return;
    }

    const payload = { type };
    for (const [k, v] of fd.entries()) {
      if (k === "company_site" || k === "consent") continue;
      const val = String(v).trim();
      if (val) payload[k] = val;
    }
    if (!payload.name || !payload.contact) {
      setErrKind("fields");
      const bad = formEl.querySelector(!payload.name ? '[name="name"]' : '[name="contact"]');
      if (bad) bad.focus();
      return;
    }
    if (!fd.get("consent")) {
      setErrKind("consent");
      return;
    }
    // Факт согласия хранится вместе с заявкой: 152-ФЗ требует его доказуемости.
    payload.consent = true;
    payload.consent_version = CONSENT_VERSION;
    payload.consent_at = new Date().toISOString();

    setSending(true);
    setErrKind(null);
    // Без таймаута «немой» сервер оставил бы кнопку навсегда в «Отправляем…».
    const ctl = new AbortController();
    const timer = setTimeout(() => ctl.abort(), SEND_TIMEOUT_MS);
    try {
      const res = await fetch(APPLY_ENDPOINT, {
        method: "POST",
        headers: {
          apikey: APPLY_KEY,
          Authorization: `Bearer ${APPLY_KEY}`,
          "Content-Type": "application/json",
          Prefer: "return=minimal",
        },
        body: JSON.stringify(payload),
        signal: ctl.signal,
      });
      if (!res.ok) throw new Error(String(res.status));
      onSubmit();
      // Цель Метрики «lead» — только реальные отправки; ловушка для ботов выше цель не трогает.
      if (window.ym) window.ym(110112461, "reachGoal", "lead", { type });
    } catch {
      setErrKind("send");
    } finally {
      clearTimeout(timer);
      setSending(false);
    }
  };

  const ctaText = (() => {
    if (type === "priority") return "Запросить условия приоритета";
    if (type === "investor") return "Обсудить проект";
    return "Отправить заявку";
  })();

  return (
    <section className="section-pad" id="apply" ref={ref}>
      <div className="wrap">
        <div className="title-block">
          <div className="left">
            <div className="eyebrow">[ 11 ] Заявка</div>
            <h2>Расскажите о&nbsp;релизе.<br/>Мы&nbsp;скажем, какой формат вам лучше подойдет.</h2>
          </div>
          <div className="right">
            <p className="lede muted">
              Чем точнее дата, тираж и&nbsp;задача&nbsp;— тем быстрее получится понять формат, сроки и&nbsp;приоритет. Запрос ни&nbsp;к&nbsp;чему не&nbsp;обязывает.
            </p>
          </div>
        </div>

        <div className="form-wrap">
          <aside style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <div className="f-mono dim" style={{ fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase" }}>
              Тип заявки
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--line)" }}>
              {TYPES.map(t => (
                <button
                  key={t.id}
                  onClick={() => setType(t.id)}
                  style={{
                    textAlign: "left",
                    padding: "20px 0",
                    borderBottom: "1px solid var(--line)",
                    fontFamily: "var(--f-display)",
                    fontSize: 22,
                    letterSpacing: "-0.015em",
                    color: type === t.id ? "var(--acid)" : "var(--paper)",
                    display: "grid",
                    gridTemplateColumns: "24px 1fr auto",
                    gap: 14,
                    alignItems: "baseline",
                  }}
                >
                  <span className="f-mono" style={{ fontSize: 11, letterSpacing: ".1em", color: "var(--mute)" }}>
                    0{TYPES.indexOf(t)+1}
                  </span>
                  <span>{t.label}</span>
                  <span style={{ color: type === t.id ? "var(--acid)" : "var(--mute-2)" }}>
                    {type === t.id ? "●" : "○"}
                  </span>
                </button>
              ))}
            </div>

            <div className="note">
              Заявка обрабатывается вручную. Никаких автоматических обещаний дат или цен&nbsp;— мы&nbsp;возвращаемся с&nbsp;честной оценкой формата конкретно под ваш запрос.
            </div>
          </aside>

          <form className="form-card" onSubmit={handleSubmit}>
            {submitted ? (
              <div style={{ minHeight: 480, display: "flex", flexDirection: "column", gap: 18, justifyContent: "center" }}>
                <div className="eyebrow acid">Заявка принята</div>
                <h3 style={{ fontSize: "clamp(28px, 3vw, 44px)", lineHeight: 1 }}>Заявка отправлена.</h3>
                <p className="muted" style={{ maxWidth: "42ch" }}>
                  Мы&nbsp;вернёмся в&nbsp;течение 1–2&nbsp;рабочих дней с&nbsp;первичной оценкой формата и&nbsp;следующими шагами по&nbsp;брифу.
                </p>
                <div className="syn-offer">
                  <div className="cap f-mono">Пока заявка в работе</div>
                  <p className="muted" style={{ maxWidth: "42ch", margin: 0 }}>
                    Соберите вкус-портрет вашего трека в&nbsp;генераторе «Синестезия»&nbsp;— на&nbsp;бриф придёте уже с&nbsp;идеей вкуса и&nbsp;цвета.
                  </p>
                  <a className="btn acid" href={SYN_URL("form-done")} target="_blank" rel="noopener noreferrer">
                    Подобрать вкус трека <Arrow />
                  </a>
                </div>
              </div>
            ) : (
              <>
                {!isInvestor ? (
                  <>
                    <div className="field-row">
                      <div className="field">
                        <label htmlFor="f-name">Имя и команда<span className="req">*</span></label>
                        <input id="f-name" name="name" required placeholder="Рик Рубин" />
                      </div>
                      <div className="field">
                        <label htmlFor="f-contact">Контакт<span className="req">*</span></label>
                        <input id="f-contact" name="contact" required placeholder="Telegram, телефон или почта" />
                      </div>
                    </div>

                    <div className="field-row">
                      <div className="field">
                        <label htmlFor="f-role">Кто вы</label>
                        <select id="f-role" name="role" defaultValue="">
                          <option value="" disabled>Выберите роль</option>
                          <option>Артист</option>
                          <option>Менеджер артиста</option>
                          <option>Лейбл</option>
                          <option>PR / маркетинг</option>
                          <option>Бренд</option>
                          <option>Другое</option>
                        </select>
                      </div>
                      <div className="field">
                        <label htmlFor="f-format">Формат задачи</label>
                        <select id="f-format" name="task_format" defaultValue="">
                          <option value="" disabled>Выберите формат</option>
                          <option>Релизный запуск</option>
                          <option>PR-посев</option>
                          <option>Розыгрыш</option>
                          <option>Лимитированный мерч</option>
                          <option>Подарок партнёрам</option>
                          <option>Другое</option>
                        </select>
                      </div>
                    </div>

                    <div className="field-row">
                      <div className="field">
                        <label htmlFor="f-release">Ориентировочная дата релиза</label>
                        <input id="f-release" name="release_date" type="text" placeholder="ДД.ММ.ГГГГ" />
                      </div>
                      <div className="field">
                        <label htmlFor="f-ready">Желаемая дата готовности</label>
                        <input id="f-ready" name="ready_date" type="text" placeholder="ДД.ММ.ГГГГ" />
                      </div>
                    </div>

                    <div className="field-row">
                      <div className="field">
                        <label htmlFor="f-qty">Примерный тираж</label>
                        <input id="f-qty" name="quantity" placeholder="например, 30 / 100 / 300 шт" />
                      </div>
                      <div className="field">
                        <label htmlFor="f-budget">Какой бюджет у промо-кампании вашего релиза</label>
                        <input id="f-budget" name="budget" placeholder="подойдет вилка или диапазон" />
                      </div>
                    </div>

                    <div className="field">
                      <label htmlFor="f-brief">Концепция, вкус, настроение, референсы</label>
                      <textarea id="f-brief" name="brief" placeholder="Опишите релиз: что выходит, какая атмосфера, кому отправляем, какие референсы по упаковке и вкусу." />
                    </div>
                  </>
                ) : (
                  <>
                    <div className="field-row">
                      <div className="field">
                        <label htmlFor="fi-name">Имя<span className="req">*</span></label>
                        <input id="fi-name" name="name" required placeholder="Имя и фамилия" />
                      </div>
                      <div className="field">
                        <label htmlFor="f-contact">Контакт<span className="req">*</span></label>
                        <input id="f-contact" name="contact" required placeholder="Telegram, телефон или почта" />
                      </div>
                    </div>
                    <div className="field">
                      <label htmlFor="fi-interest">Тип интереса</label>
                      <select id="fi-interest" name="investor_interest" defaultValue="">
                        <option value="" disabled>Выберите тип</option>
                        <option>Инвестиции</option>
                        <option>Партнёрство</option>
                        <option>Пилотный проект</option>
                        <option>Производство / упаковка</option>
                        <option>Бренд-коллаборация</option>
                      </select>
                    </div>
                    <div className="field">
                      <label htmlFor="fi-about">ВКРАТЦЕ РАССКАЖИТЕ О СЕБЕ ИЛИ О ВАШЕЙ КОМПАНИИ</label>
                      <input id="fi-about" name="about" placeholder="Фонд, индустрия, релевантный опыт" />
                    </div>
                    <div className="field">
                      <label htmlFor="fi-brief">Что хотите обсудить</label>
                      <textarea id="fi-brief" name="brief" placeholder="Тезисы, формат разговора, как видите нашу встречу." />
                    </div>
                  </>
                )}

                <div aria-hidden="true" style={{ position: "absolute", left: -9999, width: 1, height: 1, overflow: "hidden" }}>
                  <label>Сайт компании
                    <input type="text" name="company_site" tabIndex={-1} autoComplete="off" />
                  </label>
                </div>
                <div className="formfoot">
                  <label className="hint" style={{ display: "flex", gap: 10, alignItems: "flex-start", cursor: "pointer" }}>
                    <input type="checkbox" name="consent" required style={{ marginTop: 2, width: 16, height: 16, flex: "0 0 16px", accentColor: "#ec712e" }} />
                    <span>Даю <a href="/consent" target="_blank" rel="noopener noreferrer" style={{ color: "var(--acid)" }}>согласие на&nbsp;обработку персональных данных</a> и&nbsp;принимаю <a href="/privacy" target="_blank" rel="noopener noreferrer" style={{ color: "var(--acid)" }}>политику конфиденциальности</a>.</span>
                  </label>
                  <button type="submit" disabled={sending} className={`btn lg ${type === "priority" ? "acid" : ""}`}>
                    {sending ? "Отправляем…" : ctaText} <Arrow />
                  </button>
                </div>
                {errKind && (
                  <div role="alert" className="f-mono" style={{ marginTop: 16, fontSize: 12, letterSpacing: ".06em", color: "var(--warn)" }}>
                    {errKind === "fields"
                      ? "Заполните имя и контакт — без них мы не сможем ответить."
                      : errKind === "consent"
                        ? "Отметьте согласие на обработку персональных данных."
                        : "Заявка не ушла: сбой на нашей стороне, не в ваших данных. Попробуйте ещё раз."}
                  </div>
                )}
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
});

const FAQ = () => {
  const qs = [
    { q: "Это реально съедобно?", a: "Да, продукт задуман как съедобный объект из пищевых материалов. Финальный состав, упаковка и условия хранения уточняются под формат партии." },
    { q: "Пластинку можно проигрывать?", a: "Разрабатываем концепцию с учётом проигрывания, но формат зависит от материала, партии и сценария. Совместимость с любым проигрывателем не обещаем." },
    { q: "Можно сделать под мой релиз?", a: "Да. Вкус, цвет, упаковка, посыл и сценарий выдачи собираются вокруг конкретного запуска." },
    { q: "Как выбирается вкус и цвет под трек?", a: "Собираем на брифе под настроение и визуальный мир релиза. Можно прийти уже с готовой идеей: генератор «Синестезия» строит вкус-портрет трека — по ссылке ниже.", link: { c: "faq", label: "Примерить вкус на трек →" } },
    { q: "Сколько времени занимает производство?", a: "Зависит от тиража, кастомизации и даты готовности. Поэтому в заявке важны дата релиза, желаемая дата и объём." },
    { q: "Что даёт платная приоритетная очередь?", a: "Более ранний разбор заявки, место выше обычной очереди и приоритетную проработку формата. Подходит, когда дата близко и важно быть среди первых." },
    { q: "Сколько это стоит?", a: "Стоимость зависит от тиража, сроков и уровня кастомизации. На старте корректнее считать проект после короткого брифа." },
    { q: "Работаете только с музыкантами?", a: "Основной фокус — артисты, лейблы и релизные команды. Бренды и креативные команды тоже могут зайти с музыкальной задачей." },
    { q: "Можно инвестировать или стать партнёром?", a: "Да. Мы открыты к разговору с инвесторами, музыкальными партнёрами, брендами и производственными командами." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-pad" id="faq" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="title-block">
          <div className="left">
            <div className="eyebrow">[ 12 ] FAQ</div>
            <h2>Короткие<br/>честные ответы.</h2>
          </div>
          <div className="right">
            <p className="lede muted">
              Без обещаний, которых мы&nbsp;пока не&nbsp;можем подтвердить. Если вопрос важнее, чем кажется&nbsp;— напишите в&nbsp;заявке.
            </p>
          </div>
        </div>
        <div className="faq-list">
          {qs.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button id={`faq-q-${i}`} className="faq-q" aria-expanded={open === i} aria-controls={`faq-a-${i}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="ico" aria-hidden="true"><span className="v">+</span></span>
              </button>
              <div className="faq-a" id={`faq-a-${i}`} role="region" aria-labelledby={`faq-q-${i}`}>
                <div className="inner">
                  <p>{it.a}</p>
                  {it.link && (
                    <p style={{ marginTop: 10 }}>
                      <a className="syn-inline" href={SYN_URL(it.link.c)} target="_blank" rel="noopener noreferrer">{it.link.label}</a>
                    </p>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = ({ onCta }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let reduce = false;
    try { reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; } catch (e) {}
    if (reduce) return;
    let lastT = 0;
    const spawn = (x, y, big) => {
      if (el.querySelectorAll(".ripple").length > 12) return;
      const d = document.createElement("div");
      d.className = "ripple" + (big ? " big" : "");
      d.style.left = x + "px"; d.style.top = y + "px";
      el.appendChild(d);
      d.addEventListener("animationend", () => d.remove());
    };
    const onMove = (e) => {
      const now = performance.now();
      if (now - lastT < 140) return;
      lastT = now;
      const r = el.getBoundingClientRect();
      spawn(e.clientX - r.left, e.clientY - r.top, false);
    };
    const onClick = (e) => {
      const r = el.getBoundingClientRect();
      spawn(e.clientX - r.left, e.clientY - r.top, true);
    };
    el.addEventListener("pointermove", onMove, { passive: true });
    el.addEventListener("click", onClick);
    return () => {
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("click", onClick);
    };
  }, []);

  const word1 = "ВКУСН".split("");
  const word2 = "ТЫ".split("");
  return (
    <footer className="f2" ref={ref}>
      <div className="wrap">
        <div className="f2-top">
          <span className="f2-mark" aria-hidden="true"><Mark /></span>
          <span className="f2-line">Съедобный музыкальный мерч под ваш релиз · Москва · Санкт-Петербург</span>
          <button className="btn ghost" onClick={() => onCta("regular")}>
            Оставить заявку <Arrow />
          </button>
        </div>

        <div className="f2-mega" aria-hidden="true">
          {word1.map((l, i) => <span className="lt" key={"a" + i}>{l}</span>)}
          {/* пасхалка: «дырка пластинки» ведёт в Синестезию */}
          <a className="o" href={SYN_URL("footer-egg")} target="_blank" rel="noopener noreferrer" tabIndex={-1} title="Синестезия — вкус-портрет трека"></a>
          {word2.map((l, i) => <span className="lt" key={"b" + i}>{l}</span>)}
        </div>

        <div className="f2-meta">
          <div>© {new Date().getFullYear()} ООО «Вкус Технологии»</div>
          <div className="f2-links">
            <a href="#product">Продукт</a>
            <a href="#queue">Очередь</a>
            <a href="#investors">Инвесторам</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="f2-links">
            <a href="/privacy">Конфиденциальность</a>
            <a href="/cookie">Cookie</a>
            <a href="/consent">Согласие на обработку ПДн</a>
            <a href="/terms">Пользовательское соглашение</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Form, FAQ, Footer });