/* ENGAGEMENT MODELS + FAQ — inspired in structure by Apple Hunter,
   but original copy & visual treatment. */

function Engagement() {
  const models = [
    {
      n: '/ 01', t: 'Fixed Price',
      lede: 'Стоимость и сроки фиксируем по детальному ТЗ до старта.',
      points: [
        'Полное ТЗ и оценка до подписания',
        'Фикс по объёму, по срокам и по бюджету',
        'Подходит для лендингов, MVP, ограниченных задач',
      ],
    },
    {
      n: '/ 02', badge: 'чаще всего', featured: true, t: 'Time & Materials',
      lede: 'Платите за фактическое время команды, скоуп гибкий.',
      points: [
        'Двухнедельные спринты, демо в конце каждого',
        'Прозрачный таймтрекинг, отчёты',
        'Скоуп меняется без переподписания',
        'Подходит для развития работающего продукта',
      ],
    },
    {
      n: '/ 03', t: 'Dedicated Team',
      lede: 'Выделенная команда под ваш продукт на длинный горизонт.',
      points: [
        'Подбор инженеров под ваш стек',
        'Управление со стороны заказчика',
        'Подходит для проектов от 6 месяцев',
      ],
    },
  ];
  return (
    <section className="section container" id="engagement">
      <div className="section-head">
        <h2>Форматы. <span className="italic">Под задачу&nbsp;— своя модель.</span></h2>
        <div className="num">04 / ФОРМАТЫ</div>
      </div>
      <div className="engage">
        {models.map((m, i) => (
          <div key={i} className={"engage-card " + (m.featured ? "featured" : "")}>
            <div className="e-num">
              {m.n}
              {m.badge && <span className="badge">{m.badge}</span>}
            </div>
            <h3>{m.t}</h3>
            <p className="lede">{m.lede}</p>
            <ul>
              {m.points.map((p, j) => <li key={j}>{p}</li>)}
            </ul>
            <a href="#contact" className="e-cta">Обсудить формат →</a>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 22, fontSize: 13, color: 'var(--ink-2)',
        fontFamily: 'var(--font-mono)', letterSpacing: '.02em',
      }}>
        Стоимость зависит от объёма и состава команды. Оценку и план&nbsp;— в&nbsp;течение 3–5 рабочих дней после брифа.
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    {
      q: 'Сколько стоит разработка приложения?',
      a: 'MVP мобильного приложения на одну платформу — от 300 000 ₽ и 4–8 недель. Полноценный кроссплатформенный продукт (iOS + Android) с бэкендом — от 1.2 млн ₽ и 3–5 месяцев. После брифа пришлём точную оценку с разбивкой по командам и срокам.',
    },
    {
      q: 'Подписываете ли NDA до созвона?',
      a: 'Да. Высылаем типовое NDA по запросу и подписываем до первого технического созвона. Готовы работать и по вашей форме соглашения.',
    },
    {
      q: 'Передаёте ли исходный код после релиза?',
      a: 'Да. Исходный код и право собственности на него передаются заказчику по акту в момент сдачи проекта.',
    },
    {
      q: 'Какие гарантии вы даёте?',
      a: '3 месяца бесплатных правок и исправлений критических багов после релиза. SLA-сопровождение оформляется отдельным договором.',
    },
    {
      q: 'Можно ли начать с пилота?',
      a: 'Да. Минимальный формат — Discovery Phase: 1–2 недели работы дизайн-исследователя и архитектора, на выходе — прототип и оценка большого проекта. Стоит фиксированно от 150 000 ₽. Также есть тариф «Лендинг / Бот» — от 80 000 ₽ за 1–2 недели.',
    },
    {
      q: 'Подключитесь к уже идущему проекту?',
      a: 'Да. Берём проекты с другой студии или после внутренней команды: проводим аудит кода, перенимаем процессы, докручиваем то, что не успели. Онбординг занимает 1–2 недели — после этого работаем как обычная команда заказчика.',
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section container" id="faq">
      <div className="section-head">
        <h2>FAQ. <span className="italic">Перед тем как&nbsp;написать.</span></h2>
        <div className="num">07 / ВОПРОСЫ</div>
      </div>
      <div className="faq">
        {items.map((it, i) => (
          <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
            <button className="q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="num">0{i+1}</span>
              <span className="q-text">{it.q}</span>
              <span className="plus">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                </svg>
              </span>
            </button>
            <div className="a"><div><p>{it.a}</p></div></div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Terminal() {
  return (
    <div className="terminal">
      <div className="terminal-head">
        <div className="dots"><span></span><span></span><span></span></div>
        <span className="path">~/d-one/deploy · production</span>
      </div>
      <div className="terminal-body">
        <span className="ln"><span className="cm"># только что задеплоили релиз клиента</span></span>
        <span className="ln"><span className="pf">$</span> kubectl rollout status deploy/core-api</span>
        <span className="ln cm">  Waiting for rollout to finish: 3 of 4 updated replicas…</span>
        <span className="ln"><span className="ok">  ✓ deployment "core-api" successfully rolled out</span></span>
        <span className="ln"><span className="pf">$</span> make canary RELEASE=v4.2.1</span>
        <span className="ln cm">  → build · go build -o bin/api ./cmd/api</span>
        <span className="ln cm">  → test  · go test ./… <span className="ok">passed</span></span>
        <span className="ln cm">  → ship  · 10% traffic · p95 = 118ms</span>
        <span className="ln"><span className="ok">  ✓ zero downtime · errors 0.0006%</span></span>
        <span className="ln"><span className="pf">$</span> <span className="cursor-blink"></span></span>
      </div>
    </div>
  );
}

window.Engagement = Engagement;
window.FAQ = FAQ;
window.Terminal = Terminal;