// Phase 0 Labs, site-wide chrome (nav, footer, status bar, page wrapper)

const { useState, useEffect } = React;

function useHashRoute(defaultRoute = 'home') {
  const get = () => (location.hash || '#/home').replace('#/', '') || defaultRoute;
  const [route, setRoute] = useState(get());
  useEffect(() => {
    const handler = () => {
      setRoute(get());
      window.scrollTo(0, 0);
    };
    window.addEventListener('hashchange', handler);
    return () => window.removeEventListener('hashchange', handler);
  }, []);
  return [route, (r) => { location.hash = '#/' + r; }];
}

function Dot({ color, size = 8, glow = true }) {
  return <span style={{
    display: 'inline-block', width: size, height: size, borderRadius: '50%',
    background: color, boxShadow: glow ? `0 0 ${size}px ${color}` : 'none',
  }} />;
}

function StatusBar() {
  const items = [
    { label: 'SYSTEMS', value: 'NOMINAL', color: T.teal },
    { label: 'BUILD', value: '2026.05.b' },
    { label: 'REGION', value: 'us-east-1 · eu-west-1' },
    { label: 'LATENCY', value: 'p50 142ms' },
    { label: 'UPTIME', value: '99.987%' },
  ];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 24,
      padding: '8px 32px', background: T.ink,
      borderBottom: `1px solid ${T.border}`,
      fontFamily: FONT.mono, fontSize: 10.5, letterSpacing: 1.2,
      color: T.dim, textTransform: 'uppercase',
    }}>
      {items.map((it, i) => (
        <div key={it.label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {it.color && <Dot color={it.color} size={6} />}
          <span style={{ color: T.dimmer }}>{it.label}</span>
          <span style={{ color: T.text }}>{it.value}</span>
          {i < items.length - 1 && <span style={{ marginLeft: 16, color: T.dimmer }}>·</span>}
        </div>
      ))}
      <div style={{ marginLeft: 'auto', color: T.dim }}>
        <span suppressHydrationWarning>{new Date().toISOString().slice(0, 19).replace('T', ' ')} UTC</span>
      </div>
    </div>
  );
}

function Nav({ route, go }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      padding: '14px 32px', borderBottom: `1px solid ${T.border}`,
      background: T.ink, position: 'sticky', top: 0, zIndex: 50,
      backdropFilter: 'blur(10px)',
    }}>
      <a onClick={() => go('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', textDecoration: 'none' }}>
        <BrandMark size={28} theme="dark" />
        <span style={{
          fontFamily: FONT.sans, fontSize: 14, fontWeight: 500,
          letterSpacing: 2.5, color: T.text,
        }}>PHASE 0 LABS</span>
      </a>
    </div>
  );
}

function PageHeader({ section, title, intro, code }) {
  return (
    <div style={{ padding: '64px 32px 48px', position: 'relative', overflow: 'hidden' }}>
      <BlueprintGrid color="rgba(133,183,235,0.05)" size={40} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.5,
          color: T.teal, textTransform: 'uppercase', marginBottom: 24,
          display: 'inline-flex', gap: 12, alignItems: 'center',
        }}>
          <span>{code}</span>
          <span style={{ width: 24, height: 1, background: T.dimmer }} />
          <span style={{ color: T.dim }}>{section}</span>
        </div>
        <h1 style={{
          fontFamily: FONT.sans, fontSize: 72, fontWeight: 400,
          lineHeight: 1.05, letterSpacing: -1.5, color: T.textBright,
          margin: 0, maxWidth: 1000,
        }}>{title}</h1>
        {intro && (
          <div style={{
            marginTop: 28, fontFamily: FONT.sans, fontSize: 18, lineHeight: 1.65,
            color: T.dim, maxWidth: 720,
          }}>{intro}</div>
        )}
      </div>
    </div>
  );
}

function Section({ children, code, label, padding = '80px 32px' }) {
  return (
    <div style={{ padding, borderTop: `1px solid ${T.border}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {(code || label) && (
          <div style={{
            fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.5,
            color: T.teal, textTransform: 'uppercase', marginBottom: 32,
            display: 'flex', gap: 12, alignItems: 'center',
          }}>
            {code && <span>{code}</span>}
            {code && label && <span style={{ width: 24, height: 1, background: T.dimmer }} />}
            {label && <span style={{ color: T.dim }}>{label}</span>}
          </div>
        )}
        {children}
      </div>
    </div>
  );
}

function Footer({ go }) {
  return (
    <div style={{
      borderTop: `1px solid ${T.border}`, background: T.panel,
      padding: '64px 32px 32px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48,
          paddingBottom: 48, borderBottom: `1px solid ${T.border}`,
        }}>
          <div>
            <BrandLockup size={16} theme="dark" tracking={3} />
            <div style={{
              marginTop: 20, fontFamily: FONT.sans, fontSize: 14,
              color: T.dim, lineHeight: 1.6, maxWidth: 360,
            }}>
              The phase before everything else. AI-native products and platforms
              built with the rigor of architecture, scale and governance.
            </div>
            <div style={{
              marginTop: 24, fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.5,
              color: T.dim, textTransform: 'uppercase', display: 'flex', gap: 8, alignItems: 'center',
            }}>
            </div>
          </div>
          {[
            { title: 'Site', items: [['Home', 'home']] },
            { title: 'Practices', items: [['AI-Powered Teams', null], ['AI Native & Enabled', null], ['Governance & Compliance', null]] },
            { title: 'Contact', items: [['contact@phase0labs.com', null]] },
          ].map(col => (
            <div key={col.title}>
              <div style={{
                fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.5,
                color: T.teal, textTransform: 'uppercase', marginBottom: 16,
              }}>{col.title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(([l, r]) => (
                  <a key={l}
                    onClick={() => r && go(r)}
                    style={{
                      fontFamily: FONT.sans, fontSize: 14, color: T.text,
                      cursor: r ? 'pointer' : 'default', textDecoration: 'none',
                    }}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          paddingTop: 32, display: 'flex', justifyContent: 'space-between',
          fontFamily: FONT.mono, fontSize: 11, letterSpacing: 1.5,
          color: T.dim, textTransform: 'uppercase',
        }}>
          <span>© 2026 Phase 0 Labs</span>
          <span>TEAMS → SCALE → SECURITY → GOVERNANCE</span>
          <span>Build 2026.05.b</span>
        </div>
      </div>
    </div>
  );
}

window.Dot = Dot;
window.StatusBar = StatusBar;
window.Nav = Nav;
window.PageHeader = PageHeader;
window.Section = Section;
window.Footer = Footer;
window.useHashRoute = useHashRoute;