// Variant 3 — Confident Maroon (VT-brand reskin)
// Solid Chicago Maroon nav, Rubik display + Crimson Text italic accents,
// off-white body, large rounded photo cards, Burnt Orange CTAs.

const maroonStyles = {
  page: {
    width: '100%', fontFamily: VT_FONT.rubik,
    color: VT.ink, background: VT.paper,
    fontSize: 15, lineHeight: 1.5, letterSpacing: '-0.005em'
  },
  display: {
    fontFamily: VT_FONT.rubik, fontWeight: 700,
    letterSpacing: '-0.035em', lineHeight: 0.98
  },
  italic: {
    fontFamily: VT_FONT.serif, fontStyle: 'italic',
    fontWeight: 600, letterSpacing: '-0.01em'
  },
  eyebrow: {
    fontFamily: VT_FONT.sans, fontWeight: 900,
    fontSize: 18, letterSpacing: '2px', textTransform: 'uppercase'
  },
  // Kept for footer column headers / chips that still want the condensed-cap look
  label: {
    fontFamily: VT_FONT.condensed, fontWeight: 700,
    fontSize: 13, letterSpacing: '0.20em', textTransform: 'uppercase'
  },
  mono: {
    fontFamily: VT_FONT.mono, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase'
  }
};

const M = {};

// Content column. Sections (top bar, nav, hero, stats, lab grid, innovation,
// property, flexible, footer) now span 100% of the viewport so colored
// backgrounds bleed edge to edge; the content INSIDE each section is
// constrained to MAX_W and centered.
const MAX_W = 1440;
M.Container = ({ children, style }) =>
<div style={{ maxWidth: MAX_W, margin: '0 auto', width: '100%', ...style }}>
    {children}
  </div>;


M.TopBar = () =>
<div style={{
  background: VT.black, color: VT.cream,
  fontSize: 12,
  ...maroonStyles.mono
}}>
    <M.Container style={{
    height: 40, padding: '0 40px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between'
  }}>
    <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>
    </M.Container>
  </div>;


