Piattaforme riservate: ruolo dedicato e port della dashboard Stress Index

Il ruolo `campus` diventa `piattaforme` e non apre più solo la sezione
Biohacking: copre tutte le aree riservate, con migrazione guardata sugli
utenti esistenti. Nell'header la vecchia voce Biohacking lascia il posto a
un menu Piattaforme con i due link, visibile solo a chi ha il ruolo, e
/piattaforme diventa la pagina di atterraggio.

Stress Index è portata dentro il sito: le nove viste dell'area
professionisti diventano pagine Astro sotto /piattaforme/stress-index,
con lo stile del sito al posto del design system del prototipo. React
resta solo dove serve davvero — grafici recharts e scheda cliente — il
resto è Astro con un filo di JS. I dati sono ancora quelli dimostrativi,
raccolti in lib/stress-index/data.ts.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/Header.astro

@@ -1,5 +1,6 @@
 ---
 import { site } from '../data/site';
+import { piattaforme } from '../data/piattaforme';
 import { t, contentImageUrl } from '../lib/content';
 import { landingFor } from '../lib/auth';
 interface Props {
@@ -11,8 +12,9 @@ const { user, canTags, showTags } = Astro.props;
 const path = Astro.url.pathname;
 const loginHref = `/login?next=${encodeURIComponent(path)}`;
 const areaHref = user ? landingFor(user.role) : '/admin';
-// La sezione Biohacking compare nel menu solo a chi può davvero aprirla.
-const canBiohacking = user?.role === 'campus' || user?.role === 'admin';
+// Le piattaforme riservate compaiono nel menu solo a chi può davvero aprirle.
+const canPiattaforme = user?.role === 'piattaforme' || user?.role === 'admin';
+const inPiattaforme = piattaforme.some((p) => path === p.href || path.startsWith(`${p.href}/`));
 ---
 <header class="hdr" id="site-header">
   <div class="container hdr__in">
@@ -23,8 +25,15 @@ const canBiohacking = user?.role === 'campus' || user?.role === 'admin';
           <a href={item.href} class:list={['hdr__link', { 'is-active': path === item.href || (item.href !== '/' && path.startsWith(item.href)) }]}>{t(`global.nav.${i + 1}.label`)}</a>
         )
       ))}
-      {canBiohacking && (
-        <a href="/campus" class:list={['hdr__link', 'hdr__link--bio', { 'is-active': path.startsWith('/campus') }]}>Biohacking</a>
+      {canPiattaforme && (
+        <details class="plat">
+          <summary class:list={['hdr__link', 'hdr__link--bio', 'plat__btn', { 'is-active': inPiattaforme }]}>Piattaforme ▾</summary>
+          <div class="plat__panel">
+            {piattaforme.map((p) => (
+              <a href={p.href} class:list={['plat__item', { 'is-active': path === p.href || path.startsWith(`${p.href}/`) }]}>{p.label}</a>
+            ))}
+          </div>
+        </details>
       )}
     </nav>
     <div class="hdr__user">
@@ -57,6 +66,17 @@ const canBiohacking = user?.role === 'campus' || user?.role === 'admin';
   .hdr__link { font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--c-heading); transition: color .3s ease; }
   .hdr__link:hover, .hdr__link.is-active { color: var(--c-accent-dark); }
   .hdr__link--bio { color: var(--c-accent-dark); }
+  /* Menu Piattaforme: su desktop è un pannello che scende dalla voce, in mobile —
+     dove la nav è già una colonna — le voci si aprono in linea sotto il titolo. */
+  .plat { position: relative; }
+  .plat__btn { cursor: pointer; list-style: none; }
+  .plat__btn::-webkit-details-marker { display: none; }
+  .plat__panel {
+    position: absolute; left: 0; top: calc(100% + 14px); background: #fff; min-width: 210px;
+    box-shadow: 0 8px 22px rgba(0,0,0,.12); display: flex; flex-direction: column; padding: 8px 0; z-index: 200;
+  }
+  .plat__item { padding: 10px 16px; font-size: .8rem; text-decoration: none; color: var(--c-heading); }
+  .plat__item:hover, .plat__item.is-active { background: #f4f2ef; color: var(--c-accent-dark); }
   .hdr__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
   .hdr__burger span { display: block; width: 22px; height: 2px; background: var(--c-heading); margin: 5px 0; }
   @media (max-width: 991px) {
@@ -64,6 +84,8 @@ const canBiohacking = user?.role === 'campus' || user?.role === 'admin';
     .hdr__nav.is-open { display: flex; }
     .hdr__link { padding: 12px 0; }
     .hdr__burger { display: block; }
+    .plat__panel { position: static; box-shadow: none; padding: 0 0 8px; min-width: 0; }
+    .plat__item { padding: 10px 0 10px 14px; }
   }
   .hdr__user { display: flex; align-items: center; }
   .hdr__login { font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--c-heading); }
@@ -86,6 +108,15 @@ const canBiohacking = user?.role === 'campus' || user?.role === 'admin';
     toggle.setAttribute('aria-expanded', String(open));
   });
 
+  // Il pannello Piattaforme è un <details>: da solo resterebbe aperto anche cliccando altrove.
+  const plat = document.querySelector<HTMLDetailsElement>('.plat');
+  if (plat) {
+    document.addEventListener('click', (e) => {
+      if (plat.open && !plat.contains(e.target as Node)) plat.open = false;
+    });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') plat.open = false; });
+  }
+
   const tagsBtn = document.getElementById('toggle-tags');
   if (tagsBtn) {
     const on = tagsBtn.dataset.on === '1';