// scenes-footer.jsx — the night-sky footer.
// A celestial map with the 4 product stars labeled, columns of links, fine print.

function Footer() {
  return (
    <footer id="studio" style={{
      position: 'relative',
      padding: '160px 8vw 60px',
      color: 'var(--lavender-2)',
      borderTop: '1px solid rgba(200,184,255,.12)',
    }}>
      <div style={{ maxWidth: 1380, margin: '0 auto' }}>
        {/* Top — huge brand mark with floating mini-constellation */}
        <div className="footer-top" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80,
          paddingBottom: 80, borderBottom: '1px solid rgba(200,184,255,.12)',
          alignItems: 'end',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.5em',
              textTransform: 'uppercase', color: 'var(--lavender)', marginBottom: 36,
            }}>Pick a doorway.</div>
            <img src="assets/arilabs-logo-trim.png" alt="AriLabs" style={{
              width: 'min(380px, 80%)', height: 'auto', display: 'block',
              filter: 'brightness(0) invert(1) opacity(.92)',
              marginLeft: -10,
            }}/>
            <p style={{
              fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic',
              maxWidth: 460, marginTop: 28, opacity: .75, lineHeight: 1.4,
            }}>
              A studio of four small things. Made on a shelf in Manchester. The kettle is on.
            </p>
            <div style={{
              display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap',
            }}>
              {['Core', 'Roam', 'Code', 'Desk'].map((p) => (
                <a key={p} href={`#${p.toLowerCase()}`} data-cursor="hover" style={{
                  padding: '10px 18px', borderRadius: 99,
                  border: '1px solid rgba(200,184,255,.3)',
                  fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.22em',
                  textTransform: 'uppercase', transition: 'background .3s, color .3s, border-color .3s',
                }} onMouseEnter={(e)=>{e.currentTarget.style.background='var(--lavender)';e.currentTarget.style.color='var(--night)'}}
                   onMouseLeave={(e)=>{e.currentTarget.style.background='';e.currentTarget.style.color=''}}>Ari · {p}</a>
              ))}
            </div>
          </div>

          {/* Mini constellation map */}
          <div style={{ position: 'relative', aspectRatio: '1.4 / 1', minHeight: 240 }}>
            <svg viewBox="0 0 1000 700" style={{ width: '100%', height: '100%' }}>
              <defs>
                <linearGradient id="ft-line" x1="0" x2="1">
                  <stop offset="0" stopColor="#d4a85a"/>
                  <stop offset="1" stopColor="#c8b8ff"/>
                </linearGradient>
              </defs>
              <line x1="220" y1="200" x2="700" y2="150" stroke="url(#ft-line)" strokeWidth="0.8" opacity="0.5"/>
              <line x1="700" y1="150" x2="800" y2="500" stroke="url(#ft-line)" strokeWidth="0.8" opacity="0.5"/>
              <line x1="800" y1="500" x2="280" y2="540" stroke="url(#ft-line)" strokeWidth="0.8" opacity="0.5"/>
              <line x1="280" y1="540" x2="220" y2="200" stroke="url(#ft-line)" strokeWidth="0.8" opacity="0.5"/>
              {[
                { x: 220, y: 200, label: 'Core',  tone: '#d4a85a' },
                { x: 700, y: 150, label: 'Roam',  tone: '#c8b8ff' },
                { x: 800, y: 500, label: 'Code',  tone: '#d4a85a' },
                { x: 280, y: 540, label: 'Desk',  tone: '#c8b8ff' },
              ].map((s) => (
                <g key={s.label}>
                  <circle cx={s.x} cy={s.y} r="22" fill={s.tone} opacity="0.2" filter="blur(6px)"/>
                  <circle cx={s.x} cy={s.y} r="5" fill="#fff6e4"/>
                  <text x={s.x + 18} y={s.y + 5} fill={s.tone} fontFamily="var(--mono)" fontSize="13" letterSpacing="3" style={{textTransform:'uppercase'}}>{s.label.toUpperCase()}</text>
                </g>
              ))}
            </svg>
          </div>
        </div>

        {/* Column links */}
        <div className="footer-links" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 56,
          paddingTop: 64, paddingBottom: 64,
        }}>
          {[
            { h: 'Tools', items: ['Ari · Core', 'Ari · Roam', 'Ari · Code', 'Ari · Desk'] },
            { h: 'Studio', items: ['Manifesto', 'Journal', 'Press kit', 'Hiring'] },
            { h: 'Open', items: ['Local-first models', 'No-telemetry promise', 'Acknowledgements', 'Bibliography'] },
            { h: 'Talk', items: ['hello@arilabs.studio', 'Mastodon', 'RSS', 'Newsletter'] },
          ].map((col) => (
            <div key={col.h}>
              <h6 style={{
                fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.32em',
                textTransform: 'uppercase', color: 'var(--lavender)', marginBottom: 22,
                fontWeight: 500,
              }}>{col.h}</h6>
              <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {col.items.map((it) => (
                  <li key={it} style={{
                    fontFamily: 'var(--serif)', fontSize: 17,
                  }}>
                    <a href="#" data-cursor="hover" style={{
                      opacity: 0.8, transition: 'opacity .3s, color .3s',
                    }} onMouseEnter={(e)=>{e.currentTarget.style.opacity=1;e.currentTarget.style.color='var(--lavender-2)'}}
                       onMouseLeave={(e)=>{e.currentTarget.style.opacity=0.8;e.currentTarget.style.color=''}}>{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 36, borderTop: '1px solid rgba(200,184,255,.12)',
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.25em', textTransform: 'uppercase',
          opacity: 0.55,
        }}>
          <span>© 2026 AriLabs Studio</span>
          <span>Made between the kettle and the lamp.</span>
          <span>Manchester, UK</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;