// Variant 2 — Architectural Grid (VT-brand reskin)
// White nav, DM Sans display + DM Mono labels, rigid 12-col, photos as exhibits.
// Maroon accent block + Burnt Orange punctuation.

const gridStyles = {
  page: {
    width: 1440, fontFamily: VT_FONT.sans,
    color: VT.black, background: VT.white,
    fontSize: 15, lineHeight: 1.5, letterSpacing: '-0.005em'
  },
  mono: {
    fontFamily: VT_FONT.mono, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase'
  },
  rule: { background: '#E6E4DF', height: 1, width: '100%' }
};

const G = {};

G.TopBar = () =>
<div style={{
  background: VT.black, color: VT.cream, height: 40,
  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  padding: '0 40px', fontSize: 12,
  ...gridStyles.mono
}}>
    <span style={{ opacity: 0.65 }}>VTCRC / NEWS &amp; UPDATES</span>
    <span style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
      <span style={{ opacity: 0.85 }}>Stay in the know with VTCRC news &amp; happenings.</span>
      <a style={{ color: VT.orange, borderBottom: `1px solid ${VT.orange}`, paddingBottom: 2, cursor: 'pointer' }}>Sign up →</a>
    </span>
    <span style={{ opacity: 0.65 }}>EST. 1985</span>
  </div>;


G.Nav = () =>
<header style={{ background: VT.white, borderBottom: `1px solid ${VT.black}` }}>
    <div style={{ padding: '0 40px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'stretch', height: 88 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingRight: 48, borderRight: '1px solid #E6E4DF' }}>
        <VTMark color={VT.white} bg={VT.maroon} size={44} />
        <div style={{ lineHeight: 1.1 }}>
          <div style={{ ...gridStyles.mono, fontSize: 10, color: '#6C6A65' }}>VIRGINIA TECH</div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 2 }}>Corporate Research Center</div>
        </div>
      </div>
      <nav style={{ display: 'flex', alignItems: 'center', paddingLeft: 48, gap: 0 }}>
        {[
      { l: 'Community', active: false },
      { l: 'Property', active: false },
      { l: 'Work Here', active: true },
      { l: 'News & Events', active: false }].
      map((n) =>
      <a key={n.l} style={{
        ...gridStyles.mono, fontSize: 11, fontWeight: 700,
        padding: '10px 22px', cursor: 'pointer',
        color: n.active ? VT.white : VT.black,
        background: n.active ? VT.maroon : 'transparent'
      }}>{n.l}</a>
      )}
      </nav>
      <div style={{ display: 'flex', alignItems: 'center', gap: 22, paddingLeft: 48, borderLeft: '1px solid #E6E4DF', ...gridStyles.mono, fontSize: 10 }}>
        {['Calendar', 'Jobs', 'Contact', 'About'].map((l) => <a key={l} style={{ cursor: 'pointer', color: VT.black }}>{l}</a>)}
        <span style={{
        padding: '8px 14px', border: `1px solid ${VT.black}`, cursor: 'pointer'
      }}>TENANT LOGIN</span>
        <span style={{
        width: 38, height: 38, background: VT.black, color: VT.white,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
      }}><SearchIcon size={14} color={VT.white} /></span>
      </div>
    </div>
  </header>;


