/* Homepage — hi-fi bold direction */

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

      {/* HERO */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="tag">v2026 · первый экран</div>
        <h1 className="poster poster-xl" style={{marginTop: 24}}>
          С ТОБОЙ<br/>
          <span className="orange">ВСЁ В ПОРЯДКЕ.</span>
        </h1>
        <div className="hero-grid" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 32, marginTop: -20, alignItems:'end'}}>
          <h2 className="poster poster-lg" style={{margin: 0}}>
            ПРОСТО ТЫ<br/>ХОЧЕШЬ ИНАЧЕ.
          </h2>
          <div className="ph" style={{height: 320, marginBottom: 40, backgroundImage: "url('image/home-hero-portrait.jpg')", backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}} role="img" aria-label="Портрет авторов — жёсткий кадр"></div>
        </div>
        <div className="rule-top rule-bottom" style={{marginTop: 32, display:'grid',
          gridTemplateColumns:'1.3fr 1fr auto', gap: 32, alignItems:'center', padding:'32px 0'}}>
          <p style={{fontSize: 14, fontWeight: 500, margin: 0, lineHeight: 1.3, letterSpacing:'-0.01em', maxWidth: 620}}>
            Авторский метод, в котором результат закрепляется в теле —
            <b className="orange"> и не откатывается</b> через неделю.
          </p>
          <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.08em', color:'var(--cream-77)'}}>
            К.&nbsp;ПУЛЯТКИНА / Е.&nbsp;НОВИКОВСКАЯ<br/>
            Синхронизация души и тела<br/>
            2022 — ∞
          </div>
          <div style={{display:'flex', flexDirection:'column', gap: 10}}>
            <a className="btn btn-orange" href="#record">Записаться →</a>
            <a className="btn btn-ghost" href="for-whom.html">Подходит ли мне</a>
          </div>
        </div>
      </section>

      {/* УЗНАЙ СЕБЯ */}
      <section className="section">
        <div className="tag">§ 01 — узнай себя</div>
        <h2 className="poster poster-md" style={{marginTop: 16, marginBottom: 48}}>
          ТЫ <span className="orange">ПОПАЛА</span> СЮДА,<br/>ЕСЛИ…
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0}}>
          {[
            'ТРЕТИЙ РАЗ ЗА ПЯТЬ ЛЕТ — ОДИН СЦЕНАРИЙ В ОТНО­ШЕ­НИЯХ.',
            'ДЕНЬГИ ПРИХОДЯТ — И УХОДЯТ В НИКУДА.',
            'СБРАСЫВАЕШЬ ВЕС — ОН ВОЗВРАЩАЕТСЯ С ДРУЗЬЯМИ.',
            'ХОДИШЬ К ПСИХОЛОГАМ — А ВНУТРИ ВСЁ ТАК ЖЕ.',
            'В БИЗНЕСЕ ВКЛАДЫВАЕШЬСЯ НА 100 — А РАСТЁТ НА 30.',
            'ЖИВЁШЬ КАК БУДТО ЧЬЮ-ТО ЧУЖУЮ ЖИЗНЬ.',
          ].map((t,i)=>(
            <div key={i} style={{
                padding:'28px 24px',
                borderTop:'1px solid var(--cream-33)',
                borderLeft: i%2===1 ? '1px solid var(--cream-33)' : 'none',
                fontSize: 15, fontWeight: 600, lineHeight: 1.25, letterSpacing:'-0.01em',
              }}>
              <span className="orange" style={{fontFamily:'var(--f-mono)', fontSize: 14, display:'block', marginBottom: 10}}>
                /{String(i+1).padStart(2,'0')}
              </span>
              {t}
            </div>
          ))}
        </div>

        <div className="bg-orange" style={{marginTop: 60, padding:'48px var(--px)', display:'flex', gap: 32, alignItems:'center'}}>
          <div className="poster poster-md" aria-hidden="true" style={{lineHeight: 0.8}}>«</div>
          <p style={{fontSize: 22, fontWeight: 700, margin: 0, lineHeight: 1.15, letterSpacing:'-0.02em', maxWidth: 900}}>
            Это не про силу воли. И не про мотивацию.<br/>
            Это про то, что тело помнит то, в чём ты себе не признаёшься.
          </p>
        </div>
      </section>

      {/* 3 формата */}
      <section className="section bg-deep">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 02 — форматы</div>
            <h2 className="poster poster-sm" style={{marginTop: 12}}>КАК ЗАЙТИ</h2>
          </div>
          <div className="right">04 ФОРМАТА /<br/>ВЫБИРАЙ ТОЧКУ ВХОДА</div>
        </div>
        <div className="formats">
          {[
            {n:'01', t:'СЕССИЯ', p:'по запросу', d:'один горящий запрос. 60–90 мин. онлайн / лично. цена — после 15-минутной диагностики.', tag:'БЫСТРО', href:'session.html'},
            {n:'02', t:'ГРУППА', p:'от 3 000 ₽', d:'три формата: тематическая, общая, корпоративная. свой запрос + поле, которое держит.', tag:'ПЛОТНО', href:'group.html'},
            {n:'03', t:'VIP', p:'от 400 000 ₽', d:'короткий 21 день или длинный 2 месяца. глубокие сессии + чат поддержки + диагностики.', tag:'ГЛУБОКО', href:'vip.html'},
            {n:'04', t:'ЧЕЛЛЕНДЖ ВЕС-ЛЕС', p:'30 000 ₽', d:'30 дней. 30 человек. 15 пар по тесту совместимости. старт 10 июня 2026.', tag:'NEW', accent:true, isNew:true, href:'challenge-ves-les.html'},
          ].map((c,i)=>(
            <a key={c.n} href={c.href} className={c.isNew ? 'format-new' : ''} style={{
                padding: 32,
                borderLeft: i>0 ? '1px solid var(--cream-33)' : 'none',
                display:'flex', flexDirection:'column', gap: 20,
                minHeight: 340,
                background: c.accent ? 'var(--accent)' : 'transparent',
                color: c.accent ? navy : 'var(--cream)',
                textDecoration: 'none',
                position: 'relative',
              }}>
              <div style={{display:'flex', justifyContent:'space-between', fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em'}}>
                <span>/{c.n}</span><span>[{c.tag}]</span>
              </div>
              <h3 className="poster poster-xs" style={{margin: 0}}>{c.t}</h3>
              <p style={{fontSize: 15, margin: 0, lineHeight: 1.4, flex: 1}}>{c.d}</p>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop: 16, borderTop:'1px solid currentColor'}}>
                <span style={{fontSize: 14, fontWeight: 800}}>{c.p}</span>
                <span style={{fontSize: 12, fontWeight: 700, textTransform:'uppercase', letterSpacing:'0.08em'}}>Подробнее →</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* 8 программ */}
      <section className="section" id="programs">
        <div className="tag">§ 03 — программы · 05 тем</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          С <span className="orange">ЧЕМ</span> ПРИХОДЯТ
        </h2>
        <div style={{borderTop:'2px solid var(--cream)'}}>
          {[
            ['01','ВЕС-ЛЕС','не про еду. про то, от чего тело защищает.','ves-les.html'],
            ['02','ДЕНЬГИ','потолок. долги. «всё утекает в никуда».','money.html'],
            ['03','ОТНОШЕНИЯ','сценарий повторяется третий раз? это не про них.','relations.html'],
            ['04','БИЗНЕС','энергия компании — отражение собственника.','business.html'],
            ['05','СТАРОСТЬ','страх старости без позитивного образа.','age.html'],
          ].map(([n,t,d,h])=>(
            <a key={n} href={h} className="prog-row" style={{
                display:'grid', gridTemplateColumns:'80px 1fr 1fr auto',
                gap: 32, alignItems:'center', padding:'28px 0',
                borderBottom:'1px solid var(--cream-33)',
                textDecoration:'none', color:'inherit',
              }}>
              <span style={{fontFamily:'var(--f-mono)', fontSize: 14, color:'var(--cream-77)', letterSpacing:'0.1em'}}>/{n}</span>
              <span className="poster poster-xs" style={{fontSize:'clamp(29px, 4.00vw, 48px)', margin:0, lineHeight: 1}}>{t}</span>
              <span style={{fontSize: 14, color:'var(--cream-77)'}}>{d}</span>
              <span className="orange" style={{fontSize: 32, fontWeight: 400}}>→</span>
            </a>
          ))}
        </div>
      </section>

      {/* Отзывы */}
      <section className="section bg-cream">
        <div className="kicker-row" style={{borderColor: navy}}>
          <div>
            <div className="tag" style={{color:'var(--acid)'}}>§ 04 — голоса · аудио 30&quot;</div>
            <h2 className="poster poster-sm" style={{margin:'12px 0 0'}}>ПРИШЛА С → <span className="orange">УШЛА С</span></h2>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap: 24}}>
          {[
            {t:'ВЕС', from:'20 лет с весом', to:'−15 кг за 4 мес. без диет'},
            {t:'ДЕНЬГИ', from:'потолок 4 года', to:'×2 к доходу за 6 мес.'},
            {t:'ОТНОШЕНИЯ', from:'третий абьюз подряд', to:'встретила своего'},
          ].map((r,i)=>(
            <figure key={i} style={{margin:0, background: navy, color: 'var(--cream)', padding: 28, display:'flex', flexDirection:'column', gap: 20}}>
              <div style={{display:'flex', alignItems:'center', gap: 12}}>
                <button aria-label={`Проиграть аудио · ${r.t}`} style={{width: 48, height: 48, background: 'var(--accent)', color: navy, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 14, border:0, cursor:'pointer'}}>▶</button>
                <div style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.1em'}}>{r.t} · 00:30</div>
              </div>
              <blockquote style={{margin:0, flex: 1}}>
                <div style={{fontFamily:'var(--f-display)', fontSize: 12, fontWeight: 800, lineHeight: 1.1, letterSpacing:'-0.02em', color:'var(--cream-99)', marginBottom: 12}}>
                  → {r.from}
                </div>
                <div className="orange" style={{fontFamily:'var(--f-display)', fontSize: 23, fontWeight: 900, lineHeight: 1.05, letterSpacing:'-0.02em'}}>
                  → {r.to}
                </div>
              </blockquote>
              <div style={{height: 4, background: 'var(--cream-33)'}}>
                <div style={{width:'30%', height:'100%', background: 'var(--accent)'}}/>
              </div>
            </figure>
          ))}
        </div>
      </section>

      {/* Авторы */}
      <section className="section pad-lg">
        <div className="authors" style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 60, alignItems:'start'}}>
          <div style={{position:'relative'}}>
            <div className="ph" style={{height: 560}} aria-label="Парный портрет К. Пуляткиной и Е. Новиковской">[ ПОРТРЕТ ПАРНЫЙ · ЖЁСТКИЙ СВЕТ ]</div>
            <div className="bg-orange" style={{position:'absolute', bottom: -24, left: -24, padding:'16px 24px', fontFamily:'var(--f-display)', fontSize: 48, fontWeight: 900, lineHeight: 0.9, letterSpacing:'-0.03em'}}>
              100+<br/>
              <span style={{fontSize: 14, fontWeight: 600, letterSpacing:'0.08em', textTransform:'uppercase', fontFamily:'var(--f-mono)'}}>
                клиентов метода
              </span>
            </div>
          </div>
          <div style={{paddingTop: 20}}>
            <div className="tag">§ 05 — авторы метода</div>
            <h2 className="poster poster-sm" style={{margin:'20px 0 40px'}}>
              КСЕНИЯ<br/>
              <span style={{color:'var(--cream-99)'}}>И</span><br/>
              ЕВГЕНИЯ
            </h2>
            <p style={{fontSize: 15, lineHeight: 1.5, margin:'0 0 32px', maxWidth: 560}}>
              Две практикующие женщины. Собрали свой метод — из любопытства, практики и упрямства.
              Метод Хеллингера, Вселенская терапия Тальписа, кинезиология.
              Когда стало видно несколько школ одновременно — стали видны их ограничения.
              Главное, которое не устраивало — <b className="orange">откаты</b>.
              Нашли, как это зафиксировать. Собрали метод.
            </p>
            <a className="btn btn-cream" href="#authors">Подробнее об авторах →</a>
          </div>
        </div>
      </section>

      {/* НЕ ДЛЯ ВСЕХ */}
      <section className="bg-acid" style={{padding:'80px var(--px)'}}>
        <div className="tag" style={{color:'var(--navy)'}}>§ 06 — фильтр на входе</div>
        <h2 className="poster poster-lg" style={{margin:'20px 0 40px'}}>
          НЕ<br/>ДЛЯ <i style={{fontStyle:'italic'}}>ВСЕХ.</i>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))', gap:'20px 60px'}}>
          {[
            ['ТУРИСТЫ','«а дайте-ка я ещё одну технику попробую»'],
            ['ИСКАТЕЛИ ХАЛЯВЫ','«а сделайте что-нибудь бесплатно»'],
            ['КОЛЛЕКЦИОНЕРЫ ИНСАЙТОВ','красиво формулирует — и ничего не меняет'],
            ['ТРЕБУЮЩИЕ ДОКАЗАТЕЛЬСТВ','«докажите — и тогда я подумаю»'],
            ['ПРИШЕДШИЕ ЗА ДРУГОГО','«почините мне мужа / маму»'],
            ['В ИЗМЕНЁННЫХ СОСТОЯНИЯХ','препараты, алкоголь — не работаем'],
          ].map(([t,d],i)=>(
            <div key={i} style={{display:'flex', gap: 20, paddingTop: 20, borderTop:'1.5px solid var(--navy)'}}>
              <span style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.1em', minWidth: 36}}>/0{i+1}</span>
              <div>
                <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, letterSpacing:'-0.01em', marginBottom: 6}}>{t}</div>
                <div style={{fontSize: 14}}>{d}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop: 56, padding:'28px 0', borderTop:'2px solid var(--navy)'}}>
          <p className="poster poster-xs" style={{fontSize:'clamp(29px, 3.51vw, 40px)', margin:0, lineHeight: 1.05}}>
            Нам интересно с теми, у кого внутри уже горит:<br/>
            «блин, я <span style={{background:'var(--navy)', color:'var(--acid)', padding:'0 12px'}}>больше так</span> не хочу».
          </p>
        </div>
      </section>

      {/* Финальный CTA — с формой */}
      <section className="section pad-lg" id="record">
        <div className="tag">● финальный призыв</div>
        <h2 className="poster poster-xl" style={{margin:'24px 0 48px'}}>
          ДО<br/>СЮДА <span className="orange">↘</span><br/>ДОЧИТАЛА?
        </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, maxWidth: 480}}>
              Одна форма. Имя + Telegram или WhatsApp. По желанию — пара слов о запросе.
              Отвечаем в течение суток.
            </p>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка отправлена. Свяжемся в течение 24 часов.');}}>
            <div>
              <label htmlFor="f-name">Имя</label>
              <input id="f-name" name="name" type="text" required autoComplete="name"/>
            </div>
            <div>
              <label htmlFor="f-tg">Telegram или WhatsApp</label>
              <input id="f-tg" name="contact" type="text" placeholder="@username или +7…" required/>
            </div>
            <div>
              <label htmlFor="f-q">Запрос (по желанию)</label>
              <textarea id="f-q" name="query" placeholder="коротко: что болит"/>
            </div>
            <button className="btn btn-orange btn-lg" type="submit">Оставить заявку →</button>
            <p className="form-note">
              Нажимая «Оставить заявку», ты соглашаешься с&nbsp;
              <a href="#legal" style={{textDecoration:'underline'}}>политикой обработки данных</a>.
            </p>
          </form>
        </div>
      </section>

      <NextSteps
        title={<>ЧТО <span className="orange">ДАЛЬШЕ.</span></>}
        items={[
          {label:'Как устроен метод', desc:'Как собрали, почему синхронизация, чем отличается от классики.', href:'method.html'},
          {label:'Для кого и не для кого', desc:'Наш фильтр. Честно — чтобы не потратить время обеим сторонам.', href:'for-whom.html'},
          {label:'Кто мы', desc:'Евгения Новиковская и Ксения Пуляткина. Почему мы собрали метод сами.', href:'about.html'},
          {label:'Записаться на сессию', desc:'Первый шаг. 90 минут, онлайн или лично. Формат и цена.', href:'session.html', primary:true},
        ]}
      />

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

window.Home = Home;