// Variant 1 — Editorial Whitespace (VT-brand reskin)
// Cream nav block, Crimson Text serif headlines, DM Sans body, generous air.
// Uses VT brand colors: Chicago Maroon as accent, Burnt Orange for highlights.

const editorialStyles = {
  page: {
    width: 1440, fontFamily: VT_FONT.sans,
    color: VT.ink, background: VT.paper,
    fontSize: 15, lineHeight: 1.5, letterSpacing: '-0.005em'
  },
  eyebrow: {
    fontFamily: VT_FONT.sans, fontWeight: 600,
    fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
    color: VT.maroon
  },
  display: {
    fontFamily: VT_FONT.serif,
    fontWeight: 600, lineHeight: 1.02, letterSpacing: '-0.015em'
  }
};

const E = {};

E.TopBar = () =>
<div style={{
  background: VT.maroon, color: VT.cream, height: 40,
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  fontSize: 13, letterSpacing: '0.005em', fontFamily: VT_FONT.sans
}}>
    <span style={{ opacity: 0.9 }}>Stay in the know with VTCRC news &amp; happenings.</span>
    <a style={{
    marginLeft: 12, color: VT.cream, textDecoration: 'underline',
    textUnderlineOffset: 3, fontWeight: 500
  }}>Sign up for our email list →</a>
  </div>;


