// idea-5-cram.jsx — "HSC Countdown · Adaptive Cram Path"
// Days-until-HSC ring, week strip showing past/today/future, today's micro-plan,
// adaptive weak-topic queue side rail.

const CR_DAYS = [
  { name: 'MON', num: 19, mins: 25, state: 'done' },
  { name: 'TUE', num: 20, mins: 28, state: 'done' },
  { name: 'WED', num: 21, mins: 0,  state: 'miss' },
  { name: 'THU', num: 22, mins: 22, state: 'done' },
  { name: 'FRI', num: 23, mins: 25, state: 'today', progress: 0.45 },
  { name: 'SAT', num: 24, mins: 30, state: 'future' },
  { name: 'SUN', num: 25, mins: 20, state: 'future' },
];

const CR_SESSIONS = [
  { title: 'DNA replication · lagging strand', tag: 'Mod 5 · flagged shaky',  mins: 7,  done: true },
  { title: 'Drill · 8 active vs passive Qs',   tag: 'Mod 5 · drill',          mins: 8,  done: true },
  { title: 'Concept video: dihybrid crosses',  tag: 'Mod 5 · re-teach',       mins: 6,  done: false, active: true },
  { title: 'Past paper Q14 · 2024 HSC',        tag: 'Extended · AI marked',   mins: 6,  done: false },
];

const CR_WEAK = [
  { topic: 'DNA replication',           module: 'Mod 5', mast: 0.18, time: '12 min', cls: 'sw-shaky',     val: '#c47b8a' },
  { topic: 'Dihybrid crosses',          module: 'Mod 5', mast: 0.30, time: '8 min',  cls: 'sw-shaky',     val: '#c47b8a' },
  { topic: 'Phototropism',              module: 'Mod 6', mast: 0.42, time: '6 min',  cls: 'sw-learning',  val: '#d6a85f' },
  { topic: 'Speciation · isolation',    module: 'Mod 6', mast: 0.45, time: '10 min', cls: 'sw-learning',  val: '#d6a85f' },
  { topic: 'Mutation types',            module: 'Mod 5', mast: 0.55, time: '6 min',  cls: 'sw-learning',  val: '#d6a85f' },
];

