/* DUNNGAMES — "Minimal" site, part 1: shared primitives + Nav, Hero, Our Games.
   Clean white/near-black, single blue accent, soft glow, rounded cards.
   Exports to window.MIN. */

const A = 'assets';

/* ---------- shared primitives ---------- */
function Pill({ children, variant = 'light', size = 'md', arrow, onClick, href, target, rel, style }) {
  const pads = size === 'lg' ? '15px 26px' : size === 'sm' ? '9px 16px' : '13px 22px';
  const fs = size === 'lg' ? '17px' : size === 'sm' ? '13.5px' : '15px';
  const map = {
    light: { background: 'var(--m-pill)', color: 'var(--m-pill-ink)', border: '1px solid var(--m-line)' },
    dark:  { background: 'var(--m-pill-dark)', color: 'var(--m-pill-dark-ink)', border: '1px solid transparent' },
    accent:{ background: 'var(--m-accent)', color: 'var(--m-accent-ink)', border: '1px solid transparent' },
    ghost: { background: 'transparent', color: 'var(--m-ink)', border: '1px solid var(--m-line)' },
  };
  const [h, setH] = React.useState(false);
  const Tag = href ? 'a' : 'button';
  return (
    <Tag href={href} target={target} rel={rel} onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: '10px', padding: pads, textDecoration: 'none',
        fontFamily: 'var(--m-font-body)', fontWeight: 700, fontSize: fs, cursor: 'pointer',
        borderRadius: 'var(--m-r-pill)', letterSpacing: '-0.01em', whiteSpace: 'nowrap',
        boxShadow: variant === 'ghost' ? 'none' : 'var(--m-shadow-pill)',
        transform: h ? 'translateY(-1px)' : 'none', transition: 'transform .18s ease, box-shadow .18s ease',
        ...map[variant], ...style,
      }}>
      {children}
      {arrow && <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center', opacity: 0.9, transform: h ? 'translateX(2px)' : 'none', transition: 'transform .18s ease' }}>
        <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14"></path><path d="M13 5l7 7-7 7"></path>
        </svg>
      </span>}
    </Tag>
  );
}

function Label({ children }) {
  return (
    <div style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, fontSize: '15px',
      letterSpacing: '0.08em', color: 'var(--m-accent)', textTransform: 'uppercase' }}>
      {children}
    </div>
  );
}

function SectionHead({ label, title, sub, center }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', maxWidth: center ? '640px' : '760px', margin: center ? '0 auto' : 0 }}>
      <Label>{label}</Label>
      {title && <h2 style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, color: 'var(--m-ink)',
        fontSize: 'clamp(28px, 4vw, 46px)', lineHeight: 1.05, letterSpacing: '-0.02em', margin: '10px 0 0' }}>{title}</h2>}
      {sub && <p style={{ fontFamily: 'var(--m-font-body)', color: 'var(--m-ink-soft)', fontSize: '17px',
        lineHeight: 1.6, margin: '16px 0 0', marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>{sub}</p>}
    </div>
  );
}