M.Nav = () => {
  const [open, setOpen] = React.useState(null); // index of open dropdown
  const closeTimer = React.useRef(null);
  const handleEnter = (i) => {
    clearTimeout(closeTimer.current);
    setOpen(i);
  };
  const handleLeave = () => {
    clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setOpen(null), 120);
  };

  return (
    <header style={{ background: VT.white, borderBottom: `1px solid ${VT.black}`, position: 'relative', zIndex: 50 }}>
      <M.Container 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={{ ...maroonStyles.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: 'stretch', paddingLeft: 48, gap: 0 }}>
          {NAV_ITEMS.map((n, i) => {
            const isOpen = open === i;
            const isHot = isOpen || n.active;
            return (
              <div key={n.l}
              onMouseEnter={() => handleEnter(i)}
              onMouseLeave={handleLeave}
              style={{ display: 'flex', alignItems: 'stretch', position: 'relative' }}>
                <a href={n.href} style={{
                  ...maroonStyles.mono, fontSize: 11, fontWeight: 700,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '0 22px', cursor: 'pointer',
                  color: isHot ? VT.white : VT.black,
                  background: isHot ? VT.maroon : 'transparent',
                  transition: 'background 180ms ease, color 180ms ease',
                  textDecoration: 'none'
                }}>
                  {n.l}
                  <svg width="9" height="9" viewBox="0 0 12 12" fill="none"
                  style={{
                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
                    transition: 'transform 200ms ease',
                    opacity: 0.85
                  }}>
                    <path d="M2.5 4.5 L6 8 L9.5 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </a>

                {/* Dropdown panel */}
                {isOpen &&
                <div style={{
                  position: 'absolute', top: '100%', left: 0,
                  minWidth: 560, background: VT.white,
                  border: `1px solid ${VT.black}`, borderTop: 'none',
                  boxShadow: '0 24px 40px -16px rgba(28,28,28,0.18)',
                  borderRadius: '0 0 10px 10px',
                  overflow: 'hidden',
                  animation: 'vtcrcDropdownIn 220ms cubic-bezier(0.2,0.8,0.2,1)'
                }}>
                    {/* Maroon header strip with blurb */}
                    <div style={{
                    background: VT.maroon, color: VT.cream,
                    padding: '16px 24px',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16
                  }}>
                      <div style={{ ...maroonStyles.mono, fontSize: 11, color: VT.orange, fontWeight: 700 }}>{n.l.toUpperCase()}</div>
                      <div style={{ fontSize: 13, color: 'rgba(244,241,232,0.85)', fontFamily: VT_FONT.sans, fontWeight: 500 }}>{n.blurb}</div>
                    </div>

                    {/* Item grid */}
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
                      {n.items.map((it, j) =>
                    <a key={it.l} href={it.href} style={{
                      display: 'flex', gap: 14, padding: '20px 24px',
                      color: VT.ink, textDecoration: 'none',
                      borderRight: j % 2 === 0 ? '1px solid #E6E4DF' : 'none',
                      borderBottom: j < n.items.length - 2 ? '1px solid #E6E4DF' : 'none',
                      cursor: 'pointer',
                      transition: 'background 160ms ease'
                    }}
                    onMouseEnter={(e) => {e.currentTarget.style.background = VT.paper;}}
                    onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';}}>
                      
                          <div style={{
                        width: 8, height: 8, borderRadius: 999, background: VT.orange,
                        marginTop: 7, flexShrink: 0
                      }} />
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{
                          fontFamily: VT_FONT.serif, fontSize: 16, fontWeight: 700,
                          letterSpacing: '-0.01em', lineHeight: 1.2, color: VT.ink
                        }}>{it.l}</div>
                            <div style={{
                          fontFamily: VT_FONT.sans, fontSize: 12.5, color: '#5A5446',
                          marginTop: 4, lineHeight: 1.4
                        }}>{it.desc}</div>
                          </div>
                          <ArrowIcon size={14} color={VT.maroon} />
                        </a>
                    )}
                    </div>

                    {/* Footer link back to section */}
                    <a href={n.href} style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '14px 24px', background: VT.paper,
                    ...maroonStyles.mono, fontSize: 11, fontWeight: 700, color: VT.maroon,
                    textDecoration: 'none', borderTop: '1px solid #E6E4DF'
                  }}>
                      <span>Explore all {n.l}</span>
                      <ArrowIcon size={13} color={VT.maroon} />
                    </a>
                  </div>
                }
              </div>);

          })}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 22, paddingLeft: 48, borderLeft: '1px solid #E6E4DF', ...maroonStyles.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', cursor: 'pointer'
          }}><SearchIcon size={14} color={VT.white} /></span>
        </div>
      </M.Container>

      <style>{`
        @keyframes vtcrcDropdownIn {
          from { opacity: 0; transform: translateY(-6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </header>);

};


// Hero slider — 4 slides from vtcrc.com. Left content track and right photo
// track move together on a 600ms ease curve; auto-advances every 7s and pauses
// briefly when the user clicks a pagination dot.
M.HERO_SLIDES = [
{
  kicker: 'Where education meets business',
  title: <>Big ideas <span style={{ ...maroonStyles.italic, color: VT.maroon }}>start</span> in Virginia.</>,
  body: 'Turning ideas into real-world impact. Advancing sustainable, defense-aligned energy innovation across the Commonwealth.',
  cta: 'Learn more',
  href: '/property/',
  src: 'assets/hero/slide_01.jpg',
  alt: 'VTCRC — where education meets business'
},
{
  kicker: "Powering what's next",
  title: <>Powering <span style={{ ...maroonStyles.italic, color: VT.maroon }}>what's</span> next.</>,
  body: 'Advancing sustainable, defense-aligned energy innovation across Virginia.',
  cta: 'Learn more',
  href: '/sefc/',
  src: 'assets/hero/slide_02.jpg',
  alt: 'VTCRC Newport News — advancing the secure energy future'
},
{
  kicker: 'Empowering innovators',
  title: <>Empowering <span style={{ ...maroonStyles.italic, color: VT.maroon }}>innovators.</span></>,
  body: 'Guiding entrepreneurs with tools, mentorship, and pathways to scale.',
  cta: 'Learn more',
  href: '/entrepreneur-resource-center/',
  src: 'assets/hero/slide_03.png',
  alt: 'VTCRC empowers entrepreneurs with tools, mentorship, and pathways to scale'
},
{
  kicker: 'Innovation without boundaries',
  title: <>Innovation <span style={{ ...maroonStyles.italic, color: VT.maroon }}>without</span> boundaries.</>,
  body: 'Connecting talent, research, and industry to power statewide growth.',
  cta: 'Learn more',
  href: '/about/',
  src: 'assets/hero/slide_04.jpg',
  alt: 'Connect with talent, research, and industry to power statewide growth'
}];


M.Hero = () => {
  const slides = M.HERO_SLIDES;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % slides.length), 7000);
    return () => clearInterval(t);
  }, [paused, slides.length]);

  const trackStyle = {
    display: 'flex',
    width: `${slides.length * 100}%`,
    height: '100%',
    transform: `translateX(-${idx * (100 / slides.length)}%)`,
    transition: 'transform 700ms cubic-bezier(0.65, 0, 0.35, 1)'
  };
  const panelStyle = { width: `${100 / slides.length}%`, flexShrink: 0 };

  const pauseBriefly = () => {
    setPaused(true);
    clearTimeout(M._heroResume);
    M._heroResume = setTimeout(() => setPaused(false), 10000);
  };
  const goTo = (i) => {setIdx(i);pauseBriefly();};
  const next = () => goTo((idx + 1) % slides.length);
  const prev = () => goTo((idx - 1 + slides.length) % slides.length);

  return (
    <section style={{ background: VT.white, padding: '72px 56px 96px', margin: '0px 0px 31px', height: 714 }}>
      <M.Container style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 48, alignItems: 'stretch', height: '100%' }}>
        {/* Left content track */}
        <div style={{ position: 'relative', overflow: 'hidden' }}>
          <div style={trackStyle}>
            {slides.map((s, i) =>
            <div key={i} style={{
              ...panelStyle,
              padding: '48px 44px 48px 0',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
            }}>
                <div>
                  <div style={{ ...maroonStyles.eyebrow, color: VT.orange, fontSize: 14 }}>{s.kicker}</div>
                  <h1 style={{ ...maroonStyles.display, fontSize: 76, margin: '28px 0 0 0', color: VT.ink, fontWeight: 600 }}>
                    {s.title}
                  </h1>
                  <p style={{ marginTop: 28, fontSize: 17, color: '#3D362B', lineHeight: 1.55, maxWidth: 420, fontFamily: VT_FONT.rubik }}>
                    {s.body}
                  </p>
                </div>
                <div style={{ display: 'flex', gap: 14, marginTop: 48, alignItems: 'center' }}>
                  <button style={{
                  background: VT.orange, color: VT.ink, border: 'none', padding: '16px 26px',
                  borderRadius: 10, fontSize: 14, fontWeight: 700, display: 'inline-flex',
                  alignItems: 'center', gap: 12, cursor: 'pointer', fontFamily: VT_FONT.rubik
                }}>{s.cta} <ArrowIcon size={14} color={VT.ink} /></button>
                  <button style={{
                  background: VT.cream, color: VT.ink, border: 'none', padding: '16px 24px',
                  borderRadius: 10, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: VT_FONT.rubik
                }}>See who's here</button>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Right photo track */}
        <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden' }}>
          <div style={trackStyle}>
            {slides.map((s, i) =>
            <div key={i} style={{ ...panelStyle, position: 'relative' }}>
                <img src={s.src} alt={s.alt}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            )}
          </div>

          {/* Pagination dots */}
          <div style={{
            position: 'absolute', bottom: 24, left: 32, display: 'flex', gap: 10,
            alignItems: 'center', zIndex: 3
          }}>
            {slides.map((_, i) =>
            <button key={i} onClick={() => goTo(i)} aria-label={`Slide ${i + 1}`} style={{
              width: i === idx ? 36 : 10, height: 10, borderRadius: 999,
              background: i === idx ? VT.orange : 'rgba(255,255,255,0.7)',
              border: 'none', cursor: 'pointer', padding: 0,
              transition: 'all 400ms cubic-bezier(0.65, 0, 0.35, 1)'
            }} />
            )}
          </div>

          {/* Prev / Next arrows */}
          <div style={{
            position: 'absolute', bottom: 20, right: 24, display: 'flex', gap: 8, zIndex: 3
          }}>
            <button onClick={prev} aria-label="Previous slide" style={{
              width: 40, height: 40, borderRadius: 10, background: 'rgba(28,28,28,0.55)',
              border: 'none', color: VT.cream, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              backdropFilter: 'blur(6px)'
            }}><ArrowIcon size={14} dir="left" color={VT.cream} /></button>
            <button onClick={next} aria-label="Next slide" style={{
              width: 40, height: 40, borderRadius: 10, background: 'rgba(28,28,28,0.55)',
              border: 'none', color: VT.cream, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              backdropFilter: 'blur(6px)'
            }}><ArrowIcon size={14} color={VT.cream} /></button>
          </div>
        </div>
      </M.Container>
    </section>);

};


// Tenant logo marquee — continuous-scrolling row of placeholder lockups.
// Logos are inline SVG stand-ins (mark + wordmark) drawn in muted neutrals so
// they read as a group, not as competing accents. Drop in real client SVGs by
// replacing entries in M.LOGO_BRANDS.
M.LOGO_BRANDS = [
{ mark: 'hex', name: 'Aegis Defense' },
{ mark: 'dot', name: 'Ridgepoint' },
{ mark: 'spark', name: 'Halcyon Bio' },
{ mark: 'bars', name: 'Northbound' },
{ mark: 'orbit', name: 'Meridian AI' },
{ mark: 'chevron', name: 'Foundry 4' },
{ mark: 'square', name: 'Cardinal Labs' },
{ mark: 'arc', name: 'Pratt + Co.' },
{ mark: 'triangle', name: 'Volta Materials' },
{ mark: 'cross', name: 'New River Works' },
{ mark: 'asterisk', name: 'Specter Sensing' },
{ mark: 'pill', name: 'Quartermast' }];


const LogoMark = ({ kind, color }) => {
  const c = color;
  switch (kind) {
    case 'hex':
      return <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><path d="M16 2 28 9v14L16 30 4 23V9z" stroke={c} strokeWidth="2" /></svg>;
    case 'dot':
      return <svg width="28" height="28" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill={c} /><circle cx="22" cy="10" r="3" fill="#FFFFFF" /></svg>;
    case 'spark':
      return <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><path d="M16 4v10M16 18v10M4 16h10M18 16h10" stroke={c} strokeWidth="2.5" strokeLinecap="round" /><circle cx="16" cy="16" r="2" fill={c} /></svg>;
    case 'bars':
      return <svg width="28" height="28" viewBox="0 0 32 32"><rect x="5" y="18" width="4" height="10" fill={c} /><rect x="12" y="10" width="4" height="18" fill={c} /><rect x="19" y="14" width="4" height="14" fill={c} /><rect x="26" y="6" width="4" height="22" fill={c} /></svg>;
    case 'orbit':
      return <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><ellipse cx="16" cy="16" rx="13" ry="6" stroke={c} strokeWidth="2" /><circle cx="16" cy="16" r="3" fill={c} /></svg>;
    case 'chevron':
      return <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><path d="M4 22 16 10 28 22" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /><path d="M10 28 16 22 22 28" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>;
    case 'square':
      return <svg width="28" height="28" viewBox="0 0 32 32"><rect x="4" y="4" width="11" height="11" fill={c} /><rect x="17" y="4" width="11" height="11" fill="none" stroke={c} strokeWidth="2" /><rect x="4" y="17" width="11" height="11" fill="none" stroke={c} strokeWidth="2" /><rect x="17" y="17" width="11" height="11" fill={c} /></svg>;
    case 'arc':
      return <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><path d="M4 24a12 12 0 0 1 24 0" stroke={c} strokeWidth="3" strokeLinecap="round" /><circle cx="16" cy="24" r="2" fill={c} /></svg>;
    case 'triangle':
      return <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><path d="M16 4 30 28H2z" stroke={c} strokeWidth="2" /></svg>;
    case 'cross':
      return <svg width="28" height="28" viewBox="0 0 32 32"><rect x="13" y="4" width="6" height="24" fill={c} /><rect x="4" y="13" width="24" height="6" fill={c} /></svg>;
    case 'asterisk':
      return <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><g stroke={c} strokeWidth="2.5" strokeLinecap="round"><path d="M16 5v22M6.6 10.5 25.4 21.5M6.6 21.5 25.4 10.5" /></g></svg>;
    case 'pill':
      return <svg width="28" height="28" viewBox="0 0 32 32"><rect x="3" y="11" width="26" height="10" rx="5" fill={c} /><circle cx="22" cy="16" r="3" fill="#FFFFFF" /></svg>;
    default:
      return null;
  }
};

M.LogoMarquee = () => {
  // Duplicate the list so the CSS keyframe can scroll one full set out while
  // the second set scrolls in seamlessly.
  const row = [...M.LOGO_BRANDS, ...M.LOGO_BRANDS];
  const tint = '#5A5446';

  return (
    <section style={{
      background: VT.paper,
      borderTop: '1px solid rgba(28,28,28,0.06)',
      borderBottom: '1px solid rgba(28,28,28,0.06)',
      overflow: 'hidden', borderTopStyle: "solid", borderTopColor: "rgba(28, 28, 28, 0.06)", borderBottomStyle: "solid", borderBottomColor: "rgba(28, 28, 28, 0.06)", borderWidth: "0px", padding: "64px 0px 80px"
    }}>
      <M.Container style={{ padding: '0 56px', marginBottom: 28 }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          gap: 32, flexWrap: 'wrap'
        }}>
          <div style={{ ...maroonStyles.eyebrow, color: VT.maroon, letterSpacing: '2px', fontSize: 14, fontFamily: 'Montserrat', fontWeight: 700 }}>
            TRUSTED BY 230+ COMPANIES
          </div>
          <a style={{
            ...maroonStyles.mono, fontSize: 11, fontWeight: 700, color: VT.maroon,
            cursor: 'pointer', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8
          }}>
            View tenant directory <ArrowIcon size={12} color={VT.maroon} />
          </a>
        </div>
      </M.Container>

      {/* Marquee track — full-bleed, fades on the edges */}
      <div style={{
        position: 'relative',
        maskImage: 'linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)'
      }}>
        <div style={{
          display: 'flex', gap: 64, alignItems: 'center',
          width: 'max-content',
          animation: 'vtcrcLogoMarquee 50s linear infinite'
        }}>
          {row.map((b, i) =>
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 14,
            color: tint, opacity: 0.75,
            flexShrink: 0
          }}>
              <LogoMark kind={b.mark} color={tint} />
              <span style={{
              fontFamily: VT_FONT.serif, fontWeight: 700, fontSize: 22,
              letterSpacing: '-0.02em', whiteSpace: 'nowrap'
            }}>{b.name}</span>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @keyframes vtcrcLogoMarquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
      `}</style>
    </section>);

};