function CountdownPath() {
  return (
    <div className="cr-wrap">
      <div className="cr-main">
        <div className="cr-head">
          <div className="cr-head-ring">
            <BigRing days={47} pct={0.42}/>
          </div>
          <div className="cr-head-info">
            <h2>Your <em>HSC Trial</em> · 47 days</h2>
            <p>Adaptive 25-min sessions every day. The plan rebuilds itself when you nail or miss a topic — you just open the app and study what's at the top.</p>
          </div>
          <div className="cr-head-bigday">
            <strong>47</strong>
            <small>days to go</small>
          </div>
        </div>

        <div className="cr-week-label">THIS WEEK · 4 / 5 days hit so far</div>
        <div className="cr-week">
          {CR_DAYS.map((d, i) => (
            <div key={i} className={`cr-day ${d.state}`}>
              {(d.state === 'done' || d.state === 'today') && (
                <div className="cr-day-tag"><Icon name="check"/></div>
              )}
              {d.state === 'miss' && (
                <div className="cr-day-tag"><Icon name="x"/></div>
              )}
              <div className="cr-day-name">{d.name}</div>
              <div className="cr-day-num">{d.num}</div>
              <div className="cr-day-bar">
                <i style={{ width: d.state === 'done' ? '100%' : d.state === 'today' ? `${(d.progress||0)*100}%` : '0%' }}/>
              </div>
              <div className="cr-day-mins">{d.state === 'miss' ? 'skipped' : `${d.mins} min`}</div>
            </div>
          ))}
        </div>

        {/* Today */}
        <div className="cr-today">
          <div className="cr-today-head">
            <h3><Icon name="target"/> Friday · today's path</h3>
            <div className="cr-today-mins">12 of 25 min done</div>
          </div>

          {CR_SESSIONS.map((s, i) => (
            <div key={i} className={`cr-sess ${s.done ? 'done' : ''}`}>
              <div className="cr-sess-mark">
                {s.done ? <Icon name="check"/> : i + 1}
              </div>
              <div>
                <div className="cr-sess-title">{s.title}</div>
                <div className="cr-sess-tag">{s.tag}</div>
              </div>
              <div className="cr-sess-time">{s.mins} min</div>
              <div className="cr-sess-go"><Icon name="chevronR"/></div>
            </div>
          ))}

          <div className="cr-today-foot">
            <span>Plan rebuilt <strong>4 min ago</strong> based on yesterday's drill results</span>
            <span><Icon name="sparkles" style={{ width: 12, height: 12, verticalAlign: -2, marginRight: 4, color: 'var(--adv-gold-deep)' }}/><strong>+85 XP</strong> when finished</span>
          </div>
        </div>
      </div>

      {/* side */}
      <div className="cr-side">
        <div className="cr-bigring">
          <div className="cr-bigring-svg">
            <BigRingDark days={47} pct={0.42}/>
          </div>
          <div className="cr-bigring-lbl">PATH PROGRESS</div>
          <div className="cr-bigring-sub">42% through your countdown plan</div>
        </div>

        <div className="cr-weak">
          <h4>Your weak-topic queue · auto-rebuilt</h4>
          {CR_WEAK.map((w, i) => (
            <div key={i} className="cr-weak-row">
              <div className="cr-weak-mast" style={{ background: w.val }}>
                {Math.round(w.mast*100)}
              </div>
              <div className="cr-weak-name">
                {w.topic}
                <small>{w.module}</small>
              </div>
              <div className="cr-weak-time">{w.time}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Lightweight ring used in the head (light theme)
function BigRing({ days, pct }) {
  const r = 38;
  const c = 2 * Math.PI * r;
  return (
    <svg viewBox="0 0 88 88" width="88" height="88">
      <circle cx="44" cy="44" r={r} fill="none" stroke="rgba(45,49,66,0.10)" strokeWidth="7"/>
      <circle cx="44" cy="44" r={r} fill="none" stroke="#c47b8a" strokeWidth="7" strokeLinecap="round"
        strokeDasharray={`${c*pct} ${c}`} transform="rotate(-90 44 44)"/>
      <text x="44" y="46" textAnchor="middle" fontSize="22" fontWeight="800" fill="#2d3142">{days}</text>
      <text x="44" y="62" textAnchor="middle" fontSize="9" fontWeight="700" letterSpacing="1.4" fill="#8a8079">DAYS</text>
    </svg>
  );
}

function BigRingDark({ days, pct }) {
  const r = 56;
  const c = 2 * Math.PI * r;
  return (
    <svg viewBox="0 0 130 130" width="130" height="130">
      <circle cx="65" cy="65" r={r} fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="10"/>
      <circle cx="65" cy="65" r={r} fill="none" stroke="#d6a85f" strokeWidth="10" strokeLinecap="round"
        strokeDasharray={`${c*pct} ${c}`} transform="rotate(-90 65 65)"/>
      <text x="65" y="62" textAnchor="middle" fontSize="32" fontWeight="800" fill="#fff">{days}</text>
      <text x="65" y="82" textAnchor="middle" fontSize="10" fontWeight="700" letterSpacing="1.6" fill="rgba(255,255,255,0.6)">DAYS LEFT</text>
    </svg>
  );
}

function Idea5() {
  return (
    <IdeaShell
      num="05"
      title="HSC Countdown ·"
      titleEm="Adaptive Cram Path"
      tagline={<><strong>The plan that re-plans itself.</strong> Set your trial / HSC date, get a 25-min path every day. The system pulls weak dot-points to the front, mastered ones to the back — you just press play.</>}
      pills={[
        { kind: 'rose',  icon: 'clock',  label: 'Behaviour · habit' },
        { kind: 'gold',  icon: 'timer',  label: 'Adaptive scheduling' },
      ]}
      stats={[
        { num: '25 min', label: 'Daily commitment',    sub: 'Small enough to actually do; big enough to feel real progress in HSC season.' },
        { num: '×3.4',   label: 'Topics covered',      sub: 'Vs unstructured study — measured over 30 days. Streak protection means students don\'t give up after a miss.', dark: true },
      ]}
      pros={[
        '<strong>Solves "where do I even start"</strong> — the #1 reason HSC students bounce off a self-study app.',
        'Streak + daily ring = same loop that powers Duolingo. Habit-forming.',
        '<strong>Compounds with the Mastery Map (Idea 01)</strong>: weak red dots auto-flow into the path.',
        'Re-plans on miss days — guilt-free skips, no broken Excel sheets.',
      ]}
    >
      <CountdownPath/>
    </IdeaShell>
  );
}

window.Idea5 = Idea5;