// "Bring us your house" — photo-upload-to-quote panel
const ZONES = [
  { id:'eaves', label:'Eaves' },
  { id:'soffits', label:'Soffits' },
  { id:'columns', label:'Columns' },
  { id:'landscape', label:'Landscape' },
  { id:'fascia', label:'Fascia' },
  { id:'pool', label:'Pool / Patio' },
  { id:'dock', label:'Dock' },
  { id:'fence', label:'Fence Line' },
];
const CONFIG_PRESETS = [
  { id:'everyday', name:'Everyday Warm', color:'#FFB347' },
  { id:'gameday', name:'Game Day', color:'#C8102E' },
  { id:'christmas', name:'Christmas', color:'#0E8C3A', alt:'#C8102E' },
  { id:'july4', name:'July 4th', color:'#1A4DCF', alt:'#C8102E' },
  { id:'halloween', name:'Halloween', color:'#FF7A00', alt:'#7A2DCF' },
];

function ConfiguratorSection({ onQuote }){
  const [zones,setZones] = useState({eaves:true, soffits:false, columns:true, landscape:true, fascia:false, pool:false, dock:false, fence:false});
  const [preset,setPreset] = useState('everyday');
  const [photo, setPhoto] = useState(null);
  const fileRef = useRef(null);

  const handleFile = (file) => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => setPhoto(e.target.result);
    reader.readAsDataURL(file);
  };

  return (
    <section id="configurator" style={{padding:'120px 64px',background:'var(--thraxel-canvas)'}}>
      <div style={{maxWidth:1440,margin:'0 auto'}}>
        <div className="eyebrow-red" style={{marginBottom:14}}>BRING US YOUR HOUSE</div>
        <ChromeTitle size={'clamp(40px,6vw,84px)'}>Send a photo. We'll mock it up.</ChromeTitle>
        <p style={{maxWidth:640,marginTop:18,color:'var(--thraxel-light-grey)',fontSize:18}}>Drop a daytime photo of your home, mark the zones you're interested in, pick a scene. Our team renders your actual property in 3D and emails you back within 48 hours.</p>

        <div style={{display:'grid',gridTemplateColumns:'minmax(0,1.4fr) minmax(0,1fr)',gap:24,marginTop:48,alignItems:'stretch'}} className="cfg-grid">
          {/* PHOTO DROPZONE */}
          <div
            onDragOver={e=>{e.preventDefault();e.currentTarget.style.borderColor='var(--thraxel-red)'}}
            onDragLeave={e=>{e.currentTarget.style.borderColor='#3a3a40'}}
            onDrop={e=>{e.preventDefault();e.currentTarget.style.borderColor='#3a3a40';handleFile(e.dataTransfer.files[0]);}}
            onClick={()=>!photo && fileRef.current?.click()}
            style={{
              position:'relative', minHeight: 520, width:'100%',
              background: photo ? '#0a0a0a' : 'linear-gradient(135deg,#161616 0%,#0a0a0a 100%)',
              border:'2px dashed #3a3a40',
              cursor: photo ? 'default' : 'pointer',
              overflow:'hidden',
              display:'flex',alignItems:'center',justifyContent:'center',
              transition:'border-color .2s ease',
            }}>
            <input ref={fileRef} type="file" accept="image/*" style={{display:'none'}} onChange={e=>handleFile(e.target.files[0])}/>
            {photo ? (
              <>
                <img src={photo} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
                {/* zone overlays */}
                <div style={{position:'absolute',inset:0,pointerEvents:'none'}}>
                  {zones.eaves && (
                    <div style={{position:'absolute',top:'18%',left:'10%',right:'10%',height:3,background:'linear-gradient(90deg,transparent,'+CONFIG_PRESETS.find(p=>p.id===preset).color+',transparent)',boxShadow:'0 0 12px '+CONFIG_PRESETS.find(p=>p.id===preset).color, animation:'pulse 2s ease-in-out infinite'}}/>
                  )}
                  {zones.soffits && (
                    <div style={{position:'absolute',top:'34%',left:'14%',right:'14%',height:2,background:CONFIG_PRESETS.find(p=>p.id===preset).color,boxShadow:'0 0 8px '+CONFIG_PRESETS.find(p=>p.id===preset).color,opacity:0.7}}/>
                  )}
                  {zones.columns && (
                    <>
                      <div style={{position:'absolute',top:'40%',bottom:'15%',left:'30%',width:2,background:CONFIG_PRESETS.find(p=>p.id===preset).color,boxShadow:'0 0 8px '+CONFIG_PRESETS.find(p=>p.id===preset).color}}/>
                      <div style={{position:'absolute',top:'40%',bottom:'15%',right:'30%',width:2,background:CONFIG_PRESETS.find(p=>p.id===preset).color,boxShadow:'0 0 8px '+CONFIG_PRESETS.find(p=>p.id===preset).color}}/>
                    </>
                  )}
                  {zones.landscape && Array.from({length:8}).map((_,i)=>(
                    <div key={i} style={{
                      position:'absolute',bottom:'8%',left:`${15+i*9}%`,width:8,height:8,borderRadius:'50%',
                      background:CONFIG_PRESETS.find(p=>p.id===preset).color,
                      boxShadow:'0 0 16px '+CONFIG_PRESETS.find(p=>p.id===preset).color+', 0 0 32px '+CONFIG_PRESETS.find(p=>p.id===preset).color,
                      animation:`pulse ${2+i*0.1}s ease-in-out infinite`,
                    }}/>
                  ))}
                </div>
                {/* corner badge */}
                <div style={{position:'absolute',top:14,right:14,padding:'8px 12px',background:'rgba(0,0,0,0.75)',backdropFilter:'blur(8px)',border:'1px solid var(--thraxel-red)'}}>
                  <span style={{fontFamily:'Orbitron,sans-serif',fontWeight:800,fontSize:10,letterSpacing:'0.18em',color:'var(--thraxel-red)'}}>● PREVIEW</span>
                </div>
                <button onClick={(e)=>{e.stopPropagation();setPhoto(null)}} style={{
                  position:'absolute',top:14,left:14,padding:'8px 12px',background:'rgba(0,0,0,0.75)',backdropFilter:'blur(8px)',border:'1px solid #2a2a2e',
                  fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:10,letterSpacing:'0.16em',color:'var(--thraxel-light-grey)',
                }}>← Replace photo</button>
              </>
            ) : (
              <div style={{textAlign:'center',padding:32}}>
                <div style={{
                  width:80,height:80,margin:'0 auto 24px',
                  border:'2px solid var(--thraxel-red)',
                  display:'flex',alignItems:'center',justifyContent:'center',
                  color:'var(--thraxel-red)',
                }}>
                  <Icons.upload/>
                </div>
                <ChromeTitle size={28} as="div">Drop a photo of your home</ChromeTitle>
                <p style={{color:'var(--thraxel-light-grey)',marginTop:14,fontSize:14,maxWidth:'42ch',marginInline:'auto'}}>
                  Daytime, front-facing works best. We accept JPG, PNG, HEIC. We'll mark up the zones, render your scene preset, and send it back to you.
                </p>
                <div style={{marginTop:20,display:'inline-block',padding:'12px 22px',border:'1px solid var(--thraxel-red)',color:'var(--thraxel-red)',fontFamily:'Orbitron,sans-serif',fontWeight:800,fontSize:11,letterSpacing:'0.2em'}}>SELECT FILE OR DRAG HERE</div>
              </div>
            )}
          </div>

          {/* CONTROLS */}
          <div style={{background:'#161616',border:'1px solid #2a2a2e',padding:28,display:'flex',flexDirection:'column',gap:24}}>
            <div>
              <div className="label" style={{color:'var(--thraxel-light-grey)',marginBottom:14}}>Zones of interest</div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
                {ZONES.map(z=>(
                  <button key={z.id} onClick={()=>setZones(s=>({...s,[z.id]:!s[z.id]}))} style={{
                    padding:'10px 12px',textAlign:'left',
                    background: zones[z.id]?'rgba(200,16,46,0.1)':'#0a0a0a',
                    border: zones[z.id]?'1px solid var(--thraxel-red)':'1px solid #2a2a2e',
                    fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:10,letterSpacing:'0.14em',textTransform:'uppercase',
                    color: zones[z.id]?'#fff':'var(--thraxel-mid-grey)',
                  }}>{zones[z.id]?'●':'○'} {z.label}</button>
                ))}
              </div>
            </div>
            <div>
              <div className="label" style={{color:'var(--thraxel-light-grey)',marginBottom:10}}>Preview scene</div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
                {CONFIG_PRESETS.map(p=>(
                  <button key={p.id} onClick={()=>setPreset(p.id)} style={{
                    padding:'10px',textAlign:'left',
                    background: preset===p.id?'rgba(200,16,46,0.1)':'#0a0a0a',
                    border: preset===p.id?'1px solid var(--thraxel-red)':'1px solid #2a2a2e',
                    display:'flex',alignItems:'center',gap:8,
                  }}>
                    <span style={{width:10,height:10,background:p.color,boxShadow:`0 0 6px ${p.color}`}}/>
                    {p.alt && <span style={{width:10,height:10,background:p.alt,boxShadow:`0 0 6px ${p.alt}`}}/>}
                    <span style={{fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:10,letterSpacing:'0.12em',textTransform:'uppercase'}}>{p.name}</span>
                  </button>
                ))}
              </div>
            </div>
            <button className="btn-red" onClick={()=>onQuote('residential',{zones,preset,photo})} style={{marginTop:'auto'}}>
              {photo ? 'Send for 3D Quote' : 'Get a Quote Without Photo'} <Icons.arrow/>
            </button>
          </div>
        </div>
        <style>{`@media (max-width:900px){.cfg-grid{grid-template-columns:1fr!important}}`}</style>
      </div>
    </section>
  );
}

Object.assign(window, { ConfiguratorSection });