// StarCourt landing - main app
// Composes hero, problem/solution, USP, features, roles, geography,
// how-it-works, screenshots, FAQ, CTA, footer + Tweaks panel.

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ocean",
  "heroVariant": "split",
  "featureDensity": "regular",
  "showTweaks": true
}/*EDITMODE-END*/;

// Palette presets
const PALETTES = {
  ocean: {
    ocean:'#0B4FE0', oceanDeep:'#072E8C',
    sand:'#F2E6CC', sandSoft:'#FBF3DE', sandLine:'#E6D5B0',
    depth:'#0B1729'
  },
  midnight: {
    ocean:'#1166FF', oceanDeep:'#0B47B5',
    sand:'#EAD9B0', sandSoft:'#F6EAC9', sandLine:'#D9C28E',
    depth:'#08111F'
  },
  warm: {
    ocean:'#1453C6', oceanDeep:'#0B3690',
    sand:'#F5D9A8', sandSoft:'#FCEDCC', sandLine:'#E6C682',
    depth:'#1A1208'
  }
};

function applyPalette(name){
  const p = PALETTES[name] || PALETTES.ocean;
  const root = document.documentElement;
  root.style.setProperty('--ocean', p.ocean);
  root.style.setProperty('--ocean-deep', p.oceanDeep);
  root.style.setProperty('--sand', p.sand);
  root.style.setProperty('--sand-soft', p.sandSoft);
  root.style.setProperty('--sand-line', p.sandLine);
  root.style.setProperty('--depth', p.depth);
}

