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

window.AtFooter = () => (
  <footer style={{
    background: TC.ink,
    color: TC.bone,
    padding: 'clamp(56px, 6vw, 80px) clamp(24px, 4vw, 56px) 32px',
    position: 'relative',
    overflow: 'hidden',
  }}>
    <div style={{ maxWidth: 1800, 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="https://www.metrocitycleanout.com" target="_blank" rel="noopener" className="at-foot-link">Metro Citywide Cleanout ↗</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 — SVG so it always fills the row width */}
      <div style={{
        padding: '24px 0 56px',
        textAlign: 'center',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <svg viewBox="0 0 1000 230" style={{
          display: 'block', width: '100%', height: 'auto',
          userSelect: 'none',
        }} aria-label="websites.guama.dev">
          <text x="500" y="172" textAnchor="middle"
            fontFamily={TC.serif}
            fontSize="200"
            fontWeight="400"
            letterSpacing="-7"
            textLength="960"
            lengthAdjust="spacingAndGlyphs"
            fill={TC.bone}>
            <tspan fontStyle="italic" fill={TC.terraLight}>websites.</tspan>
            <tspan>guama</tspan>
            <tspan fontStyle="italic" fill={TC.terraLight}>.dev</tspan>
          </text>
        </svg>
      </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 · websites.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>
);