/* TrustBar — 2 Varianten: A Marquee Pseudo-Logos + Metrics, B Logo-Grid
   Akteurstypen statt Markennamen. */

function Trust() {
  const { tweaks } = React.useContext(TweakCtx);
  const v = tweaks.trustVariant || 'A';
  return v === 'B' ? <TrustB /> : <TrustA />;
}

/* ---------- Pseudo-Logos: 8 Akteurstypen, je eigener Mark + Wordmark ---------- */

function LogoMakler({ sz = 24 }) {
  // Makler: Haus + serifiger Wordmark
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={sz} height={sz} viewBox="0 0 32 32" fill="none">
        <rect x="1" y="1" width="30" height="30" rx="3" stroke="currentColor" strokeWidth="1.2" opacity="0.5" />
        <path d="M8 20V13L16 8L24 13V20" stroke="currentColor" strokeWidth="1.2" />
        <path d="M13 20V16H19V20" stroke="currentColor" strokeWidth="1.2" />
      </svg>
      <span style={{ fontFamily: 'Georgia, serif', fontSize: 16, fontStyle: 'italic', letterSpacing: '-0.01em' }}>Maklerbüros</span>
    </div>);

}

function LogoBautraeger({ sz = 22 }) {
  // Bauträger: Dach + caps
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none">
        <path d="M3 21V7L12 3L21 7V21" stroke="currentColor" strokeWidth="2" strokeLinejoin="miter" />
        <path d="M3 21H21" stroke="currentColor" strokeWidth="2" />
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Bauträgern</span>
    </div>);

}

function LogoPropco({ sz = 24 }) {
  // Propco: monogramm PC
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: sz, height: sz, borderRadius: '50%', border: '1.5px solid currentColor',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 10, letterSpacing: '-0.02em'
      }}>pc</div>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 16, letterSpacing: '-0.03em' }}>propcos<span style={{ opacity: 0.5 }}>.</span></span>
    </div>);

}

function LogoAssetManager({ sz = 22 }) {
  // Asset Manager: kristall-emblem + serif
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none">
        <path d="M12 2L22 7V17L12 22L2 17V7L12 2Z" stroke="currentColor" strokeWidth="1.3" />
        <path d="M12 2V22M2 7L22 17M22 7L2 17" stroke="currentColor" strokeWidth="0.6" opacity="0.4" />
      </svg>
      <span style={{ fontFamily: 'Georgia, serif', fontSize: 16, letterSpacing: '0.02em' }}>Asset Managern</span>
    </div>);

}

function LogoVermittler({ sz = 22 }) {
  // Vermittler: zwei kreise, matching
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
      <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none">
        <circle cx="8" cy="12" r="4" stroke="currentColor" strokeWidth="1.5" />
        <circle cx="16" cy="12" r="4" stroke="currentColor" strokeWidth="1.5" />
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 16, letterSpacing: '-0.02em', lineHeight: 1 }}>vermittlern</span>
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'currentColor', display: 'inline-block', marginBottom: 2 }} />
    </div>);

}

function LogoFamilyOffice({ sz = 20 }) {
  // Family Office: stern-emblem
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={sz} height={sz} viewBox="0 0 20 20" fill="none">
        <path d="M10 2L12 8H18L13 12L15 18L10 14L5 18L7 12L2 8H8L10 2Z" stroke="currentColor" strokeWidth="1.2" />
      </svg>
      <span style={{ fontFamily: 'Georgia, serif', fontSize: 12, letterSpacing: '0.25em', textTransform: 'uppercase' }}>FAMILY OFFICES</span>
    </div>);

}

function LogoArchitekten({ sz = 22 }) {
  // Architekten: bauhaus grid
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none">
        <rect x="3" y="3" width="18" height="18" stroke="currentColor" strokeWidth="1.5" />
        <line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" strokeWidth="1" />
        <line x1="9" y1="9" x2="9" y2="21" stroke="currentColor" strokeWidth="1" />
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 16, letterSpacing: '0.08em', textTransform: 'lowercase' }}>architektur/büros</span>
    </div>);

}

