// Testimonials v2: Text-first — текст главное, скрин маленький в углу

const SUBMISSIONS = [
{ id: '#047', handle: 'ramil.din', dz: 'дз #3', project: 'личный портфолио-лендинг', caption: 'мой лендинг. спасибо за уроки, было интересно посмотреть, как работает claude — собрал всё вайбом за пару вечеров.', img: window.__IMG['testimonial-1.jpg'], stack: ['landing', 'portfolio'], shipped: '17:47' },
{ id: '#052', handle: 'iskander.nuridinov', dz: 'дз #3', project: 'личный финансист (tg-бот)', caption: 'сделал бота финансиста — помню, как Лёша выкладывал такого в инсте, тоже захотелось. парсит расходы голосом и группирует по категориям.', img: window.__IMG['testimonial-2.jpg'], stack: ['tg-bot', 'llm', 'voice'], shipped: '19:44' },
{ id: '#063', handle: 'alexandr.k', dz: 'дз #2', project: 'sportai leads — мультиязычный бот', caption: 'бот ведёт диалог с лидами в нише прогнозы на спорт. лид оставляет контакты — заявки прилетают в тг-группу. на 3 языках.', img: window.__IMG['testimonial-3.jpg'], stack: ['tg-bot', 'crm', 'multi-lang'], shipped: '01:01' },
{ id: '#071', handle: 'eldar.design', dz: 'дз #3', project: 'mikey pizza nyc — бот-персонаж', caption: 'telegram-бот для доставки пиццы в нью-йорке с характером. общается как бренд-персонаж и собирает заказ в courier-ready формате + промо-лендинг.', img: window.__IMG['testimonial-4.jpg'], stack: ['tg-bot', 'landing', 'character'], shipped: '22:33' },
{ id: '#078', handle: 'eldar.a', dz: 'дз #3', project: 'atlantic company — tg + whatsapp бот', caption: 'telegram и whatsapp бот, который консультирует клиентов по остеклению балконов и собирает заказ в телеграм-группу замерщиков.', img: window.__IMG['testimonial-5.jpg'], stack: ['tg-bot', 'whatsapp', 'crm'], shipped: '11:14' },
{ id: '#085', handle: 'pavel.lobashkin', dz: 'дз #2', project: 'subpulse — трекер подписок', caption: 'сделал бота, который отслеживает все подписки и напоминает о ближайших списаниях. честно — офигел сколько я трачу в месяц. @paydayforget_bot', img: window.__IMG['testimonial-6.jpg'], stack: ['tg-bot', 'analytics'], shipped: '23:36' }];


function TextCard({ s }) {
  const [hover, setHover] = React.useState(false);
  const [openImg, setOpenImg] = React.useState(false);
  return (
    <>
    <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          background: 'var(--bg-1)',
          border: '1px solid var(--line)',
          borderRadius: 16,
          padding: '24px 26px',
          display: 'flex', flexDirection: 'column', gap: 16,
          transition: 'border-color .2s, transform .2s',
          borderColor: hover ? 'var(--accent)' : 'var(--line)',
          transform: hover ? 'translateY(-2px)' : 'none',
          minHeight: 240
        }}>
        
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <span style={{
            padding: '3px 9px',
            border: '1px solid var(--accent)',
            color: 'var(--accent)',
            borderRadius: 6, fontSize: 10.5, fontWeight: 700
          }}>{s.id}</span>
        <span style={{
            fontSize: 11.5, color: 'var(--fg-mute)',
            fontFamily: 'var(--font-mono, monospace)'
          }}>@{s.handle}</span>
        <span style={{ color: 'var(--line-2)' }}>·</span>
        <span style={{ fontSize: 11, color: '#8dffbb', fontFamily: 'var(--font-mono, monospace)' }}>● shipped {s.shipped}</span>
      </div>

      {/* main row: text + thumb */}
      <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) auto',
          gap: 18,
          alignItems: 'flex-start'
        }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0 }}>
          <div style={{
              fontSize: 22, fontWeight: 600, color: 'var(--fg)',
              letterSpacing: '-0.01em', lineHeight: 1.25
            }}>{s.project}</div>
          <div style={{
              color: 'var(--fg-dim)', lineHeight: 1.6,
              textWrap: 'pretty', fontSize: "15px"
            }}>«{s.caption}»</div>
        </div>
        {/* thumbnail */}
        <button
            onClick={() => setOpenImg(true)}
            style={{
              width: 96, height: 96,
              borderRadius: 10,
              overflow: 'hidden',
              border: '1px solid var(--line-2)',
              background: '#000',
              cursor: 'pointer',
              padding: 0,
              position: 'relative',
              flexShrink: 0
            }}
            aria-label="посмотреть скрин">
            
          <img src={s.img} alt={s.project} style={{
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: 'top',
              display: 'block'
            }} />
          <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0.6) 100%)',
              display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end',
              padding: 6
            }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 21l-4.35-4.35" />
              <circle cx="11" cy="11" r="7" />
            </svg>
          </div>
        </button>
      </div>

      {/* stack tags */}
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 'auto' }}>
        {s.stack.map((t, j) =>
          <span key={j} style={{
            fontSize: 10.5, padding: '3px 8px',
            background: 'var(--bg-2)', border: '1px solid var(--line)',
            borderRadius: 5, color: 'var(--fg-mute)', fontWeight: 500
          }}>{t}</span>
          )}
        <span style={{
            marginLeft: 'auto',
            padding: '3px 8px',
            background: 'rgba(141,255,187,0.08)',
            border: '1px solid rgba(141,255,187,0.2)',
            color: '#8dffbb',
            borderRadius: 5, fontSize: 10, fontWeight: 700, letterSpacing: '0.04em'
          }}>{s.dz}</span>
      </div>
    </div>

    {openImg &&
      <div onClick={() => setOpenImg(false)} style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(0,0,0,0.92)', backdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24, cursor: 'zoom-out'
      }}>
        <img src={s.img} alt={s.project} style={{
          maxWidth: 'min(900px, 100%)', maxHeight: '92vh',
          display: 'block', borderRadius: 8,
          boxShadow: '0 20px 60px rgba(0,0,0,0.6)'
        }} />
      </div>
      }
    </>);

}

function Testimonials() {
  return (
    <section id="testimonials" data-screen-label="05 Отзывы" style={{ padding: '100px 48px 80px', position: 'relative' }}>
      <window.SectionLabel id="05_TESTIMONIALS" title="работы учеников" right={
      <span className="mono" style={{ fontSize: 11, color: 'var(--fg-mute)' }}>
          git log --submissions --last=30d
        </span>
      } />

      <div style={{
        marginTop: 32,
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))',
        gap: 16,
        maxWidth: 1440, marginLeft: 'auto', marginRight: 'auto'
      }}>
        {SUBMISSIONS.map((s) =>
        <TextCard key={s.id} s={s} />
        )}
      </div>

      <div style={{
        marginTop: 24, maxWidth: 1440, marginLeft: 'auto', marginRight: 'auto',
        padding: '18px 22px',
        border: '1px dashed var(--line-2)',
        borderRadius: 12,
        fontSize: 13, color: 'var(--fg-dim)',
        display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap'
      }}>
        <span style={{ color: '#8dffbb', fontSize: 14, fontWeight: 700 }}>● +40 сдач</span>
        <span>в чате потока за последние две недели — это не вся группа.</span>
      </div>
    </section>);

}

window.Testimonials = Testimonials;