// QuoteForm.jsx - multi-step in-hero quote form
const { useState: useStateQ } = React;

function QuoteForm({ compact=false }){
  const [step, setStep] = useStateQ(0);
  const [data, setData] = useStateQ({
    type: '', bill: '', roof: '', timeframe: '', name:'', email:'', phone:'', address:''
  });
  const [submitted, setSubmitted] = useStateQ(false);

  const steps = [
    {
      label: 'Property',
      render: () => (
        <div className="qform-step">
          <div className="qform-label">What kind of property?</div>
          <div className="qform-opts">
            {['Residential','Commercial','Off-grid'].map(t => (
              <button key={t} className={`qform-opt ${data.type===t?'sel':''}`} onClick={() => setData({...data, type:t})}>{t}</button>
            ))}
          </div>
          <div className="qform-label">Average monthly power bill</div>
          <div className="qform-opts">
            {['Under $200','$200–400','$400+'].map(t => (
              <button key={t} className={`qform-opt ${data.bill===t?'sel':''}`} onClick={() => setData({...data, bill:t})}>{t}</button>
            ))}
          </div>
        </div>
      )
    },
    {
      label: 'Roof & timing',
      render: () => (
        <div className="qform-step">
          <div className="qform-label">Roof type</div>
          <div className="qform-opts">
            {['Tile','Colorsteel','Other'].map(t => (
              <button key={t} className={`qform-opt ${data.roof===t?'sel':''}`} onClick={() => setData({...data, roof:t})}>{t}</button>
            ))}
          </div>
          <div className="qform-label">When are you looking to install?</div>
          <div className="qform-opts">
            {['ASAP','1–3 months','Just exploring'].map(t => (
              <button key={t} className={`qform-opt ${data.timeframe===t?'sel':''}`} onClick={() => setData({...data, timeframe:t})}>{t}</button>
            ))}
          </div>
        </div>
      )
    },
    {
      label: 'Contact',
      render: () => (
        <div className="qform-step">
          <input className="qform-input" placeholder="Full name" value={data.name} onChange={e => setData({...data, name:e.target.value})}/>
          <input className="qform-input" placeholder="Email" type="email" value={data.email} onChange={e => setData({...data, email:e.target.value})}/>
          <input className="qform-input" placeholder="Phone" type="tel" value={data.phone} onChange={e => setData({...data, phone:e.target.value})}/>
          <input className="qform-input" placeholder="Address (suburb is fine)" value={data.address} onChange={e => setData({...data, address:e.target.value})}/>
        </div>
      )
    }
  ];

  const canNext = () => {
    if (step===0) return data.type && data.bill;
    if (step===1) return data.roof && data.timeframe;
    if (step===2) return data.name && data.email;
    return true;
  };

  if (submitted){
    return (
      <div className="quote-card" style={{textAlign:'center', padding:'48px 32px'}}>
        <div style={{width:60, height:60, borderRadius:'50%', background:'var(--brand-grad-soft)', display:'grid', placeItems:'center', margin:'0 auto 20px', border:'1px solid var(--line-strong)'}}>
          <span style={{color:'var(--green)'}}><Icons.Check/></span>
        </div>
        <h3>Thanks, {data.name.split(' ')[0] || 'we got it'}!</h3>
        <p className="sub">One of the team will review your property and reach out within a week with a tailored quote. No pressure, no pushy sales — that's not how we work.</p>
      </div>
    );
  }

  return (
    <div className="quote-card">
      <h3>Get a free solar quote</h3>
      <p className="sub">60 seconds. 3 quick questions. We'll do the rest.</p>
      <div className="qform-steps">
        {steps.map((_, i) => <div key={i} className={`qform-step-dot ${i<=step?'active':''}`}/>)}
      </div>
      {steps[step].render()}
      <div style={{display:'flex', gap:10, marginTop:24}}>
        {step > 0 && <button className="btn btn-ghost" style={{flex:'0 0 auto', padding:'12px 18px'}} onClick={() => setStep(step-1)}>Back</button>}
        <button
          className="btn btn-primary"
          style={{flex:1, justifyContent:'center', opacity: canNext()?1:0.5, pointerEvents: canNext()?'auto':'none'}}
          onClick={() => step < steps.length-1 ? setStep(step+1) : setSubmitted(true)}
        >
          {step < steps.length-1 ? 'Continue' : 'Get my quote'} <Icons.Arrow/>
        </button>
      </div>
      <p style={{fontSize:11, color:'var(--text-faint)', marginTop:16, textAlign:'center', margin:'16px 0 0'}}>🔒 Your details are private. We never share or sell.</p>
    </div>
  );
}

window.QuoteForm = QuoteForm;