/* Gameing Index — homepage mockup (desktop + mobile)
   System: Antonio (display) / IBM Plex Sans (body) / IBM Plex Mono (eyebrow)
   Palette: void #05060A · graphite #11131B · gunmetal #1A1D27 · indigo #3D4BFF · violet #8B5CFF · amber #FFB347 · ivory #F2F0E8
*/

const GI = {
  ink:       '#F2F0E8',
  inkDim:    'rgba(242,240,232,0.62)',
  inkLow:    'rgba(242,240,232,0.34)',
  inkFaint:  'rgba(242,240,232,0.12)',
  bg:        '#05060A',
  panel:     '#11131B',
  gunmetal:  '#1A1D27',
  indigo:    '#3D4BFF',
  violet:    '#8B5CFF',
  violetDim: 'rgba(139,92,255,0.5)',
  amber:     '#FFB347',
  amberDim:  'rgba(255,179,71,0.45)',
  steel:     '#A8AAB6',
};

// Public site config. Claude should update site-config.js for each domain.
const SITE = {
  domain: 'onlinegameing.com',
  brandName: 'Gameing Index',
  category: 'Online Game Discovery / Gaming Editorial Directory',
  inquiryApi: 'https://inquiries.brianhaberstroh.com/api/inquiry',
  successMessage: 'Thanks — your inquiry for OnlineGameing.com has been sent.',
  messagePlaceholder: 'Tell me how you would use OnlineGameing.com.',
  ...(window.SITE_CONFIG || {}),
};

/* ---------- shared bits ---------- */

const grainSVG = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")";

const Grain = ({ opacity = 0.55, blend = 'overlay' }) => (
  <div style={{
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: grainSVG,
    opacity, mixBlendMode: blend,
  }} />
);

/* Photo placeholder plate — looks like an art-directed dark image slot.
   When `image` is set, uses a real photo instead of the placeholder gradient. */
const Plate = ({ mood = 'void', caption, image, imagePos = 'center', children, style = {}, id }) => {
  const moods = {
    void: `
      radial-gradient(ellipse 70% 55% at 50% 18%, rgba(139,92,255,0.22), transparent 62%),
      radial-gradient(ellipse 50% 40% at 18% 78%, rgba(61,75,255,0.15), transparent 70%),
      radial-gradient(ellipse 40% 30% at 82% 70%, rgba(10,8,28,0.6), transparent 70%),
      linear-gradient(180deg, #0d0e18 0%, #05060A 55%, #020308 100%)`,
    index: `
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(61,75,255,0.12), transparent 65%),
      linear-gradient(115deg, #0a0b12 0%, #141620 50%, #060710 100%)`,
    net: `
      radial-gradient(ellipse 90% 30% at 50% 100%, rgba(255,179,71,0.12), transparent 60%),
      linear-gradient(180deg, #03040A 0%, #090A14 60%, #141828 100%)`,
    indie: `
      radial-gradient(ellipse 70% 50% at 60% 40%, rgba(139,92,255,0.18), transparent 62%),
      linear-gradient(160deg, #0e0f1a 0%, #06070D 100%)`,
    pulse: `
      radial-gradient(circle 320px at 70% 30%, rgba(255,179,71,0.22), transparent 60%),
      radial-gradient(circle 220px at 20% 80%, rgba(139,92,255,0.14), transparent 65%),
      linear-gradient(180deg, #0f1020 0%, #05060A 100%)`,
  };
  return (
    <div id={id} style={{
      position: 'relative', overflow: 'hidden',
      background: image
        ? `#05060A url("${image}") ${imagePos} / cover no-repeat`
        : (moods[mood] || moods.void),
      ...style,
    }}>
      <Grain opacity={image ? 0.22 : 0.55} />
      {/* faint vignette */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: image
          ? 'radial-gradient(ellipse 95% 80% at 50% 50%, transparent 60%, rgba(0,0,0,0.5) 100%)'
          : 'radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(0,0,0,0.6) 100%)',
      }} />
      {caption && (
        <div style={{
          position: 'absolute', bottom: 14, right: 18,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 1.4, textTransform: 'uppercase',
          color: 'rgba(242,240,232,0.38)',
        }}>{caption}</div>
      )}
      {children}
    </div>
  );
};

const Eyebrow = ({ children, style = {} }) => (
  <div style={{
    fontFamily: 'IBM Plex Mono, monospace',
    fontSize: 10.5, letterSpacing: 2.2, textTransform: 'uppercase',
    color: GI.violet,
    display: 'inline-flex', alignItems: 'center', gap: 10,
    ...style,
  }}>
    <span style={{ width: 22, height: 1, background: GI.violet, opacity: 0.85 }} />
    <span>{children}</span>
  </div>
);

/* GI monogram mark */
const GIMark = ({ size = 56, color = GI.ink, accent = GI.violet }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    {/* hairline frame */}
    <rect x="1.5" y="1.5" width="61" height="61" fill="none" stroke={color} strokeOpacity="0.3" strokeWidth="1" />
    {/* G */}
    <path d="M 28 18 Q 16 18 16 32 Q 16 46 28 46 L 36 46 L 36 34 L 28 34"
          fill="none" stroke={color} strokeWidth="4" strokeLinecap="square" />
    {/* I */}
    <path d="M 42 18 L 42 46"
          fill="none" stroke={color} strokeWidth="4" strokeLinecap="square" />
    {/* violet tick */}
    <rect x="30" y="55" width="4" height="4" fill={accent} />
  </svg>
);

/* Wordmark */
const Wordmark = ({ size = 22, color = GI.ink }) => (
  <span style={{
    fontFamily: 'Antonio, "Saira Condensed", sans-serif',
    fontWeight: 600, fontSize: size, letterSpacing: 0.5,
    color, lineHeight: 1, textTransform: 'none',
    display: 'inline-flex', alignItems: 'baseline', gap: size * 0.14,
  }}>
    <span>Gameing</span><span style={{ fontWeight: 400, opacity: 0.72, color: GI.violet }}>Index</span>
  </span>
);

/* ──────────── Shared form logic ──────────── */

const INQUIRY_API_URL = SITE.inquiryApi;

