/* ===== Apply ===== */
/* ─────────────────────────────────────────────────────────────
   TELEGRAM — заполни ОБА значения, отмеченные ←
   Внимание: токен виден всем в коде статического сайта.
   Если это важно — используй backend-вариант (см. чат).
   ───────────────────────────────────────────────────────────── */
const TG = {
  botToken: "8743276729:AAGKl_o1yWV5OnY3GnFnxFeooBtkOaLKcgY",
  adminChatId: "6391778110",            // ← твой личный chat_id (число). Узнать: напиши @userinfobot в Telegram
  botUsername: "sorgent_apply_bot", // ← @username бота без @ (из @BotFather)
};

function ApplyPage() {
  const [form, setForm] = useState({ name: "", telegram: "", email: "", age: "", city: "", activity: "", idea: "", why: "" });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.telegram) { alert("Пожалуйста, заполни Имя и Telegram."); return; }
    if (!TG.botToken || !TG.adminChatId) {
      alert("Форма ещё не настроена. Напиши нам напрямую в Telegram — кнопка выше.");
      return;
    }
    const esc = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    const L = ["📨 <b>Новая заявка на Sorgent</b>", "",
      `👤 <b>Имя:</b> ${esc(form.name)}`,
      `✈️ <b>Telegram:</b> ${esc(form.telegram)}`];
    if (form.email) L.push(`📧 <b>Email:</b> ${esc(form.email)}`);
    if (form.age) L.push(`🎂 <b>Возраст:</b> ${esc(form.age)}`);
    if (form.city) L.push(`📍 <b>Город:</b> ${esc(form.city)}`);
    if (form.activity) L.push(`💼 <b>Занятие:</b> ${esc(form.activity)}`);
    if (form.idea) L.push("", "💡 <b>Идея:</b>", esc(form.idea));
    if (form.why) L.push("", "🎯 <b>Зачем:</b>", esc(form.why));
    L.push("", `🕒 ${new Date().toLocaleString("ru-RU", { timeZone: "Europe/Moscow" })} (МСК)`);

    setSending(true);
    try {
      const r = await fetch(`https://api.telegram.org/bot${TG.botToken}/sendMessage`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ chat_id: TG.adminChatId, text: L.join("\n"), parse_mode: "HTML", disable_web_page_preview: true }),
      });
      const data = await r.json();
      if (!data.ok) {
        console.error("Telegram error:", data);
        alert("Не удалось отправить заявку. Попробуй ещё раз или напиши нам в Telegram напрямую.");
        return;
      }
      setSent(true);
    } catch (err) {
      console.error(err);
      alert("Ошибка сети. Проверь подключение и попробуй ещё раз.");
    } finally {
      setSending(false);
    }
  };

  const reset = () => { setForm({ name: "", telegram: "", email: "", age: "", city: "", activity: "", idea: "", why: "" }); setSent(false); };

  return (
    <div>
      <header className="apply-hero">
        <div className="hero-grid" />
        <div className="wrap apply-hero-inner">
          <div className="apply-hero-copy">
            <span className="rubric reveal d1">Лето 2026 · Махачкала</span>
            <h1 className="mh-title reveal d2" style={{ marginTop: 22 }}>Заявка на<br /><span className="stroke">участие.</span></h1>
            <p className="mh-sub reveal d3" style={{ marginTop: 30 }}>Мы не отбираем по корочкам. Главное — желание сделать что-то реальное, а не идеальное резюме.</p>
          </div>
          <div className="climb-wrap reveal d3">
            <svg className="climb-art" viewBox="0 0 480 430" fill="none" role="img" aria-label="Восхождение по технологиям">
              {/* ground */}
              <path d="M0 408 H474" stroke="currentColor" strokeWidth="1.5" strokeDasharray="2 7" opacity="0.4" />
              {/* ascending steps */}
              {[[150, 350], [214, 294], [278, 238], [342, 182], [406, 126]].map(([x, top], i) => (
                <g key={i}>
                  <rect x={x} y={top} width="58" height={408 - top} fill="currentColor" opacity="0.10" />
                  <rect x={x} y={top} width="58" height={408 - top} fill="none" stroke="currentColor" strokeWidth="1.6" opacity="0.4" />
                </g>
              ))}
              {/* aspiration arc */}
              <path d="M78 312 C 170 150, 330 64, 430 96" stroke="currentColor" strokeWidth="1.6" strokeDasharray="2 8" opacity="0.45" fill="none" />
              {/* brand marks on each step (cream so they read as the goal) */}
              {[[<MarkGoogle />, 150, 350], [<MarkClaude />, 214, 294], [<MarkOpenAI />, 278, 238], [<MarkMicrosoft />, 342, 182], [<MarkMeta />, 406, 126]].map(([mark, x, top], i) => (
                <g key={i} style={{ color: "var(--cream)" }} transform={`translate(${x + 29 - 22} ${top - 46}) scale(1.375)`}>{mark}</g>
              ))}
              {/* peak flag */}
              <g><path d="M435 96 V68" stroke="var(--terra-2)" strokeWidth="2.4" strokeLinecap="round" /><path d="M435 70 L453 76 L435 82 Z" fill="var(--terra-2)" /></g>
              {/* climber silhouette */}
              <g stroke="currentColor" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round" fill="none">
                <line x1="62" y1="340" x2="62" y2="372" />
                <path d="M62 372 L50 402" /><path d="M62 372 L78 398" />
                <path d="M62 348 L47 366" /><path d="M62 348 L86 336" />
              </g>
              <circle cx="62" cy="328" r="11" fill="currentColor" stroke="none" />
            </svg>
            <span className="climb-cap">Туда же, куда и мы.</span>
          </div>
        </div>
      </header>
      <section className="sec" style={{ paddingBottom: 0 }}>
        <div className="wrap">
          <div className="contact-alt">
            <span className="contact-alt-text">Не хочешь заполнять форму?</span>
            <a href="https://t.me/SorgentAii" target="_blank" rel="noopener noreferrer" className="btn-text contact-alt-btn">
              Напиши нам прямо в Telegram <Arrow s={14} />
            </a>
          </div>
        </div>
      </section>
      <section className="sec">
        <div className="wrap">
          <div className="form-card">
            {!sent ? (
              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 22 }}>
                <div className="form-grid">
                  <div className="field">
                    <label>Имя (как тебя зовут?) <span className="req">*</span></label>
                    <input value={form.name} onChange={set("name")} placeholder="Иван" />
                  </div>
                  <div className="field">
                    <label>Твой Telegram <span className="req">*</span></label>
                    <input value={form.telegram} onChange={set("telegram")} placeholder="@username" />
                  </div>
                  <div className="field">
                    <label>Email <span className="opt">(необязательно)</span></label>
                    <input type="email" value={form.email} onChange={set("email")} placeholder="hello@site.com" />
                  </div>
                  <div className="field">
                    <label>Возраст</label>
                    <input value={form.age} onChange={set("age")} placeholder="21" />
                  </div>
                  <div className="field">
                    <label>Чем занимаешься? <span className="opt">(необязательно)</span></label>
                    <input value={form.activity} onChange={set("activity")} placeholder="Дизайнер, студент, разработчик..." />
                  </div>
                  <div className="field full">
                    <label>Какая у тебя идея или проект?</label>
                    <textarea value={form.idea} onChange={set("idea")} placeholder="Хочу сделать ИИ-помощника для автосервиса..." />
                  </div>
                  <div className="field full">
                    <label>Зачем тебе в комьюнити? <span className="opt">(необязательно)</span></label>
                    <textarea value={form.why} onChange={set("why")} placeholder="Хочу запустить свой проект и найти команду единомышленников" />
                  </div>
                </div>
                <button type="submit" className="btn-primary form-submit" disabled={sending}>{sending ? "Отправляем…" : <React.Fragment>Отправить заявку <Send s={16} /></React.Fragment>}</button>
              </form>
            ) : (
              <div className="success">
                <div className="ic"><Check s={32} /></div>
                <h3>Заявка отправлена!</h3>
                <p>Я получил уведомление в Telegram и напишу тебе в {form.telegram ? (form.telegram.startsWith("@") ? form.telegram : "@" + form.telegram) : "Telegram"} в течение дня.</p>
                <div className="success-notes">
                  <span className="sn-lab">// что важно знать</span>
                  <div className="sn"><span className="sn-ic"><IcTool s={20} /></span><div><b>Нужен ноутбук.</b> Это обязательно — на нём ты и будешь делать свой продукт.</div></div>
                  <div className="sn"><span className="sn-ic"><IcCommunity s={20} /></span><div><b>Формат — оффлайн.</b> Если тебя примут, мы свяжемся и скажем, где именно проходят встречи.</div></div>
                  <div className="sn"><span className="sn-ic"><IcFlag s={20} /></span><div><b>Участие платное.</b> Стоимость назовём при отборе.</div></div>
                </div>
                <div style={{ display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
                  <a className="btn-ghost" href="#/">На главную</a>
                  <button className="btn-ghost" onClick={reset}>Отправить ещё раз</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}
window.ApplyPage = ApplyPage;