/* SeaVin — Sample Report (full 14-section report) */

function BoatCarousel({ it }) {
  const [idx, setIdx] = React.useState(0);
  const photos = [
    { src: "assets/azimut-68-fb.png", c: it ? "Profilo esterno · ancoraggio" : "Exterior profile · at anchor" },
    { src: "assets/boat/01-cockpit-sunset.png", c: it ? "Pozzetto · tramonto" : "Cockpit · sunset" },
    { src: "assets/boat/02-salon-tv.png", c: it ? "Salone · zona TV" : "Salon · TV area" },
    { src: "assets/boat/03-salon-lounge.png", c: it ? "Salone · lounge" : "Salon · lounge" },
    { src: "assets/boat/04-dinette.png", c: it ? "Dinette interna" : "Interior dinette" },
    { src: "assets/boat/05-galley-corridor.png", c: it ? "Corridoio cambusa" : "Galley corridor" },
    { src: "assets/boat/06-galley.png", c: it ? "Cambusa" : "Galley" },
    { src: "assets/boat/07-master-cabin.png", c: it ? "Cabina armatoriale" : "Master cabin" },
    { src: "assets/boat/08-twin-cabin.png", c: it ? "Cabina letti singoli" : "Twin cabin" },
    { src: "assets/boat/09-twin-cabin-2.png", c: it ? "Cabina ospiti" : "Guest cabin" },
    { src: "assets/boat/10-vip-cabin.png", c: it ? "Cabina VIP" : "VIP cabin" },
    { src: "assets/boat/11-vip-cabin-2.png", c: it ? "Cabina VIP · bagno" : "VIP cabin · bathroom" },
  ];
  const n = photos.length;
  const go = (d) => setIdx(i => (i + d + n) % n);
  return (
    <div style={{ marginTop: "var(--s-7)" }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--ink-mute)", textTransform: "uppercase", marginBottom: 12, display: "flex", justifyContent: "space-between" }}>
        <span>{it ? "DOCUMENTAZIONE FOTOGRAFICA · ALLEGATO A" : "PHOTOGRAPHIC DOCUMENTATION · EXHIBIT A"}</span>
        <span className="tabular">{String(idx + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}</span>
      </div>
      <figure style={{ margin: 0, position: "relative", background: "var(--ink)", border: "1px solid var(--rule)" }}>
        <img
          src={photos[idx].src}
          alt={photos[idx].c}
          style={{ display: "block", width: "100%", height: 480, objectFit: "cover" }}
        />
        <figcaption className="mono" style={{ position: "absolute", left: 14, bottom: 14, fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "#fff", background: "rgba(0,0,0,0.55)", padding: "5px 10px", backdropFilter: "blur(4px)" }}>
          {String(idx + 1).padStart(2, "0")} · {photos[idx].c}
        </figcaption>
        <button onClick={() => go(-1)} aria-label="prev"
          style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 56, background: "rgba(0,0,0,0.25)", border: 0, color: "#fff", fontSize: 24, cursor: "pointer" }}>‹</button>
        <button onClick={() => go(1)} aria-label="next"
          style={{ position: "absolute", right: 0, top: 0, bottom: 0, width: 56, background: "rgba(0,0,0,0.25)", border: 0, color: "#fff", fontSize: 24, cursor: "pointer" }}>›</button>
      </figure>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: 4, marginTop: 8 }}>
        {photos.map((p, i) => (
          <button key={i} onClick={() => setIdx(i)} aria-label={`photo ${i+1}`}
            style={{ padding: 0, border: i === idx ? "2px solid var(--secondary-deep)" : "1px solid var(--rule)", background: "transparent", cursor: "pointer", aspectRatio: "4/3", overflow: "hidden" }}>
            <img src={p.src} alt="" style={{ display: "block", width: "100%", height: "100%", objectFit: "cover", opacity: i === idx ? 1 : 0.7 }} />
          </button>
        ))}
      </div>
    </div>
  );
}