function useInquiryForm() {
  const [values, setValues] = React.useState({
    name: '', email: '', message: '', website: ''
  });
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  const set = field => e => setValues(v => ({ ...v, [field]: e.target.value }));

  const handleSubmit = async e => {
    e.preventDefault();
    if (status === 'submitting') return;
    if (!values.name.trim() || !values.message.trim()) {
      setStatus('error'); setErrorMsg('Name and Message are required.'); return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
      setStatus('error'); setErrorMsg('Please enter a valid email address.'); return;
    }
    setStatus('submitting');
    try {
      const res = await fetch(INQUIRY_API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: values.name,
          email: values.email,
          message: values.message,
          website: values.website,
          domain: SITE.domain,
          category: SITE.category,
          pageUrl: window.location.href,
          referrer: document.referrer,
          submittedAt: new Date().toISOString(),
        }),
      });
      if (res.ok) {
        setStatus('success');
      } else {
        const d = await res.json().catch(() => ({}));
        setStatus('error');
        setErrorMsg(d.error || d.message || 'Something went wrong. Please try again.');
      }
    } catch {
      setStatus('error');
      setErrorMsg('Something went wrong sending your inquiry. Please try again or contact the owner directly.');
    }
  };

  return { values, status, errorMsg, set, handleSubmit };
}

const MobileContactForm = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const fields = [
    { l: 'Name',    n: 'name',    t: 'text',  r: true, h: 'Required',  p: 'First & last' },
    { l: 'Email',   n: 'email',   t: 'email', r: true, h: 'Required',  p: 'you@company.com' },
    { l: 'Message', n: 'message', t: 'area',  r: true, h: 'How you would use it', p: SITE.messagePlaceholder },
  ];
  return (
    <form onSubmit={handleSubmit} style={{ marginTop: 36, position: 'relative' }}>
      <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
        <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
      </div>
      {status === 'success' ? (
        <div style={{ padding: '40px 0', fontFamily: 'IBM Plex Mono, monospace',
          fontSize: 10.5, letterSpacing: 2, textTransform: 'uppercase', color: GI.violet, lineHeight: 1.8 }}>
          {SITE.successMessage}
        </div>
      ) : (
        <>
          {status === 'error' && (
            <div style={{ marginBottom: 16, fontFamily: 'IBM Plex Mono, monospace',
              fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
              color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
              {errorMsg}
            </div>
          )}
          {fields.map(f => (
            <div key={f.l} style={{ marginBottom: 22 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
                letterSpacing: 2, textTransform: 'uppercase', color: GI.violet,
                marginBottom: 10, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>{f.l}</span>
                <span style={{ color: GI.inkLow }}>{f.h}</span>
              </div>
              {f.t === 'area' ? (
                <textarea name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${GI.inkFaint}`, paddingBottom: 12,
                    minHeight: 100, resize: 'vertical',
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: GI.ink, lineHeight: 1.3, letterSpacing: 0,
                    outline: 'none', caretColor: GI.violet,
                  }}
                />
              ) : (
                <input type={f.t} name={f.n} value={values[f.n]} onChange={set(f.n)}
                  placeholder={f.p} required={f.r}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${GI.inkFaint}`, paddingBottom: 12,
                    fontFamily: 'Antonio, sans-serif', fontSize: 20,
                    color: GI.ink, letterSpacing: 0,
                    outline: 'none', caretColor: GI.violet,
                  }}
                />
              )}
            </div>
          ))}
          <button type="submit" disabled={status === 'submitting'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 12, marginTop: 12,
            padding: '14px 22px',
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 2.2, textTransform: 'uppercase',
            color: GI.bg, background: status === 'submitting' ? GI.steel : GI.violet,
            border: 'none', cursor: status === 'submitting' ? 'default' : 'pointer',
            opacity: status === 'submitting' ? 0.7 : 1,
          }}>
            {status === 'submitting' ? 'Sending…' : 'Send Inquiry'}
          </button>
          <div style={{
            marginTop: 18,
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: GI.inkLow, lineHeight: 1.7,
          }}>
            Concept shown for illustrative purposes.
          </div>
        </>
      )}
    </form>
  );
};

/* ============================================================
   DESKTOP — 1440 wide
   ============================================================ */

const Desktop = () => (
  <div style={{
    width: 1440, background: GI.bg, color: GI.ink,
    fontFamily: 'IBM Plex Sans, sans-serif', fontSize: 15, lineHeight: 1.55,
    position: 'relative', overflow: 'hidden',
  }}>
    <DesktopNav />
    <DesktopHero />
    <DesktopStory />
    <DesktopCulture />
    <DesktopManifesto />
    <DesktopIdentity />
    <DesktopContact />
    <DesktopFooter />
  </div>
);

const DesktopNav = () => (
  <div style={{
    position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
    padding: '26px 56px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
      <Wordmark size={22} />
      <span style={{ width: 1, height: 14, background: GI.inkFaint }} />
      <span style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: GI.inkLow,
      }}>OnlineGameing.com</span>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
      {[['Index', '#story'], ['Genres', '#culture'], ['Culture', '#manifesto']].map(([l, href], i) => (
        <a key={l} href={href} style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: i === 0 ? GI.ink : GI.inkDim, textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            color: GI.violet, opacity: 0.7,
            fontSize: 9, fontVariantNumeric: 'tabular-nums',
          }}>0{i + 1}</span>
          {l}
        </a>
      ))}
      <a href="#inquiry" style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: GI.ink,
        textDecoration: 'none',
        border: `1px solid ${GI.inkFaint}`, padding: '10px 18px',
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        Acquire
        <span style={{ width: 5, height: 5, background: GI.violet, borderRadius: 0 }} />
      </a>
    </div>
  </div>
);

