// app.jsx — Лендинг технического специалиста GetCourse
const { useState, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#ff5b2e",
  "hero": "split",
  "density": "regular"
} /*EDITMODE-END*/;

// ─── tiny inline icons ─────────────────────────────────────────────────────
const Ic = {
  arrow: (p) =>
  <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M3 8h10M9 4l4 4-4 4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  tg: (p) =>
  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" {...p}>
      <path d="M9.7 15.3 9.5 19c.3 0 .5-.1.7-.3l1.7-1.6 3.5 2.5c.6.4 1.1.2 1.3-.6l2.4-11.2c.2-.9-.3-1.3-1-1L4.6 11.4c-.9.4-.9.9-.2 1.1l3.6 1.1 8.3-5.2c.4-.3.8-.1.5.2" />
    </svg>,

  max: (p) =>
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 19V5l9 11L21 5v14" />
    </svg>,

  check: (p) =>
  <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}>
      <path d="M3 8.5 6.5 12 13 5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  plus: (p) =>
  <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M8 3v10M3 8h10" strokeLinecap="round" />
    </svg>,

  minus: (p) =>
  <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M3 8h10" strokeLinecap="round" />
    </svg>

};

// ─── NAV ────────────────────────────────────────────────────────────────────
function Nav() {
  return (
    <header className="wrap">
      <nav className="nav">
        <a href="#top" className="nav-brand">
          <span className="dot"></span>
          <span>Нина Горбачева</span>
        </a>
        <div className="nav-links">
          <a href="#about">О себе</a>
          <a href="#services">Услуги</a>
          <a href="#cases">Кейсы</a>
          <a href="#pricing">Тарифы</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#contact" className="nav-cta">
          Напиши мне <Ic.arrow />
        </a>
      </nav>
    </header>);

}

