/* /programs/business — программа Бизнес */

const Business = () => {
  const navy = '#1A2535';
  const cream = '#F2EADA';
  return (
    <main className="page">
      <Marquee on={window.__tweaks?.marquee !== false}/>
      <Nav current="business"/>

      {/* HERO */}
      <section className="section" style={{
        paddingTop: 40,
        backgroundImage: "linear-gradient(180deg, rgba(16,24,42,0.72) 0%, rgba(16,24,42,0.86) 100%), url('image/vert-business-hero.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}>
        <div className="tag">/программы · 03 — бизнес</div>
        <h1 className="poster poster-xl" style={{marginTop: 24}}>
            БИЗНЕС —<br/>
            <span className="orange">НЕ СТЕКЛЯННЫЙ</span><br/>
            ПОТОЛОК.
          </h1>

        <div className="rule-top rule-bottom hero-stats" style={{marginTop: 32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24, padding:'32px 0'}}>
          {[
            ['ФОРМАТ','программа, 4 сессии'],
            ['ДЛИТЕЛЬНОСТЬ','2 месяца'],
            ['ЦЕНА','от 120 000 ₽'],
            ['КОМУ','фаундеры · СЕО · соло'],
          ].map(([k,v])=>(
            <div key={k}>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 10}}>/{k.toLowerCase()}</div>
              <div style={{fontFamily:'var(--f-display)', fontSize: 26, fontWeight: 900, letterSpacing:'-0.015em', lineHeight: 1.1}}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* СИМПТОМЫ */}
      <section className="section bg-deep">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 01 — симптомы</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>СНАРУЖИ <span className="orange">ВСЁ ОК.</span></h2>
          </div>
          <div className="right">ВНУТРИ —<br/>ДРУГАЯ ПЕСНЯ</div>
        </div>
        <div className="sym-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 0, borderTop:'2px solid var(--cream)'}}>
          {[
            ['01','ОБОРОТ РАСТЁТ — РАДОСТИ НЕТ','Цифры бьют рекорды. Ты смотришь в отчёт как в чужой.'],
            ['02','БЕРЁШЬ БОЛЬШЕ, ЧЕМ МОЖЕШЬ','Не умеешь отказывать. Команда перегружена, ты — в хвосте.'],
            ['03','СТЕКЛЯННЫЙ ПОТОЛОК ОБОРОТА','На одной цифре второй год. Планы пишешь, движения нет.'],
            ['04','НЕ МОЖЕШЬ ДЕЛЕГИРОВАТЬ','«Никто лучше меня». В итоге сама делаешь работу троих.'],
            ['05','БОИШЬСЯ «ПОТЕРЯТЬ ЛИЦО»','Любая ошибка — лично твоя катастрофа. Решения идут через страх.'],
            ['06','УХОДЯТ ЛЮДИ','Хорошие кадры не задерживаются. Не понимаешь почему — «плачу же».'],
          ].map(([n,t,d])=>(
            <div key={n} style={{padding:'28px 24px', borderRight:'1px solid var(--cream-33)', borderBottom:'1px solid var(--cream-33)', minHeight: 200, display:'flex', flexDirection:'column'}}>
              <div className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', marginBottom: 14}}>/{n}</div>
              <h3 className="poster poster-xs" style={{fontSize:'clamp(19px, 2.19vw, 26px)', margin:'0 0 10px'}}>{t}</h3>
              <p style={{fontSize: 15, lineHeight: 1.5, margin: 0, color:'var(--cream-99)'}}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ИДЕОЛОГИЯ */}
      <section className="section">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 02 — как смотрим</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>БИЗНЕС — <span className="orange">ОТРАЖЕНИЕ.</span></h2>
          </div>
          <div className="right">НЕ РОЛЬ.<br/>НЕ НАВЫК.<br/>СИСТЕМА</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 48}} className="ideo-split">
          <div style={{fontSize: 15, lineHeight: 1.5, fontWeight: 500, letterSpacing:'-0.005em'}}>
            <p style={{margin:'0 0 20px'}}>
              Мы не учим «стратегии» и не лечим выгорание массажем. Бизнес у тебя такой, какая ты сама. Цифры — это отчёт о внутреннем состоянии собственника.
            </p>
            <p style={{margin:'0 0 20px'}}>
              Работаем с тем, что <i>под</i> результатами: с ролью, которую ты играешь в собственной компании. С родом, который разрешил или не разрешил тебе быть крупной. С телом, которое уже устало нести то, что несёт.
            </p>
            <p style={{margin: 0, color:'var(--cream-77)'}}>
              Когда эти слои встают на место — стратегия пишется за вечер, команда собирается сама, а «потолок» оказывается фанерой.
            </p>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap: 0, borderTop:'2px solid var(--cream)'}}>
            {[
              ['СТРАТЕГИЯ','симптом'],
              ['КОМАНДА','симптом'],
              ['ОБОРОТ','симптом'],
              ['СОБСТВЕННИК','корень'],
            ].map(([k,v])=>(
              <div key={k} style={{display:'flex', justifyContent:'space-between', padding:'18px 0', borderBottom:'1px solid var(--cream-33)'}}>
                <span style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, letterSpacing:'-0.01em'}}>{k}</span>
                <span className={v==='корень' ? 'orange' : ''} style={{fontFamily:'var(--f-mono)', fontSize: 15, letterSpacing:'0.12em', textTransform:'uppercase'}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 4 СЕССИИ */}
      <section className="section bg-deep">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 03 — программа</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ЧЕТЫРЕ ХОДА.</h2>
          </div>
          <div className="right">2 МЕСЯЦА /<br/>4 СЕССИИ · 90 МИН</div>
        </div>
        <div>
          {[
            ['01','РОЛЬ','Какую из семейных ролей ты продолжаешь играть в бизнесе. Кто в компании — «мама», кто — «младший брат». Почему ты взяла себе именно эту.'],
            ['02','РОД','Что разрешил или запретил твой род. Деньги больше, чем у родителей. Власть. Масштаб. Публичность. Обычно запрет неявный — в теле.'],
            ['03','ПОТОЛОК','Работаем с конкретной цифрой, в которую упёрлась. Не через «мотивацию», а через то, что ты получишь, если её пробьёшь. И чего потеряешь.'],
            ['04','СБОРКА','Новая роль собственника. План на 90 дней: что делаешь сама, что делегируешь, на что вообще не тратишь себя. Персональные точки сверки.'],
          ].map(([n,t,d])=>(
            <div key={n} className="stage-row" style={{
                display:'grid', gridTemplateColumns:'90px 1fr 1.8fr',
                gap: 32, alignItems:'start', padding:'26px 0',
                borderTop:'2px solid var(--cream)',
              }}>
              <span style={{fontFamily:'var(--f-display)', fontSize: 55, fontWeight: 900, color:'var(--accent)', lineHeight: 0.9, letterSpacing:'-0.03em'}}>{n}</span>
              <span style={{fontFamily:'var(--f-display)', fontSize:'clamp(29px, 3.19vw, 40px)', fontWeight: 900, letterSpacing:'-0.02em', lineHeight: 1}}>{t}</span>
              <span style={{fontSize: 12, color:'var(--cream-99)', lineHeight: 1.5, paddingTop: 8}}>{d}</span>
            </div>
          ))}
        </div>
      </section>

      {/* РЕЗУЛЬТАТЫ */}
      <section className="section">
        <div className="tag">§ 04 — что меняется</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          ПОСЛЕ — <span className="orange">ИНАЧЕ.</span>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0}} className="res-grid">
          <div style={{borderTop:'2px solid var(--cream)', borderRight:'1px solid var(--cream-33)'}}>
            <div style={{padding:'24px 32px 24px 0'}}>
              <div className="tag" style={{color:'var(--acid)', marginBottom: 16}}>◁ БЫЛО</div>
              <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 14}}>
                {['«Я не могу без меня»', 'Цифра застыла', 'Люди уходят, не понимаю', 'Выгорание через месяц', 'Боюсь повысить чек'].map((t,i)=>(
                  <li key={i} style={{fontSize: 14, lineHeight: 1.4, paddingLeft: 22, position:'relative', color:'var(--cream-99)', textDecoration:'line-through', textDecorationColor:'var(--cream-33)'}}>
                    <span style={{position:'absolute', left: 0, color:'var(--cream-77)'}}>×</span>{t}
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div style={{borderTop:'2px solid var(--accent)'}}>
            <div style={{padding:'24px 0 24px 32px'}}>
              <div className="tag orange" style={{marginBottom: 16}}>▷ СТАЛО</div>
              <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 14}}>
                {[
                  'Компания работает без меня неделю — и не разваливается',
                  'Оборот × 1.5—2 за 3—6 мес',
                  'Собралась команда, с которой хочется',
                  'Работаю 6 часов, не 14',
                  'Беру чек, на который раньше «не тянула»',
                ].map((t,i)=>(
                  <li key={i} style={{fontSize: 14, lineHeight: 1.4, paddingLeft: 22, position:'relative', fontWeight: 600}}>
                    <span style={{position:'absolute', left: 0, color:'var(--accent)', fontWeight: 800}}>→</span>{t}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
        <p style={{fontSize: 14, fontStyle:'italic', color:'var(--cream-77)', marginTop: 24}}>
          Результаты — реальные истории первых клиентов метода за 2024—2025. Не гарантия: работаем только с теми, кто готов.ко если ты включаешься.
        </p>
      </section>

      {/* ОТЗЫВ */}
      <section className="section bg-cream" style={{color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.5fr', gap: 48, alignItems:'center'}} className="rev-split">
          <div className="ph light" style={{height: 380}} aria-label="Кейс">[ КЕЙС · СОБСТВЕННИК ]</div>
          <figure style={{margin: 0}}>
            <div className="tag" style={{color:'var(--acid)', marginBottom: 16}}>§ 05 — один кейс</div>
            <blockquote style={{margin: 0}}>
              <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(29px, 3.40vw, 42px)', fontWeight: 900, lineHeight: 1.05, letterSpacing:'-0.02em', margin:'0 0 20px'}}>
                «Восемь лет я сидела на одной цифре. Объясняла "рынок", "нишу", "команду". Оказалось — себе не разрешала.»
              </div>
              <div style={{fontSize: 14, lineHeight: 1.55, margin:'0 0 20px', color:'rgba(26,37,53,0.8)'}}>
                На второй сессии вскрылось: «в моей семье не зарабатывали больше 300». Отработали. За полгода компания выросла в 2.1 раза, команда собралась под новый объём сама.
              </div>
              <figcaption style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', textTransform:'uppercase', opacity: 0.7}}>
                ЮЛИЯ, 38 / СЕО / ПРОГРАММА БИЗНЕС · 2024
              </figcaption>
            </blockquote>
          </figure>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="tag">§ 06 — вопросы</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>ЧЕСТНО.</h2>
        <div>
          {[
            ['А это не коучинг?','Нет. Коучинг работает с целями и планами — «как из точки А в точку B». Мы работаем с причиной, по которой точка B всё это время ускользала. Стратегию ты напишешь сама — когда перестанет мешать то, что мешало.'],
            ['У меня нет «травмы». Мне это нужно?','«Травма» — не обязательное условие. Достаточно иметь бизнес и чувствовать, что ты в нём играешь по сценарию, который сама не выбирала. Обычно этого хватает.'],
            ['Можно с мужем-соосновником?','Можно. Часто — нужно. Для пары собственников делаем отдельный формат: 6 сессий, половина индивидуально, половина вместе.'],
            ['За 4 сессии можно реально что-то сдвинуть?','Сдвинуть — да. Закрепить — зависит от тебя. Программа — это старт, не курс-таблетка. После часто идут в VIP на доработку.'],
            ['Нужны ли финансовые отчёты, P&L?','Нет. Нам не нужен твой P&L — нам нужна ты. Цифры ты и так знаешь. Мы работаем с тем, что за цифрами.'],
          ].map(([q,a],i)=>(
            <details key={i} style={{borderTop: i===0 ? '2px solid var(--cream)' : '1px solid var(--cream-33)', padding:'26px 0'}} open={i===0}>
              <summary style={{cursor:'pointer', listStyle:'none', display:'flex', justifyContent:'space-between', alignItems:'baseline', gap: 20}}>
                <span style={{fontFamily:'var(--f-display)', fontSize: 30, fontWeight: 800, letterSpacing:'-0.015em', lineHeight: 1.2}}>{q}</span>
                <span style={{color:'var(--accent)', fontSize: 34, fontWeight: 300}} aria-hidden="true">+</span>
              </summary>
              <p style={{fontSize: 15, lineHeight: 1.55, margin:'18px 0 0', color:'var(--cream-99)', maxWidth: 820}}>{a}</p>
            </details>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="section pad-lg bg-deep" id="record">
        <div className="tag">● заявка на программу</div>
        <h2 className="poster poster-lg" style={{margin:'20px 0 40px'}}>
          ПОРА <span className="orange">ПРОБИТЬ ПОТОЛОК?</span>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48, alignItems:'start'}} className="record-grid">
          <div>
            <p style={{fontSize: 15, lineHeight: 1.5, margin:'0 0 24px', maxWidth: 520}}>
              Перед стартом — 15 минут бесплатного созвона. Убеждаемся, что программа подходит под твою ситуацию, и согласовываем сроки.
            </p>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.08em', color:'var(--cream-77)', lineHeight: 1.8}}>
              БЛИЖАЙШИЙ ПОТОК → ИЮНЬ<br/>
              СЛОТОВ В ПОТОКЕ → 10<br/>
              СВОБОДНО → <span style={{color:'var(--accent)'}}>5</span><br/>
              РАССРОЧКА → 2 ПЛАТЕЖА
            </div>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка на программу «Бизнес» отправлена. Напишем в течение суток для созвона.');}}>
            <div><label htmlFor="b-name">Имя</label><input id="b-name" name="name" type="text" required/></div>
            <div><label htmlFor="b-tg">Telegram или WhatsApp</label><input id="b-tg" name="contact" type="text" required placeholder="@username или +7…"/></div>
            <div><label htmlFor="b-role">Роль</label>
              <select id="b-role" name="role" style={{width:'100%', padding:'14px 16px', background:'transparent', color:'var(--cream)', border:'2px solid var(--cream-33)', font:'500 15px/1.4 var(--f-sans)'}}>
                <option style={{background: navy}}>Собственник / фаундер</option>
                <option style={{background: navy}}>CEO / управляющий</option>
                <option style={{background: navy}}>Соло-предприниматель</option>
                <option style={{background: navy}}>Пара соосновников</option>
              </select>
            </div>
            <div><label htmlFor="b-q">Коротко о запросе</label><textarea id="b-q" name="query" placeholder="что происходит в бизнесе и что хочешь поменять"/></div>
            <button className="btn btn-orange btn-lg" type="submit">Оставить заявку →</button>
            <p className="form-note">Конфиденциально. Созвон ни к чему не обязывает.</p>
          </form>
        </div>
      </section>

      <NextSteps
        title={<>ДАЛЬШЕ — <span className="orange">ШАГ.</span></>}
        items={[
          {label:'Сессия', desc:'Начать с индивидуального разбора.', href:'session.html', primary:true},
          {label:'Кейсы', desc:'Истории, включая бизнес-разборы.', href:'cases.html'},
          {label:'Кто ведёт', desc:'Авторы метода — контакты и философия.', href:'about.html'},
        ]}
      />

      <Footer/>
      <FloatingCTA/>
    </main>
  );
};

window.Business = Business;