/* Hero variations — swap via Tweaks.
   A · Editorial masthead (big name, no schematic, clean 2-col with indexed research areas)
   B · Lab ticker (terminal-style marquee + name, no diagram)
   C · Index card (Swiss archive record, grid of pills + dense meta)
   D · Dual column monolith (name crosses full width, meta grid below)
*/

const { PROFILE } = window.PORTFOLIO_DATA;

const RESEARCH = [
{ idx: 'R.01', k: 'High speed lithography and nanofabrication', s: 'Optical data storage in fused silica' },
{ idx: 'R.02', k: 'Ultra-fast laser systems', s: 'Bragg gratings in hollow-core fibers' },
{ idx: 'R.03', k: 'Quantum optics', s: 'DAVLL laser frequency stabilization' },
{ idx: 'R.04', k: 'Materials characterization and metrology systems', s: 'DAVLL laser frequency stabilization' }];


/* -------- A · Editorial masthead ------------------------------------ */
const HeroA = () =>
<section className="hero hero-a" data-screen-label="Hero">
    <div className="page">
      <div className="hero-a-eyebrow mono up">
        <span className="tick">●</span>
        <span>Portfolio · 2026 — 27</span>
        <span className="sep">/</span>
        <span>Waterloo, ON → Boston, MA</span>
      </div>

      <h1 className="hero-a-name">
        Xander Linzel.<br />
        <em>Nanotechnology</em> undergraduate<br />student.
      </h1>

      <p className="hero-a-sub">
        Specializing in photonics, femtosecond-laser systems, and
        nanofabrication research at the University of Waterloo.
      </p>

      <div className="hero-a-bottom">
        <div className="hero-a-research">
          <div className="hero-a-research-head mono up">Research focus</div>
          <ul>
            {RESEARCH.map((r) =>
          <li key={r.idx}>
                <span className="idx mono">{r.idx}</span>
                <div>
                  <div className="k">{r.k}</div>
                  <div className="s">{r.s}</div>
                </div>
              </li>
          )}
          </ul>
        </div>
        <div className="hero-a-meta">
          <dl>
            <div><dt>Status</dt><dd>Jan — Aug 2027 work term</dd></div>
            <div><dt>Contact</dt><dd><a href="mailto:xlinzel@uwaterloo.ca">xlinzel@uwaterloo.ca</a></dd></div>
          </dl>
          <a className="hero-a-cv mono up" href="#work">Selected work ↓</a>
        </div>
      </div>
    </div>
  </section>;


/* -------- B · Lab ticker -------------------------------------------- */
const HeroB = () => {
  const ticker = [
  'photonics & quantum optics',
  'femtosecond laser systems',
  'nanofabrication',
  'photonic crystal fibers',
  'two-photon lithography',
  'optical design · Zemax · Lumerical',
  'spectroscopy · SEM · ellipsometry',
  'CAD · FEA · simulation',
  'Python · C++ · MATLAB',
  'electromechanical systems',
  'materials characterization',
  'ultrafast optics'];

  return (
    <section className="hero hero-b" data-screen-label="Hero">
      <div className="hero-b-ticker">
        <div className="hero-b-track">
          {[...ticker, ...ticker, ...ticker].map((t, i) =>
          <span key={i} className="mono up">◦ {t}</span>
          )}
        </div>
      </div>
      <div className="page hero-b-inner">
        <div className="hero-b-badge mono up">
          <span className="tick">●</span>
          Upcoming work term · Jan — Aug 2027
        </div>
        <h1 className="hero-b-name">
          Xander <em>Linzel</em>
        </h1>
        <div className="hero-b-role mono up">
          Nanotech · UWaterloo / Boston
        </div>
        <p className="hero-b-sub">
          Specializing in photonics, femtosecond laser systems, and
          nanofabrication research — currently working on femtosecond
          laser writing, photonic crystal fibers, and quantum optics.
        </p>
        <div className="hero-b-actions">
          <a href="#work" className="mono up">Selected work →</a>
          <a href="#experience" className="mono up">Work history →</a>
          <a href="mailto:xlinzel@uwaterloo.ca" className="mono up">Email</a>
        </div>
      </div>
    </section>);

};

