// dthas landing — selected work as a playful "runner track". Four project
// checkpoints (each a relevant monoline icon) float above a ground line; click
// one and the dino runs over and hops up to it, revealing that project's detail.
// Auto-advances, pauses on hover. Full detail lives on work.html.

// Thin, monochrome, sharp-cornered icons — one per project.
const SW_ICONS = {
  // crypto trading bot → candlesticks
  trading: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter">
      <line x1="8" y1="3" x2="8" y2="21" /><rect x="5.5" y="7" width="5" height="8" />
      <line x1="16" y1="6" x2="16" y2="20" /><rect x="13.5" y="10.5" width="5" height="6" />
    </svg>
  ),
  // identity / login → key
  key: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter">
      <circle cx="8" cy="8" r="4" /><line x1="10.8" y1="10.8" x2="20" y2="20" /><line x1="17.5" y1="17.5" x2="20" y2="14.8" />
    </svg>
  ),
  // deployment platform → stacked servers
  servers: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter">
      <rect x="4" y="5" width="16" height="6" /><rect x="4" y="13" width="16" height="6" />
      <circle cx="7.5" cy="8" r="0.7" fill="currentColor" stroke="none" /><circle cx="7.5" cy="16" r="0.7" fill="currentColor" stroke="none" />
    </svg>
  ),
  // lecture scheduling → calendar
  calendar: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" strokeLinejoin="miter">
      <rect x="4" y="6" width="16" height="14" /><line x1="4" y1="10" x2="20" y2="10" />
      <line x1="9" y1="4" x2="9" y2="7" /><line x1="15" y1="4" x2="15" y2="7" />
    </svg>
  ),
};

function RunnerDino() {
  return (
    <svg className="dino" viewBox="0 0 48 48" fill="currentColor"
      style={{ color: 'var(--c-black)', width: 'clamp(32px, 4.2vw, 44px)' }}>
      <rect x="0" y="24" width="12" height="6" />
      <rect x="8" y="14" width="22" height="18" />
      <rect x="26" y="4" width="16" height="16" />
      <rect x="40" y="10" width="8" height="7" />
      <rect x="24" y="22" width="6" height="5" />
      <rect x="33" y="8" width="3" height="3" fill="#fff" />
      <rect className="leg leg-a" x="12" y="32" width="6" height="16" />
      <rect className="leg leg-b" x="20" y="32" width="6" height="16" />
    </svg>
  );
}

