// Quote panels — residential + commercial slide-ins

function PanelShell({ open, onClose, title, children }){
  if (!open) return null;
  return (
    <>
      <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:200,backdropFilter:'blur(4px)'}}/>
      <div style={{
        position:'fixed',top:0,right:0,bottom:0,width:'min(580px,100vw)',
        background:'var(--thraxel-canvas)',borderLeft:'1px solid #2a2a2e',
        zIndex:201,overflowY:'auto',
        animation:'slideIn .3s ease',
      }}>
        <style>{`@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}`}</style>
        <div style={{position:'sticky',top:0,padding:'20px 28px',background:'var(--thraxel-canvas)',borderBottom:'1px solid #2a2a2e',display:'flex',justifyContent:'space-between',alignItems:'center',zIndex:1}}>
          <div className="label" style={{color:'var(--thraxel-red)'}}>{title}</div>
          <button onClick={onClose} style={{padding:8,color:'var(--thraxel-light-grey)'}}><Icons.close/></button>
        </div>
        <div style={{padding:'32px 28px'}}>{children}</div>
      </div>
    </>
  );
}

function ResidentialQuote({ open, onClose, prefill }){
  const [submitted,setSubmitted] = useState(false);
  return (
    <PanelShell open={open} onClose={onClose} title="RESIDENTIAL QUOTE">
      {submitted ? (
        <div style={{padding:'40px 0',textAlign:'center'}}>
          <div style={{width:64,height:64,margin:'0 auto 24px',border:'2px solid var(--thraxel-red)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--thraxel-red)',fontFamily:'Orbitron,sans-serif',fontWeight:900,fontSize:24}}>✓</div>
          <ChromeTitle size={32}>Quote in motion.</ChromeTitle>
          <p style={{color:'var(--thraxel-light-grey)',marginTop:18,fontSize:16}}>We'll render your actual house in 3D and get your quote back within 48 hours.</p>
        </div>
      ) : (
        <form onSubmit={e=>{e.preventDefault();setSubmitted(true)}} style={{display:'flex',flexDirection:'column',gap:18}}>
          <ChromeTitle size={36} as="div">Tell us about your home.</ChromeTitle>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            <div className="fld"><label>Name</label><input required/></div>
            <div className="fld"><label>Phone</label><input required type="tel"/></div>
          </div>
          <div className="fld"><label>Email</label><input required type="email"/></div>
          <div className="fld"><label>Property Address</label><input required/></div>
          <div className="fld">
            <label>Zones of Interest</label>
            <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
              {['Eaves','Soffits','Columns','Landscape'].map(z=>{
                const k = z.toLowerCase();
                const checked = prefill?.zones?.[k] ?? true;
                return (
                  <label key={z} style={{padding:'10px 14px',border:'1px solid #2a2a2e',background:'#0a0a0a',display:'flex',alignItems:'center',gap:8,fontSize:13}}>
                    <input type="checkbox" defaultChecked={checked} style={{accentColor:'var(--thraxel-red)'}}/>
                    <span className="label" style={{fontSize:11}}>{z}</span>
                  </label>
                );
              })}
            </div>
          </div>
          <div className="fld">
            <label>Scenes you loved</label>
            <input defaultValue={prefill?.preset || 'Everyday Warm, Game Day'}/>
          </div>
          <div className="fld">
            <label>Photo Upload</label>
            <div style={{padding:'28px',border:'1px dashed #3a3a40',background:'#0a0a0a',textAlign:'center',color:'var(--thraxel-light-grey)',fontSize:13}}>
              <Icons.upload/> Drop property photos here or click to upload
            </div>
          </div>
          <button type="submit" className="btn-red" style={{marginTop:8}}>Submit Residential Quote <Icons.arrow/></button>
        </form>
      )}
    </PanelShell>
  );
}

function CommercialQuote({ open, onClose }){
  const [submitted,setSubmitted] = useState(false);
  return (
    <PanelShell open={open} onClose={onClose} title="COMMERCIAL CONSULTATION">
      {submitted ? (
        <div style={{padding:'40px 0',textAlign:'center'}}>
          <div style={{width:64,height:64,margin:'0 auto 24px',border:'2px solid var(--thraxel-red)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--thraxel-red)',fontFamily:'Orbitron,sans-serif',fontWeight:900,fontSize:24}}>✓</div>
          <ChromeTitle size={32}>Request received.</ChromeTitle>
          <p style={{color:'var(--thraxel-light-grey)',marginTop:18,fontSize:16}}>Our commercial team will reach out within 24 hours to schedule a property walkthrough and 3D rendering.</p>
        </div>
      ) : (
        <form onSubmit={e=>{e.preventDefault();setSubmitted(true)}} style={{display:'flex',flexDirection:'column',gap:18}}>
          <ChromeTitle size={36} as="div">Property in play.</ChromeTitle>
          <div className="fld"><label>Company Name</label><input required/></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            <div className="fld"><label>Contact Name</label><input required/></div>
            <div className="fld"><label>Role</label>
              <select><option>Owner</option><option>Manager</option><option>Decision-Maker</option><option>Other</option></select>
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            <div className="fld"><label>Business Email</label><input required type="email"/></div>
            <div className="fld"><label>Phone</label><input required type="tel"/></div>
          </div>
          <div className="fld">
            <label>Property Type</label>
            <select>
              <option>Shopping Plaza</option><option>Restaurant</option><option>Hotel / Resort</option>
              <option>Dealership / Showroom</option><option>Office Park</option><option>Warehouse / Distribution</option><option>Other</option>
            </select>
          </div>
          <div className="fld"><label>Property Address(es)</label><textarea rows={2}/></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            <div className="fld"><label>Linear ft of facade</label><input type="number" placeholder="e.g. 1200"/></div>
            <div className="fld"><label># of buildings</label><input type="number" defaultValue={1}/></div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            <div className="fld"><label>Timeline</label>
              <select><option>Immediate</option><option>30 days</option><option>90 days</option><option>Exploring</option></select>
            </div>
            <div className="fld"><label>Budget</label>
              <select><option>Under $10k</option><option>$10–25k</option><option>$25–50k</option><option>$50k+</option><option>Not yet determined</option></select>
            </div>
          </div>
          <div className="fld">
            <label>Property Photos</label>
            <div style={{padding:'28px',border:'1px dashed #3a3a40',background:'#0a0a0a',textAlign:'center',color:'var(--thraxel-light-grey)',fontSize:13}}>
              <Icons.upload/> Drop property photos here or click to upload
            </div>
          </div>
          <button type="submit" className="btn-red">Request Commercial Consultation <Icons.arrow/></button>
        </form>
      )}
    </PanelShell>
  );
}

Object.assign(window, { ResidentialQuote, CommercialQuote });