E.Nav = () =>
<header style={{ background: VT.cream, borderBottom: `1px solid ${VT.warmGray}` }}>
    <div style={{ padding: '28px 80px 0 80px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
      {/* Logo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <VTMark color={VT.cream} bg={VT.maroon} size={46} />
        <div style={{ lineHeight: 1.1 }}>
          <div style={{ fontSize: 10, letterSpacing: '0.22em', fontWeight: 700, color: VT.maroon, fontFamily: VT_FONT.sans }}>VIRGINIA TECH</div>
          <div style={{ ...editorialStyles.display, fontSize: 22, color: VT.ink, marginTop: 3 }}>Corporate Research Center</div>
        </div>
      </div>
      {/* secondary */}
      <div style={{ display: 'flex', gap: 26, alignItems: 'center', fontSize: 13, color: '#3f3a30', fontFamily: VT_FONT.sans, fontWeight: 500 }}>
        {['Calendar', 'Jobs', 'Contact', 'About', 'Tenant Login'].map((l) =>
      <a key={l} style={{ cursor: 'pointer' }}>{l}</a>
      )}
        <span style={{ width: 1, height: 14, background: '#C3B89A' }} />
        <SearchIcon size={16} color="#3f3a30" />
      </div>
    </div>
    <div style={{ padding: '18px 80px 22px 80px', display: 'flex', justifyContent: 'flex-end', gap: 40, alignItems: 'baseline' }}>
      {['Community', 'Property', 'Work Here', 'News & Events'].map((l, i) =>
    <a key={l} style={{
      fontFamily: VT_FONT.serif, fontWeight: 600,
      fontSize: 22, color: i === 0 ? VT.maroon : VT.ink,
      letterSpacing: '-0.005em', cursor: 'pointer', paddingBottom: 6,
      borderBottom: i === 0 ? `1.5px solid ${VT.maroon}` : '1.5px solid transparent'
    }}>{l}</a>
    )}
    </div>
  </header>;


E.Hero = () =>
<section style={{ padding: '80px 80px 100px 80px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end' }}>
      <div style={{ paddingBottom: 24 }}>
        <div style={{ ...editorialStyles.eyebrow, marginBottom: 36 }}>WHERE EDUCATION MEETS BUSINESS</div>
        <h1 style={{ ...editorialStyles.display, fontSize: 96, margin: 0, color: VT.ink, fontWeight: 600, fontFamily: "Montserrat" }}>
          Big ideas <span style={{ fontStyle: 'italic', color: VT.maroon, fontWeight: 400 }}>start</span> in Virginia.
        </h1>
        <p style={{ marginTop: 36, fontSize: 18, lineHeight: 1.55, color: '#3F3A30', maxWidth: 480, fontFamily: VT_FONT.sans }}>
          Turning ideas into real‑world impact. Advancing sustainable, defense‑aligned energy innovation
          across the Commonwealth — from early‑stage research to the companies scaling it.
        </p>
        <div style={{ display: 'flex', gap: 20, marginTop: 44, alignItems: 'center' }}>
          <button style={{
          background: VT.ink, color: VT.cream, border: 'none',
          padding: '18px 28px', borderRadius: 999, fontSize: 14, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 14, cursor: 'pointer',
          letterSpacing: '0.02em', fontFamily: VT_FONT.sans
        }}>Learn more <ArrowIcon size={14} color={VT.cream} /></button>
          <a style={{
          fontSize: 14, color: VT.ink, textDecoration: 'underline', textUnderlineOffset: 4,
          cursor: 'pointer', fontFamily: VT_FONT.sans, fontWeight: 500
        }}>See who's here</a>
        </div>
      </div>
      <Photo src={VTCRC_IMG.hero} alt="VTCRC — where education meets business" ratio="4/5" radius={2} />
    </div>
  </section>;


E.Stats = () =>
<section style={{ padding: '40px 80px 100px 80px' }}>
    <div style={{ borderTop: `1px solid ${VT.warmGray}`, paddingTop: 48 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'start', marginBottom: 56 }}>
        <div>
          <div style={editorialStyles.eyebrow}>TECH CLUSTERS</div>
          <h2 style={{ ...editorialStyles.display, fontSize: 60, margin: '18px 0 0 0', maxWidth: 520 }}>
            Space with purpose, <span style={{ fontStyle: 'italic', color: VT.maroon, fontWeight: 400 }}>for big ideas.</span>
          </h2>
        </div>
        <p style={{ fontFamily: VT_FONT.sans, fontSize: 15.5, color: '#3F3A30', lineHeight: 1.6, alignSelf: 'end', paddingBottom: 6, margin: 0, maxWidth: 420 }}>
          A 230‑acre research park, clustered for collisions between research, capital,
          and talent.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {[
      { n: '1.25M', l: 'Square feet of office and lab space' },
      { n: '230+', l: 'Tenant companies' },
      { n: '3,500+', l: 'Employees working in the park' },
      { n: '40', l: 'Buildings in Blacksburg' }].
      map((s) =>
      <div key={s.l}>
            <div style={{ ...editorialStyles.display, fontSize: 62, color: VT.ink }}>
              {s.n.includes('+') ? <>{s.n.replace('+', '')}<span style={{ color: VT.orange }}>+</span></> : s.n}
            </div>
            <div style={{ fontSize: 13, color: '#5A5446', marginTop: 14, maxWidth: 200, lineHeight: 1.5, fontFamily: VT_FONT.sans }}>{s.l}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


E.LabGrid = () =>
<section style={{ padding: '0 80px 110px 80px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 24 }}>
      <Photo src={VTCRC_IMG.labsPromo} ratio="5/4" radius={2}>
        <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(28,28,28,0) 35%, rgba(28,28,28,0.7) 100%)'
      }} />
        <div style={{
        position: 'absolute', left: 36, bottom: 36, right: 36,
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', color: VT.cream
      }}>
          <div>
            <div style={{ ...editorialStyles.eyebrow, color: VT.orange, letterSpacing: '0.22em' }}>WORK HERE</div>
            <h3 style={{ ...editorialStyles.display, fontSize: 42, margin: '12px 0 0 0', maxWidth: 420, color: VT.cream }}>
              Custom lab space for world‑class research.
            </h3>
            <p style={{ marginTop: 14, fontSize: 15, maxWidth: 380, color: 'rgba(244,241,232,0.88)', fontFamily: VT_FONT.sans }}>
              Discover, test, and advance your ideas in the region's thriving innovation ecosystem.
            </p>
          </div>
          <button style={{
          background: VT.cream, color: VT.ink, border: 'none', padding: '14px 22px',
          borderRadius: 999, fontSize: 13, fontWeight: 600, display: 'inline-flex',
          alignItems: 'center', gap: 10, cursor: 'pointer', fontFamily: VT_FONT.sans
        }}>Work Here <ArrowIcon size={12} color={VT.ink} /></button>
        </div>
      </Photo>
      <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr 1fr', gap: 24 }}>
        {[
      { label: 'SEFC', desc: 'Secure Energy Future Center', src: VTCRC_IMG.event },
      { label: 'ERC', desc: 'Entrepreneur Resource Center', src: VTCRC_IMG.meeting },
      { label: 'COgro', desc: 'Coworking & Labs', src: VTCRC_IMG.coworking }].
      map((c) =>
      <Photo key={c.label} src={c.src} radius={2}>
            <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: 24, bottom: 18, right: 24,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', color: VT.cream
        }}>
              <div>
                <div style={{ fontFamily: VT_FONT.serif, fontSize: 24, fontWeight: 600 }}>{c.label}</div>
                <div style={{ fontSize: 11, opacity: 0.85, marginTop: 2, fontFamily: VT_FONT.sans }}>{c.desc}</div>
              </div>
              <span style={{
            width: 30, height: 30, borderRadius: 999, background: 'rgba(244,241,232,0.18)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(8px)',
            color: VT.cream, fontFamily: VT_FONT.serif, fontSize: 20, fontWeight: 400
          }}>+</span>
            </div>
          </Photo>
      )}
      </div>
    </div>
  </section>;


E.Innovation = () =>
<section style={{ padding: '0 80px 120px 80px' }}>
    <div style={{ maxWidth: 760 }}>
      <div style={editorialStyles.eyebrow}>INNOVATION HAPPENS HERE</div>
      <h2 style={{ ...editorialStyles.display, fontSize: 68, margin: '18px 0 0 0' }}>
        Disrupting industry <span style={{ fontStyle: 'italic', color: VT.maroon, fontWeight: 400 }}>from the inside out.</span>
      </h2>
      <p style={{ marginTop: 24, fontSize: 17, color: '#3F3A30', maxWidth: 620, lineHeight: 1.55, fontFamily: VT_FONT.sans }}>
        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: 32, marginTop: 64 }}>
      {[
    { kicker: 'Move Here', title: 'A corridor of compounding ideas.',
      body: 'Ideas and innovation collide in a next-generation technology corridor.',
      src: VTCRC_IMG.heroCampus },
    { kicker: 'Work Here', title: 'Right next door to Tier 1 research.',
      body: 'Intellectual curiosity drives the Tier 1 research university right next door.',
      src: VTCRC_IMG.labWork },
    { kicker: 'Live Here', title: 'A high-quality, low-cost life.',
      body: 'Our vibrant community features a high-quality lifestyle with a low cost of living.',
      src: VTCRC_IMG.ridge }].
    map((c, i) =>
    <div key={i}>
          <Photo src={c.src} ratio="4/3" radius={2} />
          <div style={{ paddingTop: 24 }}>
            <div style={editorialStyles.eyebrow}>{c.kicker.toUpperCase()}</div>
            <h3 style={{ ...editorialStyles.display, fontSize: 30, margin: '10px 0 0 0' }}>{c.title}</h3>
            <p style={{ marginTop: 12, fontSize: 14.5, color: '#3F3A30', lineHeight: 1.6, fontFamily: VT_FONT.sans }}>{c.body}</p>
            <a style={{
          display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 18, fontSize: 13,
          borderBottom: `1px solid ${VT.ink}`, paddingBottom: 4, cursor: 'pointer',
          fontWeight: 600, fontFamily: VT_FONT.sans
        }}>{c.kicker} <ArrowIcon size={12} /></a>
          </div>
        </div>
    )}
    </div>
  </section>;