const DesktopHero = () => (
  <Plate id="hero" image="media/hero.png" imagePos="center" caption="// 01 · index · curated game discovery · violet overhead" style={{ height: 880 }}>
    {/* bottom fade for copy legibility */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, height: 460,
      background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.82) 100%)',
    }} />

    {/* corner indices */}
    <div style={{
      position: 'absolute', top: 110, left: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: GI.inkLow,
    }}>
      N° 001 — Volume One
    </div>
    <div style={{
      position: 'absolute', top: 110, right: 56,
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: GI.inkLow,
      textAlign: 'right',
    }}>
      OnlineGameing.com / Curated Game Discovery
    </div>

    {/* hero copy — left-anchored, lower third */}
    <div style={{
      position: 'absolute', left: 56, bottom: 96, maxWidth: 940,
    }}>
      <div style={{ marginBottom: 28 }}><Eyebrow style={{ color: GI.amber }}>OnlineGameing.com / Curated Game Discovery</Eyebrow></div>
      <h1 style={{
        fontFamily: 'Antonio, sans-serif', fontWeight: 600,
        fontSize: 148, lineHeight: 0.95, letterSpacing: -1.5,
        margin: 0, color: GI.ink,
      }}>
        An index for the<br />
        next game worth
        <span style={{
          fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05,
          color: GI.violet, fontWeight: 400,
        }}> opening.</span>
      </h1>
      <p style={{
        marginTop: 84, marginBottom: 0, maxWidth: 560,
        fontSize: 17, lineHeight: 1.55, color: GI.inkDim,
      }}>
        Gameing Index imagines onlinegameing.com as a curated discovery brand for browser-friendly titles, indie finds, quick-play sessions, and the culture around online play.
      </p>

      <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#story" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: GI.bg, background: GI.violet,
          padding: '18px 28px', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 14,
        }}>
          Explore the Index
          <span style={{ display: 'inline-block', width: 18, height: 1, background: GI.bg }} />
        </a>
        <a href="#culture" style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
          letterSpacing: 2.4, textTransform: 'uppercase',
          color: GI.ink, textDecoration: 'none',
          padding: '18px 0',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          borderBottom: `1px solid ${GI.inkFaint}`,
        }}>
          Browse Genres
        </a>
      </div>
    </div>

    {/* scroll marker bottom-right */}
    <div style={{
      position: 'absolute', right: 56, bottom: 64,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12,
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
        letterSpacing: 2.4, textTransform: 'uppercase', color: GI.inkLow,
      }}>Scroll · 01 of 06</div>
      <div style={{ width: 1, height: 56, background: `linear-gradient(180deg, ${GI.violet}, transparent)` }} />
    </div>
  </Plate>
);

const DesktopStory = () => (
  <div id="story" style={{
    background: GI.bg, padding: '160px 56px 160px',
    display: 'grid', gridTemplateColumns: '560px 1fr', gap: 96,
  }}>
    <Plate image="media/story.png" imagePos="center" caption="// 02 · discovery · editorial library · violet detail" style={{ height: 720 }} />

    <div style={{ paddingTop: 24, alignSelf: 'start' }}>
      <Eyebrow>02 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 36, marginBottom: 36, maxWidth: 660,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 72, lineHeight: 0.98, letterSpacing: -0.5,
        color: GI.ink,
      }}>
        Online play, sorted<br />
        with
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: GI.violet, fontWeight: 400 }}> intent.</span>
      </h2>
      <p style={{
        fontSize: 18, lineHeight: 1.6, color: GI.inkDim, maxWidth: 520, margin: 0,
      }}>
        Gameing Index is a premium brand concept for a cleaner way to discover online games. Instead of a noisy wall of thumbnails, the idea is an editorial index organized by genre, mood, pace, and play style.
      </p>
      <p style={{
        marginTop: 24, fontSize: 16, lineHeight: 1.6, color: GI.inkLow, maxWidth: 480,
      }}>
        A name built for a buyer who sees value in game discovery, browser play, and curated gaming content.
      </p>

      <div style={{
        marginTop: 64, paddingTop: 36, borderTop: `1px solid ${GI.inkFaint}`,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, maxWidth: 580,
      }}>
        {[
          { n: '∞', l: 'Genres to explore' },
          { n: '01', l: 'Clear domain name' },
          { n: '∞', l: 'Sessions ahead' },
        ].map(s => (
          <div key={s.l}>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 56, lineHeight: 1, color: GI.ink,
            }}>{s.n}</div>
            <div style={{
              marginTop: 10,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 1.8, textTransform: 'uppercase', color: GI.inkLow,
            }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const cultureItems = [
  { n: '01', label: 'Action',     mood: 'pulse',  image: 'media/genres.png',      h: 560, blurb: 'Fast reflex games, platformers, run-and-gun browser titles, and indie action finds curated by pulse and pace.', cap: '// action · reflex · browser play' },
  { n: '02', label: 'Sessions',   mood: 'void',   image: 'media/sessions.png',     h: 720, blurb: 'Quick solo plays, late-night co-op rooms, party picks, and competitive frames organized by how long you have.',  cap: '// sessions · co-op · multiplayer' },
  { n: '03', label: 'Collections',mood: 'indie',  image: 'media/collections.png',  h: 720, blurb: 'Editorial shelves of indie finds, puzzle breaks, and browser gems — grouped by mood, not algorithm.',            cap: '// collections · indie · editorial' },
  { n: '04', label: 'Culture',    mood: 'net',    image: 'media/culture.png',      h: 560, blurb: 'The world around online play: forums, creators, community spaces, and the stories behind the games.',            cap: '// culture · community · discourse' },
];

const DesktopCulture = () => (
  <div id="culture" style={{ background: GI.bg, padding: '40px 56px 180px' }}>
    {/* section header */}
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      paddingBottom: 56, borderBottom: `1px solid ${GI.inkFaint}`, marginBottom: 64,
    }}>
      <div>
        <Eyebrow>03 — Genre Paths</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0, maxWidth: 900,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: GI.ink,
        }}>
          From quick sessions to<br />
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400, color: GI.inkDim }}>deep rabbit holes.</span>
        </h2>
      </div>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.2, textTransform: 'uppercase', color: GI.inkLow,
        textAlign: 'right', paddingBottom: 12,
      }}>
        Action · Sessions<br/>Collections · Culture
      </div>
    </div>

    {/* asymmetric grid of 4 */}
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
      columnGap: 24, rowGap: 64,
    }}>
      {cultureItems.map((c, i) => (
        <div key={c.label} style={{ marginTop: i % 2 === 1 ? 64 : 0 }}>
          <Plate mood={c.mood} image={c.image} caption={c.cap} style={{ height: c.h }} />
          <div style={{
            marginTop: 22, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
              <span style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
                letterSpacing: 2, color: GI.violet,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 44, lineHeight: 1, letterSpacing: -0.3,
                color: GI.ink, margin: 0,
              }}>{c.label}</h3>
            </div>
            <a href="#inquiry" style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
              letterSpacing: 2.2, textTransform: 'uppercase',
              color: GI.inkDim, textDecoration: 'none',
            }}>Explore →</a>
          </div>
          <p style={{
            marginTop: 14, marginBottom: 0, maxWidth: 440,
            fontSize: 15.5, color: GI.inkDim,
          }}>{c.blurb}</p>
        </div>
      ))}
    </div>
  </div>
);

