// Spina landing page — content matched to the real app, not the mock.
//
// Truth check (compared to /src):
//   - Calibration is 3 explicit steps (good / bad / head turns), 5–6s
//     each, user-paced. There is no breathing pacer.
//   - Slouch detection: when score stays ≤ 70 for 20s, mirror window
//     auto-pops (always on top, across all macOS Spaces) — see
//     src/lib/mirror/auto-open-policy.ts.
//   - Quiet mode mutes notifications during Zoom/Meet — see
//     src/hooks/useQuietMode.ts.
//   - Stretch reminders every 90 minutes — src/hooks/useStretchReminders.ts.
//   - History: today / week / month, real DailySummary with avg score —
//     src/components/MainWindow/HistoryPanel.tsx.
//   - License: Free = 1 profile / 60 min day / 7-day history; Pro =
//     5 profiles / no limit / unlimited history. The landing positions
//     "spina" as the one-time paid entry tier and "pro" as the upgrade.
//   - Streak rules: a day counts when avg score ≥ 70 for ≥ 15 minutes.
//     We do NOT skip bad days — they break the streak. So no
//     "серии без штрафов" claim.
//   - The model isn't open-source; don't claim it is.
//   - Notifications are silent (no sounds, no popups beyond the in-app
//     banner). Tray icon colour is the always-on signal.

const PageT = window.T; // theme constants from screens.jsx

function Page() {
  return (
    <div style={{ background: PageT.bg, color: PageT.ink, fontFamily: PageT.sans, overflow: 'hidden' }}>
      <Nav />
      <Hero />
      <MirrorSection />
      <HowItWorks />
      <FeatureGrid />
      <Pricing />
      <FAQ />
      <Footer />
    </div>
  );
}

// ─── Nav ────────────────────────────────────────────────────────────────
function Nav() {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 50, background: PageT.bg + 'EE', backdropFilter: 'blur(14px)', borderBottom: `1px solid ${PageT.ink}10` }}>
      <Container style={{ display: 'flex', alignItems: 'center', height: 64, gap: 28 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ transform: 'scale(0.8)' }}><PebbleMascot posture={0.95} size={28} animate={false} /></div>
          <span style={{ fontFamily: PageT.serif, fontSize: 22, fontWeight: 500, letterSpacing: -0.4 }}>spina<em style={{ color: PageT.accent, fontStyle: 'italic' }}>.</em></span>
        </div>
        <div style={{ flex: 1 }} />
        {[
          { label: 'возможности', href: '#features' },
          { label: 'как это работает', href: '#howitworks' },
          { label: 'цена', href: '#pricing' },
          { label: 'вопросы', href: '#about' },
        ].map((it) => (
          <a key={it.href} href={it.href} style={{ fontSize: 13, color: PageT.inkSoft, textDecoration: 'none' }}>{it.label}</a>
        ))}
        <a href="#download" style={{
          fontSize: 13, fontWeight: 600, color: '#fff', background: PageT.ink,
          padding: '9px 16px', borderRadius: 999, textDecoration: 'none', letterSpacing: 0.2,
        }}>купить</a>
      </Container>
    </div>
  );
}

function Container({ children, style = {} }) {
  return <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>;
}

function Eyebrow({ children, color = PageT.accent }) {
  return <div style={{ fontSize: 11, letterSpacing: 2.4, textTransform: 'uppercase', color, fontWeight: 600 }}>{children}</div>;
}

