// Production landing for pikfinvoice.me.
//
// Adapted from the Claude Design prototype in ../../web-site/. The
// design-time TweaksPanel (palette / headline / mascot toggle) is
// stripped — production locks the ink-cream palette + the "voice"
// headline. The full source with toggles stays in web-site/ so the
// landing can be re-tweaked there and re-published here.
//
// CTA links point at the real cabinet on app.pikfinvoice.me.
// Self-Hosted CTAs route to mailto: until stage 08 ships the
// licensing flow.

const { useEffect } = React;

const APP_BASE = "https://app.pikfinvoice.me";
const LOGIN_URL = APP_BASE + "/auth/login";
const REGISTER_URL = APP_BASE + "/auth/register";
const APK_URL = APP_BASE + "/downloads/pikfinvoice.apk";
const SELF_HOSTED_MAILTO =
  "mailto:vitaly@pikov.expert?subject=PikFinVoice%20Self-Hosted%20%E2%80%94%20%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%20%D0%BD%D0%B0%20%D0%BB%D0%B8%D1%86%D0%B5%D0%BD%D0%B7%D0%B8%D1%8E";
const TELEGRAM_URL = "https://t.me/UnderLineSecurity";
const CONTACT_EMAIL = "vitaly@pikov.expert";

// Ink-cream palette (the design's default). Variants like "midnight" /
// "moss" / "berry" live in the design-time source if we ever want to
// swap — they're not exposed in production.
const PALETTE = {
  ink: "#0E1622",
  ink2: "#1A2331",
  cream: "#F4EFE3",
  cream2: "#EAE2CE",
  paper: "#FBF7EC",
  beak: "#FF6A3D",
  mint: "#1F8A5B",
};

function applyPalette() {
  const r = document.documentElement.style;
  r.setProperty("--ink", PALETTE.ink);
  r.setProperty("--ink-2", PALETTE.ink2);
  r.setProperty("--cream", PALETTE.cream);
  r.setProperty("--cream-2", PALETTE.cream2);
  r.setProperty("--paper", PALETTE.paper);
  r.setProperty("--beak", PALETTE.beak);
  r.setProperty("--mint", PALETTE.mint);
}

const HEADLINE = {
  line1: "Финансы",
  em: "моим",
  line2: "голосом.",
  sub: "PikFinVoice.ME — про меня и мои деньги. Две кнопки: красная — расход, зелёная — доход. Скажи фразу — приложение само разложит по категориям.",
};

function MarkSvg() {
  return (
    <svg viewBox="0 0 32 32" width="20" height="20" aria-hidden="true">
      <ellipse cx="16" cy="17" rx="11" ry="12" fill="#F4EFE3" />
      <ellipse cx="16" cy="18" rx="6" ry="7" fill="#0E1622" opacity=".0001" />
      <path d="M22 18 c 0 6 -3 9 -6 9 s -6 -3 -6 -9 c 0 -5 3 -8 6 -8 s 6 3 6 8 z" fill="#FBF7EC" />
      <path d="M14.5 14 l 3 0 l -1.5 2.5 z" fill="#FF6A3D" />
      <circle cx="13.4" cy="13.6" r="1.1" fill="#0E1622" />
      <circle cx="18.6" cy="13.6" r="1.1" fill="#0E1622" />
    </svg>
  );
}

function App() {
  useEffect(applyPalette, []);
  return (
    <>
      <Nav />
      <Hero />
      <Ticker />
      <How />
      <Demo />
      <Platforms />
      <PhraseMarquee />
      <Why />
      <SelfHosted />
      <Tariffs />
      <CTA />
      <Foot />
    </>
  );
}

