// Neutral gateway landing. The umbrella page — brand only, no side chosen.
// User picks Studio or Labs and is routed to that side. Paper background,
// editorial but reserved; the two doors are the main event.

const { useState: useStateGW } = React;

function GatewayNav() {
  return (
    <header style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 50,
      padding: '28px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'
    }}>
      <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none', color: INK }}>
        <Mark size={85} accent={ACCENT_BLUE} ink={INK} haze={INK} showAccent={true} />
        <span style={{ fontFamily: MONO_FF, fontSize: 22, fontWeight: 500, letterSpacing: '-0.005em' }}>
          generative<span style={{ color: ACCENT_BLUE }}>.</span>studio
        </span>
      </a>
      <nav style={{ display: 'flex', gap: 36 }}>
        <a href="Studio.html" style={{ color: INK, textDecoration: 'none' }}><MonoLabel color={INK}>Studio</MonoLabel></a>
        <a href="Labs.html" style={{ color: INK, textDecoration: 'none' }}><MonoLabel color={INK}>Labs</MonoLabel></a>
        <a href={`mailto:${EMAIL_USER}@${EMAIL_DOMAIN}`} style={{ color: INK, textDecoration: 'none' }}><MonoLabel color={INK}>Contact</MonoLabel></a>
      </nav>
    </header>);

}

// Door — one of two side-entries. Hover lifts the slab, reveals side-register preview.
function Door({ href, side, title, subtitle, body, onHover, isDim }) {
  const isLabs = side === 'labs';
  const bg = isLabs ? LABS_INK : PAPER;
  const fg = isLabs ? LABS_PAPER : INK;
  const mu = isLabs ? LABS_MUTED : MUTED_C;
  const rule = isLabs ? LABS_RULE : RULE;
  const accent = isLabs ? ACCENT_BLUE : ACCENT_FOREST;

  return (
    <a href={href}
    onMouseEnter={() => onHover && onHover(side)}
    onMouseLeave={() => onHover && onHover(null)}
    style={{
      position: 'relative', display: 'block', textDecoration: 'none',
      background: bg, color: fg,
      padding: '48px 44px 40px',
      border: `1px solid ${isLabs ? 'rgba(232,230,223,0.1)' : RULE}`,
      opacity: isDim ? 0.55 : 1,
      transition: 'opacity 420ms cubic-bezier(.2,.7,.3,1), transform 420ms cubic-bezier(.2,.7,.3,1)',
      transform: isDim ? 'translateY(0)' : 'translateY(0)',
      minHeight: 520,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      overflow: 'hidden'
    }}>
      {/* register hint — subtle pattern unique to each side */}
      {isLabs ?
      <svg viewBox="0 0 400 520" preserveAspectRatio="none"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.5, pointerEvents: 'none' }}>
          {Array.from({ length: 9 }).map((_, i) =>
        <line key={`v${i}`} x1={i * 50} y1="0" x2={i * 50} y2="520" stroke="rgba(232,230,223,0.04)" strokeWidth="1" />
        )}
          {Array.from({ length: 11 }).map((_, i) =>
        <line key={`h${i}`} x1="0" y1={i * 50} x2="400" y2={i * 50} stroke="rgba(232,230,223,0.04)" strokeWidth="1" />
        )}
        </svg> :

      <svg viewBox="0 0 400 520" preserveAspectRatio="none"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.08, pointerEvents: 'none' }}>
          <circle cx="320" cy="100" r="180" fill="none" stroke={INK} strokeWidth="0.6" />
          <circle cx="320" cy="100" r="120" fill="none" stroke={INK} strokeWidth="0.6" />
          <circle cx="320" cy="100" r="60" fill="none" stroke={INK} strokeWidth="0.6" />
        </svg>
      }

      <div style={{ position: 'relative' }}>
        <div style={{ paddingBottom: 18, borderBottom: `1px solid ${rule}` }}>
          <MonoLabel color={accent}>{isLabs ? '02 / Labs' : '01 / Studio'}</MonoLabel>
        </div>

        <div style={{
          marginTop: 40,
          fontFamily: SERIF_FF, fontStyle: 'italic', fontWeight: 400,
          fontSize: 'clamp(48px, 5.2vw, 84px)', lineHeight: 0.94, letterSpacing: '-0.02em',
          color: fg, textWrap: 'balance'
        }}>
          {title}
        </div>
        {subtitle && (
          <div style={{
            marginTop: 12,
            fontFamily: MONO_FF, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: accent
          }}>
            {subtitle}
          </div>
        )}
        <p style={{
          marginTop: 24, fontFamily: SERIF_FF, fontSize: 18, lineHeight: 1.55,
          color: isLabs ? 'rgba(232,230,223,0.72)' : 'rgba(14,14,14,0.72)',
          margin: '24px 0 0', maxWidth: 360, textWrap: 'pretty'
        }}>
          {body}
        </p>
      </div>

      <div style={{
        position: 'relative', marginTop: 48, paddingTop: 20,
        borderTop: `1px solid ${rule}`,
        display: 'flex', justifyContent: 'flex-end', alignItems: 'center'
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: accent, fontFamily: MONO_FF, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
          Enter
          <svg width="22" height="10" viewBox="0 0 22 10"><path d="M 0 5 L 20 5 M 15 1 L 20 5 L 15 9" stroke={accent} strokeWidth="1" fill="none" /></svg>
        </span>
      </div>
    </a>);

}

