// experience.jsx — Mina's experience timeline w/ Work/Volunteer/Research filter.

const EXPERIENCES = [
  {
    type: "Volunteer",
    title: "Rexall Volunteer Assistant",
    company: "Rexall",
    duration: "Aug 2021",
    bullets: [
      ["Accurately filled and labeled 50+ prescriptions per shift", " — ensuring compliance with pharmacy protocols and patient safety standards."],
      ["Replenished and organized 200+ medications and products weekly", " — maintaining stock levels and improving workflow efficiency."],
      ["Assisted 20+ patients per shift", " with inquiries and over-the-counter purchases."],
    ],
  },
  {
    type: "Volunteer",
    title: "Food Bank Volunteer",
    company: "St. Mary's Food Bank",
    duration: "Mar – May 2022",
    bullets: [
      ["Arranged and stocked shelves for 50+ families per shift", " — improving accessibility and reducing wait times during distribution."],
      ["Communicated empathetically with 5+ families per shift", " — assessing needs and customizing food orders to fit dietary restrictions."],
    ],
  },
  {
    type: "Work",
    title: "Kitchen Worker",
    company: "McDonald's",
    duration: "Jul 2022",
    bullets: [
      ["Organized events", " to support community initiatives and raise awareness."],
      ["Managed volunteer teams", " ensuring smooth execution of activities."],
      ["Secured funding", " by collaborating with local businesses and sponsors."],
    ],
  },
  {
    type: "Volunteer",
    title: "Summer Camp Volunteer",
    company: "Ontario Science Centre",
    duration: "Jul 2023",
    bullets: [
      ["Supervised and cared for 30+ children daily", " — ensuring a safe and engaging environment."],
      ["Planned and executed 10+ activities per week", " — adhering to a strict schedule and minimizing risks."],
      ["Collaborated with 10+ volunteers and staff", " to manage camp operations smoothly."],
    ],
  },
  {
    type: "Volunteer",
    title: "Youth Volunteer",
    company: "Community Living Mississauga",
    duration: "Aug 2023",
    bullets: [
      ["Built positive relationships with teens with disabilities", " — fostering inclusion and emotional well-being through daily social interaction."],
      ["Led recreational and skill-building activities weekly", " — promoting confidence in a safe, supportive environment."],
    ],
  },
  {
    type: "Work",
    title: "Software Engineering Intern",
    company: "Royal Bank of Canada",
    duration: "Jul – Aug 2024",
    bullets: [
      ["Migrated 14 million real client files", " to a new system using Python, Selenium, and recursive functions."],
      ["Saved ~$1,500,000 in labour and $10,000/mo in compliance", " by keeping client history accessible to the insurance department."],
      ["Automated processes with Python and Java", " to improve system efficiency."],
    ],
  },
  {
    type: "Work",
    title: "Software Engineering Intern",
    company: "Royal Bank of Canada",
    duration: "Jul – Aug 2025",
    bullets: [
      ["Built CHIP (Client History Insight Portal)", " — surfaces a client's previous async chats, banking and mobile platform interactions so agents can anticipate need."],
      ["Estimated savings: 2 min/call, $1,000,000+ total.", ""],
      ["Optimized internal software", " for Branch Services Technologies at RBC."],
    ],
  },
  {
    type: "Research",
    title: "Camber & thickness positions vs. lift across angle of attack",
    company: "Independent Research",
    duration: "Sep 2023 – Aug 2024",
    bullets: [
      ["Measured camber/thickness positions of airfoils", " and quantified their impact on lift."],
      ["3D-printed airfoils for wind tunnel testing.", ""],
      ["Built a custom wind tunnel and measurement rig", " to conduct the experiments."],
    ],
  },
  {
    type: "Research",
    title: "Airfoil maximum thickness vs. lift/drag at various angles of attack",
    company: "Independent Research",
    duration: "Sep 2024 – Mar 2025",
    page: "airfoil.html",
    paper: {
      doc: "PHYS-EE-01",
      pages: "27 pp",
      title: "Airfoil thickness vs lift/drag at varying angles of attack",
      r2: "0.9538",
      eq: "L = ½ C<sub>L</sub> ρ v² A",
      kind: "airfoil",
    },
    bullets: [
      ["Designed controlled experiments", " using 3D-printed NACA airfoils (6–21% thickness) measuring lift and drag from -5° to 60°."],
      ["Collected quantitative data", " via precision balance and computed lift-to-drag ratios."],
      ["Applied fluid dynamics principles", " (Bernoulli, Newton's 3rd Law, boundary-layer theory) to interpret stall behaviour."],
    ],
  },
  {
    type: "Research",
    title: "Chain length & hydroxyl position vs. logP and SASA in alcohols",
    company: "Independent Research",
    duration: "Dec 2024 – Feb 2025",
    page: "chem.html",
    paper: {
      doc: "CHEM-IA-02",
      pages: "24 pp",
      title: "Effect of chain length & hydroxyl position on logP",
      r2: "> 0.99",
      eq: "log P = 0.5421n − 1.309",
      kind: "chem",
    },
    bullets: [
      ["Investigated molecular factors influencing solubility and absorption.", ""],
      ["Computational modeling of 36 alcohols (C1–C11)", " using PubChem, ALOGPS, ChemSpider, Chemicalize, PyMol."],
      ["Established quantitative relationships", " — R² > 0.99 for chain length vs. logP."],
    ],
  },
  {
    type: "Research",
    title: "Outer pipe radius vs. time for a magnet to fall through",
    company: "Independent Research",
    duration: "Dec 2024 – Feb 2025",
    page: "physics.html",
    paper: {
      doc: "PHYS-IA-03",
      pages: "13 pp",
      title: "Time for a magnet to fall through a conductive pipe",
      r2: "0.9861",
      eq: "t = (ks/mg)(1/a<sup>3</sup> − 1/b<sup>3</sup>)",
      kind: "physics",
    },
    bullets: [
      ["Derived a model from Faraday's & Lenz's Laws", " predicting fall time ∝ 1/r³."],
      ["Conducted controlled experiments", " using aluminum pipes of varying outer radii and 60fps video analysis."],
      ["R² = 0.9861", " — derived inner radius (9 ± 1 mm) matched measured value (8 ± 0.05 mm)."],
    ],
  },
  {
    type: "Research",
    title: "Diffusion across red blood cells of different sizes & elongations",
    company: "Independent Research",
    duration: "Mar – Apr 2025",
    page: "diffusion.html",
    paper: {
      doc: "MATH-IA-04",
      pages: "27 pp",
      title: "Modelling diffusion across red blood cells",
      r2: "0.9957",
      eq: "C<sub>RBC</sub>(t) = C<sub>surr</sub> − (C<sub>surr</sub> − C<sub>0</sub>) e<sup>−DAt/Vd</sup>",
      kind: "diffusion",
    },
    bullets: [
      ["Derived a diffusion model using Fick's law", " incorporating membrane thickness and oxygen concentrations."],
      ["Modelled RBC geometry", " via quartic fits to holographic data; applied dilations to simulate pathological deformations."],
      ["Computed volumes, surface areas, diffusion rates", " using shell method, double integrals, and numerical integration (Python)."],
    ],
  },
];

