/* /programs/money — программа Деньги */

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

      {/* HERO */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="tag">/программы · 01 — деньги</div>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 40, alignItems:'end', marginTop: 24}} className="hero-grid">
          <h1 className="poster poster-xl" style={{margin: 0}}>
            ДЕНЬГИ —<br/>
            <span className="orange">НЕ ПРО ДЕНЬГИ.</span>
          </h1>
          <div className="ph" style={{height: 320}} aria-label="Кадр по теме">[ КАДР · ДЕНЬГИ ]</div>
        </div>
        <div className="rule-top rule-bottom hero-stats" style={{marginTop: 32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24, padding:'32px 0'}}>
          {[
            ['ФОРМАТ','программа, 4 сессии'],
            ['ДЛИТЕЛЬНОСТЬ','2 месяца'],
            ['ЦЕНА','от 90 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>

      {/* BIG STATEMENT */}
      <section className="section bg-orange" style={{color: navy, paddingTop: 72, paddingBottom: 72}}>
        <div className="tag" style={{color: navy, opacity: 0.7}}>§ 01 — тезис</div>
        <h2 className="poster" style={{fontSize:'clamp(56px, 8.49vw, 140px)', margin:'16px 0 0', letterSpacing:'-0.035em', lineHeight: 0.9}}>
          ТВОЙ ДОХОД —<br/>
          <i style={{fontWeight: 300}}>твоя</i> ЦИФРА РАЗРЕШЕНИЯ.
        </h2>
        <p style={{fontSize: 15, lineHeight: 1.4, maxWidth: 820, fontWeight: 500, marginTop: 40, letterSpacing:'-0.01em'}}>
          Не рынок. Не ниша. Не профессия. Не «могу / не могу». А конкретный потолок, который семья, род и твоё тело согласовали считать «нормальным» для тебя.
        </p>
      </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/>= ТВОЁ</div>
        </div>
        <div style={{borderTop:'2px solid var(--cream)'}}>
          {[
            ['01','«Ещё немножко и получится»','Третий год «ещё немножко». Цифра как ни старайся — одна и та же.'],
            ['02','Стыдно брать деньги','Озвучиваешь цену — внутри сжимается. Соглашаешься на меньшее.'],
            ['03','Заработала — потратила','Приходит больше — улетает ещё быстрее. Счёт остаётся с нулём.'],
            ['04','Боюсь поднять чек','«А что если уйдут?» Уходят те, кто и так не твои.'],
            ['05','«Дорого — это не про меня»','Качественное — для других. Тебе и Зара подойдёт.'],
            ['06','Долги — как норма','Без долгов — тревожно. Как будто чего-то не хватает.'],
            ['07','«В нашей семье так»','Родители не зарабатывали — и ты «не имеешь права»'],
          ].map(([n,t,d])=>(
            <div key={n} className="sym-row" style={{
              display:'grid', gridTemplateColumns:'70px 1.2fr 2fr',
              gap: 28, alignItems:'baseline', padding:'22px 0',
              borderBottom:'1px solid var(--cream-33)',
            }}>
              <span className="orange" style={{fontFamily:'var(--f-display)', fontSize: 44, fontWeight: 900, letterSpacing:'-0.03em', lineHeight: 1}}>{n}</span>
              <span style={{fontFamily:'var(--f-display)', fontSize:'clamp(22px, 2.40vw, 30px)', fontWeight: 900, letterSpacing:'-0.015em', lineHeight: 1.05}}>{t}</span>
              <span style={{fontSize: 12, color:'var(--cream-99)', lineHeight: 1.5}}>{d}</span>
            </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 1fr', gap: 0, borderTop:'2px solid var(--cream)', borderBottom:'2px solid var(--cream)'}} className="big-stats">
          {[
            ['× 1.8','средний рост дохода','за 6 мес после программы'],
            ['9/12','клиенток сдвинули потолок','из первых групп 2024—25'],
            ['0 ₽','потраченных на «курсы по деньгам»','потому что причина — не там'],
          ].map(([big,mid,small],i)=>(
            <div key={i} style={{padding:'40px 32px', borderRight: i<2 ? '1px solid var(--cream-33)' : 'none', display:'flex', flexDirection:'column', gap: 12}}>
              <div className="orange" style={{fontFamily:'var(--f-display)', fontSize:'clamp(56px, 7.00vw, 100px)', fontWeight: 900, letterSpacing:'-0.04em', lineHeight: 0.9}}>{big}</div>
              <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 800, letterSpacing:'-0.01em', lineHeight: 1.2}}>{mid}</div>
              <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.08em', color:'var(--cream-77)', textTransform:'uppercase'}}>{small}</div>
            </div>
          ))}
        </div>
        <p style={{fontSize: 14, fontStyle:'italic', color:'var(--cream-77)', marginTop: 20}}>
          Данные собраны с 47 участниц программы 2023—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'}}>
                «Три года сидела на 150. Прошла восемь курсов "про мышление". Сработало то, чего я боялась — разговор с родом.»
              </div>
              <div style={{fontSize: 14, lineHeight: 1.55, margin:'0 0 20px', color:'rgba(26,37,53,0.8)'}}>
                На второй сессии вскрылось: «бабушка просила не высовываться». Отработали. Через 4 месяца — стабильные 380, без надрыва и ночных смен.
              </div>
              <figcaption style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', textTransform:'uppercase', opacity: 0.7}}>
                АНАСТАСИЯ, 34 / ФРИЛАНС · ПРОГРАММА ДЕНЬГИ 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>
          {[
            ['Это про «денежное мышление»?','Нет. «Мышление» работает через голову, а потолок сидит в системе и теле. Поэтому про мышление можно прочитать всё — и остаться на прежней цифре. Мы работаем с корнем.'],
            ['У меня нет бизнеса. Подойдёт?','Да. Наёмным сотрудникам подходит отлично — работаем с твоим «чеком» как спецом, с установкой на повышение, с границей «просить».'],
            ['А если у меня долги?','Работаем и с этим — долг часто не финансовая, а системная история. После сессий клиентки закрывают долги в разы быстрее, чем до.'],
            ['Можно прийти с мужем, у нас общий бюджет?','Лучше — отдельно. Если интересно работать вдвоём — на VIP есть парный формат. В программе — только индивидуально.'],
            ['За 4 сессии реально можно сдвинуть цифру?','Сдвинуть — да. Удержать рост — зависит от тебя. Программа даёт старт. Часто после идут ещё одна-две сессии для закрепления.'],
          ].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/>
              СЛОТОВ В ПОТОКЕ → 12<br/>
              СВОБОДНО → <span style={{color:'var(--accent)'}}>7</span><br/>
              РАССРОЧКА → 2 ПЛАТЕЖА
            </div>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка на программу «Деньги» отправлена. Напишем в течение суток для созвона.');}}>
            <div><label htmlFor="m-name">Имя</label><input id="m-name" name="name" type="text" required/></div>
            <div><label htmlFor="m-tg">Telegram или WhatsApp</label><input id="m-tg" name="contact" type="text" required placeholder="@username или +7…"/></div>
            <div><label htmlFor="m-role">Сейчас зарабатываю</label>
              <select id="m-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}}>Фриланс / соло-практика</option>
                <option style={{background: navy}}>Свой бизнес</option>
                <option style={{background: navy}}>В поиске / пауза</option>
              </select>
            </div>
            <div><label htmlFor="m-q">Где сейчас цифра</label><textarea id="m-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.Money = Money;