function SampleReport() {
  const [cfg, setCfg] = useConfig({
    palette: "cream", theme: "light", typeset: "editorial",
    heroLayout: "split", tone: "reassuring", lang: "it",
  });
  const t = window.SEAVIN_I18N[cfg.lang];
  const it = cfg.lang === "it";
  const [section, setSection] = useState(null);

  // 14 sections
  const sections = [
    { n: "01", k: it ? "Identificativi" : "Identification" },
    { n: "02", k: it ? "Dati tecnici" : "Technical" },
    { n: "03", k: it ? "Problemi noti modello" : "Known model issues" },
    { n: "04", k: it ? "Meteo & fulmini" : "Weather & lightning" },
    { n: "05", k: it ? "Storico AIS" : "AIS history" },
    { n: "06", k: it ? "Annunci storici" : "Ad history" },
    { n: "07", k: it ? "Bandiere & proprietà" : "Flags & ownership" },
    { n: "08", k: it ? "Valutazione mercato" : "Market valuation" },
    { n: "09", k: it ? "Consumo reale" : "Real fuel" },
    { n: "10", k: it ? "Sinistri assicurativi" : "Claims" },
    { n: "11", k: it ? "Furti & legale" : "Theft & legal" },
    { n: "12", k: it ? "Costo annuo" : "Annual cost" },
    { n: "13", k: it ? "Rivendita & assicurabilità" : "Resale & insurability" },
    { n: "14", k: it ? "Raccomandazione" : "Recommendation" },
  ];

  return (
    <Page active="report" cfg={cfg} setCfg={setCfg} t={t}>
      {/* Report cover */}
      <section style={{ paddingTop: "var(--s-8)", paddingBottom: "var(--s-5)", borderBottom: "2px solid var(--ink)" }}>
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: "var(--s-8)", alignItems: "end" }}>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-mute)", marginBottom: 20 }}>
                {it ? "REPORT FORENSE NAUTICO" : "NAUTICAL FORENSIC REPORT"} · N° 24-847-MI
              </div>
              <h1 style={{ fontSize: "clamp(3rem, 6vw, 5.5rem)", letterSpacing: "-0.035em", lineHeight: 0.94 }}>
                <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>Azimut 68</em><br/>
                Flybridge
              </h1>
              <div style={{ marginTop: 28, display: "flex", gap: 28, flexWrap: "wrap" }}>
                <div>
                  <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 4 }}>HIN</div>
                  <div className="mono" style={{ fontSize: 14, letterSpacing: "0.05em" }}>XFA68114F516</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 4 }}>{it ? "ANNO" : "YEAR"}</div>
                  <div className="mono" style={{ fontSize: 14 }}>2016</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 4 }}>{it ? "LUNGHEZZA" : "LENGTH"}</div>
                  <div className="mono" style={{ fontSize: 14 }}>21.35 m</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 4 }}>{it ? "BANDIERA" : "FLAG"}</div>
                  <div className="mono" style={{ fontSize: 14 }}>🇮🇹 IT</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 4 }}>{it ? "PORTO" : "PORT"}</div>
                  <div className="mono" style={{ fontSize: 14 }}>Portofino</div>
                </div>
              </div>
            </div>

            <div style={{ border: "1px solid var(--ink)", padding: "var(--s-5)", background: "var(--bg-card)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "var(--s-4)" }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)" }}>
                  {it ? "RISCHIO COMPLESSIVO" : "OVERALL RISK"}
                </span>
                <span className="risk-badge" data-level="med">● {it ? "Attenzione" : "Caution"}</span>
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 16 }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 96, lineHeight: 0.9, letterSpacing: "-0.04em", color: "var(--accent-deep)" }}>64</span>
                <span className="mono" style={{ fontSize: 13, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>/ 100</span>
              </div>
              {/* risk bar */}
              <div style={{ height: 8, background: "var(--bg-elev)", border: "1px solid var(--rule)", position: "relative" }}>
                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: "64%", background: "var(--accent-deep)" }}/>
              </div>
              <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--rule)", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                <div><div className="dash__big" style={{ fontSize: 28, color: "var(--success)" }}>9</div><div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>{it ? "VERDI" : "GREEN"}</div></div>
                <div><div className="dash__big" style={{ fontSize: 28, color: "var(--accent-deep)" }}>2</div><div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>{it ? "GIALLI" : "YELLOW"}</div></div>
                <div><div className="dash__big" style={{ fontSize: 28, color: "var(--stamp)" }}>3</div><div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>{it ? "ROSSI" : "RED"}</div></div>
              </div>
            </div>
          </div>

          {/* Stamps */}
          <div style={{ marginTop: "var(--s-6)", display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap" }}>
            <Stamp>{it ? "Verifica · Certificata" : "Verification · Certified"}</Stamp>
            <Stamp style={{ transform: "rotate(1.5deg)" }}>SeaVin · 0042-IT</Stamp>
            <Stamp style={{ transform: "rotate(-1deg)" }}>{it ? "Firmato eIDAS" : "eIDAS signed"}</Stamp>
            <div style={{ marginLeft: "auto", display: "flex", gap: 10 }}>
              <button className="btn btn--ghost btn--sm">{it ? "Condividi" : "Share"}</button>
              <button className="btn btn--sm">↓ PDF (48p.)</button>
            </div>
          </div>
        </div>
      </section>

      {/* Contents / nav */}
      <section style={{ background: "var(--bg)", borderBottom: "1px solid var(--rule)" }}>
        <div className="shell">
          <div style={{ display: "flex", overflowX: "auto", gap: 2, padding: "10px 0" }}>
            {sections.map((s) => (
              <a key={s.n} href={`#sec-${s.n}`} style={{
                padding: "8px 12px",
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                letterSpacing: "0.08em",
                color: "var(--ink-mute)",
                border: "1px solid var(--rule)",
                whiteSpace: "nowrap",
                textTransform: "uppercase"
              }}>
                {s.n} · {s.k}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* === 01 Identification === */}
      <ReportSection id="01" num="§ 01" kicker={it ? "Dati identificativi · Blocco A" : "Identification · Block A"}
        title={it ? "Questo è l'esemplare" : "This is the subject"}>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "var(--s-7)" }}>
          <div>
            <div className="spec"><span className="spec__k">HIN</span><span className="spec__v">XFA68114F516</span></div>
            <div className="spec"><span className="spec__k">{it ? "Modello" : "Model"}</span><span className="spec__v">Azimut 68 Flybridge</span></div>
            <div className="spec"><span className="spec__k">{it ? "Anno" : "Year"}</span><span className="spec__v">2016</span></div>
            <div className="spec"><span className="spec__k">{it ? "Cantiere" : "Builder"}</span><span className="spec__v">Azimut-Benetti S.p.A.</span></div>
            <div className="spec"><span className="spec__k">{it ? "Nome corrente" : "Current name"}</span><span className="spec__v">Orion III</span></div>
            <div className="spec"><span className="spec__k">{it ? "Nomi precedenti" : "Previous names"}</span><span className="spec__v">Lucia / Mistral / Bellatrix</span></div>
            <div className="spec"><span className="spec__k">{it ? "Matricola IMO" : "IMO number"}</span><span className="spec__v">—</span></div>
            <div className="spec"><span className="spec__k">{it ? "Call sign" : "Call sign"}</span><span className="spec__v">IP4872</span></div>
            <div className="spec"><span className="spec__k">MMSI</span><span className="spec__v">247283450</span></div>
            <div className="spec"><span className="spec__k">{it ? "Immatricolazione" : "Registration"}</span><span className="spec__v">GE 8472</span></div>
          </div>
          <figure style={{ margin: 0, position: "relative" }}>
            <img
              src="assets/azimut-68-fb.png"
              alt="Azimut 68 Flybridge"
              style={{
                display: "block",
                width: "100%",
                height: 320,
                objectFit: "cover",
                border: "1px solid var(--rule)",
                filter: "saturate(0.92) contrast(1.02)",
              }}
            />
            <figcaption
              className="mono"
              style={{
                position: "absolute",
                left: 12, bottom: 12,
                fontSize: 10,
                letterSpacing: "0.16em",
                textTransform: "uppercase",
                color: "#fff",
                background: "rgba(0,0,0,0.55)",
                padding: "4px 8px",
                backdropFilter: "blur(4px)",
              }}
            >
              {it ? "FOTO UFFICIALE · AZIMUT 68 FB · © AZIMUT-BENETTI" : "OFFICIAL PHOTO · AZIMUT 68 FB · © AZIMUT-BENETTI"}
            </figcaption>
          </figure>
        </div>
        <BoatCarousel it={it} />
      </ReportSection>

      {/* === 02 Technical === */}
      <ReportSection id="02" num="§ 02" kicker={it ? "Dati tecnici · Blocco B" : "Technical · Block B"}
        title={it ? "Specifica tecnica" : "Technical spec"}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "var(--s-7)" }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 12, textTransform: "uppercase" }}>{it ? "Dimensioni" : "Dimensions"}</div>
            <div className="spec"><span className="spec__k">LFT</span><span className="spec__v">21.35 m</span></div>
            <div className="spec"><span className="spec__k">LH</span><span className="spec__v">20.76 m</span></div>
            <div className="spec"><span className="spec__k">{it ? "Baglio" : "Beam"}</span><span className="spec__v">5.40 m</span></div>
            <div className="spec"><span className="spec__k">{it ? "Pescaggio" : "Draft"}</span><span className="spec__v">1.65 m</span></div>
            <div className="spec"><span className="spec__k">{it ? "Dislocamento" : "Displacement"}</span><span className="spec__v">46.5 t</span></div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 12, textTransform: "uppercase" }}>{it ? "Motorizzazione" : "Propulsion"}</div>
            <div className="spec"><span className="spec__k">2×</span><span className="spec__v">MAN V12 1400</span></div>
            <div className="spec"><span className="spec__k">{it ? "Matricola 1" : "Serial 1"}</span><span className="spec__v">5148 0482 1</span></div>
            <div className="spec"><span className="spec__k">{it ? "Matricola 2" : "Serial 2"}</span><span className="spec__v">5148 0482 2</span></div>
            <div className="spec"><span className="spec__k">{it ? "Potenza tot." : "Total power"}</span><span className="spec__v">2 × 1030 kW</span></div>
            <div className="spec"><span className="spec__k">{it ? "Ore motore" : "Engine hours"}</span><span className="spec__v">2,840 / 2,810</span></div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 12, textTransform: "uppercase" }}>{it ? "Capacità" : "Capacities"}</div>
            <div className="spec"><span className="spec__k">{it ? "Carburante" : "Fuel"}</span><span className="spec__v">5,600 L</span></div>
            <div className="spec"><span className="spec__k">{it ? "Acqua" : "Water"}</span><span className="spec__v">1,200 L</span></div>
            <div className="spec"><span className="spec__k">{it ? "Cabine" : "Cabins"}</span><span className="spec__v">4 + 2</span></div>
            <div className="spec"><span className="spec__k">Cat. CE</span><span className="spec__v">A</span></div>
            <div className="spec"><span className="spec__k">{it ? "Persone" : "Persons"}</span><span className="spec__v">16</span></div>
          </div>
        </div>
      </ReportSection>

      {/* === 03 Known issues === */}
      <ReportSection id="03" num="§ 03" kicker={it ? "Analisi AI modello" : "AI model analysis"}
        title={it ? "Difetti ricorrenti" : "Recurring defects"}
        risk="med">
        <p style={{ fontSize: "var(--step-1)", lineHeight: 1.5, color: "var(--ink-soft)", marginBottom: 28, maxWidth: "54ch" }}>
          {it
            ? "Incrocio su 1.247 unità Azimut 68 FB (2014–2019). Le anomalie sotto si verificano con frequenza superiore alla media di categoria."
            : "Cross-referenced across 1,247 Azimut 68 FB units (2014–2019). The anomalies below occur more frequently than category average."}
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
          {[
            { f: "34%", t: it ? "Infiltrazioni passauomo flybridge" : "Flybridge deck hatch leaks", s: it ? "Ricorrente 2016–17" : "Recurring 2016–17", c: "var(--stamp)" },
            { f: "22%", t: it ? "Corrosione invertitore babordo" : "Port gearbox corrosion", s: it ? "Dopo 2,500h" : "After 2,500h", c: "var(--accent-deep)" },
            { f: "18%", t: it ? "Pompa acqua bianca" : "Freshwater pump failure", s: it ? "4–6 anni" : "4–6 years", c: "var(--accent-deep)" },
            { f: "15%", t: it ? "Rullafiocco idraulico" : "Hydraulic furler", s: it ? "Perdite olio" : "Oil leaks", c: "var(--success)" },
            { f: "11%", t: it ? "Generatore Onan" : "Onan generator", s: it ? "Ore elevate" : "High hours", c: "var(--success)" },
            { f: "8%", t: it ? "Elettronica Raymarine" : "Raymarine electronics", s: it ? "Aggiornamenti" : "Updates", c: "var(--success)" },
          ].map((k, i) => (
            <div key={i} style={{ background: "var(--bg-card)", padding: 24 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 10 }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 44, lineHeight: 1, letterSpacing: "-0.03em", color: k.c }}>{k.f}</span>
                <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>{it ? "UNITÀ" : "UNITS"}</span>
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 17, lineHeight: 1.2, letterSpacing: "-0.015em", marginBottom: 8 }}>{k.t}</div>
              <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>{k.s}</div>
            </div>
          ))}
        </div>
      </ReportSection>

      {/* === 04 Weather / lightning === */}
      <ReportSection id="04" num="§ 04" kicker={it ? "Dati ECMWF + LINET" : "ECMWF + LINET data"}
        title={it ? "Esposizione meteorologica" : "Weather exposure"}
        risk="high">
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "var(--s-7)" }}>
          <div>
            <div style={{ padding: "20px 24px", background: "color-mix(in oklab, var(--stamp), transparent 92%)", border: "1px solid var(--stamp)", marginBottom: 28 }}>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--stamp)", textTransform: "uppercase", marginBottom: 8 }}>⚠ ANOMALIA CRITICA</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--step-2)", lineHeight: 1.2, fontStyle: "italic" }}>
                {it ? "2 fulmini rilevati entro 300m dalla posizione AIS dell'imbarcazione." : "2 lightning strikes detected within 300m of boat's AIS position."}
              </div>
            </div>
            <div className="spec"><span className="spec__k">{it ? "Burrasche > 8 Beaufort" : "Gales > 8 Beaufort"}</span><span className="spec__v">7</span></div>
            <div className="spec"><span className="spec__k">{it ? "Onda max registrata" : "Peak wave"}</span><span className="spec__v">4.2 m · 09·2022</span></div>
            <div className="spec"><span className="spec__k">{it ? "Temp. max esterna" : "Max ext. temp"}</span><span className="spec__v">44.1 °C · 08·2023</span></div>
            <div className="spec"><span className="spec__k">{it ? "Ore in porto / mare" : "Port / sea hours"}</span><span className="spec__v">78% / 22%</span></div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 12, textTransform: "uppercase" }}>{it ? "Fulmini rilevati" : "Lightning events"}</div>
            {[
              { d: "08 · 08 · 2022", p: "Porto di Genova", dist: "120 m", sev: it ? "Molto vicino" : "Very close" },
              { d: "14 · 07 · 2023", p: "Palma de Mallorca", dist: "240 m", sev: it ? "Vicino" : "Close" },
            ].map((l, i) => (
              <div key={i} style={{ padding: 16, border: "1px solid var(--stamp)", marginBottom: 12 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                  <span className="mono" style={{ fontSize: 12, letterSpacing: "0.06em" }}>{l.d}</span>
                  <span className="mono" style={{ fontSize: 12, color: "var(--stamp)", letterSpacing: "0.06em" }}>{l.dist}</span>
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>{l.p}</div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.1em", marginTop: 4 }}>{l.sev.toUpperCase()}</div>
              </div>
            ))}
            <p style={{ fontSize: 13, color: "var(--ink-mute)", lineHeight: 1.5, marginTop: 16 }}>
              {it ? "Raccomandiamo verifica strumentale dell'impianto elettrico e dei convertitori. Costo indicativo perizia: € 400–800." : "We recommend instrumented check of electrical system and converters. Survey cost estimate: € 400–800."}
            </p>
          </div>
        </div>
      </ReportSection>

      {/* === 05 AIS history === */}
      <ReportSection id="05" num="§ 05" kicker={it ? "Storico AIS · 5 anni" : "AIS history · 5 years"}
        title={it ? "14.820 miglia percorse" : "14,820 nm travelled"}>
        <div style={{ border: "1px solid var(--rule)", background: "var(--bg-card)", aspectRatio: "16 / 6", position: "relative", overflow: "hidden", marginBottom: "var(--s-6)" }}>
          <svg viewBox="0 0 1200 450" style={{ width: "100%", height: "100%" }}>
            {/* Med outline */}
            <path d="M50 250 Q180 180 320 220 Q460 230 580 180 Q720 130 880 180 Q1020 220 1140 200 Q1170 280 1080 330 Q940 380 760 370 Q520 400 340 370 Q180 350 50 250 Z"
                  fill="none" stroke="var(--rule)" strokeWidth="1" strokeDasharray="4 4"/>
            {/* Route */}
            <path d="M120 320 Q200 280 260 290 Q340 300 400 260 Q480 220 540 240 Q620 260 680 220 Q760 180 820 200 Q900 220 980 190 Q1060 170 1100 180"
                  fill="none" stroke="var(--accent-deep)" strokeWidth="2"/>
            {/* Port labels */}
            {[
              [120, 320, "Genova"],
              [260, 290, "Porto Cervo"],
              [400, 260, "Bonifacio"],
              [540, 240, "St. Tropez"],
              [680, 220, "Monaco"],
              [820, 200, "Palma"],
              [980, 190, "Ibiza"],
              [1100, 180, "Valencia"],
            ].map((p, i) => (
              <g key={i}>
                <circle cx={p[0]} cy={p[1]} r="5" fill="var(--accent-deep)"/>
                <text x={p[0]} y={p[1] - 14} fontFamily="var(--font-mono)" fontSize="12" fill="var(--ink)" textAnchor="middle" letterSpacing="1">{p[2]}</text>
              </g>
            ))}
          </svg>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
          <div>
            <div className="dash__big">14,820</div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--ink-mute)", marginTop: 6, textTransform: "uppercase" }}>{it ? "Miglia totali" : "Total miles"}</div>
          </div>
          <div>
            <div className="dash__big">47</div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--ink-mute)", marginTop: 6, textTransform: "uppercase" }}>{it ? "Porti visitati" : "Ports visited"}</div>
          </div>
          <div>
            <div className="dash__big">1,240h</div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--ink-mute)", marginTop: 6, textTransform: "uppercase" }}>{it ? "Ore in navigazione" : "Underway hours"}</div>
          </div>
          <div>
            <div className="dash__big">62%</div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "var(--ink-mute)", marginTop: 6, textTransform: "uppercase" }}>{it ? "In uso charter" : "Charter use"}</div>
          </div>
        </div>
      </ReportSection>

      {/* === 06 Ad history === */}
      <ReportSection id="06" num="§ 06" kicker={it ? "Incrocio database annunci" : "Listings database match"}
        title={it ? "4 listati dal 2019" : "4 listings since 2019"}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--s-6)" }}>
          {[
            { d: "05 · 2019", p: "€ 1.420.000", src: "Yachtworld.com", h: 1840, note: it ? "Primo listato" : "First listing" },
            { d: "09 · 2021", p: "€ 1.280.000", src: "Boats.com", h: 2100, note: it ? "Ritirato dopo 8 mesi" : "Pulled after 8 months" },
            { d: "03 · 2023", p: "€ 1.150.000", src: "NautalBroker", h: 2580, note: it ? "Ritirato dopo 4 mesi" : "Pulled after 4 months" },
            { d: "11 · 2025", p: "€ 1.180.000", src: "YachtMarket.eu", h: 2820, note: it ? "Annuncio corrente" : "Current listing", active: true },
          ].map((a, i) => (
            <div key={i} style={{ padding: 20, border: a.active ? "1px solid var(--ink)" : "1px solid var(--rule)", background: a.active ? "var(--bg-card)" : "transparent" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                <span className="mono" style={{ fontSize: 12, letterSpacing: "0.1em" }}>{a.d}</span>
                {a.active && <Stamp style={{ transform: "rotate(0)" }}>{it ? "Attivo" : "Live"}</Stamp>}
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.025em" }}>{a.p}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.1em", marginTop: 6, textTransform: "uppercase" }}>
                {a.src} · {a.h}h
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 10 }}>{a.note}</div>
            </div>
          ))}
        </div>
      </ReportSection>

      {/* === 07 Flags / ownership === */}
      <ReportSection id="07" num="§ 07" kicker={it ? "Stato giuridico + incroci" : "Legal status + cross-ref"}
        title={it ? "Timeline proprietà & bandiere" : "Ownership & flag timeline"}>
        <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
          {[
            { y: "2016–2018", o: "Cantiere Azimut (stock)", f: "IT", loc: "Viareggio", h: "0–180h", ok: true },
            { y: "2018–2021", o: it ? "Priv. ● Robert K. (FR)" : "Priv. ● Robert K. (FR)", f: "FR", loc: "Cannes", h: "180–1,620h", ok: true },
            { y: "2021–2023", o: it ? "Charter co. ★ Meditharter Ltd." : "Charter co. ★ Meditharter Ltd.", f: "MT", loc: "Valletta", h: "1,620–2,580h", alert: it ? "Uso commerciale non dichiarato in annuncio 2023" : "Commercial use undisclosed in 2023 ad" },
            { y: "2023–", o: it ? "Priv. ● Giovanni M. (IT)" : "Priv. ● Giovanni M. (IT)", f: "IT", loc: "Portofino", h: "2,580–2,820h", ok: true },
          ].map((e, i) => (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "140px 60px 1fr 160px 120px",
              gap: 24,
              padding: "20px 0",
              borderBottom: "1px solid var(--rule)",
              alignItems: "center"
            }}>
              <div className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--ink-mute)" }}>{e.y}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, letterSpacing: "-0.02em", color: e.alert ? "var(--stamp)" : "var(--ink)" }}>{e.f}</div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: "-0.015em" }}>{e.o}</div>
                {e.alert && <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.1em", color: "var(--stamp)", marginTop: 4, textTransform: "uppercase" }}>⚠ {e.alert}</div>}
              </div>
              <div className="mono" style={{ fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.06em" }}>{e.loc}</div>
              <div className="mono" style={{ fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.06em", textAlign: "right" }}>{e.h}</div>
            </div>
          ))}
        </div>
      </ReportSection>

      {/* === 08 Market valuation === */}
      <ReportSection id="08" num="§ 08" kicker={it ? "Comparabili & prezzo" : "Comparables & price"}
        title={it ? "Sopra mercato del 24%" : "24% above market"}
        risk="med">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "var(--s-7)" }}>
          <div>
            <div style={{ fontSize: "var(--step-1)", lineHeight: 1.5, color: "var(--ink-soft)", marginBottom: 24 }}>
              {it ? "Il prezzo richiesto di € 1.180.000 si posiziona nel 94° percentile dei comparabili. Fair value SeaVin: € 950.000 (intervallo 880k–1,020k)." : "Asking of € 1,180,000 sits in the 94th percentile of comparables. SeaVin fair value: € 950,000 (range 880k–1,020k)."}
            </div>
            <div className="spec"><span className="spec__k">{it ? "Richiesto" : "Asking"}</span><span className="spec__v">€ 1.180.000</span></div>
            <div className="spec"><span className="spec__k">Fair value</span><span className="spec__v" style={{ color: "var(--accent-deep)" }}>€ 950.000</span></div>
            <div className="spec"><span className="spec__k">{it ? "Scarto" : "Gap"}</span><span className="spec__v" style={{ color: "var(--stamp)" }}>+ 24%</span></div>
            <div className="spec"><span className="spec__k">{it ? "N° comparabili" : "Comparables"}</span><span className="spec__v">12</span></div>
            <div className="spec"><span className="spec__k">{it ? "Confidenza" : "Confidence"}</span><span className="spec__v">87%</span></div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 16, textTransform: "uppercase" }}>
              {it ? "Comparabili recenti" : "Recent comparables"}
            </div>
            {[
              { m: "Azimut 68 · 2015", p: "€ 920.000", h: "3,100h", loc: "FR" },
              { m: "Azimut 68 · 2017", p: "€ 1.020.000", h: "2,200h", loc: "IT" },
              { m: "Princess 68 · 2016", p: "€ 980.000", h: "2,700h", loc: "ES" },
              { m: "Ferretti 700 · 2016", p: "€ 990.000", h: "2,400h", loc: "IT" },
              { m: "Azimut 66 · 2017", p: "€ 870.000", h: "2,800h", loc: "GR" },
            ].map((c, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr auto auto", gap: 16, padding: "10px 0", borderBottom: "1px dotted var(--rule)", fontSize: 13, alignItems: "baseline" }}>
                <span>{c.m}</span>
                <span className="mono tabular">{c.p}</span>
                <span className="mono" style={{ color: "var(--ink-mute)", fontSize: 11 }}>{c.h}</span>
                <span className="mono" style={{ color: "var(--ink-mute)", fontSize: 11 }}>{c.loc}</span>
              </div>
            ))}
          </div>
        </div>
      </ReportSection>

      {/* === 09 Real fuel === */}
      <ReportSection id="09" num="§ 09" kicker={it ? "Consumo carburante" : "Real fuel"}
        title={it ? "Più alto del dichiarato" : "Higher than stated"}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "var(--s-7)" }}>
          {[
            { r: it ? "Crociera (24kn)" : "Cruise (24kn)", d: "180 L/h", a: "228 L/h", diff: "+26%" },
            { r: it ? "Veloce (30kn)" : "Fast (30kn)", d: "320 L/h", a: "385 L/h", diff: "+20%" },
            { r: it ? "Economico (12kn)" : "Economic (12kn)", d: "60 L/h", a: "68 L/h", diff: "+13%" },
          ].map((f, i) => (
            <div key={i} style={{ padding: 24, border: "1px solid var(--rule)", background: "var(--bg-card)" }}>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--ink-mute)", marginBottom: 14, textTransform: "uppercase" }}>{f.r}</div>
              <div className="spec"><span className="spec__k">{it ? "Cantiere" : "Builder"}</span><span className="spec__v">{f.d}</span></div>
              <div className="spec"><span className="spec__k">{it ? "Misurato" : "Measured"}</span><span className="spec__v">{f.a}</span></div>
              <div className="spec" style={{ borderBottom: 0 }}><span className="spec__k">Δ</span><span className="spec__v" style={{ color: "var(--stamp)" }}>{f.diff}</span></div>
            </div>
          ))}
        </div>
      </ReportSection>

      {/* === 10 Claims === */}
      <ReportSection id="10" num="§ 10" kicker={it ? "Sinistri aggregati" : "Aggregated claims"}
        title={it ? "1 sinistro dichiarato" : "1 declared claim"}
        risk="high">
        <div style={{ padding: 28, border: "1px solid var(--stamp)", background: "var(--bg-card)", marginBottom: 24 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
            <div>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--ink-mute)", textTransform: "uppercase" }}>05 · 2019 · {it ? "Collisione scafo" : "Hull collision"}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--step-2)", letterSpacing: "-0.02em", marginTop: 6 }}>
                {it ? "Impatto con oggetto semi-sommerso" : "Impact with semi-submerged object"}
              </div>
            </div>
            <Stamp>{it ? "Riparato" : "Repaired"}</Stamp>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            <div><div className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>{it ? "DANNO" : "DAMAGE"}</div><div className="mono tabular" style={{ fontSize: 20 }}>€ 47.200</div></div>
            <div><div className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>{it ? "ASSICURATORE" : "INSURER"}</div><div className="mono" style={{ fontSize: 14 }}>Generali Marine</div></div>
            <div><div className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>{it ? "CANTIERE" : "YARD"}</div><div className="mono" style={{ fontSize: 14 }}>Lusben, Viareggio</div></div>
            <div><div className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>{it ? "COMPLETATO" : "COMPLETED"}</div><div className="mono" style={{ fontSize: 14 }}>11 · 2019</div></div>
          </div>
          <p style={{ marginTop: 20, fontSize: 13, color: "var(--ink-mute)", paddingTop: 16, borderTop: "1px solid var(--rule)" }}>
            {it ? "Non dichiarato nell'annuncio corrente. Richiedere al venditore copia della perizia e del certificato di riparazione." : "Not disclosed in current listing. Ask seller for survey and repair certificate copies."}
          </p>
        </div>
      </ReportSection>

      {/* === 11 Theft / legal === */}
      <ReportSection id="11" num="§ 11" kicker={it ? "Interpol + giudiziale" : "Interpol + judicial"}
        title={it ? "Nessun allarme" : "All clear"}
        risk="low">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
          {[
            { k: "Interpol", s: "CLEAN", c: "var(--success)" },
            { k: it ? "Furti nazionali" : "National theft", s: "CLEAN", c: "var(--success)" },
            { k: it ? "Ipoteche" : "Liens", s: "CLEAN", c: "var(--success)" },
            { k: it ? "Vincoli giudiziali" : "Judicial", s: "CLEAN", c: "var(--success)" },
          ].map((x, i) => (
            <div key={i} style={{ background: "var(--bg-card)", padding: 28, textAlign: "center" }}>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--ink-mute)", textTransform: "uppercase", marginBottom: 12 }}>{x.k}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 40, letterSpacing: "-0.03em", color: x.c, fontStyle: "italic" }}>{x.s}</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.1em", marginTop: 8 }}>{it ? "Verificato" : "Verified"} 24·03·26</div>
            </div>
          ))}
        </div>
      </ReportSection>

      {/* === 12 Annual cost === */}
      <ReportSection id="12" num="§ 12" kicker={it ? "Stima annua di possesso" : "Annual ownership cost"}
        title={it ? "€ 118.400 / anno" : "€ 118,400 / year"}>
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: "var(--s-7)" }}>
          <div>
            {[
              { k: it ? "Ormeggio Portofino (stagionale)" : "Portofino berth (seasonal)", v: "€ 38.400", w: 32 },
              { k: it ? "Carburante (200h/y)" : "Fuel (200h/y)", v: "€ 32.000", w: 27 },
              { k: it ? "Manutenzione programmata" : "Planned maintenance", v: "€ 22.000", w: 19 },
              { k: it ? "Assicurazione casco" : "Hull insurance", v: "€ 14.000", w: 12 },
              { k: it ? "Equipaggio (stagionale)" : "Crew (seasonal)", v: "€ 8.400", w: 7 },
              { k: it ? "Varo / alaggio" : "Launch / haul-out", v: "€ 3.600", w: 3 },
            ].map((r, i) => (
              <div key={i} style={{ padding: "10px 0", borderBottom: i < 5 ? "1px solid var(--rule)" : 0 }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                  <span style={{ fontSize: 14 }}>{r.k}</span>
                  <span className="mono tabular" style={{ fontSize: 14 }}>{r.v}</span>
                </div>
                <div style={{ height: 3, background: "var(--bg-elev)" }}>
                  <div style={{ height: "100%", width: `${r.w}%`, background: "var(--accent-deep)" }}/>
                </div>
              </div>
            ))}
          </div>
          <div style={{ background: "var(--ink)", color: "var(--bg)", padding: 32 }}>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.18em", color: "var(--accent-soft)", textTransform: "uppercase", marginBottom: 18 }}>{it ? "TOTALE" : "TOTAL"}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(4rem, 7vw, 6rem)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>€ 118.400</div>
            <div className="mono" style={{ fontSize: 12, color: "var(--ink-faint)", letterSpacing: "0.1em", marginTop: 10 }}>{it ? "/ ANNO · USO STAGIONALE" : "/ YEAR · SEASONAL USE"}</div>
            <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--ink-mute)" }}>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.14em", color: "var(--accent-soft)", textTransform: "uppercase", marginBottom: 6 }}>{it ? "RULE OF THUMB" : "RULE OF THUMB"}</div>
              <div style={{ fontSize: 14, color: "var(--ink-faint)", lineHeight: 1.5 }}>
                {it ? "~ 10% del prezzo d'acquisto all'anno. Coerente con range industriale per flybridge 20m." : "~ 10% of purchase price per year. In line with industry range for 20m flybridge."}
              </div>
            </div>
          </div>
        </div>
      </ReportSection>

      {/* === 13 Resale & insurability === */}
      <ReportSection id="13" num="§ 13" kicker={it ? "Rivendita & assicurabilità" : "Resale & insurability"}
        title={it ? "Profilo post-acquisto" : "Post-purchase profile"}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--s-7)" }}>
          <div style={{ padding: 32, border: "1px solid var(--rule)", background: "var(--bg-card)" }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)", textTransform: "uppercase", marginBottom: 16 }}>{it ? "Indice rivendita" : "Resale index"}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 100, lineHeight: 1, letterSpacing: "-0.04em", color: "var(--accent-deep)", fontStyle: "italic" }}>B+</div>
            <div style={{ fontSize: 14, color: "var(--ink-soft)", marginTop: 18, lineHeight: 1.5 }}>
              {it ? "Azimut 68 FB mantiene il 58% del valore a 8 anni. Storico charter incide -6% su questa unità." : "Azimut 68 FB holds 58% of value at 8 years. Charter history implies -6% on this unit."}
            </div>
          </div>
          <div style={{ padding: 32, border: "1px solid var(--rule)", background: "var(--bg-card)" }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-mute)", textTransform: "uppercase", marginBottom: 16 }}>{it ? "Assicurabilità" : "Insurability"}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 100, lineHeight: 1, letterSpacing: "-0.04em", color: "var(--success)", fontStyle: "italic" }}>A−</div>
            <div style={{ fontSize: 14, color: "var(--ink-soft)", marginTop: 18, lineHeight: 1.5 }}>
              {it ? "3 assicuratori disponibili (Generali, Pantaenius, Lombard). Premio stimato: € 13–15k/y con storico fulmini risolto." : "3 insurers available (Generali, Pantaenius, Lombard). Est. premium: € 13–15k/y if lightning history cleared."}
            </div>
          </div>
        </div>
      </ReportSection>

      {/* === 14 Recommendation === */}
      <ReportSection id="14" num="§ 14" kicker={it ? "Raccomandazione finale SeaVin" : "Final SeaVin recommendation"}
        title={it ? "Il nostro verdetto" : "Our verdict"}
        last
      >
        <div style={{ background: "var(--ink)", color: "var(--bg)", padding: "var(--s-8)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--s-7)" }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--accent-soft)", textTransform: "uppercase", marginBottom: 28 }}>
              {it ? "VERDETTO · PROCEDERE CON CAUTELA" : "VERDICT · PROCEED WITH CAUTION"}
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.8rem, 3vw, 2.8rem)", lineHeight: 1.15, letterSpacing: "-0.02em", fontStyle: "italic" }}>
              {it
                ? "L'imbarcazione è genuina e senza pendenze giudiziali, ma tre elementi richiedono verifica prima della firma: esposizione ai fulmini, sopramercato del prezzo, e uso charter non dichiarato."
                : "The boat is genuine with no judicial pending, but three elements require verification before signing: lightning exposure, price above market, and undisclosed charter use."}
            </div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--accent-soft)", textTransform: "uppercase", marginBottom: 18 }}>
              {it ? "AZIONI RACCOMANDATE" : "RECOMMENDED ACTIONS"}
            </div>
            {(it ? [
              "Perizia strumentale impianto elettrico",
              "Richiedere documentazione sinistro 2019",
              "Trattare su prezzo (€ 950–1.020k fair)",
              "Ispezione chiglia in secca",
            ] : [
              "Instrumented electrical survey",
              "Request 2019 claim documentation",
              "Negotiate price (€ 950–1,020k fair)",
              "Dry-dock keel inspection",
            ]).map((a, i) => (
              <div key={i} style={{ padding: "14px 0", borderBottom: i < 3 ? "1px solid var(--ink-mute)" : 0, display: "flex", gap: 14, alignItems: "baseline" }}>
                <span className="mono" style={{ fontSize: 14, color: "var(--accent-soft)" }}>{String(i+1).padStart(2, "0")}</span>
                <span style={{ fontSize: 15 }}>{a}</span>
              </div>
            ))}
            <div style={{ marginTop: 28, display: "flex", gap: 12 }}>
              <a href="surveyors.html" className="btn btn--accent">{it ? "Contatta perito" : "Contact surveyor"}</a>
              <a href="dashboard.html" className="btn btn--ghost" style={{ borderColor: "var(--accent-soft)", color: "var(--accent-soft)" }}>{it ? "Salva in archivio" : "Save to vault"}</a>
            </div>
          </div>
        </div>

        <div style={{ marginTop: "var(--s-6)", display: "flex", justifyContent: "space-between", alignItems: "center", paddingBlock: "var(--s-5)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <Stamp>SeaVin · {it ? "Firmato" : "Signed"}</Stamp>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontStyle: "italic", letterSpacing: "-0.01em" }}>M. Tavernese, Direttore Analisi</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>24 · 03 · 2026 · Rev. 1.2</div>
            </div>
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
            {it ? "Report N°" : "Report N°"} 24-847-MI · {it ? "48 pagine" : "48 pages"}
          </div>
        </div>
      </ReportSection>
    </Page>
  );
}

function ReportSection({ id, num, kicker, title, children, risk, last }) {
  return (
    <section id={`sec-${id}`} className="section" style={{ paddingTop: "var(--s-8)", paddingBottom: last ? "var(--s-9)" : "var(--s-8)", borderBottom: last ? 0 : "1px solid var(--rule)" }}>
      <div className="shell">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28, paddingBottom: 16, borderBottom: "2px solid var(--ink)" }}>
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-mute)", marginBottom: 10 }}>
              {num} · {kicker}
            </div>
            <h2 style={{ fontSize: "var(--step-3)", letterSpacing: "-0.03em", lineHeight: 1 }}>{title}</h2>
          </div>
          {risk && (
            <span className="risk-badge" data-level={risk}>
              ● {risk === "high" ? "Critico" : risk === "med" ? "Attenzione" : "OK"}
            </span>
          )}
        </div>
        {children}
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<SampleReport />);