// Кейсы учеников — как PR'ы / коммиты в гит-ленте

const CASES = [
  {
    name:'Марина К.',
    role:'таргетолог/маркетолог',
    now:'автоматизирует отчёты для 3 агентств',
    income:'$1 200',
    time:'2 недели',
    project:'telegram-bot + google-sheets + openai',
    quote:'Я до этого даже HTML боялась. Сейчас у меня чат с тремя клиентами, которые платят каждый месяц.',
    hash:'#fa12c3',
    color:'yellow',
  },
  {
    name:'Денис А.',
    role:'был барменом',
    now:'MVP сервиса для автодилеров',
    income:'$3 800',
    time:'1 месяц',
    project:'next.js + supabase + stripe',
    quote:'Сделал прод за три недели. На четвёртой продал за $3.8k. Барменил шесть лет, за месяц обогнал зарплату.',
    hash:'#7b2e9a',
    color:'blue',
  },
  {
    name:'Алия Т.',
    role:'декрет, без опыта',
    now:'агентство ботов на $6k/mo',
    income:'$6 100',
    time:'3 месяца',
    project:'manychat + amo + свой лендинг',
    quote:'Сначала думала — это не для меня, я же «гуманитарий». После М3 поняла, что кодить вообще не нужно. Нужно думать.',
    hash:'#2c8f5e',
    color:'yellow',
  },
  {
    name:'Никита П.',
    role:'студент 4 курс',
    now:'фриланс на Upwork',
    income:'$2 400',
    time:'5 недель',
    project:'whatsapp-бот для автошколы',
    quote:'Пока одногруппники бегают по собесам, я закрываю по 2 клиента в неделю. Диплом нужен чтобы мама успокоилась.',
    hash:'#c0391a',
    color:'blue',
  },
];

function CaseCard({c, i}){
  const isY = c.color==='yellow';
  return (
    <div style={{
      background:'var(--bg-1)',
      border:'1px solid var(--line)',
      borderRadius:14,
      overflow:'hidden',
      display:'flex',flexDirection:'column',
      position:'relative',
    }}>
      {/* Header — как commit */}
      <div style={{
        padding:'14px 18px',
        borderBottom:'1px solid var(--line)',
        background:'var(--bg-2)',
        display:'flex',alignItems:'center',gap:12,
      }}>
        <span style={{
          width:28,height:28,borderRadius:8,
          background:`linear-gradient(135deg, ${isY?'#7c5cff':'#3ee08a'} 0%, ${isY?'#6d4aff':'#22c46d'} 100%)`,
          display:'inline-flex',alignItems:'center',justifyContent:'center',
          fontFamily:'Manrope,sans-serif',fontWeight:700,
          color:isY?'#0a0a0b':'#fff',fontSize:13,
        }}>
          {c.name[0]}
        </span>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontFamily:'Manrope,sans-serif',fontWeight:600,fontSize:14}}>{c.name}</div>
          <div className="mono" style={{fontSize:11,color:'var(--fg-mute)'}}>
            commit {c.hash}
          </div>
        </div>
        <div style={{
          padding:'5px 10px',
          background: isY?'var(--yellow)':'var(--blue)',
          color: isY?'#0a0a0b':'#fff',
          borderRadius:6,
          fontFamily:'Manrope,sans-serif',fontWeight:700,fontSize:12,
        }}>
          +{c.income}
        </div>
      </div>

      <div style={{padding:'20px 22px',flex:1,display:'flex',flexDirection:'column',gap:16}}>
        {/* diff */}
        <div className="mono" style={{fontSize:13,lineHeight:1.5,borderRadius:8,overflow:'hidden'}}>
          <div style={{padding:'6px 12px',background:'rgba(255,93,93,.08)',color:'#ff9b9b',borderLeft:'3px solid #ff5d5d'}}>
            <span style={{marginRight:6}}>−</span>{c.role}
          </div>
          <div style={{padding:'6px 12px',background:'rgba(62,224,138,.08)',color:'#8dffbb',borderLeft:'3px solid var(--green)'}}>
            <span style={{marginRight:6}}>+</span>{c.now}
          </div>
        </div>

        {/* project */}
        <div>
          <div className="mono" style={{fontSize:10,color:'var(--fg-mute)',letterSpacing:'.1em',marginBottom:6}}>
            stack
          </div>
          <div className="mono" style={{fontSize:12,color:'var(--fg-dim)'}}>{c.project}</div>
        </div>

        {/* quote */}
        <blockquote style={{
          margin:0,
          fontSize:14,lineHeight:1.55,color:'var(--fg-dim)',
          borderLeft:`2px solid ${isY?'var(--yellow)':'var(--blue)'}`,
          paddingLeft:14,
          fontStyle:'normal',
          textWrap:'pretty',
        }}>
          «{c.quote}»
        </blockquote>
      </div>

      {/* Footer — meta */}
      <div style={{
        padding:'10px 18px',
        borderTop:'1px solid var(--line)',
        display:'flex',alignItems:'center',gap:14,
        fontFamily:'Manrope,sans-serif',fontSize:11,color:'var(--fg-mute)',
      }}>
        <span>⏱ до чека: <span style={{color:'var(--fg)'}}>{c.time}</span></span>
        <span style={{marginLeft:'auto'}}>● verified</span>
      </div>
    </div>
  );
}

function Cases(){
  return (
    <section id="cases" style={{padding:'40px 40px 80px'}}>
      <SectionLabel id="03_CASES" title="Ученики уже зашипили" right={
        <span className="mono" style={{fontSize:11,color:'var(--fg-mute)'}}>
          git log --learners --oneline
        </span>
      }/>
      <div style={{maxWidth:1360,margin:'0 auto'}}>
        <div className="cases-grid" style={{
          display:'grid',gridTemplateColumns:'repeat(2, 1fr)',gap:20,
        }}>
          {CASES.map((c,i)=><CaseCard key={i} c={c} i={i}/>)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Cases });