G.Hero = () =>
<section>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 0, borderBottom: `1px solid ${VT.black}` }}>
      <div style={{ gridColumn: '1 / 8', padding: '72px 40px', borderRight: '1px solid #E6E4DF' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 48 }}>
          <div style={{ ...gridStyles.mono, color: VT.maroon }}>01 / WHERE EDUCATION MEETS BUSINESS</div>
          <div style={{ ...gridStyles.mono, color: '#6C6A65' }}>BLACKSBURG · NEWPORT NEWS</div>
        </div>
        <h1 style={{ ...{
          margin: 0, fontSize: 108, fontWeight: 700, letterSpacing: '-0.045em', lineHeight: 0.92,
          fontFamily: VT_FONT.sans
        }, fontFamily: "Montserrat", fontSize: "90px", letterSpacing: "-1.5px" }}>
          Big ideas<br />start in <span style={{ color: VT.maroon, fontFamily: "Montserrat", fontSize: "90px", letterSpacing: "-1px" }}>Virginia.</span>
        </h1>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, marginTop: 64, alignItems: 'start' }}>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: '#28261F', margin: 0 }}>
            Turning ideas into real‑world impact. 230+ tenant companies, 3,500+ people,
            1.25M square feet of office and lab space — engineered for research that ships.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <button style={{
            background: VT.maroon, color: VT.white, border: 'none', padding: '18px 26px',
            ...gridStyles.mono, fontSize: 11, cursor: 'pointer', display: 'flex',
            justifyContent: 'space-between', alignItems: 'center'
          }}>Learn more <ArrowIcon size={14} color={VT.white} /></button>
            <button style={{
            background: VT.white, color: VT.black, border: `1px solid ${VT.black}`, padding: '18px 26px',
            ...gridStyles.mono, fontSize: 11, cursor: 'pointer', display: 'flex',
            justifyContent: 'space-between', alignItems: 'center'
          }}>See who's here <ArrowIcon size={14} /></button>
          </div>
        </div>
      </div>
      <div style={{ gridColumn: '8 / 13', position: 'relative', minHeight: 600 }}>
        <img src={VTCRC_IMG.hero} alt="VTCRC"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{
        position: 'absolute', left: 24, top: 24,
        ...gridStyles.mono, fontSize: 10, color: VT.white,
        background: 'rgba(28,28,28,0.75)', padding: '8px 12px', backdropFilter: 'blur(8px)'
      }}>IMG-001 / PRATT DRIVE / VTCRC</div>
        <div style={{
        position: 'absolute', right: 24, bottom: 24,
        ...gridStyles.mono, fontSize: 10, color: VT.white,
        background: 'rgba(28,28,28,0.75)', padding: '8px 12px', backdropFilter: 'blur(8px)'
      }}>↗ FEATURED LANDMARK</div>
      </div>
    </div>
  </section>;


G.Stats = () =>
<section style={{ borderBottom: `1px solid ${VT.black}`, background: VT.cream }}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 0 }}>
      <div style={{ gridColumn: '1 / 5', padding: '56px 40px', borderRight: '1px solid #E6E4DF' }}>
        <div style={{ ...gridStyles.mono, color: VT.maroon }}>02 / TECH CLUSTERS</div>
        <h2 style={{
        margin: '24px 0 0 0', fontSize: 46, fontWeight: 700,
        letterSpacing: '-0.03em', lineHeight: 1.02
      }}>Space with purpose for big ideas.</h2>
      </div>
      {[
    { n: '1.25M', l: 'SQ. FT.', s: 'Office & lab clustered across 230 acres.' },
    { n: '230+', l: 'TENANTS', s: 'From seed to scale.' },
    { n: '3,500+', l: 'PEOPLE', s: 'Working in the park.' },
    { n: '40', l: 'BUILDINGS', s: 'In Blacksburg.' }].
    map((s, i, arr) =>
    <div key={s.l} style={{ gridColumn: `${5 + i * 2} / ${7 + i * 2}`, padding: '56px 24px', borderRight: i < arr.length - 1 ? '1px solid #E6E4DF' : 'none' }}>
          <div style={{ ...gridStyles.mono, color: '#6C6A65' }}>{s.l}</div>
          <div style={{ fontSize: 60, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 8, fontFamily: VT_FONT.sans }}>
            {s.n.includes('+') ? <>{s.n.replace('+', '')}<span style={{ color: VT.orange }}>+</span></> : s.n}
          </div>
          <div style={{ fontSize: 12, color: '#3B392F', marginTop: 14, lineHeight: 1.5 }}>{s.s}</div>
        </div>
    )}
    </div>
  </section>;


