// Multi-step inquiry form
function Inquiry({ navigate }) {
  const [step, setStep] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const isMobile = useIsMobile();
  const [data, setData] = useState({
    service: '', name: '', email: '', phone: '',
    address: '', sqft: '', rooms: '', timeline: '', budget: '', photos: [], notes: '',
  });
  const update = (k, v) => setData(d => ({...d, [k]: v}));

  const steps = [
    { title: 'Service', key: 'service' },
    { title: 'Property', key: 'property' },
    { title: 'Scope', key: 'scope' },
    { title: 'You', key: 'you' },
    { title: 'Review', key: 'review' },
  ];

  const canAdvance = () => {
    if (step === 0) return !!data.service;
    if (step === 1) return !!data.address && !!data.sqft;
    if (step === 2) return !!data.timeline && !!data.budget;
    if (step === 3) return !!data.name && /\S+@\S+/.test(data.email);
    return true;
  };

  const handleSubmit = async () => {
    setSubmitting(true);
    try {
      const fd = new FormData();
      fd.append('Service', data.service);
      fd.append('Name', data.name);
      fd.append('email', data.email);
      fd.append('Phone', data.phone || '—');
      fd.append('Address', data.address);
      fd.append('Square Footage', data.sqft);
      fd.append('Rooms', data.rooms || '—');
      fd.append('Timeline', data.timeline);
      fd.append('Budget', data.budget);
      fd.append('Notes', data.notes || '—');
      data.photos.forEach(file => fd.append('photos', file));
      await fetch('https://formspree.io/f/mqenkglo', {
        method: 'POST',
        headers: { 'Accept': 'application/json' },
        body: fd,
      });
    } catch (_) {}
    setSubmitting(false);
    setStep(5);
  };

  if (step === 5) return <ThankYou navigate={navigate}/>;

  return (
    <main style={{paddingTop: isMobile ? '100px' : '140px', minHeight:'100vh', paddingBottom:'120px'}}>
      <section className="container" style={{maxWidth:'1100px'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems: isMobile ? 'flex-end' : 'center', marginBottom: isMobile ? '40px' : '56px'}}>
          <div>
            <div className="eyebrow">Inquiry</div>
            <h1 className="serif" style={{fontSize:'clamp(40px, 6vw, 88px)', margin:'16px 0 0', lineHeight:0.95, letterSpacing:'-0.02em', fontWeight:300}}>
              Tell us about<br/>your <em style={{fontWeight:400}}>home</em>.
            </h1>
          </div>
          <div style={{textAlign:'right'}}>
            <div className="eyebrow" style={{fontSize:'10px'}}>Step {step+1} of {steps.length}</div>
            <div className="serif" style={{fontSize:'14px', color:'var(--ink-3)', fontStyle:'italic', marginTop:'4px'}}>~ 2 min</div>
          </div>
        </div>

        {/* Progress */}
        <div style={{display:'grid', gridTemplateColumns:`repeat(${steps.length}, 1fr)`, gap:'4px', marginBottom: isMobile ? '40px' : '64px'}}>
          {steps.map((s, i) => (
            <div key={s.key}>
              {!isMobile && (
                <div className="eyebrow" style={{fontSize:'9px', marginBottom:'8px', color: i<=step ? 'var(--ink)':'var(--ink-4)'}}>
                  {String(i+1).padStart(2,'0')} · {s.title}
                </div>
              )}
              <div style={{height:'2px', background: i<=step ? 'var(--ink)':'var(--rule)', transition:'background .4s'}}/>
            </div>
          ))}
        </div>

        <div style={{minHeight: isMobile ? 'auto' : '420px'}}>
          {step === 0 && <StepService data={data} update={update} isMobile={isMobile}/>}
          {step === 1 && <StepProperty data={data} update={update} isMobile={isMobile}/>}
          {step === 2 && <StepScope data={data} update={update}/>}
          {step === 3 && <StepYou data={data} update={update} isMobile={isMobile}/>}
          {step === 4 && <StepReview data={data} isMobile={isMobile}/>}
        </div>

        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop: isMobile ? '48px' : '64px', paddingTop:'32px', borderTop:'1px solid var(--rule)'}}>
          <button onClick={()=> step === 0 ? navigate('home') : setStep(step-1)} className="btn btn-ghost">
            ← {step === 0 ? 'Home' : 'Back'}
          </button>
          {step === 4 ? (
            <button onClick={handleSubmit} className="btn" disabled={submitting} style={{opacity: submitting ? 0.5 : 1, cursor: submitting ? 'not-allowed' : 'pointer'}}>
              {submitting ? 'Sending…' : 'Send inquiry'} <span>→</span>
            </button>
          ) : (
            <button onClick={()=>canAdvance() && setStep(step+1)} className="btn" disabled={!canAdvance()} style={{opacity: canAdvance()?1:0.35, cursor: canAdvance()?'pointer':'not-allowed'}}>
              Continue <span>→</span>
            </button>
          )}
        </div>
      </section>
    </main>
  );
}