M.Stats = () =>
<section style={{ padding: '0 56px 96px 56px' }}>
    <M.Container>
    <div style={{
      background: VT.ink, color: VT.cream, borderRadius: 10,
      padding: '56px 48px'
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'start', marginBottom: 48 }}>
        <div>
          <div style={{ ...maroonStyles.eyebrow, color: VT.orange, fontSize: "14px" }}>Tech clusters</div>
          <h2 style={{ ...maroonStyles.display, fontSize: 54, margin: '18px 0 0 0', color: VT.cream, fontWeight: "600", letterSpacing: "-1.1px" }}>
            Space with purpose for <span style={{ ...maroonStyles.italic, color: VT.orange, lineHeight: "1.4" }}>
big ideas.</span>
          </h2>
        </div>
        <p style={{ color: '#A8A196', maxWidth: 380, lineHeight: 1.6, margin: '36px 0 0 0', fontFamily: VT_FONT.rubik, letterSpacing: "0.3px", fontSize: "19px" }}>A 230-acre research park, clustered
for collisions between research, capital, and talent.

      </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, borderTop: '1px solid #2A2520', paddingTop: 40 }}>
        {[{ n: '1.25M', l: 'SQUARE FEET OF OFFICE AND LAB SPACE' },
        { n: '230+', l: 'TENANT COMPANIES' },
        { n: '3,500+', l: 'EMPLOYEES IN THE PARK' },
        { n: '40', l: 'BUILDINGS IN BLACKSBURG' }].
        map((s) =>
        <div key={s.l}>
            <div style={{ ...maroonStyles.display, color: VT.cream, fontFamily: "\"Crimson Text\"", letterSpacing: "0px", fontSize: "85px", fontWeight: "500" }}>
              {s.n.includes('+') ? <>{s.n.replace('+', '')}<span style={{ color: VT.orange }}>+</span></> : s.n}
            </div>
            <div style={{ fontSize: 13, color: '#A8A196', marginTop: 10, maxWidth: 200, lineHeight: 1.5, fontFamily: VT_FONT.rubik, fontWeight: "600" }}>{s.l}</div>
          </div>
        )}
      </div>
    </div>
    </M.Container>
  </section>;