// ───── Nav ─────
function Nav(){
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="nav-in">
        <a className="logo" href="#top" aria-label="СтарКорт">
          <img className="logo-img" src="assets/logo.png" alt="СтарКорт" />
        </a>
        <div className="nav-links">
          <a href="#features">Возможности</a>
          <a href="#roles">Для кого</a>
          <a href="#pricing">Тарифы</a>
          <a href="#how">Как это работает</a>
          <a href="#faq">Вопросы</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-soft btn-sm" href="https://pwa.starcourt.ru/" target="_blank" rel="noopener">
            <IconArrow size={14} stroke={2}/>
            <span>Открыть</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ───── Hero ─────
function Hero(){
  return (
    <section id="top" className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow hero-eyebrow">Падел · пляжный теннис · сообщество</div>
          <h1>
            Открой свою <span className="underline">игру</span>,<br/>
            найди <span className="accent nowrap">своих людей</span>.
          </h1>
          <p className="hero-sub">
            StarCourt - приложение для сообщества падел-тенниса и пляжного тенниса.
            Игры, турниры, тренеры, рейтинг - в одном месте.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-pri" href="https://pwa.starcourt.ru/" target="_blank" rel="noopener">
              <IconArrow size={16}/>
              <span>Открыть веб-приложение</span>
            </a>
            <a className="btn btn-ghost" href="#features">
              <span>Узнать больше</span>
              <IconArrow size={16}/>
            </a>
          </div>
          <div className="hero-meta">
            <span><b>Работает в браузере</b></span>
            <i></i>
            <span><b>Можно установить на телефон</b></span>
            <i></i>
            <span>App Store и Google Play скоро</span>
          </div>
        </div>

        <div className="hero-stage">
          <div className="hero-chip hero-chip-1">
            <span className="dot" style={{ background:'var(--ocean)' }}></span>
            <span>1 место свободно сегодня</span>
          </div>
          <div className="hero-chip hero-chip-2">
            <span className="dot" style={{ background:'#2E7D5B' }}></span>
            <span>ELO 1000 · старт</span>
          </div>
          <div className="hero-chip hero-chip-3">
            <span className="dot" style={{ background:'var(--sand)', border:'1px solid var(--sand-line)' }}></span>
            <span>Beach Club · 16:00</span>
          </div>
          <div className="hero-phone">
            <HeroPhone />
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── Problem / Solution ─────
function ProblemSolution(){
  const pains = [
    'Десятки чатов в Telegram и WhatsApp по каждому клубу',
    'Непонятно где играть, с кем играть, какой у тебя реальный уровень',
    'Турниры собираются хаотично, результаты теряются',
    'Тренировки и оплата - голосом, переводами, скриншотами',
  ];
  const gains = [
    'Единая лента игр в твоём городе',
    'Объективный рейтинг ELO, который не врёт',
    'Турниры с сеткой и live-scoring - не таблица в Google Sheets',
    'Карта всех площадок города с фильтрами',
  ];
  return (
    <section className="ps">
      <div className="wrap">
        <div className="sect-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Зачем</div>
            <h2>Падел растёт быстрее,<br/>чем инструменты для него.</h2>
          </div>
          <p className="lead">
            Игроки собираются в чатах, организаторы считают результаты в таблицах,
            а площадки - в записных книжках. StarCourt собирает всё в одном месте.
          </p>
        </div>

        <div className="ps-grid">
          <div className="ps-card pain">
            <div className="ps-card-h">
              <h3>Сейчас</h3>
              <span className="ps-label">Боль</span>
            </div>
            <ul className="ps-list">
              {pains.map((p, i) => (
                <li key={i}>
                  <span className="num">0{i+1}</span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="ps-card gain">
            <div className="ps-card-h">
              <h3>В StarCourt</h3>
              <span className="ps-label">Решение</span>
            </div>
            <ul className="ps-list">
              {gains.map((p, i) => (
                <li key={i}>
                  <span className="num">0{i+1}</span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── USP ─────
function USP(){
  return (
    <section className="usp">
      <div className="wrap">
        <div className="eyebrow" style={{ justifyContent:'center', display:'flex' }}>Отличие</div>
        <p className="usp-quote" style={{ marginTop: 20 }}>
          Это не приложение одного клуба.<br/>
          <em>
            <span className="nowrap">Любая площадка.</span>{' '}
            <span className="nowrap">Любой организатор.</span>{' '}
            <span className="nowrap">Любой город.</span>
          </em>
        </p>
        <p className="usp-tag">
          StarCourt - открытая платформа сообщества, а не корпоративный софт одной сети кортов.
        </p>

        <div className="usp-trio">
          <div className="usp-chip">
            <div className="usp-chip-k">01</div>
            <div className="usp-chip-h">Площадка</div>
            <p>Любой клуб или корт добавляет себя на карту и собирает заявки.</p>
          </div>
          <div className="usp-chip">
            <div className="usp-chip-k">02</div>
            <div className="usp-chip-h">Организатор</div>
            <p>Турнир, лига, кубок выходного дня - сетка и регистрация в пару кликов.</p>
          </div>
          <div className="usp-chip">
            <div className="usp-chip-k">03</div>
            <div className="usp-chip-h">Город</div>
            <p>Игроки, тренеры и события из всех клубов в одной ленте.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── Features ─────
const FEATURES = [
  { I: IconBall,    title:'События и игры', sub:'Создавай и находи игры - уличные бесплатные или с арендой корта.', tag:'core',  cls:'feat-1', variant:'ocean' },
  { I: IconBracket, title:'Турниры',         sub:'Лиговая система, сетка, live-scoring, история матчей.',           tag:'pro',   cls:'feat-2' },
  { I: IconChart,   title:'Рейтинг ELO',     sub:'Раздельно для падела и пляжного. Честно и прозрачно.',            tag:'fair',  cls:'feat-3', variant:'dark' },
  { I: IconMap,     title:'Карта площадок',  sub:'Фильтры по покрытию, крытым кортам, городу.',                     tag:'find',  cls:'feat-4' },
  { I: IconCoach,   title:'Тренеры',         sub:'Профили, расписание, запись и оплата онлайн.',                    tag:'book',  cls:'feat-5' },
  { I: IconChat,    title:'Чаты',            sub:'Личные, групповые, чат события - без отдельных мессенджеров.',    tag:'talk',  cls:'feat-6' },
  { I: IconBell,    title:'Уведомления',     sub:'Push, email, in-app. Не пропустишь свою игру.',                   tag:'ping',  cls:'feat-7' },
];

function Features({ density }){
  return (
    <section id="features" className="features">
      <div className="wrap">
        <div className="sect-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Возможности</div>
            <h2>Всё, что нужно сообществу,<br/>а не одному клубу.</h2>
          </div>
          <p className="lead">
            Семь модулей, которые закрывают типичный путь игрока:
            от поиска партнёра на сегодня до участия в лиге.
          </p>
        </div>

        <div className={"feat-grid" + (density === 'compact' ? ' dense' : '')}>
          {FEATURES.map((f, i) => (
            <div key={i} className={"feat " + f.cls + (f.variant ? ' ' + f.variant : '')}>
              <div className="feat-ic"><f.I size={28} stroke={1.6} /></div>
              <div className="feat-body">
                <h3>{f.title}</h3>
                <p style={{ marginTop: 8 }}>{f.sub}</p>
              </div>
              <span className="feat-tag">/ {f.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── Roles ─────
const ROLES = [
  {
    id:'player',
    label:'Игрокам',
    Icon: IconUser,
    title:'Найти партнёров и события за 30 секунд',
    body:'Открыл приложение - увидел игры на сегодня в твоём городе. Выбрал уровень и время, записался одной кнопкой.',
    perks:[
      'Лента событий на сегодня и неделю',
      'Объективный ELO, прозрачная история матчей',
      'Чат события и напоминания о записи',
      'Карта всех кортов города с фильтрами'
    ],
    illu:'PLAYER'
  },
  {
    id:'coach',
    label:'Тренерам',
    Icon: IconWhistle,
    title:'Расписание и онлайн-запись - без чатов',
    body:'Один профиль, одно расписание. Ученики записываются сами, оплата проходит онлайн, отмены и переносы - в один клик.',
    perks:[
      'Публичный профиль с расписанием',
      'Запись и оплата через приложение',
      'История тренировок и учеников',
      'Уведомления о записях и отменах'
    ],
    illu:'COACH'
  },
  {
    id:'org',
    label:'Организаторам',
    Icon: IconBracket,
    title:'Турниры в одном инструменте',
    body:'Сетка, регистрация, оплата, результаты и live-scoring - без таблиц и переписок. История турниров остаётся у сообщества.',
    perks:[
      'Создание турнира за 5 минут',
      'Регистрация и оплата онлайн',
      'Live-scoring и автоматическая сетка',
      'История и публикация результатов'
    ],
    illu:'ORG'
  },
  {
    id:'club',
    label:'Площадкам',
    Icon: IconClub,
    title:'Корты на карте города',
    body:'Добавь свои корты, получай заявки на бронь и организуй события прямо в приложении. Без отдельного сайта и менеджера в Telegram.',
    perks:[
      'Корты на общей карте сообщества',
      'Бронь и оплата через приложение',
      'Своя страница площадки',
      'События и абонементы'
    ],
    illu:'CLUB'
  }
];

function Roles(){
  const [active, setActive] = useState(ROLES[0].id);
  const r = ROLES.find(r => r.id === active);
  return (
    <section id="roles" className="roles">
      <div className="wrap">
        <div className="sect-head" style={{ marginBottom: 28 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Для кого</div>
            <h2>Четыре роли,<br/>одно приложение.</h2>
          </div>
          <p className="lead">
            Каждая роль получает свой инструмент. Профили могут совмещаться:
            игрок может быть и организатором, тренер - игроком.
          </p>
        </div>

        <div className="roles-card">
          <div>
            <div className="roles-tabs">
              {ROLES.map((r, i) => (
                <button key={r.id} className={"roles-tab" + (active === r.id ? ' on' : '')} onClick={() => setActive(r.id)}>
                  <span style={{ display:'flex', alignItems:'center' }}>
                    <span className="num">0{i+1}</span>
                    {r.label}
                  </span>
                  <span className="arrow"><IconArrow size={16} stroke={1.8}/></span>
                </button>
              ))}
            </div>
          </div>

          <div className="roles-panel" key={r.id}>
            <div>
              <h3>{r.title}</h3>
              <p>{r.body}</p>
              <ul className="roles-perks">
                {r.perks.map((p, i) => (
                  <li key={i}>
                    <IconCheck size={16} stroke={2}/>
                    <span>{p}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="roles-illu">
              <RoleIllu kind={r.illu} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function RoleIllu({ kind }){
  // Brand-friendly geometric illustrations
  if (kind === 'PLAYER') {
    return (
      <svg viewBox="0 0 220 220" style={{ width:'100%', height:'100%' }}>
        <circle cx="110" cy="110" r="100" fill="none" stroke="var(--depth)" strokeWidth="1.5" strokeDasharray="3 5" opacity=".15"/>
        {/* Avatar: head + shoulders */}
        <circle cx="110" cy="92" r="26" fill="var(--canvas)" stroke="var(--depth)" strokeWidth="1.5"/>
        <path d="M62 168 C 70 140, 96 128, 110 128 C 124 128, 150 140, 158 168" fill="var(--canvas)" stroke="var(--depth)" strokeWidth="1.5"/>
        <circle cx="148" cy="72" r="8" fill="var(--ocean)"/>
        <text x="110" y="195" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--depth)" letterSpacing=".15em">ИГРОК</text>
      </svg>
    );
  }
  if (kind === 'COACH') {
    return (
      <svg viewBox="0 0 220 220" style={{ width:'100%', height:'100%' }}>
        <rect x="30" y="60" width="160" height="100" rx="6" fill="var(--canvas)" stroke="var(--depth)" strokeWidth="1.5"/>
        <line x1="30" y1="110" x2="190" y2="110" stroke="var(--depth)" strokeWidth="1.5" strokeDasharray="3 4"/>
        <line x1="110" y1="60" x2="110" y2="160" stroke="var(--depth)" strokeWidth="1.5"/>
        <circle cx="70" cy="85" r="6" fill="var(--ocean)"/>
        <circle cx="150" cy="85" r="6" fill="var(--depth)"/>
        <circle cx="70" cy="135" r="6" fill="var(--depth)"/>
        <circle cx="150" cy="135" r="6" fill="var(--ocean)"/>
        <text x="110" y="195" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--depth)" letterSpacing=".15em">ТРЕНЕР</text>
      </svg>
    );
  }
  if (kind === 'ORG') {
    return (
      <svg viewBox="0 0 220 220" style={{ width:'100%', height:'100%' }}>
        {/* Bracket */}
        <g stroke="var(--depth)" strokeWidth="1.5" fill="none">
          <path d="M30 50 v20 h25"/>
          <path d="M30 90 v-20 h25"/>
          <path d="M30 130 v20 h25"/>
          <path d="M30 170 v-20 h25"/>
          <path d="M55 70 v40 h25"/>
          <path d="M55 150 v-40 h25"/>
          <path d="M80 110 h25"/>
          <path d="M125 110 h25"/>
          <path d="M150 70 v40 h25"/>
          <path d="M150 150 v-40 h25"/>
          <path d="M175 50 v20 h25"/>
          <path d="M175 90 v-20 h25"/>
          <path d="M175 130 v20 h25"/>
          <path d="M175 170 v-20 h25"/>
        </g>
        <circle cx="115" cy="110" r="8" fill="var(--ocean)"/>
        <text x="110" y="200" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--depth)" letterSpacing=".15em">ТУРНИР</text>
      </svg>
    );
  }
  // CLUB
  return (
    <svg viewBox="0 0 220 220" style={{ width:'100%', height:'100%' }}>
      <rect x="40" y="40" width="60" height="60" rx="4" fill="var(--canvas)" stroke="var(--depth)" strokeWidth="1.5"/>
      <rect x="120" y="40" width="60" height="60" rx="4" fill="var(--ocean)"/>
      <rect x="40" y="120" width="60" height="60" rx="4" fill="var(--depth)"/>
      <rect x="120" y="120" width="60" height="60" rx="4" fill="var(--canvas)" stroke="var(--depth)" strokeWidth="1.5"/>
      <line x1="60" y1="60" x2="80" y2="80" stroke="var(--depth)" strokeWidth="1.5"/>
      <line x1="80" y1="60" x2="60" y2="80" stroke="var(--depth)" strokeWidth="1.5"/>
      <line x1="140" y1="140" x2="160" y2="160" stroke="var(--depth)" strokeWidth="1.5"/>
      <line x1="160" y1="140" x2="140" y2="160" stroke="var(--depth)" strokeWidth="1.5"/>
      <text x="110" y="205" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--depth)" letterSpacing=".15em">ПЛОЩАДКА</text>
    </svg>
  );
}

// ───── Pricing ─────
function Pricing(){
  return (
    <section id="pricing" className="pricing">
      <div className="wrap">
        <div className="sect-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Стоимость</div>
            <h2>Прозрачные цены, без скрытых платежей</h2>
          </div>
          <p className="lead">
            Подписка для активных игроков и взносы за участие в турнирах. Бронирование корта остаётся за клубами-партнёрами.
          </p>
        </div>

        <div className="pricing-grid">
          <article className="pri-card">
            <header className="pri-head">
              <p className="pri-kicker">Подписка</p>
              <h3>Premium для игроков</h3>
            </header>
            <ul className="pri-tiers">
              <li>
                <span className="pri-period">1 месяц</span>
                <b className="pri-amount">299 ₽</b>
              </li>
              <li className="pri-tier-popular">
                <span className="pri-period">3 месяца</span>
                <b className="pri-amount">799 ₽</b>
                <em className="pri-save">−11%</em>
              </li>
              <li>
                <span className="pri-period">12 месяцев</span>
                <b className="pri-amount">2 490 ₽</b>
                <em className="pri-save">−30%</em>
              </li>
            </ul>
            <p className="pri-note">Безлимит на создание турниров, полная история игр и динамика ELO, расширенные фильтры поиска, приоритетная поддержка, без рекламы.</p>
          </article>

          <article className="pri-card pri-card-dark">
            <header className="pri-head">
              <p className="pri-kicker">Разово</p>
              <h3>Взнос за турнир</h3>
            </header>
            <ul className="pri-tiers">
              <li>
                <span className="pri-period">Любительский</span>
                <b className="pri-amount">500 ₽</b>
              </li>
              <li>
                <span className="pri-period">Стандартный</span>
                <b className="pri-amount">1 000 ₽</b>
              </li>
              <li>
                <span className="pri-period">Рейтинговый</span>
                <b className="pri-amount">1 500 ₽</b>
              </li>
            </ul>
            <p className="pri-note">Включает: организационный сбор, аренду корта, инвентарь, призовой фонд (для рейтинговых турниров).</p>
          </article>
        </div>

        <div className="pricing-foot">
          <a className="btn btn-ghost btn-sm" href="pricing.html">
            <span>Все тарифы и реквизиты</span>
            <IconArrow size={14}/>
          </a>
          <p className="pricing-foot-mono">Оплата через ЮKassa · чеки по 54-ФЗ · условия в <a href="legal/public-offer.html">оферте</a></p>
        </div>
      </div>
    </section>
  );
}

// ───── Geography ─────
function Geography(){
  return (
    <section className="geo">
      <div className="wrap geo-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>География</div>
          <h2>Стартуем с Поволжья.<br/>Растём по стране.</h2>
          <p className="lead" style={{ marginTop: 20 }}>
            Запускаемся там, где уже есть живое сообщество. По мере подключения
            новых клубов и площадок открываем приложение в новых городах.
          </p>
          <ul className="geo-list">
            <li>
              <span className="mark"></span>
              <span className="city">Саратов</span>
              <span className="meta">~500 активных игроков</span>
              <span className="status">Старт</span>
            </li>
            <li>
              <span className="mark"></span>
              <span className="city">Энгельс</span>
              <span className="meta">пляжный теннис, лето</span>
              <span className="status">Старт</span>
            </li>
            <li>
              <span className="mark soon"></span>
              <span className="city">Самара</span>
              <span className="meta">подключение клубов</span>
              <span className="status soon">Q3</span>
            </li>
            <li>
              <span className="mark soon"></span>
              <span className="city">Другие города</span>
              <span className="meta">по заявкам сообщества</span>
              <span className="status soon">Скоро</span>
            </li>
          </ul>
        </div>

        <div className="map-stage">
          <svg viewBox="0 0 400 320" className="map-svg" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="mapGrid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M40 0H0V40" fill="none" stroke="rgba(11,23,41,.06)" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="400" height="320" fill="url(#mapGrid)"/>
            {/* Volga river */}
            <path d="M40 60 C 90 90, 110 150, 170 170 C 230 190, 260 240, 320 270 L 360 300"
              fill="none" stroke="rgba(11,79,224,.18)" strokeWidth="22" strokeLinecap="round"/>
            <path d="M40 60 C 90 90, 110 150, 170 170 C 230 190, 260 240, 320 270 L 360 300"
              fill="none" stroke="var(--ocean)" strokeWidth="1.5" strokeDasharray="4 5" opacity=".5"/>
            {/* Samara (soon) */}
            <g transform="translate(110, 110)">
              <circle r="12" fill="var(--canvas)" stroke="var(--depth)" strokeWidth="1.2" strokeDasharray="3 3" opacity=".55"/>
              <circle r="3" fill="var(--depth)" opacity=".5"/>
            </g>
            <text x="110" y="95" textAnchor="middle" className="map-lab soon">Самара</text>
            {/* Saratov - active */}
            <g transform="translate(190, 180)">
              <circle r="18" fill="var(--ocean)" opacity=".14"/>
              <circle r="10" fill="var(--ocean)"/>
              <circle r="4" fill="#fff"/>
            </g>
            <text x="190" y="160" textAnchor="middle" className="map-lab on">Саратов</text>
            {/* Engels - active */}
            <g transform="translate(240, 215)">
              <circle r="14" fill="var(--ocean)" opacity=".12"/>
              <circle r="8" fill="var(--ocean)"/>
              <circle r="3" fill="#fff"/>
            </g>
            <text x="260" y="222" textAnchor="start" className="map-lab on">Энгельс</text>
            {/* Future ? */}
            <g transform="translate(330, 70)">
              <circle r="11" fill="none" stroke="var(--depth)" strokeWidth="1" strokeDasharray="2 3" opacity=".4"/>
              <text textAnchor="middle" dy="4" fontFamily="var(--font-d)" fontSize="12" fill="var(--depth)" opacity=".5">?</text>
            </g>
          </svg>

          <div className="map-legend">
            <span><i className="on"></i> Активные</span>
            <span><i className="soon"></i> На подходе</span>
            <span className="river">река Волга</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── How it works ─────
function How(){
  return (
    <section id="how" className="how">
      <div className="wrap">
        <div className="sect-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>3 шага</div>
            <h2>От установки -<br/>до первой игры.</h2>
          </div>
          <p className="lead">
            Регистрация по email с одноразовым кодом - без паролей.
            Можно играть, даже если ты ещё не выбрал клуб.
          </p>
        </div>

        <div className="how-grid">
          <div className="how-step">
            <span className="how-num">/ 01</span>
            <h3>Зарегистрируйся<br/>по email</h3>
            <p>Код приходит за 30 секунд. Пароль не нужен - только почта.</p>
            <div className="how-illu">
              <svg viewBox="0 0 200 80">
                <rect x="20" y="20" width="160" height="40" rx="8" fill="#fff" stroke="var(--depth)" strokeWidth="1.5"/>
                <text x="100" y="46" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="20" fill="var(--depth)" letterSpacing=".25em">3 4 7 9</text>
              </svg>
            </div>
          </div>
          <div className="how-step">
            <span className="how-num">/ 02</span>
            <h3>Заполни<br/>профиль</h3>
            <p>Город, виды спорта, уровень. Это занимает меньше минуты.</p>
            <div className="how-illu">
              <svg viewBox="0 0 200 80">
                <rect x="20" y="18" width="160" height="12" rx="6" fill="#fff" stroke="var(--depth)" strokeWidth="1.5"/>
                <rect x="20" y="18" width="100" height="12" rx="6" fill="var(--ocean)"/>
                <rect x="20" y="44" width="160" height="12" rx="6" fill="#fff" stroke="var(--depth)" strokeWidth="1.5"/>
                <rect x="20" y="44" width="60" height="12" rx="6" fill="var(--depth)"/>
              </svg>
            </div>
          </div>
          <div className="how-step">
            <span className="how-num">/ 03</span>
            <h3>Играй<br/>уже сегодня</h3>
            <p>Записывайся на события из ленты или создавай свои - открытые или для друзей.</p>
            <div className="how-illu">
              <svg viewBox="0 0 200 80">
                {/* Calendar with checkmark */}
                <rect x="54" y="18" width="92" height="50" rx="6" fill="#fff" stroke="var(--depth)" strokeWidth="1.5"/>
                <line x1="54" y1="30" x2="146" y2="30" stroke="var(--depth)" strokeWidth="1.5"/>
                <line x1="72" y1="12" x2="72" y2="24" stroke="var(--depth)" strokeWidth="1.5" strokeLinecap="round"/>
                <line x1="128" y1="12" x2="128" y2="24" stroke="var(--depth)" strokeWidth="1.5" strokeLinecap="round"/>
                <rect x="68" y="40" width="14" height="14" rx="2" fill="var(--sand)" stroke="var(--depth)" strokeWidth="1"/>
                <rect x="93" y="40" width="14" height="14" rx="2" fill="var(--ocean)"/>
                <path d="M97 47 l3 3 l6 -6" stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                <rect x="118" y="40" width="14" height="14" rx="2" fill="#fff" stroke="var(--depth)" strokeWidth="1"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── Screenshots ─────
function Shots(){
  return (
    <section id="screens" className="shots">
      <div className="wrap">
        <div className="sect-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Экраны</div>
            <h2>Так выглядит приложение.</h2>
          </div>
          <p className="lead">
            Пять ключевых экранов: лента, событие, карта, рейтинг и турнирная сетка.
            Простая навигация, никакой перегрузки.
          </p>
        </div>

        <div className="shots-scroller">
          {[
            { label:'01 · Лента',     b:'Home',      Screen: ScreenHome },
            { label:'02 · Событие',   b:'Event',     Screen: ScreenEvent },
            { label:'03 · Карта',     b:'Map',       Screen: ScreenMap },
            { label:'04 · Рейтинг',   b:'Rating',    Screen: ScreenRating },
          ].map((s, i) => (
            <div key={i} className="shot">
              <div className="shot-label">
                <span>{s.label}</span>
                <b>{s.b}</b>
              </div>
              <div className="shot-frame-wrap">
                <s.Screen />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── FAQ ─────
const FAQ_ITEMS = [
  {
    q: 'Сколько стоит приложение?',
    a: 'Бесплатно для игроков. Платными остаются только аренда кортов и тренировки - по тарифам площадки или тренера. С каждой брони/тренировки сервис берёт небольшую комиссию.'
  },
  {
    q: 'Это только для профи?',
    a: 'Нет. Ядро аудитории - любители категорий B и C, 30–45 лет. Рейтинг строится так, чтобы новичок встретил соперника своего уровня, а не вылетел против профессионала с 1700+ ELO.'
  },
  {
    q: 'Падел и пляжный теннис - это одно приложение?',
    a: 'Да, одно приложение. Рейтинг ELO считается раздельно: можно быть B-игроком в падел и C-новичком на пляже одновременно.'
  },
  {
    q: 'Мой клуб может присоединиться?',
    a: 'Да. Любая площадка может добавить свои корты, создавать события и подключать тренеров. Это открытая платформа - не сеть, не франшиза.'
  },
  {
    q: 'Когда релиз?',
    a: 'Backend в активной разработке, mobile-приложение подключается к API. Точную дату объявим ближе к выходу - оставь email ниже, чтобы узнать первым.'
  },
  {
    q: 'А если у меня нет партнёра для игры?',
    a: 'Большинство событий в ленте - открытые. Записываешься один, остальных собирает приложение. Уровень подбирается по ELO, чтобы игра была интересной.'
  },
];

function FAQ(){
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="faq">
      <div className="wrap faq-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>FAQ</div>
          <h2>Частые<br/>вопросы.</h2>
          <p className="lead" style={{ marginTop: 24 }}>
            Не нашёл ответ? Напиши нам - мы добавим его сюда.
          </p>
          <a className="btn btn-ghost" href="mailto:info@starcourt.ru" style={{ marginTop: 28 }}>
            <span>Написать команде</span>
            <IconArrow size={16}/>
          </a>
        </div>

        <div className="faq-list">
          {FAQ_ITEMS.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={"faq-item" + (isOpen ? ' open' : '')}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="plus"><IconPlus size={14} stroke={2}/></span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? 240 : 0 }}>
                  <div className="faq-a-in">{it.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ───── CTA / Email capture ─────
function CTA(){
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  const [err, setErr] = useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setErr('Проверь адрес почты');
      return;
    }
    setErr('');
    setSent(true);
  };
  return (
    <section id="download" className="cta">
      <div className="wrap">
        <div className="cta-card">
          <div>
            <div className="eyebrow" style={{ color:'rgba(255,255,255,.6)', marginBottom: 18 }}>
              <span style={{ color:'rgba(255,255,255,.6)' }}>Релиз скоро</span>
            </div>
            <h2>Узнай о запуске первым.</h2>
            <p className="lead">
              Оставь email - расскажем, когда приложение появится в сторах,
              и пришлём ранний доступ для сообщества Саратова и Энгельса.
            </p>

            {!sent ? (
              <>
                <form className="cta-form" onSubmit={submit} style={{ marginTop: 28 }}>
                  <input
                    type="email"
                    placeholder="ваш@email.ru"
                    value={email}
                    onChange={e => { setEmail(e.target.value); setErr(''); }}
                  />
                  <button className="btn" type="submit">
                    <span>Подписаться</span>
                    <IconArrow size={16}/>
                  </button>
                </form>
                <div className="cta-fineprint">
                  {err ? err : 'Без спама. Письмо одно - когда релиз.'}
                </div>
              </>
            ) : (
              <div className="cta-success" style={{ marginTop: 28 }}>
                <IconCheck size={18} stroke={2.2}/>
                <span>Готово. Напишем на <b>{email}</b>, когда стартуем.</span>
              </div>
            )}
          </div>

          <div className="cta-shape">
            <svg viewBox="0 0 200 200" style={{ width:'70%', height:'70%' }}>
              {/* Envelope with notification dot */}
              <rect x="30" y="60" width="140" height="96" rx="10" fill="none" stroke="var(--depth)" strokeWidth="1.5"/>
              <path d="M30 70 L 100 118 L 170 70" stroke="var(--depth)" strokeWidth="1.5" fill="none"/>
              <circle cx="158" cy="60" r="14" fill="var(--ocean)"/>
              <circle cx="158" cy="60" r="14" fill="none" stroke="#fff" strokeWidth="2"/>
              <text x="100" y="184" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="var(--depth)" letterSpacing=".2em">STARCOURT</text>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── Footer ─────
function Footer(){
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <a className="logo" href="#top" aria-label="СтарКорт">
              <img className="logo-img" src="assets/logo.png" alt="СтарКорт" />
            </a>
            <p>Приложение для сообщества падел-тенниса и пляжного тенниса. Саратов · Энгельс · скоро в других городах.</p>
            <p className="foot-contact">
              <a href="mailto:info@starcourt.ru">info@starcourt.ru</a>
            </p>
          </div>
          <div className="foot-col">
            <h4>Продукт</h4>
            <ul>
              <li><a href="#features">Возможности</a></li>
              <li><a href="#roles">Для кого</a></li>
              <li><a href="#pricing">Тарифы</a></li>
              <li><a href="#how">Как работает</a></li>
              <li><a href="https://pwa.starcourt.ru/" target="_blank" rel="noopener">Открыть приложение</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Сообществу</h4>
            <ul>
              <li><a href="#">Добавить клуб</a></li>
              <li><a href="#">Стать тренером</a></li>
              <li><a href="#">Создать турнир</a></li>
              <li><a href="#faq">Вопросы</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Документы</h4>
            <ul>
              <li><a href="/legal/terms-of-use.html">Пользовательское соглашение</a></li>
              <li><a href="/legal/public-offer.html">Публичная оферта</a></li>
              <li><a href="/legal/privacy-policy.html">Политика конфиденциальности</a></li>
              <li><a href="/legal/personal-data-consent.html">Согласие на обработку ПД</a></li>
              <li><a href="/legal/cookie-policy.html">Политика cookie</a></li>
              <li><a href="/legal/account-deletion.html">Удаление аккаунта</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 ИП Пажитнов В.А. · ИНН 645395261024 · ОГРНИП 317645100021677 · Сделано в Саратове</span>
          <span>starcourt.ru</span>
        </div>
      </div>
    </footer>
  );
}

// ───── Orphan fix: glue Russian prepositions/conjunctions to next word ─────
function useOrphanFix(){
  useEffect(() => {
    const re = /(^|[\s («„—-])(во?|со?|у|на|по|для|ко?|о|об|обо|до|от|за|из|без|при|про|над|под|перед|через|и|а|но|или|что|как|если|не|ни|же|бы|ли)\s+(?=[А-Яа-яЁёA-Za-z0-9])/giu;
    const sels = 'h1, h2, h3, h4, .lead, .hero-sub, .usp-quote, .usp-tag, .feat p, .roles-perks li, .how-step p, .faq-a-in, .ps-list li, .hero-meta span, .cta-card p';
    document.querySelectorAll(sels).forEach(el => {
      const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
      const nodes = [];
      let n; while ((n = walker.nextNode())) nodes.push(n);
      nodes.forEach(node => {
        const v = node.nodeValue;
        const fixed = v.replace(re, (_m, pre, w) => pre + w + '\u00A0');
        if (fixed !== v) node.nodeValue = fixed;
      });
    });
  });
}

// ───── Reveal observer ─────
function useReveal(){
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -80px 0px', threshold: 0.05 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ───── App ─────
function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useReveal();
  useOrphanFix();

  return (
    <>
      <Nav />
      <Hero />
      <ProblemSolution />
      <USP />
      <Features density={t.featureDensity} />
      <Roles />
      <Pricing />
      <Geography />
      <How />
      <Shots />
      <FAQ />
      <CTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Палитра" />
        <TweakRadio
          label="Тон"
          value={t.palette}
          options={['ocean', 'midnight', 'warm']}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Лента возможностей" />
        <TweakRadio
          label="Плотность"
          value={t.featureDensity}
          options={['compact', 'regular']}
          onChange={(v) => setTweak('featureDensity', v)}
        />
      </TweaksPanel>
    </>
  );
}

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