function SelectedWork() {
  const { Section, SectionHead } = window;

  const work = [
    { index: '01', title: 'KapiPalpiBot', meta: 'Full-stack · Trading', icon: 'trading',
      blurb: 'An automated crypto trading bot routing three independent signal sources through one central risk gate, running 24/7 on Oracle Cloud.' },
    { index: '02', title: 'Identity & login framework', meta: 'Security · Back-end', icon: 'key',
      blurb: 'A generic authentication broker connecting applications to Dutch and European eID schemes over SAML and OAuth 2.0.' },
    { index: '03', title: 'Software deployment platform', meta: 'DevOps · Tooling', icon: 'servers',
      blurb: 'Versioned software rollout and management across hardware, with a Django back end and an Angular control surface.' },
    { index: '04', title: 'Lecture scheduling platform', meta: 'Back-end · Microservices', icon: 'calendar',
      blurb: 'A pandemic-era scheduler on a Spring Boot microservice stack, hardened with unit and mutation testing.' },
  ];

  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setActive((a) => (a + 1) % work.length), 3600);
    return () => clearInterval(id);
  }, [paused, work.length]);

  const pct = (i) => 9 + i * (82 / (work.length - 1)); // evenly spread 9%…91%
  const cur = work[active];

  return (
    <Section id="work">
      <SectionHead
        eyebrow="Selected work"
        title="Shipped, in production."
        intro="A sample of delivered engagements. Some clients are confidential; the work is real."
      />

      <div
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{ marginTop: 'clamp(24px, 4vh, 48px)' }}
      >
        {/* ---- active project detail ---- */}
        <div style={{ minHeight: 'clamp(150px, 20vw, 188px)' }}>
          <div key={active} className="sw-fade">
            <div style={{ display: 'flex', alignItems: 'baseline', gap: '16px', flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-mono)', letterSpacing: 'var(--ls-mono)', color: 'var(--text-secondary)' }}>{cur.index}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-mono)', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>{cur.meta}</span>
            </div>
            <h3 style={{
              margin: '14px 0 0', fontWeight: 400,
              fontSize: 'clamp(1.75rem, 4vw, 3rem)', lineHeight: 1.05, letterSpacing: '-0.03em',
            }}>{cur.title}</h3>
            <p style={{
              margin: '16px 0 0', maxWidth: '62ch',
              fontSize: 'var(--fs-lead)', lineHeight: 1.5, letterSpacing: '-0.01em',
              color: 'var(--text-secondary)',
            }}>{cur.blurb}</p>
            <a href="work.html" className="ds-ulink" style={{
              display: 'inline-flex', alignItems: 'center', gap: '10px', marginTop: '20px',
              fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-mono)', letterSpacing: 'var(--ls-mono)',
              textTransform: 'uppercase', color: 'var(--text-primary)',
            }}>View on the Work page <span aria-hidden="true">→</span></a>
          </div>
        </div>

        {/* ---- runner track ---- */}
        <div style={{ position: 'relative', height: 'clamp(150px, 19vw, 176px)', marginTop: 'clamp(8px, 2vh, 20px)' }}>
          <div style={{ position: 'absolute', left: '3%', right: '3%', bottom: '40px', height: '1px', background: 'var(--border-hairline)' }} />

          {/* checkpoints (stem + icon tile + label) */}
          {work.map((w, i) => {
            const on = i === active;
            return (
              <React.Fragment key={w.index}>
                {/* stem down to the ground */}
                <div style={{
                  position: 'absolute', left: pct(i) + '%', bottom: '40px', width: '1px', height: '34px',
                  transform: 'translateX(-50%)',
                  background: on ? 'var(--c-black)' : 'var(--border-hairline)',
                  transition: 'background var(--dur-base) var(--ease-out)',
                }} />
                {/* clickable icon tile */}
                <button
                  type="button"
                  aria-label={w.title}
                  aria-current={on ? 'true' : undefined}
                  onClick={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  style={{
                    position: 'absolute', left: pct(i) + '%', bottom: '74px', transform: 'translateX(-50%)',
                    width: 'clamp(48px, 6.5vw, 62px)', height: 'clamp(48px, 6.5vw, 62px)', padding: 'clamp(11px, 1.6vw, 15px)',
                    cursor: 'pointer', borderRadius: 0, border: '1px solid',
                    borderColor: on ? 'var(--c-black)' : 'var(--border-hairline)',
                    background: on ? 'var(--c-black)' : 'var(--c-white)',
                    color: on ? 'var(--c-white)' : 'var(--text-primary)',
                    transition: 'background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)',
                  }}
                  onMouseEnter={(e) => { if (!on) e.currentTarget.style.borderColor = 'var(--c-black)'; }}
                  onMouseLeave={(e) => { if (!on) e.currentTarget.style.borderColor = 'var(--border-hairline)'; }}
                >{SW_ICONS[w.icon]}</button>
                {/* index label below the ground */}
                <span style={{
                  position: 'absolute', left: pct(i) + '%', bottom: '14px', transform: 'translateX(-50%)',
                  fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)', letterSpacing: 'var(--ls-mono)',
                  color: on ? 'var(--text-primary)' : 'var(--text-faint)',
                  transition: 'color var(--dur-base) var(--ease-out)',
                }}>{w.index}</span>
              </React.Fragment>
            );
          })}

          {/* dino runs along the ground to the active checkpoint and hops up to it */}
          <div style={{
            position: 'absolute', bottom: '41px', left: pct(active) + '%',
            transform: 'translateX(-50%)', transition: 'left .7s var(--ease-out)',
          }}>
            <div key={active} className="sw-hop"><RunnerDino /></div>
          </div>

          {/* hint */}
          <div style={{
            position: 'absolute', right: '3%', top: 0,
            fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-overline)',
            letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-faint)',
          }}>Click a checkpoint</div>
        </div>
      </div>

      <a href="work.html" className="ds-ulink" style={{
        display: 'inline-flex', alignItems: 'center', gap: '10px',
        marginTop: 'clamp(24px, 4vh, 40px)',
        fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-mono)',
        letterSpacing: 'var(--ls-mono)', textTransform: 'uppercase', color: 'var(--text-primary)',
      }}>All selected work <span aria-hidden="true">→</span></a>
    </Section>
  );
}

Object.assign(window, { SelectedWork });