// ─── HERO ───────────────────────────────────────────────────────────────────
function Hero({ variant }) {
  const eyebrow =
  <div className="eyebrow">
      <span className="mono">Технический специалист GetCourse</span>
    </div>;

  const headline =
  <h1 className="h-display">
      Настраиваю<br />
      <span className="serif" style={{ color: "var(--accent)" }}>платформу</span>{" "}
      так,<br />
      чтобы она работала
      <span style={{ color: "var(--fg-3)" }}> — без вашего участия.</span>
    </h1>;

  const sub =
  <p className="lede">
      Воронки, рассылки, интеграции, геймификация, вебинары. Беру задачи аккуратно
      и довожу до результата — на связи, в срок и с пояснением, что и зачем сделано.
    </p>;

  const ctas =
  <div className="row">
      <a href="https://t.me/nino4ka_go" target="_blank" className="btn">Напиши в Telegram <Ic.tg /></a>
      <a href="https://max.ru/u/f9LHodD0cOJOGtEBpdCYbkrEa82Ep8nEHYj6ACqPpTzrMpO5hU4_KmUsGDk" target="_blank" className="btn" style={{ background: "var(--fg)", color: "var(--bg)", border: "1px solid var(--fg)" }}>Напиши в MAX <Ic.max /></a>
      <a href="#services" className="btn btn-ghost">Что я делаю <Ic.arrow /></a>
    </div>;

  const meta =
  <div className="row" style={{ gap: 18, color: "var(--fg-3)", fontSize: 13, fontFamily: 'JetBrains Mono' }}>
      <span className="pill"><span className="live"></span> Свободна для проектов</span>
      <span>Ответ в течение часа</span>
      <span></span>
    </div>;


  const photo =
  <div style={{
    position: "relative",
    borderRadius: 24,
    overflow: "hidden",
    background: "#0d0d0e",
    border: "1px solid var(--line)",
    aspectRatio: "4/5",
    width: "100%",
    maxWidth: "100%"
  }}>
      <img src="assets/portrait-v5.png" alt="Нина Горбачева" style={{
      position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block"
    }} />
      {/* edge blends with page bg */}
      <div style={{
      position: "absolute", inset: 0, pointerEvents: "none",
      background: "linear-gradient(180deg, rgba(13,13,14,0) 55%, rgba(13,13,14,.55) 100%)"
    }} />
      <div style={{
      position: "absolute", inset: 0,
      display: "flex", alignItems: "flex-end", justifyContent: "space-between",
      padding: 20, fontFamily: "JetBrains Mono", fontSize: 11, color: "rgba(244,239,230,.7)", letterSpacing: ".06em"
    }}>
        <span></span>
        <span></span>
      </div>
      <div style={{
      position: "absolute", top: 20, left: 20,
      fontFamily: "Lora", fontStyle: "italic",
      fontSize: "clamp(28px,3vw,40px)", color: "rgba(244,239,230,.95)", lineHeight: 1,
      textShadow: "0 2px 24px rgba(0,0,0,.5)"
    }}>
        Нина
      </div>
    </div>;


  if (variant === "center") {
    return (
      <section className="wrap" id="top" style={{ paddingTop: "clamp(20px,4vw,40px)", paddingBottom: "clamp(64px,8vw,120px)" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 28 }}>
          {eyebrow}
          <h1 className="h-display" style={{ maxWidth: "18ch" }}>
            Настраиваю <span className="serif" style={{ color: "var(--accent)" }}>GetCourse</span> так,
            чтобы платформа<br />работала на ваш продукт.
          </h1>
          <div style={{ maxWidth: "56ch" }}>{sub}</div>
          {ctas}
          {meta}
        </div>
      </section>);

  }

  if (variant === "split") {
    return (
      <section className="wrap" id="top" style={{ paddingTop: "clamp(20px,4vw,40px)", paddingBottom: "clamp(64px,8vw,120px)" }}>
        <div className="hero-split" style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: "clamp(28px,4vw,64px)", alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24, minWidth: 0 }}>
            {eyebrow}
            {headline}
            {sub}
            {ctas}
            {meta}
          </div>
          {photo}
        </div>
        <style>{`@media (max-width:820px){.hero-split{grid-template-columns:1fr !important;gap:32px !important}.hero-split > div:last-child{order:-1;max-width:420px;margin:0 auto;width:100%}}`}</style>
      </section>);

  }

  // asymmetric (default)
  return (
    <section className="wrap" id="top" style={{ paddingTop: "clamp(20px,4vw,40px)", paddingBottom: "clamp(64px,8vw,120px)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,360px)", gap: "clamp(28px,4vw,72px)", alignItems: "end" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          {eyebrow}
          {headline}
          <div style={{ display: "flex", gap: 48, flexWrap: "wrap", alignItems: "flex-end", marginTop: 8 }}>
            <div style={{ flex: "1 1 320px", minWidth: 0 }}>{sub}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {ctas}
              {meta}
            </div>
          </div>
        </div>
        <div style={{ transform: "translateY(-8px)" }}>{photo}</div>
      </div>
    </section>);

}

// ─── MARQUEE STRIP (instead of generic stats) ──────────────────────────────
function Marquee() {
  const items = [
  "Автоворонки", "Цепочки писем", "Платёжные интеграции", "CRM",
  "Телефония", "Геймификация", "Настройка вебинаров", "Модерация",
  "Email-рассылки", "Базовая настройка", "Аудит платформы", "Тренинги"];

  return (
    <div style={{
      borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
      padding: "18px 0", overflow: "hidden", position: "relative"
    }}>
      <div style={{
        display: "flex", gap: 48,
        animation: "twk-mq 38s linear infinite",
        whiteSpace: "nowrap",
        fontFamily: "JetBrains Mono", fontSize: 13, letterSpacing: ".06em",
        color: "var(--fg-2)", textTransform: "uppercase"
      }}>
        {[...items, ...items, ...items].map((t, i) =>
        <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 48 }}>
            {t}
            <span style={{ width: 5, height: 5, borderRadius: 99, background: "var(--accent)", display: "inline-block" }} />
          </span>
        )}
      </div>
      <style>{`@keyframes twk-mq{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}`}</style>
    </div>);

}

// ─── ABOUT ──────────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="about" className="wrap" style={{ paddingTop: "clamp(80px,10vw,140px)", paddingBottom: "clamp(60px,7vw,100px)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "clamp(40px,6vw,96px)", alignItems: "start" }} className="about-grid">
        <div>
          <div className="eyebrow"><span className="mono">01 — Обо мне</span></div>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Свежий взгляд<br />
            <span className="serif" style={{ color: "var(--accent)" }}>+ аккуратные руки</span>
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: "60ch" }}>
          <p style={{ margin: 0, fontSize: "clamp(18px,1.6vw,22px)", lineHeight: 1.45, color: "var(--fg)" }}>
            Я — <b>Нина Горбачева</b>, технический специалист GetCourse.
            Прошла длинный 4,5-месячный курс в школе <span className="serif">GetHelpers </span>
            и параллельно учусь внедрять ИИ-агентов в обучающие проекты.
          </p>
          <p style={{ margin: 0, color: "var(--fg-2)", fontSize: 16, lineHeight: 1.6 }}>
            Беру задачи, в которых уверена, и делаю их так, как будто это мой собственный
            продукт: с пояснениями, документацией и видео-передачей по итогу. Если задача
            крупнее моей зоны компетенции — честно скажу и подскажу, к кому обратиться.
            Ценю прозрачность и долгие отношения больше, чем разовые сделки.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2,minmax(0,1fr))", gap: 14, marginTop: 8 }}>
            {[
            ["Реагирую в течение часа", "в рабочее время"],
            ["Документирую все настройки", "видео + текст"],
            ["Современные подходы", "ИИ-инструменты в работе"],
            ["Прозрачные сроки", "фиксируем до старта"]].
            map(([a, b], i) =>
            <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{
                marginTop: 6, width: 6, height: 6, borderRadius: 99, background: "var(--accent)",
                flex: "0 0 6px", display: "inline-block"
              }} />
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{a}</div>
                  <div style={{ fontSize: 13, color: "var(--fg-3)" }}>{b}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`@media (max-width:820px){.about-grid{grid-template-columns:1fr !important;gap:32px !important}}`}</style>
    </section>);

}