M.LabGrid = () =>
<section style={{ padding: '0 56px 110px 56px' }}>
    <M.Container>
    <div style={{ display: 'grid', gridTemplateColumns: '1.7fr 1fr', gap: 20 }}>
      <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', minHeight: 600 }}>
        <img src="assets/work-here/custom-lab.png" alt="Custom lab space"
        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.75))'
        }} />
        <div style={{ position: 'absolute', left: 40, bottom: 40, right: 40, color: VT.cream,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ ...maroonStyles.eyebrow, color: '#F5C7D6', fontSize: "14px" }}>Work here</div>
            <h3 style={{ ...maroonStyles.display, fontSize: 44, margin: '14px 0 0 0', maxWidth: 480, color: VT.cream }}>
              Custom lab space for <span style={maroonStyles.italic}>world‑class</span> research.
            </h3>
          </div>
          <button style={{
            background: VT.orange, color: VT.ink, border: 'none', padding: '16px 26px',
            borderRadius: 10, fontSize: 14, fontWeight: 700, display: 'inline-flex',
            alignItems: 'center', gap: 12, cursor: 'pointer', fontFamily: VT_FONT.rubik
          }}>Work Here <ArrowIcon size={14} /></button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr 1fr', gap: 20 }}>
        {[
        { label: 'SEFC', name: 'Secure Energy Future Center', src: 'assets/work-here/sefc.jpg' },
        { label: 'ERC', name: 'Entrepreneur Resource Center', src: 'assets/work-here/erc.jpg' },
        { label: 'COgro', name: 'Coworking & Labs', src: 'assets/work-here/cogro.jpg' }].
        map((c) =>
        <div key={c.label} style={{ position: 'relative', borderRadius: 10, overflow: 'hidden' }}>
            <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) 50%, rgba(28,28,28,0.7))'
          }} />
            <div style={{
            position: 'absolute', left: 22, bottom: 18, right: 22, color: VT.cream,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end'
          }}>
              <div>
                <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', fontFamily: VT_FONT.rubik }}>{c.label}</div>
                <div style={{ fontSize: 11, opacity: 0.85, marginTop: 2, fontFamily: VT_FONT.rubik }}>{c.name}</div>
              </div>
              <span style={{
              width: 36, height: 36, borderRadius: 10, background: VT.orange, color: VT.ink,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 18
            }}>+</span>
            </div>
          </div>
        )}
      </div>
    </div>
    </M.Container>
  </section>;