E.Property = () =>
<section style={{
  background: VT.ink, color: VT.cream, padding: '110px 80px 130px 80px'
}}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }}>
      <div>
        <div style={{ ...editorialStyles.eyebrow, color: VT.orange }}>PROPERTY</div>
        <h2 style={{ ...editorialStyles.display, fontSize: 74, margin: '24px 0 0 0', color: VT.cream, fontWeight: 600 }}>
          A space made <span style={{ fontStyle: 'italic', color: VT.orange, fontWeight: 400 }}>for your company.</span>
        </h2>
        <p style={{ marginTop: 28, maxWidth: 480, fontSize: 16, lineHeight: 1.6, color: 'rgba(244,241,232,0.78)', fontFamily: VT_FONT.sans }}>
          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 style={{ textAlign: 'right' }}>
        <div style={{ ...editorialStyles.eyebrow, color: VT.orange, justifyContent: 'flex-end' }}>ARCHITECTURAL WONDERS</div>
        <p style={{ marginTop: 10, fontFamily: VT_FONT.serif, fontSize: 26, fontStyle: 'italic', color: VT.cream }}>
          Our buildings win awards for creative design.
        </p>
      </div>
    </div>
    <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 24 }}>
      <Photo src={VTCRC_IMG.archWonders} ratio="16/9" radius={2}>
        <div style={{
        position: 'absolute', left: 32, bottom: 32, color: VT.cream,
        background: 'rgba(28,26,18,0.65)', backdropFilter: 'blur(8px)',
        padding: '12px 18px', borderRadius: 999, fontSize: 13, fontWeight: 600,
        fontFamily: VT_FONT.sans
      }}>Available Suites →</div>
      </Photo>
      <Photo src={VTCRC_IMG.buildToSuit} ratio="3/4" radius={2} />
      <Photo src={VTCRC_IMG.archWonders} ratio="3/4" radius={2} />
    </div>
    <div style={{ display: 'flex', gap: 14, marginTop: 36, justifyContent: 'flex-end' }}>
      <button style={{
      width: 48, height: 48, borderRadius: 999, background: 'transparent',
      border: '1px solid #5C574B', color: VT.cream, cursor: 'pointer'
    }}><ArrowIcon size={14} dir="left" color={VT.cream} /></button>
      <button style={{
      width: 48, height: 48, borderRadius: 999, background: VT.orange,
      border: 'none', color: VT.ink, cursor: 'pointer'
    }}><ArrowIcon size={14} color={VT.ink} /></button>
    </div>
  </section>;


