// idea-9-career.jsx — HSC subjects → uni degrees → careers compass

// (left) HSC subjects the student is taking
const CC_SUBJECTS = [
  { id: 'bio',  name: 'Biology',           sub: 'Year 12 · current B5',  active: true },
  { id: 'chem', name: 'Chemistry',         sub: 'Year 12 · current B5',  active: true },
  { id: 'mat',  name: 'Mathematics Adv.',  sub: 'Year 12 · current B6',  active: true },
  { id: 'eng',  name: 'English Advanced',  sub: 'Year 12 · current B5',  active: true },
  { id: 'phys', name: 'Physics',           sub: 'not taken',             active: false, dimmed: true },
];

// (middle) Uni degrees this combo unlocks
const CC_DEGREES = [
  { id: 'med',  name: 'Medicine (UNSW)',           atar: 96.5, dur: '6 yr',  match: 'strong'  },
  { id: 'biom', name: 'Biomedical Science (USYD)', atar: 91.0, dur: '3 yr',  match: 'strong'  },
  { id: 'phar', name: 'Pharmacy (USYD)',           atar: 89.0, dur: '4 yr',  match: 'good'    },
  { id: 'phys', name: 'Physiotherapy (UTS)',       atar: 92.5, dur: '4 yr',  match: 'good'    },
  { id: 'vet',  name: 'Veterinary Science (USYD)', atar: 95.5, dur: '6 yr',  match: 'good'    },
  { id: 'res',  name: 'Medical Research (UNSW)',   atar: 86.0, dur: '3 yr',  match: 'okay'    },
];

// (right) Career outcomes per degree (mapped to selected degree = biomedical)
const CC_CAREERS = [
  { id: 'doc',  name: 'GP · clinical doctor',          sal: '$220k', grow: '+8%/yr',  match: 'strong'  },
  { id: 'spec', name: 'Hospital specialist',           sal: '$340k', grow: '+12%/yr', match: 'strong'  },
  { id: 'lab',  name: 'Diagnostic lab scientist',      sal: '$95k',  grow: '+6%/yr',  match: 'good'    },
  { id: 'gen',  name: 'Genetic counsellor',            sal: '$110k', grow: '+18%/yr', match: 'good'    },
  { id: 'res',  name: 'Biomedical researcher',         sal: '$130k', grow: '+10%/yr', match: 'good'    },
  { id: 'pol',  name: 'Health policy advisor',         sal: '$140k', grow: '+5%/yr',  match: 'okay'    },
];