M.Innovation = () =>
<section style={{ padding: '0 56px 120px 56px', fontWeight: "300" }}>
    <M.Container>
    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 64, alignItems: 'start', marginBottom: 64 }}>
      <div>
        <div style={{ ...maroonStyles.eyebrow, color: VT.maroon, letterSpacing: "2px", fontSize: "14px", fontFamily: "Montserrat", fontWeight: "700" }}>INNOVATION HAPPENS HERE</div>
        <h2 style={{ ...maroonStyles.display, margin: '20px 0 0 0', fontWeight: "600", lineHeight: "1.05", fontSize: "82px" }}>
          Disrupting industry <span style={{ ...maroonStyles.italic, fontFamily: "Montserrat", color: "rgb(134, 31, 65)", lineHeight: "1.05", fontWeight: "600", fontSize: "82px" }}>from the inside out.</span>
        </h2>
      </div>
      <p style={{ fontSize: 16, color: '#3D362B', lineHeight: 1.6, fontFamily: VT_FONT.rubik, margin: "8px 0px 0px", padding: "0px" }}>
        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 style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
      {[
      { kicker: 'Move Here', body: 'Ideas and innovation collide in a next-generation technology corridor.',
        src: 'assets/cards/move-here.jpg', color: VT.maroon },
      { kicker: 'Work Here', body: 'Intellectual curiosity drives the Tier 1 research university right next door.',
        src: 'assets/cards/work-here.png', color: VT.orange },
      { kicker: 'Live Here', body: 'Our vibrant community features a high-quality lifestyle with a low cost of living.',
        src: 'assets/cards/live-here.png', color: VT.teal }].
      map((c, i) =>
      <div key={i} style={{
        background: VT.white, borderRadius: 10, overflow: 'hidden',
        display: 'flex', flexDirection: 'column'
      }}>
          <div style={{ position: 'relative', aspectRatio: '4/3' }}>
            <img src={c.src} alt={c.kicker}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ padding: '28px 28px 32px 28px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <h3 style={{ ...maroonStyles.display, fontSize: 34, margin: 0, color: c.color }}>
              <span style={{ color: c.color, letterSpacing: "-0.5px" }}>{c.kicker}.</span>
            </h3>
            <p style={{ fontSize: 14.5, color: '#3D362B', lineHeight: 1.55, margin: 0, fontFamily: VT_FONT.rubik }}>{c.body}</p>
            <a style={{ ...{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              marginTop: 6, fontSize: 14, fontWeight: 700, color: c.color, cursor: 'pointer',
              fontFamily: VT_FONT.rubik
            }, color: "rgb(26, 22, 18)" }}>{c.kicker} <ArrowIcon size={14} color={c.color} /></a>
          </div>
        </div>
      )}
    </div>
    </M.Container>
  </section>;


