// SONARA — Profilo Producer
// Nico Vega · @nicovega · Milano · Trap/Hip-hop · Beat dark + mix/master
const PpIcons = window.SonaraIcons;

const PRODUCER = {
  name: "Nico Vega",
  handle: "@nicovega",
  initials: "NV",
  verified: true,
  topRated: true,
  active: true, // badge "Risponde rapidamente"
  location: "Milano, IT",
  joined: "Gennaio 2023",
  followers: 2841,
  responseTime: "<6h",
  rating: 4.8,
  ratingCount: 47,
  completed: 47,
  bio: "Producer trap/hip-hop da Milano. Beat dark, 808 pesanti, melodie cinematiche. Mix & master per chi vuole un suono pulito e moderno. Ho lavorato con artisti emergenti della scena drill italiana — adesso prendo nuovi progetti su Sonara.",
  genres: ["Trap", "Drill", "Hip-hop", "R&B"],
  daw: "FL Studio + Pro Tools",
  experience: "8 anni",
  studio: "Home studio Milano",
  availability: "open", // "open" | "vacation" | "featuring_only"
  portfolio: [
    { id: "p1", title: "Vega Type Beat — \"Notturno\"", role: "Beat originale · Producer", duration: "3:12", grad: "g3", plays: "8.2k" },
    { id: "p2", title: "RAZZA — Asfalto (Mix & Master)", role: "Mix · Master · 2024", duration: "2:48", grad: "g4", plays: "12.4k" },
    { id: "p3", title: "Yoshi — Quartiere (Co-prod + Mix)", role: "Co-production · Mix", duration: "3:31", grad: "g1", plays: "24.1k" },
    { id: "p4", title: "Drill Type Beat — \"Lupo\"", role: "Beat originale · Producer", duration: "2:55", grad: "g5", plays: "5.8k" },
    { id: "p5", title: "Sara D. — Senza Te (Vocal prod)", role: "Vocal production · Mix", duration: "3:04", grad: "g6", plays: "3.2k" },
  ],
  services: [
    { id: "s1", title: "Mix professionale trap/hip-hop", type: "Mix stereo", price: 120, delivery: "3 gg", orders: 24, rating: 4.9, grad: "g3" },
    { id: "s2", title: "Mix + Master pacchetto completo", type: "Mix + Master", price: 180, delivery: "4 gg", orders: 18, rating: 4.8, grad: "g4" },
    { id: "s3", title: "Custom production su brief", type: "Custom production", price: 350, delivery: "7 gg", orders: 8, rating: 5.0, grad: "g1" },
    { id: "s4", title: "Vocal production + tuning", type: "Vocal production", price: 90, delivery: "2 gg", orders: 15, rating: 4.7, grad: "g5" },
  ],
  beats: [
    { id: "b1", title: "Notturno", bpm: 142, key: "F# min", price: 45, exclusive: 350, grad: "b1", plays: "2.1k", sold: 3 },
    { id: "b2", title: "Asfalto Bagnato", bpm: 138, key: "G min", price: 50, exclusive: 400, grad: "b2", plays: "1.4k", sold: 1 },
    { id: "b3", title: "Lupo Solitario", bpm: 145, key: "D min", price: 40, exclusive: 300, grad: "b3", plays: "3.2k", sold: 5 },
    { id: "b4", title: "Quartiere Nord", bpm: 140, key: "A min", price: 55, exclusive: 450, grad: "b4", plays: "1.8k", sold: 2 },
    { id: "b5", title: "Settembre", bpm: 132, key: "E min", price: 60, exclusive: 500, grad: "b5", plays: "892", sold: 0 },
    { id: "b6", title: "Cassetta Vuota", bpm: 148, key: "B min", price: 45, exclusive: 380, grad: "b6", plays: "1.1k", sold: 1 },
  ],
  reviews: [
    {
      id: "r1", artist: "RAZZA", artistInit: "RZ", date: "2 settimane fa",
      rating: 5, project: "Mix EP \"Asfalto\"",
      text: "Nico ha capito subito la direzione. Mix pulito, 808 spaziali, master forte ma non schiacciato. Comunicazione 10/10, ha consegnato in anticipo.",
      tags: ["Qualità ★★★", "Comunicazione ★★★", "Puntualità ★★★"],
      response: "Grazie RAZZA, è stato un piacere lavorare al disco. A presto sul prossimo singolo 🔥",
    },
    {
      id: "r2", artist: "Yoshi K.", artistInit: "YK", date: "1 mese fa",
      rating: 5, project: "Co-produzione + Mix \"Quartiere\"",
      text: "Top. Sa quello che fa, dà input creativi senza imporsi. Il pezzo ha girato bene grazie anche al suo lavoro.",
      tags: ["Qualità ★★★", "Creatività ★★★"],
      response: null,
    },
    {
      id: "r3", artist: "Sara D.", artistInit: "SD", date: "1 mese fa",
      rating: 4, project: "Vocal production",
      text: "Lavoro solido sul tuning e sulle armonie. Mi sarebbe piaciuto un round di revisione in più ma il risultato è ottimo. Lo riprenderei.",
      tags: ["Qualità ★★★", "Comunicazione ★★"],
      response: "Grazie Sara! Per la prossima volta ti consiglio il pacchetto con revisioni extra incluse — ne ho aggiunte 2 di default 👍",
    },
    {
      id: "r4", artist: "M. Lentini", artistInit: "ML", date: "2 mesi fa",
      rating: 5, project: "Mix singolo \"Mezzanotte\"",
      text: "Veloce, preciso, mix radio-ready. Lo consiglio.",
      tags: ["Qualità ★★★", "Puntualità ★★★"],
      response: null,
    },
  ],
  socials: {
    instagram: "@nicovegabeats",
    youtube: "nicovegabeats",
    soundcloud: "nicovega",
    spotify: "nicovega-producer",
    beatstars: "nicovega",
  },
};