function ThemeToggle({ theme, onToggle }) {
  const dark = theme === 'dark';
  return (
    <button onClick={onToggle} aria-label="toggle theme"
      style={{ position: 'relative', width: '62px', height: '32px', borderRadius: '999px', cursor: 'pointer',
        border: '1px solid var(--m-line)', background: 'var(--m-page-2)', padding: 0, flex: '0 0 auto' }}>
      <span style={{ position: 'absolute', top: '8px', left: '9px', display: 'flex', color: '#F5A623', opacity: dark ? 0.35 : 1 }}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.6 4.6l1.5 1.5M17.9 17.9l1.5 1.5M4.6 19.4l1.5-1.5M17.9 6.1l1.5-1.5"/></svg>
      </span>
      <span style={{ position: 'absolute', top: '8px', right: '9px', display: 'flex', color: dark ? '#fff' : 'var(--m-ink-faint)', opacity: dark ? 1 : 0.55 }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.9A9 9 0 1 1 11.1 3a7 7 0 1 0 9.9 9.9Z"/></svg>
      </span>
      <span style={{ position: 'absolute', top: '3px', left: dark ? '33px' : '3px', width: '26px', height: '26px',
        borderRadius: '50%', background: dark ? 'var(--m-accent)' : '#fff', boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
        transition: 'left .22s cubic-bezier(.4,0,.2,1)' }} />
    </button>
  );
}

/* ---------- NAV ---------- */
function Nav({ theme, onToggle }) {
  const [menu, setMenu] = React.useState(false);
  const links = [['Games', '#games'], ['Consulting', '#consulting'], ['For Brands', '#brands']];
  return (
    <nav style={{ position: 'sticky', top: 0, zIndex: 50, background: 'color-mix(in srgb, var(--m-page) 82%, transparent)',
      backdropFilter: 'saturate(1.4) blur(14px)', WebkitBackdropFilter: 'saturate(1.4) blur(14px)',
      borderBottom: '1px solid transparent' }}>
      <div className="min-nav-inner" style={{ maxWidth: 'var(--m-maxw)', margin: '0 auto', padding: '18px 28px', display: 'flex',
        alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '36px' }}>
          <button className="min-nav-burger" aria-label="menu" onClick={() => setMenu(m => !m)}
            style={{ display: 'none', alignItems: 'center', justifyContent: 'center', width: '40px', height: '40px',
              borderRadius: '12px', border: '1px solid var(--m-line)', background: 'var(--m-page-2)', color: 'var(--m-ink)',
              cursor: 'pointer', padding: 0, flex: '0 0 auto' }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
              {menu ? <React.Fragment><path d="M6 6l12 12"/><path d="M18 6L6 18"/></React.Fragment>
                    : <React.Fragment><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></React.Fragment>}
            </svg>
          </button>
          <a href="#home" style={{ display: 'inline-flex', alignItems: 'center' }}>
            <img src={A + '/logo-dunngames-short.png'} alt="Dunn Games" style={{ height: '30px', width: 'auto', display: 'block' }} />
          </a>
          <div className="min-nav-links" style={{ display: 'flex', alignItems: 'center', gap: '26px' }}>
            {links.map(([t, href]) => (
              <a key={href} href={href} style={{ fontFamily: 'var(--m-font-body)', fontWeight: 600, fontSize: '14px',
                color: 'var(--m-ink-soft)', textDecoration: 'none', letterSpacing: '0.01em', transition: 'color .2s ease' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--m-ink)'}
                onMouseLeave={e => e.currentTarget.style.color = 'var(--m-ink-soft)'}>{t}</a>
            ))}
          </div>
        </div>
        <div className="min-nav-cta" style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
          <ThemeToggle theme={theme} onToggle={onToggle} />
          <Pill href="/booking" variant="accent" size="sm" style={{ letterSpacing: '0.04em', textTransform: 'uppercase', fontSize: '13px', padding: '10px 20px' }}>Book a call</Pill>
        </div>
      </div>
      {/* mobile dropdown */}
      <div className="min-nav-drawer" style={{ display: 'none', overflow: 'hidden',
        maxHeight: menu ? '260px' : '0px', transition: 'max-height .3s ease',
        borderTop: menu ? '1px solid var(--m-line)' : '1px solid transparent', background: 'var(--m-page)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', padding: '8px 18px 16px' }}>
          {links.map(([t, href]) => (
            <a key={href} href={href} onClick={() => setMenu(false)}
              style={{ fontFamily: 'var(--m-font-body)', fontWeight: 600, fontSize: '16px', color: 'var(--m-ink)',
                textDecoration: 'none', padding: '13px 4px', borderBottom: '1px solid var(--m-line)' }}>{t}</a>
          ))}
        </div>
      </div>
    </nav>
  );
}

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section id="home" data-screen-label="Home" style={{ position: 'relative', background: 'var(--m-page)', overflow: 'hidden',
      minHeight: 'calc(100dvh - 69px)', display: 'flex', flexDirection: 'column' }}>
      {/* soft glow */}
      <div style={{ position: 'absolute', inset: 0, background: 'var(--m-glow)', pointerEvents: 'none' }} />
      <div className="min-hero-inner" style={{ position: 'relative', maxWidth: '1440px', width: '100%', margin: '0 auto', padding: '46px 40px 0',
        textAlign: 'center', flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* headline */}
        <h1 style={{ position: 'relative', zIndex: 1, fontFamily: 'var(--m-font-display)', fontWeight: 800, margin: 0,
          fontSize: 'clamp(30px, 4.6vw, 58px)', lineHeight: 1.04, letterSpacing: '-0.02em', textTransform: 'uppercase',
          backgroundImage: 'linear-gradient(96deg, #9BD8F6 0%, var(--m-accent) 60%)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', WebkitTextFillColor: 'transparent' }}>
          <span style={{ color: '#fff', WebkitTextFillColor: '#fff' }}>Sustainable games.</span><br />Winning culture.
        </h1>
        <p style={{ position: 'relative', zIndex: 1, fontFamily: 'var(--m-font-body)', color: 'var(--m-ink-soft)',
          fontSize: 'clamp(16px, 1.6vw, 19px)', lineHeight: 1.6, maxWidth: '600px', margin: '26px auto 0' }}>
          Made in New Orleans. Played globally. Dunn Games creates high-quality experiences built to last.
          Five years of shipping content has given us the insight and consistency to develop quickly and at a
          high standard.
        </p>
        {/* stats strip */}
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', alignItems: 'center', gap: 'clamp(18px, 3vw, 40px)',
          flexWrap: 'wrap', justifyContent: 'center', margin: '30px auto 0' }}>
          {[['1.5M+', 'Monthly players'], ['5 yrs', 'Shipping content'], ['2K+', 'Live players']].map(([n, l], k) => (
            <React.Fragment key={l}>
              {k > 0 && <span style={{ width: '1px', height: '26px', background: 'var(--m-line)' }} />}
              <div style={{ textAlign: 'center' }}>
                <div className="min-hero-statn" style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, color: '#fff', fontSize: 'clamp(18px, 2vw, 24px)', lineHeight: 1, textShadow: '0 1px 8px rgba(0,0,0,0.35)' }}>{n}</div>
                <div className="min-hero-statl" style={{ fontFamily: 'var(--m-font-body)', color: 'rgba(255,255,255,0.9)', fontSize: '12.5px', marginTop: '5px', letterSpacing: '0.01em', textShadow: '0 1px 6px rgba(0,0,0,0.4)' }}>{l}</div>
              </div>
            </React.Fragment>
          ))}
        </div>
        {/* spacer — reserves height so CTAs sit low over the images */}
        <div aria-hidden="true" className="min-hero-spacer" style={{ marginTop: 'auto', height: 'min(46vh, 520px)' }} />
        {/* hero image — pre-composited tractor + office (fades baked in), full-bleed */}
        <div className="min-hero-imgs" style={{ position: 'absolute', left: '50%', marginLeft: '-50vw', width: '100vw', top: 0, bottom: 0, zIndex: 0, pointerEvents: 'none' }}>
          <img src={A + '/hero-composite.jpg'} alt="Farming and Friends and the Dunn Games team" fetchpriority="high"
            style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center bottom' }} />
          {/* top fade so the image blends into the nav */}
          <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '150px', background: 'linear-gradient(to bottom, var(--m-page) 0%, transparent 100%)' }} />
          {/* bottom fade so the image blends into the page */}
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '180px', background: 'linear-gradient(to top, var(--m-page) 0%, transparent 100%)' }} />
        </div>
        {/* CTAs overlapping the fade */}
        <div className="min-hero-ctas" style={{ position: 'absolute', left: '50%', bottom: 'clamp(150px, 26vh, 300px)', transform: 'translateX(-50%)',
          display: 'flex', gap: '14px', flexWrap: 'wrap', justifyContent: 'center', zIndex: 3 }}>
          <Pill href="#games" variant="light" size="lg" arrow>See our games</Pill>
          <Pill href="#consulting" variant="dark" size="lg">Work with us</Pill>
        </div>
      </div>
    </section>
  );
}