function CareerCompass() {
  // Active selection: BIO + CHEM → BIOMEDICAL → GP
  const sel = { subj: ['bio', 'chem', 'mat'], degree: 'biom', career: 'doc' };

  return (
    <div className="cc-wrap">
      {/* filters */}
      <div className="cc-filters">
        <div className="cc-filter-grp">
          <span className="cc-filter-lbl">Your subjects</span>
          <div className="cc-subj-chips">
            <span className="cc-subj active">Biology</span>
            <span className="cc-subj active">Chemistry</span>
            <span className="cc-subj active">Maths Adv.</span>
            <span className="cc-subj active">English Adv.</span>
          </div>
        </div>
        <div className="cc-atar">
          <span className="cc-filter-lbl">Predicted ATAR</span>
          <span className="cc-atar-input">92.4</span>
          <span style={{ fontFamily: 'Outfit', fontWeight: 700, fontSize: 11, color: 'var(--adv-muted)' }}>(from your Mastery Map)</span>
        </div>
        <div style={{ marginLeft: 'auto', fontSize: 11.5, color: 'var(--adv-muted)', fontWeight: 600 }}>
          Showing <strong style={{ color: 'var(--adv-ink)' }}>6</strong> degree paths · <strong style={{ color: 'var(--adv-ink)' }}>42</strong> careers · <strong style={{ color: 'var(--adv-green)' }}>27</strong> within reach
        </div>
      </div>

      {/* map */}
      <div className="cc-map">
        {/* sankey curves drawn behind */}
        <svg className="cc-sankey" preserveAspectRatio="none" viewBox="0 0 1000 600">
          <defs>
            <linearGradient id="cc-grad-strong" x1="0" x2="1">
              <stop offset="0" stopColor="#c47b8a" stopOpacity="0.32"/>
              <stop offset="1" stopColor="#c47b8a" stopOpacity="0.10"/>
            </linearGradient>
            <linearGradient id="cc-grad-mid" x1="0" x2="1">
              <stop offset="0" stopColor="#d6a85f" stopOpacity="0.22"/>
              <stop offset="1" stopColor="#d6a85f" stopOpacity="0.08"/>
            </linearGradient>
          </defs>
          {/* subject → degree connections */}
          <path d="M260 105 C 350 105, 350 105, 440 105" stroke="url(#cc-grad-strong)" strokeWidth="14" fill="none"/>
          <path d="M260 170 C 350 170, 350 130, 440 105" stroke="url(#cc-grad-strong)" strokeWidth="9" fill="none"/>
          <path d="M260 235 C 350 235, 350 140, 440 105" stroke="url(#cc-grad-mid)" strokeWidth="6" fill="none"/>
          <path d="M260 105 C 350 105, 350 175, 440 175" stroke="url(#cc-grad-mid)" strokeWidth="8" fill="none"/>
          <path d="M260 170 C 350 170, 350 175, 440 175" stroke="url(#cc-grad-mid)" strokeWidth="10" fill="none"/>
          <path d="M260 105 C 350 105, 350 245, 440 245" stroke="url(#cc-grad-mid)" strokeWidth="5" fill="none"/>
          <path d="M260 170 C 350 170, 350 245, 440 245" stroke="url(#cc-grad-mid)" strokeWidth="6" fill="none"/>
          <path d="M260 105 C 350 105, 350 315, 440 315" stroke="url(#cc-grad-mid)" strokeWidth="4" fill="none"/>
          <path d="M260 170 C 350 170, 350 385, 440 385" stroke="url(#cc-grad-mid)" strokeWidth="4" fill="none"/>
          <path d="M260 235 C 350 235, 350 455, 440 455" stroke="url(#cc-grad-mid)" strokeWidth="3" fill="none"/>

          {/* degree → career — emphasised path for biomedical (y=175) */}
          <path d="M680 175 C 770 175, 770 105, 860 105" stroke="url(#cc-grad-strong)" strokeWidth="12" fill="none"/>
          <path d="M680 175 C 770 175, 770 170, 860 170" stroke="url(#cc-grad-strong)" strokeWidth="14" fill="none"/>
          <path d="M680 175 C 770 175, 770 235, 860 235" stroke="url(#cc-grad-mid)" strokeWidth="8" fill="none"/>
          <path d="M680 175 C 770 175, 770 305, 860 305" stroke="url(#cc-grad-mid)" strokeWidth="7" fill="none"/>
          <path d="M680 175 C 770 175, 770 375, 860 375" stroke="url(#cc-grad-mid)" strokeWidth="6" fill="none"/>
          <path d="M680 175 C 770 175, 770 445, 860 445" stroke="url(#cc-grad-mid)" strokeWidth="4" fill="none"/>
        </svg>

        {/* column: subjects */}
        <div className="cc-col">
          <div className="cc-col-head">Your HSC subjects</div>
          {CC_SUBJECTS.map(s => (
            <div key={s.id}
              className={`cc-node ${sel.subj.includes(s.id) ? 'active' : ''} ${s.dimmed ? 'dimmed' : ''}`}>
              <div className="cc-node-title">{s.name}</div>
              <div className="cc-node-sub">{s.sub}</div>
            </div>
          ))}
        </div>

        {/* column: degrees */}
        <div className="cc-col">
          <div className="cc-col-head">Degrees unlocked · 6 of 142</div>
          {CC_DEGREES.map(d => (
            <div key={d.id}
              className={`cc-node ${d.id === sel.degree ? 'active' : d.match === 'strong' ? 'linked' : ''}`}>
              <div className="cc-node-title">{d.name}</div>
              <div className="cc-node-sub">{d.dur} · ATAR cutoff in 2024</div>
              <div className="cc-node-meta">
                <span className="atar">ATAR {d.atar.toFixed(1)}</span>
                <span style={{ color: d.atar <= 92.4 ? 'var(--adv-green)' : 'var(--adv-coral-deep)' }}>
                  {d.atar <= 92.4 ? 'within reach' : `need +${(d.atar-92.4).toFixed(1)}`}
                </span>
              </div>
            </div>
          ))}
        </div>

        {/* column: careers */}
        <div className="cc-col">
          <div className="cc-col-head">Career outcomes (from Biomedical Sci)</div>
          {CC_CAREERS.map(c => (
            <div key={c.id}
              className={`cc-node ${c.id === sel.career ? 'active' : c.match === 'strong' ? 'linked' : ''}`}>
              <div className="cc-node-title">{c.name}</div>
              <div className="cc-node-sub">Median salary (10yr) · projected growth</div>
              <div className="cc-node-meta">
                <span className="sal">{c.sal}</span>
                <span className="grow">{c.grow}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* footer detail strip for selected path */}
      <div className="cc-detail">
        <div className="cc-detail-l">
          <h4>Bio + Chem + Maths Adv. → <em>Biomedical Science (USYD)</em> → GP</h4>
          <p>You're 2.1 ATAR points clear of the biomedical cutoff. Of 1,820 students on the same path last year, <strong>71% met or exceeded</strong>.</p>
        </div>
        <div className="cc-stat">
          <div className="cc-stat-num">92.4 → 95+</div>
          <div className="cc-stat-lbl">ATAR · current → reach</div>
        </div>
        <div className="cc-stat">
          <div className="cc-stat-num">3 + 4</div>
          <div className="cc-stat-lbl">Yrs uni → registration</div>
        </div>
        <div className="cc-stat">
          <div className="cc-stat-num">$220k+</div>
          <div className="cc-stat-lbl">Median 10-yr salary</div>
        </div>
      </div>
    </div>
  );
}

function Idea9() {
  return (
    <IdeaShell
      num="09"
      title="Career"
      titleEm="Compass"
      tagline={<><strong>"Why am I studying this?"</strong> Visualise the real link from HSC subjects → uni degrees → careers, with ATAR cutoffs, salaries, and job growth attached. Students see the destination and the gap to close.</>}
      pills={[
        { kind: 'plum',  icon: 'crown',  label: 'New page · motivation' },
        { kind: 'rose',  icon: 'target', label: 'Drives ATAR ambition' },
      ]}
      stats={[
        { num: '142', label: 'Degrees mapped',  sub: 'Every NSW-relevant degree linked to its required subjects and current ATAR cutoff. Updated yearly from official data.' },
        { num: '+19%', label: 'Engagement lift', sub: 'When students see their predicted ATAR vs. cutoff, daily study sessions go up. We tested this in our Year 12 cohort.', dark: true },
      ]}
      pros={[
        'Solves the <strong>"why am I doing this?"</strong> question that kills daily-habit retention in HSC season.',
        '<strong>Hooks into Mastery Map</strong>: predicted ATAR updates as red dots become green — the compass updates in real time.',
        'Marketing gold: shareable career-card images ("My HSC → Medicine. 47 days to go.")',
        'Opens future products: tutor-marketplace for the specific subjects between you and your reach degree.',
      ]}
    >
      <CareerCompass/>
    </IdeaShell>
  );
}

window.Idea9 = Idea9;