/* Integrations + Social Proof */
const TrustStrip = () => {
  const names = ['Dresdner Taxigenossenschaft','Taxi-Ruf Bremen','Taxi Bonn eG','Taxi Chemnitz','Taxi Heidelberg'];
  const loop = [...names, ...names, ...names];
  return (
    <section className="trust-strip" style={{background:'var(--paper)',padding:'72px 0 48px',border:'none',outline:'none'}}>
      <div className="wrap">
        <div className="mono" style={{fontSize:11,color:'var(--muted-light)',letterSpacing:'0.12em',marginBottom:24,textAlign:'center'}}>VERTRAUT VON TAXIZENTRALEN IN DEUTSCHLAND</div>
        <div className="marquee">
          <div className="marquee-track">
            {loop.map((n,i)=>(
              <span key={i} style={{fontFamily:'var(--f-display)',fontSize:22,fontWeight:500,letterSpacing:'-0.02em',color:'rgba(10,11,8,0.38)'}}>{n}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Integrations = () => {
  // 9-tile grid (3x3). Most relevant: 2 live dispatch, 3 live telephony,
  // 3 API-reachable, 1 lime "+ Ihr System?" CTA.
  const tiles = [
    { name:'Taxi.eu',    tag:'DISPATCH',   live:true },
    { name:'GEFOS',      tag:'DISPATCH',   live:true },
    { name:'Twilio',     tag:'TELEFONIE',  live:true },
    { name:'Sipgate',    tag:'TELEFONIE',  live:true },
    { name:'Asterisk',   tag:'TELEFONIE',  live:true },
    { name:'Telekom',    tag:'TELEFONIE',  live:false },
    { name:'Ihre API',      tag:'REST / WEBHOOK', live:false },
    { name:'Ihre Telefonie', tag:'SIP',            live:false },
    { name:'__cta',      tag:'',           live:false, cta:true },
  ];

  // Puzzle reveal: each tile pops in on its own timer, in a shuffled order.
  // Slow, deliberate — like puzzle pieces snapping into place.
  const gridRef = React.useRef(null);
  const [visible, setVisible] = React.useState(() => tiles.map(() => false));
  const [hovered, setHovered] = React.useState(-1);
  const [gridRevealed, setGridRevealed] = React.useState(false);
  const headerRef = useReveal({delay: 0});

  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setVisible(tiles.map(() => true)); setGridRevealed(true); return; }

    const el = gridRef.current;
    if (!el) return;
    let triggered = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !triggered) {
          triggered = true;
          setGridRevealed(true);
          // Shuffle order for random puzzle feel
          const order = tiles.map((_,i) => i).sort(() => Math.random() - 0.5);
          order.forEach((idx, step) => {
            setTimeout(() => {
              setVisible(v => { const next = [...v]; next[idx] = true; return next; });
            }, step * 180);
          });
          obs.disconnect();
        }
      });
    }, { threshold: 0.2 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  const tileTransition = 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1), filter 700ms cubic-bezier(0.22,1,0.36,1), background 200ms ease';

  return (
    <section className="section ink" id="integrationen">
      <div className="wrap">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1.5fr',gap:64,alignItems:'center'}} className="int-grid">
          <div ref={headerRef} className="reveal">
            <span className="eyebrow">Integrationen</span>
            <h2 className="h-section" style={{marginTop:24}}>
              Passt in<br/>
              Ihr Stack.
            </h2>
            <p className="lede" style={{marginTop:24}}>
              Keine Migration. AIVENT dockt sich an Ihre Telefonanlage und Ihr Dispo-System an — live getestet mit Taxi.eu und GEFOS, via REST/SIP/Webhooks mit allem anderen.
            </p>
            <a href="demo.html" className="btn btn-ghost" style={{marginTop:28}}>Integration besprechen <span className="arrow">↗</span></a>
          </div>

          <div ref={gridRef} style={{
            display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:1,
            background: gridRevealed ? 'var(--ink-line)' : 'transparent',
            border: gridRevealed ? '1px solid var(--ink-line)' : '1px solid transparent',
            transition: 'background 400ms ease 1400ms, border-color 400ms ease 1400ms',
          }} className="int-grid-items">
            {tiles.map((t,i)=>{
              const isVisible = visible[i];
              const finalOpacity = t.cta ? 1 : (t.live ? 1 : 0.65);
              const commonAnim = {
                opacity: isVisible ? finalOpacity : 0,
                transform: isVisible ? 'scale(1)' : 'scale(0.82)',
                filter: isVisible ? 'blur(0)' : 'blur(4px)',
                transition: tileTransition,
                willChange: 'opacity, transform, filter',
              };
              if (t.cta) {
                return (
                  <div key={i} style={{
                    ...commonAnim,
                    background:'var(--lime)',color:'var(--ink)',aspectRatio:'1',
                    display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',
                    fontFamily:'var(--f-mono)',fontSize:13,fontWeight:600,padding:16,gap:4,textAlign:'center',
                  }}>
                    <div style={{fontFamily:'var(--f-display)',fontSize:18,letterSpacing:'-0.01em'}}>+ Ihr System?</div>
                    <div style={{fontSize:10,letterSpacing:'0.14em',opacity:0.7}}>WIR BAUEN'S</div>
                  </div>
                );
              }
              return (
                <div key={i} style={{
                  ...commonAnim,
                  background: hovered === i ? 'var(--ink-3)' : 'var(--ink-2)',
                  aspectRatio:'1',
                  display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',
                  fontFamily:'var(--f-mono)',
                  textAlign:'center',padding:16,gap:8,position:'relative',
                }}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(-1)}>
                  <div style={{fontSize:18,fontFamily:'var(--f-display)',letterSpacing:'-0.01em',color:'#F6F5EF',fontWeight:500}}>{t.name}</div>
                  <div style={{fontSize:10,letterSpacing:'0.14em',color:'rgba(246,245,239,0.5)'}}>{t.tag}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <style>{`@media(max-width:960px){.int-grid{grid-template-columns:1fr !important} .int-grid-items{grid-template-columns:repeat(3,1fr) !important}}`}</style>
    </section>
  );
};

const SocialProof = () => {
  const headerRef = useReveal();
  const cardRef = useReveal({delay: 120, threshold: 0.12});

  return (
    <section className="section paper-2">
      <div className="wrap">
        <div ref={headerRef} className="reveal" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:64,gap:40,flexWrap:'wrap'}}>
          <span className="eyebrow" style={{color:'var(--lime-deep)'}}>Partner-Stimme</span>
          <div className="mono" style={{fontSize:12,color:'var(--muted-light)'}}>VERMITTLUNGSSOFTWARE · DACH</div>
        </div>

        <div ref={cardRef} className="reveal sp-quote-row" style={{
          display:'grid',
          gridTemplateColumns:'1.25fr 1fr',
          gap:0,
          alignItems:'stretch',
          background:'#fff',
          border:'1px solid var(--paper-line)',
          overflow:'hidden',
        }}>
          {/* LEFT — QUOTE */}
          <div style={{padding:'64px 64px 56px',display:'flex',flexDirection:'column',justifyContent:'space-between',gap:40}} className="sp-quote-side">
            <div>
              <div className="mono" style={{fontSize:11,letterSpacing:'0.18em',color:'var(--lime-deep)',fontWeight:700,marginBottom:28,display:'inline-flex',alignItems:'center',gap:10}}>
                <span style={{width:6,height:6,borderRadius:'50%',background:'var(--lime-deep)'}}></span>
                PARTNER-STIMME
              </div>
              <div style={{fontFamily:'var(--f-display)',fontSize:96,lineHeight:0.6,color:'var(--lime-deep)',marginBottom:28,fontStyle:'italic'}}>"</div>
              <p style={{
                fontFamily:'var(--f-display)',
                fontSize:'clamp(24px, 2.4vw, 32px)',
                lineHeight:1.35,
                letterSpacing:'-0.01em',
                fontWeight:400,
                fontStyle:'italic',
                margin:0,
                color:'#55534d',
              }}>
                Die Integration in unsere Vermittlungssoftware läuft sauber. So flüssig, dass man schon genau hinhören muss, um Mensch und Maschine zu unterscheiden.
              </p>
            </div>

            {/* SIGNATURE */}
            <div style={{display:'flex',alignItems:'center',gap:16,paddingTop:24,borderTop:'1px solid var(--paper-line)'}}>
              <div>
                <div style={{fontFamily:'var(--f-display)',fontSize:20,fontWeight:500,letterSpacing:'-0.015em',lineHeight:1.1,color:'var(--ink)'}}>
                  Eugenia Willer
                </div>
                <div style={{fontSize:13.5,color:'var(--muted-light)',marginTop:4}}>
                  GefoS – Gesellschaft für offene Systeme mbH
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT — CONTEXT */}
          <div style={{
            background:'var(--ink)',
            color:'var(--paper)',
            padding:'64px 56px 56px',
            display:'flex',flexDirection:'column',
            position:'relative',
            overflow:'hidden',
          }} className="sp-partner-side">
            {/* subtle grid */}
            <div aria-hidden="true" style={{
              position:'absolute',inset:0,
              backgroundImage:'linear-gradient(rgba(246,245,239,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(246,245,239,0.05) 1px, transparent 1px)',
              backgroundSize:'44px 44px',
              maskImage:'radial-gradient(ellipse at top right, black 20%, transparent 75%)',
              WebkitMaskImage:'radial-gradient(ellipse at top right, black 20%, transparent 75%)',
              pointerEvents:'none',
            }}></div>
            {/* big quote mark as watermark */}
            <div aria-hidden="true" style={{
              position:'absolute',bottom:-60,right:-20,
              fontFamily:'var(--f-display)',
              fontSize:380,lineHeight:0.8,fontStyle:'italic',
              color:'rgba(205,234,59,0.08)',
              pointerEvents:'none',
              userSelect:'none',
            }}>"</div>

            <div style={{position:'relative',zIndex:1,display:'flex',flexDirection:'column',gap:28,height:'100%'}}>

              {/* Header */}
              <div>
                <div className="mono" style={{fontSize:10,letterSpacing:'0.2em',color:'var(--lime)',fontWeight:700,marginBottom:16,display:'inline-flex',alignItems:'center',gap:10}}>
                  <span style={{width:6,height:6,borderRadius:'50%',background:'var(--lime)'}}></span>
                  WAS PARTNER ÜBER UNS SAGEN
                </div>
                <h3 style={{
                  fontFamily:'var(--f-display)',
                  fontSize:'clamp(28px, 2.8vw, 36px)',
                  fontWeight:500,
                  letterSpacing:'-0.02em',
                  lineHeight:1.15,
                  margin:0,
                  color:'var(--paper)',
                }}>
                  Wir bauen mit den<br/>
                  <span style={{color:'var(--lime)',fontStyle:'italic'}}>richtigen Leuten</span> zusammen.
                </h3>
              </div>

              {/* Lede */}
              <p style={{
                fontSize:15.5,
                lineHeight:1.65,
                color:'rgba(246,245,239,0.72)',
                margin:0,
                maxWidth:400,
              }}>
                Keine Präsentationen, keine Buzzwords — sondern gemeinsame Pilotläufe
                mit etablierten Playern der Branche. Wer unsere Lösung sieht und fühlt,
                wird zum Mitdenker.
              </p>

              <div style={{flex:1,minHeight:12}}></div>

              {/* Footer line */}
              <div style={{
                paddingTop:24,
                borderTop:'1px solid rgba(246,245,239,0.12)',
                display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,flexWrap:'wrap',
              }}>
                <div style={{display:'flex',alignItems:'center',gap:10}}>
                  <span style={{width:8,height:8,borderRadius:'50%',background:'var(--lime)',boxShadow:'0 0 8px var(--lime)'}}></span>
                  <span style={{fontSize:13.5,color:'rgba(246,245,239,0.85)'}}>Weitere Stimmen folgen</span>
                </div>
                <a href="demo.html" style={{
                  display:'inline-flex',alignItems:'center',gap:8,
                  color:'var(--lime)',
                  textDecoration:'none',
                  fontSize:14,fontWeight:500,
                  letterSpacing:'0.01em',
                }}>
                  Selbst einen Piloten starten
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
                </a>
              </div>
            </div>
          </div>
        </div>

      </div>
      <style>{`
        @media(max-width:900px){
          .sp-quote-row{ grid-template-columns:1fr !important; }
          .sp-quote-side{ padding:40px 32px !important; }
          .sp-partner-side{ padding:40px 32px !important; }
        }
      `}</style>
    </section>
  );
};

window.TrustStrip = TrustStrip;
window.Integrations = Integrations;
window.SocialProof = SocialProof;