/* global React, useReveal, SectionHead */

const rows = [
  {
    date: "Aug 2025 — Present",
    current: true,
    role: "Campus Ambassador",
    org: "Peace Corps · Pembroke, N.C.",
    desc: "I build interest with prospective volunteers, coordinate national recruitment livestreams, and adapt the same core message across LinkedIn, Instagram, Snap, Facebook, and X without losing channel fit.",
    n: "10+",
    nLbl: "Prospective\nvolunteers",
  },
  {
    date: "Jan 2025 — Present",
    current: true,
    role: "Marketing Chair & Intern",
    org: "UNCP Career Center · Pembroke, N.C.",
    desc: "I lead social, email, and digital marketing for student-facing career programs. I track open rate, CTR, reach, and engagement so campaign decisions are based on behavior rather than guesswork.",
    n: "+35%",
    nLbl: "Student\nengagement",
  },
  {
    date: "Nov 2023 — Dec 2023",
    role: "Social Media & Marketing Intern",
    org: "HerKey (fka JobsForHer) · Bangalore, IN",
    desc: "I executed social strategy for a women-in-tech platform, produced 30+ assets, and used performance reads to refine content formats that lifted Instagram and LinkedIn engagement.",
    n: "+20%",
    nLbl: "Social\nengagement",
  },
  {
    date: "Oct 2023 — Nov 2023",
    role: "HR & Marketing Intern",
    org: "Lernx · Bangalore, IN",
    desc: "I supported marketing operations while tightening the recruiting workflow: structured interviews, clearer screening stages, and faster feedback loops for a 20+ candidate pipeline.",
    n: "−25%",
    nLbl: "Hiring\nturnaround",
  },
];

window.Experience = function Experience() {
  const ref = useReveal();
  return (
    <section className="section section--border" id="work" ref={ref}>
      <SectionHead num="03 — Work" title="Selected" titleEm="experience" meta={`${rows.length} roles · 2023 – present`} />

      <div className="ledger">
        {rows.map((r, i) => (
          <article className="ledger__row reveal" key={i}>
            <div className="ledger__date">
              {r.date}
              {r.current && <span className="current">· Current</span>}
            </div>
            <div>
              <div className="ledger__role">{r.role}</div>
              <div className="ledger__org">{r.org}</div>
            </div>
            <div className="ledger__desc">{r.desc}</div>
            <div className="ledger__metric">
              <div className="n">{r.n}</div>
              <div className="l" style={{whiteSpace: "pre-line"}}>{r.nLbl}</div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};