export default function IframeDirect() {
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ background: 'white', borderRadius: '20px 20px 0 0', padding: '24px 32px', border: '1px solid #f1f5f9', borderBottom: 'none', display: 'flex', alignItems: 'center', gap: 20 }}>
        <div style={{ width: 48, height: 48, background: '#f0fdfa', color: '#14b8a6', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, flexShrink: 0 }}>⚡</div>
        <div>
          <h1 style={{ fontSize: '1.25rem', color: '#0f172a', marginBottom: 2, fontWeight: 700 }}>Direct Iframe Embed</h1>
          <p style={{ fontSize: '0.875rem', color: '#64748b' }}>Chatbot dimuat langsung di dalam halaman tanpa modal.</p>
        </div>
      </div>
      <div style={{ flex: 1, background: 'white', border: '1px solid #f1f5f9', borderRadius: '0 0 20px 20px', overflow: 'hidden', boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.05)' }}>
        <iframe
          src="https://ai-studio.bliv.bangunindo.io/chatbot/4eFb0BunqZYEZlg7"
          style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
          allow="microphone"
          title="Chatbot Direct"
        />
      </div>
    </div>
  )
}