// Footer — ink panel. Three columns, mono labels. Includes weave mark + newsletter line.

function Footer({ onNav }) {
  const wrap = { background: 'var(--bc-ink)', color: 'var(--bc-paper)', padding: '80px clamp(20px, 4vw, 48px) 32px' };
  const inner = { maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48 };
  const top = { display: 'flex', flexDirection: 'column', gap: 20 };
  const mark = { display: 'flex', alignItems: 'center', gap: 12 };
  const word = { fontFamily: 'var(--bc-font-display)', fontSize: 26, letterSpacing: '-0.02em' };
  const para = { fontFamily: 'var(--bc-font-sans)', fontSize: 14, lineHeight: 1.65, color: 'rgba(237,234,229,0.7)', maxWidth: 360 };
  const colHead = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.5)', marginBottom: 18 };
  const link = { display: 'block', fontFamily: 'var(--bc-font-sans)', fontSize: 14, color: 'var(--bc-paper)', padding: '5px 0', cursor: 'pointer', textDecoration: 'none' };
  const bottom = { borderTop: '1px solid rgba(237,234,229,0.12)', marginTop: 56, paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', maxWidth: 1280, margin: '56px auto 0', flexWrap: 'wrap', gap: 16 };
  const bSmall = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.45)' };

  const inputRow = { display: 'flex', border: '1px solid rgba(237,234,229,0.18)', maxWidth: 360 };
  const inputStyle = { flex: 1, background: 'transparent', border: 'none', outline: 'none', padding: '12px 14px', fontFamily: 'var(--bc-font-sans)', fontSize: 13, color: 'var(--bc-paper)' };
  const subBtn = { background: 'var(--bc-paper)', color: 'var(--bc-ink)', border: 'none', padding: '0 16px', fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer', fontWeight: 500 };

  // Inverted weave mark on dark surface.
  const markSvg = (
    <svg width="34" height="34" viewBox="0 0 200 200" shapeRendering="crispEdges">
      <defs>
        <mask id="ftrweave" maskUnits="userSpaceOnUse">
          <rect x="22" y="41" width="156" height="18" fill="#fff"/>
          <rect x="22" y="91" width="156" height="18" fill="#fff"/>
          <rect x="22" y="141" width="156" height="18" fill="#fff"/>
          <rect x="41" y="22" width="18" height="156" fill="#fff"/>
          <rect x="91" y="22" width="18" height="156" fill="#fff"/>
          <rect x="141" y="22" width="18" height="156" fill="#fff"/>
          <rect x="40.5" y="40.5" width="19" height="19" fill="#000"/>
          <rect x="90.5" y="40.5" width="19" height="19" fill="#000"/>
          <rect x="140.5" y="40.5" width="19" height="19" fill="#000"/>
          <rect x="40.5" y="90.5" width="19" height="19" fill="#000"/>
          <rect x="90.5" y="90.5" width="19" height="19" fill="#000"/>
          <rect x="140.5" y="90.5" width="19" height="19" fill="#000"/>
          <rect x="40.5" y="140.5" width="19" height="19" fill="#000"/>
          <rect x="90.5" y="140.5" width="19" height="19" fill="#000"/>
          <rect x="140.5" y="140.5" width="19" height="19" fill="#000"/>
          <rect x="40.5" y="41" width="19" height="18" fill="#fff"/>
          <rect x="40.5" y="91" width="19" height="18" fill="#fff"/>
          <rect x="40.5" y="141" width="19" height="18" fill="#fff"/>
          <rect x="91" y="40.5" width="18" height="19" fill="#fff"/>
          <rect x="91" y="90.5" width="18" height="19" fill="#fff"/>
          <rect x="91" y="140.5" width="18" height="19" fill="#fff"/>
          <rect x="140.5" y="41" width="19" height="18" fill="#fff"/>
          <rect x="140.5" y="91" width="19" height="18" fill="#fff"/>
          <rect x="140.5" y="141" width="19" height="18" fill="#fff"/>
        </mask>
      </defs>
      <rect x="0" y="0" width="200" height="200" fill="#EDEAE5" mask="url(#ftrweave)"/>
    </svg>
  );

  return (
    <footer style={wrap} data-screen-label="99 Footer">
      <div style={inner}>
        <div style={top}>
          <div style={mark}>
            {markSvg}
            <span style={word}>BuildCraft</span>
            <span style={{ fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--bc-selvedge)', marginLeft: 6 }}>LABS</span>
          </div>
          <p style={para}>
            A software think tank building products, services, and intelligent systems that solve
            problems before they scale. India-rooted. Working globally.
          </p>
          <div>
            <div style={{ ...colHead, marginBottom: 12 }}>Notes — quarterly</div>
            <form style={inputRow} onSubmit={e => e.preventDefault()}>
              <input style={inputStyle} placeholder="you@somewhere.com" />
              <button style={subBtn}>Subscribe</button>
            </form>
          </div>
        </div>

        <div>
          <div style={colHead}>Studio</div>
          <a style={link} onClick={() => onNav('work')}>Work</a>
          <a style={link} onClick={() => onNav('about')}>About</a>
          <a style={link} onClick={() => onNav('manifesto')}>Manifesto</a>
          <a style={link} onClick={() => onNav('careers')}>Careers</a>
        </div>
        <div>
          <div style={colHead}>Engage</div>
          <a style={link} onClick={() => onNav('contact')}>Start a project</a>
          <a style={link} onClick={() => onNav('contact')}>Newsletter</a>
          <a style={link} href="mailto:hello@buildcraft.town">hello@buildcraft.town</a>
        </div>
        <div>
          <div style={colHead}>Elsewhere</div>
          <a style={link} href="https://github.com/buildcraftlabs" target="_blank" rel="noreferrer">GitHub</a>
          <a style={link} href="https://linkedin.com/company/buildcraftlabs" target="_blank" rel="noreferrer">LinkedIn</a>
          <a style={link} href="https://x.com/buildcraftlabs" target="_blank" rel="noreferrer">X · Twitter</a>
        </div>
      </div>
      <div style={bottom}>
        <span style={bSmall}>© 2026 BuildCraft Labs</span>
        <span style={bSmall}>Made in India · for the world</span>
        <span style={bSmall}>v1.0 · Apr 2026</span>
      </div>
    </footer>
  );
}

window.Footer = Footer;