// Footer — dark slab, big wordmark.

function FooterSection() {
  return (
    <footer data-screen-label="08 Footer" className="bg-ink" style={{padding:'80px 0 50px', borderTop:'1px solid var(--ink-line)', position:'relative', overflow:'hidden'}}>
      <div className="wrap">
        <div className="footer-grid" style={{display:'grid', gridTemplateColumns:'minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)', gap:48, marginBottom:64}}>
          <div>
            <div className="mark" style={{marginBottom:18}}>
              <VantuzWordmark height={32}/>
            </div>
            <p style={{fontSize:14, lineHeight:1.55, color:'var(--txt-2)', maxWidth:320, margin:0}}>
              AI-native deception security for the moment when the attacker stops being a person.
            </p>
            <div className="mono" style={{fontSize:11, letterSpacing:'.15em', color:'var(--txt-4)', marginTop:24, textTransform:'uppercase'}}>
              EU · Made in Europe
            </div>
          </div>

          {[
            { h:'Platform', l:[
              ['Honeytokens', '/platform'],
              ['LLM Honeypot', '/platform'],
              ['AI Investigation', '/platform'],
              ['Containment', '/platform'],
              ['Threat Intel', '/blog'],
            ] },
            { h:'Company',  l:[
              ['Blog', '/blog'],
              ['Contact', '/contact'],
              ['Pricing', '/pricing'],
            ] },
            { h:'Trust',    l:[
              ['NIS2 mapping', '/nis2'],
              ['GDPR', '/nis2'],
              ['Security', '/contact'],
            ] },
          ].map((g,i) => (
            <div key={i}>
              <div className="mono" style={{fontSize:11, letterSpacing:'.2em', color:'var(--txt-4)', textTransform:'uppercase', marginBottom:18}}>{g.h}</div>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                {g.l.map(([label, href]) => (
                  <a
                    key={label}
                    href={href}
                    style={{fontSize:14, color:'var(--txt-2)', transition:'color .15s ease'}}
                    onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                    onMouseLeave={e => e.currentTarget.style.color = 'var(--txt-2)'}
                  >
                    {label}
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* huge wordmark */}
        <div style={{borderTop:'1px solid var(--ink-line)', paddingTop:40, position:'relative', overflow:'hidden'}}>
          <div className="display footer-bigmark" style={{
            fontSize:'clamp(140px, 22vw, 340px)',
            lineHeight:.85, color:'transparent',
            WebkitTextStroke:'1px rgba(255,255,255,.12)',
            letterSpacing:'-.04em', marginBottom:24, userSelect:'none',
          }}>
            v a n t u z
          </div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16}}>
            <div className="mono" style={{fontSize:11, color:'var(--txt-4)', letterSpacing:'.1em'}}>
              © 2026 Vantuz · Made in the EU
            </div>
            <div className="mono" style={{fontSize:11, color:'var(--txt-4)', letterSpacing:'.1em'}}>
              <span className="live-dot" style={{marginRight:8}}/>Built for reliability
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.FooterSection = FooterSection;