// QuotePanel.jsx — slide-in drawer that embeds the existing FTOTM inquiry worker.
// Single source of truth: the worker handles validation, Airtable writes, the Make
// scenarios, and its own confirmation UI. We just embed it (same as the WordPress
// /hire-food-truck page does). No client-side POST, no field mapping to drift.
const QP_INQUIRY_URL = 'https://delicate-unit-46e9.odd-morning-25e5.workers.dev/ftotm-inquiry-form';

const QuotePanel = ({ open, onClose }) => (
  <>
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(17,24,39,.4)', zIndex:90,
      opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
      transition: 'opacity .18s ease-out',
    }}/>
    <aside style={{
      position:'fixed', top:0, right:0, height:'100%', width:'min(560px, 100%)',
      background: T.white, zIndex:100,
      transform: open ? 'translateX(0)' : 'translateX(100%)',
      transition:'transform .24s cubic-bezier(0.22, 1, 0.36, 1)',
      boxShadow: T.shadowModal,
      display:'flex', flexDirection:'column',
    }}>
      <header style={{ padding:'18px 22px', borderBottom:`1px solid ${T.border}`,
                       display:'flex', alignItems:'center', justifyContent:'space-between',
                       flex:'0 0 auto' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom:4 }}>Quote request</div>
          <div style={{ fontSize:20, fontWeight:600, color: T.ink }}>Tell us about your event</div>
        </div>
        <button onClick={onClose} aria-label="Close" style={{
          border:`1px solid ${T.border}`, background: T.white, borderRadius:999,
          width:36, height:36, display:'inline-flex', alignItems:'center', justifyContent:'center',
          cursor:'pointer', color: T.ink,
        }}><IconClose size={18} /></button>
      </header>

      {/* The worker form (validation + Airtable + confirmation all live inside it) */}
      {open && (
        <iframe
          src={QP_INQUIRY_URL}
          title="Food Trucks On The Move — Inquiry Form"
          style={{ border:'none', width:'100%', flex:'1 1 auto', minHeight:0 }}
          loading="lazy"
        />
      )}
    </aside>
  </>
);

Object.assign(window, { QuotePanel });