const EXP_TYPES = ["All", "Work", "Volunteer", "Research"];

// Sparkline variants drawn into the .pr-paper-graph slot. Picked by
// `paper.kind` so each research tile has its own visual identity.
function DiffusionSparkline() {
  return (
    <svg className="pr-paper-graph" viewBox="0 0 220 80" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id="exp-pr-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--accent)" stopOpacity=".25" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <line x1="8" y1="72" x2="212" y2="72" stroke="currentColor" strokeWidth="0.75" opacity="0.35" />
      <line x1="8" y1="8" x2="8" y2="72" stroke="currentColor" strokeWidth="0.75" opacity="0.35" />
      <path d="M 8 70 Q 30 18, 80 12 T 212 10" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.95" />
      <path d="M 8 70 Q 50 26, 120 16 T 212 12" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.6" />
      <path d="M 8 70 Q 80 36, 160 22 T 212 16" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.35" />
      <path d="M 8 70 Q 30 18, 80 12 T 212 10 L 212 72 L 8 72 Z" fill="url(#exp-pr-fill)" />
    </svg>
  );
}

// Tilted airfoil cross-section with airflow streamlines + lift/drag arrows.
// A small NACA-like silhouette drawn directly (not the same as the page's
// runtime path generator — just an evocative shape).
function AirfoilSparkline() {
  return (
    <svg className="pr-paper-graph" viewBox="0 0 220 80" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      {/* airflow streamlines */}
      <line x1="4" y1="22" x2="40" y2="22" stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.8" />
      <line x1="4" y1="40" x2="40" y2="40" stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.8" />
      <line x1="4" y1="58" x2="40" y2="58" stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.8" />
      {/* airfoil silhouette — tilted ~12° */}
      <path
        d="M 50 48 C 80 28, 130 24, 168 38 C 130 46, 80 54, 50 48 Z"
        transform="rotate(-12 110 40)"
        fill="var(--accent)"
        fillOpacity="0.22"
        stroke="var(--accent)"
        strokeWidth="1.4"
      />
      {/* lift arrow up */}
      <line x1="108" y1="32" x2="108" y2="10" stroke="var(--accent)" strokeWidth="1.8" />
      <path d="M 104 14 L 108 8 L 112 14" fill="none" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" />
      <text x="114" y="14" fontFamily="JetBrains Mono, monospace" fontSize="9" fontWeight="700" fill="var(--accent)">L</text>
      {/* drag arrow right */}
      <line x1="172" y1="42" x2="196" y2="42" stroke="currentColor" strokeOpacity="0.6" strokeWidth="1.4" />
      <path d="M 192 38 L 198 42 L 192 46" fill="none" stroke="currentColor" strokeOpacity="0.6" strokeWidth="1.4" strokeLinecap="round" />
      <text x="198" y="36" fontFamily="JetBrains Mono, monospace" fontSize="9" fontWeight="700" fill="currentColor" fillOpacity="0.6" textAnchor="end">D</text>
      {/* labels */}
      <text x="6" y="74" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1" fill="var(--ink-mute)">α = 15°</text>
      <text x="214" y="74" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1" fill="var(--ink-mute)">NACA 53⎯⎯</text>
    </svg>
  );
}