// ─── Hero ───────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section style={{ position: 'relative', padding: '80px 0 110px' }}>
      <div aria-hidden style={{ position: 'absolute', top: 60, right: -40, fontFamily: PageT.serif, fontSize: 360, lineHeight: 0.85, color: PageT.accent + '14', fontStyle: 'italic', pointerEvents: 'none', userSelect: 'none', fontWeight: 400 }}>spine.</div>
      <Container style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <Eyebrow>spina · macOS</Eyebrow>
          <h1 style={{ fontFamily: PageT.serif, fontSize: 92, lineHeight: 0.92, letterSpacing: -2.2, margin: '20px 0 24px', fontWeight: 500 }}>
            исправь свою <em style={{ color: PageT.accent, fontStyle: 'italic' }}>осанку.</em>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: PageT.inkSoft, maxWidth: 480, margin: '0 0 18px' }}>
            живёт в строке меню, смотрит через камеру и подсказывает, когда пора выпрямиться.
          </p>
          <PrivacyBadge />
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginTop: 28 }}>
            <CTA primary>купить за 6 990 ₸</CTA>
          </div>
          <div style={{ marginTop: 14, fontSize: 12, color: PageT.inkSoft, letterSpacing: 0.2 }}>
            один раз <span style={{ opacity: 0.5, margin: '0 6px' }}>·</span>
            оффлайн <span style={{ opacity: 0.5, margin: '0 6px' }}>·</span>
            macOS 12+
          </div>
        </div>
        <HeroVisual />
      </Container>
    </section>
  );
}

function PrivacyBadge() {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '8px 14px',
      background: PageT.ink + '08',
      border: `1px solid ${PageT.ink}14`,
      borderRadius: 999,
      fontSize: 13, color: PageT.ink, fontWeight: 500,
    }}>
      <span style={{
        width: 7, height: 7, borderRadius: '50%',
        background: '#34c759',
        boxShadow: '0 0 0 4px #34c75922',
      }} />
      камера видит<span style={{ color: PageT.inkSoft, margin: '0 2px' }}>·</span>
      <span style={{ color: PageT.inkSoft }}>данные не уходят</span>
    </div>
  );
}

function CTA({ primary, children }) {
  return (
    <button style={{
      appearance: 'none', border: 'none', cursor: 'pointer',
      background: primary ? PageT.ink : 'transparent',
      color: primary ? '#fff' : PageT.ink,
      padding: '14px 22px', borderRadius: 999,
      fontSize: 14, fontWeight: 600, letterSpacing: 0.2,
      border: primary ? 'none' : `1.5px solid ${PageT.ink}25`,
    }}>{children}</button>
  );
}

