// Merchant signup — multi-step apply form (no consumer signup per DESIGN.md anti-pattern rule)

function SignupPage() {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({
    company: '', taxNo: '', website: '',
    contactName: '', contactEmail: '', contactPhone: '',
    categories: [],
    feedType: '',
    productsCount: '',
    notes: '',
  });

  const setField = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggleCat = (slug) => setField('categories',
    form.categories.includes(slug)
      ? form.categories.filter(c => c !== slug)
      : [...form.categories, slug]
  );

  const total = 4;
  const next = () => setStep(s => Math.min(s + 1, total - 1));
  const back = () => setStep(s => Math.max(s - 1, 0));
  const submit = (e) => { e.preventDefault(); setStep(total); };

  return (
    <main id="main" data-screen-label="Merchant Signup">
      <div className="signup-shell">
        <aside className="signup-promo">
          <div>
            <a href="#/" className="brand" style={{ color: 'white', marginBottom: 32 }}>
              <span className="brand__mark"/>
              <span>kolaymarin<small style={{ color: 'rgba(255,255,255,0.6)' }}>·tr</small></span>
            </a>
            <h1>Marine yedek parça satıyorsanız, müşterileriniz bizden geçiyor.</h1>
            <p>
              <strong style={{ color: 'white' }}>47 satıcı</strong> kolaymarin üzerinden ayda 142.000+ canlı teklif gösteriyor.
              Komisyon yok; sadece tıklama başına sembolik ücret. Başvurunuz ortalama <strong style={{ color: 'white' }}>2 iş günü</strong> içinde değerlendirilir.
            </p>

            <ul className="signup-promo__points">
              <li className="signup-promo__point">
                <span className="signup-promo__point-icon"><Icon name="check" size={14} stroke={2.4}/></span>
                <span>Satış komisyonu <strong style={{ color: 'white' }}>%0</strong></span>
              </li>
              <li className="signup-promo__point">
                <span className="signup-promo__point-icon"><Icon name="check" size={14} stroke={2.4}/></span>
                <span>CSV / XML feed veya doğrudan API entegrasyonu</span>
              </li>
              <li className="signup-promo__point">
                <span className="signup-promo__point-icon"><Icon name="check" size={14} stroke={2.4}/></span>
                <span>Aylık veri kalitesi raporu ve tıklama analitik</span>
              </li>
              <li className="signup-promo__point">
                <span className="signup-promo__point-icon"><Icon name="check" size={14} stroke={2.4}/></span>
                <span>Partner tier'da marka sayfalarında öne çıkma</span>
              </li>
            </ul>
          </div>

          <blockquote className="signup-promo__quote">
            "Kolaymarin'in dürüstlüğü farklı: sahte fiyatları, üyelik duvarlarını ve sepet trolünü kabul etmiyor.
            Müşterilerimiz fiyatı bilerek geliyor; iade oranımız %3'e düştü."
            <span className="signup-promo__quote-author">Onur K. · East Marine, Tuzla</span>
          </blockquote>
        </aside>

        <section className="signup-form-wrap">
          <div className="signup-form" style={{ width: '100%', maxWidth: 480, margin: '0 auto' }}>
            {step < total && (
              <>
                <div className="signup-steps">
                  {Array.from({ length: total }).map((_, i) => (
                    <div
                      key={i}
                      className={`signup-step-dot ${i === step ? 'signup-step-dot--on' : ''} ${i < step ? 'signup-step-dot--done' : ''}`}
                    />
                  ))}
                </div>
                <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--km-ink-500)', marginBottom: 8, fontWeight: 600 }}>
                  Adım {step + 1} / {total}
                </div>
              </>
            )}

            {step === 0 && (
              <form onSubmit={(e) => { e.preventDefault(); next(); }}>
                <h2>Şirket bilgileri</h2>
                <p>Satıcı başvurusu — bu bilgileri biz alıp KVKK uyumlu saklarız.</p>

                <div className="field">
                  <label className="field__lbl" htmlFor="company">Şirket / mağaza adı <span>*</span></label>
                  <input id="company" className="input" placeholder="East Marine A.Ş." required
                    value={form.company} onChange={(e) => setField('company', e.target.value)}/>
                </div>

                <div className="field__row">
                  <div className="field">
                    <label className="field__lbl" htmlFor="tax">Vergi numarası <span>*</span></label>
                    <input id="tax" className="input tabular" placeholder="1234567890" required
                      value={form.taxNo} onChange={(e) => setField('taxNo', e.target.value)}/>
                  </div>
                  <div className="field">
                    <label className="field__lbl" htmlFor="web">Web siteniz</label>
                    <input id="web" className="input" placeholder="https://magaza.com.tr" type="url"
                      value={form.website} onChange={(e) => setField('website', e.target.value)}/>
                  </div>
                </div>

                <button type="submit" className="btn btn--primary btn--lg btn--block" style={{ marginTop: 8 }}>
                  Devam et <Icon name="arrow-right" size={14}/>
                </button>
              </form>
            )}

            {step === 1 && (
              <form onSubmit={(e) => { e.preventDefault(); next(); }}>
                <h2>İletişim</h2>
                <p>Başvurunuzla ilgili sizinle birinden buradan iletişime geçeriz.</p>

                <div className="field">
                  <label className="field__lbl" htmlFor="cn">Yetkili isim <span>*</span></label>
                  <input id="cn" className="input" placeholder="Ad Soyad" required
                    value={form.contactName} onChange={(e) => setField('contactName', e.target.value)}/>
                </div>

                <div className="field">
                  <label className="field__lbl" htmlFor="ce">E-posta <span>*</span></label>
                  <input id="ce" className="input" type="email" placeholder="iletisim@magaza.com.tr" required
                    value={form.contactEmail} onChange={(e) => setField('contactEmail', e.target.value)}/>
                </div>

                <div className="field">
                  <label className="field__lbl" htmlFor="cp">Telefon</label>
                  <input id="cp" className="input tabular" type="tel" placeholder="+90 5XX XXX XX XX"
                    value={form.contactPhone} onChange={(e) => setField('contactPhone', e.target.value)}/>
                  <div className="field__hint">Sadece başvurunuz için kullanılır; pazarlama listesine eklenmez.</div>
                </div>

                <div style={{ display: 'flex', gap: 8 }}>
                  <button type="button" className="btn btn--ghost btn--lg" onClick={back}>Geri</button>
                  <button type="submit" className="btn btn--primary btn--lg btn--block">
                    Devam et <Icon name="arrow-right" size={14}/>
                  </button>
                </div>
              </form>
            )}

            {step === 2 && (
              <form onSubmit={(e) => { e.preventDefault(); next(); }}>
                <h2>Ne satıyorsunuz?</h2>
                <p>İlgili kategorileri seçin — ürün feed'iniz buralara dağıtılır.</p>

                <div className="field">
                  <div className="tile-pick">
                    {CATEGORIES.map(c => (
                      <label key={c.slug} className={form.categories.includes(c.slug) ? 'on' : ''}>
                        <input type="checkbox"
                          checked={form.categories.includes(c.slug)}
                          onChange={() => toggleCat(c.slug)}/>
                        <span>
                          {c.name}
                          <small>{formatNum(c.count)} ürün</small>
                        </span>
                      </label>
                    ))}
                  </div>
                </div>

                <div className="field">
                  <label className="field__lbl" htmlFor="pc">Yaklaşık ürün sayınız</label>
                  <select id="pc" className="select"
                    value={form.productsCount} onChange={(e) => setField('productsCount', e.target.value)}>
                    <option value="">Seçin</option>
                    <option value="lt100">100'den az</option>
                    <option value="100-500">100-500</option>
                    <option value="500-2000">500-2.000</option>
                    <option value="gt2000">2.000+</option>
                  </select>
                </div>

                <div style={{ display: 'flex', gap: 8 }}>
                  <button type="button" className="btn btn--ghost btn--lg" onClick={back}>Geri</button>
                  <button type="submit" className="btn btn--primary btn--lg btn--block">
                    Devam et <Icon name="arrow-right" size={14}/>
                  </button>
                </div>
              </form>
            )}

            {step === 3 && (
              <form onSubmit={submit}>
                <h2>Veri kaynağı</h2>
                <p>Stok ve fiyat verisini bize nasıl ulaştırırsınız?</p>

                <div className="field">
                  <div className="tile-pick" style={{ gridTemplateColumns: '1fr 1fr' }}>
                    {[
                      { v: 'feed', t: 'CSV / XML feed', d: 'Saatlik veya günlük indirilebilen URL' },
                      { v: 'api', t: 'API endpoint', d: 'Doğrudan REST entegrasyonu — partner tier' },
                      { v: 'scrape', t: 'Site izniyle tarama', d: 'Robots.txt kuralları ile' },
                      { v: 'manual', t: 'Henüz emin değilim', d: 'Birlikte bulalım — ekibimiz yardımcı olur' },
                    ].map(o => (
                      <label key={o.v} className={form.feedType === o.v ? 'on' : ''}>
                        <input type="radio" name="feedType"
                          checked={form.feedType === o.v}
                          onChange={() => setField('feedType', o.v)}/>
                        <span>
                          <strong style={{ fontWeight: 600 }}>{o.t}</strong>
                          <small>{o.d}</small>
                        </span>
                      </label>
                    ))}
                  </div>
                </div>

                <div className="field">
                  <label className="field__lbl" htmlFor="notes">Eklemek istediğiniz not (opsiyonel)</label>
                  <textarea id="notes" className="textarea" rows={3}
                    placeholder="Örn: Yeni dönem stok rotasyonu, özel kargo politikaları..."
                    value={form.notes} onChange={(e) => setField('notes', e.target.value)}/>
                </div>

                <p style={{ fontSize: 11, color: 'var(--km-ink-400)', marginBottom: 16, lineHeight: 1.5 }}>
                  Devam ederek <a href="#/" style={{ color: 'var(--km-deep)' }}>Satıcı şartları</a> ve <a href="#/" style={{ color: 'var(--km-deep)' }}>KVKK aydınlatma metni</a>'ni okuduğunuzu onaylarsınız.
                </p>

                <div style={{ display: 'flex', gap: 8 }}>
                  <button type="button" className="btn btn--ghost btn--lg" onClick={back}>Geri</button>
                  <button type="submit" className="btn btn--accent btn--lg btn--block">
                    Başvuruyu gönder <Icon name="check" size={14} stroke={2.4}/>
                  </button>
                </div>
              </form>
            )}

            {step === total && (
              <div className="success-box">
                <div className="success-box__icon">
                  <Icon name="check" size={32} stroke={2.4}/>
                </div>
                <h2 style={{ fontSize: 22 }}>Başvurunuz alındı</h2>
                <p style={{ marginTop: 4, color: 'var(--km-ink-500)' }}>
                  Referans no <strong className="mono" style={{ color: 'var(--km-ink-900)' }}>APP-{Math.random().toString(36).slice(2, 8).toUpperCase()}</strong>
                </p>
                <p style={{ marginTop: 16, color: 'var(--km-ink-600)', maxWidth: 360, margin: '16px auto 0' }}>
                  Ortalama <strong>2 iş günü</strong> içinde <strong>{form.contactEmail || 'e-postanıza'}</strong> dönüş yaparız.
                  Onaylandığında size feed entegrasyon belgesi ve test ortamı bağlantısı gönderilir.
                </p>
                <div style={{ display: 'flex', gap: 8, marginTop: 24, justifyContent: 'center' }}>
                  <a href="#/" className="btn btn--ghost btn--lg">Anasayfa</a>
                  <a href="#/nasil-calisir" className="btn btn--primary btn--lg">Nasıl çalışır?</a>
                </div>
              </div>
            )}
          </div>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { SignupPage });