// Zigzag carbon-chain alcohol drawing for the chem walkthrough tile.
// Wider sparkline than usual; the OH group sits above the second carbon to
// pick a distinctive non-end position.
function ChemSparkline() {
  // 6-carbon zigzag, OH at position 2
  // viewBox 0 0 220 80
  return (
    <svg className="pr-paper-graph" viewBox="0 0 220 80" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      {/* C-C bonds */}
      <polyline
        points="22,52 50,30 78,52 106,30 134,52 162,30 190,52"
        fill="none"
        stroke="var(--accent)"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      {/* C vertex dots */}
      {[[22,52],[50,30],[78,52],[106,30],[134,52],[162,30],[190,52]].map(([x,y],i)=>(
        <circle key={i} cx={x} cy={y} r="3" fill="var(--card-bg)" stroke="var(--accent)" strokeWidth="1.4" />
      ))}
      {/* OH attached at vertex (50,30) */}
      <line x1="50" y1="30" x2="50" y2="12" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" />
      <text x="50" y="10" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fontWeight="700" fill="var(--accent)">OH</text>
      {/* polar / non-polar shading */}
      <rect x="4" y="66" width="60" height="6" rx="1" fill="var(--accent)" fillOpacity="0.25" />
      <text x="7" y="77" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1" fill="var(--accent)" fillOpacity="0.8">POLAR</text>
      <rect x="70" y="66" width="140" height="6" rx="1" fill="currentColor" fillOpacity="0.18" />
      <text x="205" y="77" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1" fill="currentColor" fillOpacity="0.55">NON-POLAR</text>
      {/* logP arrow indicator */}
      <text x="200" y="22" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1" fill="var(--ink-mute)">logP ↗</text>
    </svg>
  );
}

// Side-view of a vertical pipe with a magnet inside and eddy current loops
// flanking it. Aluminium walls shaded, magnet split N (accent) / S (dark),
// gravity arrow on the right.
function PhysicsSparkline() {
  return (
    <svg className="pr-paper-graph" viewBox="0 0 220 80" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      {/* pipe outer walls (aluminium) */}
      <rect x="86" y="4" width="48" height="72" rx="3" fill="currentColor" opacity="0.14" stroke="currentColor" strokeWidth="0.7" strokeOpacity="0.5" />
      {/* pipe inner cavity */}
      <rect x="98" y="4" width="24" height="72" fill="var(--card-bg)" stroke="currentColor" strokeWidth="0.5" strokeDasharray="2 3" strokeOpacity="0.55" />
      {/* eddy current loops above + below the magnet */}
      <ellipse cx="110" cy="22" rx="22" ry="3" fill="none" stroke="var(--accent)" strokeWidth="1.3" opacity="0.85" />
      <ellipse cx="110" cy="58" rx="22" ry="3" fill="none" stroke="var(--accent)" strokeWidth="1.3" opacity="0.85" />
      <ellipse cx="110" cy="14" rx="15" ry="2" fill="none" stroke="var(--accent)" strokeWidth="0.9" opacity="0.45" />
      <ellipse cx="110" cy="66" rx="15" ry="2" fill="none" stroke="var(--accent)" strokeWidth="0.9" opacity="0.45" />
      {/* magnet (centered) */}
      <rect x="103" y="32" width="14" height="18" rx="1" fill="#0b0c11" />
      <rect x="103" y="32" width="14" height="9" fill="var(--accent)" />
      <text x="110" y="39" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6" fontWeight="700" fill="#fff">N</text>
      <text x="110" y="48" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6" fontWeight="700" fill="#fff">S</text>
      {/* gravity arrow */}
      <line x1="152" y1="33" x2="152" y2="49" stroke="currentColor" strokeWidth="1.2" opacity="0.55" />
      <path d="M 148 46 L 152 50 L 156 46" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" opacity="0.55" />
      <text x="160" y="44" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="currentColor" opacity="0.55">g</text>
      {/* eddy label */}
      <text x="66" y="24" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1" fill="var(--accent)" opacity="0.7">EDDY</text>
      <text x="66" y="34" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1" fill="var(--accent)" opacity="0.7">CURRENT</text>
    </svg>
  );
}

