/* /media — публикации и выступления */

const Media = () => {
  const navy = '#1A2535';
  const cream = '#F2EADA';
  const [filter, setFilter] = React.useState('ALL');

  const items = [
    {id:1,  type:'ПОДКАСТ',     host:'«НОРМ»',            title:'Почему возвращается вес, с которым ты попрощалась', date:'МАР 2026', dur:'58 мин',  href:'#'},
    {id:2,  type:'СТАТЬЯ',      host:'WONDERZINE',        title:'«Не чиним мужей»: метод, который работает с тобой, а не с ним', date:'ФЕВ 2026', dur:'10 мин чтения', href:'#'},
    {id:3,  type:'YOUTUBE',     host:'ОСОЗНАНКА',         title:'Открытая работа по методу Хеллингера: «Я всё время выбираю недоступных»', date:'ФЕВ 2026', dur:'42 мин', featured:true, href:'#'},
    {id:4,  type:'ВЫСТУПЛЕНИЕ', host:'MOSCOW TALKS',      title:'Системная работа в бизнесе: что мы видим в сотне компаний', date:'ЯНВ 2026', dur:'35 мин',  href:'#'},
    {id:5,  type:'ПОДКАСТ',     host:'«TED-ПОДКАСТ»',     title:'Когда «проработала» — это ловушка', date:'ЯНВ 2026', dur:'47 мин', href:'#'},
    {id:6,  type:'СТАТЬЯ',      host:'VC.RU',             title:'Потолок оборота у собственника — не в рынке. В роде', date:'ДЕК 2025', dur:'15 мин чтения', href:'#'},
    {id:7,  type:'YOUTUBE',     host:'ОСОЗНАНКА',         title:'Q&A с авторами метода — 20 вопросов за 60 минут', date:'ДЕК 2025', dur:'1 ч 04 мин', href:'#'},
    {id:8,  type:'ПОДКАСТ',     host:'«ЖЕНСКОЕ ЗДОРОВЬЕ»',title:'Менопауза как переход, а не как диагноз', date:'НОЯ 2025', dur:'51 мин', href:'#'},
    {id:9,  type:'СТАТЬЯ',      host:'THE BLUEPRINT',     title:'Три сценария, в которых вы находите одного и того же мужчину', date:'НОЯ 2025', dur:'8 мин чтения', featured:true, href:'#'},
    {id:10, type:'ВЫСТУПЛЕНИЕ', host:'SYNERGY GLOBAL',    title:'Собственник и его система: почему стратегия не спасает', date:'ОКТ 2025', dur:'28 мин', href:'#'},
    {id:11, type:'ДНЕВНИК',     host:'ОСОЗНАНКА',         title:'«Это не психотерапия» — о том, чем мы отличаемся', date:'ОКТ 2025', dur:'6 мин чтения', href:'#'},
    {id:12, type:'YOUTUBE',     host:'ОСОЗНАНКА',         title:'Разбор сессии: родовая фигура в теме денег', date:'СЕН 2025', dur:'38 мин', href:'#'},
    {id:13, type:'ДНЕВНИК',     host:'ОСОЗНАНКА',         title:'Как мы работаем с парами: почему не вдвоём в кабинете', date:'СЕН 2025', dur:'5 мин чтения', href:'#'},
    {id:14, type:'ПОДКАСТ',     host:'«БОЛЬШОЙ РАЗГОВОР»',title:'Метод Хеллингера — это эзотерика или метод?', date:'АВГ 2025', dur:'1 ч 12 мин', href:'#'},
    {id:15, type:'СТАТЬЯ',      host:'ELLE',              title:'Почему «я проработала с психологом» часто звучит как защита', date:'ИЮЛ 2025', dur:'7 мин чтения', href:'#'},
  ];

  const types = ['ALL', ...Array.from(new Set(items.map(i=>i.type)))];
  const filtered = filter === 'ALL' ? items : items.filter(i=>i.type===filter);
  const counts = types.reduce((acc,t)=>{ acc[t] = t==='ALL' ? items.length : items.filter(i=>i.type===t).length; return acc; }, {});

  const typeMeta = {
    'ПОДКАСТ':     {accent:'#E3683E', glyph:'◉'},
    'YOUTUBE':     {accent:'#FF4D1A', glyph:'▶'},
    'СТАТЬЯ':      {accent:'#F2EADA', glyph:'§'},
    'ВЫСТУПЛЕНИЕ': {accent:'#E3683E', glyph:'◎'},
    'ДНЕВНИК':     {accent:'#F2EADA', glyph:'✎'},
  };

  return (
    <main className="page">
      <Marquee on={window.__tweaks?.marquee !== false}/>
      <Nav current="media"/>

      {/* HERO */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="tag">/медиа · публикации и выступления</div>
        <div style={{display:'grid', gridTemplateColumns:'1.5fr 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 style={{paddingBottom: 12}}>
            <p className="lead" style={{margin: 0, maxWidth: 420, color:'var(--cream-99)'}}>
              Подкасты, статьи, выступления, открытые разборы. Без кликбейта, без «топ-5 ошибок». Про дело, на которое мы подписались.
            </p>
          </div>
        </div>

        <div className="rule-top rule-bottom" style={{marginTop: 32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24, padding:'32px 0'}}>
          {[
            ['ВЫСТУПЛЕНИЙ','4'],
            ['ПОДКАСТОВ','3'],
            ['ПУБЛИКАЦИЙ','6'],
            ['ЭФИРОВ В TG','регулярно'],
          ].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 className="orange" style={{fontFamily:'var(--f-display)', fontSize:'clamp(36px, 5.00vw, 64px)', fontWeight: 900, letterSpacing:'-0.03em', lineHeight: 1}}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED — 2 карточки */}
      <section className="section bg-deep" style={{paddingTop: 40, paddingBottom: 40}}>
        <div className="tag">§ свежее</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
          СЕЙЧАС <span className="orange">СЛУШАЕМ И ЧИТАЕМ.</span>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 32}} className="feat-grid">
          {items.filter(i=>i.featured).map(x=>{
            const m = typeMeta[x.type];
            return (
              <a key={x.id} href={x.href} style={{
                  display:'block', textDecoration:'none', color:'inherit',
                  border:'1.5px solid var(--cream-33)',
                  transition:'border-color .2s',
                }} className="feat-card">
                <div className="ph" style={{height: 320, borderBottom:'1.5px solid var(--cream-33)', fontSize: 48}}>
                  {m.glyph}
                </div>
                <div style={{padding:'24px 28px 28px'}}>
                  <div style={{display:'flex', justifyContent:'space-between', marginBottom: 14, fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.12em'}}>
                    <span style={{padding:'4px 10px', background: m.accent, color: navy, fontWeight: 700}}>{x.type}</span>
                    <span style={{color:'var(--cream-77)', alignSelf:'center'}}>{x.host} · {x.date}</span>
                  </div>
                  <h3 className="feat-title" style={{fontFamily:'var(--f-display)', fontSize:'clamp(26px, 2.81vw, 34px)', fontWeight: 900, letterSpacing:'-0.02em', margin:'0 0 12px', lineHeight: 1.1, transition:'color .2s'}}>
                    {x.title}
                  </h3>
                  <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)'}}>
                    {x.dur} &nbsp;/&nbsp; ОТКРЫТЬ →
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </section>

      {/* ФИЛЬТР + ЛИСТ */}
      <section className="section" style={{paddingTop: 48}}>
        <div className="kicker-row">
          <div>
            <div className="tag">§ архив</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>ВСЁ ПОДРЯД.</h2>
          </div>
          <div className="right">{filtered.length} {filtered.length%10===1 && filtered.length%100!==11 ? 'МАТЕРИАЛ' : 'МАТЕРИАЛОВ'}</div>
        </div>

        <div style={{display:'flex', flexWrap:'wrap', gap: 8, marginBottom: 28, paddingBottom: 24, borderBottom:'1px solid var(--cream-33)'}}>
          {types.map(t=>{
            const sel = filter === t;
            return (
              <button key={t} onClick={()=>setFilter(t)} style={{
                padding:'10px 16px', fontSize: 12, fontWeight: 700, letterSpacing:'0.06em',
                textTransform:'uppercase', cursor:'pointer',
                background: sel ? 'var(--accent)' : 'transparent',
                color: sel ? navy : 'var(--cream)',
                border: sel ? '1.5px solid var(--accent)' : '1.5px solid var(--cream-33)',
                display:'inline-flex', alignItems:'center', gap: 10,
              }}>
                <span>{t === 'ALL' ? 'всё' : t}</span>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 11, opacity: sel ? 0.7 : 0.5}}>/{counts[t]}</span>
              </button>
            );
          })}
        </div>

        <div style={{borderTop:'2px solid var(--cream)'}}>
          {filtered.map((x,i)=>{
            const m = typeMeta[x.type];
            return (
              <a key={x.id} href={x.href} className="media-row" style={{
                display:'grid',
                gridTemplateColumns:'60px 140px 1fr 180px 130px',
                gap: 24, alignItems:'center', padding:'22px 0',
                borderBottom:'1px solid var(--cream-33)',
                textDecoration:'none', color:'inherit',
              }}>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)'}}>/{String(i+1).padStart(2,'0')}</span>
                <span>
                  <span style={{padding:'5px 10px', background: m.accent, color: navy, fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', fontWeight: 700, display:'inline-block'}}>{x.type}</span>
                </span>
                <span className="media-title" style={{fontFamily:'var(--f-display)', fontSize:'clamp(18px, 1.90vw, 22px)', fontWeight: 800, letterSpacing:'-0.01em', lineHeight: 1.25, transition:'color .2s'}}>
                  {x.title}
                </span>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)'}}>
                  {x.host}
                </span>
                <span style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)', textAlign:'right'}}>
                  {x.date} &nbsp;·&nbsp; {x.dur}
                </span>
              </a>
            );
          })}
        </div>
      </section>

      {/* PRESS-ПОЛОСА */}
      <section className="section bg-deep">
        <div className="tag">§ издания, где мы были</div>
        <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>ЗДЕСЬ <span className="orange">БЫЛИ.</span></h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0, borderTop:'2px solid var(--cream)', borderBottom:'2px solid var(--cream)'}} className="press-grid">
          {['WONDERZINE','THE BLUEPRINT','ELLE','VC.RU','FORBES WOMAN','BURO 24/7','TATLER','RB.RU'].map((p,i)=>(
            <div key={p} style={{
              padding:'40px 20px',
              borderRight: (i+1)%4 !== 0 ? '1px solid var(--cream-33)' : 'none',
              borderBottom: i < 4 ? '1px solid var(--cream-33)' : 'none',
              textAlign:'center',
            }}>
              <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(18px, 2.00vw, 26px)', fontWeight: 900, letterSpacing:'0.02em', color:'var(--cream-99)'}}>{p}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ПРЕСС-КИТ */}
      <section className="section">
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 48, alignItems:'start'}} className="presskit-split">
          <div>
            <div className="tag">§ для журналистов и редакторов</div>
            <h2 className="poster poster-md" style={{margin:'20px 0 40px'}}>
              ПРЕСС-<span className="orange">КИТ.</span>
            </h2>
            <p style={{fontSize: 15, lineHeight: 1.5, margin:'0 0 24px', maxWidth: 520, color:'var(--cream-99)'}}>
              Фотографии в хорошем разрешении, короткое и полное био, темы, по которым даём комментарии и интервью.
            </p>
            <div style={{display:'flex', flexDirection:'column', gap: 10, maxWidth: 380}}>
              {[
                ['📦 ПОЛНЫЙ ПРЕСС-КИТ', 'zip · 28 МБ'],
                ['📷 ФОТО В ВЫСОКОМ РАЗРЕШЕНИИ', 'zip · 22 МБ'],
                ['📝 БИО (КОРОТКО / ПОЛНО)', 'pdf · 80 КБ'],
              ].map(([a,b])=>(
                <a key={a} href="#" style={{
                  display:'flex', justifyContent:'space-between', alignItems:'center',
                  padding:'14px 18px', border:'1.5px solid var(--cream-33)',
                  textDecoration:'none', color:'inherit', transition:'border-color .2s, background .2s',
                  fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.08em',
                }} className="dl-row">
                  <span>{a}</span><span style={{color:'var(--cream-77)'}}>{b}</span>
                </a>
              ))}
            </div>
          </div>
          <div style={{border:'1.5px solid var(--cream-33)', padding: 28}}>
            <div className="tag" style={{marginBottom: 16}}>▷ темы, по которым говорим</div>
            <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10}}>
              {[
                'Системная работа для не-эзотерически настроенной аудитории',
                'Вселенская терапия Леонида Тальписа',
                'Деньги и родовая система',
                'Почему возвращается вес',
                'Отношения: сценарии, которые ты наследуешь',
                'Менопауза и возраст как переход',
                'Психотерапия vs метод Хеллингера — когда что',
                'Собственник и его компания',
              ].map((t,i)=>(
                <li key={i} style={{fontSize: 14, lineHeight: 1.4, paddingLeft: 22, position:'relative'}}>
                  <span style={{position:'absolute', left: 0, color:'var(--accent)', fontWeight: 800}}>→</span>{t}
                </li>
              ))}
            </ul>
            <div style={{marginTop: 24, paddingTop: 20, borderTop:'1px solid var(--cream-33)', fontSize: 15, lineHeight: 1.5, color:'var(--cream-99)'}}>
              Запрос на интервью, комментарий или выступление — <a href="mailto:press@osoznanka.com" style={{color:'var(--accent)', textDecoration:'none', fontWeight: 600}}>press@osoznanka.com</a>
            </div>
          </div>
        </div>
      </section>

      {/* CTA — подписка */}
      <section className="bg-orange" style={{padding:'72px var(--px)', color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 48, alignItems:'end'}} className="cta-split">
          <h2 className="poster poster-lg" style={{margin: 0}}>
            ПОД­ПИ­ШИСЬ —<br/><i>ЧИТАЙ ПЕРВОЙ.</i>
          </h2>
          <div style={{display:'flex', flexDirection:'column', gap: 14, paddingBottom: 12}}>
            <p style={{margin:'0 0 8px', fontSize: 12, lineHeight: 1.5, fontWeight: 500}}>
              Редакторская рассылка раз в две недели. Не про продукты — про дело. Одна главная мысль, две-три ссылки, ноль спама.
            </p>
            <form onSubmit={(e)=>{e.preventDefault(); alert('Спасибо. Мы тебя добавили в рассылку.');}}
              style={{display:'flex', gap: 8, flexWrap:'wrap'}}>
              <input type="email" placeholder="e-mail" required style={{
                flex:'1 1 200px', padding:'14px 16px', background: navy, color: cream,
                border:'2px solid '+navy, fontFamily:'var(--f-sans)', fontSize: 15,
              }}/>
              <button className="btn btn-lg" type="submit" style={{background: navy, color: cream, border:'2px solid '+navy}}>
                Подписаться →
              </button>
            </form>
            <p style={{margin: 0, fontSize: 12, opacity: 0.7}}>
              Никакой продажи, никакого спама. Отписаться — в один клик.
            </p>
          </div>
        </div>
      </section>

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

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

window.Media = Media;