// ─── SERVICES ───────────────────────────────────────────────────────────────
function Services() {
  const items = [
  {
    n: "01", t: "Базовая настройка GetCourse",
    d: "Запуск с нуля: домен, страницы, тренинги, права доступа, формы, чат-боты, корзина.",
    tags: ["Под ключ", "2–7 дней"]
  },
  {
    n: "02", t: "Автоворонки и цепочки писем",
    d: "Логика процессов, сегментация, триггеры, A/B-варианты, отчёты по доходимости и доходу.",
    tags: ["Email + SMS", "Любая сложность"]
  },
  {
    n: "03", t: "Интеграции",
    d: "Платёжные системы, CRM, телефония, мессенджеры, аналитика.",
    tags: ["ЮKassa, ЮMoney", "amoCRM, Bitrix24"]
  },
  {
    n: "04", t: "Геймификация",
    d: "Баллы, уровни, рейтинги учеников — настройка под механику курса и удержание.",
    tags: ["Под механику", "С тестированием"]
  },
  {
    n: "05", t: "Настройка и модерация вебинаров",
    d: "GetCourse-вебинар, автовебинар, модерация, опросы, дожимы.",
    tags: ["Live-смены", "До 5 000 участников"]
  },
  {
    n: "06", t: "Email-рассылки и сегменты",
    d: "Шаблоны, верстка, тэги, динамические поля, прогрев базы, защита от спама.",
    tags: ["Шаблоны GC", "Прогрев домена"]
  }];

  return (
    <section id="services" style={{ paddingTop: "clamp(80px,10vw,140px)", paddingBottom: "clamp(60px,7vw,100px)", background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 48 }}>
          <div>
            <div className="eyebrow"><span className="mono">02 — Услуги</span></div>
            <h2 className="h-section" style={{ marginTop: 18, maxWidth: "14ch" }}>
              Шесть вещей,<br />
              <span className="serif" style={{ color: "var(--accent)" }}>которые делаю хорошо</span>
            </h2>
          </div>
          <p className="lede" style={{ margin: 0, maxWidth: "38ch" }}>
            Можно взять отдельную задачу — или собрать комплекс. Сначала созваниваемся,
            фиксируем объём и сроки, потом работаем.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 24, overflow: "hidden" }} className="svc-grid">
          {items.map((it, i) =>
          <div key={i} style={{ background: "var(--bg)", padding: "32px 28px", minHeight: 260, display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 24, position: "relative" }}>
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: ".1em" }}>{it.n}</span>
                  <Ic.plus style={{ color: "var(--fg-3)" }} />
                </div>
                <h3 style={{ margin: "0 0 12px", fontSize: 22, fontWeight: 600, letterSpacing: "-.02em", lineHeight: 1.15 }}>{it.t}</h3>
                <p style={{ margin: 0, color: "var(--fg-2)", fontSize: 14, lineHeight: 1.55 }}>{it.d}</p>
              </div>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                {it.tags.map((x, k) => <span key={k} className="pill" style={{ padding: "4px 10px", fontSize: 11 }}>{x}</span>)}
              </div>
            </div>
          )}
        </div>
        <style>{`
          @media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
          @media (max-width:620px){.svc-grid{grid-template-columns:1fr !important}}
        `}</style>
      </div>
    </section>);

}

