// Модули — Variant A: Roadmap Timeline

function useIsMobile(breakpoint=720){
  const [is, setIs] = React.useState(
    typeof window!=='undefined' ? window.innerWidth <= breakpoint : false
  );
  React.useEffect(()=>{
    const mq = window.matchMedia(`(max-width:${breakpoint}px)`);
    const h = ()=> setIs(mq.matches);
    h();
    mq.addEventListener ? mq.addEventListener('change', h) : mq.addListener(h);
    return ()=> mq.removeEventListener ? mq.removeEventListener('change', h) : mq.removeListener(h);
  }, [breakpoint]);
  return is;
}

// Каждый модуль: [num, title, lessons[]]
// Урок с пометкой 'practice:true' выделяется зелёным
const MODULES = [
  ['01', 'старт и первый код за сегодня', [
    'база о вайбкодинге',
    'сколько стоит и что выбрать: разбираем тарифы',
    'устанавливаем рабочую зону и пишем первый запрос',
    'создаём первый лендинг',
  ]],
  ['02', 'как правильно говорить с агентом', [
    'как думает агент и как с ним говорить',
    'скидываем файлы, картинки, документы',
    'режимы работы агента',
    'как не слить весь лимит за один вечер',
    { text: 'практика', practice: true },
  ]],
  ['03', 'документ, который спасает проект от хаоса', [
    'почему без документации проект разваливается',
    'пишем CLAUDE.md — главный файл проекта',
    'как добавлять новые функции, не ломая работающее',
  ]],
  ['04', 'сохраняем работу и выкладываем в интернет', [
    'github: подключение',
    'сохраняем, выкладываем, откатываемся',
    'безопасность — что нельзя выкладывать',
  ]],
  ['05', 'даём агенту суперсилы', [
    'mcp — даём агенту руки: браузер, сервисы, файлы',
    'где брать готовые инструменты и как выбрать',
    'устанавливаем скиллы агенту и пробуем в деле',
    'делаем свой инструмент под свою задачу',
  ]],
  ['06', 'автономная работа агента', [
    'хуки: claude делает кое-что сам, без твоей команды',
    'несколько агентов одновременно: у каждого своя копия',
    'команда агентов: тимлид, подчинённые, свои сессии',
    'управляем агентами с телефона',
    'трёхуровневая память агента: метод карпатого',
    { text: 'практика', practice: true },
  ]],
  ['07', 'выкладываем продукт в интернет', [
    'автообновления — сохранил код и сайт обновился сам',
    'подключаем домен',
    'запускаем бота без сервера — railway',
    'арендуем свой сервер',
    'безопасность',
  ]],
  ['08', 'база данных', [
    'что такое база данных и зачем она нужна',
    'создаём базу через supabase mcp',
    'авторизация через google',
    'настройка доступов и тарифов',
  ]],
  ['09', 'подключение оплат', [
    'фундамент: как работают платёжки + правила',
    'lemon squeezy: подключаем платёжку к проекту',
    'webhook + уведомления в telegram о продажах',
    'оплата криптой, ЮKassa + stripe: куда расти',
    'подписка через telegram-канал / сервис',
  ]],
];

const MODULE_CLIENTS = ['10', 'клиенты', [
  'фундамент перед поиском клиентов',
  'твоя визитная карточка',
  'создаём оффер, который продаёт',
  'рассылки',
  'тг-каналы и чаты предпринимателей',
  'нетворкинг и реферальная система',
  'МК по поиску клиентов: воронка продаж от алексея',
  'как закрыть клиента на созвон',
  'проведение продающего созвона',
  'коммерческое предложение',
]];