// Research-paper preview tile — rendered inside the experience row when an
// entry has a `page:` (i.e. a built walkthrough). The whole tile is an <a>
// linking to the walkthrough. Visual: a small "document" card with the
// closed-form equation header, a sparkline of diffusion curves, and a footer
// stat. The tile is themed via .pr-paper styles shared with the rest of the
// site — the only new wrapper is .exp-paper-link for hover/anchor behaviour.
function ResearchPaperTile({ e }) {
  const p = e.paper || {};
  // The .pr-paper card IS the anchor (no wrapping div) so the entire tile
  // surface routes clicks directly to the walkthrough.
  return (
    <a className="pr-paper exp-paper-link" href={e.page}>
      <div className="pr-paper-head">
        <span className="pr-paper-dot" />
        <span>DOCUMENT · {p.doc || "PAPER"}</span>
        <span className="pr-paper-pages">{p.pages || ""}</span>
      </div>
      <div className="pr-paper-title">{p.title || e.title}</div>
      <div className="pr-paper-eq" dangerouslySetInnerHTML={{
        __html: p.eq || "—"
      }} />
      {p.kind === "physics" ? <PhysicsSparkline /> :
       p.kind === "chem" ? <ChemSparkline /> :
       p.kind === "airfoil" ? <AirfoilSparkline /> :
       <DiffusionSparkline />}
      <div className="pr-paper-foot">
        <span>R² = {p.r2 || "—"}</span>
        <span className="exp-paper-cta">Open walkthrough →</span>
      </div>
    </a>
  );
}

function ExperienceSection() {
  const [filter, setFilter] = React.useState(() => {
    try { return localStorage.getItem("expFilter") || "All"; } catch { return "All"; }
  });
  React.useEffect(() => {
    try { localStorage.setItem("expFilter", filter); } catch {}
  }, [filter]);

  const counts = React.useMemo(() => {
    const c = { All: EXPERIENCES.length, Work: 0, Volunteer: 0, Research: 0 };
    EXPERIENCES.forEach((e) => { c[e.type] = (c[e.type] || 0) + 1; });
    return c;
  }, []);

  const rows = filter === "All"
    ? [...EXPERIENCES].reverse()
    : EXPERIENCES.filter((e) => e.type === filter).reverse();

  return (
    <section className="section experience" id="experience" data-screen-label="Experience">
      <div className="section-head">
        <div>
          <div className="section-num">02 / EXPERIENCE</div>
          <h2 className="section-title">Pit stops &amp; pace notes.</h2>
        </div>
        <div className="section-sub">
          Roles, research, and community work — filter by track.
        </div>
      </div>

      <div className="exp-filters" role="tablist">
        {EXP_TYPES.map((t) => (
          <button
            key={t}
            role="tab"
            aria-selected={filter === t}
            className={filter === t ? "active" : ""}
            onClick={() => setFilter(t)}
          >
            {t}
            <span className="count">{counts[t]}</span>
          </button>
        ))}
      </div>

      <div className="exp-list">
        {rows.map((e, i) => (
          <article className="exp-row" key={`${e.title}-${i}`}>
            <div>
              <div className="exp-when">{e.duration}</div>
              <span className={`exp-type t-${e.type}`}>{e.type}</span>
            </div>
            <div>
              <h3 className="exp-title">{e.title}</h3>
              <div className="exp-company">{e.company}</div>
              <div className="exp-desc">
                <ul>
                  {e.bullets.map((b, j) => (
                    <li key={j}>
                      <strong>{b[0]}</strong>{b[1]}
                    </li>
                  ))}
                </ul>
                {e.pdf && (
                  <a className="exp-pdf" href={e.pdf} target="_blank" rel="noopener noreferrer">
                    View research PDF →
                  </a>
                )}
                {e.page && e.paper && <ResearchPaperTile e={e} />}
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

window.ExperienceSection = ExperienceSection;
