// Quote flow + footer + WhatsApp widget
const PRODUCT_LIST = ['Peaches','Nectarines','Apricots','Cherries','Plums','Oranges','Lemons','Mandarins','Strawberries','Blueberries','Grapes','Melons','Kiwis','Tomatoes','Peppers','Courgettes','Cucumbers','Lettuce','Broccoli','Asparagus','Onions','Mixed pallet'];

function QuoteFlow(){
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ products:[], quantity:'', destination:'', frequency:'One-off', name:'', company:'', email:'', phone:'', notes:'' });
  const [submitted, setSubmitted] = useState(false);

  const update = (k,v) => setData(d => ({...d, [k]:v}));
  const toggleProduct = (p) => update('products', data.products.includes(p) ? data.products.filter(x=>x!==p) : [...data.products, p]);

  const steps = ['Products','Logistics','Contact'];
  const canNext = [
    data.products.length > 0,
    data.quantity.trim() && data.destination.trim(),
    data.name.trim() && data.email.trim() && data.company.trim(),
  ];

  return (
    <section id="quote" className="section-pad" style={{background:'var(--ink)', color:'var(--cream)'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.5fr', gap:80}} className="q-grid">
          <div>
            <div className="eyebrow" style={{color:'var(--amber)', marginBottom:20}}>Get started</div>
            <h2 className="h-1" style={{margin:'0 0 24px', color:'var(--cream)'}}>Tell us what you need.</h2>
            <p style={{color:'rgba(244,239,226,0.7)', fontSize:16, lineHeight:1.6, marginBottom:32, maxWidth:'40ch'}}>
              Three quick steps. A sales rep will reach out within one business day with pricing, MOQs, and lead times.
            </p>

            <div style={{display:'flex', flexDirection:'column', gap:18, paddingTop:24, borderTop:'1px solid rgba(255,255,255,0.12)'}}>
              <a href="http://wa.me/+447808034216" style={{display:'flex', alignItems:'center', gap:14, padding:'16px 18px', background:'#25D366', color:'#053B1F', borderRadius:'var(--radius)', fontWeight:600}}>
                <Icon.Whatsapp size={20}/>
                <div style={{display:'flex', flexDirection:'column', lineHeight:1.2}}>
                  <span style={{fontSize:11, opacity:0.7, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase'}}>Faster</span>
                  <span>+44 7808 034216</span>
                </div>
              </a>
              <div style={{display:'flex', flexDirection:'column', gap:12}}>
                <a href="mailto:sales@plengland.co.uk" style={{display:'flex', gap:12, alignItems:'center', color:'rgba(244,239,226,0.85)', fontSize:14}}>
                  <Icon.Mail size={16}/> sales@plengland.co.uk
                </a>
                <div style={{display:'flex', gap:12, alignItems:'flex-start', color:'rgba(244,239,226,0.7)', fontSize:14, lineHeight:1.5}}>
                  <Icon.Pin size={16}/>
                  <span>3rd Floor, 86–90 Paul Street<br/>London, EC2A 4NE</span>
                </div>
              </div>
            </div>
          </div>

          <div style={{
            background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.1)',
            borderRadius:'var(--radius-lg)', padding:'36px 40px'
          }}>
            {/* Stepper */}
            <div style={{display:'flex', gap:8, marginBottom:32}}>
              {steps.map((s,i)=>(
                <div key={s} style={{flex:1, display:'flex', flexDirection:'column', gap:8}}>
                  <div style={{height:3, borderRadius:2, background: i<=step ? 'var(--amber)' : 'rgba(255,255,255,0.12)'}}/>
                  <div style={{display:'flex', justifyContent:'space-between', fontSize:11, fontWeight:600, letterSpacing:'0.1em', textTransform:'uppercase', color: i===step?'var(--amber)':'rgba(244,239,226,0.5)'}}>
                    <span>{`0${i+1}`}</span>
                    <span>{s}</span>
                  </div>
                </div>
              ))}
            </div>

            {submitted ? (
              <div style={{padding:'40px 0', textAlign:'center'}}>
                <div style={{
                  width:64, height:64, borderRadius:'50%', background:'var(--leaf)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom:24, color:'#fff'
                }}>
                  <Icon.Check size={28}/>
                </div>
                <h3 className="h-2" style={{margin:'0 0 12px', color:'var(--cream)'}}>Request received.</h3>
                <p style={{color:'rgba(244,239,226,0.7)', maxWidth:'42ch', margin:'0 auto'}}>
                  Thanks {data.name?.split(' ')[0] || 'there'} — we've logged your enquiry. A sales rep will be in touch within one business day at {data.email}.
                </p>
                <button onClick={()=>{ setSubmitted(false); setStep(0); setData({ products:[], quantity:'', destination:'', frequency:'One-off', name:'', company:'', email:'', phone:'', notes:'' }); }} className="btn btn-ghost" style={{marginTop:24, color:'var(--cream)', borderColor:'rgba(255,255,255,0.2)'}}>Submit another</button>
              </div>
            ) : (
              <>
                {step===0 && (
                  <div>
                    <label style={{color:'rgba(244,239,226,0.6)'}}>Which products are you interested in?</label>
                    <div style={{display:'flex', flexWrap:'wrap', gap:8, marginBottom:24}}>
                      {PRODUCT_LIST.map(p=>(
                        <button key={p} type="button" onClick={()=>toggleProduct(p)} style={{
                          padding:'8px 14px', borderRadius:999, fontSize:13, fontWeight:500,
                          border:`1px solid ${data.products.includes(p)?'var(--amber)':'rgba(255,255,255,0.18)'}`,
                          background: data.products.includes(p)?'var(--amber)':'transparent',
                          color: data.products.includes(p)?'var(--ink)':'var(--cream)',
                          cursor:'pointer', transition:'all 0.15s'
                        }}>{p}</button>
                      ))}
                    </div>
                    <div style={{fontSize:13, color:'rgba(244,239,226,0.5)'}}>{data.products.length} selected</div>
                  </div>
                )}

                {step===1 && (
                  <div style={{display:'flex', flexDirection:'column', gap:20}}>
                    <div>
                      <label style={{color:'rgba(244,239,226,0.6)'}}>Estimated quantity</label>
                      <input value={data.quantity} onChange={e=>update('quantity', e.target.value)} placeholder="e.g. 4 pallets / 1,200 kg per shipment"
                        style={{background:'rgba(255,255,255,0.04)', borderColor:'rgba(255,255,255,0.15)', color:'var(--cream)'}}/>
                    </div>
                    <div>
                      <label style={{color:'rgba(244,239,226,0.6)'}}>Destination country / city</label>
                      <input value={data.destination} onChange={e=>update('destination', e.target.value)} placeholder="e.g. Dar es Salaam, Tanzania"
                        style={{background:'rgba(255,255,255,0.04)', borderColor:'rgba(255,255,255,0.15)', color:'var(--cream)'}}/>
                    </div>
                    <div>
                      <label style={{color:'rgba(244,239,226,0.6)'}}>Frequency</label>
                      <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                        {['One-off','Weekly','Bi-weekly','Monthly','Seasonal'].map(f=>(
                          <button key={f} type="button" onClick={()=>update('frequency', f)} style={{
                            padding:'10px 16px', borderRadius:999, fontSize:13, fontWeight:500,
                            border:`1px solid ${data.frequency===f?'var(--amber)':'rgba(255,255,255,0.18)'}`,
                            background: data.frequency===f?'var(--amber)':'transparent',
                            color: data.frequency===f?'var(--ink)':'var(--cream)',
                            cursor:'pointer'
                          }}>{f}</button>
                        ))}
                      </div>
                    </div>
                  </div>
                )}

                {step===2 && (
                  <div style={{display:'flex', flexDirection:'column', gap:20}}>
                    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                      <div>
                        <label style={{color:'rgba(244,239,226,0.6)'}}>Full name</label>
                        <input value={data.name} onChange={e=>update('name', e.target.value)} style={{background:'rgba(255,255,255,0.04)', borderColor:'rgba(255,255,255,0.15)', color:'var(--cream)'}}/>
                      </div>
                      <div>
                        <label style={{color:'rgba(244,239,226,0.6)'}}>Company</label>
                        <input value={data.company} onChange={e=>update('company', e.target.value)} style={{background:'rgba(255,255,255,0.04)', borderColor:'rgba(255,255,255,0.15)', color:'var(--cream)'}}/>
                      </div>
                    </div>
                    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                      <div>
                        <label style={{color:'rgba(244,239,226,0.6)'}}>Email</label>
                        <input type="email" value={data.email} onChange={e=>update('email', e.target.value)} style={{background:'rgba(255,255,255,0.04)', borderColor:'rgba(255,255,255,0.15)', color:'var(--cream)'}}/>
                      </div>
                      <div>
                        <label style={{color:'rgba(244,239,226,0.6)'}}>Phone (optional)</label>
                        <input value={data.phone} onChange={e=>update('phone', e.target.value)} style={{background:'rgba(255,255,255,0.04)', borderColor:'rgba(255,255,255,0.15)', color:'var(--cream)'}}/>
                      </div>
                    </div>
                    <div>
                      <label style={{color:'rgba(244,239,226,0.6)'}}>Anything else? (optional)</label>
                      <textarea rows={3} value={data.notes} onChange={e=>update('notes', e.target.value)} style={{background:'rgba(255,255,255,0.04)', borderColor:'rgba(255,255,255,0.15)', color:'var(--cream)', resize:'vertical'}}/>
                    </div>
                  </div>
                )}

                {/* Nav */}
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:32, paddingTop:24, borderTop:'1px solid rgba(255,255,255,0.1)'}}>
                  <button onClick={()=>setStep(Math.max(0, step-1))} disabled={step===0}
                    className="btn btn-ghost" style={{color:'var(--cream)', borderColor:'rgba(255,255,255,0.2)', opacity: step===0?0.4:1}}>
                    Back
                  </button>
                  {step < 2 ? (
                    <button onClick={()=>setStep(step+1)} disabled={!canNext[step]} className="btn btn-primary" style={{opacity: canNext[step]?1:0.5, cursor: canNext[step]?'pointer':'not-allowed'}}>
                      Continue <Icon.Arrow size={14}/>
                    </button>
                  ) : (
                    <button onClick={()=>canNext[2] && setSubmitted(true)} disabled={!canNext[2]} className="btn btn-primary" style={{opacity: canNext[2]?1:0.5}}>
                      Submit request <Icon.Check size={14}/>
                    </button>
                  )}
                </div>
              </>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .q-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
      `}</style>
    </section>
  );
}

function Footer(){
  return (
    <footer style={{background:'var(--forest-deep)', color:'rgba(244,239,226,0.7)', padding:'80px 0 32px'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr 1.2fr', gap:48, marginBottom:64}} className="foot-grid">
          <div>
            <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:18}}>
              <span style={{
                width:46, height:46, borderRadius:'50%',
                background:'var(--cream)',
                border:`1.5px solid var(--tomato)`,
                position:'relative', flexShrink:0,
                display:'grid', placeItems:'center'
              }}>
                <span style={{
                  position:'absolute', inset:'10%', borderRadius:'50%',
                  border:'1.2px solid var(--tomato)'
                }}/>
                <svg width="28" height="30" viewBox="0 0 60 64" aria-hidden style={{position:'relative'}}>
                  <path d="M30 22 C 30 14, 30 10, 30 6" stroke="#1A2418" strokeWidth="1.6" strokeLinecap="round" fill="none"/>
                  <path d="M30 12 C 36 8, 44 8, 46 14 C 42 18, 34 18, 30 12 Z" fill="#1F3D2E"/>
                  <ellipse cx="30" cy="40" rx="18" ry="19" fill="#D63B27"/>
                  <path d="M30 23 C 28 36, 28 52, 30 58" stroke="#1A2418" strokeOpacity="0.22" strokeWidth="1.4" fill="none"/>
                  <ellipse cx="22" cy="32" rx="3.6" ry="6" fill="#FAF6EC" opacity="0.34" transform="rotate(-22 22 32)"/>
                </svg>
              </span>
              <div style={{display:'flex', flexDirection:'column', lineHeight:1}}>
                <span style={{fontFamily:"'NormalAmp', 'Archivo', 'Arial Black', sans-serif", fontWeight:800, color:'var(--tomato)', fontSize:20, letterSpacing:'-0.02em'}}>P&amp;L England</span>
                <span style={{fontSize:9.5, fontWeight:600, color:'rgba(244,239,226,0.5)', letterSpacing:'0.32em', textTransform:'uppercase', marginTop:5}}>Simply Fresh</span>
              </div>
            </div>
            <p style={{margin:'0 0 24px', maxWidth:'34ch', fontSize:14.5, lineHeight:1.6}}>
              Delivering quality fresh produce from Europe to Africa, the Middle East and beyond.
            </p>
            <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
              <a href="http://wa.me/+447808034216" className="btn" style={{padding:'10px 14px', fontSize:13, background:'rgba(255,255,255,0.06)', color:'var(--cream)', border:'1px solid rgba(255,255,255,0.1)'}}>
                <Icon.Whatsapp size={14}/> WhatsApp
              </a>
              <a href="mailto:sales@plengland.co.uk" className="btn" style={{padding:'10px 14px', fontSize:13, background:'rgba(255,255,255,0.06)', color:'var(--cream)', border:'1px solid rgba(255,255,255,0.1)'}}>
                <Icon.Mail size={14}/> Email
              </a>
              <a href="https://www.instagram.com/plenglandltd/" target="_blank" rel="noopener noreferrer" className="btn" style={{padding:'10px 14px', fontSize:13, background:'rgba(255,255,255,0.06)', color:'var(--cream)', border:'1px solid rgba(255,255,255,0.1)'}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                  <line x1="17.5" y1="6.5" x2="17.5" y2="6.5"/>
                </svg>
                Instagram
              </a>
            </div>
          </div>

          {[
            ['Quick Links', [['About','#about'],['What We Do','#services'],['Produce','#produce'],['Routes','#routes'],['Contact','#quote']]],
            ['Services', [['Get Pricing','#quote'],['Documentation','#services'],['Logistics','#services'],['FAQ','#faq']]],
          ].map(([title, links])=>(
            <div key={title}>
              <div style={{fontSize:12, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--cream)', marginBottom:18}}>{title}</div>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                {links.map(([l,h])=>(
                  <a key={l} href={h} style={{fontSize:14, color:'rgba(244,239,226,0.7)', transition:'color 0.15s'}}
                     onMouseEnter={e=>e.currentTarget.style.color='var(--cream)'}
                     onMouseLeave={e=>e.currentTarget.style.color='rgba(244,239,226,0.7)'}>{l}</a>
                ))}
              </div>
            </div>
          ))}

          <div>
            <div style={{fontSize:12, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--cream)', marginBottom:18}}>Contact</div>
            <div style={{display:'flex', flexDirection:'column', gap:10, fontSize:14}}>
              <a href="mailto:sales@plengland.co.uk">sales@plengland.co.uk</a>
              <a href="http://wa.me/+447808034216">+44 7808 034216</a>
              <a href="https://www.instagram.com/plenglandltd/" target="_blank" rel="noopener noreferrer">@plenglandltd</a>
              <span style={{lineHeight:1.6}}>3rd Floor, 86–90 Paul Street<br/>London, England, EC2A 4NE</span>
            </div>
          </div>
        </div>

        {/* Compliance / registration row */}
        <div style={{
          padding:'24px 0', borderTop:'1px solid rgba(255,255,255,0.08)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16,
          fontSize:12.5, color:'rgba(244,239,226,0.5)'
        }}>
          <div>© 2026 P&L England Ltd. All rights reserved.</div>
          <div style={{display:'flex', gap:24, flexWrap:'wrap'}}>
            <span>Companies House <strong style={{color:'rgba(244,239,226,0.85)'}}>11684967</strong></span>
            <span>VAT <strong style={{color:'rgba(244,239,226,0.85)'}}>GB 494 0985 47</strong></span>
            <span>Registered in England & Wales</span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
}

function WhatsappFab(){
  const [open, setOpen] = useState(false);
  return (
    <div style={{position:'fixed', bottom:24, right:24, zIndex:100, display:'flex', flexDirection:'column', alignItems:'flex-end', gap:12}}>
      {open && (
        <div style={{
          background:'var(--paper)', border:'1px solid var(--line)',
          borderRadius:'var(--radius-lg)', padding:18,
          width:280, boxShadow:'0 20px 50px -20px rgba(0,0,0,0.25)'
        }}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
            <span style={{fontFamily:'var(--serif)', fontSize:17, fontWeight:500}}>Chat with sales</span>
            <button onClick={()=>setOpen(false)}><Icon.X size={16}/></button>
          </div>
          <p style={{margin:'0 0 14px', fontSize:13.5, color:'var(--ink-2)', lineHeight:1.5}}>
            We're typically online 09:00–18:00 GMT. WhatsApp is fastest for spot pricing.
          </p>
          <a href="http://wa.me/+447808034216" className="btn btn-whatsapp" style={{width:'100%', justifyContent:'center'}}>
            <Icon.Whatsapp size={16}/> Open WhatsApp
          </a>
        </div>
      )}
      <button onClick={()=>setOpen(!open)} aria-label="Open WhatsApp chat" style={{
        width:56, height:56, borderRadius:'50%', background:'#25D366', color:'#053B1F',
        display:'flex', alignItems:'center', justifyContent:'center',
        boxShadow:'0 12px 32px -8px rgba(37,211,102,0.55)', cursor:'pointer'
      }}>
        {open ? <Icon.X size={22}/> : <Icon.Whatsapp size={26}/>}
      </button>
    </div>
  );
}

Object.assign(window, { QuoteFlow, Footer, WhatsappFab });