function HeroVisual() {
  return (
    <div style={{ position: 'relative', height: 460, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {/* Soft riso dots — restrained, no longer compete with the mock */}
      <div style={{ position: 'absolute', top: 40, left: 30, width: 110, height: 110, borderRadius: '50%', background: PageT.accent + '40', zIndex: 0 }} />
      <div style={{ position: 'absolute', bottom: 40, right: 0, width: 80, height: 80, borderRadius: '50%', background: PageT.accent2 + '38', zIndex: 0 }} />
      <div style={{ position: 'relative', zIndex: 2, transform: 'rotate(1.5deg)' }}>
        <RisoDashboard width={560} height={420} posture={0.78} />
      </div>
    </div>
  );
}

// ─── Mirror mode (hero-style killer feature) ────────────────────────────
// Promoted out of FeatureGrid because this is the actual product moment:
// you slouch → a small window pops up next to your face. Sells itself.
function MirrorSection() {
  return (
    <section style={{
      padding: '120px 0',
      background: PageT.surface,
      borderTop: `1px solid ${PageT.ink}10`,
      borderBottom: `1px solid ${PageT.ink}10`,
      position: 'relative', overflow: 'hidden',
    }}>
      <Container style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow color={PageT.accent2}>mirror mode</Eyebrow>
          <h2 style={{ fontFamily: PageT.serif, fontSize: 64, lineHeight: 1, letterSpacing: -1.6, margin: '14px 0 22px', fontWeight: 500 }}>
            сутулишься — увидишь себя сразу.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: PageT.inkSoft, margin: '0 0 20px', maxWidth: 480 }}>
            если плечи уползают вверх или голова идёт вперёд дольше двадцати секунд — рядом всплывает небольшое окно с тобой и скелетом. оно поверх всего, на любом рабочем столе.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: PageT.inkSoft, margin: 0, maxWidth: 480 }}>
            выпрямился — окно исчезает само. никаких звуков, никаких pop-up'ов, никаких клавиш чтобы закрыть.
          </p>
          <div style={{ display: 'flex', gap: 28, marginTop: 36, flexWrap: 'wrap' }}>
            <MirrorBullet n="20с" label="порог реакции" />
            <MirrorBullet n="320×220" label="размер окна" />
            <MirrorBullet n="∀" label="на всех рабочих столах" />
          </div>
        </div>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 460 }}>
          {/* Soft halo behind mirror — emphasises that it's the moment */}
          <div style={{ position: 'absolute', inset: 0,
            background: `radial-gradient(ellipse 60% 60% at 50% 50%, ${PageT.accent}20, transparent 70%)`,
            pointerEvents: 'none' }} />
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }}>
            <div style={{ transform: 'rotate(-2deg)' }}>
              <RisoMirror width={360} height={280} posture={0.58} />
            </div>
            <div style={{ transform: 'rotate(1.5deg) translateX(36px)' }}>
              <RisoAlert width={320} height={120} />
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function MirrorBullet({ n, label }) {
  return (
    <div>
      <div style={{ fontFamily: PageT.serif, fontSize: 26, color: PageT.ink, lineHeight: 1, letterSpacing: -0.4 }}>{n}</div>
      <div style={{ fontSize: 10, color: PageT.inkSoft, letterSpacing: 1.6, textTransform: 'uppercase', marginTop: 6 }}>{label}</div>
    </div>
  );
}