/* -------- C · Index card -------------------------------------------- */
const HeroC = () => {
  const ticker = [
  'photonics & quantum optics',
  'femtosecond laser systems',
  'nanofabrication',
  'photonic crystal fibers',
  'two-photon lithography',
  'optical design · Zemax · Lumerical',
  'spectroscopy · SEM · ellipsometry',
  'CAD · FEA · simulation',
  'Python · C++ · MATLAB',
  'electromechanical systems',
  'materials characterization',
  'ultrafast optics'];

  return (
    <section className="hero hero-c" data-screen-label="Hero">
      <div className="hero-c-ticker">
        <div className="hero-c-track">
          {[...ticker, ...ticker, ...ticker].map((t, i) =>
          <span key={i} className="mono up">◦ {t}</span>
          )}
        </div>
      </div>
      <div className="page">
        <div className="hero-c-card">
          <header className="hero-c-head mono up">
            <span>Record · XL-001</span>
            <span>2026 / 04</span>
            <span>Waterloo → Boston</span>
          </header>

          <div className="hero-c-body">
            <div className="hero-c-left">
              <div className="hero-c-label mono up">Subject</div>
              <h1 className="hero-c-name">Xander Linzel</h1>
              <div className="hero-c-sub serif">
                Nanotechnology Engineering undergraduate<br />
                at the University of Waterloo.
              </div>
              <p className="hero-c-blurb">
                Specializing in photonics, femtosecond-laser systems,
                and nanofabrication research.
              </p>
              <div className="hero-c-academics">
                <div className="hero-c-stat">
                  <span className="hero-c-stat-k mono up">Average</span>
                  <span className="hero-c-stat-v serif">94.2<span className="pct">%</span></span>
                </div>
                <div className="hero-c-stat">
                  <span className="hero-c-stat-k mono up">GPA</span>
                  <span className="hero-c-stat-v serif">3.99<span className="pct">/4.0</span></span>
                </div>
                <div className="hero-c-stat">
                  <span className="hero-c-stat-k mono up">Class of</span>
                  <span className="hero-c-stat-v serif">2028</span>
                </div>
              </div>
            </div>
            <div className="hero-c-right">
              <div className="hero-c-label mono up">Fields of study</div>
              <ul className="hero-c-fields">
                {RESEARCH.map((r) =>
                <li key={r.idx}>
                    <span className="mono">{r.idx}</span>
                    <span className="serif">{r.k}</span>
                  </li>
                )}
              </ul>
              <div className="hero-c-label mono up" style={{ marginTop: 24 }}>Status</div>
              <div className="hero-c-status">
                <span className="dot" /> <span>Upcoming work term · Jan - Aug 2027</span>
              </div>
              <button
                type="button"
                className="hero-c-refs mono up hero-c-refs--block"
                onClick={() => window.dispatchEvent(new CustomEvent('open-references'))}
              >
                <span className="hero-c-refs-arrow" aria-hidden="true">→</span>
                Read employer references
                <span className="hero-c-refs-count">(3)</span>
              </button>
            </div>
          </div>

          <footer className="hero-c-foot mono up">
            <a href="mailto:xlinzel@uwaterloo.ca">xlinzel@uwaterloo.ca</a>
            <div className="hero-c-social">
              <a href="https://github.com/xlinzel" target="_blank" rel="noreferrer">github ↗</a>
              <a href="https://www.linkedin.com/in/xander-linzel" target="_blank" rel="noreferrer">linkedin ↗</a>
              <a href="https://www.researchgate.net/profile/Xander-Linzel" target="_blank" rel="noreferrer">researchgate ↗</a>
            </div>
            <a href="#work">↓ scroll</a>
          </footer>
        </div>
      </div>
    </section>);

};

/* -------- D · Monolith ---------------------------------------------- */
const HeroD = () =>
<section className="hero hero-d" data-screen-label="Hero">
    <div className="page">
      <div className="hero-d-top mono up">
        <span><span className="tick">●</span> Upcoming work term · Jan — Aug 2027</span>
        <span>Waterloo · Boston</span>
      </div>
      <h1 className="hero-d-name">
        <span>Xander</span>
        <span className="sep" aria-hidden>·</span>
        <span><em>Linzel</em></span>
      </h1>
      <div className="hero-d-role">
        Nanotechnology Engineering undergraduate<br />
        specializing in <em>photonics</em>, femtosecond laser<br />
        systems, and nanofabrication research.
      </div>
      <div className="hero-d-grid">
        {RESEARCH.map((r) =>
      <div key={r.idx} className="hero-d-cell">
            <div className="idx mono up">{r.idx}</div>
            <div className="k serif">{r.k}</div>
            <div className="s">{r.s}</div>
          </div>
      )}
        <div className="hero-d-cell hero-d-cta">
          <div className="idx mono up">Contact</div>
          <a className="serif" href="mailto:xlinzel@uwaterloo.ca">xlinzel@uwaterloo.ca</a>
          <div className="s">Referrals & introductions welcome</div>
        </div>
      </div>
    </div>
  </section>;


const HERO_VARIANTS = {
  editorial: HeroA,
  ticker: HeroB,
  index: HeroC,
  monolith: HeroD
};

window.HERO_VARIANTS = HERO_VARIANTS;