// Production site component — based on Direction 4 (Editorial + Warm content).
// Renders as a normal full-page document (native scroll), no artboard chrome.

function Site() {
  const [navSolid, setNavSolid] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setNavSolid(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const serif = "'Cormorant Garamond', 'EB Garamond', Georgia, serif";
  const sans = "'Inter', -apple-system, system-ui, sans-serif";

  return (
    <div style={{ background: '#F6F2ED' }}>
      <nav style={{
        position: 'sticky', top: 0, zIndex: 20,
        background: navSolid ? 'rgba(246,242,237,0.94)' : 'transparent',
        backdropFilter: navSolid ? 'blur(10px)' : 'none',
        borderBottom: navSolid ? '1px solid rgba(59,47,42,0.08)' : '1px solid transparent',
        transition: 'all 250ms ease',
        padding: '20px 72px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <MountainMark height={28} />
          <div style={{ fontFamily: serif, fontSize: 19, fontWeight: 600, letterSpacing: '0.08em', color: '#3B2F2A' }}>
            NORTHBOUND
            <span style={{ fontFamily: sans, fontSize: 10, fontWeight: 500, letterSpacing: '0.24em', color: '#B08A4A', marginLeft: 8 }}>ADVISORY</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 36, fontFamily: sans, fontSize: 12.5, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#3B2F2A' }}>
          <a href="#services" style={linkReset}>Services</a>
          <a href="#about" style={linkReset}>About</a>
          <a href="#contact" style={linkReset}>Contact</a>
        </div>
        <a href="#contact" style={{ ...linkReset, fontFamily: sans, fontSize: 12.5, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#3B2F2A', borderBottom: '1px solid #B08A4A', paddingBottom: 3 }}>
          Book a call
        </a>
      </nav>

      <section style={{ padding: '72px 72px 100px' }}>
        <div style={{ fontFamily: sans, fontSize: 11.5, letterSpacing: '0.32em', textTransform: 'uppercase', color: '#B08A4A', marginBottom: 48 }}>
          ◆ &nbsp; Strategic & Executive Advisory
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 64, alignItems: 'end' }}>
          <h1 style={{
            fontFamily: serif, fontWeight: 400, fontSize: 96, lineHeight: 0.98,
            color: '#3B2F2A', margin: 0, letterSpacing: '-0.02em',
            textWrap: 'balance',
          }}>
            Senior counsel for the <em style={{ color: '#B08A4A', fontStyle: 'italic' }}>hard&nbsp;questions</em> — delivered with clarity and&nbsp;calm.
          </h1>
          <MergedPortrait />
        </div>

        <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: '1fr 360px', gap: 80, alignItems: 'end' }}>
          <p style={{ fontFamily: serif, fontSize: 22, lineHeight: 1.5, color: '#3B2F2A', margin: 0, maxWidth: 680, fontWeight: 400 }}>
            Hi, I'm Kurt Gielen. For more than twenty years I've worked at
            the intersection of science, business, and strategy — from
            corporate leadership to building scale-ups. Northbound is where
            I now bring that experience to leaders navigating growth,
            transition, and complexity.
          </p>
          <div style={{ borderTop: '1px solid #B08A4A', paddingTop: 18 }}>
            <div style={{ fontFamily: sans, fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase', color: '#8C857D', marginBottom: 6 }}>Founded by</div>
            <div style={{ fontFamily: serif, fontSize: 19, color: '#3B2F2A' }}>Kurt Gielen</div>
            <div style={{ fontFamily: sans, fontSize: 12.5, color: '#8C857D', marginTop: 2 }}>20+ years · Life sciences & biomedical</div>
          </div>
        </div>
      </section>

      <section style={{ padding: '64px 72px', borderTop: '1px solid rgba(59,47,42,0.15)', borderBottom: '1px solid rgba(59,47,42,0.15)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 64 }}>
          {[
            ['Direction', 'Clarity of course. Informed choices. Not opinions dressed as strategy.'],
            ['Stability', 'Twenty years of senior experience across corporate, scale-up, and investor contexts.'],
            ['Momentum', 'Progress with control — decisions that compound, not headlines that fade.'],
          ].map(([t, b], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 22 }}>
              <div style={{ fontFamily: serif, fontStyle: 'italic', fontSize: 34, color: '#B08A4A', fontWeight: 400, lineHeight: 1 }}>— {String.fromCharCode(73 + i)}</div>
              <div>
                <div style={{ fontFamily: serif, fontSize: 28, fontWeight: 500, color: '#3B2F2A', lineHeight: 1.05, marginBottom: 10, letterSpacing: '-0.005em' }}>{t}</div>
                <div style={{ fontFamily: serif, fontSize: 16, color: '#5a4a42', lineHeight: 1.5, fontWeight: 400 }}>{b}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <FolioRule label="Services" number="I" />
      <section id="services" style={{ padding: '80px 72px 120px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2.2fr', gap: 80, marginBottom: 72 }}>
          <h2 style={{ fontFamily: serif, fontSize: 56, fontWeight: 400, lineHeight: 1.05, margin: 0, color: '#3B2F2A', letterSpacing: '-0.01em' }}>
            What I do
          </h2>
          <p style={{ fontFamily: serif, fontSize: 20, lineHeight: 1.5, margin: '16px 0 0', color: '#5a4a42', maxWidth: 640, fontWeight: 400 }}>
            Three practice areas where senior experience makes the
            difference — supporting leaders of small, mid-sized, and large
            companies on strategy, growth, and
            <em style={{ color: '#B08A4A' }}> interim executive roles.</em>
          </p>
        </div>
        <div style={{ borderTop: '1px solid rgba(59,47,42,0.15)' }}>
          {SERVICES.map((s, i) => (
            <ServiceRow key={i} s={s} serif={serif} sans={sans} />
          ))}
        </div>
      </section>

      <FolioRule label="About" number="II" />
      <section id="about" style={{ padding: '80px 72px 120px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2.2fr', gap: 80 }}>
          <div>
            <h2 style={{ fontFamily: serif, fontSize: 56, fontWeight: 400, lineHeight: 1.05, margin: 0, color: '#3B2F2A', letterSpacing: '-0.01em' }}>
              A career <em style={{ fontStyle: 'italic', color: '#B08A4A' }}>translating innovation into impact.</em>
            </h2>
            <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid #B08A4A' }}>
              <div style={{ fontFamily: sans, fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase', color: '#8C857D', marginBottom: 16 }}>Background</div>
              <MergedMeta k="Education" v="MSc Biochemistry" sans={sans} serif={serif} />
              <MergedMeta k="Corporate" v="Invitrogen · Life Technologies" sans={sans} serif={serif} />
              <MergedMeta k="Scale-up" v="Medace" sans={sans} serif={serif} />
              <MergedMeta k="Focus" v="Biotech · Medtech · Life sciences" sans={sans} serif={serif} />
              <MergedMeta k="Geography" v="Europe" sans={sans} serif={serif} last />
            </div>
          </div>
          <div>
            {BIO_LONG.map((p, i) => (
              <p key={i} style={{ fontFamily: serif, fontSize: 20, lineHeight: 1.55, color: '#3B2F2A', marginTop: i === 0 ? 0 : 24, marginBottom: 0, fontWeight: 400 }}>
                {i === 0 && <span style={{ fontSize: 64, fontWeight: 500, float: 'left', lineHeight: 0.9, paddingRight: 10, paddingTop: 6, color: '#B08A4A', fontFamily: serif }}>W</span>}
                {i === 0 ? p.slice(1) : p}
              </p>
            ))}
            <blockquote style={{
              margin: '56px 0 0', padding: '36px 0 36px 40px',
              borderLeft: '2px solid #B08A4A',
              fontFamily: serif, fontStyle: 'italic', fontSize: 30, lineHeight: 1.3,
              color: '#3B2F2A', fontWeight: 400, letterSpacing: '-0.005em',
            }}>
              "What drives me is enabling teams and organisations to
              professionalise, scale, and ultimately deliver innovations
              that improve lives."
            </blockquote>
            <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, paddingTop: 40, borderTop: '1px solid rgba(59,47,42,0.12)' }}>
              {STRENGTHS.map((s, i) => (
                <div key={i}>
                  <div style={{ fontFamily: sans, fontSize: 10.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#B08A4A', marginBottom: 10 }}>— Core strength</div>
                  <div style={{ fontFamily: serif, fontSize: 19, fontWeight: 500, color: '#3B2F2A', marginBottom: 6, lineHeight: 1.25 }}>{s.label}</div>
                  <div style={{ fontFamily: sans, fontSize: 13, lineHeight: 1.55, color: '#5a4a42' }}>{s.detail}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="contact" style={{ background: '#3B2F2A', padding: '120px 72px', color: '#F6F2ED' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: sans, fontSize: 11.5, letterSpacing: '0.32em', textTransform: 'uppercase', color: '#B08A4A', marginBottom: 40 }}>◆ &nbsp; Next steps</div>
            <h2 style={{ fontFamily: serif, fontSize: 80, fontWeight: 400, lineHeight: 1.02, margin: 0, letterSpacing: '-0.02em' }}>
              Start with a<br/><em style={{ color: '#B08A4A', fontStyle: 'italic' }}>conversation.</em>
            </h2>
            <div style={{ marginTop: 40, fontFamily: sans, fontSize: 14, lineHeight: 1.9, color: 'rgba(246,242,237,0.85)' }}>
              Thirty minutes, no obligation. We talk about where you are,
              what you're working on, and whether there's a fit.
              <div style={{ marginTop: 28 }}>
                <a href={CONTACT.linkedin} style={{
                  display: 'inline-block', fontFamily: serif, fontSize: 18,
                  color: 'rgba(246,242,237,0.75)', borderBottom: '1px solid rgba(176,138,74,0.4)', paddingBottom: 5,
                  textDecoration: 'none',
                }}>
                  Connect on LinkedIn →
                </a>
              </div>
              <div style={{ marginTop: 24, fontSize: 13, color: 'rgba(246,242,237,0.6)', lineHeight: 1.8 }}>
                Or reach out directly:<br/>
                <a href={`mailto:${CONTACT.email}`} style={{ color: '#B08A4A', textDecoration: 'none' }}>{CONTACT.email}</a><br/>
                {CONTACT.phone}
              </div>
            </div>
          </div>
          <div style={{ background: '#F6F2ED', borderRadius: 4, padding: '40px 40px 32px', boxShadow: '0 30px 80px -20px rgba(0,0,0,0.4)' }}>
            <div style={{ fontFamily: sans, fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase', color: '#B08A4A', marginBottom: 20 }}>Book an introductory call</div>
            <div className="hs-form-frame" data-region="eu1" data-form-id="d9c53927-0cb3-47b6-b134-b96af9f1bddb" data-portal-id="147629151"></div>
          </div>
        </div>
      </section>

      <footer style={{ background: '#2B2218', padding: '48px 72px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: sans, fontSize: 12, color: 'rgba(246,242,237,0.5)', letterSpacing: '0.04em' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <MountainMark height={22} />
          <div style={{ fontFamily: serif, fontSize: 15, letterSpacing: '0.14em', color: '#F6F2ED' }}>
            NORTHBOUND <span style={{ color: '#B08A4A', letterSpacing: '0.28em', fontSize: 9 }}>ADVISORY</span>
          </div>
        </div>
        <div>© 2026 Northbound Advisory · Kurt Gielen · Belgium</div>
        <div><a href={CONTACT.linkedin} style={{ ...linkReset, color: 'rgba(246,242,237,0.6)' }}>{CONTACT.linkedinHandle}</a></div>
      </footer>
    </div>
  );
}

function MergedPortrait() {
  return (
    <div style={{
      aspectRatio: '4 / 5',
      background: 'linear-gradient(135deg, #B08A4A 0%, #8a6a35 60%, #3B2F2A 100%)',
      position: 'relative', overflow: 'hidden',
      boxShadow: '0 30px 80px -20px rgba(59,47,42,0.35)',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.05) 14px 15px)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        color: 'rgba(255,255,255,0.85)', textAlign: 'center', padding: 24,
      }}>
        <div style={{ fontFamily: "'JetBrains Mono', Menlo, monospace", fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.75 }}>
          [ Portrait ]
        </div>
        <div style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 24, fontWeight: 500, marginTop: 10, letterSpacing: '-0.005em' }}>
          Kurt Gielen
        </div>
        <div style={{ fontFamily: "'JetBrains Mono', Menlo, monospace", fontSize: 9.5, letterSpacing: '0.2em', marginTop: 8, opacity: 0.7 }}>
          Drop in 4:5 portrait
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 14, left: 14, right: 14,
        padding: '12px 16px',
        background: 'rgba(43,34,24,0.85)', color: '#F6F2ED',
        fontFamily: "'Inter', sans-serif", fontSize: 11.5, letterSpacing: '0.08em',
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>Kurt Gielen</span>
        <span style={{ color: '#B08A4A' }}>Founder · Advisor</span>
      </div>
    </div>
  );
}

function MergedMeta({ k, v, sans, serif, last }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '100px 1fr', gap: 16,
      padding: '10px 0',
      borderBottom: last ? 'none' : '1px dashed rgba(59,47,42,0.18)',
    }}>
      <div style={{ fontFamily: sans, fontSize: 11, color: '#8C857D', letterSpacing: '0.1em', textTransform: 'uppercase', paddingTop: 3 }}>{k}</div>
      <div style={{ fontFamily: serif, fontSize: 16, color: '#3B2F2A', lineHeight: 1.35 }}>{v}</div>
    </div>
  );
}

function FolioRule({ label, number }) {
  const serif = "'Cormorant Garamond', Georgia, serif";
  const sans = "'Inter', sans-serif";
  return (
    <div style={{ padding: '0 72px', display: 'flex', alignItems: 'center', gap: 24 }}>
      <div style={{ fontFamily: serif, fontSize: 15, fontStyle: 'italic', color: '#B08A4A' }}>{number}.</div>
      <div style={{ fontFamily: sans, fontSize: 10.5, letterSpacing: '0.32em', textTransform: 'uppercase', color: '#3B2F2A' }}>{label}</div>
      <div style={{ flex: 1, height: 1, background: '#B08A4A' }} />
    </div>
  );
}

function ServiceRow({ s, serif, sans }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'grid', gridTemplateColumns: '80px 1fr 1.4fr 1fr',
        gap: 40, padding: '40px 0',
        borderBottom: '1px solid rgba(59,47,42,0.15)',
        alignItems: 'start',
        background: hovered ? 'rgba(176,138,74,0.04)' : 'transparent',
        transition: 'background 250ms ease',
        cursor: 'pointer',
      }}
    >
      <div style={{ fontFamily: serif, fontStyle: 'italic', fontSize: 36, color: '#B08A4A', lineHeight: 1 }}>{s.num}</div>
      <div style={{ fontFamily: serif, fontSize: 30, fontWeight: 500, color: '#3B2F2A', lineHeight: 1.15, letterSpacing: '-0.005em' }}>{s.title}</div>
      <div style={{ fontFamily: serif, fontSize: 17, lineHeight: 1.55, color: '#5a4a42', fontWeight: 400 }}>{s.blurb}</div>
      <div style={{ fontFamily: sans, fontSize: 12.5, lineHeight: 1.9, color: '#3B2F2A' }}>
        {s.lines.map((line, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span style={{ color: '#B08A4A', fontSize: 10 }}>—</span> {line}
          </div>
        ))}
      </div>
    </div>
  );
}

const linkReset = { color: 'inherit', textDecoration: 'none', cursor: 'pointer' };

ReactDOM.createRoot(document.getElementById('root')).render(<Site />);