// ─── CASES ──────────────────────────────────────────────────────────────────
function Cases() {
  const cases = [
  {
    tag: "Воронка",
    title: "Довебинарная воронка для запуска курса",
    role: "Ассистент технического специалиста",
    what: "Собрала цепочку из 5 писем, серию напоминаний и регистрационную форму. Подготовила сегменты, проверила корректность UTM-разметки и доходимость на вебинар.",
    result: [
    ["5 писем", "цепочка прогрева"],
    ["3 напоминания", "до и в день вебинара"],
    ["0 сбоев", "на день старта"]]

  },
  {
    tag: "Лендинги",
    title: "Доработка двух посадочных страниц",
    role: "Самостоятельная задача",
    what: "Привела две страницы к единому виду на мобильных, переработала формы, заменила сломанные ссылки на чат-бота и проверила связки с воронкой.",
    result: [
    ["2 лендинга", "приведены к виду"],
    ["100%", "форм ведут в воронку"],
    ["Mobile-first", "обе страницы"]]

  },
  {
    tag: "Поддержка",
    title: "Техподдержка проекта на стороне коллеги",
    role: "Помощник senior-специалиста",
    what: "Подхватывала рутину в проекте: настройка тренингов, права доступа, отладка интеграций и проверка автоматических процессов. Освоила работу в большой настроенной экосистеме.",
    result: [
    ["12+ задач", "разного характера"],
    ["Без правок", "от наставника"],
    ["Готова масштабировать", "формат на свои проекты"]]

  }];

  return (
    <section id="cases" className="wrap" style={{ paddingTop: "clamp(80px,10vw,140px)", paddingBottom: "clamp(60px,7vw,100px)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 48 }}>
        <div>
          <div className="eyebrow"><span className="mono">03 — Кейсы</span></div>
          <h2 className="h-section" style={{ marginTop: 18, maxWidth: "16ch" }}>
            Не громко — но<br />
            <span className="serif" style={{ color: "var(--accent)" }}>по делу</span>
          </h2>
        </div>
        <p className="lede" style={{ margin: 0, maxWidth: "40ch" }}>
          Пока работала в команде наставника. Здесь — реальные задачи, к которым прикладывала руки.
          Без приукрашиваний.
        </p>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 0, border: "1px solid var(--line)", borderRadius: 24, overflow: "hidden" }}>
        {cases.map((c, i) =>
        <div key={i} style={{
          display: "grid",
          gridTemplateColumns: "100px 1.2fr 1.6fr 1fr",
          gap: "clamp(20px,3vw,40px)",
          padding: "clamp(24px,3vw,40px)",
          borderTop: i ? "1px solid var(--line)" : "none",
          background: "var(--surface)",
          alignItems: "start"
        }} className="case-row">
            <div className="mono" style={{ fontSize: 11, letterSpacing: ".1em", color: "var(--fg-3)" }}>0{i + 1}</div>
            <div>
              <div style={{ display: "inline-flex", fontFamily: "JetBrains Mono", fontSize: 11, padding: "4px 10px", borderRadius: 99, border: "1px solid var(--line-strong)", color: "var(--fg-2)", letterSpacing: ".06em", textTransform: "uppercase" }}>{c.tag}</div>
              <h3 style={{ margin: "14px 0 6px", fontSize: "clamp(22px,2.2vw,28px)", fontWeight: 500, letterSpacing: "-.02em", lineHeight: 1.15 }}>{c.title}</h3>
              <div style={{ fontSize: 13, color: "var(--fg-3)" }}>{c.role}</div>
            </div>
            <div style={{ color: "var(--fg-2)", fontSize: 15, lineHeight: 1.6 }}>{c.what}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {c.result.map(([n, t], k) =>
            <div key={k} style={{ display: "flex", flexDirection: "column", borderLeft: "1px solid var(--accent)", paddingLeft: 14 }}>
                  <span style={{ fontSize: "clamp(22px,2vw,26px)", fontWeight: 500, letterSpacing: "-.02em" }}>{n}</span>
                  <span style={{ fontSize: 12, color: "var(--fg-3)" }}>{t}</span>
                </div>
            )}
            </div>
          </div>
        )}
      </div>
      <style>{`
        @media (max-width:980px){.case-row{grid-template-columns:1fr !important}}
      `}</style>
    </section>);

}