M.PROPERTY_SLIDES = [
{
  name: 'Architectural Wonders',
  detail: 'Aerial view · Blacksburg campus',
  kicker: 'Architectural wonders',
  quote: 'Our buildings win awards for creative design.',
  src: VTCRC_IMG.archWonders
},
{
  name: 'Built to Suit',
  detail: '1872 Pratt Drive · Blacksburg',
  kicker: 'Built to suit',
  quote: 'We can help you create just the right space, from the ground up.',
  src: VTCRC_IMG.buildToSuit
}];


M.Property = () => {
  const slides = M.PROPERTY_SLIDES;
  const [idx, setIdx] = React.useState(0);
  const current = slides[idx];
  const nextSlide = slides[(idx + 1) % slides.length];

  const go = (delta) => setIdx((i) => (i + delta + slides.length) % slides.length);

  return (
    <section style={{
      background: VT.maroon, color: VT.cream,
      padding: '110px 56px 130px 56px'
    }}>
      <M.Container>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div style={{ ...maroonStyles.eyebrow, color: VT.orange, fontSize: "14px" }}>Property</div>
            <h2 style={{ ...maroonStyles.display, fontSize: 82, margin: '24px 0 0 0', color: VT.cream, fontWeight: "600" }}>
              Create a space <span style={{ ...maroonStyles.italic, color: VT.orange }}>made for</span> your company.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'rgba(244,241,232,0.85)', margin: '8px 0 0 0', fontFamily: VT_FONT.rubik }}>
              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 style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24, marginTop: 64, alignItems: 'stretch' }}>
          {/* Main slide */}
          <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', minHeight: 520 }}>
            {slides.map((s, i) =>
            <img key={i} src={s.src} alt={s.name}
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
              opacity: i === idx ? 1 : 0,
              transition: 'opacity 500ms ease'
            }} />
            )}
            {/* Bottom gradient for legibility */}
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(28,28,28,0) 50%, rgba(28,28,28,0.55))',
              pointerEvents: 'none'
            }} />
            {/* CTA */}
            <button style={{
              position: 'absolute', left: 32, bottom: 32,
              background: VT.cream, color: VT.ink, border: 'none', padding: '14px 22px',
              borderRadius: 10, fontSize: 14, fontWeight: 700, display: 'inline-flex',
              alignItems: 'center', gap: 12, cursor: 'pointer', fontFamily: VT_FONT.rubik
            }}>{current.name} <ArrowIcon size={14} /></button>
          </div>

          {/* Side panel */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{
              background: 'rgba(244,241,232,0.08)', borderRadius: 10, padding: '32px 28px',
              backdropFilter: 'blur(8px)', border: '1px solid rgba(244,241,232,0.14)'
            }}>
              <div style={{ ...maroonStyles.eyebrow, color: VT.orange }}>{current.kicker}</div>
              <p style={{
                margin: '14px 0 0 0', fontSize: 22, lineHeight: 1.25,
                fontFamily: VT_FONT.serif, fontStyle: 'italic'
              }}>
                {current.quote}
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24 }}>
                <button onClick={() => go(-1)} aria-label="Previous suite" style={{
                  width: 44, height: 44, borderRadius: 10, background: 'transparent',
                  border: '1px solid rgba(244,241,232,0.4)', color: VT.cream, cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                }}><ArrowIcon size={14} dir="left" color={VT.cream} /></button>
                <button onClick={() => go(1)} aria-label="Next suite" style={{
                  width: 44, height: 44, borderRadius: 10, background: VT.orange,
                  border: 'none', color: VT.ink, cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                }}><ArrowIcon size={14} /></button>
                <div style={{
                  marginLeft: 'auto', ...maroonStyles.mono, color: 'rgba(244,241,232,0.65)',
                  fontSize: 11, fontWeight: 700
                }}>
                  {String(idx + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
                </div>
              </div>
            </div>

            {/* Next-slide preview thumbnail */}
            <button onClick={() => go(1)} aria-label={`Jump to ${nextSlide.name}`} style={{
              position: 'relative', borderRadius: 10, overflow: 'hidden',
              flex: 1, minHeight: 240, border: 'none', padding: 0, cursor: 'pointer',
              background: 'transparent'
            }}>
              {slides.map((s, i) =>
              <img key={i} src={s.src} alt={s.name}
              style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                opacity: i === (idx + 1) % slides.length ? 1 : 0,
                transition: 'opacity 500ms ease'
              }} />
              )}
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(28,28,28,0) 40%, rgba(28,28,28,0.7))',
                pointerEvents: 'none'
              }} />
              <div style={{
                position: 'absolute', left: 18, right: 18, bottom: 16,
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                color: VT.cream, textAlign: 'left'
              }}>
                <div>
                  <div style={{ ...maroonStyles.mono, fontSize: 10, color: VT.orange, fontWeight: 700 }}>UP NEXT</div>
                  <div style={{ fontSize: 16, fontWeight: 700, marginTop: 4, fontFamily: VT_FONT.rubik }}>{nextSlide.name}</div>
                </div>
                <ArrowIcon size={14} color={VT.cream} />
              </div>
            </button>
          </div>
        </div>
      </M.Container>
    </section>);

};