function LogoBauentwickler({ sz = 22 }) {
  // Bauentwickler: dreieck
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none">
        <path d="M4 20L12 4L20 20H4Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
        <path d="M9 14H15" stroke="currentColor" strokeWidth="1.5" />
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Projekt<span style={{ opacity: 0.5, fontWeight: 300 }}>entwicklern</span></span>
    </div>);

}

const LOGO_COMPONENTS = [
LogoMakler, LogoBautraeger, LogoPropco, LogoAssetManager,
LogoVermittler, LogoFamilyOffice, LogoArchitekten, LogoBauentwickler];


function TrustA() {
  return (
    <section style={{ padding: '36px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', overflow: 'hidden' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.2em', whiteSpace: 'nowrap' }}>WIR ARBEITEN MIT
        </div>
      </div>
      <div style={{ marginTop: 24, position: 'relative', maskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)' }}>
        <div className="marquee-track" style={{ gap: 0 }}>
          {[...LOGO_COMPONENTS, ...LOGO_COMPONENTS].map((L, i) =>
          <div key={i} style={{
            padding: '0 48px', color: 'var(--text-3)', whiteSpace: 'nowrap',
            display: 'flex', alignItems: 'center', height: 56,
            transition: 'color .3s'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-3)'}>
            
              <L />
            </div>
          )}
        </div>
      </div>
      <div style={{ marginTop: 12, position: 'relative', maskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)' }}>
        <div className="marquee-track reverse" style={{ gap: 0 }}>
          {[...LOGO_COMPONENTS.slice().reverse(), ...LOGO_COMPONENTS.slice().reverse()].map((L, i) =>
          <div key={i} style={{
            padding: '0 48px', color: 'var(--text-4)', whiteSpace: 'nowrap',
            display: 'flex', alignItems: 'center', height: 56,
            transition: 'color .3s'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-2)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-4)'}>
            
              <L />
            </div>
          )}
        </div>
      </div>
      <style>{`@media(max-width:768px){#trust-grid{grid-template-columns:1fr!important;}#trust-metrics{gap:20px!important;}}`}</style>
    </section>);

}

function MetricMini({ k, v }) {
  return (
    <div>
      <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{k}</div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 4 }}>{v}</div>
    </div>);

}

function TrustB() {
  return (
    <section style={{ padding: '80px 0', borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="mono reveal" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.2em', marginBottom: 32, textAlign: 'center' }}>
          WIR ARBEITEN MIT
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          border: '1px solid var(--border)', borderRadius: 'var(--radius)'
        }} id="trustB-grid" className="reveal">
          {LOGO_COMPONENTS.map((L, i) =>
          <div key={i} style={{
            padding: '40px 20px', display: 'flex', alignItems: 'center', justifyContent: 'center',
            minHeight: 110,
            borderRight: (i + 1) % 4 !== 0 ? '1px solid var(--border)' : 'none',
            borderBottom: i < 4 ? '1px solid var(--border)' : 'none',
            color: 'var(--text-3)', transition: 'color .3s, background .3s'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.color = 'var(--text)';e.currentTarget.style.background = 'rgba(255,255,255,0.02)';}}
          onMouseLeave={(e) => {e.currentTarget.style.color = 'var(--text-3)';e.currentTarget.style.background = 'transparent';}}>
            
              <L />
            </div>
          )}
        </div>
      </div>
      <style>{`@media(max-width:768px){#trustB-grid{grid-template-columns:repeat(2,1fr)!important;}#trustB-grid > div{border-right:none!important;border-bottom:1px solid var(--border)!important;}#trustB-grid > div:nth-child(odd){border-right:1px solid var(--border)!important;}}`}</style>
    </section>);

}

Object.assign(window, { Trust });