// ─── CERTIFICATES ───────────────────────────────────────────────────────────
function Certs() {
  const certs = [
  { name: "GetHelpers — курс «Технический специалист»", date: "2025 · 4,5 месяца", status: "Выпускница", t: "Длинная программа с домашними заданиями и наставником. Реальные проекты в портфолио." },
  { name: "GetCourse — обучение по платформе", date: "2026", status: "Пройдено", t: "Официальные обучающие материалы по основным разделам GetCourse." },
  { name: "ИИ-агенты в обучающих продуктах", date: "2026— в процессе", status: "Учусь сейчас", t: "Внедрение ИИ-ассистентов в воронки, поддержку и проверку заданий." }];

  return (
    <section style={{ paddingTop: "clamp(80px,10vw,140px)", paddingBottom: "clamp(60px,7vw,100px)", background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: "clamp(32px,5vw,80px)", alignItems: "start" }} className="cert-grid">
          <div>
            <div className="eyebrow"><span className="mono">04 — Обучение</span></div>
            <h2 className="h-section" style={{ marginTop: 18, maxWidth: "14ch" }}>
              Где училась<br />
              <span className="serif" style={{ color: "var(--accent)" }}>и продолжаю</span>
            </h2>
            <p style={{ margin: "24px 0 0", color: "var(--fg-2)", maxWidth: "36ch", lineHeight: 1.6 }}>
              Учусь у тех, кто работает с GetCourse каждый день. Подходы — актуальные, а не «как было пять лет назад».
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {certs.map((c, i) =>
            <div key={i} style={{
              background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 18,
              padding: "22px 24px",
              display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 20, alignItems: "center"
            }} className="cert-row">
                <div className="mono" style={{ fontSize: 11, letterSpacing: ".1em", color: "var(--fg-3)" }}>0{i + 1}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 17, letterSpacing: "-.01em", marginBottom: 4 }}>{c.name}</div>
                  <div style={{ fontSize: 13, color: "var(--fg-3)", marginBottom: 8 }}>{c.date}</div>
                  <div style={{ fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55 }}>{c.t}</div>
                </div>
                <div style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                padding: "6px 12px", borderRadius: 99,
                background: c.status === "Учусь сейчас" ? "rgba(255,91,46,.12)" : "var(--surface)",
                color: c.status === "Учусь сейчас" ? "var(--accent)" : "var(--fg-2)",
                border: "1px solid var(--line-strong)",
                fontFamily: "JetBrains Mono", fontSize: 11, letterSpacing: ".06em",
                whiteSpace: "nowrap"
              }}>
                  {c.status === "Учусь сейчас" && <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent)" }} />}
                  {c.status}
                </div>
              </div>
            )}
          </div>
        </div>
        <style>{`
          @media (max-width:880px){.cert-grid{grid-template-columns:1fr !important}.cert-row{grid-template-columns:40px 1fr !important}.cert-row > :last-child{grid-column:1/-1}}
        `}</style>
      </div>
    </section>);

}

// ─── PRICING ────────────────────────────────────────────────────────────────
function Pricing() {
  const tiers = [
  {
    name: "Точечная задача",
    price: "от 2 000",
    sub: "за задачу",
    ideal: "Когда что-то сломалось или нужно настроить одну вещь.",
    features: [
    "Настройка одной формы / страницы / интеграции",
    "Правки в существующих процессах",
    "Видео-передача по итогу",
    "Срок: 1–2 дня"]

  },
  {
    name: "Базовая настройка",
    price: "от 15 000",
    sub: "за пакет",
    ideal: "Подойдёт, если запускаете курс или мини-продукт.",
    features: [
    "Тренинг + продающая страница + форма",
    "Корзина и платёжные интеграции",
    "Базовая воронка из 3 писем",
    "Срок: 5–7 дней",
    "Документация по проекту"],

    featured: true
  },
  {
    name: "Под ключ",
    price: "от 35 000",
    sub: "за проект",
    ideal: "Большой запуск или перенос. Беру после созвона и оценки.",
    features: [
    "Полная упаковка платформы",
    "Воронка + рассылки + сегменты",
    "Все необходимые интеграции",
    "Геймификация (при необходимости)",
    "Сопровождение 14 дней после сдачи"]

  }];

  return (
    <section id="pricing" className="wrap" style={{ paddingTop: "clamp(80px,10vw,140px)", paddingBottom: "clamp(60px,7vw,100px)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 48 }}>
        <div>
          <div className="eyebrow"><span className="mono">05 — Тарифы</span></div>
          <h2 className="h-section" style={{ marginTop: 18, maxWidth: "16ch" }}>
            Прозрачно,<br />
            <span className="serif" style={{ color: "var(--accent)" }}>без сюрпризов в счёте</span>
          </h2>
        </div>
        <p className="lede" style={{ margin: 0, maxWidth: "40ch" }}>
          Стоимость зависит от объёма. Цены ниже — стартовые ориентиры, точную смету
          собираем после короткого созвона.
        </p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 14 }} className="price-grid">
        {tiers.map((t, i) =>
        <div key={i} style={{
          background: t.featured ? "var(--fg)" : "var(--surface)",
          color: t.featured ? "var(--bg)" : "var(--fg)",
          border: "1px solid var(--line)",
          borderRadius: 24,
          padding: "32px 28px",
          display: "flex", flexDirection: "column", gap: 24,
          position: "relative"
        }}>
            {t.featured &&
          <span style={{
            position: "absolute", top: -12, left: 28,
            background: "var(--accent)", color: "var(--accent-ink)",
            padding: "4px 12px", borderRadius: 99,
            fontFamily: "JetBrains Mono", fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase"
          }}>Часто выбирают</span>
          }
            <div>
              <div style={{ fontFamily: "JetBrains Mono", fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", opacity: .6, marginBottom: 8 }}>0{i + 1}</div>
              <h3 style={{ margin: 0, fontSize: 24, fontWeight: 600, letterSpacing: "-.01em" }}>{t.name}</h3>
              <p style={{ margin: "10px 0 0", fontSize: 14, opacity: .7, lineHeight: 1.5 }}>{t.ideal}</p>
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
              <span style={{ fontSize: "clamp(36px,4vw,52px)", fontWeight: 500, letterSpacing: "-.03em", lineHeight: 1 }}>{t.price}</span>
              <span style={{ fontSize: 14, opacity: .6 }}>₽ {t.sub}</span>
            </div>
            <ul className="ul-clean" style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 14 }}>
              {t.features.map((f, k) =>
            <li key={k} style={{ display: "flex", gap: 10, alignItems: "flex-start", opacity: .9 }}>
                  <span style={{ marginTop: 2, color: t.featured ? "var(--accent)" : "var(--accent)" }}><Ic.check /></span>
                  <span>{f}</span>
                </li>
            )}
            </ul>
            <a href="#contact" style={{
            marginTop: "auto",
            display: "inline-flex", alignItems: "center", justifyContent: "space-between",
            padding: "14px 18px", borderRadius: 99,
            background: t.featured ? "var(--accent)" : "transparent",
            color: t.featured ? "var(--accent-ink)" : "inherit",
            border: t.featured ? "1px solid var(--accent)" : "1px solid var(--line-strong)",
            fontWeight: 600, fontSize: 14
          }}>
              Обсудить задачу <Ic.arrow />
            </a>
          </div>
        )}
      </div>
      <style>{`
        @media (max-width:980px){.price-grid{grid-template-columns:1fr !important}}
      `}</style>
    </section>);

}