/* ───── Icons ───── */
const VerifIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 1l2.39 1.73 2.95-.13.13 2.95L19.27 7l-1.73 2.39 1.73 2.39-1.8 2.46-.13 2.95-2.95-.13L12 19l-2.39-1.73-2.95.13-.13-2.95L4.73 12l1.73-2.39L4.73 7l1.8-2.46.13-2.95 2.95.13zM10.5 14.6l5-5-1.1-1.1-3.9 3.9-1.9-1.9-1.1 1.1z"/></svg>;
const PinIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
const CalIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>;
const UsersIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></svg>;
const MsgIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>;
const ShareIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>;
const PlayIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l14 9-14 9V3z"/></svg>;
const PauseIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>;
const HeartIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>;
const DotsIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>;
const EyeIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>;
const EditIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></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 CopyIc = ({ size = 13 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>;
const CheckIc = ({ size = 13 }) => <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 StarIc = ({ size = 12, filled = true }) => <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>;
const ChevronIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>;
const BoltIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4.09 12.97a.5.5 0 0 0 .38.82h6.03l-1.49 7.42a.5.5 0 0 0 .89.37l8.91-10.97A.5.5 0 0 0 18.42 10h-5.92l1.4-7.45A.5.5 0 0 0 13 2z"/></svg>;
const TrophyIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4z"/><path d="M17 4h3v3a3 3 0 0 1-3 3M7 4H4v3a3 3 0 0 0 3 3"/></svg>;

/* ───── Waveform SVG (procedural) ───── */
function Waveform({ seed = 1, played = 0.35, height = 36 }) {
  const N = 64;
  const bars = React.useMemo(() => {
    const out = [];
    let s = seed * 9301;
    for (let i = 0; i < N; i++) {
      s = (s * 9301 + 49297) % 233280;
      const r = s / 233280;
      // envelope: small at edges, fuller mid
      const env = Math.sin((i / N) * Math.PI);
      const h = 0.2 + r * 0.8 * (0.55 + env * 0.55);
      out.push(Math.min(1, h));
    }
    return out;
  }, [seed]);
  return (
    <div className="pp-wave" style={{ height }}>
      {bars.map((h, i) => (
        <span
          key={i}
          className={i / N <= played ? "pp-wave-bar played" : "pp-wave-bar"}
          style={{ height: `${Math.round(h * 100)}%` }}
        />
      ))}
    </div>
  );
}

/* ───── PUBLIC (Anteprima) ───── */
function PublicView() {
  const [playing, setPlaying] = React.useState("p2");

  return (
    <>
      <div className="pf-cover">
        <div className="pf-cover-actions">
          <button className="pf-cover-btn"><ShareIc size={13}/> Condividi</button>
        </div>
        <div className="pf-avatar">{PRODUCER.initials}</div>
        <div className="pf-cover-badges">
          {PRODUCER.topRated && (
            <span className="pf-cover-badge gold"><TrophyIc size={11}/> Top Rated</span>
          )}
          {PRODUCER.active && (
            <span className="pf-cover-badge green"><BoltIc size={11}/> Risponde in {PRODUCER.responseTime}</span>
          )}
        </div>
      </div>

      <div className="pf-hero-info pp-hero">
        <div className="pf-name-row">
          <h1 className="pf-name">{PRODUCER.name}</h1>
          {PRODUCER.verified && <span className="pf-verified-badge"><VerifIc size={11}/> Verificato</span>}
          <span className="pf-availability open">Aperto a ordini</span>
        </div>
        <div className="pf-meta-row">
          <span className="item"><span className="icon"><PinIc size={13}/></span> {PRODUCER.location}</span>
          <span className="item"><span className="icon"><CalIc size={13}/></span> Su Sonara da {PRODUCER.joined}</span>
          <span className="item"><span className="icon"><UsersIc size={13}/></span> <strong>{PRODUCER.followers.toLocaleString("it-IT")}</strong> follower</span>
          <span className="item"><StarIc size={12}/> <strong>{PRODUCER.rating}</strong> <span style={{ opacity: 0.7 }}>({PRODUCER.ratingCount} recensioni)</span></span>
        </div>
        <p className="pf-bio">{PRODUCER.bio}</p>

        <div className="pf-quick-facts">
          <div className="pf-fact">
            <span className="l">DAW</span>
            <span className="v">{PRODUCER.daw}</span>
          </div>
          <div className="pf-fact">
            <span className="l">Esperienza</span>
            <span className="v">{PRODUCER.experience}</span>
          </div>
          <div className="pf-fact">
            <span className="l">Studio</span>
            <span className="v">{PRODUCER.studio}</span>
          </div>
          <div className="pf-fact">
            <span className="l">Ordini completati</span>
            <span className="v">{PRODUCER.completed}</span>
          </div>
        </div>

        <div className="pf-tags">
          {PRODUCER.genres.map(g => <span key={g} className="pf-tag primary">{g}</span>)}
        </div>

        <div className="pf-cta-row">
          <button className="pf-cta primary"><MsgIc size={13}/> Contatta producer</button>
          <button className="pf-cta secondary"><HeartIc size={13}/> Salva</button>
          <button className="pf-cta secondary"><ShareIc size={13}/> Condividi</button>
        </div>
      </div>

      <div className="pf-grid">
        <div className="pf-col">
          {/* PORTFOLIO AUDIO */}
          <section className="pf-panel pp-portfolio">
            <header className="pf-panel-head">
              <div className="pf-panel-title">
                Portfolio audio
                <span className="count">{PRODUCER.portfolio.length} demo</span>
              </div>
              <span style={{ fontSize: 11.5, color: "var(--muted-foreground)" }}>Streaming completo</span>
            </header>
            <div className="pp-portfolio-list">
              {PRODUCER.portfolio.map((t, i) => (
                <div className={`pp-portfolio-item ${playing === t.id ? "playing" : ""}`} key={t.id}>
                  <div className="pp-pp-art">
                    <div className={`grad ${t.grad}`}/>
                    <button className="pp-pp-play" onClick={() => setPlaying(playing === t.id ? null : t.id)}>
                      {playing === t.id ? <PauseIc size={14}/> : <PlayIc size={13}/>}
                    </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>
                    <Waveform seed={i + 3} played={playing === t.id ? 0.42 : 0} height={28}/>
                  </div>
                  <div className="pp-pp-side">
                    <div className="pp-pp-plays"><PlayIc size={10}/> {t.plays}</div>
                    <button className="pf-track-icon-btn"><DotsIc size={14}/></button>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* SERVIZI */}
          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">
                Servizi attivi
                <span className="count">{PRODUCER.services.length}</span>
              </div>
              <a href="Catalog.html" className="pp-link">Vedi tutto <ChevronIc size={12}/></a>
            </header>
            <div className="pp-svc-grid">
              {PRODUCER.services.map(s => (
                <a href="ServizioOwner.html" className="pp-svc" key={s.id}>
                  <div className={`pp-svc-cover ${s.grad}`}>
                    <span className="pp-svc-type">{s.type}</span>
                  </div>
                  <div className="pp-svc-body">
                    <div className="pp-svc-title">{s.title}</div>
                    <div className="pp-svc-meta">
                      <span><StarIc size={10}/> {s.rating}</span>
                      <span className="sep">·</span>
                      <span>{s.orders} ordini</span>
                      <span className="sep">·</span>
                      <span>Consegna {s.delivery}</span>
                    </div>
                    <div className="pp-svc-foot">
                      <span className="pp-svc-from">a partire da</span>
                      <span className="pp-svc-price">€{s.price}</span>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </section>

          {/* CATALOG BEAT */}
          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">
                Catalog beat
                <span className="count">Top 6 · {PRODUCER.beats.length}+</span>
              </div>
              <a href="Catalog.html" className="pp-link">Vedi tutto il catalog <ChevronIc size={12}/></a>
            </header>
            <div className="pp-beat-grid">
              {PRODUCER.beats.map(b => (
                <a href="BeatOwner.html" className="pp-beat" key={b.id}>
                  <div className={`pp-beat-cover ${b.grad}`}>
                    <div className="pp-beat-bars">
                      {Array.from({ length: 12 }).map((_, i) => (
                        <span key={i} style={{ animationDelay: `${i * 80}ms`, height: `${20 + ((i * 17) % 60)}%` }}/>
                      ))}
                    </div>
                    <button className="pp-beat-play"><PlayIc size={12}/></button>
                    {b.sold > 0 && <span className="pp-beat-sold">{b.sold} venduti</span>}
                  </div>
                  <div className="pp-beat-info">
                    <div className="pp-beat-title">{b.title}</div>
                    <div className="pp-beat-meta">
                      <span>{b.bpm} BPM</span>
                      <span className="sep">·</span>
                      <span>{b.key}</span>
                    </div>
                    <div className="pp-beat-prices">
                      <span className="basic">€{b.price}</span>
                      <span className="excl">€{b.exclusive} excl.</span>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </section>

          {/* RECENSIONI */}
          <section className="pf-panel pp-reviews">
            <header className="pf-panel-head">
              <div className="pf-panel-title">
                Recensioni ricevute
                <span className="count">{PRODUCER.ratingCount}</span>
              </div>
              <div className="pp-rating-mini">
                <div className="pp-rating-stars">
                  {[1,2,3,4,5].map(n => (
                    <StarIc key={n} size={12} filled={n <= Math.round(PRODUCER.rating)}/>
                  ))}
                </div>
                <span className="pp-rating-num">{PRODUCER.rating}</span>
                <span className="pp-rating-count">su 5</span>
              </div>
            </header>
            <div className="pp-review-list">
              {PRODUCER.reviews.map(r => (
                <div className="pp-review" key={r.id}>
                  <div className="pp-review-head">
                    <span className="pp-review-av">{r.artistInit}</span>
                    <div className="pp-review-meta">
                      <div className="pp-review-row1">
                        <span className="pp-review-name">{r.artist}</span>
                        <div className="pp-review-stars">
                          {[1,2,3,4,5].map(n => (
                            <StarIc key={n} size={11} filled={n <= r.rating}/>
                          ))}
                        </div>
                      </div>
                      <div className="pp-review-sub">{r.project} <span className="sep">·</span> {r.date}</div>
                    </div>
                  </div>
                  <p className="pp-review-text">{r.text}</p>
                  <div className="pp-review-tags">
                    {r.tags.map(t => <span key={t} className="pp-review-tag">{t}</span>)}
                  </div>
                  {r.response && (
                    <div className="pp-review-response">
                      <div className="pp-review-response-head">
                        <span className="pp-review-response-av">NV</span>
                        <span className="pp-review-response-name">Risposta di {PRODUCER.name}</span>
                      </div>
                      <p className="pp-review-response-text">{r.response}</p>
                    </div>
                  )}
                </div>
              ))}
            </div>
            <button className="pp-review-more">Vedi tutte le {PRODUCER.ratingCount} recensioni</button>
          </section>
        </div>

        <div className="pf-col">
          {/* SIDE: STATS */}
          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Stats producer</div>
              <span style={{ fontSize: 11, color: "var(--muted-foreground)" }}>Ultimi 30 giorni</span>
            </header>
            <div className="pf-stats-grid">
              <div className="pf-stat">
                <div className="pf-stat-row1"><span className="ic"><EyeIc size={12}/></span> Visite profilo</div>
                <div className="pf-stat-v">3.8k</div>
                <div className="pf-stat-d pos">+22% vs prec.</div>
              </div>
              <div className="pf-stat">
                <div className="pf-stat-row1"><span className="ic"><PlayIc size={12}/></span> Ascolti portfolio</div>
                <div className="pf-stat-v">54.2k</div>
                <div className="pf-stat-d pos">+11%</div>
              </div>
              <div className="pf-stat">
                <div className="pf-stat-row1"><span className="ic"><BoltIc size={12}/></span> Response time</div>
                <div className="pf-stat-v">4h 12m</div>
                <div className="pf-stat-d pos">Top 8% IT</div>
              </div>
              <div className="pf-stat">
                <div className="pf-stat-row1"><span className="ic"><TrophyIc size={12}/></span> Ranking trap</div>
                <div className="pf-stat-v">Top 12%</div>
                <div className="pf-stat-d">Italia</div>
              </div>
            </div>
          </section>

          {/* SIDE: BADGE */}
          <section className="pf-panel pp-badges-card">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Badge profilo</div>
            </header>
            <div className="pp-badge-list">
              <div className="pp-badge-row earned">
                <span className="pp-badge-ic verified"><VerifIc size={14}/></span>
                <div className="pp-badge-meta">
                  <div className="t">Verificato</div>
                  <div className="s">Identità + KYC confermati</div>
                </div>
                <span className="pp-badge-status">Attivo</span>
              </div>
              <div className="pp-badge-row earned">
                <span className="pp-badge-ic gold"><TrophyIc size={14}/></span>
                <div className="pp-badge-meta">
                  <div className="t">Top Rated</div>
                  <div className="s">≥30 ordini, ≥4.8 rating, ≥6 mesi</div>
                </div>
                <span className="pp-badge-status">Attivo</span>
              </div>
              <div className="pp-badge-row earned">
                <span className="pp-badge-ic green"><BoltIc size={14}/></span>
                <div className="pp-badge-meta">
                  <div className="t">Risponde rapidamente</div>
                  <div className="s">Media &lt;6h ultimi 30gg</div>
                </div>
                <span className="pp-badge-status">Attivo</span>
              </div>
            </div>
          </section>

          {/* SIDE: SOCIAL */}
          <section className="pf-panel pp-social-card">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Link social</div>
            </header>
            <div className="pp-social-list">
              <a className="pp-social-row" href="#" onClick={(e) => e.preventDefault()}>
                <span className="pp-social-ic ig">IG</span>
                <div className="pp-social-meta">
                  <div className="t">Instagram</div>
                  <div className="s">{PRODUCER.socials.instagram}</div>
                </div>
              </a>
              <a className="pp-social-row" href="#" onClick={(e) => e.preventDefault()}>
                <span className="pp-social-ic yt">YT</span>
                <div className="pp-social-meta">
                  <div className="t">YouTube</div>
                  <div className="s">{PRODUCER.socials.youtube}</div>
                </div>
              </a>
              <a className="pp-social-row" href="#" onClick={(e) => e.preventDefault()}>
                <span className="pp-social-ic sc">SC</span>
                <div className="pp-social-meta">
                  <div className="t">SoundCloud</div>
                  <div className="s">{PRODUCER.socials.soundcloud}</div>
                </div>
              </a>
              <a className="pp-social-row" href="#" onClick={(e) => e.preventDefault()}>
                <span className="pp-social-ic sp">SP</span>
                <div className="pp-social-meta">
                  <div className="t">Spotify</div>
                  <div className="s">{PRODUCER.socials.spotify}</div>
                </div>
              </a>
              <a className="pp-social-row" href="#" onClick={(e) => e.preventDefault()}>
                <span className="pp-social-ic bs">BS</span>
                <div className="pp-social-meta">
                  <div className="t">BeatStars</div>
                  <div className="s">{PRODUCER.socials.beatstars}</div>
                </div>
              </a>
            </div>
          </section>

          {/* SIDE: SHARE */}
          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Condividi profilo</div>
            </header>
            <ShareBlock/>
          </section>
        </div>
      </div>
    </>
  );
}

function ShareBlock() {
  const [copied, setCopied] = React.useState(false);
  const url = `sonara.it/p/${PRODUCER.handle.replace("@", "")}`;
  return (
    <div className="pf-share">
      <div className="pf-share-url">
        <span className="pf-share-url-text">{url}</span>
        <button className={`pf-share-url-copy ${copied ? "copied" : ""}`} onClick={() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }}>
          {copied ? <><CheckIc size={13}/> Copiato</> : <><CopyIc size={13}/> Copia</>}
        </button>
      </div>
      <div className="pf-share-grid">
        <button className="pf-share-btn">WhatsApp</button>
        <button className="pf-share-btn">Instagram</button>
      </div>
      <div className="pf-qr">
        <div className="pf-qr-img"/>
        <div className="pf-qr-label">Scansiona o stampa per locandine</div>
      </div>
    </div>
  );
}

/* ───── EDIT MODE ───── */
function EditView() {
  const [availability, setAvailability] = React.useState(PRODUCER.availability);
  const [coverUrl, setCoverUrl] = React.useState(null);
  const [avatarUrl, setAvatarUrl] = React.useState(null);
  const coverRef = React.useRef(null);
  const avatarRef = React.useRef(null);

  const onCover = (e) => { const f = e.target.files?.[0]; if (f) setCoverUrl(URL.createObjectURL(f)); };
  const onAvatar = (e) => { const f = e.target.files?.[0]; if (f) setAvatarUrl(URL.createObjectURL(f)); };

  return (
    <div className="pf-grid">
      <div className="pf-col">
        {/* MEDIA */}
        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Foto & copertina</div>
          </header>
          <div className="pf-media">
            <div className="pf-media-cover-wrap">
              <div className="pf-media-cover" style={coverUrl ? { backgroundImage: `url(${coverUrl})`, backgroundSize: "cover", backgroundPosition: "center" } : null}/>
              <div className="pf-media-cover-overlay">
                <button className="pf-action-btn primary" onClick={() => coverRef.current?.click()}>
                  <EditIc size={13}/> Cambia copertina
                </button>
                {coverUrl && <button className="pf-action-btn" onClick={() => setCoverUrl(null)}>Rimuovi</button>}
                <input ref={coverRef} type="file" accept="image/*" hidden onChange={onCover}/>
              </div>
              <div className="pf-media-avatar-slot">
                <div className="pf-media-avatar" style={avatarUrl ? { backgroundImage: `url(${avatarUrl})`, backgroundSize: "cover", backgroundPosition: "center" } : null}>
                  {!avatarUrl && PRODUCER.initials}
                </div>
                <button className="pf-media-av-edit" onClick={() => avatarRef.current?.click()} title="Cambia foto profilo">
                  <EditIc size={14}/>
                </button>
                <input ref={avatarRef} type="file" accept="image/*" hidden onChange={onAvatar}/>
              </div>
            </div>
            <div className="pf-media-tips">
              <div className="tip"><strong>Copertina</strong><span>JPG o PNG, almeno 1500 × 500 px. Max 5 MB.</span></div>
              <div className="tip"><strong>Foto profilo</strong><span>Quadrata, almeno 400 × 400 px. Max 2 MB.</span></div>
            </div>
          </div>
        </section>

        {/* INFO */}
        <section className="pf-panel">
          <header className="pf-panel-head"><div className="pf-panel-title">Info profilo</div></header>
          <div className="pf-form">
            <div className="pf-form-row">
              <label className="pf-label">Alias producer <span className="hint">come appare in alto</span></label>
              <input className="pf-input" defaultValue={PRODUCER.name}/>
            </div>
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">Handle</label>
                <input className="pf-input" defaultValue={PRODUCER.handle}/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Città</label>
                <input className="pf-input" defaultValue={PRODUCER.location}/>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">Bio <span className="hint">500 caratteri max</span></label>
              <textarea className="pf-textarea" defaultValue={PRODUCER.bio}/>
            </div>
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">DAW principale</label>
                <input className="pf-input" defaultValue={PRODUCER.daw}/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Anni esperienza</label>
                <input className="pf-input" defaultValue={PRODUCER.experience}/>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">Generi <span className="hint">3 max</span></label>
              <div className="pf-chip-input">
                {PRODUCER.genres.map(g => (
                  <span key={g} className="pf-chip">{g}<button className="x">×</button></span>
                ))}
                <button className="pf-chip-add">+ Aggiungi genere</button>
              </div>
            </div>
          </div>
        </section>

        {/* PORTFOLIO EDIT */}
        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Portfolio audio <span className="count">{PRODUCER.portfolio.length} / 10</span></div>
          </header>
          <div className="pp-portfolio-list edit">
            {PRODUCER.portfolio.map((t, i) => (
              <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={13}/></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>
                  <Waveform seed={i + 3} played={0} height={22}/>
                </div>
                <div className="pp-pp-side">
                  <button className="pf-track-icon-btn" title="Modifica"><EditIc size={13}/></button>
                  <button className="pf-track-icon-btn"><DotsIc size={14}/></button>
                </div>
              </div>
            ))}
          </div>
          {PRODUCER.portfolio.length < 10 && (
            <button className="pf-track-add">
              <PlusIc size={14}/> Carica demo audio ({10 - PRODUCER.portfolio.length} slot disponibili)
            </button>
          )}
        </section>

        {/* SOCIAL EDIT */}
        <section className="pf-panel">
          <header className="pf-panel-head"><div className="pf-panel-title">Link social</div></header>
          <div className="pf-form">
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">Instagram</label>
                <input className="pf-input" defaultValue={PRODUCER.socials.instagram} placeholder="@username"/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">YouTube</label>
                <input className="pf-input" defaultValue={PRODUCER.socials.youtube} placeholder="canale"/>
              </div>
            </div>
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">SoundCloud</label>
                <input className="pf-input" defaultValue={PRODUCER.socials.soundcloud}/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Spotify (artist)</label>
                <input className="pf-input" defaultValue={PRODUCER.socials.spotify}/>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">BeatStars</label>
              <input className="pf-input" defaultValue={PRODUCER.socials.beatstars}/>
            </div>
          </div>
        </section>
      </div>

      <div className="pf-col">
        {/* AVAILABILITY */}
        <section className="pf-panel">
          <header className="pf-panel-head"><div className="pf-panel-title">Disponibilità</div></header>
          <div className="pp-availability-edit">
            {[
              { v: "open", t: "Aperto a ordini", s: "Il catalog e i listing sono visibili. Ricevi nuovi ordini." },
              { v: "featuring_only", t: "Solo featuring", s: "Listing nascosti. Visibile per featuring/collab." },
              { v: "vacation", t: "Vacation mode", s: "Tutto nascosto, ordini in corso continuano. Max 90gg." },
            ].map(opt => (
              <button
                key={opt.v}
                className={`pp-avail-opt ${availability === opt.v ? "active" : ""}`}
                onClick={() => setAvailability(opt.v)}
              >
                <span className={`dot ${opt.v}`}/>
                <div className="meta">
                  <div className="t">{opt.t}</div>
                  <div className="s">{opt.s}</div>
                </div>
                {availability === opt.v && <CheckIc size={14}/>}
              </button>
            ))}
            {availability === "vacation" && (
              <div className="pp-vacation-detail">
                <label className="pf-label">Data ritorno</label>
                <input className="pf-input" type="date" defaultValue="2026-06-15"/>
              </div>
            )}
          </div>
        </section>

        {/* KYC SUMMARY */}
        <section className="pf-panel">
          <header className="pf-panel-head"><div className="pf-panel-title">KYC & dati fiscali</div></header>
          <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "#16a34a", fontWeight: 600, fontSize: 14 }}>
              <VerifIc size={16}/> KYC verificato
            </div>
            <p style={{ margin: 0, fontSize: 13, color: "var(--muted-foreground)", lineHeight: 1.5 }}>
              Identità e P.IVA confermate il 18 febbraio 2024. Ricevi payout automatici ogni lunedì.
            </p>
            <a href="Wallet.html" className="pf-action-btn">Gestisci payout</a>
          </div>
        </section>

        {/* SHARE */}
        <section className="pf-panel">
          <header className="pf-panel-head"><div className="pf-panel-title">Condividi profilo</div></header>
          <ShareBlock/>
        </section>
      </div>
    </div>
  );
}

function ProfiloPage() {
  const [mode, setMode] = React.useState("preview");
  return (
    <main className="page" data-screen-label="Profilo Producer">
      <div className="pf-mode-bar">
        <div className="pf-mode-toggle">
          <button className={`pf-mode-btn ${mode === "preview" ? "active" : ""}`} onClick={() => setMode("preview")}>
            <EyeIc size={13}/> Anteprima
          </button>
          <button className={`pf-mode-btn ${mode === "edit" ? "active" : ""}`} onClick={() => setMode("edit")}>
            <EditIc size={13}/> Modifica
          </button>
        </div>
        <div className="pf-mode-actions">
          {mode === "edit" ? (
            <>
              <button className="pf-action-btn">Annulla</button>
              <button className="pf-action-btn primary"><CheckIc size={13}/> Salva modifiche</button>
            </>
          ) : (
            <>
              <button className="pf-action-btn"><ShareIc size={13}/> Condividi</button>
              <button className="pf-action-btn primary" onClick={() => setMode("edit")}><EditIc size={13}/> Modifica profilo</button>
            </>
          )}
        </div>
      </div>

      {mode === "preview" ? <PublicView/> : <EditView/>}
    </main>
  );
}

window.ProfiloPage = ProfiloPage;