G.LabGrid = () =>
<section style={{ borderBottom: `1px solid ${VT.black}` }}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 0 }}>
      <div style={{ gridColumn: '1 / 8', position: 'relative', minHeight: 620, borderRight: '1px solid #E6E4DF' }}>
        <img src={VTCRC_IMG.labsPromo} alt="Custom lab space"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{
        position: 'absolute', left: 24, top: 24, ...gridStyles.mono,
        fontSize: 10, color: VT.white, background: 'rgba(28,28,28,0.75)', padding: '8px 12px'
      }}>IMG-002 / COGRO LAB / WORK IN PROGRESS</div>
        <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(28,28,28,0) 50%, rgba(28,28,28,0.7))'
      }} />
        <div style={{ position: 'absolute', left: 32, bottom: 32, color: VT.white, maxWidth: 480 }}>
          <div style={{ ...gridStyles.mono, color: VT.cream }}>WORK HERE</div>
          <h3 style={{ margin: '12px 0 0 0', fontSize: 40, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
            Custom lab space for world‑class research.
          </h3>
          <button style={{
          marginTop: 24, background: VT.white, color: VT.black, border: 'none',
          padding: '14px 22px', ...gridStyles.mono, fontSize: 11, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 14
        }}>Work Here <ArrowIcon size={12} /></button>
        </div>
      </div>
      <div style={{ gridColumn: '8 / 13', display: 'grid', gridTemplateRows: '1fr 1fr 1fr' }}>
        {[
      { label: 'SEFC', name: 'Secure Energy Future Center', src: VTCRC_IMG.event },
      { label: 'ERC', name: 'Entrepreneur Resource Center', src: VTCRC_IMG.meeting },
      { label: 'COgro', name: 'Coworking & Labs', src: VTCRC_IMG.coworking }].
      map((c, i) =>
      <div key={c.label} style={{ position: 'relative', borderBottom: i < 2 ? `1px solid ${VT.black}` : 'none' }}>
            <img src={c.src} alt={c.name}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(28,28,28,0) 40%, rgba(28,28,28,0.7))'
        }} />
            <div style={{
          position: 'absolute', left: 24, bottom: 20, right: 24,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', color: VT.white
        }}>
              <div>
                <div style={{ ...gridStyles.mono, fontSize: 9, opacity: 0.75 }}>0{i + 3} /</div>
                <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 4 }}>{c.label}</div>
                <div style={{ fontSize: 11, opacity: 0.85, marginTop: 2 }}>{c.name}</div>
              </div>
              <span style={{
            width: 36, height: 36, background: VT.orange, color: VT.black,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 18, fontWeight: 600
          }}>+</span>
            </div>
          </div>
      )}
      </div>
    </div>
  </section>;


G.Innovation = () =>
<section style={{ padding: '90px 40px 110px 40px', borderBottom: `1px solid ${VT.black}` }}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32, marginBottom: 64 }}>
      <div style={{ gridColumn: '1 / 7' }}>
        <div style={{ ...gridStyles.mono, color: VT.maroon }}>03 / INNOVATION HAPPENS HERE</div>
        <h2 style={{ margin: '24px 0 0 0', fontSize: 64, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 0.98 }}>
          Disrupting industry from the inside out.
        </h2>
      </div>
      <div style={{ gridColumn: '8 / 13', display: 'flex', alignItems: 'center' }}>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: '#28261F', margin: 0 }}>
          Since 1985, more than 750 premier organizations have called the Virginia Tech Corporate
          Research Center home. Today, the enterprise spans Virginia — providing leading‑edge innovators
          unparalleled access to resources, partnerships, and opportunities for growth.
        </p>
      </div>
    </div>

    <div style={gridStyles.rule} />
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
      {[
    { n: '04', kicker: 'Move Here', body: 'Ideas and innovation collide in a next-generation technology corridor.', src: VTCRC_IMG.heroCampus },
    { n: '05', kicker: 'Work Here', body: 'Intellectual curiosity drives the Tier 1 research university right next door.', src: VTCRC_IMG.labWork },
    { n: '06', kicker: 'Live Here', body: 'Our vibrant community features a high-quality lifestyle with a low cost of living.', src: VTCRC_IMG.ridge }].
    map((c, i) =>
    <div key={c.kicker} style={{ padding: '40px 32px 32px 32px', borderRight: i < 2 ? '1px solid #E6E4DF' : 'none' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ ...gridStyles.mono, color: VT.maroon }}>{c.n} / {c.kicker.toUpperCase()}</div>
            <ArrowIcon size={16} />
          </div>
          <div style={{ marginTop: 28, height: 240, position: 'relative', overflow: 'hidden' }}>
            <img src={c.src} alt={c.kicker}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <h3 style={{ margin: '28px 0 0 0', fontSize: 28, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1 }}>{c.kicker}.</h3>
          <p style={{ marginTop: 12, fontSize: 14, color: '#3B392F', lineHeight: 1.55 }}>{c.body}</p>
        </div>
    )}
    </div>
  </section>;


