phd-advisor-frontend/src/components/CareerSourcesSection.js

import React from 'react';

const SOURCE_CARDS = [
  {
    title: 'Compare colleges & outcomes',
    image: '/career-sources/employers-look-for.png',
    blurb: 'Use College Scorecard and College Navigator to compare costs, programs, and outcomes — then verify details on each school’s site.',
    href: 'https://collegescorecard.ed.gov/',
    linkLabel: 'College Scorecard',
  },
  {
    title: 'Aid & net price',
    image: '/career-sources/campus-recruiting-timeline.png',
    blurb: 'Sticker price is not net price. Start with FAFSA and each school’s Net Price Calculator before cutting options.',
    href: 'https://studentaid.gov/h/apply-for-aid/fafsa',
    linkLabel: 'FAFSA.gov',
  },
  {
    title: 'Access & adult pathways',
    image: '/career-sources/networking-map.png',
    blurb: 'Disability Services questions, online program quality signals, and transfer / prior-learning pathways for returning adults.',
    href: 'https://www.ahead.org/',
    linkLabel: 'AHEAD (disability in higher ed)',
  },
];

const CareerSourcesSection = () => (
  <section className="career-sources-section" aria-labelledby="career-sources-title">
    <h3 id="career-sources-title" className="features-title">College search sources</h3>
    <p className="career-sources-intro">
      Grounded in official education data, federal student aid, and accessibility resources.
      Upload the docs in <code>knowledge/</code> or <code>docs/college_knowledge/</code> during chat for sharper advisor answers.
    </p>
    <div className="career-sources-grid">
      {SOURCE_CARDS.map((card) => (
        <article key={card.title} className="career-source-card">
          <img src={card.image} alt="" className="career-source-image" loading="lazy" />
          <h4 className="feature-title">{card.title}</h4>
          <p className="feature-description">{card.blurb}</p>
          <a className="career-source-link" href={card.href} target="_blank" rel="noopener noreferrer">
            {card.linkLabel} →
          </a>
        </article>
      ))}
    </div>
  </section>
);

export default CareerSourcesSection;