// MedBridge — New listing creation flow.
// Step 0: Angebotstyp picker (Vertretung / Ausbildungsstelle)
// Step 1: Zeitraum / Rotation
// Step 2: Anforderungen
// Step 3: Vergütung / Stipendium
// Step 4: Review & publish

const { useState: useNS } = React;

function NewListingFlow({ persona, onClose, onPublished }) {
  const canBefugnis = !!persona.hasBefugnis;
  const [step, setStep] = useNS(0);
  const [data, setData] = useNS({
    type: null,            // 'Vertretung' | 'Ausbildung'
    subtype: null,         // 'KPJ-Stelle' | 'Lehrpraxis AM' | 'Lehrpraxis Sonderfach'
    sonderfach: '',
    // Vertretung
    dateFrom: '',
    dateTo: '',
    hours: 'Praxiszeiten',
    rate: '850',
    rateModel: 'Tagessatz',
    // Ausbildung
    rotation: '6 Monate',
    startWindow: 'ab Oktober 2026',
    stipendium: 'gem. ÖÄK',
    // shared
    specialty: persona.specialty || 'Allgemeinmedizin',
    requirements: '',
    notes: '',
  });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const t = data.type === 'Vertretung' ? MB.vertretung : data.type === 'Ausbildung' ? MB.ausbildung : MB.brand;

  const totalSteps = data.type ? 5 : 1;
  const back = () => (step === 0 ? onClose() : setStep(s => s - 1));
  const next = () => setStep(s => s + 1);

  // Validation per step
  const canContinue = (() => {
    if (step === 0) return !!data.type;
    if (step === 1) {
      if (data.type === 'Vertretung') return !!data.dateFrom && !!data.dateTo;
      return !!data.subtype;
    }
    if (step === 2) return true;
    if (step === 3) return data.type === 'Vertretung' ? !!data.rate : true;
    return true;
  })();

  return (
    <div style={{ position: 'absolute', inset: 0, background: MB.surface.canvas, display: 'flex', flexDirection: 'column' }}>
      {/* HEADER */}
      <div style={{ padding: '52px 16px 12px', background: MB.surface.canvas, borderBottom: `1px solid ${MB.line.hair}` }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button onClick={back} style={{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 6, marginLeft: -6, display: 'inline-flex', alignItems: 'center', color: MB.brand[700] }}>
            <Icon name={step === 0 ? 'x' : 'chevron-l'} size={24} />
          </button>
          <div style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 700, color: MB.ink.primary }}>
            {step === 0 ? 'Neues Inserat' : data.type === 'Vertretung' ? 'Neue Vertretung' : 'Neue Ausbildungsstelle'}
          </div>
          <span style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary, fontVariantNumeric: 'tabular-nums', minWidth: 28, textAlign: 'right' }}>
            {data.type ? `${step}/4` : ''}
          </span>
        </div>
        {data.type && (
          <div style={{ marginTop: 12, height: 4, background: MB.surface.canvas2, borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${(step / 4) * 100}%`, background: t[600], transition: 'width 240ms ease-out' }} />
          </div>
        )}
      </div>

      {/* BODY */}
      <div style={{ flex: 1, overflow: 'auto' }}>
        {step === 0 && <StepTypePicker data={data} set={set} canBefugnis={canBefugnis} />}
        {step === 1 && data.type === 'Vertretung' && <StepVertretungDates data={data} set={set} />}
        {step === 1 && data.type === 'Ausbildung' && <StepAusbildungSubtype data={data} set={set} />}
        {step === 2 && <StepRequirements data={data} set={set} />}
        {step === 3 && <StepCompensation data={data} set={set} />}
        {step === 4 && <StepReview data={data} persona={persona} />}
      </div>

      {/* FOOTER */}
      <div style={{ padding: '12px 20px 30px', borderTop: `1px solid ${MB.line.hair}`, background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(12px)' }}>
        {step < 4 ? (
          <Button kind="primary" full size="lg" disabled={!canContinue} tone={data.type ? t : undefined} onClick={next}>
            {step === 0 ? 'Weiter' : 'Weiter'}
          </Button>
        ) : (
          <div style={{ display: 'flex', gap: 8 }}>
            <Button kind="secondary" size="lg" onClick={() => alert('Entwurf gespeichert')}>Entwurf</Button>
            <div style={{ flex: 1 }}>
              <Button kind="primary" full size="lg" tone={t} onClick={() => onPublished(data)}>
                {data.type === 'Vertretung' ? 'Vertretung veröffentlichen' : 'Ausbildungsstelle veröffentlichen'}
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ── Step 0 — Angebotstyp picker ──────────────────────────────
function StepTypePicker({ data, set, canBefugnis }) {
  return (
    <div style={{ padding: '20px 20px 28px' }}>
      <div style={{ fontFamily: MB.font, fontSize: 22, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.3, lineHeight: 1.2 }}>Welcher Inserattyp?</div>
      <div style={{ marginTop: 6, fontFamily: MB.font, fontSize: 14, color: MB.ink.secondary, lineHeight: 1.45 }}>
        Sie können Ihre Praxis tagesweise vertreten lassen oder eine Ausbildungsstelle besetzen.
      </div>

      <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <TypeOption
          selected={data.type === 'Vertretung'}
          onClick={() => set('type', 'Vertretung')}
          color={MB.vertretung}
          icon="stethoscope"
          title="Vertretung"
          desc="Eine andere Ärztin oder ein Arzt deckt Ihre Praxis tageweise oder wochenweise ab."
          examples={['Urlaub', 'Krankenstand', 'Fortbildung']}
        />
        <TypeOption
          selected={data.type === 'Ausbildung'}
          onClick={() => canBefugnis && set('type', 'Ausbildung')}
          color={MB.ausbildung}
          icon="graduation"
          title="Ausbildungsstelle"
          desc={canBefugnis
            ? 'Sie bieten KPJ, Lehrpraxis Allgemeinmedizin oder Lehrpraxis Sonderfach an.'
            : 'Sie benötigen eine Ausbildungsbefugnis, um Ausbildungsstellen auszuschreiben.'}
          examples={['KPJ-Stelle', 'Lehrpraxis AM', 'Lehrpraxis Sonderfach']}
          disabled={!canBefugnis}
        />
      </div>

      {!canBefugnis && (
        <div style={{ marginTop: 16, padding: '12px 14px', background: MB.surface.canvas2, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <Icon name="info" size={18} color={MB.ink.secondary} />
          <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, lineHeight: 1.45 }}>
            Ausbildungsbefugnis im Profil hinterlegen, um Lehrpraxis-Stellen auszuschreiben.
            <span style={{ marginLeft: 4, color: MB.brand[600], fontWeight: 600 }}>Mehr erfahren</span>
          </div>
        </div>
      )}
    </div>
  );
}

function TypeOption({ selected, onClick, color, icon, title, desc, examples, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      textAlign: 'left', cursor: disabled ? 'default' : 'pointer', border: 'none', padding: 0,
      background: 'transparent', opacity: disabled ? 0.5 : 1,
    }}>
      <div style={{
        background: selected ? color[50] : MB.surface.raised,
        border: `2px solid ${selected ? color[600] : MB.line.hair}`,
        borderRadius: 14, padding: 16, display: 'flex', gap: 14, alignItems: 'flex-start',
        transition: 'all 140ms ease-out',
      }}>
        <span style={{
          width: 44, height: 44, borderRadius: 12, background: color[600],
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
        }}>
          <Icon name={icon} size={22} color="#fff" />
        </span>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontFamily: MB.font, fontSize: 17, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.2 }}>{title}</span>
            {selected && <Icon name="check" size={16} color={color[700]} stroke={2.5} />}
          </div>
          <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, lineHeight: 1.45 }}>{desc}</div>
          {examples && (
            <div style={{ marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {examples.map(e => (
                <span key={e} style={{
                  fontFamily: MB.font, fontSize: 11, fontWeight: 600,
                  padding: '3px 8px', borderRadius: 999,
                  background: selected ? color[100] : MB.surface.canvas2,
                  color: selected ? color[700] : MB.ink.tertiary,
                }}>{e}</span>
              ))}
            </div>
          )}
        </div>
      </div>
    </button>
  );
}

// ── Step 1a — Vertretung dates ──────────────────────────────
function StepVertretungDates({ data, set }) {
  return (
    <div style={{ padding: '20px 20px 28px' }}>
      <StepTitle title="Zeitraum" subtitle="Wann soll Ihre Praxis vertreten werden?" />

      <FieldGroup>
        <Field label="Von">
          <DateInput value={data.dateFrom} onChange={(v) => set('dateFrom', v)} placeholder="18.08.2026" />
        </Field>
        <Field label="Bis">
          <DateInput value={data.dateTo} onChange={(v) => set('dateTo', v)} placeholder="29.08.2026" />
        </Field>
      </FieldGroup>

      <div style={{ marginTop: 16, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {[
          { label: 'Diese Woche', from: '18.08.2026', to: '22.08.2026' },
          { label: 'Nächste Woche', from: '25.08.2026', to: '29.08.2026' },
          { label: '2 Wochen', from: '18.08.2026', to: '29.08.2026' },
        ].map(p => (
          <Chip key={p.label} size="md" tone="brand"
            onClick={() => { set('dateFrom', p.from); set('dateTo', p.to); }}
            >{p.label}</Chip>
        ))}
      </div>

      <SectionDivider />

      <Field label="Praxiszeiten">
        <SegmentControl
          value={data.hours}
          options={['Praxiszeiten', 'Halbtags', 'Volltags']}
          onChange={(v) => set('hours', v)}
        />
      </Field>
    </div>
  );
}

// ── Step 1b — Ausbildung subtype ─────────────────────────────
function StepAusbildungSubtype({ data, set }) {
  const subs = [
    { id: 'KPJ-Stelle',           title: 'KPJ-Stelle',           desc: 'Klinisch-Praktisches Jahr · Studierende der Medizin.' },
    { id: 'Lehrpraxis AM',        title: 'Lehrpraxis AM',        desc: 'Ausbildung Allgemeinmedizin · Assistenzärzt:innen.' },
    { id: 'Lehrpraxis Sonderfach', title: 'Lehrpraxis Sonderfach', desc: 'Ausbildung im Sonderfach · z. B. Innere, Kinder, Gyn.' },
  ];
  return (
    <div style={{ padding: '20px 20px 28px' }}>
      <StepTitle title="Subtyp & Zeitraum" subtitle="Welche Ausbildungsart bieten Sie an?" />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {subs.map(s => {
          const sel = data.subtype === s.id;
          return (
            <button key={s.id} onClick={() => set('subtype', s.id)} style={{
              textAlign: 'left', cursor: 'pointer', border: 'none', padding: 0, background: 'transparent',
            }}>
              <div style={{
                background: sel ? MB.ausbildung[50] : MB.surface.raised,
                border: `1.5px solid ${sel ? MB.ausbildung[600] : MB.line.hair}`,
                borderRadius: 12, padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center',
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 999,
                  border: `2px solid ${sel ? MB.ausbildung[600] : MB.line.border}`,
                  background: sel ? MB.ausbildung[600] : 'transparent',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
                }}>
                  {sel && <Icon name="check" size={14} color="#fff" stroke={2.5} />}
                </span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: MB.ink.primary }}>{s.title}</div>
                  <div style={{ marginTop: 2, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, lineHeight: 1.4 }}>{s.desc}</div>
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {data.subtype === 'Lehrpraxis Sonderfach' && (
        <div style={{ marginTop: 16 }}>
          <Field label="Sonderfach">
            <Input placeholder="z. B. Innere Medizin" value={data.sonderfach} onChange={(e) => set('sonderfach', e.target.value)} />
          </Field>
        </div>
      )}

      <SectionDivider />

      <FieldGroup>
        <Field label="Rotation">
          <SegmentControl value={data.rotation} options={['3 Monate', '6 Monate', '12 Monate']} onChange={(v) => set('rotation', v)} />
        </Field>
      </FieldGroup>
      <Field label="Startfenster">
        <Input placeholder="ab Oktober 2026" value={data.startWindow} onChange={(e) => set('startWindow', e.target.value)} />
      </Field>
    </div>
  );
}

// ── Step 2 — Requirements ────────────────────────────────────
function StepRequirements({ data, set }) {
  return (
    <div style={{ padding: '20px 20px 28px' }}>
      <StepTitle title="Anforderungen" subtitle="Wen sollen wir auf Ihr Inserat hinweisen?" />

      <Field label="Fachgebiet">
        <Select value={data.specialty} options={['Allgemeinmedizin', 'Innere Medizin', 'Kinder & Jugendheilkunde', 'Gynäkologie', 'Dermatologie']} onChange={(v) => set('specialty', v)} />
      </Field>

      {data.type === 'Vertretung' && (
        <Field label="Karrierestufe">
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {['Niedergelassen', 'Assistenzarzt AM', 'Wahlarzt', 'Spital'].map(s => (
              <Chip key={s} size="md" tone="neutral">{s}</Chip>
            ))}
          </div>
        </Field>
      )}

      {data.type === 'Ausbildung' && (
        <Field label="Voraussetzungen">
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {['MedUni Wien', 'MedUni Graz', 'MedUni Innsbruck', 'JKU Linz', 'KL Krems'].map(s => (
              <Chip key={s} size="md" tone="neutral">{s}</Chip>
            ))}
          </div>
        </Field>
      )}

      <Field label="Weitere Hinweise (optional)">
        <Textarea placeholder="z. B. EDV-Kenntnisse Innomed NOVA, Erfahrung mit Sono …"
          value={data.notes} onChange={(e) => set('notes', e.target.value)} />
      </Field>
    </div>
  );
}

// ── Step 3 — Compensation ────────────────────────────────────
function StepCompensation({ data, set }) {
  const isV = data.type === 'Vertretung';
  return (
    <div style={{ padding: '20px 20px 28px' }}>
      <StepTitle
        title={isV ? 'Honorar' : 'Stipendium'}
        subtitle={isV ? 'Welche Vergütung bieten Sie pro Tag oder Woche?' : 'ÖÄK-Stipendium oder eigenes Modell?'} />

      {isV ? (
        <>
          <Field label="Modell">
            <SegmentControl value={data.rateModel} options={['Tagessatz', 'Wochensatz', 'Umsatz-Split']} onChange={(v) => set('rateModel', v)} />
          </Field>

          <Field label={data.rateModel === 'Umsatz-Split' ? 'Anteil (%)' : 'Betrag in € (netto)'}>
            <div style={{ position: 'relative' }}>
              <Input
                value={data.rate}
                onChange={(e) => set('rate', e.target.value.replace(/[^0-9]/g, ''))}
                placeholder="850"
                style={{ paddingRight: 60 }}
              />
              <span style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', fontFamily: MB.font, fontSize: 14, color: MB.ink.tertiary, fontWeight: 600 }}>
                {data.rateModel === 'Umsatz-Split' ? '%' : '€ / Tag'}
              </span>
            </div>
          </Field>

          <div style={{ padding: '12px 14px', background: MB.vertretung[50], border: `1px solid ${MB.vertretung[100]}`, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <Icon name="info" size={16} color={MB.vertretung[700]} />
            <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.vertretung[700], lineHeight: 1.45 }}>
              Übliches Honorar für Allgemeinmedizin in Wien: <strong>€780–€920 / Tag</strong>.
            </div>
          </div>

          <SectionDivider />

          <Field label="Stornofrist">
            <SegmentControl value={'7 Tage'} options={['3 Tage', '7 Tage', '14 Tage']} onChange={() => {}} />
          </Field>
        </>
      ) : (
        <>
          <Field label="Modell">
            <SegmentControl value={data.stipendium} options={['gem. ÖÄK', 'Eigenes Modell', 'Kombination']} onChange={(v) => set('stipendium', v)} />
          </Field>

          <div style={{ padding: '12px 14px', background: MB.ausbildung[50], border: `1px solid ${MB.ausbildung[100]}`, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <Icon name="info" size={16} color={MB.ausbildung[700]} />
            <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ausbildung[700], lineHeight: 1.45 }}>
              ÖÄK-Stipendium aktuell <strong>€3.580 / Monat</strong> für Lehrpraxis Allgemeinmedizin.
            </div>
          </div>

          <SectionDivider />

          <Field label="Lehrstruktur">
            <SegmentControl value={'Wöchentlich'} options={['Täglich', 'Wöchentlich', 'Bedarf']} onChange={() => {}} />
          </Field>
          <Field label="Mentor:in">
            <Input value="Dr. Sabine Hofer" onChange={() => {}} />
          </Field>
        </>
      )}
    </div>
  );
}

// ── Step 4 — Review ──────────────────────────────────────────
function StepReview({ data, persona }) {
  const isV = data.type === 'Vertretung';
  const t = isV ? MB.vertretung : MB.ausbildung;
  return (
    <div style={{ padding: '20px 20px 28px' }}>
      <StepTitle title="Überprüfen & veröffentlichen" subtitle="Bitte prüfen Sie die Angaben vor der Veröffentlichung." />

      {/* Card preview */}
      <div style={{ marginBottom: 18, padding: 16, background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: t[600] }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
          <TypePill type={data.type} subtype={data.subtype} size="sm" />
          <Chip size="sm" tone="neutral">{data.specialty}</Chip>
        </div>
        <div style={{ marginTop: 10, fontFamily: MB.font, fontSize: 16, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.15, lineHeight: 1.3 }}>
          {isV
            ? `Vertretung ${data.specialty} · ${persona.city || 'Wien'}`
            : `${data.subtype || 'Ausbildungsstelle'} · ${data.specialty}`}
        </div>
        <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary, display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="pin" size={13} color={MB.ink.tertiary} /> {persona.city || 'Wien'} · {persona.practice || 'Praxis Hofer'}
        </div>
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px dashed ${MB.line.hair}`, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <ReviewKV k={isV ? 'Zeitraum' : 'Rotation'} v={isV ? `${data.dateFrom || '—'} – ${data.dateTo || '—'}` : `${data.rotation}`} />
          <ReviewKV k={isV ? 'Honorar' : 'Stipendium'} v={isV ? `€ ${data.rate || '—'} / Tag` : `${data.stipendium}`} />
        </div>
      </div>

      {/* Summary list */}
      <ReviewSection title="Eckdaten">
        <ReviewRow label="Inserattyp" value={data.type === 'Vertretung' ? 'Vertretung' : data.subtype || 'Ausbildungsstelle'} />
        <ReviewRow label="Fachgebiet" value={data.specialty} />
        {isV ? (
          <>
            <ReviewRow label="Zeitraum" value={`${data.dateFrom || '—'} – ${data.dateTo || '—'}`} />
            <ReviewRow label="Praxiszeiten" value={data.hours} />
          </>
        ) : (
          <>
            <ReviewRow label="Subtyp" value={data.subtype + (data.sonderfach ? ` · ${data.sonderfach}` : '')} />
            <ReviewRow label="Rotation" value={data.rotation} />
            <ReviewRow label="Start" value={data.startWindow} />
          </>
        )}
      </ReviewSection>

      <ReviewSection title="Vergütung">
        {isV ? (
          <>
            <ReviewRow label="Modell" value={data.rateModel} />
            <ReviewRow label="Betrag" value={`€ ${data.rate || '—'} / ${data.rateModel === 'Wochensatz' ? 'Woche' : data.rateModel === 'Umsatz-Split' ? '%' : 'Tag'}`} />
          </>
        ) : (
          <ReviewRow label="Stipendium" value={data.stipendium} />
        )}
      </ReviewSection>

      <div style={{ marginTop: 16, padding: '12px 14px', background: MB.surface.canvas2, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
        <Icon name="shield" size={16} color={MB.ink.secondary} />
        <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.secondary, lineHeight: 1.45 }}>
          Nach dem Veröffentlichen wird Ihr Inserat verifiziert und ist innerhalb von ca. 5 Minuten in der Suche sichtbar.
        </div>
      </div>
    </div>
  );
}

// ── Helpers ──────────────────────────────────────────────────
function StepTitle({ title, subtitle }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ fontFamily: MB.font, fontSize: 22, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.3, lineHeight: 1.2 }}>{title}</div>
      {subtitle && <div style={{ marginTop: 6, fontFamily: MB.font, fontSize: 14, color: MB.ink.secondary, lineHeight: 1.45 }}>{subtitle}</div>}
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <div style={{ fontFamily: MB.font, fontSize: 12, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, marginBottom: 8 }}>{label}</div>
      {children}
    </div>
  );
}

