/* Footer — editorial, big signature */

function Footer() {
  return (
    <footer style={{ background: 'var(--bg)', borderTop: '1px solid var(--border)', padding: '80px 0 40px', position: 'relative', zIndex: 2 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, marginBottom: 60 }} id="ft-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <BrandMark size={36} />
              <Wordmark fontSize={22} />
            </div>
            <p className="body" style={{ maxWidth: 280, marginBottom: 24 }}>KI-Studio für die Immobilienbranche. Beratung, Agentur, Enablement — made in Germany.
            </p>
            <div className="chip"><span className="chip-dot pulse" /> Aktuell verfügbar</div>
          </div>

          <FooterCol title="Leistungen" links={[
          { label: 'KI-Audit', href: '#services' },
          { label: 'Visualisierung', href: '#services' },
          { label: 'Content-Automation', href: '#services' },
          { label: 'Marktanalyse', href: '#services' },
          { label: 'Workflows', href: '#services' },
          { label: 'Team-Enablement', href: '#services' }]
          } />
          <FooterCol title="Studio" links={[
          { label: 'Team', href: '#about' },
          { label: 'FAQ', href: 'FAQ.html' },
          { label: 'Kontakt', href: '#contact' }]
          } />
          <FooterCol title="Kontakt" links={[
          { label: 'info@archaitechs.de', href: 'mailto:info@archaitechs.de' },
          { label: 'LinkedIn', href: 'https://www.linkedin.com/company/archaitechs/', external: true },
          { label: 'Instagram', href: 'https://www.instagram.com/archaitechs/', external: true }]
          } />
        </div>

        {/* Giant signature */}
        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 40, overflow: 'hidden' }}>
          <div style={{
            fontFamily: '"Helvetica Neue", Helvetica, Arial, "Inter Tight", sans-serif',
            fontSize: 'clamp(48px, 13vw, 180px)', fontWeight: 700, letterSpacing: '-0.055em',
            lineHeight: 0.9, whiteSpace: 'nowrap', userSelect: 'none', textTransform: 'lowercase',
            background: 'linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.03))',
            WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent'
          }}>
            archaitechs
          </div>
        </div>

        <div style={{
          marginTop: 30, paddingTop: 24, borderTop: '1px solid var(--border)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16
        }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--text-4)', letterSpacing: '0.1em' }}>
            © 2026 ARCHAITECHS GMBH · ALLE RECHTE VORBEHALTEN
          </div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="Impressum.html" className="mono" style={{ fontSize: 11, color: 'var(--text-4)', letterSpacing: '0.1em', textDecoration: 'none' }}>IMPRESSUM</a>
            <a href="Datenschutz.html" className="mono" style={{ fontSize: 11, color: 'var(--text-4)', letterSpacing: '0.1em', textDecoration: 'none' }}>DATENSCHUTZ</a>
          </div>
        </div>
      </div>
      <style>{`@media(max-width:860px){#ft-grid{grid-template-columns:1fr 1fr!important;}}@media(max-width:560px){#ft-grid{grid-template-columns:1fr!important;}}`}</style>
    </footer>);

}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.2em', marginBottom: 18 }}>{title.toUpperCase()}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map((l) => {
          const isObj = typeof l === 'object';
          const label = isObj ? l.label : l;
          const href = isObj ? l.href : '#';
          const external = isObj && l.external;
          return (
            <a key={label} href={href}
            target={external ? '_blank' : undefined}
            rel={external ? 'noopener noreferrer' : undefined}
            onClick={(e) => {if (href === '#') e.preventDefault();}}
            style={{ color: 'var(--text-2)', fontSize: 14, textDecoration: 'none', transition: 'color .2s' }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-2)'}>
              {label}
            </a>);

        })}
      </div>
    </div>);

}

Object.assign(window, { Footer });