/* @jsx React.createElement */

window.WorkRow = function WorkRow({ year, client, scope, status }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '80px 1fr 2fr 140px',
      gap: 32, padding: '24px 0',
      borderBottom: '1px solid var(--rule)', alignItems: 'baseline',
    }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-low)' }}>{year}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 22, color: 'var(--ink)' }}>{client}</div>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 300, color: 'var(--ink-mid)' }}>{scope}</div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)',
        letterSpacing: '0.04em', textTransform: 'uppercase', textAlign: 'right',
      }}>● {status}</div>
    </div>
  );
};

window.Footer = function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid var(--rule)', padding: '64px 32px 48px',
      maxWidth: 1200, margin: '0 auto',
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <img src="/logo.svg" style={{ width: 26, height: 26 }} alt="" />
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 16 }}>
              Zero <em className="em-shimmer" style={{ fontStyle: 'italic', fontWeight: 300 }}>Labs</em>
            </span>
          </div>
          <p className="zl-body-sm" style={{ marginTop: 16, maxWidth: '36ch' }}>
            An applied AI lab and consultancy. Carrer de Pau Claris, Barcelona.
          </p>
        </div>
        <FooterCol title="practice" items={['consulting', 'advisory', 'work']} />
        <FooterCol title="contact" items={['hola@000labs.com', 'github', 'linkedin']} />
        <FooterCol title="legal" items={['imprint', 'privacy']} />
      </div>
      <div style={{
        marginTop: 64, paddingTop: 24, borderTop: '1px solid var(--rule)',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-low)',
        letterSpacing: '0.04em', textTransform: 'uppercase',
      }}>
        <span>000labs · est. 2026</span>
        <span>same hands, end to end.</span>
      </div>
    </footer>
  );
};

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
        letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mid)',
      }}>{title}</div>
      <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((i) => (
          <a key={i} href="#" onClick={(e) => e.preventDefault()} style={{
            fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 300,
            color: 'var(--ink)', textDecoration: 'none',
          }}>{i}</a>
        ))}
      </div>
    </div>
  );
}