function FieldGroup({ children }) {
  return <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>{children}</div>;
}

function DateInput({ value, onChange, placeholder }) {
  return (
    <Input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      leading={<Icon name="calendar" size={16} color={MB.ink.tertiary} />}
    />
  );
}

function SegmentControl({ value, options, onChange }) {
  return (
    <div style={{ display: 'inline-flex', background: MB.surface.canvas2, borderRadius: 10, padding: 3, width: '100%' }}>
      {options.map(o => {
        const sel = o === value;
        return (
          <button key={o} onClick={() => onChange(o)} style={{
            flex: 1, border: 'none', cursor: 'pointer',
            background: sel ? MB.surface.raised : 'transparent',
            color: sel ? MB.ink.primary : MB.ink.secondary,
            fontFamily: MB.font, fontSize: 13, fontWeight: 600,
            padding: '8px 10px', borderRadius: 8,
            boxShadow: sel ? '0 1px 2px rgba(15,23,42,0.08)' : 'none',
            transition: 'all 120ms ease-out',
          }}>{o}</button>
        );
      })}
    </div>
  );
}

function Select({ value, options, onChange }) {
  return (
    <div style={{ position: 'relative' }}>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        style={{
          appearance: 'none', WebkitAppearance: 'none',
          width: '100%', padding: '12px 38px 12px 14px',
          background: MB.surface.raised, border: `1px solid ${MB.line.border}`,
          borderRadius: 10, fontFamily: MB.font, fontSize: 15, color: MB.ink.primary, fontWeight: 500,
          cursor: 'pointer',
        }}>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
      <span style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}>
        <Icon name="chevron-d" size={16} color={MB.ink.tertiary} />
      </span>
    </div>
  );
}

