// Home page body — hero with stats, three highlights, markets teaser, games
// teaser. The full GrimVehicle deep-dive lives on /plugins/grimvehicle/.

function HomePage() {
  const { colors, mono, caps, links } = window.GFX_TOKENS;
  const { Layout, Placeholder, Reveal } = window.GFX_COMPONENTS;
  const { GV_STATS, GV_HIGHLIGHTS, GV_MARKETS, GAMES } = window.GFX_CONTENT;

  return (
    <Layout>
      {/* === Hero ============================================================ */}
      <section style={{ position: 'relative', borderBottom: `1px solid ${colors.lineSoft}`, overflow: 'hidden' }}>
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          backgroundImage: `linear-gradient(${colors.lineSoft} 1px, transparent 1px), linear-gradient(90deg, ${colors.lineSoft} 1px, transparent 1px)`,
          backgroundSize: '64px 64px',
          maskImage: 'radial-gradient(70% 60% at 50% 40%, black, transparent 80%)',
        }} />
        <div aria-hidden style={{
          position: 'absolute', left: '60%', top: '-10%', width: 800, height: 800,
          background: `radial-gradient(circle, ${colors.ember}33, transparent 60%)`,
          filter: 'blur(20px)',
        }} />

        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '96px 32px 120px' }}>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
              <span style={{ width: 32, height: 1, background: colors.ember }} />
              <span style={{ ...mono, color: colors.ember, fontSize: 11 }}>SIM-GRADE TOOLS · UNREAL ENGINE</span>
            </div>
            <h1 style={{
              fontFamily: "'Space Grotesk', system-ui",
              fontWeight: 600, fontSize: 96, lineHeight: 0.96,
              margin: 0, letterSpacing: '-0.03em', maxWidth: 1100,
            }}>
              Vehicle simulation,<br />
              <span style={{
                background: `linear-gradient(180deg, ${colors.ember} 0%, ${colors.ember2} 100%)`,
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
              }}>forged</span> for Unreal.
            </h1>
            <p style={{ marginTop: 32, fontSize: 20, lineHeight: 1.5, color: colors.dim, maxWidth: 620 }}>
              Grimfox Games builds production-grade plugins and original titles. <span style={{ color: colors.text }}>GrimVehicle</span> is our first plugin — a comprehensive vehicle simulation framework that goes deeper than anything on the market.
            </p>
            <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href="plugins/grimvehicle/" style={{
                ...caps, fontSize: 12, color: colors.ink, background: colors.ember,
                padding: '16px 22px', textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 10,
                boxShadow: `0 12px 30px rgba(255,122,53,0.25), inset 0 1px 0 rgba(255,255,255,0.2)`,
              }}>Explore GrimVehicle <span style={{ fontSize: 14 }}>→</span></a>
              <a href={links.fab} target="_blank" rel="noreferrer" style={{
                ...caps, fontSize: 12, color: colors.ember,
                padding: '16px 22px', textDecoration: 'none',
                border: `1px solid ${colors.ember}`,
                background: 'rgba(255,122,53,0.06)',
                display: 'inline-flex', alignItems: 'center', gap: 10,
              }}>Get GrimVehicle on Fab <span style={{ fontSize: 14 }}>↗</span></a>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div style={{
              marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
              borderTop: `1px solid ${colors.lineSoft}`, borderBottom: `1px solid ${colors.lineSoft}`,
            }}>
              {GV_STATS.map((s, i) => (
                <div key={i} style={{
                  padding: '20px 24px',
                  borderRight: i < GV_STATS.length - 1 ? `1px solid ${colors.lineSoft}` : 'none',
                }}>
                  <div style={{ ...mono, fontSize: 10, marginBottom: 8 }}>{`0${i+1}`} · {s.l}</div>
                  <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em' }}>{s.v}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* === Highlights ===================================================== */}
      <section style={{ borderBottom: `1px solid ${colors.lineSoft}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
          <Reveal>
            <div style={{ ...mono, color: colors.ember, marginBottom: 16 }}>// WHAT MAKES IT DIFFERENT</div>
            <h2 style={{ fontSize: 48, fontWeight: 500, letterSpacing: '-0.02em', margin: 0, maxWidth: 820 }}>
              The engineering decisions behind GrimVehicle.
            </h2>
          </Reveal>
          <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${colors.lineSoft}` }}>
            {GV_HIGHLIGHTS.map((h, i) => (
              <Reveal key={i} delay={i * 80} style={{
                padding: '36px 32px',
                borderRight: i < GV_HIGHLIGHTS.length - 1 ? `1px solid ${colors.lineSoft}` : 'none',
              }}>
                <div style={{ ...mono, color: colors.ember, fontSize: 10, marginBottom: 16 }}>0{i+1} / HIGHLIGHT</div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 12 }}>{h.h}</div>
                <div style={{ fontSize: 14, color: colors.dim, lineHeight: 1.6 }}>{h.d}</div>
              </Reveal>
            ))}
          </div>
          <div style={{ marginTop: 32, display: 'flex', justifyContent: 'flex-end' }}>
            <a href="plugins/grimvehicle/" style={{ ...caps, fontSize: 11, color: colors.ember, textDecoration: 'none' }}>
              See the full plugin →
            </a>
          </div>
        </div>
      </section>

      {/* === Markets teaser ================================================= */}
      <section style={{ borderBottom: `1px solid ${colors.lineSoft}`, background: colors.surface }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 48 }}>
              <div>
                <div style={{ ...mono, color: colors.ember, marginBottom: 16 }}>// BUILT FOR</div>
                <h2 style={{ fontSize: 48, fontWeight: 500, letterSpacing: '-0.02em', margin: 0, maxWidth: 760 }}>
                  Six markets. One plugin. No compromises.
                </h2>
              </div>
              <a href="plugins/grimvehicle/" style={{ ...caps, fontSize: 11, color: colors.ember, textDecoration: 'none' }}>
                See every market →
              </a>
            </div>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', border: `1px solid ${colors.lineSoft}` }}>
            {GV_MARKETS.map((m, i) => (
              <Reveal key={i} delay={i * 50} style={{
                padding: '28px 22px',
                borderRight: i < GV_MARKETS.length - 1 ? `1px solid ${colors.lineSoft}` : 'none',
              }}>
                <div style={{ ...mono, color: colors.ember, fontSize: 10, marginBottom: 12 }}>{m.code}</div>
                <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.005em' }}>{m.name}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* === Games teaser =================================================== */}
      <section style={{ borderBottom: `1px solid ${colors.lineSoft}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 48 }}>
              <div>
                <div style={{ ...mono, color: colors.ember, marginBottom: 16 }}>// IN THE WORKSHOP</div>
                <h2 style={{ fontSize: 48, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>Original titles, in development.</h2>
              </div>
              <a href="games/" style={{ ...caps, fontSize: 11, color: colors.ember, textDecoration: 'none' }}>
                All projects →
              </a>
            </div>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {GAMES.map((g, i) => (
              <Reveal key={i} delay={i * 80} style={{ border: `1px solid ${colors.lineSoft}`, background: colors.surface2 }}>
                <a href={`games/${g.slug}/`} style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}>
                  <Placeholder label={g.code} height={200} tone={i === 0 ? 'warm' : 'cool'} />
                  <div style={{ padding: 24 }}>
                    <div style={{ ...mono, fontSize: 10, marginBottom: 10 }}>{g.code} · {g.year}</div>
                    <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 8 }}>{g.title}</div>
                    <div style={{ fontSize: 13, color: colors.dim, marginBottom: 14 }}>{g.note}</div>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, ...mono, color: colors.ember, fontSize: 10 }}>
                      <span style={{ width: 6, height: 6, background: colors.ember, borderRadius: '50%' }} />
                      {g.status}
                    </div>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </Layout>
  );
}

window.GFX_PAGES = window.GFX_PAGES || {};
window.GFX_PAGES.HomePage = HomePage;