function ModuleCard({ m, isClients }){
  const [num, title, lessons] = m;
  return (
    <div className={isClients ? 'mod-card mod-clients' : 'mod-card'}>
      <div className="mod-head">
        <span className="mod-num">{isClients ? 'M10 · ключевой' : 'M'+num}</span>
        <h3 className="mod-title">{title}</h3>
        <span className="mod-cnt">{lessons.length} {lessons.length===1?'урок':lessons.length<5?'урока':'уроков'}</span>
      </div>
      <ul className="mod-lessons">
        {lessons.map((l, i)=>{
          const isPractice = typeof l === 'object' && l.practice;
          const text = typeof l === 'object' ? l.text : l;
          return (
            <li key={i} className={isPractice ? 'mod-lesson practice' : 'mod-lesson'}>
              <span className="ln">{String(i+1).padStart(2,'0')}</span>
              <span className="lt">{text}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

function Modules(){
  return (
    <section id="modules" style={{padding:'40px 40px 80px', position:'relative'}}>
      <SectionLabel id="02_PROGRAM" title="программа" right={
        <span className="mono" style={{fontSize:11,color:'var(--fg-mute)'}}>
          10 модулей · от первого кода до клиентов
        </span>
      }/>

      <div style={{maxWidth:1100, margin:'0 auto', padding:'40px 0 0'}}>
        <div className="mod-list">
          {MODULES.map((m)=> (
            <ModuleCard key={m[0]} m={m} />
          ))}

          {/* PIVOT перед клиентами */}
          <div className="mod-pivot">
            <div className="mod-pivot-icon">⚡</div>
            <div className="mod-pivot-body">
              <div className="mod-pivot-label">точка перелома · m10</div>
              <div className="mod-pivot-text">
                без <b>правильного позиционирования</b> себя как эксперта и <b>выстроенных продаж</b> технические знания не имеют смысла. дальше — самый важный модуль программы.
              </div>
            </div>
            <div className="mod-pivot-arrow">↓</div>
          </div>

          <ModuleCard m={MODULE_CLIENTS} isClients />
        </div>

        {/* Bottom outcomes */}
        <div className="modules-outcomes" style={{
          marginTop:48,
          display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:14,
        }}>
          {[
            ['Собирать агентов','которые работают 24/7 без тебя'],
            ['Закрывать клиентов','на чек от $500 уже после M10'],
            ['Ship прод','в интернет без разработчиков'],
          ].map(([t,s],i)=>(
            <div key={i} style={{
              padding:'22px 24px',
              background:'var(--bg-1)',border:'1px solid var(--line)',borderRadius:12,
              display:'flex',alignItems:'center',gap:16,
            }}>
              <Kbd size="lg" tone={i===1?'yellow':'default'}>{['F1','F2','F3'][i]}</Kbd>
              <div>
                <div className="display" style={{fontSize:22,fontWeight:700,color:'var(--fg)',marginBottom:4}}>{t}</div>
                <div style={{fontSize:14,color:'var(--fg-dim)'}}>{s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .mod-list{display:flex;flex-direction:column;gap:18px;position:relative;padding-left:36px}
        .mod-list::before{
          content:'';position:absolute;left:14px;top:18px;bottom:18px;width:2px;
          background:linear-gradient(180deg, rgba(124,92,255,0.3) 0%, rgba(124,92,255,0.6) 50%, rgba(124,92,255,0.2) 100%);
        }
        .mod-card{
          position:relative;
          background:linear-gradient(180deg, #0c0c10 0%, #08080c 100%);
          border:1px solid rgba(255,255,255,0.08);border-radius:14px;
          padding:24px 28px;
          transition:.2s;
        }
        .mod-card::before{
          content:'';position:absolute;left:-29px;top:30px;width:16px;height:16px;border-radius:50%;
          background:#0a0a0c;border:2px solid #7c5cff;
          box-shadow:0 0 0 4px #000, 0 0 18px rgba(124,92,255,0.45);
        }
        .mod-card:hover{border-color:rgba(124,92,255,0.4);transform:translateX(4px)}
        .mod-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
        .mod-num{
          font-family:'JetBrains Mono', monospace;font-size:11px;color:#a08bff;font-weight:600;
          padding:4px 10px;border:1px solid rgba(124,92,255,0.4);border-radius:6px;
          background:rgba(124,92,255,0.08);letter-spacing:0.08em;
        }
        .mod-title{font-size:32px;font-weight:700;letter-spacing:-0.015em;color:#fff;line-height:1.2;flex:1;min-width:0;margin:0}
        .mod-cnt{font-family:'JetBrains Mono', monospace;font-size:11px;color:var(--fg-mute)}
        .mod-lessons{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
        .mod-lesson{
          display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
          padding:10px 0;color:var(--fg-dim);font-size:18px;line-height:1.45;
          border-top:1px solid rgba(255,255,255,0.04);
        }
        .mod-lesson:first-child{border-top:none}
        .mod-lesson .ln{font-family:'JetBrains Mono', monospace;font-size:13px;color:var(--fg-mute);flex-shrink:0;padding-top:2px}
        .mod-lesson.practice .lt{color:#3ee08a;font-weight:600}
        .mod-lesson.practice .ln{color:#3ee08a}

        /* Pivot */
        .mod-pivot{
          margin:8px 0;
          position:relative;
          border-radius:18px;
          overflow:hidden;
          background:
            radial-gradient(80% 100% at 50% 100%, rgba(124,92,255,0.35) 0%, rgba(124,92,255,0.08) 35%, transparent 70%),
            linear-gradient(180deg, #160e1f 0%, #08060f 100%);
          border:1px solid rgba(124,92,255,0.4);
          box-shadow:0 0 0 1px rgba(124,92,255,0.18) inset, 0 30px 80px -30px rgba(124,92,255,0.5);
          padding:32px 36px;
          display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
        }
        .mod-pivot::before{
          content:'';position:absolute;left:-29px;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:50%;
          background:#7c5cff;
          box-shadow:0 0 0 4px #000, 0 0 24px rgba(124,92,255,0.85);
        }
        .mod-pivot-icon{
          width:60px;height:60px;border-radius:14px;
          display:flex;align-items:center;justify-content:center;
          background:linear-gradient(180deg,#9b7eff,#7c5cff);
          box-shadow:0 12px 36px -8px rgba(124,92,255,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
          font-size:30px;flex-shrink:0;
        }
        .mod-pivot-label{
          font-family:'JetBrains Mono', monospace;font-size:11px;color:#a08bff;
          letter-spacing:0.18em;text-transform:uppercase;font-weight:600;margin-bottom:8px;
        }
        .mod-pivot-text{font-size:18px;line-height:1.5;color:#fff;font-weight:500;letter-spacing:-0.005em}
        .mod-pivot-text b{color:#a08bff;font-weight:700}
        .mod-pivot-arrow{font-size:36px;color:#a08bff;font-weight:700;animation:modArrPulse 2s ease-in-out infinite}
        @keyframes modArrPulse{0%,100%{transform:translateY(0);opacity:0.7}50%{transform:translateY(6px);opacity:1}}

        /* Clients module */
        .mod-card.mod-clients{
          background:
            radial-gradient(100% 60% at 0% 0%, rgba(255,157,108,0.10) 0%, transparent 60%),
            linear-gradient(180deg, #110a08 0%, #08080c 100%);
          border:1px solid rgba(255,157,108,0.45);
          box-shadow:0 0 60px -20px rgba(255,157,108,0.25);
        }
        .mod-card.mod-clients::before{
          background:#ff9d6c;border-color:#ff9d6c;
          box-shadow:0 0 0 4px #000, 0 0 22px rgba(255,157,108,0.55);
        }
        .mod-card.mod-clients .mod-num{color:#0f0a06;background:#ff9d6c;border-color:#ff9d6c;font-weight:700}
        .mod-card.mod-clients .mod-title{color:#ffd8c2}

        @media (max-width: 720px){
          .mod-list{padding-left:28px}
          .mod-list::before{left:10px}
          .mod-card::before{left:-25px;width:14px;height:14px}
          .mod-card{padding:18px 18px}
          .mod-title{font-size:22px}
          .mod-lesson{font-size:16px;gap:10px;padding:8px 0}
          .mod-pivot{padding:20px 18px;grid-template-columns:auto 1fr;gap:14px}
          .mod-pivot-arrow{display:none}
          .mod-pivot-text{font-size:15px}
          .mod-pivot-icon{width:48px;height:48px;font-size:24px}
          .mod-pivot::before{left:-25px}
          .modules-outcomes{grid-template-columns:1fr !important}
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Modules });
