// SONARA — Producer detail views: BeatOwner / ServizioOwner / CaricaBeat / CreaListing
const DvIcons = window.SonaraIcons;

const ChevIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>;
const PlayIc = ({ size = 13 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l14 9-14 9V3z"/></svg>;
const PlusIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14"/></svg>;
const TrashIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>;
const CheckIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>;
const UploadIc = ({ size = 16 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>;

/* ────────────────────────────────────────────────────────── */
/* BEAT OWNER — Edit page                                     */
/* ────────────────────────────────────────────────────────── */
function BeatOwnerPage() {
  const [exclusive, setExclusive] = React.useState(true);
  const [published, setPublished] = React.useState(true);
  const beat = {
    title: "Notturno",
    bpm: 142,
    keyMus: "F# min",
    grad: "b1",
    plays: "2.1k",
    views: "4.2k",
    sold: 3,
    revenue: 458,
    conv: 4.5,
  };
  return (
    <main className="page" data-screen-label="Beat Owner Edit">
      <a href="Catalog.html" className="ow-back"><ChevIc size={14}/> Catalog</a>

      {/* HEADER */}
      <div className="dv-head">
        <div className={`dv-cover ${beat.grad}`}>
          <button className="dv-cover-play"><PlayIc size={18}/></button>
          <div className="dv-cover-bars">
            {Array.from({ length: 14 }).map((_, i) => (
              <span key={i} style={{ animationDelay: `${i * 70}ms`, height: `${20 + ((i * 17) % 60)}%` }}/>
            ))}
          </div>
        </div>
        <div className="dv-head-meta">
          <div className="dv-head-row1">
            <span className={`cat-status ${published ? "ok" : "draft"}`}>{published ? "Pubblicato" : "Nascosto"}</span>
            <span className="ow-id">BEAT-0142</span>
            <span style={{ color: "var(--muted-foreground)", fontSize: 12 }}>Aggiornato 2gg fa</span>
          </div>
          <h1 className="ow-title">{beat.title}</h1>
          <div className="dv-head-meta-row">
            <span>{beat.bpm} BPM</span>
            <span className="sep">·</span>
            <span>{beat.keyMus}</span>
            <span className="sep">·</span>
            <span>Trap</span>
            <span className="sep">·</span>
            <span>Dark · 808 · cinematic</span>
          </div>
          <div className="dv-quick-stats">
            <div><div className="l">Plays</div><div className="v">{beat.plays}</div></div>
            <div><div className="l">Visite</div><div className="v">{beat.views}</div></div>
            <div><div className="l">Conversion</div><div className="v">{beat.conv}%</div></div>
            <div><div className="l">Vendite</div><div className="v">{beat.sold}</div></div>
            <div><div className="l">Revenue</div><div className="v">€{beat.revenue}</div></div>
          </div>
        </div>
        <div className="dv-head-acts">
          <a href="Catalog.html" className="pf-action-btn">Anteprima pubblica</a>
          <a href="Catalog.html" className="pf-action-btn primary">Salva modifiche</a>
        </div>
      </div>

      <div className="dv-grid">
        <div className="ow-col">
          {/* AUDIO */}
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Audio</div></header>
            <div style={{ padding: 22 }}>
              <div className="dv-audio-row">
                <div className="dv-audio-file">
                  <div className="ow-file-ic audio"><PlayIc size={12}/></div>
                  <div>
                    <div className="ow-file-name">Notturno_v2_final.wav</div>
                    <div className="ow-file-sub">38 MB · WAV 44.1kHz · 16-bit · 3:12</div>
                  </div>
                </div>
                <button className="ord-btn">Sostituisci file</button>
              </div>
              <div className="dv-tag-note">
                <span className="cat-status ok"><CheckIc size={11}/> Watermark</span>
                <span style={{ fontSize: 12.5, color: "var(--muted-foreground)" }}>
                  Voice tag "Sonara" inserito ogni 15s sull'anteprima pubblica. Sparisce per il compratore.
                </span>
              </div>
            </div>
          </section>

          {/* METADATA */}
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Metadata</div></header>
            <div className="pf-form">
              <div className="pf-form-row">
                <label className="pf-label">Titolo</label>
                <input className="pf-input" defaultValue={beat.title}/>
              </div>
              <div className="pf-form-row two">
                <div className="pf-form-row">
                  <label className="pf-label">BPM <span className="hint">auto-rilevato</span></label>
                  <input className="pf-input" defaultValue={beat.bpm}/>
                </div>
                <div className="pf-form-row">
                  <label className="pf-label">Key</label>
                  <input className="pf-input" defaultValue={beat.keyMus}/>
                </div>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Generi <span className="hint">1-3 max</span></label>
                <div className="pf-chip-input">
                  <span className="pf-chip">Trap<button className="x">×</button></span>
                  <button className="pf-chip-add">+ Aggiungi</button>
                </div>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Mood / tag <span className="hint">5 max</span></label>
                <div className="pf-chip-input">
                  <span className="pf-chip">Dark<button className="x">×</button></span>
                  <span className="pf-chip">808<button className="x">×</button></span>
                  <span className="pf-chip">Cinematic<button className="x">×</button></span>
                  <button className="pf-chip-add">+ Aggiungi</button>
                </div>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Descrizione <span className="hint">500 char max</span></label>
                <textarea className="pf-textarea" defaultValue="Beat dark notturno con 808 pesanti e melodie cinematiche. Ispirato a Travis Scott — After Hours. BPM 142, scala F# minore, perfetto per trap melodico/dark trap."/>
              </div>
            </div>
          </section>

          {/* LICENZE */}
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Licenze & prezzi</div></header>
            <div className="dv-licenses">
              <div className="dv-license">
                <div className="dv-license-head">
                  <div className="dv-license-title">
                    Non-esclusiva
                    <span className="ord-status ok"><CheckIc size={11}/> Attiva</span>
                  </div>
                  <button className="pf-switch on"/>
                </div>
                <div className="dv-license-body">
                  <div className="pf-form-row">
                    <label className="pf-label">Prezzo (≥€5)</label>
                    <input className="pf-input dv-price" defaultValue="45"/>
                  </div>
                  <div className="dv-license-inc">
                    <label><input type="checkbox" defaultChecked/> MP3 320kbps</label>
                    <label><input type="checkbox" defaultChecked/> WAV</label>
                    <label><input type="checkbox"/> Stems · <span style={{ color: "var(--muted-foreground)" }}>+€30</span></label>
                  </div>
                </div>
              </div>

              <div className="dv-license">
                <div className="dv-license-head">
                  <div className="dv-license-title">
                    Esclusiva
                    {exclusive && <span className="ord-status warn">Attiva · alta priorità</span>}
                  </div>
                  <button className={`pf-switch ${exclusive ? "on" : ""}`} onClick={() => setExclusive(!exclusive)}/>
                </div>
                {exclusive && (
                  <div className="dv-license-body">
                    <div className="pf-form-row">
                      <label className="pf-label">Prezzo (≥€50)</label>
                      <input className="pf-input dv-price" defaultValue="350"/>
                    </div>
                    <div className="dv-license-note">
                      <strong>Cosa succede alla vendita esclusiva:</strong> il beat viene rimosso dal catalog entro 24h.
                      Hai 48h per confermare la cessione. Le licenze non-esclusive già vendute restano valide.
                      Include sempre WAV + stems.
                    </div>
                  </div>
                )}
              </div>
            </div>
          </section>
        </div>

        <div className="ow-col">
          {/* STATUS */}
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Visibilità</div></header>
            <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14 }}>
              <div className="pf-privacy" style={{ padding: 0 }}>
                <div className="meta">
                  <div className="t">Pubblicato sul catalog</div>
                  <div className="s">Visibile a tutti gli artisti su Sonara. Acquistabile immediatamente.</div>
                </div>
                <button className={`pf-switch ${published ? "on" : ""}`} onClick={() => setPublished(!published)}/>
              </div>
              <button className="ord-btn" style={{ width: "100%" }}>Salva come bozza</button>
              <button className="ord-btn" style={{ width: "100%", color: "#ef4444", borderColor: "rgba(239,68,68,0.30)" }}>
                <TrashIc size={12}/> Elimina beat
              </button>
            </div>
          </section>

          {/* COVER */}
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Cover</div></header>
            <div style={{ padding: 22 }}>
              <div className={`dv-cover-sm ${beat.grad}`}/>
              <button className="ord-btn" style={{ width: "100%", marginTop: 12 }}>
                <UploadIc size={13}/> Carica cover custom
              </button>
              <p style={{ margin: "10px 0 0", fontSize: 11.5, color: "var(--muted-foreground)", lineHeight: 1.5 }}>
                Opzionale. Quadrata, almeno 1000×1000px. Se vuota usiamo un gradient brand automatico.
              </p>
            </div>
          </section>

          {/* SALES MINI */}
          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Vendite recenti <span className="count">3</span></div>
              <a href="Ordini.html" className="pp-link">Tutte →</a>
            </header>
            <div className="dv-sales-mini">
              {[
                { who: "RAZZA", init: "RZ", date: "Oggi", net: 39.6 },
                { who: "Yoshi K.", init: "YK", date: "Ieri", net: 39.6 },
                { who: "Marco T.", init: "MT", date: "3gg fa", net: 39.6 },
              ].map((s, i) => (
                <div className="dv-sale" key={i}>
                  <span className="off-av sm">{s.init}</span>
                  <div>
                    <div className="dv-sale-who">{s.who}</div>
                    <div className="dv-sale-date">{s.date}</div>
                  </div>
                  <span className="dv-sale-net">+€{s.net.toFixed(2)}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>
    </main>
  );
}

/* ────────────────────────────────────────────────────────── */
/* SERVIZIO OWNER — Edit page                                  */
/* ────────────────────────────────────────────────────────── */
function ServizioOwnerPage() {
  const [addons, setAddons] = React.useState([
    { name: "Revisione extra", price: 20, desc: "1 round in più oltre le 2 incluse" },
    { name: "Consegna in 24h", price: 50, desc: "Priorità + delivery rush" },
    { name: "Master Atmos", price: 100, desc: "Master surround per piattaforme spatial" },
  ]);

  return (
    <main className="page" data-screen-label="Servizio Owner Edit">
      <a href="Catalog.html" className="ow-back"><ChevIc size={14}/> Catalog</a>

      <div className="dv-head">
        <div className="dv-cover g3"/>
        <div className="dv-head-meta">
          <div className="dv-head-row1">
            <span className="cat-status ok">Pubblicato</span>
            <span className="ow-id">SVC-024</span>
            <span style={{ color: "var(--muted-foreground)", fontSize: 12 }}>Aggiornato 1 sett. fa</span>
          </div>
          <h1 className="ow-title">Mix professionale trap/hip-hop</h1>
          <div className="dv-head-meta-row">
            <span>Mix stereo</span>
            <span className="sep">·</span>
            <span>Consegna 3 gg</span>
            <span className="sep">·</span>
            <span>2 revisioni incluse</span>
          </div>
          <div className="dv-quick-stats">
            <div><div className="l">Visite</div><div className="v">1.840</div></div>
            <div><div className="l">Conv.</div><div className="v">4.2%</div></div>
            <div><div className="l">Ordini</div><div className="v">24</div></div>
            <div><div className="l">Rating</div><div className="v">4.9 ★</div></div>
            <div><div className="l">Revenue lifetime</div><div className="v">€2.640</div></div>
          </div>
        </div>
        <div className="dv-head-acts">
          <a href="Catalog.html" className="pf-action-btn">Anteprima pubblica</a>
          <a href="Catalog.html" className="pf-action-btn primary">Salva modifiche</a>
        </div>
      </div>

      <div className="dv-grid">
        <div className="ow-col">
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Listing</div></header>
            <div className="pf-form">
              <div className="pf-form-row">
                <label className="pf-label">Titolo</label>
                <input className="pf-input" defaultValue="Mix professionale trap/hip-hop"/>
              </div>
              <div className="pf-form-row two">
                <div className="pf-form-row">
                  <label className="pf-label">Tipo servizio</label>
                  <input className="pf-input" defaultValue="Mix stereo"/>
                </div>
                <div className="pf-form-row">
                  <label className="pf-label">Prezzo base (≥€5)</label>
                  <input className="pf-input" defaultValue="120"/>
                </div>
              </div>
              <div className="pf-form-row two">
                <div className="pf-form-row">
                  <label className="pf-label">Tempi consegna (giorni)</label>
                  <input className="pf-input" defaultValue="3"/>
                </div>
                <div className="pf-form-row">
                  <label className="pf-label">Revisioni incluse</label>
                  <input className="pf-input" defaultValue="2"/>
                </div>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Descrizione <span className="hint">markdown light · 100-2000 char</span></label>
                <textarea className="pf-textarea" rows="5" defaultValue={`Mix radio-ready per trap/hip-hop italiano. 808 puliti, voce in primo piano, processo dinamico.\n\nIncluso:\n- Mix stereo bilanciato\n- Bouncing master-ready\n- 2 round di revisione\n- Consegna in WAV 24-bit\n\nReferenze: Travis Scott "After Hours", Sfera Ebbasta "Famoso".`}/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Generi adatti</label>
                <div className="pf-chip-input">
                  <span className="pf-chip">Trap<button className="x">×</button></span>
                  <span className="pf-chip">Hip-hop<button className="x">×</button></span>
                  <span className="pf-chip">Drill<button className="x">×</button></span>
                  <button className="pf-chip-add">+ Aggiungi</button>
                </div>
              </div>
            </div>
          </section>

          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Add-on opzionali <span className="count">{addons.length}</span></div>
            </header>
            <div className="dv-addons">
              {addons.map((a, i) => (
                <div className="dv-addon" key={i}>
                  <div className="dv-addon-fields">
                    <input className="pf-input" defaultValue={a.name} placeholder="Nome add-on"/>
                    <input className="pf-input dv-price" defaultValue={a.price} placeholder="€"/>
                  </div>
                  <input className="pf-input" defaultValue={a.desc} placeholder="Descrizione breve" style={{ marginTop: 8 }}/>
                  <button className="cat-icon-btn" onClick={() => setAddons(addons.filter((_, j) => j !== i))} style={{ position: "absolute", top: 8, right: 8 }}><TrashIc size={13}/></button>
                </div>
              ))}
              <button className="pf-track-add" onClick={() => setAddons([...addons, { name: "", price: 0, desc: "" }])} style={{ margin: "10px 22px" }}>
                <PlusIc size={14}/> Aggiungi add-on
              </button>
            </div>
          </section>

          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Esempi audio (prima/dopo) <span className="count">3 / 3</span></div>
            </header>
            <div className="pp-portfolio-list edit">
              {[
                { id: "ex1", title: "Razza — Asfalto · MIX BY ME", role: "Esempio mix · prima/dopo", duration: "1:42", grad: "g3" },
                { id: "ex2", title: "Yoshi K — Quartiere · MIX BY ME", role: "Esempio mix · prima/dopo", duration: "1:38", grad: "g4" },
                { id: "ex3", title: "Sara D — Senza Te · MIX BY ME", role: "Esempio mix · prima/dopo", duration: "2:01", grad: "g1" },
              ].map(t => (
                <div className="pp-portfolio-item" key={t.id}>
                  <div className="pp-pp-art">
                    <div className={`grad ${t.grad}`}/>
                    <button className="pp-pp-play"><PlayIc size={12}/></button>
                  </div>
                  <div className="pp-pp-body">
                    <div className="pp-pp-row1">
                      <div className="pp-pp-name">{t.title}</div>
                      <div className="pp-pp-duration">{t.duration}</div>
                    </div>
                    <div className="pp-pp-role">{t.role}</div>
                  </div>
                  <div className="pp-pp-side">
                    <button className="cat-icon-btn"><TrashIc size={13}/></button>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>

        <div className="ow-col">
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Stato listing</div></header>
            <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14 }}>
              <div className="pf-privacy" style={{ padding: 0 }}>
                <div className="meta">
                  <div className="t">Pubblicato</div>
                  <div className="s">Visibile in catalog & sul tuo profilo. Acquistabile dagli artisti.</div>
                </div>
                <button className="pf-switch on"/>
              </div>
              <p style={{ margin: 0, fontSize: 11.5, color: "var(--muted-foreground)", lineHeight: 1.5 }}>
                Hai <strong style={{ color: "var(--foreground)" }}>2 ordini in corso</strong> su questo listing. Le modifiche a prezzo/cosa-include si applicano solo ai nuovi ordini.
              </p>
            </div>
          </section>

          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">FAQ (opzionale)</div></header>
            <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                { q: "Mi mandi gli stems prima?", a: "Sì, all'inizio dell'ordine devi caricare gli stems (WAV o ZIP)." },
                { q: "Quanti round di revisione?", a: "2 inclusi. Extra a €20 ciascuno." },
              ].map((f, i) => (
                <div key={i} className="dv-faq">
                  <input className="pf-input" defaultValue={f.q} placeholder="Domanda"/>
                  <textarea className="pf-textarea" rows="2" defaultValue={f.a} placeholder="Risposta"/>
                </div>
              ))}
              <button className="pf-track-add" style={{ margin: 0 }}><PlusIc size={14}/> Aggiungi FAQ</button>
            </div>
          </section>
        </div>
      </div>
    </main>
  );
}

/* ────────────────────────────────────────────────────────── */
/* CARICA BEAT — wizard 3-step                                 */
/* ────────────────────────────────────────────────────────── */
function CaricaBeatPage() {
  const [step, setStep] = React.useState(1);
  const [drag, setDrag] = React.useState(false);
  return (
    <main className="page" data-screen-label="Carica Beat Wizard">
      <a href="Catalog.html" className="ow-back"><ChevIc size={14}/> Catalog</a>

      <div className="dv-wizard-head">
        <h1 className="ow-title">Carica un nuovo beat</h1>
        <p className="dv-wizard-sub">3 step semplici · file → metadata → licenze. Tutto editabile dopo.</p>
      </div>

      <div className="dv-steps">
        {[
          { n: 1, t: "File audio" },
          { n: 2, t: "Metadata" },
          { n: 3, t: "Licenze & prezzi" },
        ].map(s => (
          <div className={`dv-step-pill ${step === s.n ? "active" : ""} ${step > s.n ? "done" : ""}`} key={s.n}>
            <span className="num">{step > s.n ? <CheckIc size={11}/> : s.n}</span>
            <span className="t">{s.t}</span>
          </div>
        ))}
      </div>

      <div className="dv-wizard-body">
        {step === 1 && (
          <>
            <div className={`ow-drop ${drag ? "drag" : ""}`}
              onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
              onDragLeave={() => setDrag(false)}
              onDrop={(e) => { e.preventDefault(); setDrag(false); }}
            >
              <UploadIc size={28}/>
              <div className="ow-drop-t">Trascina il file beat qui o <strong>scegli dal computer</strong></div>
              <div className="ow-drop-s">WAV preferito · MP3/AIFF accettati · max 50 MB</div>
            </div>
            <div className="dv-wizard-info">
              <strong>Cosa succede dopo l'upload:</strong>
              <ul>
                <li>Estraiamo BPM e key automaticamente (potrai correggerli)</li>
                <li>Generiamo la waveform per la preview pubblica</li>
                <li>Aggiungiamo il voice tag "Sonara" ogni 15s sul preview (sparisce per il compratore)</li>
              </ul>
            </div>
          </>
        )}

        {step === 2 && (
          <div className="pf-form" style={{ padding: 0 }}>
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">Titolo <span className="hint">3-60 char</span></label>
                <input className="pf-input" placeholder="es. Notturno"/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Generi (1-3)</label>
                <div className="pf-chip-input"><span className="pf-chip">Trap<button className="x">×</button></span><button className="pf-chip-add">+ Aggiungi</button></div>
              </div>
            </div>
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">BPM <span className="hint">auto-rilevato</span></label>
                <input className="pf-input" defaultValue="142"/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Key</label>
                <input className="pf-input" defaultValue="F# min"/>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">Mood / tag <span className="hint">5 max</span></label>
              <div className="pf-chip-input"><button className="pf-chip-add">+ es. Dark, 808, cinematic…</button></div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">Descrizione <span className="hint">opzionale · 500 char</span></label>
              <textarea className="pf-textarea" placeholder="Cosa rende speciale questo beat? Riferimenti, mood, suggerimenti d'uso..."/>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="dv-licenses">
            <div className="dv-license">
              <div className="dv-license-head">
                <div className="dv-license-title">Non-esclusiva<span className="cat-status ok">Default</span></div>
                <button className="pf-switch on"/>
              </div>
              <div className="dv-license-body">
                <div className="pf-form-row">
                  <label className="pf-label">Prezzo (≥€5)</label>
                  <input className="pf-input dv-price" placeholder="45"/>
                </div>
                <div className="dv-license-inc">
                  <label><input type="checkbox" defaultChecked/> MP3 320kbps</label>
                  <label><input type="checkbox" defaultChecked/> WAV</label>
                  <label><input type="checkbox"/> Stems · <span style={{ color: "var(--muted-foreground)" }}>+€</span><input style={{ width: 60, marginLeft: 6, padding: 2 }}/></label>
                </div>
              </div>
            </div>

            <div className="dv-license">
              <div className="dv-license-head">
                <div className="dv-license-title">Esclusiva<span style={{ color: "var(--muted-foreground)", fontSize: 11 }}>opzionale</span></div>
                <button className="pf-switch"/>
              </div>
            </div>

            <div className="dv-wizard-info">
              <strong>Cosa firmi:</strong>
              <ul>
                <li>Contratto standard Sonara (non negoziabile)</li>
                <li>Fee Sonara 12% sul prezzo lordo</li>
                <li>Auto-payout settimanale o on-demand ≥€20</li>
              </ul>
            </div>
          </div>
        )}
      </div>

      <div className="dv-wizard-nav">
        <button className="ord-btn ghost" disabled={step === 1} onClick={() => setStep(step - 1)}>← Indietro</button>
        <div className="dv-wizard-prog">Step {step} di 3</div>
        {step < 3 ? (
          <button className="ord-btn primary" onClick={() => setStep(step + 1)}>Continua →</button>
        ) : (
          <div style={{ display: "inline-flex", gap: 8 }}>
            <a href="Catalog.html" className="ord-btn">Salva bozza</a>
            <a href="Catalog.html" className="ord-btn primary">Pubblica beat →</a>
          </div>
        )}
      </div>
    </main>
  );
}

/* ────────────────────────────────────────────────────────── */
/* CREA LISTING (servizio) — single page                      */
/* ────────────────────────────────────────────────────────── */
function CreaListingPage() {
  const [type, setType] = React.useState("mix");
  return (
    <main className="page" data-screen-label="Crea Listing Wizard">
      <a href="Catalog.html" className="ow-back"><ChevIc size={14}/> Catalog</a>

      <div className="dv-wizard-head">
        <h1 className="ow-title">Crea un listing servizio</h1>
        <p className="dv-wizard-sub">Mix, master, custom production, vocal prod o altro. Pubblica in 2 minuti.</p>
      </div>

      <div className="dv-grid">
        <div className="ow-col">
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Tipo di servizio</div></header>
            <div className="dv-types">
              {[
                { v: "mix", t: "Mix stereo", price: "≥€80" },
                { v: "master", t: "Mastering", price: "≥€50" },
                { v: "mixmaster", t: "Mix + Master", price: "≥€150" },
                { v: "vocal", t: "Vocal production", price: "≥€60" },
                { v: "custom", t: "Custom production", price: "≥€200" },
                { v: "sound", t: "Sound design", price: "≥€60" },
                { v: "song", t: "Songwriting / topline", price: "≥€100" },
                { v: "other", t: "Altro", price: "freeform" },
              ].map(opt => (
                <button key={opt.v} className={`dv-type ${type === opt.v ? "active" : ""}`} onClick={() => setType(opt.v)}>
                  <span className="t">{opt.t}</span>
                  <span className="s">{opt.price}</span>
                </button>
              ))}
            </div>
          </section>

          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Dettagli</div></header>
            <div className="pf-form">
              <div className="pf-form-row">
                <label className="pf-label">Titolo del listing</label>
                <input className="pf-input" placeholder="es. Mix professionale trap/hip-hop"/>
              </div>
              <div className="pf-form-row two">
                <div className="pf-form-row">
                  <label className="pf-label">Prezzo base</label>
                  <input className="pf-input" placeholder="€"/>
                </div>
                <div className="pf-form-row">
                  <label className="pf-label">Tempi consegna (gg)</label>
                  <input className="pf-input" placeholder="3"/>
                </div>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Descrizione</label>
                <textarea className="pf-textarea" rows="5" placeholder="Cosa includi? Riferimenti, processo, file consegnati..."/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Cosa include (checklist)</label>
                <div className="dv-license-inc">
                  <label><input type="checkbox" defaultChecked/> Mix stereo bouncato</label>
                  <label><input type="checkbox" defaultChecked/> Master radio-ready</label>
                  <label><input type="checkbox" defaultChecked/> Consegna WAV 24-bit</label>
                  <label><input type="checkbox"/> Stems consegnati al cliente</label>
                  <label><input type="checkbox"/> Atmos / spatial master</label>
                </div>
              </div>
              <div className="pf-form-row two">
                <div className="pf-form-row">
                  <label className="pf-label">Revisioni incluse</label>
                  <input className="pf-input" placeholder="2"/>
                </div>
                <div className="pf-form-row">
                  <label className="pf-label">Generi adatti</label>
                  <div className="pf-chip-input"><button className="pf-chip-add">+ Aggiungi</button></div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <div className="ow-col">
          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Add-on (opzionali)</div></header>
            <div style={{ padding: 18 }}>
              <p style={{ fontSize: 12.5, color: "var(--muted-foreground)", margin: "0 0 12px", lineHeight: 1.5 }}>
                Gli add-on sono extra che il cliente può scegliere in checkout. Usali per upselling (revisioni extra, consegna rush, formati premium).
              </p>
              <button className="pf-track-add" style={{ margin: 0 }}><PlusIc size={14}/> Aggiungi add-on</button>
            </div>
          </section>

          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Esempi audio</div></header>
            <div style={{ padding: 18 }}>
              <button className="pf-track-add" style={{ margin: 0 }}><PlusIc size={14}/> Carica esempio (max 3 · 8MB)</button>
              <p style={{ fontSize: 11.5, color: "var(--muted-foreground)", margin: "10px 0 0", lineHeight: 1.5 }}>
                Mostra prima/dopo, mix firmati, prodotti finali. È quello che convince l'artista.
              </p>
            </div>
          </section>

          <section className="pf-panel">
            <header className="pf-panel-head"><div className="pf-panel-title">Anteprima</div></header>
            <div style={{ padding: 18, fontSize: 12.5, color: "var(--muted-foreground)", lineHeight: 1.5 }}>
              Stato finale: <strong style={{ color: "var(--foreground)" }}>Pubblico</strong>. Apparirà sul tuo profilo, nel catalog e nel feed di servizi. Modificabile in qualsiasi momento.
            </div>
          </section>
        </div>
      </div>

      <div className="dv-wizard-nav">
        <a href="Catalog.html" className="ord-btn ghost">Annulla</a>
        <div className="dv-wizard-prog"></div>
        <div style={{ display: "inline-flex", gap: 8 }}>
          <a href="Catalog.html" className="ord-btn">Salva bozza</a>
          <a href="Catalog.html" className="ord-btn primary">Pubblica listing →</a>
        </div>
      </div>
    </main>
  );
}

window.BeatOwnerPage = BeatOwnerPage;
window.ServizioOwnerPage = ServizioOwnerPage;
window.CaricaBeatPage = CaricaBeatPage;
window.CreaListingPage = CreaListingPage;