/* ---------- OUR GAMES ---------- */
const FAF = [A + '/games/faf-1.jpg', A + '/games/faf-2.jpg', A + '/games/faf-3.jpg', A + '/games/faf-4.jpg', A + '/games/faf-5.jpg'];

const GAME_LINKS = {
  faf: 'https://www.roblox.com/games/2772610559/Farming-and-Friends',
  bowWars: 'https://www.roblox.com/games/8494297421/Bow-Wars',
};

const fmtStat = (n) => n >= 1e6 ? Math.floor(n / 1e6) + 'M+' : n >= 1e3 ? Math.floor(n / 1e3) + 'K+' : String(n || 0);

function Flagship() {
  const [i, setI] = React.useState(0);
  const [stats, setStats] = React.useState(null);
  React.useEffect(() => {
    const t = setInterval(() => setI(v => (v + 1) % FAF.length), 4200);
    return () => clearInterval(t);
  }, []);
  // live Roblox stats — refresh every 20s (server caches + proxies)
  React.useEffect(() => {
    let alive = true;
    const load = () => fetch('/api/stats').then((r) => r.json())
      .then((d) => { if (alive && d && !d.error) setStats(d); }).catch(() => {});
    load();
    const t = setInterval(load, 20000);
    return () => { alive = false; clearInterval(t); };
  }, []);
  const statItems = stats
    ? [[fmtStat(stats.plays), 'Plays'], [fmtStat(stats.favorites), 'Favorites'], [(stats.rating != null ? stats.rating + '%' : '—'), 'Rating']]
    : [['12M+', 'Plays'], ['220K+', 'Favorites'], ['92%', 'Rating']];
  const open = () => window.open(GAME_LINKS.faf, '_blank', 'noopener,noreferrer');
  return (
    <div data-reveal role="link" tabIndex={0} aria-label="Farming & Friends on Roblox"
      onClick={open} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } }}
      style={{ position: 'relative', borderRadius: 'var(--m-r-card)', overflow: 'hidden', cursor: 'pointer',
      minHeight: '540px', boxShadow: 'var(--m-shadow-card)', background: '#0b0b0b' }}>
      {FAF.map((s, k) => (
        <div key={k} style={{ position: 'absolute', inset: 0, backgroundImage: `url(${s})`, backgroundSize: 'cover',
          backgroundPosition: 'center', opacity: k === i ? 1 : 0, transition: 'opacity 1s ease' }} />
      ))}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(4,8,14,0.9) 0%, rgba(4,8,14,0.55) 42%, rgba(4,8,14,0) 72%)' }} />
      <div style={{ position: 'relative', padding: 'clamp(28px, 4vw, 46px)', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', minHeight: '540px' }}>
        <h3 style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, color: '#fff', fontSize: 'clamp(30px, 4vw, 46px)',
          margin: 0, letterSpacing: '-0.02em' }}>FARMING &amp; FRIENDS</h3>
        <p style={{ fontFamily: 'var(--m-font-body)', color: 'rgba(255,255,255,0.82)', fontSize: '15.5px', lineHeight: 1.55,
          maxWidth: '460px', margin: '14px 0 0' }}>
          Our flagship title, Farming and Friends, allows players to grow crops, raise animals, and build their
          dream farm with others. With vehicles, factories, and a suite of social features, there isn't another
          experience like it!
        </p>
        <div style={{ display: 'flex', gap: '38px', margin: '26px 0 24px' }}>
          {statItems.map(([n, l]) => (
            <div key={l}>
              <div style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, color: '#fff', fontSize: 'clamp(24px, 3vw, 34px)', lineHeight: 1 }}>{n}</div>
              <div style={{ fontFamily: 'var(--m-font-body)', color: 'rgba(255,255,255,0.7)', fontSize: '13px', marginTop: '6px' }}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '18px', flexWrap: 'wrap' }}>
          <Pill variant="light" href={GAME_LINKS.faf} target="_blank" rel="noopener noreferrer"
            onClick={(e) => e.stopPropagation()}>
            <svg width="15" height="15" viewBox="0 0 32 32" style={{ display: 'block' }}>
              <path fill="currentColor" fillRule="evenodd" d="M6.6 2 L30 8.4 L25.4 30 L2 23.6 Z M13 12.3 L11.7 18.6 L18 19.9 L19.3 13.6 Z" />
            </svg>
            Play on Roblox
          </Pill>
          <div style={{ display: 'flex', gap: '8px' }}>
            {FAF.map((_, k) => (
              <button key={k} onClick={(e) => { e.stopPropagation(); setI(k); }} aria-label={'shot ' + (k + 1)}
                style={{ width: k === i ? '26px' : '10px', height: '10px', borderRadius: '999px', border: 'none', cursor: 'pointer',
                  background: k === i ? '#fff' : 'rgba(255,255,255,0.45)', transition: 'width .25s ease, background .25s ease' }} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function GameMiniCard({ logo, thumb, accent, name, char, href }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href || '#games'} target={href ? '_blank' : undefined} rel={href ? 'noopener noreferrer' : undefined}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: 'relative', flex: 1, minHeight: '160px', borderRadius: 'var(--m-r-tile)', overflow: 'hidden',
        display: 'block', textDecoration: 'none', boxShadow: 'var(--m-shadow-card)',
        background: thumb ? '#0b0b0b' : 'var(--m-card-soft)',
        transform: hover ? 'translateY(-3px)' : 'none', transition: 'transform 0.25s ease' }}>
      {thumb
        ? <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${thumb})`, backgroundSize: 'cover',
            backgroundPosition: 'center', transform: hover ? 'scale(1.05)' : 'scale(1)', transition: 'transform 0.5s ease' }} />
        : <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(120% 100% at 50% 0%, ${accent}2e 0%, transparent 60%)` }} />}
      <div style={{ position: 'absolute', inset: 0, background: thumb
        ? 'linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.35) 100%)'
        : 'linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)' }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '18px' }}>
        <img src={logo} alt={name} style={{ maxWidth: char ? '82%' : '66%', maxHeight: char ? '92%' : '56%', objectFit: 'contain',
          objectPosition: char ? 'bottom' : 'center', alignSelf: char ? 'flex-end' : 'center',
          filter: 'drop-shadow(0 4px 14px rgba(0,0,0,0.5))', transform: hover ? 'scale(1.04)' : 'scale(1)', transition: 'transform 0.3s ease' }} />
      </div>
      <div style={{ position: 'absolute', left: '16px', bottom: '14px', right: '16px' }}>
        <span style={{ fontFamily: 'var(--m-font-body)', fontSize: '14px', fontWeight: 700, color: '#fff' }}>{name}</span>
      </div>
    </a>
  );
}