function StepService({ data, update, isMobile }) {
  const options = [
    { k: 'Staging', t: 'Home Staging', d: 'You\'re listing a home.' },
    { k: 'Curation', t: 'Interior Curation', d: 'You\'re staying and styling.' },
    { k: 'Partnerships', t: 'Partnerships', d: 'The stager in your corner, every listing.' },
    { k: 'Unsure', t: 'Not sure yet', d: 'Help me figure it out.' },
  ];
  return (
    <Reveal>
      <div className="eyebrow" style={{marginBottom:'24px'}}>01 · Which service?</div>
      <h2 className="serif" style={{fontSize:'clamp(28px, 3.4vw, 44px)', margin:'0 0 32px', fontWeight:300, letterSpacing:'-0.01em'}}>
        What are we <em>helping</em> with?
      </h2>
      <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:'12px'}}>
        {options.map(o => {
          const sel = data.service === o.k;
          return (
            <button key={o.k} onClick={()=>update('service', o.k)} style={{
              textAlign:'left', padding: isMobile ? '24px' : '32px', cursor:'pointer',
              background: sel ? 'var(--ink)' : 'var(--bg-cream)',
              color: sel ? 'var(--bg-cream)' : 'var(--ink)',
              border:'1px solid ' + (sel ? 'var(--ink)' : 'var(--rule)'),
              transition:'all .3s',
            }}>
              <div className="serif" style={{fontSize: isMobile ? '26px' : '32px', fontWeight:400}}>{o.t}</div>
              <div style={{marginTop:'8px', fontSize:'14px', opacity: 0.8}}>{o.d}</div>
            </button>
          );
        })}
      </div>
    </Reveal>
  );
}

function StepProperty({ data, update, isMobile }) {
  return (
    <Reveal>
      <div className="eyebrow" style={{marginBottom:'24px'}}>02 · The property</div>
      <h2 className="serif" style={{fontSize:'clamp(28px, 3.4vw, 44px)', margin:'0 0 40px', fontWeight:300, letterSpacing:'-0.01em'}}>
        Where is it, and <em>how big</em>?
      </h2>
      <div style={{display:'grid', gap:'28px', maxWidth:'720px'}}>
        <Field label="Address or neighborhood">
          <input type="text" value={data.address} onChange={e=>update('address', e.target.value)}
            placeholder="e.g. 1204 Bluff Springs Rd, Austin TX" className="inq-input"/>
        </Field>
        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:'28px'}}>
          <Field label="Approx. square footage">
            <input type="text" value={data.sqft} onChange={e=>update('sqft', e.target.value)}
              placeholder="2,100" className="inq-input"/>
          </Field>
          <Field label="Number of rooms to style">
            <select value={data.rooms} onChange={e=>update('rooms', e.target.value)} className="inq-input">
              <option value="">Select…</option>
              <option>1–2 rooms</option>
              <option>3–4 rooms</option>
              <option>5–6 rooms</option>
              <option>Whole home</option>
            </select>
          </Field>
        </div>
        <Field label="Upload photos (optional, drag & drop)">
          <PhotoDrop data={data} update={update}/>
        </Field>
      </div>
    </Reveal>
  );
}