function Textarea({ value, onChange, placeholder }) {
  return (
    <textarea value={value} onChange={onChange} placeholder={placeholder} rows={3}
      style={{
        width: '100%', padding: '12px 14px',
        background: MB.surface.raised, border: `1px solid ${MB.line.border}`,
        borderRadius: 10, fontFamily: MB.font, fontSize: 15, color: MB.ink.primary, fontWeight: 500,
        resize: 'vertical', minHeight: 80, outline: 'none', boxSizing: 'border-box',
      }} />
  );
}

function SectionDivider() {
  return <div style={{ margin: '20px -20px', height: 8, background: MB.surface.canvas2 }} />;
}

function ReviewSection({ title, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontFamily: MB.font, fontSize: 12, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary, marginBottom: 8 }}>{title}</div>
      <div style={{ background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  );
}

function ReviewRow({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', borderBottom: `1px solid ${MB.line.hair}` }}>
      <span style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.secondary }}>{label}</span>
      <span style={{ fontFamily: MB.font, fontSize: 14, fontWeight: 600, color: MB.ink.primary, textAlign: 'right', maxWidth: '60%', fontVariantNumeric: 'tabular-nums' }}>{value}</span>
    </div>
  );
}

function ReviewKV({ k, v }) {
  return (
    <div>
      <div style={{ fontFamily: MB.font, fontSize: 11, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary }}>{k}</div>
      <div style={{ marginTop: 2, fontFamily: MB.font, fontSize: 14, fontWeight: 600, color: MB.ink.primary, fontVariantNumeric: 'tabular-nums' }}>{v}</div>
    </div>
  );
}

Object.assign(window, { NewListingFlow });