function ComingSoonCard({ img, name }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: 'relative', flex: 1, minHeight: '160px', borderRadius: 'var(--m-r-tile)', overflow: 'hidden',
        display: 'block', boxShadow: 'var(--m-shadow-card)', background: '#0b0b0b',
        transform: hover ? 'translateY(-3px)' : 'none', transition: 'transform 0.25s ease' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${img})`, backgroundSize: 'cover',
        backgroundPosition: 'center', transform: hover ? 'scale(1.05)' : 'scale(1)', transition: 'transform 0.5s ease' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.65) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,0.55) 0%, transparent 75%)' }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '8px', padding: '18px' }}>
        <span style={{ fontFamily: 'var(--m-font-body)', fontSize: '10px', fontWeight: 700, letterSpacing: '0.32em',
          textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>New title</span>
        <span style={{ fontFamily: 'var(--m-font-display)', fontWeight: 800, fontSize: 'clamp(28px, 3.2vw, 42px)',
          color: '#fff', letterSpacing: '-0.03em', textShadow: '0 6px 26px rgba(0,0,0,0.75)', textAlign: 'center', lineHeight: 0.95,
          textTransform: 'uppercase' }}>Coming<br />Soon</span>
        <span style={{ marginTop: '4px', width: '34px', height: '2px', borderRadius: '2px', background: 'var(--m-accent, #2f6bff)' }} />
      </div>
    </div>
  );
}

function Games() {
  return (
    <section id="games" data-screen-label="Games" style={{ background: 'var(--m-page)', padding: 'clamp(70px, 9vw, 120px) 0' }}>
      <div style={{ maxWidth: 'var(--m-maxw)', margin: '0 auto', padding: '0 28px' }}>
        <div data-reveal style={{ marginBottom: '40px' }}>
          <SectionHead label="Our games" title="Built to be played for years" sub="We don't chase trends. We don't chase short term gains. Our developers work on products they are proud to support, improve, and grow for years." />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.9fr 1fr', gap: '20px', alignItems: 'stretch' }}>
          <Flagship />
          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <GameMiniCard logo={A + '/games/bow-wars-s.png'} thumb={A + '/games/bow-wars-thumb.jpg'} accent="#37B6FF" name="Bow Wars" href={GAME_LINKS.bowWars} />
            <ComingSoonCard img={A + '/games/coming-soon-concept.png'} name="Coming Soon" />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window.MIN = window.MIN || {}, { Pill, Label, SectionHead, ThemeToggle, Nav, Hero, Games });