const DesktopManifesto = () => (
  <Plate id="manifesto" image="media/manifesto.png" caption="// 04 · manifesto · screen glow · discovery portal" style={{ height: 700 }}>
    {/* darken for readability */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.68) 100%)',
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <div style={{ marginBottom: 56 }}><Eyebrow style={{ color: GI.amber }}>04 — Manifesto</Eyebrow></div>
      <h2 style={{
        margin: 0, textAlign: 'center',
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 128, lineHeight: 0.92, letterSpacing: -1.2,
        color: GI.ink,
      }}>
        The next game<br />
        should not be
        <span style={{ color: GI.violet, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}> buried.</span>
      </h2>
      <div style={{
        marginTop: 56, display: 'flex', alignItems: 'center', gap: 18,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: GI.inkLow,
      }}>
        <span style={{ width: 32, height: 1, background: GI.inkFaint }} />
        <span>One good index away from the right game</span>
        <span style={{ width: 32, height: 1, background: GI.inkFaint }} />
      </div>
    </div>
  </Plate>
);

/* Artifact card */
const Artifact = ({ label, footnote, stitched = false, accentTab = false, children, style = {}, contentStyle = {} }) => (
  <div style={{
    position: 'relative', background: GI.bg,
    border: `1px solid ${GI.inkFaint}`,
    boxShadow: 'inset 0 0 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(242,240,232,0.04)',
    ...style,
  }}>
    {[
      { top: 8, left: 8, b: '1px 0 0 1px' },
      { top: 8, right: 8, b: '1px 1px 0 0' },
      { bottom: 8, left: 8, b: '0 0 1px 1px' },
      { bottom: 8, right: 8, b: '0 1px 1px 0' },
    ].map((c, i) => (
      <span key={i} style={{
        position: 'absolute', width: 10, height: 10,
        borderStyle: 'solid', borderColor: GI.violetDim, borderWidth: c.b,
        ...c,
      }} />
    ))}
    {stitched && (
      <div style={{
        position: 'absolute', inset: 18, pointerEvents: 'none',
        border: `1px dashed rgba(139,92,255,0.28)`,
      }} />
    )}
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.18, mixBlendMode: 'overlay',
    }} />
    {accentTab && (
      <span style={{
        position: 'absolute', top: -1, left: 32, width: 22, height: 4,
        background: GI.violet,
      }} />
    )}
    <div style={{
      position: 'relative', zIndex: 1, height: '100%',
      display: 'flex', flexDirection: 'column', ...contentStyle,
    }}>
      <div style={{
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 2.4, textTransform: 'uppercase', color: GI.inkLow,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 1, background: GI.violetDim }} />
        {label}
      </div>
      {children}
      {footnote && (
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2.2, textTransform: 'uppercase', color: GI.inkLow,
        }}>{footnote}</div>
      )}
    </div>
  </div>
);

const pathNotes = [
  { n: '01', t: 'Genre',      kind: 'genre',     d: 'Action, puzzle, strategy, co-op, idle, platformer — organized so the category is always the first step.' },
  { n: '02', t: 'Mood',       kind: 'mood',      d: 'Focused, social, competitive, relaxed, chaotic. The right frame starts with how you want to feel.' },
  { n: '03', t: 'Pace',       kind: 'pace',      d: 'Five-minute sessions, hour-long runs, weekend projects. Pace tells you before you click.' },
  { n: '04', t: 'Discovery',  kind: 'discovery', d: 'New releases, hidden gems, community picks, editorial shelves. A path always leads somewhere worth going.' },
  { n: '05', t: 'Sessions',   kind: 'sessions',  d: 'Solo focus, duo drop-in, party room, tournament ladder. The session type shapes everything.' },
  { n: '06', t: 'Community',  kind: 'community', d: 'Creators, forums, indie studios, discourse, fan wikis. The world around the game is part of the game.' },
];

const PathGlyph = ({ kind, size = 44 }) => {
  const s = size; const cx = s/2; const cy = s/2;
  const stroke = GI.violet; const dim = GI.inkLow;
  switch (kind) {
    case 'genre': // grid of tiles
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.12} y={s*0.12} width={s*0.32} height={s*0.32} fill="none" stroke={stroke} strokeWidth="1.2" />
          <rect x={s*0.56} y={s*0.12} width={s*0.32} height={s*0.32} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.12} y={s*0.56} width={s*0.32} height={s*0.32} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.56} y={s*0.56} width={s*0.32} height={s*0.32} fill={stroke} fillOpacity="0.18" stroke={stroke} strokeWidth="1.2" />
        </svg>
      );
    case 'mood': // wave form
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <path d={`M ${s*0.1} ${cy} Q ${s*0.22} ${s*0.28}, ${s*0.34} ${cy} Q ${s*0.46} ${s*0.72}, ${s*0.58} ${cy} Q ${s*0.70} ${s*0.28}, ${s*0.82} ${cy} Q ${s*0.88} ${cy}, ${s*0.9} ${cy}`}
            fill="none" stroke={stroke} strokeWidth="1.5" />
          <circle cx={cx} cy={cy} r="2" fill={stroke} />
        </svg>
      );
    case 'pace': // timer/clock
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r={s*0.35} fill="none" stroke={stroke} strokeWidth="1.2" />
          <line x1={cx} y1={cy} x2={cx} y2={s*0.22} stroke={GI.ink} strokeWidth="1.4" />
          <line x1={cx} y1={cy} x2={s*0.72} y2={cy} stroke={GI.ink} strokeWidth="1" />
          <circle cx={cx} cy={cy} r="1.8" fill={stroke} />
          <line x1={cx} y1={s*0.12} x2={cx} y2={s*0.18} stroke={stroke} strokeWidth="1.5" />
        </svg>
      );
    case 'discovery': // path arrow
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <line x1={s*0.14} y1={cy} x2={s*0.78} y2={cy} stroke={dim} strokeWidth="1" />
          <polyline points={`${s*0.66},${s*0.34} ${s*0.82},${cy} ${s*0.66},${s*0.66}`} fill="none" stroke={stroke} strokeWidth="1.4" />
          <circle cx={s*0.22} cy={cy} r="2.5" fill={stroke} />
        </svg>
      );
    case 'sessions': // overlapping windows
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <rect x={s*0.10} y={s*0.26} width={s*0.52} height={s*0.46} fill="none" stroke={dim} strokeWidth="1" />
          <rect x={s*0.38} y={s*0.16} width={s*0.52} height={s*0.46} fill={GI.bg} stroke={stroke} strokeWidth="1.2" />
          <line x1={s*0.38} y1={s*0.26} x2={s*0.90} y2={s*0.26} stroke={stroke} strokeWidth="1" />
          <circle cx={s*0.46} cy={s*0.21} r="1.4" fill={stroke} />
        </svg>
      );
    case 'community': // network nodes
      return (
        <svg viewBox={`0 0 ${s} ${s}`} width={s} height={s}>
          <circle cx={cx} cy={cy} r="2.8" fill={stroke} />
          <circle cx={s*0.22} cy={s*0.26} r="2" fill={dim} />
          <circle cx={s*0.78} cy={s*0.26} r="2" fill={dim} />
          <circle cx={s*0.22} cy={s*0.74} r="2" fill={dim} />
          <circle cx={s*0.78} cy={s*0.74} r="2" fill={dim} />
          <line x1={cx} y1={cy} x2={s*0.22} y2={s*0.26} stroke={stroke} strokeWidth="0.9" />
          <line x1={cx} y1={cy} x2={s*0.78} y2={s*0.26} stroke={stroke} strokeWidth="0.9" />
          <line x1={cx} y1={cy} x2={s*0.22} y2={s*0.74} stroke={dim} strokeWidth="0.7" />
          <line x1={cx} y1={cy} x2={s*0.78} y2={s*0.74} stroke={dim} strokeWidth="0.7" />
          <line x1={s*0.22} y1={s*0.26} x2={s*0.78} y2={s*0.26} stroke={dim} strokeWidth="0.6" strokeDasharray="2 2" />
        </svg>
      );
  }
};