G.Property = () =>
<section style={{ background: VT.maroon, color: VT.white, borderBottom: `1px solid ${VT.black}` }}>
    <div style={{ padding: '90px 40px 30px 40px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32 }}>
        <div style={{ gridColumn: '1 / 7' }}>
          <div style={{ ...gridStyles.mono, color: VT.orange }}>07 / PROPERTY</div>
          <h2 style={{ margin: '24px 0 0 0', fontSize: 64, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1 }}>
            Create a space that's made for your company.
          </h2>
        </div>
        <div style={{ gridColumn: '8 / 13', display: 'flex', alignItems: 'flex-end' }}>
          <p style={{ fontSize: 15, lineHeight: 1.6, margin: 0, color: 'rgba(255,255,255,0.88)' }}>
            The VTCRC's unique leasing structure allows for movement and growth unlike what you'd
            find elsewhere. If you're looking for a custom build-out, we have plots to choose from
            that are ready for you to break ground.
          </p>
        </div>
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 0, marginTop: 48, borderTop: '1px solid rgba(255,255,255,0.18)' }}>
      <div style={{ gridColumn: '1 / 8', position: 'relative', minHeight: 520, borderRight: '1px solid rgba(255,255,255,0.18)' }}>
        <img src={VTCRC_IMG.archWonders} alt="Available suites"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{
        position: 'absolute', left: 24, top: 24, ...gridStyles.mono,
        fontSize: 10, color: VT.white, background: 'rgba(28,28,28,0.7)', padding: '8px 12px'
      }}>IMG-007 / AVAILABLE SUITES</div>
        <button style={{
        position: 'absolute', left: 32, bottom: 32,
        background: VT.white, color: VT.black, border: 'none',
        padding: '14px 22px', ...gridStyles.mono, fontSize: 11, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 14
      }}>Available Suites <ArrowIcon size={12} /></button>
      </div>
      <div style={{ gridColumn: '8 / 13', padding: '48px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <div style={{ ...gridStyles.mono, color: VT.orange }}>ARCHITECTURAL WONDERS</div>
          <p style={{
          margin: '16px 0 0 0', fontSize: 26, fontWeight: 600,
          letterSpacing: '-0.02em', lineHeight: 1.2, fontFamily: VT_FONT.serif, fontStyle: 'italic'
        }}>Our buildings win awards for creative design.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 24 }}>
          <div style={{ height: 160, position: 'relative', overflow: 'hidden' }}>
            <img src={VTCRC_IMG.buildToSuit} alt=""
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ height: 160, position: 'relative', overflow: 'hidden' }}>
            <img src={VTCRC_IMG.archWonders} alt=""
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 32 }}>
          <button style={{
          width: 44, height: 44, background: 'transparent',
          border: '1px solid rgba(255,255,255,0.4)', color: VT.white, cursor: 'pointer'
        }}><ArrowIcon size={14} dir="left" color={VT.white} /></button>
          <button style={{
          width: 44, height: 44, background: VT.orange, border: 'none', color: VT.black, cursor: 'pointer'
        }}><ArrowIcon size={14} /></button>
          <div style={{ ...gridStyles.mono, color: VT.orange, marginLeft: 'auto', alignSelf: 'center' }}>01 / 06</div>
        </div>
      </div>
    </div>
  </section>;


G.Flexible = () =>
<section style={{ borderBottom: `1px solid ${VT.black}` }}>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)' }}>
      <div style={{ gridColumn: '1 / 7', padding: '80px 40px', borderRight: '1px solid #E6E4DF' }}>
        <div style={{ ...gridStyles.mono, color: VT.maroon }}>08 / INNOVATE AND GROW</div>
        <h2 style={{ margin: '24px 0 0 0', fontSize: 58, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1 }}>
          Flexible Office and Lab Space.
        </h2>
        <p style={{ marginTop: 28, fontSize: 15.5, lineHeight: 1.65, color: '#28261F', maxWidth: 520 }}>
          Flexible lab facilities, office space, and resources designed for startups, seed companies,
          and entrepreneurs. Space is leasing now on flexible terms, starting at just $700.
        </p>
        <p style={{ marginTop: 18, fontSize: 15.5, lineHeight: 1.65, color: '#28261F', maxWidth: 520 }}>
          For those seeking a collaborative environment, COgro coworking offers modern, shared
          workspaces with the amenities to support your growth.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
          <button style={{
          background: VT.black, color: VT.white, border: 'none', padding: '16px 24px',
          ...gridStyles.mono, fontSize: 11, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 14
        }}>Learn more — COgro <ArrowIcon size={12} color={VT.white} /></button>
          <button style={{
          background: VT.white, color: VT.black, border: `1px solid ${VT.black}`, padding: '16px 24px',
          ...gridStyles.mono, fontSize: 11, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 14
        }}>Brochure (PDF) <ArrowIcon size={12} /></button>
        </div>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, borderTop: '1px solid #E6E4DF', paddingTop: 24 }}>
          {[['$700', 'Starting/mo'], ['24/7', 'Access'], ['12mo', 'Min term']].map(([n, l]) =>
        <div key={l}>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em' }}>{n}</div>
              <div style={{ ...gridStyles.mono, color: '#6C6A65', marginTop: 4 }}>{l}</div>
            </div>
        )}
        </div>
      </div>
      <div style={{ gridColumn: '7 / 13', position: 'relative', minHeight: 680 }}>
        <img src={VTCRC_IMG.labsPromo} alt="Lab"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{
        position: 'absolute', left: 24, top: 24, ...gridStyles.mono,
        fontSize: 10, color: VT.white, background: 'rgba(28,28,28,0.7)', padding: '8px 12px'
      }}>IMG-008 / COGRO LAB</div>
      </div>
    </div>
  </section>;