E.Flexible = () =>
<section style={{ padding: '100px 80px', background: VT.paper }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }}>
      <Photo src={VTCRC_IMG.labsPromo} ratio="4/5" radius={2} />
      <div>
        <div style={editorialStyles.eyebrow}>INNOVATE AND GROW</div>
        <h2 style={{ ...editorialStyles.display, fontSize: 64, margin: '20px 0 0 0' }}>
          Flexible Office<br />and <span style={{ fontStyle: 'italic', color: VT.maroon, fontWeight: 400 }}>Lab Space.</span>
        </h2>
        <p style={{ marginTop: 26, fontSize: 16, color: '#3F3A30', maxWidth: 520, lineHeight: 1.6, fontFamily: VT_FONT.sans }}>
          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: 16, color: '#3F3A30', maxWidth: 520, lineHeight: 1.6, fontFamily: VT_FONT.sans }}>
          For those seeking a collaborative environment, <em style={{ fontFamily: VT_FONT.serif, fontStyle: 'italic' }}>COgro</em> 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.ink, color: VT.cream, border: 'none', padding: '16px 24px',
          borderRadius: 999, fontSize: 13, fontWeight: 600, display: 'inline-flex',
          alignItems: 'center', gap: 10, cursor: 'pointer', fontFamily: VT_FONT.sans
        }}>Learn more — COgro <ArrowIcon size={12} color={VT.cream} /></button>
          <button style={{
          background: 'transparent', color: VT.ink, border: `1px solid ${VT.ink}`,
          padding: '16px 24px', borderRadius: 999, fontSize: 13, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontFamily: VT_FONT.sans
        }}>Downloadable Brochure <ArrowIcon size={12} /></button>
        </div>
      </div>
    </div>
  </section>;


