/* @jsxRuntime classic */
/* global React */

/* ============================================================
   9) FINAL CTA — Dark, dramatisch, full-bleed
   ============================================================ */
function FinalCtaSection() {
  return (
    <section id="final-cta" style={{
      position: 'relative', overflow: 'hidden',
      background: '#0A0F1E', color: '#fafafa',
      paddingTop: 144, paddingBottom: 144
    }}>
      {/* Strong central blue glow */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%,-50%)',
        width: 1100, height: 1100,
        background: 'radial-gradient(circle, rgba(46,90,150,0.28) 0%, rgba(46,90,150,0.08) 32%, transparent 60%)',
        pointerEvents: 'none', transform: 'translateZ(0)'
      }} />
      {/* Subtle lime accent — far corner */}
      <div style={{
        position: 'absolute', bottom: -180, right: -180, width: 540, height: 540,
        background: 'radial-gradient(circle, rgba(197,247,79,0.06) 0%, transparent 60%)',
        pointerEvents: 'none', transform: 'translateZ(0)'
      }} />
      {/* Grain */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${typeof window !== 'undefined' && window.__resources && window.__resources.grain || 'assets/grain.svg'})`,
        opacity: 0.05, pointerEvents: 'none', transform: 'translateZ(0)'
      }} />

      <div className="container" style={{
        position: 'relative', zIndex: 1, textAlign: 'center'
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '6px 14px', borderRadius: 100,
          background: 'rgba(197,247,79,0.10)',
          border: '1px solid rgba(197,247,79,0.35)',
          marginBottom: 36
        }}>
          <span style={{
            display: 'inline-block', width: 8, height: 8, borderRadius: 100,
            background: '#c5f74f',
            animation: 'live-pulse 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite'
          }} />
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 12,
            color: '#c5f74f', letterSpacing: '0.04em'
          }}>30 minuten · kostenlos · keine vorbereitung nötig</span>
        </div>

        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 'clamp(44px, 6.6vw, 88px)',
          letterSpacing: '-0.025em', lineHeight: 1.04,
          maxWidth: 1080, margin: '0 auto 32px',
          textWrap: 'balance'
        }}>
          Lassen Sie uns 30 Minuten{' '}
          <span style={{ color: '#c5f74f', fontStyle: 'italic', fontWeight: 500 }}>unverbindlich</span>
          {' '}sprechen.
        </h2>

        <p style={{
          fontSize: 20, lineHeight: 1.55, color: '#A8B5C8',
          maxWidth: 640, margin: '0 auto 56px'
        }}>
          Wir hören zu, geben eine ehrliche Einschätzung und wenn es passt einen konkreten nächsten Schritt. Kein Sales-Pitch, keine Verpflichtung.
        </p>

        <a href="https://calendly.com/tomconnect/30min" target="_blank" rel="noopener noreferrer" style={{
          background: '#2E5A96', color: '#fafafa', border: 0, borderRadius: 12,
          padding: '22px 36px', fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 18, cursor: 'pointer', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          transition: 'all 180ms cubic-bezier(0.2, 0.8, 0.2, 1)',
          boxShadow: '0 0 48px rgba(46,90,150,0.35)'
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = '#4A7AB6';
          e.currentTarget.style.boxShadow = '0 0 64px rgba(46,90,150,0.65)';
          e.currentTarget.style.transform = 'translateY(-2px)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = '#2E5A96';
          e.currentTarget.style.boxShadow = '0 0 48px rgba(46,90,150,0.35)';
          e.currentTarget.style.transform = 'translateY(0)';
        }}>
          Erstgespräch buchen
          <span style={{ fontSize: 22, lineHeight: 1 }}>→</span>
        </a>

        <div style={{
          marginTop: 40,
          display: 'inline-flex', alignItems: 'center', gap: 24,
          flexWrap: 'wrap', justifyContent: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: '#A8B5C8', letterSpacing: '0.04em'
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <CheckMark /> kein verbindlicher abschluss
          </span>
          <span style={{ color: '#2a3850' }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <CheckMark /> keine vorbereitung nötig
          </span>
          <span style={{ color: '#2a3850' }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <CheckMark /> antwort innerhalb 24h
          </span>
        </div>
      </div>
    </section>);

}

function CheckMark() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
    stroke="#4A7AB6" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="4,12 10,18 20,6" />
    </svg>);

}

/* ============================================================
   10) FOOTER — Light, vier Spalten
   ============================================================ */
function SiteFooter() {
  const cols = [
  {
    title: 'produkte',
    links: [
      { label: 'Connected Jobsite', href: '#products' },
      { label: 'EasyOrder & Apps', href: '/easyorder' },
      { label: 'Managed IT', href: '#products' },
    ]
  },
  {
    title: 'unternehmen',
    links: [
      { label: 'Über uns', href: '#about' },
      { label: 'Kontakt', href: 'mailto:info@tomconnect.net' },
    ]
  },
  {
    title: 'rechtliches',
    links: [
      { label: 'Impressum', href: '/impressum' },
      { label: 'Datenschutz', href: '/datenschutz' },
    ]
  }];


  return (
    <footer style={{
      background: '#fafafa', color: '#0a0a0a',
      paddingTop: 80, paddingBottom: 32,
      borderTop: '1px solid #e5e7eb'
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 48,
          paddingBottom: 64, borderBottom: '1px solid #e5e7eb'
        }} className="footer-grid">

          {/* Brand block */}
          <div>
            <img
              src="assets/tom-connect-logo-dunkel.svg"
              alt="T.O.M. Connect"
              style={{ height: 56, width: 'auto', display: 'block', marginBottom: 18 }} />
            

            <p style={{
              fontSize: 14, lineHeight: 1.6, color: '#6B7280',
              maxWidth: 360, margin: '0 0 20px'
            }}>
              Der IT-Partner für mittelständische Bau- und Handwerksbetriebe.
            </p>

            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 100,
              background: '#ffffff', border: '1px solid #e5e7eb'
            }}>
              <span style={{
                display: 'inline-block', width: 7, height: 7, borderRadius: 100,
                background: '#2E5A96'
              }} />
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: '#404040', letterSpacing: '0.04em'
              }}>hattersheim · hessen</span>
            </div>
          </div>

          {cols.map((col) =>
          <div key={col.title}>
              <h4 style={{
              fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 400,
              color: '#6B7280', letterSpacing: '0.05em',
              textTransform: 'lowercase', margin: '0 0 18px'
            }}>/ {col.title}</h4>
              <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 12
            }}>
                {col.links.map((l) =>
              <li key={l.label}>
                    <a href={l.href} style={{
                  fontFamily: 'var(--font-body)', fontSize: 14,
                  color: '#404040', textDecoration: 'none',
                  transition: 'color 150ms'
                }}
                onMouseEnter={(e) => e.currentTarget.style.color = '#2E5A96'}
                onMouseLeave={(e) => e.currentTarget.style.color = '#404040'}>
                  {l.label}</a>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, gap: 16, flexWrap: 'wrap'
        }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: '#6B7280', letterSpacing: '0.04em'
          }}>
            © 2026 T.O.M. Connect GmbH · Hattersheim am Main
          </span>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: '#9CA3AF', letterSpacing: '0.04em'
          }}>
            Aus der T.O.M. Unternehmensgruppe.
          </span>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
          .footer-grid > div:first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>);

}

window.FinalCtaSection = FinalCtaSection;
window.SiteFooter = SiteFooter;