Invia un'offerta

Prezzo proposto (€) setPrice(Number(e.target.value))}/>

Budget artista: {r.budget.fixed ? `€${r.budget.min}` : `€${r.budget.min}–€${r.budget.max}`} · Netto a te: €{(price * 0.88).toFixed(0)} (12% fee Sonara)

Consegna (giorni) setDays(Number(e.target.value))}/>

Artista chiede entro {r.deadlineDays}gg

Messaggio per l'artista {msg.length}/500

setMsg(e.target.value.slice(0, 500))}
        />
      </div>
      <div className="opp-send-attach">
        <button className="ord-btn ghost"><PaperclipIc size={12}/> Allega snippet beat (max 25 MB)</button>
        <span className="opp-send-hint">Opzionale ma alza le chance di accettazione</span>
      </div>
      <div className="opp-send-foot">
        <div className="opp-send-warn">
          <PaperIc size={12}/>
          Contratto standard Sonara · escrow attivo
        </div>
        <div className="opp-send-acts">
          <button className="ord-btn">Salva bozza</button>
          <button className="ord-btn primary" onClick={() => setSent(true)} disabled={msg.length < 50}>
            Invia offerta →
          </button>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────── */
/* SAVE SEARCH MODAL                                        */
/* ──────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────── */
/* SORT MENU (custom dropdown)                              */
/* ──────────────────────────────────────────────────────── */

const SORT_OPTIONS = [
  { v: "match",    l: "Match score" },
  { v: "recent",   l: "Più recenti" },
  { v: "budget",   l: "Budget alto" },
  { v: "offers",   l: "Meno offerte" },
  { v: "deadline", l: "Deadline lontana" },
];

/* ──────────────────────────────────────────────────────── */
/* PAGE                                                     */
/* ──────────────────────────────────────────────────────── */

const filtered = applyFilters(REQS, filters, scope);
  const sorted = sortReqs(filtered, sort);
  const current = REQS.find(r => r.id === selected);
  const forYouCount = applyFilters(REQS, filters, "forYou").length;
  const allCount = applyFilters(REQS, filters, "all").length;

const onClear = () => setFilters(DEFAULT_FILTERS);

return (
    <main className="page opp-page-wide" data-screen-label="Opportunità Producer">
      <div className="cat-head">
        <div className="cat-head-l">
          <h1 className="cat-h1">Opportunità</h1>
          <div className="cat-head-stats">
            <span><strong>2</strong> offerte attive · 13 slot disponibili</span>
            <span className="sep">·</span>
            <span style={{ color: "var(--muted-foreground)" }}>10.247 richieste open sulla piattaforma</span>
          </div>
        </div>
        <button className="opp-mobile-filters" onClick={() => setFiltersMobileOpen(true)}>
          Filtri
        </button>
      </div>

<div className="opp-scope-tabs">
        <button className={`opp-scope-tab ${scope === "forYou" ? "active" : ""}`} onClick={() => setScope("forYou")}>
          <BoltIc size={11}/>
          Per te
          <span className="c">{forYouCount}</span>
        </button>
        <button className={`opp-scope-tab ${scope === "all" ? "active" : ""}`} onClick={() => setScope("all")}>
          Tutte
          <span className="c">{allCount}</span>
        </button>
        <span className="opp-scope-info" title={scope === "forYou"
          ? "Algoritmo di ranking: match coi tuoi generi · boost geografico Milano 10% · match score"
          : "Tutte le richieste della piattaforma · senza filtri di genere automatici"}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
        </span>
      </div>

<div className="opp-rail-toolbar">
        <button className={`rail-toggle-btn ${railOpen ? "open" : "closed"}`} onClick={() => setRailOpen(!railOpen)} aria-pressed={railOpen}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="4" y1="6" x2="20" y2="6"/>
            <line x1="6" y1="12" x2="18" y2="12"/>
            <line x1="9" y1="18" x2="15" y2="18"/>
          </svg>
          <span>{railOpen ? "Nascondi filtri" : "Mostra filtri"}</span>
        </button>
      </div>

<div className={`opp-layout-v2 ${filtersMobileOpen ? "filters-open" : ""}`} data-rail={railOpen ? "open" : "closed"}>
        <FilterSidebar
          filters={filters}
          setFilters={setFilters}
          count={sorted.length}
          onClear={onClear}
          onSave={() => setSaveOpen(true)}
          scope={scope}
          location={location}
          onLocationConsent={requestLocation}
        />

<div className="opp-feed-col">
          <div className="opp-feed-bar">
            <div className="cat-search" style={{ flex: "0 1 320px" }}>
              <SearchIc size={14}/>
              <input
                value={filters.search}
                onChange={(e) => setFilters(f => ({ ...f, search: e.target.value }))}
                placeholder="Cerca per titolo o keyword…"
              />
            </div>
            <div className="opp-feed-bar-spacer" style={{ flex: 1 }}/>
            <SortMenu sort={sort} setSort={setSort}/>
          </div>
          <div className="opp-feed-list opp-feed-list-v2">
            {sorted.map(r => (
              <ReqCard key={r.id} r={r} active={r.id === selected} onClick={() => setSelected(r.id)}/>
            ))}
            {sorted.length === 0 && (
              <div className="cat-empty" style={{ padding: "40px 16px" }}>
                <div className="t">Nessuna richiesta corrisponde</div>
                <div className="s">Allenta uno dei filtri o salva la ricerca per essere avvisato quando arriva.</div>
                <button className="pf-action-btn primary" style={{ marginTop: 14, display: "inline-flex" }} onClick={() => setSaveOpen(true)}>
                  <BookmarkIc size={12}/> Salva ricerca & avvisa
                </button>
              </div>
            )}
          </div>
        </div>

{filtersMobileOpen && (
          <div className="fs-backdrop" onClick={() => setFiltersMobileOpen(false)}/>
        )}
      </div>

<SaveSearchModal open={saveOpen} onClose={() => setSaveOpen(false)}/>
    </main>
  );
}

window.OpportunitaPage = OpportunitaPage;

{r.title}