// Footer — big wordmark, link columns, fine print.

window.AtFooter = () => (
  <footer style={{
    background: TC.ink,
    color: TC.bone,
    padding: '80px 40px 32px',
    position: 'relative',
    overflow: 'hidden',
  }}>
    <div style={{ maxWidth: 1320, margin: '0 auto' }}>
      {/* columns */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
        gap: 48,
        paddingBottom: 56,
        borderBottom: '1px solid rgba(241,233,218,0.14)',
      }}>
        <div>
          <AtLogo size={30} color={TC.bone} terraColor={TC.terraLight} />
          <p style={{
            fontSize: 15, lineHeight: 1.55,
            color: 'rgba(241,233,218,0.65)',
            margin: '24px 0 32px', maxWidth: 340,
          }}>
            A small, independent team making websites, automations, AI systems,
            mobile apps, and cloud infrastructure for businesses that&#39;d rather talk to humans.
          </p>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '10px 14px', borderRadius: 999,
            border: '1px solid rgba(241,233,218,0.2)',
            fontFamily: TC.mono, fontSize: 11,
            color: 'rgba(241,233,218,0.75)', letterSpacing: 1,
          }}>
            <span style={{ width: 7, height: 7, borderRadius: 4,
              background: '#7FE08A', animation: 'atPulse 2s ease-in-out infinite' }} />
            Taking projects · Q3 2026
          </div>
        </div>

        <div>
          <div style={{
            fontFamily: TC.mono, fontSize: 10,
            color: 'rgba(241,233,218,0.5)', letterSpacing: 2,
            textTransform: 'uppercase', marginBottom: 20,
          }}>Team</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <a href="#services" className="at-foot-link">Services</a>
            <a href="#work" className="at-foot-link">Work</a>
            <a href="#process" className="at-foot-link">Process</a>
            <a href="#about" className="at-foot-link">About</a>
            <a href="#contact" className="at-foot-link">Contact</a>
          </div>
        </div>

        <div>
          <div style={{
            fontFamily: TC.mono, fontSize: 10,
            color: 'rgba(241,233,218,0.5)', letterSpacing: 2,
            textTransform: 'uppercase', marginBottom: 20,
          }}>Recent work</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <a href="https://srla.hamiltonhs.org" target="_blank" rel="noopener" className="at-foot-link">Hamilton SRLA ↗</a>
            <a href="https://glance.guama.dev" target="_blank" rel="noopener" className="at-foot-link">Glance ↗</a>
            <a href="#work" className="at-foot-link">Meridian Dental</a>
            <a href="#work" className="at-foot-link">Forge &amp; Fern</a>
            <a href="#work" className="at-foot-link">Northbound HVAC</a>
          </div>
        </div>

        <div>
          <div style={{
            fontFamily: TC.mono, fontSize: 10,
            color: 'rgba(241,233,218,0.5)', letterSpacing: 2,
            textTransform: 'uppercase', marginBottom: 20,
          }}>Say hello</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <a href="mailto:websites@guama.dev" className="at-foot-link">websites@guama.dev</a>
            <a href="tel:+13104006052" className="at-foot-link">310 · 400 · 6052</a>
            <a href="#contact" className="at-foot-link">Start a project ↗</a>
          </div>
        </div>
      </div>

      {/* giant wordmark */}
      <div style={{
        padding: '48px 0 32px',
        textAlign: 'center',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div style={{
          fontFamily: TC.serif,
          fontSize: 'clamp(96px, 18vw, 260px)',
          letterSpacing: -8,
          lineHeight: 0.9,
          color: TC.bone,
          userSelect: 'none',
        }}>
          guama<em style={{ color: TC.terraLight, fontStyle: 'italic' }}>.dev</em>
        </div>
      </div>

      {/* fine print */}
      <div style={{
        paddingTop: 28,
        borderTop: '1px solid rgba(241,233,218,0.14)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 16,
        fontFamily: TC.mono, fontSize: 11, letterSpacing: 0.5,
        color: 'rgba(241,233,218,0.5)',
      }}>
        <div>© 2016 – 2026 · guama.dev · Los Angeles</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <span>Made by hand · no AI copy</span>
          <span>v26.04</span>
        </div>
      </div>
    </div>
  </footer>
);