const { Button } = window.CLIQDesignSystem_d61053;

/**
 * Talk to CLIQ — the AI Conversational Triage voice assistant.
 * Calm, large, listening state with animated mic.
 */
window.VoiceAssistant = function VoiceAssistant({ onClose }) {
  const [listening, setListening] = React.useState(true);
  return (
    <div style={{ position: 'absolute', inset: 0, background: 'var(--navy-900)', display: 'flex', flexDirection: 'column', color: '#fff' }}>
      <div style={{ padding: '14px 20px', display: 'flex', justifyContent: 'flex-end' }}>
        <button onClick={onClose} aria-label="Close" style={{ background: 'rgba(255,255,255,.12)', border: 'none', width: 40, height: 40, borderRadius: '50%', color: '#fff', cursor: 'pointer' }}>
          <i className="ti ti-x" style={{ fontSize: 22 }} aria-hidden="true" />
        </button>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 24, textAlign: 'center' }}>
        <div style={{ position: 'relative', width: 140, height: 140, marginBottom: 28 }}>
          <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--cliq-teal)', opacity: 0.25, animation: listening ? 'cliqpulse 2s var(--ease-gentle) infinite' : 'none' }} />
          <span style={{ position: 'absolute', inset: 18, borderRadius: '50%', background: 'var(--cliq-teal)', opacity: 0.35, animation: listening ? 'cliqpulse 2s var(--ease-gentle) infinite .3s' : 'none' }} />
          <span style={{ position: 'absolute', inset: 36, borderRadius: '50%', background: 'var(--cliq-teal)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <i className="ti ti-microphone" style={{ fontSize: 40, color: 'var(--navy-800)' }} aria-hidden="true" />
          </span>
        </div>
        <p style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, margin: '0 0 10px' }}>
          {listening ? "I'm listening…" : 'How can I help?'}
        </p>
        <p style={{ fontSize: 17, color: 'var(--navy-200)', lineHeight: 1.5, maxWidth: 270, margin: 0 }}>
          Ask me anything — "Why was that page blocked?" or "Help me call my pharmacy."
        </p>
      </div>

      <div style={{ padding: '0 22px 28px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <button onClick={() => setListening(l => !l)} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          background: listening ? 'rgba(255,255,255,.12)' : 'var(--cliq-teal)',
          color: listening ? '#fff' : 'var(--navy-800)',
          border: 'none', borderRadius: 'var(--radius-xl)', padding: 18, fontSize: 18, fontWeight: 700,
          fontFamily: 'var(--font-sans)', cursor: 'pointer',
        }}>
          <i className={`ti ti-${listening ? 'player-stop' : 'microphone'}`} style={{ fontSize: 24 }} aria-hidden="true" />
          {listening ? 'Stop' : 'Start talking'}
        </button>
        <Button variant="secondary" size="lg" fullWidth icon="headset" onClick={onClose} style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,.4)' }}>
          Reach a real person instead
        </Button>
      </div>
    </div>
  );
}