function StepScope({ data, update }) {
  const timelines = ['Listing in < 2 weeks', '2–4 weeks out', '1–2 months', 'Just exploring'];
  const budgets = ['Under $1,500', '$1,500 – $3,000', '$3,000 – $6,000', '$6,000+', 'Not Sure Yet'];
  return (
    <Reveal>
      <div className="eyebrow" style={{marginBottom:'24px'}}>03 · Timing & budget</div>
      <h2 className="serif" style={{fontSize:'clamp(28px, 3.4vw, 44px)', margin:'0 0 40px', fontWeight:300, letterSpacing:'-0.01em'}}>
        When, and <em>how much</em>?
      </h2>
      <div style={{display:'grid', gap:'40px'}}>
        <div>
          <div className="eyebrow" style={{marginBottom:'16px'}}>Timeline</div>
          <div style={{display:'flex', gap:'10px', flexWrap:'wrap'}}>
            {timelines.map(t => (
              <Chip key={t} sel={data.timeline===t} onClick={()=>update('timeline', t)}>{t}</Chip>
            ))}
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{marginBottom:'16px'}}>Budget range</div>
          <div style={{display:'flex', gap:'10px', flexWrap:'wrap'}}>
            {budgets.map(t => (
              <Chip key={t} sel={data.budget===t} onClick={()=>update('budget', t)}>{t}</Chip>
            ))}
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function StepYou({ data, update, isMobile }) {
  return (
    <Reveal>
      <div className="eyebrow" style={{marginBottom:'24px'}}>04 · You</div>
      <h2 className="serif" style={{fontSize:'clamp(28px, 3.4vw, 44px)', margin:'0 0 40px', fontWeight:300, letterSpacing:'-0.01em'}}>
        Where should we <em>write back</em>?
      </h2>
      <div style={{display:'grid', gap:'28px', maxWidth:'720px'}}>
        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:'28px'}}>
          <Field label="Your name">
            <input type="text" value={data.name} onChange={e=>update('name', e.target.value)} className="inq-input" placeholder="First & last"/>
          </Field>
          <Field label="Email">
            <input type="email" value={data.email} onChange={e=>update('email', e.target.value)} className="inq-input" placeholder="you@example.com"/>
          </Field>
        </div>
        <Field label="Phone number (optional)">
          <input type="tel" value={data.phone} onChange={e=>update('phone', e.target.value)} className="inq-input" placeholder="(555) 000-0000"/>
        </Field>
        <Field label="Anything else we should know? (optional)">
          <textarea rows={4} value={data.notes} onChange={e=>update('notes', e.target.value)} className="inq-input" placeholder="Listing agent's name, particular rooms that need attention, the vibe you're after…"/>
        </Field>
      </div>
    </Reveal>
  );
}

function StepReview({ data, isMobile }) {
  const fields = [
    ['Service', data.service || '—'],
    ['Name', data.name || '—'],
    ['Email', data.email || '—'],
    ['Phone', data.phone || '—'],
    ['Address', data.address || '—'],
    ['Size', data.sqft ? data.sqft + ' sq ft' : '—'],
    ['Rooms', data.rooms || '—'],
    ['Timeline', data.timeline || '—'],
    ['Budget', data.budget || '—'],
    ['Photos', data.photos.length ? `${data.photos.length} photo${data.photos.length > 1 ? 's' : ''} attached` : 'None'],
  ];
  return (
    <Reveal>
      <div className="eyebrow" style={{marginBottom:'24px'}}>05 · Review & send</div>
      <h2 className="serif" style={{fontSize:'clamp(28px, 3.4vw, 44px)', margin:'0 0 40px', fontWeight:300, letterSpacing:'-0.01em'}}>
        Does this <em>look right</em>?
      </h2>
      <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:'8px 64px', maxWidth:'860px'}}>
        {fields.map(([k,v]) => (
          <div key={k} style={{display:'grid', gridTemplateColumns: isMobile ? '100px 1fr' : '140px 1fr', padding:'14px 0', borderBottom:'1px solid var(--rule)', alignItems:'baseline', gap:'16px'}}>
            <div className="eyebrow" style={{fontSize:'10px'}}>{k}</div>
            <div style={{fontSize:'15px', color:'var(--ink)', wordBreak:'break-word'}}>{v}</div>
          </div>
        ))}
      </div>
      {data.notes && (
        <div style={{marginTop:'32px'}}>
          <div className="eyebrow" style={{marginBottom:'8px', fontSize:'10px'}}>Notes</div>
          <p className="serif" style={{fontSize:'18px', fontStyle:'italic', color:'var(--ink-2)', maxWidth:'760px', lineHeight:1.6}}>"{data.notes}"</p>
        </div>
      )}
    </Reveal>
  );
}

