// Servizio detail page — UC-A2 conversion screen for a service listing
// Hero: provider info + sample work · Packages: 3-tier pricing · Tabs: Cosa include / Specs / Recensioni / FAQ

const SD_Icons = window.SonaraIcons;
const { useState: useStateSD, useMemo: useMemoSD } = React;

const PICK_SVC = () => (window.ALL_SERVIZI && window.ALL_SERVIZI[0]) || null;

function ServizioDetailPage() {
  const src = PICK_SVC();
  // Build a normalized service object — fall back to mock if catalog has unexpected shape
  const svc = useMemoSD(() => ({
    title: (src && src.title) || "Mix + Master per singolo · trap moderno",
    category: (src && src.category) || "Mix + Master",
    cover: (src && (src.art || src.cover)) || "art-b",
    provider: {
      name: (src && (src.providerName || (src.provider && src.provider.name))) || "Marco Vitale",
      init: "MV", verified: true, art: "art-a",
      rating: 4.9, reviews: 142, completedProjects: 87,
      responseTime: "1h", location: "Roma", since: "2023",
    },
    rating: 4.9, reviews: 142, orders: 87,
    delivery: "5 giorni",
    revisions: 2,
    description: "Trasformo i tuoi stems in una traccia pronta per Spotify e radio. Mix con dinamica e profondità, master coeso e loud al punto giusto. Esperienza con 200+ release indie italiane.",
    packages: [
      {
        id: "base", name: "Base", price: 60,
        delivery: "5gg", revisions: 1,
        tagline: "Mix mono-strumentale + master streaming",
        features: [
          "Fino a 12 tracce stems",
          "Mix dinamico stereo",
          "Master per streaming (LUFS -14)",
          "1 round di revisione",
          "Consegna WAV 24-bit + MP3 320",
        ],
      },
      {
        id: "standard", name: "Standard", price: 110, popular: true,
        delivery: "4gg", revisions: 2,
        tagline: "Aggiunge tuning vocale + 808 design",
        features: [
          "Fino a 24 tracce stems",
          "Tuning vocale (Auto-tune o Melodyne)",
          "808 design + sub-bass enhancement",
          "Master streaming + radio (LUFS -9)",
          "2 round di revisione",
          "Consegna WAV 24-bit + MP3 320 + stems mixati",
        ],
      },
      {
        id: "pro", name: "Pro", price: 180,
        delivery: "3gg", revisions: 3,
        tagline: "Express + Atmos + sessione di confronto",
        features: [
          "Tracce illimitate",
          "Mixing analogico + Atmos master",
          "Sessione di confronto via call (45min)",
          "3 round di revisione + revisioni minor illimitate",
          "Consegna WAV + MP3 + stems mixati + .ptx ProTools",
          "Priority delivery (3gg garantiti)",
        ],
      },
    ],
  }), [src]);

  const [pkg, setPkg] = useStateSD("standard");
  const sel = svc.packages.find(p => p.id === pkg);

  return (
    <div className="page-svc" data-screen-label="Servizio detail">
      {/* breadcrumb */}
      <nav className="breadcrumb">
        <a href="Esplora.html">Esplora</a>
        <span className="bc-sep">/</span>
        <a href="Esplora.html">Servizi</a>
        <span className="bc-sep">/</span>
        <span className="bc-current">{svc.title}</span>
      </nav>

      <div className="bd-grid">
        {/* LEFT */}
        <div className="bd-left">
          {/* Hero */}
          <article className="svc-hero">
            <div className={`svc-hero-cover ${svc.cover}`}>
              <span className="svc-hero-badge">{svc.category}</span>
              <span className="svc-hero-orders"><SD_Icons.check size={11}/> {svc.orders} progetti consegnati</span>
            </div>
            <div className="svc-hero-body">
              <div className="svc-hero-meta">
                <span className="chip">{svc.category}</span>
                <span className="chip mood">Trap</span>
                <span className="chip mood">R&B</span>
                <span className="chip mood">Drill</span>
              </div>
              <h1 className="svc-hero-title">{svc.title}</h1>
              <a href="Producer.html" className="svc-hero-prov">
                <span className={`av ${svc.provider.art}`}>{svc.provider.init}</span>
                <span className="n">{svc.provider.name}</span>
                {svc.provider.verified && <SD_Icons.verified size={13}/>}
              </a>
              <div className="svc-hero-stats">
                <span><SD_Icons.star size={12} filled/> <strong>{svc.rating}</strong> · {svc.reviews} recensioni</span>
                <span className="dot"/>
                <span><SD_Icons.clock size={11}/> Consegna in {svc.delivery}</span>
                <span className="dot"/>
                <span><SD_Icons.message size={11}/> Risposta in {svc.provider.responseTime}</span>
              </div>
              <p className="svc-hero-desc">{svc.description}</p>
            </div>
          </article>

          {/* Tabs */}
          <SvcTabs svc={svc}/>

          {/* Provider card */}
          <SvcProviderCard prov={svc.provider}/>

          {/* Sample work */}
          <SvcSamples/>
        </div>

        {/* RIGHT — packages */}
        <aside className="bd-right">
          <div className="svc-pkg">
            <div className="svc-pkg-tabs">
              {svc.packages.map(p => (
                <button key={p.id}
                        className={`svc-pkg-tab ${pkg === p.id ? "active" : ""}`}
                        onClick={() => setPkg(p.id)}>
                  <span className="svc-pkg-tab-name">{p.name}</span>
                  {p.popular && <span className="popular-pill">Popolare</span>}
                  <span className="svc-pkg-tab-price">€{p.price}</span>
                </button>
              ))}
            </div>
            <div className="svc-pkg-detail">
              <div className="svc-pkg-tagline">{sel.tagline}</div>
              <div className="svc-pkg-headline-row">
                <div className="spk-meta">
                  <SD_Icons.clock size={13}/>
                  <span><strong>{sel.delivery}</strong> consegna</span>
                </div>
                <div className="spk-meta">
                  <SD_Icons.edit size={13}/>
                  <span><strong>{sel.revisions}</strong> revision{sel.revisions === 1 ? "e" : "i"}</span>
                </div>
              </div>
              <ul className="svc-pkg-features">
                {sel.features.map((f, i) => (
                  <li key={i}><SD_Icons.check size={12}/><span>{f}</span></li>
                ))}
              </ul>
              <div className="bd-cta-row">
                <a href="Ordine.html" className="btn-buy">
                  <span className="btn-buy-l">Acquista pacchetto</span>
                  <span className="btn-buy-p">€{sel.price}</span>
                </a>
                <a href="Messaggi.html" className="btn-secondary-lg">
                  <SD_Icons.message size={14}/> Chiedi un preventivo
                </a>
              </div>
              <div className="bd-trust-row">
                <span><SD_Icons.shield size={11}/> Escrow Sonara</span>
                <span className="dot"/>
                <span><SD_Icons.flag size={11}/> Auto-approval {sel.delivery}</span>
              </div>
            </div>
          </div>

          <div className="svc-side-card">
            <div className="ssc-h">Garanzia Sonara</div>
            <ul className="ssc-list">
              <li><SD_Icons.shield size={13}/> <span>Pagamento in escrow finché non approvi</span></li>
              <li><SD_Icons.edit size={13}/> <span>{sel.revisions} revision{sel.revisions === 1 ? "e" : "i"} {sel.revisions === 1 ? "inclusa" : "incluse"} · revisioni extra €15</span></li>
              <li><SD_Icons.flag size={13}/> <span>Mediazione gratuita in caso di dispute</span></li>
              <li><SD_Icons.clock size={13}/> <span>Auto-approval dopo {sel.delivery} dalla consegna</span></li>
            </ul>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ---------- Tabs ----------
function SvcTabs({ svc }) {
  const [tab, setTab] = useStateSD("include");
  return (
    <section className="bd-tabs-card">
      <nav className="bd-tabs">
        {[
          ["include", "Cosa include"],
          ["how", "Come lavoro"],
          ["specs", "Specs tecniche"],
          ["faq", "FAQ"],
          ["reviews", `Recensioni · ${svc.reviews}`],
        ].map(([id, lbl]) => (
          <button key={id} className={`bd-tab ${tab === id ? "active" : ""}`} onClick={() => setTab(id)}>{lbl}</button>
        ))}
      </nav>
      <div className="bd-tab-body">
        {tab === "include" && <SvcIncludeTab/>}
        {tab === "how" && <SvcHowTab/>}
        {tab === "specs" && <SvcSpecsTab/>}
        {tab === "faq" && <SvcFaqTab/>}
        {tab === "reviews" && <SvcReviewsTab svc={svc}/>}
      </div>
    </section>
  );
}

function SvcIncludeTab() {
  const groups = [
    {
      title: "Mixing",
      items: [
        "Bilanciamento e gain staging",
        "Equalizzazione strumenti e voci",
        "Compressione dinamica",
        "Saturazione armonica analogica",
        "Spazializzazione e profondità (reverb, delay)",
        "Sub-bass enhancement",
      ],
    },
    {
      title: "Mastering",
      items: [
        "Coerenza tonale tra le tracce",
        "Limiting e loudness ottimizzato per piattaforma",
        "Master per streaming (-14 LUFS) o radio (-9 LUFS)",
        "Stereo enhancement",
        "Versione MP3 320 + WAV 24-bit",
      ],
    },
    {
      title: "Extra inclusi",
      items: [
        "Tuning vocale (Auto-tune naturale o Melodyne dettagliato)",
        "Pulizia plosive, breath, click",
        "808 design + glide + sub layering",
      ],
    },
  ];
  return (
    <div className="svc-include">
      {groups.map((g, gi) => (
        <div key={gi} className="svc-include-group">
          <h4 className="svc-include-h">{g.title}</h4>
          <ul className="svc-include-list">
            {g.items.map((it, i) => (
              <li key={i}><SD_Icons.check size={12}/><span>{it}</span></li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

function SvcHowTab() {
  const steps = [
    { n: 1, t: "Brief & stems", s: "Ricevo il tuo brief e gli stems via Sonara. Ti chiedo riferimenti sonori e indicazioni specifiche entro 12h." },
    { n: 2, t: "Mix v1 in 2 giorni", s: "Lavoro al mix entro 2 giorni dalla consegna stems. Ti mando la prima versione con note vocali sui passaggi chiave." },
    { n: 3, t: "Revisioni mirate", s: "Hai 2 round di revisione in cui puoi commentare con timestamp precisi sulla traccia. Rispondo entro 24h." },
    { n: 4, t: "Master finale", s: "Una volta approvato il mix, master coeso e ottimizzato per la piattaforma di destinazione. Consegna in 24h." },
    { n: 5, t: "Consegna & follow-up", s: "Ricevi tutti i file via wallet Sonara. Resto disponibile 30 giorni per minor revisioni gratuite." },
  ];
  return (
    <div className="svc-how">
      {steps.map((s, i) => (
        <div key={i} className="svc-how-step">
          <div className="svc-how-num">{s.n}</div>
          <div className="svc-how-body">
            <div className="t">{s.t}</div>
            <div className="s">{s.s}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function SvcSpecsTab() {
  return (
    <div className="bd-details-grid">
      {[
        ["Stems richiesti", "WAV 24-bit / 48kHz"],
        ["Headroom", "-6 dB peak"],
        ["Naming", "01_kick.wav, 02_snare.wav…"],
        ["Effetti consigliati", "Stems dry o con FX bus separato"],
        ["Numero tracce", "Fino a 24 (Standard)"],
        ["Reference", "Spotify link o file MP3"],
        ["Software", "ProTools 2024 + UAD plugins"],
        ["Monitor", "ATC SCM45 + Yamaha NS10"],
        ["Acustica studio", "Trattata + room correction"],
        ["Consegna stems mixati", "Solo Standard e Pro"],
        ["Sessione ProTools", "Solo Pro"],
        ["Revisioni extra", "€15 cad. dopo le incluse"],
      ].map(([k, v]) => (
        <div key={k} className="bd-detail">
          <span className="k">{k}</span>
          <span className="v">{v}</span>
        </div>
      ))}
    </div>
  );
}

function SvcFaqTab() {
  const [open, setOpen] = useStateSD(0);
  const faq = [
    { q: "Posso mandarti un demo prima di acquistare?", a: "Certo. Mandami un MP3 con un riferimento e una nota su cosa vuoi ottenere via Sonara — ti rispondo entro 1h con un'idea del piano migliore." },
    { q: "Cosa succede se non sono soddisfatto del mix?", a: "Hai revisioni incluse nel pacchetto (1, 2 o 3) per chiedere modifiche con timestamp precisi. Se davvero non riusciamo a trovare la quadra, puoi richiedere il rimborso entro 24h dalla consegna finale tramite il sistema di mediazione Sonara." },
    { q: "Lavori solo sul tuo studio o anche con stems da altri studi?", a: "Lavoro solo sui tuoi stems. L'unica condizione è che siano puliti, in WAV 24-bit, con -6dB di headroom e nominati correttamente — trovi il template nella sezione Specs." },
    { q: "Posso pagare in più rate?", a: "Pacchetto Pro è dilazionabile in 3 rate via Sonara Wallet. Base e Standard sono in pagamento unico al momento dell'ordine, escrow rilasciato all'approvazione." },
    { q: "Fai anche solo master?", a: "Sì, ma con prezzo e timing differenti. Apri una conversazione e ti mando offerta custom." },
  ];
  return (
    <div className="svc-faq">
      {faq.map((f, i) => (
        <button key={i} className={`svc-faq-row ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
          <span className="svc-faq-q">{f.q}</span>
          <span className="svc-faq-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </span>
          {open === i && <p className="svc-faq-a">{f.a}</p>}
        </button>
      ))}
    </div>
  );
}

function SvcReviewsTab({ svc }) {
  return (
    <div className="bd-reviews">
      <div className="bd-reviews-head">
        <div className="rh-l">
          <div className="rh-num">{svc.rating}</div>
          <div className="rh-stars">
            {[1,2,3,4,5].map(i => <SD_Icons.star key={i} size={14} filled={i <= 5}/>)}
          </div>
          <div className="rh-count">{svc.reviews} recensioni · {svc.orders} 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/svc.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, pkg: "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, pkg: "Pro", text: "La sessione di confronto via call vale i €180. Mi ha spiegato perché certe scelte non funzionavano e la traccia finale è un altro pianeta." },
          { who: "Vale F.", whoInit: "VF", time: "2 sett", stars: 5, pkg: "Standard", text: "Tuning vocale perfetto, naturale ma stabile. Il master ha dato peso al low-end senza cuocere gli alti. Tornerò sicuramente." },
          { who: "Luca M.", whoInit: "LM", time: "3 sett", stars: 4, pkg: "Base", text: "Buon lavoro, mi sarebbe piaciuto un round di revisione in più. Forse passerò allo Standard." },
        ].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 => <SD_Icons.star key={x} size={11} filled={x <= r.stars}/>)}</span>
                <span className="rev-pkg">Pacchetto {r.pkg}</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 {svc.reviews} recensioni</button>
    </div>
  );
}

// ---------- Provider card ----------
function SvcProviderCard({ prov }) {
  return (
    <section className="prod-inline">
      <div className="pi-head">
        <a href="Producer.html" className="pi-l">
          <div className={`pi-cover ${prov.art}`}>
            <span>{prov.init}</span>
          </div>
          <div className="pi-body">
            <div className="pi-row1">
              <span className="pi-name">{prov.name}</span>
              {prov.verified && <span className="pi-verified"><SD_Icons.verified size={13}/></span>}
            </div>
            <div className="pi-row2">
              <span><SD_Icons.pin size={11}/> {prov.location}</span>
              <span className="dot"/>
              <span><SD_Icons.star size={11} filled/> {prov.rating} · {prov.reviews} recensioni</span>
              <span className="dot"/>
              <span>Su Sonara dal {prov.since}</span>
              <span className="dot"/>
              <span>{prov.completedProjects} progetti</span>
            </div>
            <div className="pi-row3">
              <span className="g-chip">Mix + Master</span>
              <span className="g-chip">Vocal prod</span>
              <span className="g-chip">Trap · R&B</span>
            </div>
          </div>
        </a>
        <div className="pi-actions">
          <a href="Messaggi.html" className="btn-ghost-sm"><SD_Icons.message size={13}/> Contatta</a>
          <a href="Producer.html" className="btn-primary-sm">Vedi profilo <SD_Icons.arrowRight size={12}/></a>
        </div>
      </div>
    </section>
  );
}

// ---------- Sample work ----------
function SvcSamples() {
  const samples = [
    { t: "Notte Lunga · trap", who: "Sara R.", art: "art-a", duration: "2:48" },
    { t: "Codice nero · drill", who: "Diego K.", art: "art-b", duration: "3:12" },
    { t: "Mare scuro · R&B", who: "Vale F.", art: "art-c", duration: "3:54" },
    { t: "Skyline · trap", who: "DK", art: "art-d", duration: "2:36" },
  ];
  return (
    <section className="similar-beats">
      <div className="section-head">
        <span className="t">Ascolta lavori recenti</span>
        <a href="Producer.html" className="more">Tutti i lavori <SD_Icons.chevronRight size={13}/></a>
      </div>
      <div className="similar-grid">
        {samples.map((s, i) => (
          <a key={i} className="similar-card">
            <div className={`sim-art ${s.art}`}>
              <span><SD_Icons.play size={18}/></span>
            </div>
            <div className="sim-body">
              <div className="sim-title">{s.t}</div>
              <div className="sim-prod">cliente: {s.who}</div>
              <div className="sim-meta">
                <span>{s.duration}</span>
                <span className="dot"/>
                <span>Mix + Master</span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

window.ServizioDetailPage = ServizioDetailPage;