const DesktopIdentity = () => (
  <div id="presence" style={{ background: GI.panel, padding: '160px 56px 160px', position: 'relative' }}>
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: grainSVG, opacity: 0.18, mixBlendMode: 'overlay',
    }} />

    {/* header */}
    <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 72, gap: 60 }}>
      <div>
        <Eyebrow>05 — Discovery Paths</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 0,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 80, lineHeight: 0.96, letterSpacing: -0.6,
          color: GI.ink,
        }}>
          A brandable typo with<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: GI.violet, fontWeight: 400 }}>category memory.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 420,
        fontSize: 15.5, lineHeight: 1.65, color: GI.inkDim, paddingBottom: 12,
      }}>
        OnlineGameing.com carries the shape of "online gaming" while giving the buyer a stylized brand spelling: Gameing. The concept leans into that difference instead of hiding it — memorable, ownable, and direct enough to signal the gaming category immediately.
      </div>
    </div>

    {/* Six path cards */}
    <div style={{
      position: 'relative', marginTop: 24,
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
    }}>
      {pathNotes.map((m) => (
        <Artifact
          key={m.t}
          label={`N° ${m.n}`}
          contentStyle={{ padding: '28px 28px 24px', justifyContent: 'space-between', minHeight: 240 }}
        >
          <div style={{
            marginTop: 18,
            display: 'flex', alignItems: 'center', gap: 18,
          }}>
            <PathGlyph kind={m.kind} size={44} />
            <h3 style={{
              margin: 0, whiteSpace: 'nowrap',
              fontFamily: 'Antonio, sans-serif', fontWeight: 500,
              fontSize: 30, letterSpacing: 0.2, color: GI.ink,
            }}>{m.t}</h3>
          </div>
          <p style={{
            margin: 0, marginTop: 18,
            fontSize: 14.5, lineHeight: 1.55, color: GI.inkDim,
          }}>{m.d}</p>
        </Artifact>
      ))}
    </div>

    {/* bottom strip */}
    <div style={{
      position: 'relative', marginTop: 64, paddingTop: 28,
      borderTop: `1px solid ${GI.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
      letterSpacing: 2.4, textTransform: 'uppercase', color: GI.inkLow,
    }}>
      <span>Browser play · Indie finds · Quick sessions · Deep runs</span>
      <span>Curated paths · Editorial index · Mood-based discovery</span>
      <span style={{ color: GI.violet }}>Flexible for media · Directory · Affiliate · Newsletter</span>
    </div>
  </div>
);

const DesktopContact = () => {
  const { values, status, errorMsg, set, handleSubmit } = useInquiryForm();
  const formFields = [
    { label: 'Name',  name: 'name',  type: 'text',  required: true, hint: 'Required', placeholder: 'First & last' },
    { label: 'Email', name: 'email', type: 'email', required: true, hint: 'Required', placeholder: 'you@company.com' },
  ];
  return (
    <div id="inquiry" style={{
      background: GI.bg, padding: '180px 56px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96,
    }}>
      <div>
        <Eyebrow>06 — Acquire</Eyebrow>
        <h2 style={{
          marginTop: 28, marginBottom: 36, maxWidth: 580,
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 96, lineHeight: 0.95, letterSpacing: -0.8,
          color: GI.ink,
        }}>
          Acquire<br/>
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: GI.violet, fontWeight: 400 }}>OnlineGameing.com</span>
        </h2>
        <p style={{ maxWidth: 440, fontSize: 16, lineHeight: 1.6, color: GI.inkDim, margin: 0 }}>
          This page is an illustrative brand concept showing one possible direction for onlinegameing.com. The domain is available for acquisition, and the concept can be adapted by a gaming publisher, directory operator, content network, affiliate team, or online play platform.
        </p>
        <div style={{
          marginTop: 36, maxWidth: 460, padding: '18px 0',
          borderTop: `1px dashed ${GI.inkFaint}`,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.6, textTransform: 'uppercase', color: GI.inkLow, lineHeight: 1.7,
        }}>
          No active game library, traffic, rankings, partnerships, or revenue are implied. This is a premium concept site for domain presentation.
        </div>
        <div style={{
          marginTop: 40, paddingTop: 32, borderTop: `1px solid ${GI.inkFaint}`,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, maxWidth: 520,
        }}>
          {[
            { l: 'Domain',    v: 'OnlineGameing.com' },
            { l: 'Direction', v: 'Curated game discovery' },
            { l: 'Status',    v: 'Open to serious inquiries' },
          ].map(b => (
            <div key={b.l}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: GI.violet,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 8, height: 1, background: GI.violetDim }} />
                {b.l}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Antonio, sans-serif', fontSize: 22, color: GI.ink, lineHeight: 1.2,
              }}>
                {b.v}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40, maxWidth: 460,
          display: 'flex', gap: 14, alignItems: 'flex-start',
          paddingTop: 18, borderTop: `1px dashed ${GI.inkFaint}`,
        }}>
          <span style={{
            marginTop: 4, width: 6, height: 6, background: GI.violet, flexShrink: 0,
          }} />
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
            letterSpacing: 1.6, textTransform: 'uppercase', color: GI.inkLow, lineHeight: 1.7,
          }}>
            Built for buyers who understand discovery: gaming publishers, casual game networks, affiliate operators, and content teams.
          </div>
        </div>
      </div>

      <form onSubmit={handleSubmit} style={{ paddingTop: 80, position: 'relative' }}>
        {/* honeypot */}
        <div style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }} aria-hidden="true">
          <input type="text" name="website" value={values.website} onChange={set('website')} tabIndex={-1} autoComplete="off" />
        </div>
        {status === 'success' ? (
          <div style={{ padding: '56px 0', fontFamily: 'IBM Plex Mono, monospace',
            fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: GI.violet, lineHeight: 1.8 }}>
            {SITE.successMessage}
          </div>
        ) : (
          <>
            {status === 'error' && (
              <div style={{ marginBottom: 20, fontFamily: 'IBM Plex Mono, monospace',
                fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase',
                color: 'rgba(200,90,60,0.9)', lineHeight: 1.6 }}>
                {errorMsg}
              </div>
            )}
            {formFields.map(f => (
              <div key={f.label} style={{ marginBottom: 30 }}>
                <div style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                  letterSpacing: 2.2, textTransform: 'uppercase', color: GI.violet,
                  marginBottom: 12, display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>{f.label}</span>
                  <span style={{ color: GI.inkLow }}>{f.hint}</span>
                </div>
                <input
                  type={f.type}
                  name={f.name}
                  value={values[f.name]}
                  onChange={set(f.name)}
                  placeholder={f.placeholder}
                  required={f.required}
                  style={{
                    background: 'none', border: 'none', width: '100%',
                    borderBottom: `1px solid ${GI.inkFaint}`,
                    paddingBottom: 14,
                    fontFamily: 'Antonio, sans-serif', fontSize: 26,
                    color: GI.ink, letterSpacing: 0.2,
                    outline: 'none', caretColor: GI.violet,
                  }}
                />
              </div>
            ))}
            <div style={{ marginBottom: 44 }}>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2.2, textTransform: 'uppercase', color: GI.violet,
                marginBottom: 12, display: 'flex', justifyContent: 'space-between',
              }}>
                <span>Message</span>
                <span style={{ color: GI.inkLow }}>How you would use it</span>
              </div>
              <textarea
                name="message"
                value={values.message}
                onChange={set('message')}
                placeholder={SITE.messagePlaceholder}
                required
                style={{
                  background: 'none', border: 'none', width: '100%',
                  borderBottom: `1px solid ${GI.inkFaint}`,
                  paddingBottom: 14, minHeight: 140, resize: 'vertical',
                  fontFamily: 'Antonio, sans-serif', fontSize: 26,
                  color: GI.ink, letterSpacing: 0.2,
                  outline: 'none', caretColor: GI.violet,
                }}
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
              <button
                type="submit"
                disabled={status === 'submitting'}
                style={{
                  fontFamily: 'IBM Plex Mono, monospace', fontSize: 11.5,
                  letterSpacing: 2.4, textTransform: 'uppercase',
                  color: GI.bg, background: status === 'submitting' ? GI.steel : GI.violet,
                  padding: '20px 32px', border: 'none',
                  cursor: status === 'submitting' ? 'default' : 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 16,
                  opacity: status === 'submitting' ? 0.7 : 1,
                }}
              >
                {status === 'submitting' ? 'Sending…' : 'Send Inquiry'}
                <span style={{ width: 22, height: 1, background: GI.bg, display: 'inline-block' }} />
              </button>
              <div style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 1.8, textTransform: 'uppercase', color: GI.inkLow,
                textAlign: 'right', lineHeight: 1.6, maxWidth: 220,
              }}>
                Concept shown for<br/>illustrative purposes.
              </div>
            </div>
          </>
        )}
      </form>
    </div>
  );
};

const DesktopFooter = () => (
  <div id="footer" style={{
    background: GI.panel, padding: '64px 56px 48px',
    borderTop: `1px solid ${GI.inkFaint}`,
  }}>
    <div style={{
      display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 1fr', gap: 56,
      paddingBottom: 56,
    }}>
      {/* brand block */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <GIMark size={48} />
          <div>
            <div style={{
              fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 28,
              color: GI.ink, lineHeight: 1, letterSpacing: 0.4,
            }}>Gameing<span style={{ fontWeight: 400, opacity: 0.72, color: GI.violet }}> Index</span></div>
            <div style={{
              marginTop: 8,
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
              letterSpacing: 2.2, textTransform: 'uppercase', color: GI.violet,
            }}>Curated paths into online play.</div>
          </div>
        </div>
        <p style={{
          marginTop: 28, marginBottom: 0, maxWidth: 320,
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 1.6, textTransform: 'uppercase', color: GI.inkLow, lineHeight: 1.7,
        }}>
          Gameing Index is an illustrative brand concept for <span style={{ color: GI.inkDim }}>onlinegameing.com</span>. The domain may be available for acquisition. This concept is independent and does not use or imply affiliation with any game publisher, platform, console manufacturer, esports organization, streamer, or rights holder.
        </p>
      </div>
      {[
        { h: 'Concept', l: [
          { t: 'Brand Direction',   href: '#story' },
          { t: 'Discovery Paths',   href: '#presence' },
          { t: 'Genre Paths',       href: '#culture' },
        ]},
        { h: 'Domain', l: [
          { t: 'OnlineGameing.com',   href: '#inquiry' },
          { t: 'Acquisition Inquiry', href: '#inquiry' },
          { t: 'Contact',             href: '#inquiry' },
        ]},
        { h: 'Note', l: [
          { t: 'Independent Concept',    href: null },
          { t: 'No Publisher Affiliation', href: null },
        ]},
      ].map(g => (
        <div key={g.h}>
          <div style={{
            fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
            letterSpacing: 2.2, textTransform: 'uppercase', color: GI.inkLow,
            marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 1, background: GI.violetDim }} />
            {g.h}
          </div>
          <div style={{ display: 'grid', gap: 10 }}>
            {g.l.map(x => (
              <a key={x.t} href={x.href || undefined} style={{
                fontFamily: 'Antonio, sans-serif', fontSize: 20, color: GI.ink,
                letterSpacing: 0.2, textDecoration: 'none', lineHeight: 1.15,
              }}>{x.t}</a>
            ))}
          </div>
        </div>
      ))}
    </div>
    <div style={{
      paddingTop: 28, borderTop: `1px solid ${GI.inkFaint}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
      letterSpacing: 2, textTransform: 'uppercase', color: GI.inkLow,
    }}>
      <span>© MMXXVI · Gameing Index · Concept presentation</span>
      <span>Independently owned · Available for acquisition</span>
      <span style={{ color: GI.violet }}>Volume One — 001</span>
    </div>
  </div>
);

