// Agora DreamFinder — guided form to commission a search across the network.

const DreamFinder = ({ setRoute }) => {
  const [step, setStep] = useState(1);
  const [brand, setBrand] = useState('Hermès');
  const [model, setModel] = useState('Kelly');
  const [size, setSize] = useState('28');
  const [color, setColor] = useState('etoupe');
  const [hardware, setHardware] = useState('palladium');
  const [cond, setCond] = useState('Excellent');
  const [year, setYear] = useState([2018, 2026]);
  const [budget, setBudget] = useState(12000);

  const palettes = window.AG_DATA.palettes;
  const colorOpts = [
    { id:'etoupe',   label:'Etoupe',   p: palettes.etoupe },
    { id:'noir',     label:'Noir',     p: palettes.noir },
    { id:'gold',     label:'Gold',     p: palettes.cognac },
    { id:'rouge',    label:'Rouge H',  p: palettes.rouge },
    { id:'cream',    label:'Craie',    p: palettes.cream },
    { id:'forest',   label:'Vert',     p: palettes.bottega },
  ];

  return (
    <div>
      <section style={{ background:'var(--ag-ink)', color:'#fff', padding:'56px 0 48px' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.5)' }}>Dream Finder · We hunt it for you</div>
          <h1 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 88, lineHeight: 0.98, marginTop: 16, letterSpacing:'-0.015em' }}>You want it.<br/>We find it.</h1>
          <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, maxWidth: 580, color:'rgba(255,255,255,0.7)' }}>
            Tell us the piece. We'll send a brief to our 1,284 sellers worldwide and message you when matches surface. Median time to first match: 11 days.
          </p>
          {/* Stepper */}
          <div className="ag-flex" style={{ marginTop: 48, gap: 0 }}>
            {[
              { n: 1, l:'Piece' },
              { n: 2, l:'Specification' },
              { n: 3, l:'Budget & contact' },
              { n: 4, l:'Brief sent' },
            ].map((s, i, arr) => (
              <div key={s.n} className="ag-flex" style={{ flex: 1, alignItems:'center', gap: 12 }}>
                <div style={{ width: 28, height: 28, borderRadius:'9999px', background: step >= s.n ? '#fff' : 'transparent', color: step >= s.n ? 'var(--ag-ink)' : 'rgba(255,255,255,0.6)', border:'1px solid '+(step >= s.n ? '#fff' : 'rgba(255,255,255,0.3)'), display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--ag-font-mono)', fontSize: 12, fontWeight: 600 }}>
                  {step > s.n ? <Icon name="check" size={12} stroke={3}/> : s.n}
                </div>
                <div className="ag-eyebrow-ink" style={{ color: step >= s.n ? '#fff' : 'rgba(255,255,255,0.5)', fontSize: 11 }}>{s.l}</div>
                {i < arr.length-1 && <div style={{ flex: 1, height: 1, background:'rgba(255,255,255,0.2)' }}/>}
              </div>
            ))}
          </div>
        </div>
      </section>

      <div className="ag-shell ag-shell--wide" style={{ padding:'48px 32px 80px', display:'grid', gridTemplateColumns:'1fr 380px', gap: 64 }}>
        <div>
          {step === 1 && (
            <div className="ag-fade-in">
              <div className="ag-eyebrow">01 · The piece</div>
              <h2 className="ag-h2" style={{ marginTop: 10, fontSize: 28, marginBottom: 28 }}>What are you looking for?</h2>

              <Field label="Brand">
                <div className="ag-flex" style={{ flexWrap:'wrap', gap: 8, marginTop: 10 }}>
                  {window.AG_DATA.brands.slice(0,10).map(b => (
                    <span key={b} onClick={()=>setBrand(b)} className={`ag-chip${brand===b?' ag-chip--active':''}`}>{b}</span>
                  ))}
                </div>
              </Field>
              <Field label="Model">
                <input className="ag-input" placeholder="e.g. Kelly, Birkin, Constance" value={model} onChange={e=>setModel(e.target.value)}/>
                <div className="ag-flex ag-gap-2" style={{ marginTop: 8 }}>
                  {['Kelly','Birkin','Constance','Mini Kelly','Picotin'].map(m => (
                    <span key={m} onClick={()=>setModel(m)} className={`ag-chip${model===m?' ag-chip--active':''}`}>{m}</span>
                  ))}
                </div>
              </Field>
              <Field label="Size">
                <div className="ag-flex ag-gap-2">
                  {['Mini','25','28','32','35'].map(s => (
                    <span key={s} onClick={()=>setSize(s)} className={`ag-chip${size===s?' ag-chip--active':''}`}>{s}</span>
                  ))}
                </div>
              </Field>
            </div>
          )}

          {step === 2 && (
            <div className="ag-fade-in">
              <div className="ag-eyebrow">02 · Specification</div>
              <h2 className="ag-h2" style={{ marginTop: 10, fontSize: 28, marginBottom: 28 }}>How exactly?</h2>
              <Field label="Color">
                <div style={{ display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap: 8 }}>
                  {colorOpts.map(c => (
                    <div key={c.id} onClick={()=>setColor(c.id)} style={{ cursor:'pointer' }}>
                      <div style={{ aspectRatio:'1/1', position:'relative', overflow:'hidden', borderRadius: 2, border: color===c.id ? '2px solid var(--ag-ink)' : '1px solid var(--ap-border)' }}>
                        <ProductTile item={{ palette: c.p, brand:'' }} square showWatermark={false}/>
                      </div>
                      <div className="ag-eyebrow-ink" style={{ marginTop: 8, fontSize: 10 }}>{c.label}</div>
                    </div>
                  ))}
                </div>
              </Field>
              <Field label="Hardware">
                <div className="ag-flex ag-gap-2">
                  {['Palladium','Gold','Rose gold','Black hardware'].map(h => (
                    <span key={h} onClick={()=>setHardware(h.toLowerCase())} className={`ag-chip${hardware===h.toLowerCase()?' ag-chip--active':''}`}>{h}</span>
                  ))}
                </div>
              </Field>
              <Field label="Acceptable condition">
                <div className="ag-flex ag-gap-2">
                  {['New','Excellent','Very Good','Good'].map(c => (
                    <span key={c} onClick={()=>setCond(c)} className={`ag-chip${cond===c?' ag-chip--active':''}`}>{c}</span>
                  ))}
                </div>
              </Field>
              <Field label={`Year range · ${year[0]} – ${year[1]}`}>
                <div style={{ marginTop: 16, position:'relative', height: 6, background:'var(--ap-bg-3)', borderRadius: 9999 }}>
                  <div style={{ position:'absolute', left: `${(year[0]-2010)/16*100}%`, right: `${100-(year[1]-2010)/16*100}%`, top: 0, bottom: 0, background:'var(--ag-ink)' }}/>
                </div>
                <div className="ag-between ag-mono" style={{ marginTop: 8, fontSize: 11, color:'var(--ap-fg-muted)' }}>
                  <span>2010</span><span>2026</span>
                </div>
              </Field>
            </div>
          )}

          {step === 3 && (
            <div className="ag-fade-in">
              <div className="ag-eyebrow">03 · Budget &amp; contact</div>
              <h2 className="ag-h2" style={{ marginTop: 10, fontSize: 28, marginBottom: 28 }}>At what number?</h2>
              <Field label="Maximum budget (EUR · duties included)">
                <div className="ag-flex ag-gap-3" style={{ alignItems:'baseline' }}>
                  <div className="ag-num" style={{ fontSize: 48, fontWeight: 500, letterSpacing:'-0.01em' }}>€{budget.toLocaleString()}</div>
                  <div className="ag-mono" style={{ fontSize: 12, color:'var(--ap-fg-muted)' }}>· ¥{Math.round(budget*161).toLocaleString()} JPY</div>
                </div>
                <input type="range" min="2000" max="50000" step="500" value={budget} onChange={e=>setBudget(+e.target.value)} style={{ width:'100%', marginTop: 16, accentColor:'var(--ag-ink)' }}/>
              </Field>

              <Field label="Notify me on">
                <div className="ag-col ag-gap-2" style={{ marginTop: 10 }}>
                  <label className="ag-flex ag-gap-2" style={{ alignItems:'center' }}><Check on={true} onToggle={()=>{}}/> <span>Email — lea@kobayashi.de</span></label>
                  <label className="ag-flex ag-gap-2" style={{ alignItems:'center' }}><Check on={true} onToggle={()=>{}}/> <span>App notification</span></label>
                  <label className="ag-flex ag-gap-2" style={{ alignItems:'center' }}><Check on={false} onToggle={()=>{}}/> <span>SMS — +49 17… (premium tier)</span></label>
                </div>
              </Field>
              <Field label="Notes for sellers (optional)">
                <textarea className="ag-input" rows="3" placeholder="Anything else? Preferred year of manufacture, must-have details, deal-breakers…" style={{ height: 88, padding: 14 }}/>
              </Field>
            </div>
          )}

          {step === 4 && (
            <div className="ag-fade-in ag-center ag-col" style={{ padding:'40px 0', gap: 20 }}>
              <div style={{ width: 72, height: 72, borderRadius:'9999px', background:'var(--ag-red)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name="check" size={32} stroke={1.5}/>
              </div>
              <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 56, lineHeight: 1, textAlign:'center' }}>Brief sent.</h2>
              <p style={{ color:'var(--ap-fg-muted)', textAlign:'center', maxWidth: 460, fontSize: 15, lineHeight: 1.55 }}>Your search is now live with 312 sellers who match your brand and region preferences. We'll message you the moment a piece surfaces.</p>
              <div className="ag-mono" style={{ fontSize: 12, color:'var(--ap-fg-faint)' }}>Brief #AG-2026-04-21-1408 · est. first match in 7–14 days</div>
              <div className="ag-flex ag-gap-2" style={{ marginTop: 12 }}>
                <button className="ag-btn ag-btn--ghost" onClick={()=>setRoute({ name:'watchlist' })}>View in watchlist</button>
                <button className="ag-btn" onClick={()=>setRoute({ name:'home' })}>Back to the marketplace</button>
              </div>
            </div>
          )}

          {step < 4 && (
            <div className="ag-flex ag-gap-3" style={{ marginTop: 56, paddingTop: 28, borderTop:'1px solid var(--ap-border)' }}>
              {step > 1 && <button className="ag-btn ag-btn--ghost" onClick={()=>setStep(step-1)}>← Back</button>}
              <div style={{ flex: 1 }}/>
              <button className="ag-btn ag-btn--red" onClick={()=>setStep(step+1)}>
                {step === 3 ? 'Send the brief' : 'Continue'} <Icon name="arrow-right" size={12}/>
              </button>
            </div>
          )}
        </div>

        {/* Live preview card */}
        <aside>
          <div style={{ position:'sticky', top: 200, padding: 24, border:'1px solid var(--ap-border)', background:'var(--ag-bone)' }}>
            <div className="ag-eyebrow">Your brief · live preview</div>
            <h3 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 28, lineHeight: 1.1, marginTop: 14, letterSpacing:'-0.005em' }}>
              {brand} {model} {size}
            </h3>
            <div style={{ aspectRatio:'4/5', marginTop: 18, overflow:'hidden', borderRadius: 2 }}>
              <ProductTile item={{ palette: (colorOpts.find(c=>c.id===color)?.p) || palettes.etoupe, brand: brand }} showWatermark={true}/>
            </div>
            <div className="ag-col ag-gap-2" style={{ marginTop: 16, fontSize: 12 }}>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Color</span><span>{colorOpts.find(c=>c.id===color)?.label}</span></div>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Hardware</span><span style={{ textTransform:'capitalize' }}>{hardware}</span></div>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Condition</span><span>{cond} or better</span></div>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Year</span><span className="ag-mono">{year[0]}–{year[1]}</span></div>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Max budget</span><span className="ag-num" style={{ fontWeight: 600 }}>€{budget.toLocaleString()}</span></div>
            </div>
            <div className="ag-rule" style={{ margin:'18px 0' }}/>
            <div className="ag-eyebrow">Matching now</div>
            <div className="ag-num" style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>312<span style={{ color:'var(--ap-fg-muted)', fontSize: 14, marginLeft: 6 }}>sellers</span></div>
            <div style={{ fontSize: 11, color:'var(--ap-fg-faint)', marginTop: 4 }}>Across Tokyo, Paris, Milan, Seoul, Hong Kong</div>
          </div>
        </aside>
      </div>
    </div>
  );
};

const Field = ({ label, children }) => (
  <div style={{ marginTop: 28 }}>
    <div className="ag-label" style={{ fontSize: 11, color:'var(--ap-fg-muted)' }}>{label}</div>
    <div style={{ marginTop: 10 }}>{children}</div>
  </div>
);

window.DreamFinder = DreamFinder;