/* GCCReady — CohortStrip
 * Live cohort calendar above-the-fold strip showing the next 3 cohorts/events
 * with countdown days. Sticky on home; can also be embedded on cert pages.
 *
 * Auto-hides cohorts once their start date passes (drops them from the rotation).
 */

// Cohort dates pushed +60 days from initial planning to give launch buffer.
// Update these dates as actual cohorts launch (and fill seat numbers from real signups).
const GR_COHORTS = [
  { id:'cma-13',    label:'US CMA · Cohort 13',             href:'#/certifications/us-cma', start:'2026-08-08', seats: '34 / 80 seats' },
  { id:'cpa-fall',  label:'US CPA · Fall track',            href:'#/certifications/us-cpa', start:'2026-08-30', seats: '22 / 60 seats' },
  { id:'sprint-9',  label:'GCC Sprint · Cohort 9 (12 wks)', href:'#/sprint',                start:'2026-08-22', seats: '18 / 40 seats' },
  { id:'ea-2',      label:'EA · Cohort 2',                  href:'#/certifications/ea',     start:'2026-09-12', seats: '11 / 30 seats' },
  { id:'cfa-l1',    label:'CFA Level 1 · Nov attempt',      href:'#/certifications/cfa',    start:'2026-09-26', seats: 'Rolling' },
];

function _grDaysTo(dateStr) {
  const d0 = new Date();
  const d1 = new Date(dateStr + 'T09:00:00');
  return Math.max(0, Math.ceil((d1 - d0) / (1000 * 60 * 60 * 24)));
}

function CohortStrip({ variant = 'home' }) {
  const upcoming = GR_COHORTS
    .map((c) => ({...c, days: _grDaysTo(c.start) }))
    .filter((c) => c.days >= 0 && c.days <= 120)
    .slice(0, 3);

  if (upcoming.length === 0) return null;

  return (
    <section style={{
      background:'var(--gr-navy)', color:'#fff',
      borderBottom: variant === 'home' ? '1px solid rgba(255,255,255,.08)' : 'none',
      overflow:'hidden',
    }}>
      <div className="gr-container" style={{padding:'14px 0'}}>
        <div style={{display:'flex', alignItems:'center', gap:14, flexWrap:'wrap'}}>
          <span style={{
            font:'800 11px/1 Inter', color:'#FBBF24',
            letterSpacing:'.16em', textTransform:'uppercase',
            padding:'5px 11px', background:'rgba(245,158,11,.12)', borderRadius:999,
            border:'1px solid rgba(245,158,11,.30)',
            display:'inline-flex', alignItems:'center', gap:7, flexShrink:0,
          }}>
            <span style={{
              width:7, height:7, borderRadius:'50%', background:'#FBBF24',
              animation:'grPulse 1.6s ease-in-out infinite',
            }}/>
            Upcoming
          </span>
          <div style={{
            display:'flex', alignItems:'center', gap:24, flexWrap:'wrap',
            flex:1, minWidth:0,
          }}>
            {upcoming.map((c, i) => (
              <a key={c.id} href={c.href} style={{
                display:'inline-flex', alignItems:'center', gap:10,
                color:'rgba(255,255,255,.92)', textDecoration:'none',
                font:'600 13.5px/1 Inter',
              }}>
                <Icon name="calendar" size={14} style={{color:'#FBBF24', flexShrink:0}}/>
                <span style={{fontWeight:700, color:'#fff'}}>{c.label}</span>
                <span style={{color:'rgba(255,255,255,.55)'}}>·</span>
                <span style={{color:'rgba(255,255,255,.78)', fontWeight:700}}>
                  {c.days === 0 ? 'starts today' : `${c.days} day${c.days===1?'':'s'} away`}
                </span>
                <span style={{color:'rgba(255,255,255,.55)'}}>·</span>
                <span style={{color:'#FBBF24', fontWeight:700}}>{c.seats}</span>
              </a>
            ))}
          </div>
          <a href="#/sprint" style={{
            font:'700 12px/1 Inter', color:'#0D1B2A', textDecoration:'none',
            padding:'8px 14px', borderRadius:999,
            background:'linear-gradient(135deg, #FBBF24, #F59E0B)',
            display:'inline-flex', alignItems:'center', gap:6, flexShrink:0,
          }}>
            See all cohorts <Icon name="arrow-right" size={11}/>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CohortStrip, GR_COHORTS });