/* Footer with big wordmark, links, and integrate CTA */

function Footer() {
  return (
    <footer className="section" style={{borderBottom:'none'}}>
      {/* Big closing lema */}
      <div style={{
        padding:'100px 0 48px 0', textAlign:'center', overflow:'hidden',
      }}>
        <div style={{
          fontFamily:'var(--font-sans)', fontWeight:500,
          fontSize:'clamp(40px, 7.8vw, 116px)', lineHeight:0.95, letterSpacing:'-0.03em',
          color:'var(--fg-0)', whiteSpace:'nowrap',
        }}>
          Keep assets <span style={{color:'var(--signal)'}}>liquid.</span>
        </div>
      </div>

      {/* Bottom row */}
      <div className="container">
        <div style={{
          borderTop:'1px solid var(--line-1)',
          padding:'32px 0',
          display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr 1fr', gap:32,
          fontFamily:'var(--font-mono)', fontSize:12, color:'var(--fg-2)',
        }}>
          <div>
            <div style={{display:'flex', gap:10, alignItems:'center', marginBottom:14}}>
              <Mark size={20}/>
              <span style={{color:'var(--fg-0)'}}>usufruct.io</span>
            </div>
            <div style={{color:'var(--fg-3)', maxWidth:340, lineHeight:1.55}}>
              A rental protocol for Sui objects.<br/>
              No protocol coin.<br/>
              No governance risk from outside parties.<br/>
              Open source.
            </div>
            <div style={{marginTop:16, display:'flex', flexDirection:'column', gap:8}}>
              <div style={{display:'flex', gap:10, alignItems:'center'}}>
                <Dot state="live"/>
                <span style={{color:'var(--good)'}}>live · sui testnet</span>
              </div>
              <div style={{display:'flex', gap:10, alignItems:'center'}}>
                <Dot state="dutch"/>
                <span style={{color:'var(--warn)'}}>coming soon · sui mainnet</span>
              </div>
            </div>
          </div>
          <div>
            <div style={{color:'var(--fg-3)', letterSpacing:'0.18em', marginBottom:14}}>RESOURCES</div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              <a href="https://github.com/0xkurious/usufruct-protocol" target="_blank" rel="noopener noreferrer" aria-label="GitHub" style={{color:'var(--fg-1)', textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8}}>
                <GitHubMark size={20}/>
                <span>protocol ↗</span>
              </a>
              <a href="https://github.com/0xkurious/usufruct-protocol-playground" target="_blank" rel="noopener noreferrer" aria-label="GitHub" style={{color:'var(--fg-1)', textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8}}>
                <GitHubMark size={20}/>
                <span>playground ↗</span>
              </a>
            </div>
          </div>
          <div>
            <div style={{color:'var(--fg-3)', letterSpacing:'0.18em', marginBottom:14}}>CONTACT</div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              <a href="https://discord.gg/aQpBtnE6v" target="_blank" rel="noopener noreferrer" style={{color:'var(--fg-1)', textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8}}>
                <DiscordMark size={20}/>
                <span>Discord ↗</span>
              </a>
              <a href="mailto:contact@usufruct.io" style={{color:'var(--fg-1)', textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8}}>
                <MailMark size={20}/>
                <span>contact@usufruct.io ↗</span>
              </a>
            </div>
          </div>
          <div>
            <div style={{color:'var(--fg-3)', letterSpacing:'0.18em', marginBottom:14}}>LEGAL</div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              <a href="https://github.com/0xkurious/usufruct-protocol/blob/main/LICENSE" target="_blank" rel="noopener noreferrer" style={{color:'var(--fg-1)', textDecoration:'none'}}>License — Apache 2.0 ↗</a>
            </div>
          </div>
        </div>
        <div style={{
          paddingBottom:32, paddingTop:8,
          fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-3)',
          display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:12,
        }}>
          <span>© 2026 usufruct.io — keep assets liquid.</span>
          <span>Built on Sui</span>
          <span>pushing sui move 2024 to the frontier.</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;