M.Flexible = () =>
<section style={{
  background: VT.maroon, padding: '0 56px 110px 56px',
  position: 'relative'
}}>
    <M.Container>
    <div style={{
      background: VT.paper, color: VT.ink, borderRadius: 10,
      padding: '48px 48px 56px 48px', position: 'relative', top: -40
    }}>
      <div style={{ ...maroonStyles.eyebrow, color: VT.maroon, fontSize: "14px" }}>Innovate and grow</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'center', marginTop: 24 }}>
        <div>
          <h2 style={{ ...maroonStyles.display, fontSize: 64, margin: 0, color: VT.ink, fontWeight: "600", letterSpacing: "-1px" }}>
            Flexible Office and <span style={{ ...maroonStyles.italic, color: VT.maroon }}>Lab Space.</span>
          </h2>
          <p style={{ marginTop: 24, fontSize: 16, color: '#3D362B', lineHeight: 1.65, maxWidth: 540, fontFamily: VT_FONT.rubik }}>
            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: 16, fontSize: 16, color: '#3D362B', lineHeight: 1.65, maxWidth: 540, fontFamily: VT_FONT.rubik }}>
            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: 14, marginTop: 32, flexWrap: 'wrap' }}>
            <button style={{
              background: VT.maroon, color: VT.cream, border: 'none', padding: '16px 24px',
              borderRadius: 10, fontSize: 14, fontWeight: 600, display: 'inline-flex',
              alignItems: 'center', gap: 12, cursor: 'pointer', fontFamily: VT_FONT.rubik
            }}>Learn more — COgro <ArrowIcon size={14} color={VT.cream} /></button>
            <button style={{
              background: VT.cream, color: VT.ink, border: 'none', padding: '16px 24px',
              borderRadius: 10, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: VT_FONT.rubik
            }}>Brochure (PDF)</button>
          </div>
        </div>
        <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', minHeight: 420 }}>
          <img src={VTCRC_IMG.labsPromo} alt="COgro lab"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{
            position: 'absolute', left: 24, bottom: 24,
            background: VT.cream, color: VT.maroon,
            padding: '12px 18px', borderRadius: 10, fontSize: 13, fontWeight: 700,
            ...maroonStyles.label
          }}>FROM $700 / MO</div>
        </div>
      </div>
    </div>
    </M.Container>
  </section>;