function Gateway() {
  const [hovered, setHovered] = useStateGW(null);

  return (
    <div style={{ background: PAPER, color: INK, minHeight: '100vh', position: 'relative' }}>
      <GatewayNav />

      <main style={{
        minHeight: '100vh', padding: '140px 48px 72px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center'
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', width: '100%' }}>
          {/* Umbrella — neutral, no side chosen */}
          <div style={{ marginBottom: 56 }} className="gs-reveal gs-d1">
            <MonoLabel>⟐  A generative design practice  ·  Netherlands  ·  Est. MMXXVI</MonoLabel>
          </div>

          <h1 className="gs-reveal gs-d2" style={{
            fontFamily: SERIF_FF, fontWeight: 400, fontStyle: 'italic',
            fontSize: 'clamp(64px, 8.5vw, 152px)', lineHeight: 0.94, letterSpacing: '-0.02em',
            margin: 0, textWrap: 'balance', maxWidth: '14ch', color: INK
          }}>
            We design with <span className="gs-bloom">machines</span>.
          </h1>

          <p className="gs-reveal gs-d3" style={{
            marginTop: 40, fontFamily: SERIF_FF,
            fontSize: 'clamp(18px, 1.4vw, 22px)', lineHeight: 1.55,
            color: 'rgba(14,14,14,0.72)', maxWidth: 620, textWrap: 'pretty'
          }}>
A film studio and a software lab — two independent outputs from the same practice. Pick a door.
          </p>

          {/* Two doors */}
          <div className="gs-reveal gs-d4" style={{
            marginTop: 72,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4
          }}>
            <Door
              href="Studio.html"
              side="studio"
              eyebrow=""
              title={<>Capsules <span style={{ color: ACCENT_BLUE }}>&</span> cinematic films</>}
              body={<>Short, purpose-cut pieces for luxury and heritage builders.</>}
              onHover={setHovered}
              isDim={hovered && hovered !== 'studio'} />
            
            <Door
              href="Labs.html"
              side="labs"
              eyebrow=""
              title={<>Apps we'd want to <span style={{ color: ACCENT_BLUE }}>use</span> ourselves</>}
              body={<>Released when they're ready.</>}
              onHover={setHovered}
              isDim={hovered && hovered !== 'labs'} />
            
          </div>

          {/* neutral baseline */}
          <div style={{
            marginTop: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontFamily: MONO_FF, fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: MUTED_C
          }}>
            <span>Two disciplines · One house</span>
            <a href={`mailto:${EMAIL_USER}@${EMAIL_DOMAIN}`} style={{ color: INK, textDecoration: 'none', borderBottom: `1px solid ${INK}` }}>
              {EMAIL_USER}@{EMAIL_DOMAIN}
            </a>
          </div>
        </div>
      </main>
    </div>);

}

const rootGW = ReactDOM.createRoot(document.getElementById('root'));
rootGW.render(<Gateway />);