/* /programs/age — программа Старость */

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

      {/* 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-age-hero.jpg')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}>
        <div className="tag">/программы · 05 — старость</div>
        <h1 className="poster poster-xl" style={{marginTop: 24}}>
            45+ —<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 месяца'],
            ['ЦЕНА','от 90 000 ₽'],
            ['КОМУ','женщины 42—65'],
          ].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-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(52px, 7.51vw, 119px)', margin:'16px 0 28px', letterSpacing:'-0.035em', lineHeight: 0.9}}>
          НЕ «МОЛОДАЯ В 50».<br/>
          <i style={{fontWeight: 300}}>ЗРЕЛАЯ.</i>
        </h2>
        <p style={{fontSize: 15, lineHeight: 1.4, maxWidth: 820, fontWeight: 500, letterSpacing:'-0.01em'}}>
          Индустрия 40 лет кормит тебя мыслью, что возраст — это «если не видно». Мы не про ретушь. Мы про то, что делает женщину после 45 другой породой — и какой она становится, когда перестаёт прятаться.
        </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={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0}} className="res-grid">
          <div style={{borderTop:'2px solid var(--cream)', borderRight:'1px solid var(--cream-33)', 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}}>
              {[
                'В «молодую душу в 50» — это про страх возраста',
                'В «вторую молодость» — у зрелости нет повторов',
                'В «ещё успею» — ты уже успела',
                'В «сейчас время для себя» — оно было всегда',
                'В ботокс как форму самоуважения',
              ].map((t,i)=>(
                <li key={i} style={{fontSize: 12, lineHeight: 1.4, paddingLeft: 22, position:'relative', color:'var(--cream-99)'}}>
                  <span style={{position:'absolute', left: 0, color:'var(--cream-77)'}}>×</span>{t}
                </li>
              ))}
            </ul>
          </div>
          <div style={{borderTop:'2px solid var(--accent)', 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}}>
              {[
                'В то, что после 45 у женщины появляется калибр',
                'В то, что менопауза — не болезнь, а переход',
                'В то, что «старший голос» — это ресурс',
                'В то, что тело в 50 стоит любить так же, как в 25',
                'В то, что большие роли начинаются здесь',
              ].map((t,i)=>(
                <li key={i} style={{fontSize: 12, 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>
      </section>

      {/* КОМУ */}
      <section className="section bg-deep">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 03 — кому заходит</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','Дети выросли — себя не нашла','Роль, которая держала 25 лет, закончилась. Кто ты без неё — открытый вопрос.'],
            ['03','Менопауза — как расставание','С телом, с графиком, с самоощущением. Индустрия говорит «лечи». Мы говорим — переходи, и переход этот бывает красивым.'],
            ['04','Брак — привычка, не выбор','Живёте вместе 20+ лет. Ни ссор, ни близости. Страшно трогать — «чтобы не развалилось».'],
            ['05','Страшно «исчезнуть» из профессии','Младшие дышат в спину. Ты их учила. Теперь они быстрее. Куда тебе — неясно.'],
          ].map(([n,t,d])=>(
            <div key={n} className="sym-row" style={{
              display:'grid', gridTemplateColumns:'70px 1.1fr 2fr',
              gap: 28, alignItems:'baseline', padding:'24px 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(19px, 2.19vw, 26px)', fontWeight: 900, letterSpacing:'-0.015em', lineHeight: 1.1}}>{t}</span>
              <span style={{fontSize: 12, color:'var(--cream-99)', lineHeight: 1.5}}>{d}</span>
            </div>
          ))}
        </div>
      </section>

      {/* 4 СЕССИИ */}
      <section className="section">
        <div className="kicker-row">
          <div>
            <div className="tag">§ 04 — программа</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ЧЕТЫРЕ <span className="orange">ВСТРЕЧИ.</span></h2>
          </div>
          <div className="right">2 МЕСЯЦА /<br/>4 СЕССИИ · 90 МИН</div>
        </div>
        <div>
          {[
            ['01','МАМА','Первая линия. Чьё отношение к возрасту ты несёшь. Как бабушка старела, что говорила мама, в каком возрасте ты «станешь старой» по семейной норме.'],
            ['02','ТЕЛО','Отдельная работа с телом в переходе. Без «замораживания». С принятием того, что меняется, и любовью к тому, что появляется.'],
            ['03','ДЕЛО','Что теперь с ролью. Если дети выросли / если бизнес устоялся / если профессия меняется. Что ты хочешь делать следующие 20 лет — не из страха «исчезнуть».'],
            ['04','ВЕРТИКАЛЬ','Новая позиция. Зрелая, без извинений за возраст. Персональный план на 12 месяцев: кто ты теперь, что делаешь, за что держишься, от чего отказываешься.'],
          ].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 bg-deep">
        <div className="tag">§ 05 — тезис крупно</div>
        <div style={{padding:'40px 0', borderTop:'2px solid var(--cream)', borderBottom:'2px solid var(--cream)'}}>
          {[
            ['42','«ВЗРОСЛАЯ»'],
            ['45','«УСТАЛА»'],
            ['48','«ПЕРЕХОД»'],
            ['52','«СЕБЯ НЕ УЗНАЮ»'],
            ['57','«СТАЛО ПО-НАСТОЯЩЕМУ СВОИМ»'],
            ['62','«ЭТО И ЕСТЬ ЖИЗНЬ»'],
          ].map(([age, state],i)=>(
            <div key={age} style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 32, alignItems:'baseline', padding:'20px 0', borderBottom: i<5 ? '1px solid var(--cream-33)' : 'none'}}>
              <span className="orange" style={{fontFamily:'var(--f-display)', fontSize:'clamp(48px, 6.00vw, 84px)', fontWeight: 900, letterSpacing:'-0.04em', lineHeight: 1}}>{age}</span>
              <span style={{fontFamily:'var(--f-display)', fontSize:'clamp(23px, 3.00vw, 40px)', fontWeight: 300, fontStyle:'italic', letterSpacing:'-0.015em', lineHeight: 1.05}}>{state}</span>
            </div>
          ))}
        </div>
        <p style={{fontSize: 14, fontStyle:'italic', color:'var(--cream-77)', marginTop: 20}}>
          Частые слова, с которыми женщины приходят к нам в разные годы. Программа работает с любой точкой.
        </p>
      </section>

      {/* ДВА ОТЗЫВА */}
      <section className="section bg-cream" style={{color: navy}}>
        <div className="tag" style={{color: 'var(--acid)', marginBottom: 20}}>§ 06 — две истории</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48}} className="rev2-grid">
          {[
            {
              q:'«Я думала, мне надо "держаться". А мне надо было — отпустить, что я "должна выглядеть на 35".»',
              d:'Пришла в 51, с ощущением "всё позади". Ушла с новой работой, разведенная, с собственной квартирой и чувством, что жизнь — впереди.',
              name:'ИРИНА, 51 / ПРОГРАММА СТАРОСТЬ 2023',
            },
            {
              q:'«Менопауза была для меня катастрофой. После работы — это стало переходом. Как подростковый, только лучше.»',
              d:'Запрос: «тело предало». Выход: тело на стороне, брак пересобран, с мамой — разговор, который откладывала 30 лет.',
              name:'ЕЛЕНА, 48 / ПРОГРАММА СТАРОСТЬ 2024',
            },
          ].map((r,i)=>(
            <figure key={i} style={{margin: 0, borderTop:'2px solid var(--navy)', paddingTop: 24}}>
              <blockquote style={{margin: 0}}>
                <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(22px, 2.40vw, 29px)', fontWeight: 900, lineHeight: 1.15, letterSpacing:'-0.015em', margin:'0 0 16px'}}>
                  {r.q}
                </div>
                <div style={{fontSize: 15, lineHeight: 1.55, margin:'0 0 16px', color:'rgba(26,37,53,0.8)'}}>{r.d}</div>
                <figcaption style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', textTransform:'uppercase', opacity: 0.7}}>
                  {r.name}
                </figcaption>
              </blockquote>
            </figure>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="tag">§ 07 — вопросы</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>ЧЕСТНО.</h2>
        <div>
          {[
            ['Мне 42. Рано?','Не рано. Программа работает со всей зоной 42—65. Чем раньше начнёшь — тем мягче пройдёт переход.'],
            ['Мне 63. Поздно?','Не поздно. У нас были участницы до 71. Работает в любом возрасте — просто акценты другие.'],
            ['Это про «успешное старение»?','Нет. «Успешное старение» — это та же ретушь, только в PR-обёртке. У нас — про правду, опору и калибр. Без красивых слоганов.'],
            ['Мужу это нужно? Можно вместе?','Для мужчин — отдельный формат с другими акцентами. Программа в нынешней версии — женская.'],
            ['Если я на ГЗТ / БАДах / лекарствах — это противопоказание?','Нет. Программа работает параллельно с любой медицинской тактикой и не вмешивается в неё. Наша часть — внутренняя.'],
          ].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)'}}>6</span><br/>
              РАССРОЧКА → 2 ПЛАТЕЖА
            </div>
          </div>
          <form className="form" onSubmit={(e)=>{e.preventDefault(); alert('Заявка на программу «Старость» отправлена. Напишем в течение суток для созвона.');}}>
            <div><label htmlFor="a-name">Имя</label><input id="a-name" name="name" type="text" required/></div>
            <div><label htmlFor="a-tg">Telegram или WhatsApp</label><input id="a-tg" name="contact" type="text" required placeholder="@username или +7…"/></div>
            <div><label htmlFor="a-age">Старость</label>
              <select id="a-age" name="age" 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}}>42—47</option>
                <option style={{background: navy}}>48—52</option>
                <option style={{background: navy}}>53—57</option>
                <option style={{background: navy}}>58—65</option>
                <option style={{background: navy}}>65+</option>
              </select>
            </div>
            <div><label htmlFor="a-q">Что сейчас болит</label><textarea id="a-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.Age = Age;