// HeroVoiceAgent.jsx - Hero interface for the page-level AI.
// Nutzt denselben Voice-Blob wie der globale Agent (window.AISN_AGENT.mountOrb),
// mit den 4 Funnel-Optionen als Satelliten. Klick oeffnet den Audio-Dialog.
(function () {
  const { useRef, useEffect } = React;
  const C = { ink: '#0A0A0B', surface2: '#1A1B22', text: '#E7E9EE', muted: '#8A8F99',
    mint: '#5EEAD4', indigo: '#818CF8', rose: '#F472B6', sand: '#FBBF77',
    sans: "'Inter Tight', system-ui, sans-serif", mono: "'IBM Plex Mono', monospace" };

  function HeroVoiceAgent({ lang }) {
    const orbRef = useRef(null);
    const done = useRef(false);
    useEffect(() => {
      let n = 0;
      const iv = setInterval(() => {
        if (done.current) { clearInterval(iv); return; }
        if (window.AISN_AGENT && window.AISN_AGENT.mountOrb && orbRef.current) {
          orbRef.current.innerHTML = '';
          window.AISN_AGENT.mountOrb(orbRef.current, 230);
          done.current = true; clearInterval(iv);
        } else if (++n > 60) clearInterval(iv);
      }, 150);
      return () => clearInterval(iv);
    }, []);

    const open = (k) => { if (window.AISN_AGENT) window.AISN_AGENT.open(k); };
    const L = lang === 'en'
      ? [{ k: 'need', l: 'Name need', c: C.mint }, { k: 'workers', l: 'See employees', c: C.indigo }, { k: 'check', l: 'Check start', c: C.rose }, { k: 'contact', l: 'Prepare enquiry', c: C.sand }]
      : [{ k: 'need', l: 'Bedarf nennen', c: C.mint }, { k: 'workers', l: 'Mitarbeiter sehen', c: C.indigo }, { k: 'check', l: 'Start pruefen', c: C.rose }, { k: 'contact', l: 'Anfrage vorbereiten', c: C.sand }];
    const live = lang === 'en' ? 'Live - voice assistant' : 'Live - Sprach-Assistent';
    const hint = lang === 'en' ? 'Speak or type - the AI guides you.' : 'Sprechen oder tippen - die KI fuehrt Sie.';
    const pos = [
      { top: '0%', left: '50%', tx: '-50%', ty: '0' },
      { top: '50%', left: '100%', tx: '-100%', ty: '-50%' },
      { top: '100%', left: '50%', tx: '-50%', ty: '-100%' },
      { top: '50%', left: '0%', tx: '0', ty: '-50%' },
    ];

    return (
      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
        <div style={{ position: 'relative', width: '100%', maxWidth: 430, aspectRatio: '1 / 1', margin: '0 auto' }}>
          {/* rotating rings */}
          <div style={{ position: 'absolute', inset: '12%', borderRadius: '999px', border: `1px solid ${C.mint}22`, animation: 'hvaSpin 30s linear infinite' }} />
          <div style={{ position: 'absolute', inset: '4%', borderRadius: '999px', border: `1px dashed ${C.indigo}22`, animation: 'hvaSpin 46s linear infinite reverse' }} />
          {/* connector lines */}
          <svg viewBox="0 0 100 100" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}>
            {[[50, 4], [96, 50], [50, 96], [4, 50]].map((p, i) => (
              <line key={i} x1="50" y1="50" x2={p[0]} y2={p[1]} stroke={L[i].c} strokeWidth="0.5" strokeOpacity="0.4" style={{ filter: `drop-shadow(0 0 2px ${L[i].c})` }} />
            ))}
          </svg>
          {/* center voice blob */}
          <button onClick={() => open()} aria-label="KI" style={{
            position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
            width: 230, height: 230, border: 'none', background: 'transparent', cursor: 'pointer', padding: 0,
            filter: `drop-shadow(0 10px 36px ${C.indigo}66)`,
          }}>
            <div ref={orbRef} style={{ width: 230, height: 230 }} />
          </button>
          {/* satellites */}
          {L.map((o, i) => (
            <button key={o.k} onClick={() => open(o.k)} style={{
              position: 'absolute', top: pos[i].top, left: pos[i].left,
              transform: `translate(${pos[i].tx}, ${pos[i].ty})`,
              width: 'clamp(76px, 21vw, 98px)', height: 'clamp(76px, 21vw, 98px)', borderRadius: 999,
              border: `1px solid ${o.c}`, background: `radial-gradient(circle at 38% 32%, ${o.c}24, ${C.surface2}f2)`,
              backdropFilter: 'blur(8px)', color: C.text, fontSize: 'clamp(11px, 2.6vw, 12.5px)', fontWeight: 600,
              fontFamily: C.sans, cursor: 'pointer', lineHeight: 1.2, padding: 6, boxShadow: `0 0 22px ${o.c}3a`,
              transition: 'box-shadow .15s, transform .12s',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.boxShadow = `0 0 34px ${o.c}77`; e.currentTarget.style.transform = `translate(${pos[i].tx}, ${pos[i].ty}) scale(1.06)`; }}
              onMouseLeave={(e) => { e.currentTarget.style.boxShadow = `0 0 22px ${o.c}3a`; e.currentTarget.style.transform = `translate(${pos[i].tx}, ${pos[i].ty})`; }}
            >{o.l}</button>
          ))}
        </div>
        {/* caption + mode hint (audio first, text optional) */}
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: C.mono, fontSize: 11.5, color: C.mint, letterSpacing: 0.4 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: C.mint, boxShadow: `0 0 8px ${C.mint}`, animation: 'hvaPulse 1.6s ease-in-out infinite' }} />
          {live}
        </div>
        <div style={{ display: 'inline-flex', gap: 8, alignItems: 'center', padding: 4, borderRadius: 999, border: `1px solid rgba(255,255,255,0.1)`, background: 'rgba(255,255,255,0.03)' }}>
          <button onClick={() => open()} style={{ padding: '8px 16px', borderRadius: 999, border: 'none', background: C.mint, color: C.ink, fontFamily: C.sans, fontSize: 13, fontWeight: 700, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 7 }}>{lang === 'en' ? 'Speak' : 'Sprechen'}</button>
          <button onClick={() => open('text')} style={{ padding: '8px 14px', borderRadius: 999, border: 'none', background: 'transparent', color: C.muted, fontFamily: C.sans, fontSize: 13, fontWeight: 500, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 }}>Text</button>
        </div>
        <div style={{ fontSize: 13, color: C.muted, textAlign: 'center', maxWidth: 320, lineHeight: 1.5 }}>{hint}</div>
        <style>{`@keyframes hvaSpin{to{transform:rotate(360deg)}}@keyframes hvaPulse{0%,100%{opacity:1}50%{opacity:.4}}`}</style>
      </div>
    );
  }

  window.HeroVoiceAgent = HeroVoiceAgent;
})();