function Nav() {
  return (
    <nav className="top">
      <div className="wrap inner">
        <a className="logo">
          <span className="mark"><MarkSvg /></span>
          <span style={{ display: "inline-flex", alignItems: "baseline", gap: 0 }}>
            PikFinVoice<span style={{ color: "var(--beak)" }}>.ME</span>
          </span>
        </a>
        <ul>
          <li><a>Как работает</a></li>
          <li><a>Платформы</a></li>
          <li><a>Демо</a></li>
          <li><a>Почему мы</a></li>
          <li><a>Тарифы</a></li>
        </ul>
        <div className="right">
          <a className="btn ghost">Войти</a>
          <a className="btn">
            Бесплатно 30 дней <span className="arr">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <header className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow">
            <span className="bar"></span>
            <span className="pill"><span className="dot"></span>PikFinVoice.ME · v1.0 · 2026</span>
          </div>
          <h1 className="display hero-title">
            {HEADLINE.line1} <span className="em">{HEADLINE.em}</span>
            <br />
            <span className="me">{HEADLINE.line2}</span>
          </h1>
          <p className="hero-sub">{HEADLINE.sub}</p>
          <div className="hero-cta">
            <a className="btn">
              Создать аккаунт <span className="arr">→</span>
            </a>
            <a className="btn ghost">Скачать APK</a>
          </div>
          <div className="hero-meta">
            <span>499 ₽/мес · триал 30 дней</span>
            <span>3 операции в день — бесплатно</span>
            <span>RU · EN · Cloud · Self-Hosted</span>
          </div>
        </div>

        <div className="stage" aria-hidden="true">
          <div className="ring"></div>
          <div className="ring inner"></div>
          <span className="label lbl-tl mono">PIKFIN.OS<br />v1.0</span>
          <span className="label lbl-tr mono">REC · 00:08 / 15</span>
          <span className="label lbl-bl mono">CATEGORY:<br />FUEL</span>
          <span className="label lbl-br mono">AMOUNT:<br />2 500,00 ₽</span>

          <div className="waves" aria-hidden="true">
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
          </div>

          <div className="coin c1">₽</div>
          <div className="coin c2">$</div>
          <div className="coin c3">€</div>
          <div className="coin c4">¥</div>
          <div className="coin c5">₿</div>

          <div className="penguin"><Penguin wink={false} /></div>
        </div>
      </div>
    </header>
  );
}

function Ticker() {
  const items = ["говори по-русски", "живи без формочек", "забудь Excel", "финансы под рукой", "PIK · FIN · VOICE"];
  const row = [...items, ...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {row.map((s, i) => (<span key={i}>{s}<span className="star">✦</span></span>))}
      </div>
    </div>
  );
}

