// Producer profile — public page about a beatmaker / producer
// Hero: cover/avatar/name/tags/stats/CTA · Tabs: Catalogo / Servizi / Richieste / Recensioni / About

const PD_Icons = window.SonaraIcons;
const { useState: useStatePD, useMemo: useMemoPD } = React;

function ProducerPage() {
  const prov = {
    name: "Marco Vitale",
    handle: "@marcovitale",
    tagline: "Mix engineer · Trap, R&B, Drill · Roma",
    init: "MV",
    cover: "art-b",
    avatar: "art-b",
    verified: true,
    location: "Roma, IT",
    since: "2023",
    rating: 4.9,
    reviews: 142,
    completedProjects: 87,
    followers: 1247,
    responseTime: "1h",
    online: true,
    bio: "Sound engineer da 9 anni, specializzato in mix e master per trap, R&B e drill. Ho lavorato con 200+ artisti indie italiani in studio analogico (ATC, UAD, ProTools 2024). Su Sonara dal 2023, oltre 87 progetti consegnati con 4.9★ medi. Risposta entro 1h, escrow incluso, 2 revisioni di default. Cerco collaborazioni con artisti che vogliono crescere — non solo \"mixare la traccia\".",
    languages: ["Italiano", "English", "Español"],
    badges: [
      { id: "verified", label: "Verificato", icon: "verified", tone: "blue" },
      { id: "fast", label: "Risposta <1h", icon: "clock", tone: "amber" },
      { id: "top", label: "Top Mix Engineer 2025", icon: "star", tone: "purple" },
      { id: "hundred", label: "100+ progetti", icon: "check", tone: "green" },
    ],
    skills: ["Mix + Master", "Vocal production", "808 design", "Atmos master", "ProTools", "Studio analogico"],
    genres: ["Trap", "R&B", "Drill", "Hip-Hop", "Pop urban"],
    pricing: {
      beatFrom: 35,
      mixFrom: 60,
      collabRange: [200, 1500],
      openTo: ["non-esclusiva", "esclusiva", "request open", "collab", "free verse"],
    },
  };

  const [tab, setTab] = useStatePD("catalogo");

  return (
    <div className="page-prod" data-screen-label="Producer profile">
      <nav className="breadcrumb">
        <a href="Esplora.html">Esplora</a>
        <span className="bc-sep">/</span>
        <a href="Esplora.html">Producer</a>
        <span className="bc-sep">/</span>
        <span className="bc-current">{prov.name}</span>
      </nav>

      {/* Hero */}
      <section className="prod-hero">
        <div className={`prod-cover ${prov.cover}`}>
          <button className="cover-btn"><PD_Icons.flag size={12}/> Segnala</button>
        </div>
        <div className="prod-hero-body">
          <div className="prod-hero-l">
            <div className={`prod-avatar ${prov.avatar}`}>
              {prov.init}
              {prov.online && <span className="online-pip" title="Online ora"/>}
            </div>
            <div className="prod-id">
              <div className="prod-name-row">
                <h1 className="prod-name">{prov.name}</h1>
                {prov.verified && <span className="prod-verified" title="Verificato"><PD_Icons.verified size={16}/></span>}
              </div>
              <div className="prod-handle">{prov.handle} · {prov.tagline}</div>
              <div className="prod-stats">
                <span><PD_Icons.star size={12} filled/> <strong>{prov.rating}</strong> · {prov.reviews} recensioni</span>
                <span className="dot"/>
                <span><PD_Icons.check size={11}/> <strong>{prov.completedProjects}</strong> progetti</span>
                <span className="dot"/>
                <span><PD_Icons.users size={11}/> <strong>{prov.followers.toLocaleString("it-IT")}</strong> follower</span>
                <span className="dot"/>
                <span><PD_Icons.pin size={11}/> {prov.location}</span>
                <span className="dot"/>
                <span><PD_Icons.clock size={11}/> Risposta in {prov.responseTime}</span>
              </div>
            </div>
          </div>
          <div className="prod-hero-r">
            <a href="Messaggi.html" className="btn-primary-lg"><PD_Icons.message size={14}/> Contatta</a>
            <button className="btn-secondary-lg"><PD_Icons.heart size={13}/> Segui</button>
            <button className="btn-icon-lg" title="Condividi"><PD_Icons.share size={14}/></button>
          </div>
        </div>
        <div className="prod-badges">
          {prov.badges.map(b => (
            <span key={b.id} className={`prod-badge tone-${b.tone}`}>
              {b.icon === "verified" && <PD_Icons.verified size={11}/>}
              {b.icon === "clock" && <PD_Icons.clock size={11}/>}
              {b.icon === "star" && <PD_Icons.star size={11} filled/>}
              {b.icon === "check" && <PD_Icons.check size={11}/>}
              <span>{b.label}</span>
            </span>
          ))}
        </div>
      </section>

      <div className="prod-grid">
        {/* LEFT */}
        <div className="prod-left">
          <section className="prod-tabs-card">
            <nav className="prod-tabs">
              {[
                ["catalogo", "Catalogo", 24],
                ["servizi", "Servizi", 4],
                ["richieste", "Open per", 5],
                ["recensioni", "Recensioni", prov.reviews],
                ["about", "About", null],
              ].map(([id, lbl, n]) => (
                <button key={id} className={`prod-tab ${tab === id ? "active" : ""}`} onClick={() => setTab(id)}>
                  {lbl}{n != null && <span className="prod-tab-n">{n}</span>}
                </button>
              ))}
            </nav>
            <div className="prod-tab-body">
              {tab === "catalogo" && <ProdCatalogo/>}
              {tab === "servizi" && <ProdServizi/>}
              {tab === "richieste" && <ProdRichieste prov={prov}/>}
              {tab === "recensioni" && <ProdRecensioni prov={prov}/>}
              {tab === "about" && <ProdAbout prov={prov}/>}
            </div>
          </section>
        </div>

        {/* RIGHT */}
        <aside className="prod-right">
          <div className="prod-side-card">
            <div className="psc-h">A partire da</div>
            <div className="psc-pricing">
              <div className="psc-price-row">
                <span className="k">Beat (non-esc.)</span>
                <span className="v">€{prov.pricing.beatFrom}</span>
              </div>
              <div className="psc-price-row">
                <span className="k">Mix + Master</span>
                <span className="v">€{prov.pricing.mixFrom}</span>
              </div>
              <div className="psc-price-row">
                <span className="k">Collaborazione</span>
                <span className="v">€{prov.pricing.collabRange[0]}–{prov.pricing.collabRange[1]}</span>
              </div>
            </div>
            <div className="psc-divider"/>
            <div className="psc-h">Aperto a</div>
            <ul className="psc-list">
              {prov.pricing.openTo.map(o => (
                <li key={o}><PD_Icons.check size={11}/> {o}</li>
              ))}
            </ul>
            <div className="psc-divider"/>
            <a href="Messaggi.html" className="btn-primary-lg full"><PD_Icons.message size={14}/> Contatta {prov.name.split(" ")[0]}</a>
            <a href="PubblicaRichiesta.html" className="btn-secondary-lg full"><PD_Icons.flag size={13}/> Invia richiesta open</a>
          </div>

          <div className="prod-side-card">
            <div className="psc-h">Risponde in</div>
            <div className="psc-resp">
              <div className="psc-resp-num">{prov.responseTime}</div>
              <div className="psc-resp-sub">media ultimi 30 giorni · online ora</div>
            </div>
            <div className="psc-resp-bars">
              {[
                ["Mat.", 95],
                ["Pom.", 100],
                ["Sera", 80],
                ["Notte", 30],
              ].map(([lbl, p]) => (
                <div key={lbl} className="psc-resp-bar">
                  <span className="lbl">{lbl}</span>
                  <span className="track"><span style={{ width: `${p}%` }}/></span>
                  <span className="pct">{p}%</span>
                </div>
              ))}
            </div>
          </div>

          <div className="prod-side-card">
            <div className="psc-h">Producer simili</div>
            <div className="psc-similar">
              {[
                { n: "Yoshi", h: "@yoshi", art: "art-a", tags: "Trap · Drill", price: 30, init: "Y" },
                { n: "Nina K.", h: "@ninakprod", art: "art-c", tags: "R&B · Pop", price: 45, init: "NK" },
                { n: "DK Beats", h: "@dkbeats", art: "art-d", tags: "Trap · Hip-Hop", price: 35, init: "DK" },
              ].map(p => (
                <a key={p.h} href="Producer.html" className="psc-sim-row">
                  <div className={`psc-sim-av ${p.art}`}>{p.init}</div>
                  <div className="psc-sim-body">
                    <div className="psc-sim-n">{p.n}</div>
                    <div className="psc-sim-t">{p.tags}</div>
                  </div>
                  <div className="psc-sim-p">da €{p.price}</div>
                </a>
              ))}
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ---------- Tabs content ----------
function ProdCatalogo() {
  const beats = [
    { t: "Skyline", g: "Trap", bpm: 101, key: "B min", price: 49, art: "art-b", plays: "4.4k", duration: "2:14", popular: true },
    { t: "Notte Lunga", g: "Drill", bpm: 138, key: "F# min", price: 39, art: "art-c", plays: "2.8k", duration: "2:48" },
    { t: "Fuoco", g: "Trap", bpm: 145, key: "C min", price: 55, art: "art-a", plays: "8.1k", duration: "3:02", popular: true },
    { t: "Mare scuro", g: "R&B", bpm: 92, key: "G min", price: 45, art: "art-d", plays: "1.9k", duration: "3:54" },
    { t: "Codice nero", g: "Drill", bpm: 142, key: "D# min", price: 39, art: "art-b", plays: "3.2k", duration: "3:12" },
    { t: "Rosso fuori", g: "Trap", bpm: 130, key: "A min", price: 35, art: "art-c", plays: "2.1k", duration: "2:42" },
    { t: "Aurora", g: "R&B", bpm: 88, key: "E min", price: 42, art: "art-a", plays: "1.4k", duration: "3:38" },
    { t: "Vento", g: "Trap", bpm: 152, key: "G# min", price: 39, art: "art-d", plays: "956", duration: "2:58" },
  ];
  return (
    <div className="prod-cat">
      <div className="prod-cat-toolbar">
        <div className="pct-l">
          <select className="prod-select"><option>Tutti i generi</option><option>Trap</option><option>Drill</option><option>R&B</option></select>
          <select className="prod-select"><option>Ordina: Più ascoltati</option><option>Più recenti</option><option>Prezzo ↑</option><option>Prezzo ↓</option></select>
        </div>
        <div className="pct-r">
          <button className="btn-ghost-sm">24 beat</button>
        </div>
      </div>
      <div className="prod-beats-grid">
        {beats.map((b, i) => (
          <a key={i} href="Beat.html" className="prod-beat-card">
            <div className={`pbc-art ${b.art}`}>
              <span className="pbc-play"><PD_Icons.play size={20}/></span>
              {b.popular && <span className="pbc-popular">★ Top</span>}
              <span className="pbc-dur">{b.duration}</span>
            </div>
            <div className="pbc-body">
              <div className="pbc-title">{b.t}</div>
              <div className="pbc-meta">
                <span>{b.g}</span>
                <span className="dot"/>
                <span>{b.bpm} BPM</span>
                <span className="dot"/>
                <span>{b.key}</span>
              </div>
              <div className="pbc-foot">
                <span className="pbc-plays"><PD_Icons.play size={9}/> {b.plays}</span>
                <span className="pbc-price">€{b.price}</span>
              </div>
            </div>
          </a>
        ))}
      </div>
      <div className="prod-cat-foot">
        <button className="btn-ghost-sm">Carica altri 16</button>
      </div>
    </div>
  );
}

function ProdServizi() {
  const services = [
    { t: "Mix + Master per singolo · trap moderno", from: 60, delivery: "5gg", deliveries: 87, rating: 4.9, art: "art-b" },
    { t: "Vocal tuning + production · Auto-tune naturale", from: 45, delivery: "3gg", deliveries: 62, rating: 4.9, art: "art-a" },
    { t: "808 design + sub-bass enhancement", from: 35, delivery: "2gg", deliveries: 41, rating: 5.0, art: "art-c" },
    { t: "Atmos master per release ad alto budget", from: 250, delivery: "7gg", deliveries: 12, rating: 5.0, art: "art-d" },
  ];
  return (
    <div className="prod-svc-list">
      {services.map((s, i) => (
        <a key={i} href="Servizio.html" className="prod-svc-row">
          <div className={`psr-art ${s.art}`}/>
          <div className="psr-body">
            <div className="psr-title">{s.t}</div>
            <div className="psr-meta">
              <span><PD_Icons.clock size={11}/> {s.delivery}</span>
              <span className="dot"/>
              <span><PD_Icons.check size={11}/> {s.deliveries} consegnati</span>
              <span className="dot"/>
              <span><PD_Icons.star size={11} filled/> {s.rating}</span>
            </div>
          </div>
          <div className="psr-r">
            <div className="psr-from">da</div>
            <div className="psr-price">€{s.from}</div>
          </div>
        </a>
      ))}
    </div>
  );
}

function ProdRichieste({ prov }) {
  return (
    <div className="prod-rich">
      <div className="pr-intro">
        <div className="pr-intro-h">Cosa accetto come richiesta open</div>
        <p>Quando hai un brief, mandami una <strong>richiesta open</strong> — leggo entro 1h e ti rispondo solo se posso fare un buon lavoro nel tempo che hai. Non rispondo a brief generici "voglio un beat fuoco".</p>
      </div>
      <div className="pr-grid">
        {[
          { t: "Beat su misura", d: "Trap, drill o R&B. Mando 2 idee in 48h, una rifinita in 7gg.", price: "€80–250", icon: "music" },
          { t: "Mix + Master per singolo", d: "Stems WAV 24-bit. Consegna mix v1 in 2gg, master finale in 4gg.", price: "€60–180", icon: "edit" },
          { t: "Vocal production", d: "Tuning naturale o stilizzato, produzione cori, doubling.", price: "€45–120", icon: "play" },
          { t: "Collaborazione full", d: "Beat + mix + master + vocal prod su un EP (3–6 tracce). Solo se ascolto demo prima.", price: "€800–2.5k", icon: "users" },
          { t: "Sample pack custom", d: "Pacchetto stems + presets per il tuo sound. Solo per artisti recurring.", price: "€500–1.5k", icon: "package" },
        ].map((r, i) => (
          <div key={i} className="pr-card">
            <div className="pr-card-h">
              <div className="pr-card-icon">
                {r.icon === "music" && <PD_Icons.music size={14}/>}
                {r.icon === "edit" && <PD_Icons.edit size={14}/>}
                {r.icon === "play" && <PD_Icons.play size={14}/>}
                {r.icon === "users" && <PD_Icons.users size={14}/>}
                {r.icon === "package" && <PD_Icons.shield size={14}/>}
              </div>
              <div className="pr-card-t">{r.t}</div>
              <div className="pr-card-p">{r.price}</div>
            </div>
            <p className="pr-card-d">{r.d}</p>
          </div>
        ))}
      </div>
      <div className="pr-cta">
        <button className="btn-primary-lg"><PD_Icons.flag size={13}/> Invia richiesta open a {prov.name.split(" ")[0]}</button>
      </div>
    </div>
  );
}

function ProdRecensioni({ prov }) {
  return (
    <div className="bd-reviews">
      <div className="bd-reviews-head">
        <div className="rh-l">
          <div className="rh-num">{prov.rating}</div>
          <div className="rh-stars">
            {[1,2,3,4,5].map(i => <PD_Icons.star key={i} size={14} filled={i <= 5}/>)}
          </div>
          <div className="rh-count">{prov.reviews} recensioni · {prov.completedProjects} progetti</div>
        </div>
        <div className="rh-r">
          {[
            [5, 128],
            [4, 12],
            [3, 2],
            [2, 0],
            [1, 0],
          ].map(([s, c]) => (
            <div key={s} className="rh-bar">
              <span className="rh-bar-l">{s}★</span>
              <span className="rh-bar-track"><span style={{ width: `${(c/prov.reviews)*100}%` }}/></span>
              <span className="rh-bar-c">{c}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="reviews-list">
        {[
          { who: "Sara R.", whoInit: "SR", time: "3gg fa", stars: 5, beat: "Mix + Master · Standard", text: "Marco è uno dei pochi mix engineer che ascolta DAVVERO il brief. Ha capito al primo giro cosa volevo e ha consegnato in anticipo. Comunicazione 10/10." },
          { who: "Diego K.", whoInit: "DK", time: "1 sett", stars: 5, beat: "Skyline · Beat", text: "Ho preso il beat Skyline e Marco è stato veloce sul rilascio dei trackouts. Risposta in 30min ogni volta. Top." },
          { who: "Vale F.", whoInit: "VF", time: "2 sett", stars: 5, beat: "Vocal tuning", text: "Tuning vocale perfetto, naturale ma stabile. Il master ha dato peso al low-end senza cuocere gli alti." },
          { who: "Luca M.", whoInit: "LM", time: "3 sett", stars: 4, beat: "Mix + Master · Base", text: "Buon lavoro, mi sarebbe piaciuto un round di revisione in più. Forse passerò allo Standard." },
          { who: "Alex T.", whoInit: "AT", time: "1 mese", stars: 5, beat: "Collaborazione EP", text: "EP da 5 tracce in 6 settimane, comunicazione costante, sempre in anticipo. Tornerò sicuramente." },
        ].map((r, i) => (
          <div key={i} className="review-row">
            <div className="rev-av">{r.whoInit}</div>
            <div className="rev-body">
              <div className="rev-row1">
                <span className="rev-who">{r.who}</span>
                <span className="rev-stars">{[1,2,3,4,5].map(x => <PD_Icons.star key={x} size={11} filled={x <= r.stars}/>)}</span>
                <span className="rev-pkg">{r.beat}</span>
                <span className="rev-time">{r.time}</span>
              </div>
              <p className="rev-text">{r.text}</p>
            </div>
          </div>
        ))}
      </div>
      <button className="btn-ghost-sm">Vedi tutte le {prov.reviews} recensioni</button>
    </div>
  );
}

function ProdAbout({ prov }) {
  return (
    <div className="prod-about">
      <div className="pa-section">
        <h4 className="pa-h">Bio</h4>
        <p className="pa-bio">{prov.bio}</p>
      </div>

      <div className="pa-row">
        <div className="pa-section">
          <h4 className="pa-h">Generi</h4>
          <div className="g-chips">
            {prov.genres.map(g => <span key={g} className="g-chip">{g}</span>)}
          </div>
        </div>
        <div className="pa-section">
          <h4 className="pa-h">Skills</h4>
          <div className="g-chips">
            {prov.skills.map(s => <span key={s} className="g-chip">{s}</span>)}
          </div>
        </div>
      </div>

      <div className="pa-row">
        <div className="pa-section">
          <h4 className="pa-h">Lingue</h4>
          <div className="g-chips">
            {prov.languages.map(l => <span key={l} className="g-chip">{l}</span>)}
          </div>
        </div>
        <div className="pa-section">
          <h4 className="pa-h">Setup studio</h4>
          <ul className="pa-list">
            <li>ProTools 2024 + UAD plugins</li>
            <li>Monitor: ATC SCM45 + Yamaha NS10</li>
            <li>Studio trattato + room correction</li>
            <li>Consolle SSL + outboard analogico</li>
          </ul>
        </div>
      </div>

      <div className="pa-section">
        <h4 className="pa-h">Sonara verifications</h4>
        <ul className="pa-verif">
          <li><PD_Icons.check size={12}/> <span><strong>Identità</strong> · verificata via documento</span><span className="ago">mar 2023</span></li>
          <li><PD_Icons.check size={12}/> <span><strong>P.IVA</strong> · verificata</span><span className="ago">mar 2023</span></li>
          <li><PD_Icons.check size={12}/> <span><strong>Wallet</strong> · IBAN connesso</span><span className="ago">apr 2023</span></li>
          <li><PD_Icons.check size={12}/> <span><strong>Studio</strong> · indirizzo verificato</span><span className="ago">mag 2024</span></li>
        </ul>
      </div>
    </div>
  );
}

window.ProducerPage = ProducerPage;