function Field({ label, children }) {
  return (
    <label style={{display:'block'}}>
      <div className="eyebrow" style={{marginBottom:'12px', fontSize:'10px'}}>{label}</div>
      {children}
    </label>
  );
}

function Chip({ sel, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      padding:'12px 18px', border:'1px solid ' + (sel ? 'var(--ink)':'var(--rule)'),
      background: sel ? 'var(--ink)' : 'transparent', color: sel ? 'var(--bg-cream)':'var(--ink)',
      fontFamily:'Manrope, sans-serif', fontSize:'13px', letterSpacing:'0.04em', cursor:'pointer', transition:'all .3s',
    }}>{children}</button>
  );
}

function PhotoDrop({ data, update }) {
  const [drag, setDrag] = useState(false);
  const inputRef = useRef(null);
  const addFiles = (files) => {
    update('photos', [...data.photos, ...Array.from(files)]);
  };
  const onDrop = (e) => {
    e.preventDefault(); setDrag(false);
    addFiles(e.dataTransfer.files);
  };
  const onInputChange = (e) => {
    addFiles(e.target.files);
    e.target.value = '';
  };
  const removePhoto = (i) => {
    update('photos', data.photos.filter((_, idx) => idx !== i));
  };
  return (
    <div>
      <div onDragOver={e=>{e.preventDefault(); setDrag(true);}} onDragLeave={()=>setDrag(false)} onDrop={onDrop}
        onClick={()=>inputRef.current.click()}
        style={{
          border:'1px dashed ' + (drag ? 'var(--accent-2)':'var(--rule)'),
          background: drag ? 'var(--bg-cream)':'transparent',
          padding:'32px 24px', textAlign:'center', cursor:'pointer', transition:'all .3s',
        }}>
        <input ref={inputRef} type="file" multiple accept="image/*" onChange={onInputChange} style={{display:'none'}}/>
        <div className="serif" style={{fontSize:'18px', fontStyle:'italic', color:'var(--ink-3)'}}>
          Drop photos here, or click to browse
        </div>
      </div>
      {data.photos.length > 0 && (
        <div style={{marginTop:'12px', display:'flex', gap:'8px', flexWrap:'wrap'}}>
          {data.photos.map((f, i) => (
            <span key={i} className="eyebrow" style={{padding:'6px 12px', background:'var(--bg-soft)', fontSize:'10px', display:'flex', alignItems:'center', gap:'8px'}}>
              {f.name}
              <button onClick={()=>removePhoto(i)} style={{background:'none', border:'none', cursor:'pointer', color:'var(--ink-3)', fontSize:'14px', lineHeight:1, padding:0}}>×</button>
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

function ThankYou({ navigate }) {
  return (
    <main style={{paddingTop:'160px', minHeight:'80vh', textAlign:'center'}}>
      <div className="container" style={{maxWidth:'720px'}}>
        <Reveal>
          <span className="script" style={{fontSize:'clamp(80px, 14vw, 200px)', color:'var(--accent-2)', lineHeight:1, display:'block'}}>thank you.</span>
        </Reveal>
        <Reveal delay={120}>
          <p className="serif" style={{fontSize:'clamp(22px, 2.6vw, 34px)', lineHeight:1.4, margin:'40px 0 0', fontWeight:300, letterSpacing:'-0.01em', fontStyle:'italic'}}>
            Your note is on its way. Ariana will be in touch promptly.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <button className="btn" style={{marginTop:'48px'}} onClick={()=>navigate('home')}>← Back home</button>
        </Reveal>
      </div>
      <style>{`
        .inq-input {
          width:100%; padding: 14px 0; background: transparent;
          border: none; border-bottom: 1px solid var(--rule);
          font-family:'Cormorant Garamond', serif; font-size: 20px; color: var(--ink);
          outline:none; transition: border-color .3s;
        }
        .inq-input:focus { border-color: var(--ink); }
        .inq-input::placeholder { color: var(--ink-4); font-style: italic; }
        select.inq-input { appearance:none; }
      `}</style>
    </main>
  );
}

Object.assign(window, { Inquiry });