G.Footer = () => {
  const cols = [
  { head: 'TENANT DIRECTORY', items: [] },
  { head: 'PROPERTY', items: ['Build to Suit and Pad Sites', 'Available Suites', 'Resources', 'Master Plan Phase I', 'Master Plan Phase II'] },
  { head: 'WORK HERE', items: ['Secure Energy Future Center', 'Entrepreneur Resource Center', 'COgro (Coworking)', 'Wet and Dry Labs (COgro Labs)'] },
  { head: 'ABOUT', items: ['VTCRC in Blacksburg', 'VTCRC at Newport News', 'Community', 'Events', 'News', 'Jobs'] },
  { head: 'FOR TENANTS', items: ['Reserve Conference Room', 'Maintenance Request', 'Submit an Event'] }];

  return (
    <footer style={{ background: VT.black, color: VT.cream }}>
      <div style={{ padding: '40px 40px', borderBottom: '1px solid #2A2823', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ ...gridStyles.mono, color: '#A09D94' }}>STAY IN THE LOOP / EMAIL</div>
        <div style={{ display: 'flex', gap: 0, maxWidth: 520, flex: 1, marginLeft: 40, alignItems: 'stretch' }}>
          <input placeholder="your.email@address" style={{
            flex: 1, background: 'transparent', border: '1px solid #2A2823',
            color: VT.cream, padding: '14px 18px', fontSize: 14,
            fontFamily: VT_FONT.mono, outline: 'none'
          }} />
          <button style={{
            background: VT.maroon, color: VT.white, border: 'none',
            padding: '14px 28px', ...gridStyles.mono, fontSize: 11, cursor: 'pointer'
          }}>SUBMIT →</button>
        </div>
      </div>

      <div style={{ padding: '72px 40px 40px 40px', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32 }}>
        {cols.map((c) =>
        <div key={c.head}>
            <div style={{ ...gridStyles.mono, color: VT.orange, marginBottom: 18 }}>{c.head}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map((i) => <a key={i} style={{ fontSize: 13, color: '#C7C4BB', cursor: 'pointer' }}>{i}</a>)}
            </div>
          </div>
        )}
      </div>

      <div style={{
        padding: '40px 40px', borderTop: '1px solid #2A2823',
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr auto', gap: 32, alignItems: 'flex-start'
      }}>
        {[
        { h: 'BLACKSBURG', a: '1715 Pratt Drive, Suite 1000', c: 'Blacksburg VA 24060', p: '(540) 961‑3600', e: 'info@vtcrc.com' },
        { h: 'NEWPORT NEWS', a: '700 Tech Center Pkwy, Suite 305', c: 'Newport News VA 23606', p: '(540) 443‑9282', e: 'sefc@vtcrc.com' },
        { h: 'COGRO COWORKING + LABS', a: '2200 Kraft Dr SW, Suite 1050', c: 'Blacksburg VA 24060', p: '(540) 961‑3600', e: 'cogro@vtcrc.com' }].
        map((c) =>
        <div key={c.h} style={{ fontSize: 12, color: '#C7C4BB', lineHeight: 1.6 }}>
            <div style={{ ...gridStyles.mono, color: VT.orange, marginBottom: 10 }}>{c.h}</div>
            <div>{c.a}</div>
            <div>{c.c}</div>
            <div style={{ marginTop: 6 }}>{c.p}</div>
            <div>{c.e}</div>
          </div>
        )}
        <SocialRow color={VT.orange} />
      </div>

      <div style={{
        padding: '18px 40px', borderTop: '1px solid #2A2823', display: 'flex',
        justifyContent: 'space-between', ...gridStyles.mono, color: '#6E6B62', fontSize: 10
      }}>
        <span>© 2026 VTCRC. ALL RIGHTS RESERVED.</span>
        <span>PRIVACY · ACCESSIBILITY · COOKIE POLICY</span>
      </div>
    </footer>);

};

const GridHome = () =>
<div style={gridStyles.page}>
    <G.TopBar />
    <G.Nav />
    <G.Hero />
    <G.Stats />
    <G.LabGrid />
    <G.Innovation />
    <G.Property />
    <G.Flexible />
    <G.Footer />
  </div>;


window.GridHome = GridHome;