/* Experience / résumé section.
   Click a row → opens right-side panel with full brief.
   No hover popups (kept off per request). */

const { EXPERIENCE } = window.PORTFOLIO_DATA;

const ExperienceRow = ({ e, idx, onClick }) =>
<div className="exp-row" onClick={() => onClick(e)}>
    <div className="exp-num">{String(idx + 1).padStart(2, '0')}</div>
    <div>
      <div className="exp-company">{e.company}</div>
      <div className="exp-role">{e.role}</div>
    </div>
    <div className="exp-location">{e.location}</div>
    <div className="exp-type">{e.type}</div>
    <div className="exp-dates">{e.dates}</div>
    <div className="exp-more">+ read</div>
  </div>;


const ExperienceSidePanel = ({ e, onClose }) => {
  React.useEffect(() => {
    const onKey = (ev) => {if (ev.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {window.removeEventListener('keydown', onKey);document.body.style.overflow = '';};
  }, [onClose]);
  if (!e) return null;
  return (
    <>
      <div className="side-panel-back" onClick={onClose} />
      <aside className="side-panel" role="dialog" aria-label={e.company}>
        <button className="side-panel-close" onClick={onClose}>close ×</button>
        <header>
          <div className="idx">{e.type}</div>
          <h3>{e.company}</h3>
          <div style={{ color: 'var(--ink-soft)', fontSize: 15 }}>{e.role}</div>
        </header>
        <div className="meta-row">
          <div><span className="k">Location</span>{e.location}</div>
          <div><span className="k">Dates</span>{e.dates}</div>
          <div><span className="k">Type</span>{e.type.split(' · ')[0]}</div>
        </div>

        {e.rating &&
        <div className="sp-rating">
            <div className="sp-rating-row">
              <span className="sp-rating-k mono up">Co-op evaluation</span>
              <span className="sp-rating-v mono up">{e.rating}</span>
            </div>
            {e.ratingNote && <div className="sp-rating-note">{e.ratingNote}</div>}
          </div>
        }

        <div className="body">
          <div>
            <h4>Responsibilities</h4>
            <ul>{e.bullets.map((b, i) => <li key={i}>{b}</li>)}</ul>
          </div>

          {e.quotes && e.quotes.length > 0 &&
          <div>
              <h4>Employer testimonials</h4>
              <div className="sp-quotes">
                {e.quotes.map((q, i) =>
              <figure key={i} className="sp-quote">
                    <blockquote>{q.text}</blockquote>
                    <figcaption>
                      <span className="sp-quote-name">{q.name}</span>
                      {q.title && <span className="sp-quote-title">{q.title}</span>}
                    </figcaption>
                  </figure>
              )}
              </div>
            </div>
          }

          {(!e.quotes || e.quotes.length === 0) && e.allowQuotePlaceholder !== false &&
          <div>
              <h4>Employer testimonials</h4>
              <div className="sp-quote-placeholder mono up">— quotes pending —</div>
            </div>
          }

          <div>
            <h4>Technologies</h4>
            <div className="tech-grid">{e.tech.map((t, i) => <span key={i}>{t}</span>)}</div>
          </div>
        </div>
      </aside>
    </>);

};

const ExperienceSection = ({ controlledPanel, onPanelChange } = {}) => {
  const [localPanel, setLocalPanel] = React.useState(null);
  const isControlled = controlledPanel !== undefined;
  const panelFor = isControlled ? controlledPanel : localPanel;
  const setPanelFor = (e) => {
    if (isControlled) onPanelChange?.(e);
    else setLocalPanel(e);
  };

  return (
    <section className="section" id="experience" data-screen-label="Experience">
      <div className="page">
        <div className="section-head">
          <div className="section-title">Work <em>history</em></div>
          <div className="section-meta">Section 03 · {EXPERIENCE.length.toString().padStart(2, '0')} positions</div>
        </div>
        <p className="section-lede">Industry R&D, academic research, and team leadership. Click any row to open the full brief.


        </p>

        <div className="exp-list">
          {EXPERIENCE.map((e, i) =>
          <ExperienceRow key={e.id} e={e} idx={i} onClick={setPanelFor} />
          )}
        </div>
      </div>
      {panelFor && <ExperienceSidePanel e={panelFor} onClose={() => setPanelFor(null)} />}
    </section>);

};

/* Lookup helper exposed for cross-section linking (e.g. References panel). */
const findExperienceById = (id) => EXPERIENCE.find(e => e.id === id);

window.ExperienceSection = ExperienceSection;
window.ExperienceSidePanel = ExperienceSidePanel;
window.EXPERIENCE_DATA = EXPERIENCE;
window.findExperienceById = findExperienceById;