function How() {
  return (
    <section className="how" id="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="mono num">[01] КАК ЭТО РАБОТАЕТ</div>
            <h2 className="display">Три шага. <span className="em">Без таблиц.</span></h2>
          </div>
          <div className="mono num" style={{ textAlign: "right", maxWidth: 280 }}>
            Голос → транскрипция → категория → запись
          </div>
        </div>
        <div className="steps">
          <div className="step">
            <div>
              <div className="idx">[01 / Запись]</div>
              <h3>Две кнопки. Всё.</h3>
              <p>Красная — расход. Зелёная — доход: зарплата, премия, подарок от родственников, возврат долга. Один тап, PIN или биометрия — и ты в эфире.</p>
            </div>
            <div className="demo">
              <span className="chip"><span className="sw"></span>Расход</span>{" "}
              <span className="chip in"><span className="sw"></span>Доход</span>
            </div>
          </div>
          <div className="step">
            <div>
              <div className="idx">[02 / Голос]</div>
              <h3>Скажи как есть.</h3>
              <p>«Бензин две тысячи пятьсот», «Зарплата университет сорок пять», «Вчера такси на вокзал четыреста». Без шаблонов.</p>
            </div>
            <div className="demo">
              <div className="bubble you">бензин 2 500</div>
              <div className="bubble">→ Расход · Топливо · 2 500,00 ₽</div>
            </div>
          </div>
          <div className="step">
            <div>
              <div className="idx">[03 / Учёт]</div>
              <h3>Открой графики.</h3>
              <p>
                Категории, баланс, прогноз до конца месяца — в веб-кабинете{" "}
                <a style={{ color: "var(--beak)", textDecoration: "none", borderBottom: "1.5px solid var(--beak)" }}>
                  app.pikfinvoice.me
                </a>
                . Семейная аналитика по участникам и общему бюджету.
              </p>
            </div>
            <div className="demo">
              <span className="chip"><span className="sw"></span>Дашборд</span>{" "}
              <span className="chip in"><span className="sw" style={{ background: "#FF6A3D" }}></span>Отчёт на email</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Demo() {
  return (
    <section className="demo-strip" id="demo">
      <div className="wrap demo-grid">
        <div className="heads">
          <div className="mono num" style={{ fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", opacity: .55, marginBottom: 14 }}>
            [02] ВЖИВУЮ
          </div>
          <h2 className="display">Что слышит <span className="em">пингвин.</span></h2>
          <p>
            Pipeline: голос → транскрипция → классификатор → запись в журнал с категорией, источником, датой и суммой.
            Confidence ниже порога — отправляется в «На проверку».
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
            <span className="chip"><span className="sw"></span>STT · Yandex SpeechKit</span>
            <span className="chip"><span className="sw" style={{ background: "#1F8A5B" }}></span>LLM · YandexGPT Lite</span>
            <span className="chip"><span className="sw" style={{ background: "#0E1622" }}></span>JSON Schema</span>
          </div>
        </div>
        <div className="console">
          <div className="dots"><i className="r"></i><i className="y"></i><i className="g"></i></div>
          <div className="ln"><span className="n">01</span><span><span className="c">// зажата красная (расход) или зелёная (доход)</span></span></div>
          <div className="ln"><span className="n">02</span><span><span className="k">audio</span> = «бензин две тысячи пятьсот»</span></div>
          <div className="ln"><span className="n">03</span><span><span className="k">→ stt</span>: <span className="s">"бензин 2500"</span></span></div>
          <div className="ln"><span className="n">04</span><span><span className="k">→ llm.classify</span>(...)</span></div>
          <div className="ln"><span className="n">05</span><span>{"{"}</span></div>
          <div className="ln"><span className="n">06</span><span>  <span className="k">type</span>: <span className="s">"expense"</span>,</span></div>
          <div className="ln"><span className="n">07</span><span>  <span className="k">amount</span>: <span className="s">"2500.00"</span>,</span></div>
          <div className="ln"><span className="n">08</span><span>  <span className="k">currency</span>: <span className="s">"RUB"</span>,</span></div>
          <div className="ln"><span className="n">09</span><span>  <span className="k">category</span>: <span className="s">"Топливо"</span>,</span></div>
          <div className="ln"><span className="n">10</span><span>  <span className="k">occurred_at</span>: <span className="s">"2026-05-11T19:42:00+03:00"</span>,</span></div>
          <div className="ln"><span className="n">11</span><span>  <span className="k">confidence</span>: <span className="s">0.94</span></span></div>
          <div className="ln"><span className="n">12</span><span>{"}"}  <span className="c">// → сохранено</span></span></div>
        </div>
      </div>
    </section>
  );
}

function Platforms() {
  return (
    <section className="platforms" id="platforms">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="mono num" style={{ color: "var(--cream)", opacity: .5 }}>[03] ВСЕ ПЛАТФОРМЫ</div>
            <h2 className="display">Где живёт <span className="em">PikFinVoice.ME</span></h2>
          </div>
          <div className="mono num" style={{ color: "var(--cream)", opacity: .5, textAlign: "right", maxWidth: 300 }}>
            Один аккаунт · один PIN · один пингвин
          </div>
        </div>
        <div className="plats">
          <div className="plat">
            <div>
              <div className="tag">ANDROID · KOTLIN · COMPOSE</div>
              <h3>Приложение.</h3>
              <p>Минимум экранов. Главный — две кнопки. Очередь оффлайн, отправка при сети, биометрия.</p>
            </div>
            <div className="vis">
              <div className="phone-mini">
                <div className="notch"></div>
                <div className="top">Сегодня · 12 операций</div>
                <div className="rec">● ЗАЖАТЬ — РАСХОД</div>
                <div className="inc">+ ДОХОД</div>
              </div>
            </div>
            <ul>
              <li>PIN + биометрия</li>
              <li>Оффлайн-очередь</li>
              <li>Opus 16 кбит/с</li>
            </ul>
          </div>

          <div className="plat">
            <div>
              <div className="tag">WEB · app.pikfinvoice.me</div>
              <h3>Кабинет.</h3>
              <p>
                Графики, фильтры, категории, семья, отчёты на почту, экспорт в CSV и JSON — всё по адресу{" "}
                <a style={{ color: "var(--beak)" }}>app.pikfinvoice.me</a>.
              </p>
            </div>
            <div className="vis">
              <div className="web-mini">
                <div className="bar"><i></i><i></i><i></i></div>
                <div className="grid"><div></div><div></div><div></div><div></div></div>
              </div>
            </div>
            <ul>
              <li>Аналитика и прогноз</li>
              <li>Семейный режим</li>
              <li>RU / EN</li>
            </ul>
          </div>

          <div className="plat">
            <div>
              <div className="tag">SELF-HOSTED · СВОЙ VDS</div>
              <h3>Свой сервер.</h3>
              <p>Арендуешь VDS, покупаешь лицензию, разворачиваешь PikFin одной командой, подключаешь семью и родственников. Ничего не уходит в наше облако.</p>
            </div>
            <div className="vis">
              <div className="plug-mini">
                <div className="row"><span className="k">$ install.sh</span><span>--local-gpu</span></div>
                <div className="row"><span className="k">whisper</span><span>large-v3 ✓</span></div>
                <div className="row"><span className="k">qwen2.5</span><span>7B-instruct ✓</span></div>
                <div className="row"><span className="k">status</span><span style={{ color: "#7dd3a8" }}>ready</span></div>
              </div>
            </div>
            <ul>
              <li>Семья до 10 человек</li>
              <li>Бессрочная лицензия на major</li>
              <li>Обновления 3 года</li>
              <li>AI: Local или API на выбор</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function PhraseMarquee() {
  const A = ["бензин 2 500", "зарплата 145 000", "такси на вокзал 480", "кофе с собой 320", "продукты 4 200", "в кино с детьми 2 100"];
  const B = ["вчера ужин в кафе 3 800", "аптека 1 250", "подписка нетфликс 990", "возврат долга от Лёхи 5 000", "аренда квартиры 60 000", "подарок жене 7 500"];
  return (
    <section className="phrases">
      <div className="phrase-row">
        {[...A, ...A, ...A].map((s, i) => (
          <span key={i} className={"phrase " + (i % 3 === 1 ? "fill" : i % 3 === 2 ? "beak" : "")}>
            <span className="mic">🎙</span>{s}
          </span>
        ))}
      </div>
      <div className="phrase-row rev">
        {[...B, ...B, ...B].map((s, i) => (
          <span key={i} className={"phrase " + (i % 3 === 0 ? "beak" : i % 3 === 1 ? "" : "fill")}>
            <span className="mic">🎙</span>{s}
          </span>
        ))}
      </div>
    </section>
  );
}

function Why() {
  const items = [
    { n: "01", h: "1 тап", t: "Один тап на кнопке, одна фраза — и операция в журнале. Без выпадашек и форм." },
    { n: "02", h: "15 сек", t: "Максимум для одной голосовой записи на Personal — фразы, не абзацы." },
    { n: "03", h: "≥85%", t: "Точность классификации на эталонном датасете в Cloud-режиме." },
    { n: "04", h: "50/день", t: "Ручной ввод через веб-кабинет — мягкий лимит на всех тарифах." },
    { n: "05", h: "≤24 ч", t: "Аудио хранится и удаляется. Транскрипции в логи не попадают." },
    { n: "06", h: "00:00", t: "Сброс дневного счётчика — по часовому поясу пользователя." },
    { n: "07", h: "RU·EN", t: "Двуязычный интерфейс и распознавание с первого релиза." },
    { n: "08", h: "∞", t: "Свои категории «Рыбалка», «Спиннинг», «Кофе у Маши» — приоритет над базовыми." },
  ];
  return (
    <section className="why" id="why">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="mono num">[04] ЧТО ВНУТРИ</div>
            <h2 className="display">Цифры, <span className="em">которые держат</span> кнопку.</h2>
          </div>
        </div>
        <div className="why-grid">
          {items.map((it, i) => (
            <div className="why-cell" key={i}>
              <div className="num">{it.h}</div>
              <h4>№ {it.n}</h4>
              <p>{it.t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SelfHosted() {
  return (
    <section
      id="self-hosted"
      style={{ padding: "96px 0", background: "var(--ink)", color: "var(--cream)", borderBottom: "1px solid var(--ink)", position: "relative", overflow: "hidden" }}
    >
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="mono num" style={{ color: "var(--cream)", opacity: .5 }}>[05] СВОЙ СЕРВЕР</div>
            <h2 className="display" style={{ color: "var(--cream)" }}>
              Твой VDS —<br /><span className="em">твои правила.</span>
            </h2>
          </div>
          <div className="mono num" style={{ color: "var(--cream)", opacity: .5, textAlign: "right", maxWidth: 340 }}>
            Не хочешь хранить финансы в чужом облаке — разверни PikFin у себя
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 48, alignItems: "start" }} className="sh-grid">
          <div>
            <p style={{ fontSize: 19, lineHeight: 1.55, opacity: .85, margin: "0 0 28px", maxWidth: 560 }}>
              Арендуешь свой VDS, покупаешь у нас лицензию, в один скрипт разворачиваешь сервис и подключаешь семью, родственников, близких — кого хочешь.
              Данные не покидают твой сервер, облако PikFin в этой схеме выключено из уравнения.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 24 }}>
              {[
                { h: "Лицензия", t: "Одна серверная установка. Семья до 10 человек." },
                { h: "Бессрочно", t: "Текущая major-версия крутится вечно." },
                { h: "3 года", t: "Обновления включены на 3 года. Дальше — продление или upgrade." },
                { h: "2 режима AI", t: "Local (свои модели) или API (свой ключ) — на выбор при установке." },
              ].map((b, i) => (
                <div key={i} style={{ borderTop: "1px solid rgba(255,255,255,.18)", paddingTop: 14 }}>
                  <div className="display" style={{ fontSize: 28, color: "var(--beak)", lineHeight: 1 }}>{b.h}</div>
                  <p style={{ fontSize: 14, opacity: .78, margin: "10px 0 0", lineHeight: 1.45 }}>{b.t}</p>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a className="btn" style={{ background: "var(--beak)", borderColor: "var(--beak)" }}>
                Купить лицензию <span className="arr">→</span>
              </a>
              <a className="btn ghost" style={{ color: "var(--cream)", borderColor: "var(--cream)" }}>
                Инструкция по установке
              </a>
            </div>
          </div>
          <div style={{ background: "var(--ink-2)", border: "1px solid rgba(255,255,255,.1)", borderRadius: 18, padding: 24, fontFamily: "'JetBrains Mono',monospace", fontSize: 13, lineHeight: 1.7 }}>
            <div style={{ opacity: .5, marginBottom: 14, fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase" }}>~/install</div>
            <div><span style={{ color: "var(--beak)" }}>$</span> curl -fsSL license.pikfinvoice.me/install.sh \</div>
            <div style={{ paddingLeft: 20 }}>--license=XXXX-XXXX-XXXX \</div>
            <div style={{ paddingLeft: 20 }}>--domain=fin.myfamily.ru \</div>
            <div style={{ paddingLeft: 20 }}>--ai-mode=local-gpu</div>
            <div style={{ opacity: .5, marginTop: 14 }}># проверка лицензии <span style={{ color: "#7dd3a8" }}>✓</span></div>
            <div style={{ opacity: .5 }}># docker compose up <span style={{ color: "#7dd3a8" }}>✓</span></div>
            <div style={{ opacity: .5 }}># Let's Encrypt <span style={{ color: "#7dd3a8" }}>✓</span></div>
            <div style={{ opacity: .5 }}># whisper + qwen загружены <span style={{ color: "#7dd3a8" }}>✓</span></div>
            <div style={{ marginTop: 14 }}>
              <span style={{ color: "var(--beak)" }}>✓</span> ready: <span style={{ color: "#7dd3a8" }}>https://fin.myfamily.ru</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 980px){ .sh-grid{grid-template-columns:1fr !important} }`}</style>
    </section>
  );
}

function Tariffs() {
  const plans = [
    {
      tag: "FREE FOREVER",
      name: "Free",
      price: "0 ₽",
      sub: "навсегда",
      bullets: [
        "3 голосовые операции / день",
        "Аудио ≤ 10 секунд",
        "50 ручных записей в веб-кабинете",
        "Личный учёт, базовая аналитика",
      ],
      cta: "Начать бесплатно",
      href: REGISTER_URL,
      style: "plain",
    },
    {
      tag: "30 ДНЕЙ · БЕЗ КАРТЫ",
      name: "Trial",
      price: "0 ₽",
      sub: "первые 30 дней",
      bullets: [
        "10 голосовых операций / день",
        "Аудио ≤ 10 секунд",
        "50 ручных записей / день",
        "Полный кабинет, прогноз и категории",
      ],
      cta: "Попробовать триал",
      href: REGISTER_URL,
      style: "plain",
    },
    {
      tag: "РЕКОМЕНДУЕМ",
      name: "Personal",
      price: "499 ₽",
      sub: "в месяц",
      bullets: [
        "30 голосовых операций / день",
        "Аудио ≤ 15 секунд",
        "50 ручных записей / день",
        "Семейная аналитика и AI-прогноз",
        "Top-up пакеты при росте аппетита",
      ],
      cta: "Оформить Personal",
      href: REGISTER_URL,
      style: "hero",
    },
  ];
  return (
    <section id="tariffs" style={{ padding: "96px 0", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="mono num">[06] ТАРИФЫ</div>
            <h2 className="display">Цена <span className="em">за честный</span> голос.</h2>
          </div>
          <div className="mono num" style={{ textAlign: "right", maxWidth: 300 }}>
            Счётчик сбрасывается в 00:00 по твоему часовому поясу
          </div>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 0,
            border: "1px solid var(--ink)",
            borderRadius: 24,
            overflow: "hidden",
            background: "var(--paper)",
          }}
          className="tariffs-grid"
        >
          {plans.map((p, i) => (
            <div
              key={i}
              style={{
                padding: "36px 28px",
                borderRight: i < plans.length - 1 ? "1px solid var(--ink)" : "none",
                background: p.style === "hero" ? "var(--ink)" : "transparent",
                color: p.style === "hero" ? "var(--cream)" : "var(--ink)",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                minHeight: 480,
                position: "relative",
              }}
            >
              <div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", opacity: .6 }}>{p.tag}</div>
                <h3 className="display" style={{ fontSize: 48, margin: "22px 0 6px", lineHeight: 1 }}>{p.name}</h3>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 24 }}>
                  <span className="display" style={{ fontSize: 56, lineHeight: 1, color: p.style === "hero" ? "var(--beak)" : "var(--ink)" }}>{p.price}</span>
                  <span className="mono" style={{ fontSize: 12, opacity: .6, textTransform: "uppercase", letterSpacing: ".06em" }}>{p.sub}</span>
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 15, lineHeight: 1.4 }}>
                  {p.bullets.map((b, j) => (
                    <li key={j} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                      <span style={{ color: "var(--beak)", fontWeight: 700, flex: "0 0 14px" }}>+</span>
                      <span style={{ opacity: p.style === "hero" ? .95 : .85 }}>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <a
                className="btn"
                style={{
                  marginTop: 32,
                  alignSelf: "flex-start",
                  background: p.style === "hero" ? "var(--beak)" : "var(--ink)",
                  color: "var(--cream)",
                  borderColor: p.style === "hero" ? "var(--beak)" : "var(--ink)",
                }}
              >
                {p.cta} <span className="arr">→</span>
              </a>
            </div>
          ))}
        </div>
        <div
          className="mono"
          style={{
            marginTop: 24,
            fontSize: 11,
            letterSpacing: ".08em",
            textTransform: "uppercase",
            opacity: .55,
            display: "flex",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: 12,
          }}
        >
          <span>Ручной ввод 50/день — для всех тарифов · мягкий лимит</span>
          <span>Top-up пакеты — скоро</span>
          <span>Self-Hosted — отдельная бессрочная лицензия</span>
        </div>
      </div>
      <style>{`@media (max-width: 980px){ .tariffs-grid{grid-template-columns:1fr !important} .tariffs-grid > div{border-right:none !important;border-bottom:1px solid var(--ink)} .tariffs-grid > div:last-child{border-bottom:none} }`}</style>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta" id="cta">
      <div className="wrap">
        <div className="mono num" style={{ fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", opacity: .55, marginBottom: 18 }}>
          [07] СТАРТ
        </div>
        <h2 className="display">
          Жми <span className="em">красную</span> или <span className="em">зелёную.</span>
          <br />Говори.
        </h2>
        <p>
          30 дней триала: <b>10 голосовых в день</b> до 10 секунд. Дальше — Personal за 499 ₽/мес или 3 бесплатных
          операции в день навсегда. Без карты на старте.
        </p>
        <div className="row">
          <a className="btn">Создать аккаунт <span className="arr">→</span></a>
          <a className="btn ghost">Скачать APK</a>
          <a className="btn ghost">Self-Hosted лицензия</a>
        </div>
        <div className="mono" style={{ marginTop: 32, fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", opacity: .5 }}>
          pikfinvoice.me · app.pikfinvoice.me · {CONTACT_EMAIL}
        </div>
      </div>
    </section>
  );
}

function Foot() {
  const year = new Date().getFullYear();
  return (
    <footer>
      <div className="wrap">
        <div className="row">
          <div>
            <div className="lo">
              <span className="mark"><MarkSvg /></span>
              <span style={{ display: "inline-flex", alignItems: "baseline", gap: 0 }}>
                PikFinVoice<span style={{ color: "var(--beak)" }}>.ME</span>
              </span>
            </div>
            <div className="mono" style={{ marginTop: 14, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", opacity: .55, maxWidth: 300 }}>
              Голосовой учёт личных и семейных финансов
            </div>
          </div>
          <div className="links">
            <div>
              <h5>Продукт</h5>
              <a>Android</a>
              <a>app.pikfinvoice.me</a>
              <a>Self-Hosted</a>
              <a>Тарифы</a>
            </div>
            <div>
              <h5>Документы</h5>
              <a>Политика данных</a>
              <a>Оферта</a>
              <a>152-ФЗ</a>
            </div>
            <div>
              <h5>Контакты</h5>
              <a href={"mailto:" + CONTACT_EMAIL}>{CONTACT_EMAIL}</a>
              <a href={TELEGRAM_URL} target="_blank" rel="noopener">@UnderLineSecurity</a>
              <a>Статус</a>
            </div>
          </div>
        </div>
        <div className="fine">
          <span>© {year} PikFinVoice.ME · Сделано с пингвином · {CONTACT_EMAIL}</span>
          <span>Облако — РФ · Self-Hosted — где угодно</span>
        </div>
      </div>
    </footer>
  );
}

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