E.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: '90px 80px 40px 80px', fontFamily: VT_FONT.sans }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32, paddingBottom: 60, borderBottom: '1px solid #2D2A23' }}>
        {cols.map((c) =>
        <div key={c.head}>
            <div style={{ fontSize: 11, letterSpacing: '0.22em', color: VT.orange, fontWeight: 700, marginBottom: 18 }}>{c.head}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map((i) => <a key={i} style={{ fontSize: 13, color: '#D7CFB9', cursor: 'pointer' }}>{i}</a>)}
            </div>
          </div>
        )}
      </div>

      <div style={{ padding: '56px 0 24px 0', textAlign: 'center' }}>
        <div style={{ ...editorialStyles.eyebrow, color: VT.orange, justifyContent: 'center' }}>STAY IN THE LOOP</div>
        <div style={{ display: 'flex', justifyContent: 'center', maxWidth: 540, margin: '24px auto 0', gap: 0 }}>
          <input placeholder="your.email@address" style={{
            flex: 1, background: 'transparent', border: 'none', borderBottom: '1px solid #4A4439',
            color: VT.cream, padding: '12px 4px', fontSize: 14, fontFamily: 'inherit', outline: 'none'
          }} />
          <button style={{
            background: VT.orange, color: VT.ink, border: 'none',
            padding: '12px 24px', borderRadius: 999, fontSize: 13, fontWeight: 700, cursor: 'pointer'
          }}>Submit</button>
        </div>
      </div>

      <div style={{
        marginTop: 60, paddingTop: 32, borderTop: '1px solid #2D2A23',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12, color: '#9C9482' }}>
          <div><strong style={{ color: VT.cream }}>VTCRC Blacksburg</strong> &nbsp;&nbsp; 1715 Pratt Drive, Suite 1000, Blacksburg VA 24060 &nbsp;|&nbsp; (540) 961‑3600 &nbsp;|&nbsp; info@vtcrc.com</div>
          <div><strong style={{ color: VT.cream }}>VTCRC Newport News</strong> &nbsp;&nbsp; 700 Tech Center Pkwy, Suite 305, Newport News VA 23606 &nbsp;|&nbsp; (540) 443‑9282 &nbsp;|&nbsp; sefc@vtcrc.com</div>
          <div><strong style={{ color: VT.cream }}>COgro Coworking + Labs</strong> &nbsp;&nbsp; 2200 Kraft Dr SW, Suite 1050, Blacksburg VA 24060 &nbsp;|&nbsp; (540) 961‑3600 &nbsp;|&nbsp; cogro@vtcrc.com</div>
        </div>
        <SocialRow color={VT.orange} />
      </div>
      <div style={{ textAlign: 'center', marginTop: 36, fontSize: 11, color: '#6E6757' }}>
        © 2026 Virginia Tech Corporate Research Center. All rights reserved. &nbsp;·&nbsp; Privacy &nbsp;·&nbsp; Accessibility &nbsp;·&nbsp; Cookie Policy
      </div>
    </footer>);

};

const EditorialHome = () =>
<div style={editorialStyles.page}>
    <E.TopBar />
    <E.Nav />
    <E.Hero />
    <E.Stats />
    <E.LabGrid />
    <E.Innovation />
    <E.Property />
    <E.Flexible />
    <E.Footer />
  </div>;


window.EditorialHome = EditorialHome;