// ─── How it works ───────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: '01', t: 'установи',
      d: 'скачай dmg, перетащи в applications. иконка появится в строке меню — главное окно открывается только когда сам захочешь.',
      visual: <RisoMenubar width={300} height={120} />,
    },
    {
      n: '02', t: 'откалибруй',
      d: 'три коротких записи: ровная осанка, привычная сутулость, повороты головы. spina запоминает именно твою позу — не из учебника.',
      visual: <RisoCalibration width={300} height={300} step={1} posture={0.92} />,
    },
    {
      n: '03', t: 'забудь о ней',
      d: 'начнёшь сутулиться дольше двадцати секунд — рядом всплывёт небольшое окно с тобой и скелетом. выпрямился — исчезает.',
      visual: <RisoMirror width={300} height={220} posture={0.6} />,
    },
  ];
  return (
    <section id="howitworks" style={{ padding: '120px 0', background: PageT.bg }}>
      <Container>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <Eyebrow color={PageT.accent2}>как это работает</Eyebrow>
          <h2 style={{ fontFamily: PageT.serif, fontSize: 56, lineHeight: 1, letterSpacing: -1.4, margin: '14px 0 20px', fontWeight: 500 }}>
            три простых шага — и всё.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {steps.map((s) => (
            <div key={s.n} style={{
              background: PageT.surface,
              padding: 24,
              border: `1px solid ${PageT.ink}12`,
              borderRadius: 12,
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              <div style={{
                background: PageT.surfaceAlt,
                border: `1px solid ${PageT.ink}10`,
                borderRadius: 8,
                height: 220,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden',
              }}>
                <div style={{ transform: 'scale(0.9)' }}>{s.visual}</div>
              </div>
              <div>
                <div style={{ fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: PageT.inkSoft, marginBottom: 8 }}>шаг {s.n}</div>
                <h3 style={{ fontFamily: PageT.serif, fontSize: 26, margin: '0 0 10px', letterSpacing: -0.4, fontWeight: 500 }}>{s.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: PageT.inkSoft, margin: 0 }}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Feature grid ───────────────────────────────────────────────────────
// After Mirror moved to its own hero-style section, what's left is the
// calibration headline (the second-most-important feature) and a row of
// small details. No more two-column big-cards competing.
function FeatureGrid() {
  return (
    <section id="features" style={{ padding: '120px 0', background: PageT.bg }}>
      <Container>
        <div style={{
          background: PageT.surface,
          padding: 36,
          border: `1px solid ${PageT.ink}10`,
          borderRadius: 12,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36,
          alignItems: 'center',
          marginBottom: 28,
        }}>
          <div>
            <Eyebrow color={PageT.accent2}>калибровка</Eyebrow>
            <h3 style={{ fontFamily: PageT.serif, fontSize: 40, lineHeight: 1.05, letterSpacing: -0.8, margin: '10px 0 14px', fontWeight: 500 }}>
              пара минут — и spina знает твою позу.
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: PageT.inkSoft, margin: 0, maxWidth: 460 }}>
              три коротких записи по пять-шесть секунд. spina запоминает твою конкретную ровную и привычную сутулую позы — не среднее по таблицам. потом анализирует только отклонения.
            </p>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <RisoCalibration width={340} height={400} step={1} posture={0.92} />
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          <FeatureSmall icon="◐" title="иконка в menubar" body="живёт рядом с часами. цвет кружка — мгновенный статус: зелёный, жёлтый, оранжевый, красный." />
          <FeatureSmall icon="○" title="перерывы" body="раз в полтора часа — короткая разминка. посмотри вдаль, разомни плечи, продолжай работать." />
          <FeatureSmall icon="◇" title="тихий режим" body="spina замечает, что ты в zoom, google meet или teams, и сама приглушает уведомления." />
          <FeatureSmall icon="✦" title="всё локально" body="кадры с камеры обрабатываются прямо на твоём mac. ни одного байта не уходит в интернет — даже аккаунта нет." />
          <FeatureSmall icon="∿" title="история" body="график осанки за день, неделю, месяц. видно, в какие часы спина проседает чаще." />
          <FeatureSmall icon="◌" title="без громких алертов" body="ни всплывающих окон, ни звуков. только цвет иконки в трее и небольшая карточка, когда действительно надо." />
        </div>
      </Container>
    </section>
  );
}

function FeatureSmall({ icon, title, body }) {
  return (
    <div style={{ background: PageT.bg, padding: 24, border: `1px solid ${PageT.ink}10`, borderRadius: 8 }}>
      <div style={{ fontFamily: PageT.serif, fontSize: 24, color: PageT.accent, lineHeight: 1, marginBottom: 14 }}>{icon}</div>
      <div style={{ fontFamily: PageT.serif, fontSize: 18, fontWeight: 500, marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 12.5, color: PageT.inkSoft, lineHeight: 1.55 }}>{body}</div>
    </div>
  );
}

// ─── Pricing ────────────────────────────────────────────────────────────
// Single SKU. There's nothing to compare against, so we don't pretend it's
// a "tier card" — the price IS the hero. Editorial moment: huge serif
// number, one CTA, a refund line in the footer.
function Pricing() {
  return (
    <section id="pricing" style={{ position: 'relative', padding: '140px 0 120px', background: PageT.bg, overflow: 'hidden' }}>
      {/* Faint background watermark — same trick as the hero. */}
      <div aria-hidden style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        fontFamily: PageT.serif, fontSize: 520, lineHeight: 0.85,
        color: PageT.accent + '0E', fontStyle: 'italic',
        pointerEvents: 'none', userSelect: 'none', fontWeight: 400,
        whiteSpace: 'nowrap',
      }}>
        spina.
      </div>
      <Container style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
          <Eyebrow>купить</Eyebrow>

          {/* The price IS the headline. */}
          <div style={{ position: 'relative' }}>
            <div style={{
              fontFamily: PageT.serif,
              fontSize: 'clamp(72px, 10vw, 128px)',
              lineHeight: 0.92,
              letterSpacing: -3,
              fontWeight: 500,
              color: PageT.ink,
            }}>
              6 990<em style={{ color: PageT.accent, fontStyle: 'italic', marginLeft: 4 }}>₸</em>
            </div>
            <div style={{
              fontSize: 12, color: PageT.inkSoft,
              letterSpacing: 2.4, textTransform: 'uppercase',
              marginTop: 14,
            }}>
              разовая оплата
            </div>
            <div style={{
              fontSize: 13, color: PageT.inkSoft,
              marginTop: 8, fontFamily: PageT.mono,
              letterSpacing: 0.2,
            }}>
              ≈ 1 290 ₽ <span style={{ opacity: 0.5, margin: '0 4px' }}>·</span> 13 €
            </div>
          </div>

          {/* Primary CTA — wider than a normal button so the price feels final. */}
          <button style={{
            appearance: 'none', border: 'none', cursor: 'pointer',
            background: PageT.ink, color: '#fff',
            padding: '20px 44px',
            borderRadius: 999,
            fontFamily: PageT.sans,
            fontSize: 16, fontWeight: 600, letterSpacing: 0.2,
            marginTop: 8,
            boxShadow: `0 12px 32px ${PageT.ink}26`,
          }}>
            купить за 6 990&nbsp;₸
          </button>

          {/* Refund line — small but visible, reassures on the buy click. */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: 13, color: PageT.inkSoft,
            marginTop: 4,
          }}>
            <span style={{ color: PageT.accent, fontFamily: PageT.serif, fontSize: 15 }}>✦</span>
            <span><strong style={{ color: PageT.ink, fontWeight: 600 }}>14 дней</strong> — бесплатный возврат</span>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: 'spina записывает видео с камеры?',
      a: 'нет. кадры обрабатываются прямо на твоём mac и сразу удаляются. ничего не сохраняется на диск и не отправляется на сервер — аккаунт даже не нужен.' },
    { q: 'не будет ли тормозить mac?',
      a: 'нет. модель распознаёт ~2 кадра в секунду и использует меньше 1% cpu на apple silicon. в фоне приложение почти незаметно.' },
    { q: 'а если я в очках, в худи или сижу на полу?',
      a: 'калибровка запоминает именно твою конкретную позу. spina реагирует только на отклонения от неё, а не на «правильную осанку из учебника».' },
    { q: 'можно подключить внешнюю веб-камеру?',
      a: 'да. macOS предлагает выбор камеры стандартными средствами — spina использует ту, что система отдала по умолчанию.' },
    { q: 'будут ли версии для windows и linux?',
      a: 'пока нет. spina написана на tauri и портируется относительно легко, но фокус сейчас на macOS.' },
    { q: 'что если spina алертит без причины?',
      a: 'на каждом баннере есть кнопка «это ошибка». нажмёшь — spina скорректирует профиль под твою конкретную позу. это и есть active learning, и оно работает локально.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="about" style={{ padding: '160px 0 120px', background: PageT.surface, borderTop: `1px solid ${PageT.ink}10` }}>
      <Container style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56 }}>
        <div>
          <Eyebrow color={PageT.accent2}>faq</Eyebrow>
          <h2 style={{ fontFamily: PageT.serif, fontSize: 52, lineHeight: 1, letterSpacing: -1.2, margin: '14px 0 20px', fontWeight: 500 }}>
            вопросы и ответы.
          </h2>
          <p style={{ fontSize: 14, color: PageT.inkSoft, lineHeight: 1.6, maxWidth: 280 }}>
            остался вопрос? напиши на <span style={{ color: PageT.ink, textDecoration: 'underline' }}>hello@spina.app</span> — отвечает живой человек.
          </p>
        </div>
        <div>
          {items.map((it, i) => (
            <div key={i} style={{ borderTop: `1px solid ${PageT.ink}15`, padding: '20px 0' }}>
              <div onClick={() => setOpen(open === i ? -1 : i)}
                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }}>
                <div style={{ fontFamily: PageT.serif, fontSize: 22, fontWeight: 500, letterSpacing: -0.3 }}>{it.q}</div>
                <div style={{ fontFamily: PageT.serif, fontSize: 24, color: PageT.accent, transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .2s' }}>+</div>
              </div>
              {open === i && (
                <div style={{ fontSize: 14, color: PageT.inkSoft, lineHeight: 1.6, marginTop: 10, maxWidth: 560 }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────────
function Footer() {
  return (
    <section id="download" style={{ background: PageT.ink, color: PageT.bg, padding: '100px 0 40px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', bottom: -120, left: -40, fontFamily: PageT.serif, fontSize: 380, lineHeight: 0.85, color: PageT.accent + '20', fontStyle: 'italic', userSelect: 'none', fontWeight: 400 }}>spina.</div>
      <Container style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end', marginBottom: 80 }}>
          <div>
            <Eyebrow color={PageT.accent}>попробуй сегодня</Eyebrow>
            <h2 style={{ fontFamily: PageT.serif, fontSize: 88, lineHeight: 0.95, letterSpacing: -2.2, margin: '14px 0 28px', fontWeight: 500 }}>
              позаботься<br/>о своей спине.
            </h2>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <DLBtn icon="" label="купить за 6 990 ₸" sub="macOS 12+ · одна покупка" />
              <DLBtn icon="⊞" label="windows" sub="скоро" disabled />
              <DLBtn icon="🐧" label="linux" sub="скоро" disabled />
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
            <PebbleMascot posture={0.95} size={120} surface="#FFFFFA" />
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, paddingTop: 32, borderTop: `1px solid ${PageT.bg}25` }}>
          <div>
            <div style={{ fontFamily: PageT.serif, fontSize: 22, fontWeight: 500 }}>spina<em style={{ color: PageT.accent }}>.</em></div>
            <div style={{ fontSize: 12, opacity: 0.6, marginTop: 8, lineHeight: 1.55, maxWidth: 260 }}>тихий софт для тех, кто много сидит за компьютером.</div>
          </div>
          <FooterCol title="продукт" items={['возможности', 'тарифы', 'обновления']} />
          <FooterCol title="связаться" items={['hello@spina.app', 'github', 'twitter']} />
          <FooterCol title="правовое" items={['конфиденциальность', 'условия', 'возврат']} />
        </div>
        <div style={{ marginTop: 56, paddingTop: 20, borderTop: `1px solid ${PageT.bg}15`, display: 'flex', justifyContent: 'space-between', fontSize: 11, opacity: 0.6 }}>
          <div>© 2026 spina</div>
          <div>v0.1 · ранний доступ</div>
        </div>
      </Container>
    </section>
  );
}

function DLBtn({ icon, label, sub, disabled }) {
  return (
    <button style={{
      appearance: 'none', cursor: disabled ? 'default' : 'pointer',
      border: `1px solid ${PageT.bg}30`, background: disabled ? 'transparent' : PageT.bg, color: disabled ? PageT.bg : PageT.ink,
      padding: '14px 22px', borderRadius: 12,
      display: 'flex', alignItems: 'center', gap: 12,
      opacity: disabled ? 0.5 : 1,
    }}>
      <span style={{ fontSize: 20 }}>{icon}</span>
      <span style={{ textAlign: 'left' }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{label}</div>
        <div style={{ fontSize: 10, opacity: 0.7, marginTop: 2 }}>{sub}</div>
      </span>
    </button>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase', opacity: 0.5, marginBottom: 14 }}>{title}</div>
      {items.map((it) => (
        <a key={it} href="#" style={{ display: 'block', fontSize: 13, color: PageT.bg, textDecoration: 'none', opacity: 0.85, padding: '4px 0' }}>{it}</a>
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Page />);