/* ===== Builders ===== */
const BUILDERS = {
  principles: [
    { title: "Реальный продукт, не сертификат на стене.", desc: "Каждый участник выходит с работающим продуктом в интернете. Не теория и не курсовая — настоящий продукт, ссылку на который можно скинуть кому угодно." },
    { title: "Встречи — это работа, не лекции.", desc: "20 минут — направление и нужные инструменты. Всё остальное время люди строят свой продукт, а команда Sorgent помогает с конкретными задачами." },
    { title: "Сообщество — фундамент, программа — вход в него.", desc: "После трёх недель никто не расходится. Все остаются в Sorgent Community и продолжают делать свои продукты вместе — поддерживают друг друга, запускают совместные проекты, растут годами." },
    { title: "Мы передаём то, что делаем сами.", desc: "Sorgent ведёт несколько собственных AI-продуктов. Мы делимся опытом из реальной работы — не из учебника и не из чужих кейсов." },
  ],
  specs: [
    ["Формат", "Оффлайн"], ["Длительность", "3 недели"], ["Встречи", "2 раза в неделю"],
    ["Финал", "День Запуска", "День Запуска — финальная встреча, участники представляют свои продукты публике."], ["Метод", "Чистая практика"],
  ],
  deliver: [
    { label: "Свой сайт", desc: "Соберём лендинг или сайт под твой проект — с доменом и публикацией в интернете.", tip: "Страница, которую можно скинуть ссылкой любому человеку." },
    { label: "AI-ассистент", desc: "Воплотим твою идею AI-помощника — для клиентов, для бизнеса, для узкой задачи.", tip: "Например ассистент автосервиса, репетитор по предмету, помощник в покупках." },
    { label: "MVP стартапа", desc: "Запустим первую рабочую версию твоего продукта — с регистрацией и базой данных.", tip: "Минимально работающая версия, которую уже можно показать первым клиентам." },
    { label: "Микро-сервис", desc: "Сделаем маленький рабочий инструмент, решающий одну конкретную задачу.", tip: "Например генератор резюме, калькулятор стоимости, узкий AI-помощник." },
  ],
  flow: [
    ["01", "Выбираем идею", "Разбираемся с архитектурой будущего продукта и выбираем стек технологий."],
    ["02", "Проектируем логику", "Учимся правильно ставить задачи моделям для идеального результата."],
    ["03", "Контент и картинки", "Генерируем тексты, логотип, графику и собираем базу знаний."],
    ["04", "Собираем интерфейс", "Верстаем первую версию сайта, подключаем домен и выходим в онлайн."],
    ["05", "Запускаем логику", "Связываем сервисы по API, настраиваем базы данных и автоматизации."],
    ["06", "Наводим блеск", "Полируем дизайн, чистим баги, готовим продукт к показу."],
    ["07", "День Запуска", "Финальная встреча. Показываем свои продукты сообществу."],
  ],
};

function BuildersPage() {
  return (
    <div>
      <MiniHero
        rubric="Программа Builders"
        title={<React.Fragment>Твоя идея.<br /><span className="stroke">Твой продукт.</span></React.Fragment>}
        sub="Три недели рядом с теми, кто уже выпускает свои продукты. На выходе — твой первый рабочий продукт и сообщество, которое остаётся."
        art={<Illo video="illo-builder-desk.mp4" src="illo-builder-desk.png" alt="Создатель за ноутбуком" max={480} anim="right" delay={0.3} />}
      />

      {/* Подход + specs */}
      <section className="sec">
        <div className="wrap bld-approach">
          <div>
            <span className="rubric" style={{ marginBottom: 20, display: "inline-flex" }}>Наш подход</span>
            <h2 className="sec-title" style={{ marginBottom: 12 }}>Чем это отличается от курса</h2>
            <div style={{ marginTop: 40 }}>
              {BUILDERS.principles.map((p, i) => (
                <div className="principle" key={i}>
                  <div className="num">{["I", "II", "III", "IV"][i]}</div>
                  <div><h4>{p.title}</h4><p>{p.desc}</p></div>
                </div>
              ))}
            </div>
          </div>
          <aside>
            <div className="specs">
              <span className="lab">// формат участия</span>
              {BUILDERS.specs.map(([k, v, tip], i) => (
                <div className="spec-row" key={i}>
                  <span className="k">{k}</span>
                  <span className="v">{v}{tip && <Tooltip text={tip} />}</span>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </section>

      {/* Что создаём */}
      <section className="sec alt">
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: 48 }}>
            <h2 className="sec-title">Что мы поможем тебе создать</h2>
            <p className="sec-lead">Никакой теории. На выходе — рабочий продукт в одной из четырёх форм.</p>
          </div>
          <div className="deliver-grid">
            {BUILDERS.deliver.map((d, i) => (
              <div className="deliver" key={i}>
                <h3>{d.label}<Tooltip text={d.tip} /></h3>
                <p>{d.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Маршрут */}
      <section className="sec">
        <div className="wrap-narrow">
          <span className="rubric" style={{ marginBottom: 20, display: "inline-flex" }}>Маршрут программы</span>
          <h2 className="sec-title" style={{ marginBottom: 44 }}>Как всё проходит</h2>
          <div>
            {BUILDERS.flow.map(([n, tt, dd], i) => (
              <div className="flow-row" key={i}>
                <span className="fn">/ {n}</span>
                <span className="ft">{tt}</span>
                <span className="fd">{dd}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* День Запуска feature */}
      <section className="launch">
        <div className="wrap">
          <span className="rubric" style={{ marginBottom: 24, display: "inline-flex" }}>Launch Day · финал программы</span>
          <h2 className="launch-title">День<br /><span style={{ WebkitTextStroke: "2px var(--terra)", WebkitTextFillColor: "transparent" }}>Запуска</span></h2>
          <div className="launch-cols">
            <div>
              <p style={{ color: "var(--ink-dim)", fontSize: 17, lineHeight: 1.65, maxWidth: "46ch" }}>
                Финальный день. Каждый показывает свой реальный работающий продукт публике — гостям, первым пользователям, остальным участникам. Это момент, когда идея становится фактом.
              </p>
              <blockquote className="launch-quote" style={{ marginTop: 36 }}>Пока продукт не показан публике — его не существует.</blockquote>
            </div>
            <div className="launch-art">
              <Illo video="illo-launch-stage.mp4" src="illo-launch-stage.png" alt="День Запуска — выступление на сцене" max={500} anim="up" />
            </div>
          </div>
        </div>
      </section>

      <CtaPoster
        rubric="Лето 2026 · Махачкала"
        title={<React.Fragment>Готов <span className="out">запустить</span> свой первый продукт?</React.Fragment>}
        note="3 недели работы. Сообщество, которое не заканчивается с программой."
        primary={["Подать заявку", "/apply"]}
        link={["Sorgent Community", "/community"]}
        scene="conquered"
      />
    </div>
  );
}
window.BuildersPage = BuildersPage;