// ─── TESTIMONIALS ───────────────────────────────────────────────────────────
function Reviews() {
  const items = [
  {
    q: "Нина забрала у меня кусок рутины — настройку тренингов и проверку прав. Сделала аккуратно, переспросила всё, что было непонятно. Беру в команду на постоянной основе.",
    who: "Анна Н.", role: "технический специалист GetCourse, наставник"
  },
  {
    q: "Перед запуском надо было быстро привести два лендинга к нормальному виду. Нина подключилась в тот же день, к утру всё работало. Чисто и без переделок.",
    who: "Кирилл М.", role: "продюсер онлайн-школы"
  },
  {
    q: "Понравилось, что после каждой задачи присылает короткое видео — что и где сделано. Не нужно держать в голове настройки, всё задокументировано.",
    who: "Ольга В.", role: "автор курса по психологии"
  }];

  return (
    <section style={{ paddingTop: "clamp(80px,10vw,140px)", paddingBottom: "clamp(60px,7vw,100px)", background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 48 }}>
          <div>
            <div className="eyebrow"><span className="mono">06 — Отзывы</span></div>
            <h2 className="h-section" style={{ marginTop: 18, maxWidth: "14ch" }}>
              Что говорят<br />
              <span className="serif" style={{ color: "var(--accent)" }}>те, с кем работаю</span>
            </h2>
          </div>
          <div style={{ maxWidth: "34ch", color: "var(--fg-3)", fontSize: 13, fontFamily: "JetBrains Mono", letterSpacing: ".04em" }}>
            * Имена сокращены. Полные отзывы и контакты — по запросу в Telegram.
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 14 }} className="rev-grid">
          {items.map((r, i) =>
          <figure key={i} style={{
            margin: 0, background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 20,
            padding: "28px 26px", display: "flex", flexDirection: "column", gap: 24, minHeight: 320
          }}>
              <div style={{ fontFamily: "Lora", fontStyle: "italic", fontSize: 60, color: "var(--accent)", lineHeight: .5, height: 24 }}>“</div>
              <blockquote style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: "var(--fg)", flex: 1 }}>
                {r.q}
              </blockquote>
              <figcaption style={{ borderTop: "1px solid var(--line)", paddingTop: 16 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{r.who}</div>
                <div style={{ fontSize: 13, color: "var(--fg-3)" }}>{r.role}</div>
              </figcaption>
            </figure>
          )}
        </div>
        <style>{`
          @media (max-width:980px){.rev-grid{grid-template-columns:1fr !important}}
        `}</style>
      </div>
    </section>);

}