/* ============================================================
   MOBILE — 390 wide
   ============================================================ */

const Mobile = () => (
  <div style={{
    width: 390, background: GI.bg, color: GI.ink,
    fontFamily: 'IBM Plex Sans, sans-serif', fontSize: 14, lineHeight: 1.55,
    position: 'relative', overflow: 'hidden',
  }}>
    {/* status bar */}
    <div style={{
      height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 22px', fontFamily: 'IBM Plex Mono, monospace', fontSize: 11,
      color: GI.ink, fontWeight: 600, position: 'absolute', top: 0, left: 0, right: 0, zIndex: 30,
    }}>
      <span>9:41</span>
      <span style={{ display: 'flex', gap: 6 }}>
        <span>●●●●</span><span>●●</span>
      </span>
    </div>

    {/* nav */}
    <div style={{
      position: 'absolute', top: 44, left: 0, right: 0, zIndex: 20,
      padding: '16px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <Wordmark size={18} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ width: 22, height: 1, background: GI.ink }} />
        <span style={{ width: 16, height: 1, background: GI.ink, alignSelf: 'flex-end' }} />
      </div>
    </div>

    {/* hero */}
    <Plate id="m-hero" image="media/hero.png" imagePos="center" caption="// 01 · index · amber" style={{ height: 720, paddingTop: 100 }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 380,
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.84) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 22, bottom: 56, right: 22,
      }}>
        <div style={{ marginBottom: 18 }}><Eyebrow style={{ color: GI.amber }}>OnlineGameing.com / Curated Game Discovery</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Antonio, sans-serif', fontWeight: 600,
          fontSize: 64, lineHeight: 0.9, letterSpacing: -0.6,
          margin: 0, color: GI.ink,
        }}>
          An index for the<br/>next game worth
          <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: GI.violet, fontWeight: 400 }}> opening.</span>
        </h1>
        <p style={{ marginTop: 52, color: GI.inkDim, fontSize: 14, lineHeight: 1.55 }}>
          Gameing Index imagines onlinegameing.com as a curated discovery brand for browser-friendly titles, indie finds, and online play culture.
        </p>
        <a href="#story" style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          marginTop: 24, padding: '14px 22px',
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 10.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: GI.bg, background: GI.violet, textDecoration: 'none',
        }}>
          Explore the Index
          <span style={{ width: 16, height: 1, background: GI.bg }} />
        </a>
      </div>
    </Plate>

    {/* story */}
    <div id="m-story" style={{ padding: '88px 22px 64px' }}>
      <Eyebrow>02 — The Concept</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 44, lineHeight: 0.98, letterSpacing: -0.3,
        color: GI.ink,
      }}>
        Online play, sorted with <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: GI.violet, fontWeight: 400 }}>intent.</span>
      </h2>
      <p style={{ color: GI.inkDim, fontSize: 14.5, lineHeight: 1.6 }}>
        Gameing Index is a premium brand concept for a cleaner way to discover online games — an editorial index organized by genre, mood, pace, and play style.
      </p>
      <Plate image="media/story.png" caption="// 02 · discovery · editorial" style={{ height: 320, marginTop: 32 }} />
    </div>

    {/* culture */}
    <div id="m-culture" style={{ padding: '0 22px 64px' }}>
      <Eyebrow>03 — Genre Paths</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 32,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 52, lineHeight: 0.95, letterSpacing: -0.4,
        color: GI.ink,
      }}>
        From quick sessions to<br/><span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: GI.inkDim, fontWeight: 400 }}>deep rabbit holes.</span>
      </h2>
      <div style={{ display: 'grid', gap: 36 }}>
        {cultureItems.map(c => (
          <div key={c.label}>
            <Plate mood={c.mood} image={c.image} caption={c.cap} style={{ height: 280 }} />
            <div style={{ marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{
                fontFamily: 'IBM Plex Mono, monospace', fontSize: 10,
                letterSpacing: 2, color: GI.violet,
              }}>N° {c.n}</span>
              <h3 style={{
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 32, lineHeight: 1, color: GI.ink, margin: 0,
              }}>{c.label}</h3>
            </div>
            <p style={{ marginTop: 8, color: GI.inkDim, fontSize: 14 }}>{c.blurb}</p>
          </div>
        ))}
      </div>
    </div>

    {/* manifesto */}
    <Plate id="m-manifesto" image="media/manifesto.png" caption="// 04 · manifesto" style={{ height: 520 }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.72) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: '0 22px' }}>
        <div style={{ marginBottom: 26 }}><Eyebrow style={{ color: GI.amber }}>04 — Manifesto</Eyebrow></div>
        <h2 style={{
          margin: 0, textAlign: 'center',
          fontFamily: 'Antonio, sans-serif', fontWeight: 500,
          fontSize: 56, lineHeight: 0.92, letterSpacing: -0.4,
          color: GI.ink,
        }}>
          The next game<br/>should not be<br/>
          <span style={{ color: GI.violet, fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, fontWeight: 400 }}>buried.</span>
        </h2>
      </div>
    </Plate>

    {/* presence */}
    <div id="m-presence" style={{ background: GI.panel, padding: '64px 22px' }}>
      <Eyebrow>05 — Discovery Paths</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 16,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 40, lineHeight: 0.96, letterSpacing: -0.3,
        color: GI.ink,
      }}>
        A brandable typo with<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: GI.violet, fontWeight: 400 }}>category memory.</span>
      </h2>
      <p style={{ color: GI.inkDim, fontSize: 13.5, lineHeight: 1.6, marginBottom: 28 }}>
        OnlineGameing.com carries the shape of "online gaming" while giving the buyer a stylized brand spelling that is memorable and ownable.
      </p>
      {/* path cards — 2-col grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {pathNotes.map((m) => (
          <Artifact
            key={m.t}
            label={`N° ${m.n}`}
            contentStyle={{ padding: 16, justifyContent: 'space-between', minHeight: 180 }}
          >
            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <PathGlyph kind={m.kind} size={32} />
              <h3 style={{
                margin: 0, whiteSpace: 'nowrap',
                fontFamily: 'Antonio, sans-serif', fontWeight: 500,
                fontSize: 20, letterSpacing: 0.2, color: GI.ink,
              }}>{m.t}</h3>
            </div>
            <p style={{
              margin: 0, marginTop: 12,
              fontSize: 12.5, lineHeight: 1.5, color: GI.inkDim,
            }}>{m.d}</p>
          </Artifact>
        ))}
      </div>

      {/* brand line strip */}
      <div style={{
        marginTop: 18, padding: '18px 18px',
        border: `1px solid ${GI.inkFaint}`, background: GI.bg,
        display: 'grid', gap: 10,
      }}>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
          letterSpacing: 2, textTransform: 'uppercase', color: GI.inkLow, lineHeight: 1.7,
        }}>Browser play · Indie finds<br/>Quick sessions · Deep runs</div>
        <div style={{
          fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
          letterSpacing: 2, textTransform: 'uppercase', color: GI.violet,
        }}>Curated paths · Editorial index</div>
      </div>
    </div>

    {/* contact */}
    <div id="m-inquiry" style={{ padding: '64px 22px' }}>
      <Eyebrow>06 — Acquire</Eyebrow>
      <h2 style={{
        marginTop: 22, marginBottom: 20,
        fontFamily: 'Antonio, sans-serif', fontWeight: 500,
        fontSize: 56, lineHeight: 0.95, letterSpacing: -0.5,
        color: GI.ink,
      }}>
        Acquire<br/>
        <span style={{ fontStyle: 'italic', fontFamily: '"Instrument Serif", serif', fontSize: '0.82em', lineHeight: 1.05, color: GI.violet, fontWeight: 400 }}>OnlineGameing.com</span>
      </h2>
      <p style={{ color: GI.inkDim, fontSize: 13.5, lineHeight: 1.6 }}>
        This page is an illustrative brand concept showing one possible direction for <span style={{ color: GI.ink }}>onlinegameing.com</span>. The domain is available for acquisition.
      </p>

      <div style={{
        marginTop: 32, paddingTop: 22, borderTop: `1px solid ${GI.inkFaint}`,
        display: 'grid', gap: 18,
      }}>
        {[
          { l: 'Domain',    v: 'OnlineGameing.com' },
          { l: 'Direction', v: 'Curated game discovery' },
          { l: 'Status',    v: 'Open to serious inquiries' },
        ].map(b => (
          <div key={b.l}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
              letterSpacing: 2, textTransform: 'uppercase', color: GI.violet,
            }}>{b.l}</div>
            <div style={{
              marginTop: 4,
              fontFamily: 'Antonio, sans-serif', fontSize: 20, color: GI.ink, lineHeight: 1.2,
            }}>{b.v}</div>
          </div>
        ))}
      </div>

      <MobileContactForm />

      <div style={{
        marginTop: 28, paddingTop: 18, borderTop: `1px dashed ${GI.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: GI.inkLow, lineHeight: 1.7,
      }}>
        No active game library, traffic, rankings, partnerships, or revenue are implied. This is a premium concept site for domain presentation.
      </div>
    </div>

    {/* footer */}
    <div id="m-footer" style={{ background: GI.panel, padding: '36px 22px 32px', borderTop: `1px solid ${GI.inkFaint}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <GIMark size={36} />
        <div>
          <div style={{ fontFamily: 'Antonio, sans-serif', fontWeight: 600, fontSize: 22, color: GI.ink, lineHeight: 1 }}>Gameing<span style={{ fontWeight: 400, opacity: 0.72, color: GI.violet }}> Index</span></div>
          <div style={{ marginTop: 6, fontFamily: 'IBM Plex Mono, monospace', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: GI.violet }}>Curated paths into online play.</div>
        </div>
      </div>
      <p style={{
        marginTop: 22, marginBottom: 0,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9.5,
        letterSpacing: 1.5, textTransform: 'uppercase', color: GI.inkLow, lineHeight: 1.7,
      }}>
        Gameing Index is an illustrative brand concept for <span style={{ color: GI.inkDim }}>onlinegameing.com</span>. The domain may be available for acquisition. This concept is independent and does not use or imply affiliation with any game publisher, platform, console manufacturer, esports organization, streamer, or rights holder.
      </p>
      <div style={{
        marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      }}>
        {[
          { h: 'Concept', l: [
            { t: 'Brand Direction',  href: '#story' },
            { t: 'Discovery Paths',  href: '#presence' },
            { t: 'Genre Paths',      href: '#culture' },
          ]},
          { h: 'Domain', l: [
            { t: 'OnlineGameing.com',   href: '#inquiry' },
            { t: 'Acquisition Inquiry', href: '#inquiry' },
            { t: 'Contact',             href: '#inquiry' },
          ]},
        ].map(g => (
          <div key={g.h}>
            <div style={{
              fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
              letterSpacing: 2, textTransform: 'uppercase', color: GI.inkLow,
              marginBottom: 12,
            }}>{g.h}</div>
            <div style={{ display: 'grid', gap: 6 }}>
              {g.l.map(x => (
                <a key={x.t} href={x.href} style={{
                  fontFamily: 'Antonio, sans-serif', fontSize: 16, color: GI.ink,
                  letterSpacing: 0.2, lineHeight: 1.2, textDecoration: 'none',
                }}>{x.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 24, paddingTop: 16, borderTop: `1px solid ${GI.inkFaint}`,
        fontFamily: 'IBM Plex Mono, monospace', fontSize: 9,
        letterSpacing: 2, textTransform: 'uppercase', color: GI.inkLow, lineHeight: 1.8,
      }}>
        © MMXXVI · Gameing Index<br/>Independent concept · No publisher affiliation<br/>
        <span style={{ color: GI.violet }}>Volume One — 001</span>
      </div>
    </div>
  </div>
);

Object.assign(window, { Desktop, Mobile });