M.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.ink, color: VT.cream, padding: '80px 56px 32px 56px', fontFamily: VT_FONT.rubik }}>
      <M.Container>
      <div style={{
          display: 'grid', gridTemplateColumns: '2fr 3fr', gap: 48, alignItems: 'end',
          paddingBottom: 56, borderBottom: '1px solid #2A2520'
        }}>
        <div>
          <h3 style={{ ...maroonStyles.display, fontSize: 44, margin: 0, color: VT.cream, fontWeight: "600" }}>
            Stay in the <span style={{ ...maroonStyles.italic, color: VT.orange }}>loop.</span>
          </h3>
          <p style={{ marginTop: 12, fontSize: 14, color: '#A8A196', maxWidth: 360 }}>
            Quarterly newsletter — tenant news, upcoming events, and what's leasing now.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 0, alignItems: 'stretch' }}>
          <input placeholder="your.email@address" style={{
              flex: 1, background: 'transparent', border: '1px solid #2A2520',
              color: VT.cream, padding: '18px 22px', fontSize: 15,
              fontFamily: 'inherit', borderRadius: 10, outline: 'none'
            }} />
          <button style={{
              background: VT.orange, color: VT.ink, border: 'none',
              padding: '0 32px', fontSize: 14, fontWeight: 700,
              borderRadius: 10, cursor: 'pointer', fontFamily: VT_FONT.rubik
            }}>Submit →</button>
        </div>
      </div>

      <div style={{ padding: '56px 0', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32 }}>
        {cols.map((c) =>
          <div key={c.head}>
            <div style={{ ...maroonStyles.label, 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: '#C7BFB1', cursor: 'pointer' }}>{i}</a>)}
            </div>
          </div>
          )}
      </div>

      <div style={{
          padding: '40px 0', borderTop: '1px solid #2A2520',
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, alignItems: 'flex-start'
        }}>
        {[
          { h: 'VTCRC Blacksburg', a: '1715 Pratt Drive, Suite 1000', c: 'Blacksburg VA 24060', p: '(540) 961‑3600', e: 'info@vtcrc.com' },
          { h: 'VTCRC 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: 13, color: '#C7BFB1', lineHeight: 1.6 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: VT.cream, marginBottom: 8 }}>{c.h}</div>
            <div>{c.a}</div>
            <div>{c.c}</div>
            <div style={{ marginTop: 6 }}>{c.p} · {c.e}</div>
          </div>
          )}
      </div>

      <div style={{
          paddingTop: 32, borderTop: '1px solid #2A2520',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 12, color: '#6E6857'
        }}>
        <span>© 2026 Virginia Tech Corporate Research Center. All rights reserved.</span>
        <SocialRow color={VT.orange} size={16} />
        <span>Privacy · Accessibility · Cookie Policy</span>
      </div>
      </M.Container>
    </footer>);

};

const MaroonHome = () =>
<div style={maroonStyles.page}>
    <M.TopBar />
    <M.Nav />
    <M.Hero />
    <M.LogoMarquee />
    <M.Stats />
    <M.LabGrid />
    <M.Innovation />
    <M.Property />
    <M.Flexible />
    <M.Footer />
  </div>;


window.MaroonHome = MaroonHome;