// projects.jsx — award-panel project grid (two covers each, two-up)

// Resolve a cover path through the standalone bundler's __resources map (blob
// URLs) when present, else fall back to the literal relative path.
function projSrc(path) {
  if (!path) return path;
  const r = typeof window !== 'undefined' && window.__resources;
  if (r) {
    const key = 'proj_' + path.split('/').pop().replace(/\.[^.]+$/, '');
    if (r[key]) return r[key];
  }
  return path;
}

const PROJECTS = [
  {
    id: 'eeg',
    ribbon: { kind: 'gold', medal: '🏆', text: '1st' },
    cat: 'BioFeedback Hackathon @ MIT',
    cover: 'projects/eeg-app.png',
    title: ['Real-Time EEG ', 'Cognitive-Fatigue', ' Platform'],
    desc: 'A real-time brain–computer interface that converts raw EEG from a wearable ear patch into live cognitive-fatigue analytics, with neural data visualizations and actionable insights.',
    tags: ['EEG / BCI', 'Real-Time', 'Python'],
    year: '2026',
    href: 'https://mindfulmakers.xyz/creations/994',
    link: 'View project',
  },
  {
    id: 'pgx',
    ribbon: { kind: 'silver', medal: '🥈', text: '2nd' },
    cat: 'AI × Bio · Boston Tech Week',
    cover: 'projects/pgx-app.png',
    coverBg: '#ffffff',
    title: ['ML-Augmented ', 'Pharmacogenomics', ' Platform'],
    desc: 'Parses 700k+ SNPs from raw DNA files to classify drug–gene interactions — LLM-driven variant interpretation, polygenic risk scoring via Elastic Net, and carrier screening for hereditary disease.',
    tags: ['Genomics', 'Elastic Net', 'LLM'],
    year: '2026',
    href: 'https://github.com/pn-le/G-Nome',
    link: 'GitHub',
  },
  {
    id: 'assistive',
    ribbon: { kind: 'gold', medal: '🏆', text: '1st' },
    cat: 'Assistive Technology Hackathon',
    cover: 'projects/assistive-award.png',
    title: ['Assistive ', 'Cleaning', ' Attachment'],
    desc: 'An assistive cleaning attachment that boosts accessibility and autonomy for people with limited mobility — built through iterative prototyping with CAD, 3D printing, and metalworking.',
    tags: ['CAD / Fusion', '3D Printing', 'Metalwork'],
    year: '2026',
    href: 'https://sites.google.com/view/intercollegiateathack/past-hackathons-intercollegiate-assistive-technology-hackathon/2026-winners',
    link: 'View project',
  },
  {
    id: 'tomato',
    ribbon: null,
    cat: 'Academic research project',
    cover: 'projects/tomato-classification.png',
    title: ['Tomato ', 'Crop-Health', ' Classification'],
    desc: 'A Python pipeline classifying tomato plants as healthy vs. diseased from field-collected spectral reflectance — benchmarking classical spectral methods (SAM, Euclidean, vegetation indices) against six tuned ML models with plant-level cross-validation to prevent leakage.',
    tags: ['Machine Learning', 'Scikit-Learn', 'Python'],
    year: '2026',
    href: 'https://github.com/sofi-le/ml-tomato-disease-detection',
    link: 'GitHub',
  },
  {
    id: 'hyperspectral',
    ribbon: null,
    cat: 'Academic research project',
    cover: 'projects/leaf-detection.png',
    title: ['Hyperspectral ', 'Leaf-Disease', ' Detection'],
    desc: 'A MATLAB hyperspectral pipeline detecting leaf disease through classical spectral classification — Euclidean distance & SAM against a healthy reference plus a combined detector with spatial filtering, benchmarked on a synthetic 30-band reflectance dataset and scored with precision/recall/F1, confusion matrices, and ROC/AUC.',
    tags: ['MATLAB', 'Hyperspectral', 'Ag-Engineering'],
    year: '2026',
    href: 'https://github.com/sofi-le/hyperspectral-leaf-disease-detection',
    link: 'GitHub',
  },
];

function ProjectPanel({ p }) {
  return (
    <a className="proj-panel fade-item" href={p.href || '#'} target="_blank" rel="noopener" aria-label={p.title.join('') + ' — ' + (p.link || 'view')}>
      {p.ribbon && (
        <div className={'proj-ribbon ' + p.ribbon.kind}>
          <span className="m">{p.ribbon.medal}</span>{p.ribbon.text}
        </div>
      )}
      <div className="proj-covers">
        {p.cover ? (
          <div className="proj-cover-single" style={p.coverBg ? { background: p.coverBg } : undefined}>
            <img src={projSrc(p.cover)} alt={p.title.join('')} draggable="false" />
          </div>
        ) : (
          <>
            <image-slot id={'proj-' + p.id + '-1'} shape="rect" placeholder="COVER 1"></image-slot>
            <image-slot id={'proj-' + p.id + '-2'} shape="rect" placeholder="COVER 2"></image-slot>
          </>
        )}
      </div>
      <div className="proj-body">
        <div className="proj-cat">{p.cat}</div>
        <h3 className="proj-title">{p.title.join('')}</h3>
        <p className="proj-desc">{p.desc}</p>
        <div className="proj-foot">
          <div className="proj-tags">{p.tags.map((t) => <span key={t}>{t}</span>)}</div>
        </div>
        <div className="proj-link">
          <span className="pl-go">{p.link || 'View'} <span className="pl-arrow">↗</span></span>
          <span className="proj-year">{p.year}</span>
        </div>
      </div>
    </a>
  );
}

function ProjectsPage() {
  return (
    <div className="page-wrap fade-enter">
      <div className="page-head">
        <div className="eyebrow">ask me more about these!</div>
        <h2>Selected <span className="ital">Projects</span></h2>
      </div>
      <div className="proj-grid">
        {PROJECTS.map((p) => <ProjectPanel key={p.id} p={p} />)}
      </div>
    </div>
  );
}

Object.assign(window, { ProjectsPage });