// ─── FAQ ────────────────────────────────────────────────────────────────────
function FAQItem({ q, a, open, onClick }) {
  return (
    <div style={{ borderBottom: "1px solid var(--line)" }}>
      <button onClick={onClick} style={{
        all: "unset", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
        width: "100%", padding: "24px 0", cursor: "pointer"
      }}>
        <span style={{ fontSize: "clamp(17px,1.6vw,20px)", fontWeight: 500, letterSpacing: "-.01em", lineHeight: 1.35 }}>{q}</span>
        <span style={{
          width: 32, height: 32, borderRadius: 99, border: "1px solid var(--line-strong)",
          display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
          color: "var(--fg-2)"
        }}>{open ? <Ic.minus /> : <Ic.plus />}</span>
      </button>
      <div style={{
        maxHeight: open ? 500 : 0, overflow: "hidden", transition: "max-height .35s ease"
      }}>
        <p style={{ margin: 0, paddingBottom: 24, paddingRight: 48, color: "var(--fg-2)", fontSize: 15, lineHeight: 1.6, maxWidth: "68ch" }}>{a}</p>
      </div>
    </div>);

}
function FAQ() {
  const qs = [
  { q: "Какие задачи вы берёте, а какие — нет?", a: "Беру: базовую настройку, воронки, рассылки, интеграции, геймификацию, поддержку вебинаров и работу с лендингами в редакторе GetCourse. Не беру: разработку с нуля сложных кастомных скриптов и масштабные миграции между платформами — для такого порекомендую более опытного коллегу." },
  { q: "Сколько времени занимает работа?", a: "Точечная задача — 1–2 дня, базовая настройка — 5–7 дней, проект под ключ — 2–4 недели в зависимости от объёма. Точные сроки фиксируем после короткого созвона и оценки." },
  { q: "Как мы будем общаться?", a: "Основной канал — Telegram. Для созвонов — Zoom или Telegram. Все настройки документирую: высылаю короткие видео и текстовое резюме после каждой задачи, чтобы вы могли вернуться к ним позже." },
  { q: "Какие гарантии?", a: "Все настройки тестирую сама перед сдачей. В течение 14 дней после завершения проекта правлю баги и неточности бесплатно. На отдельные задачи действуют предоплата 50% и пост-оплата 50% после сдачи." },
  { q: "Работаете с большими школами?", a: "Беру задачи в команде с другими специалистами или как помощник в большой инфраструктуре. Самостоятельно крупный проект пока не веду — честно об этом скажу на созвоне." },
  { q: "Что нужно, чтобы стартовать?", a: "Доступ к аккаунту GetCourse в роли «администратор», короткое описание задачи и желаемых сроков. После созвона согласовываем смету, фиксируем объём и начинаем." }];

  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="wrap" style={{ paddingTop: "clamp(80px,10vw,140px)", paddingBottom: "clamp(60px,7vw,100px)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: "clamp(40px,6vw,96px)", alignItems: "start" }} className="faq-grid">
        <div>
          <div className="eyebrow"><span className="mono">07 — FAQ</span></div>
          <h2 className="h-section" style={{ marginTop: 18, maxWidth: "12ch" }}>
            Частые<br />
            <span className="serif" style={{ color: "var(--accent)" }}>вопросы</span>
          </h2>
          <p style={{ margin: "24px 0 0", color: "var(--fg-2)", maxWidth: "32ch", lineHeight: 1.6 }}>
            Если не нашли своего вопроса — напишите в Telegram, отвечаю в течение часа.
          </p>
        </div>
        <div>
          {qs.map((q, i) =>
          <FAQItem key={i} {...q} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
          )}
        </div>
      </div>
      <style>{`@media (max-width:860px){.faq-grid{grid-template-columns:1fr !important}}`}</style>
    </section>);

}

// ─── CONTACT ────────────────────────────────────────────────────────────────
function Contact() {
  return (
    <section id="contact" style={{ paddingTop: "clamp(80px,10vw,140px)", paddingBottom: "clamp(60px,7vw,100px)", background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{
          background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 32,
          padding: "clamp(40px,6vw,80px)",
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "clamp(32px,5vw,80px)",
          alignItems: "center", position: "relative", overflow: "hidden"
        }} className="cta-card">
          {/* decorative */}
          <div style={{
            position: "absolute", right: -120, top: -120, width: 340, height: 340, borderRadius: "50%",
            background: "radial-gradient(circle, var(--accent) 0%, transparent 65%)", opacity: .18, pointerEvents: "none"
          }} />
          <div style={{ position: "relative", zIndex: 1 }}>
            <div className="eyebrow"><span className="mono">08 — Контакт</span></div>
            <h2 className="h-section" style={{ marginTop: 18, fontSize: "clamp(36px,5.6vw,72px)", maxWidth: "14ch" }}>
              Расскажите<br />
              <span className="serif" style={{ color: "var(--accent)" }}>о задаче.</span><br />
              Отвечу в течение часа.
            </h2>
            <p style={{ margin: "22px 0 0", color: "var(--fg-2)", maxWidth: "44ch", fontSize: 16, lineHeight: 1.55 }}>
              Telegram — быстрее всего. Если удобнее почта или голосом, тоже можно: напишите в чат, договоримся.
            </p>
          </div>
          <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", gap: 14 }}>
            <a href="https://t.me/nino4ka_go" target="_blank" className="btn" style={{ justifyContent: "space-between", padding: "22px 26px", fontSize: 17, borderRadius: 20 }}>
              <span style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span style={{
                  width: 42, height: 42, borderRadius: 99, background: "var(--accent-ink)", color: "var(--accent)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}><Ic.tg /></span>
                <span style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", lineHeight: 1.2 }}>
                  <span style={{ fontSize: 18, fontWeight: 600 }}>Напиши мне</span>
                  <span style={{ fontSize: 13, opacity: .75, fontWeight: 400 }}>@nino4ka_go · Telegram</span>
                </span>
              </span>
              <Ic.arrow />
            </a>
            <a href="https://max.ru/u/f9LHodD0cOJOGtEBpdCYbkrEa82Ep8nEHYj6ACqPpTzrMpO5hU4_KmUsGDk" target="_blank" className="btn" style={{ justifyContent: "space-between", padding: "22px 26px", fontSize: 17, borderRadius: 20, background: "var(--fg)", color: "var(--bg)", border: "1px solid var(--fg)" }}>
              <span style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span style={{
                  width: 42, height: 42, borderRadius: 99, background: "var(--bg)", color: "var(--fg)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}><Ic.max /></span>
                <span style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", lineHeight: 1.2 }}>
                  <span style={{ fontSize: 18, fontWeight: 600 }}>Напиши в MAX</span>
                  <span style={{ fontSize: 13, opacity: .65, fontWeight: 400 }}>Мессенджер MAX</span>
                </span>
              </span>
              <Ic.arrow />
            </a>
            <a href="mailto:Nino4ka-GO@yandex.ru" className="btn" style={{ justifyContent: "space-between", padding: "22px 26px", fontSize: 15, borderRadius: 20 }}>
              <span style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", lineHeight: 1.2 }}>
                <span style={{ fontSize: 16, fontWeight: 600 }}>Nino4ka-GO@yandex.ru</span>
                <span style={{ fontSize: 13, opacity: .75, fontWeight: 400 }}>Почта · для подробных задач</span>
              </span>
              <Ic.arrow />
            </a>
            <div style={{ display: "flex", gap: 10, marginTop: 6, flexWrap: "wrap" }}>
              <span className="pill"><span className="live"></span> Свободна для проектов</span>
              <span className="pill">МСК · UTC+5
</span>
            </div>
          </div>
        </div>
        <style>{`@media (max-width:880px){.cta-card{grid-template-columns:1fr !important}}`}</style>
      </div>
    </section>);
}

// ─── FOOTER ─────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="wrap" style={{ paddingTop: 48, paddingBottom: 32, color: "var(--fg-3)", fontSize: 13 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
        <div className="row" style={{ gap: 10 }}>
          <span className="dot" style={{ width: 9, height: 9, borderRadius: 99, background: "var(--accent)", display: "inline-block" }} />
          <span style={{ color: "var(--fg-2)" }}>Нина Горбачева</span>
          <span>·</span>
          <span>технический специалист GetCourse</span>
        </div>
        <div className="mono" style={{ letterSpacing: ".06em" }}>© 2026 · Сделано аккуратно</div>
      </div>
    </footer>);

}

// ─── TWEAKS PANEL ───────────────────────────────────────────────────────────
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Тема" />
      <TweakRadio label="Палитра" value={t.theme}
      options={[{ value: "dark", label: "Тёмная" }, { value: "light", label: "Светлая" }]}
      onChange={(v) => setTweak("theme", v)} />
      <TweakColor label="Акцент" value={t.accent}
      options={["#ff5b2e", "#d4ff3d", "#7c5cff", "#1f4dff", "#0a7a5a"]}
      onChange={(v) => setTweak("accent", v)} />
    </TweaksPanel>);

}

// ─── APP ────────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // apply tweaks to root
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.theme, t.accent]);
  return (
    <React.Fragment>
      <Nav />
      <Hero variant={t.hero} />
      <Marquee />
      <About />
      <Services />
      <Cases />
      <Certs />
      <Pricing />
      <Reviews />
      <FAQ />
      <Contact />
      <Footer />
      <TweaksUI t={t} setTweak={setTweak} />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);