/* SeaVIN — Hero Dashboard component (the "dashboard as hero") */

function HeroDash() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 2400);
    return () => clearInterval(id);
  }, []);

  // Subtle rotating risk detail for the "live feel"
  const facts = [
    { k: "Ultima posizione AIS", v: "Porto Cervo, IT" },
    { k: "Ultima posizione AIS", v: "Cannes, FR" },
    { k: "Ultima posizione AIS", v: "Monaco" },
    { k: "Ultima posizione AIS", v: "Palma, ES" },
  ];
  const fact = facts[tick % facts.length];

  return (
    <div className="dash" role="figure" aria-label="SeaVIN report preview">
      <div className="dash__bar">
        <div className="dots"><span/><span/><span/></div>
        <span>SeaVIN · Report № 24-847-MI</span>
        <span className="live">Recording</span>
      </div>
      <div className="dash__grid">
        {/* Hero identity cell */}
        <div className="dash__cell span-3" style={{ padding: 28 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 0.9fr 0.9fr", gap: 32, alignItems: "start" }}>
            <div>
              <div className="dash__cell-title" style={{ marginBottom: 12 }}>Soggetto</div>
              <div style={{
                fontFamily: "var(--font-display)",
                fontSize: "var(--step-3)",
                lineHeight: 1,
                letterSpacing: "-0.03em"
              }}>
                Azimut 68 Flybridge
              </div>
              <div style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                letterSpacing: "0.12em",
                color: "var(--ink-mute)",
                marginTop: 10
              }}>
                HIN · XFA68114F516 &nbsp;·&nbsp; 2016 · 21.35 m
              </div>
            </div>
            <div>
              <div className="dash__cell-title" style={{ marginBottom: 12 }}>Rischio complessivo</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span className="dash__big" style={{ color: "var(--accent-deep)" }}>64</span>
                <span className="mono" style={{ color: "var(--ink-mute)", fontSize: 12, letterSpacing: "0.1em" }}>/ 100</span>
              </div>
              <div style={{ marginTop: 10 }}>
                <span className="risk-badge" data-level="med">● Attenzione</span>
              </div>
            </div>
            <div>
              <div className="dash__cell-title" style={{ marginBottom: 12 }}>Anomalie critiche</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span className="dash__big" style={{ color: "var(--stamp)" }}>3</span>
                <span className="mono" style={{ color: "var(--ink-mute)", fontSize: 12, letterSpacing: "0.1em" }}>di 14 aree</span>
              </div>
              <div style={{ marginTop: 10, fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.06em" }}>
                Fulmine · Meteo · Sinistro
              </div>
            </div>
          </div>
        </div>

        {/* Timeline proprietà */}
        <div className="dash__cell span-2">
          <div className="dash__cell-h">
            <span className="dash__cell-title">Timeline proprietà</span>
            <span className="dash__cell-id">§ 09</span>
          </div>
          <div style={{ position: "relative", paddingLeft: 8, paddingTop: 6 }}>
            <svg viewBox="0 0 320 66" style={{ width: "100%", height: 66, overflow: "visible" }}>
              <line x1="0" y1="33" x2="320" y2="33" stroke="var(--rule)" strokeWidth="1"/>
              {[
                { x: 10,  y: "2016", lbl: "Cantiere IT", col: "var(--ink)" },
                { x: 90,  y: "2018", lbl: "Privato FR", col: "var(--ink)" },
                { x: 170, y: "2021", lbl: "Charter 🇪🇸", col: "var(--stamp)", alert: true },
                { x: 250, y: "2024", lbl: "Privato IT", col: "var(--ink)" },
                { x: 315, y: "Oggi", lbl: "In vendita", col: "var(--accent-deep)" },
              ].map((p, i) => (
                <g key={i}>
                  <circle cx={p.x} cy="33" r={p.alert ? 6 : 4} fill={p.col}/>
                  {p.alert && (
                    <circle cx={p.x} cy="33" r="10" fill="none" stroke={p.col} strokeWidth="1" opacity="0.5"/>
                  )}
                  <text x={p.x} y="14" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-mute)" textAnchor="middle" letterSpacing="1">
                    {p.y}
                  </text>
                  <text x={p.x} y="56" fontFamily="var(--font-mono)" fontSize="9" fill={p.col} textAnchor="middle" letterSpacing="0.5">
                    {p.lbl}
                  </text>
                </g>
              ))}
            </svg>
          </div>
          <div style={{ marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.1em", color: "var(--stamp)" }}>
            ⚠ Periodo charter non dichiarato nell'annuncio
          </div>
        </div>

        {/* AIS route sparkline */}
        <div className="dash__cell">
          <div className="dash__cell-h">
            <span className="dash__cell-title">Storico AIS · 5a</span>
            <span className="dash__cell-id">§ 05</span>
          </div>
          <div style={{
            aspectRatio: "4 / 3",
            background: "var(--bg-elev)",
            border: "1px solid var(--rule)",
            position: "relative",
            overflow: "hidden"
          }}>
            {/* stylized mediterranean outline */}
            <svg viewBox="0 0 200 130" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
              <path d="M10 60 Q30 40 60 50 Q90 55 110 40 Q140 30 170 45 Q190 55 190 70 Q170 90 140 85 Q100 95 70 90 Q30 85 10 60 Z"
                    fill="none" stroke="var(--rule)" strokeWidth="0.8" strokeDasharray="2 2"/>
              {/* route */}
              <path d="M30 80 Q50 70 75 72 Q95 74 105 62 Q120 50 135 55 Q155 62 170 50"
                    fill="none" stroke="var(--accent-deep)" strokeWidth="1.2"/>
              {/* waypoints */}
              {[[30,80],[75,72],[105,62],[135,55],[170,50]].map((p, i) => (
                <circle key={i} cx={p[0]} cy={p[1]} r="2" fill="var(--accent-deep)"/>
              ))}
              {/* current pos */}
              <circle cx="170" cy="50" r="4" fill="var(--stamp)"/>
              <circle cx="170" cy="50" r="8" fill="none" stroke="var(--stamp)" strokeWidth="0.8" opacity="0.6">
                <animate attributeName="r" values="4;12;4" dur="2s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.7;0;0.7" dur="2s" repeatCount="indefinite"/>
              </circle>
            </svg>
          </div>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.08em", marginTop: 10 }}>
            {fact.k.toUpperCase()} · <span style={{ color: "var(--ink)" }}>{fact.v}</span>
          </div>
        </div>

        {/* Lightning exposure */}
        <div className="dash__cell">
          <div className="dash__cell-h">
            <span className="dash__cell-title">Fulmini rilevati</span>
            <span className="dash__cell-id">§ 04</span>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 10 }}>
            <span className="dash__big" style={{ color: "var(--stamp)" }}>2</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>
              entro 300m
            </span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, fontSize: 11 }}>
            <div className="mono" style={{ color: "var(--ink-mute)", letterSpacing: "0.06em" }}>
              <div>08·2022</div>
              <div style={{ color: "var(--ink)" }}>Genova — 120m</div>
            </div>
            <div className="mono" style={{ color: "var(--ink-mute)", letterSpacing: "0.06em" }}>
              <div>07·2023</div>
              <div style={{ color: "var(--ink)" }}>Palma — 240m</div>
            </div>
          </div>
          <div style={{
            marginTop: 12, padding: 8,
            border: "1px solid var(--stamp)",
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.1em",
            color: "var(--stamp)",
            textTransform: "uppercase"
          }}>
            ⚠ Verifica elettronica consigliata
          </div>
        </div>

        {/* Valutazione di mercato */}
        <div className="dash__cell">
          <div className="dash__cell-h">
            <span className="dash__cell-title">Valutazione mercato</span>
            <span className="dash__cell-id">§ 08</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
            <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>ASKING</span>
            <span className="mono tabular" style={{ fontSize: 13, color: "var(--ink-mute)", textDecoration: "line-through" }}>€ 1.180.000</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
            <span className="mono" style={{ fontSize: 10.5, color: "var(--accent-deep)", letterSpacing: "0.1em" }}>FAIR VALUE</span>
            <span style={{
              fontFamily: "var(--font-display)",
              fontSize: "var(--step-2)",
              letterSpacing: "-0.02em"
            }} className="tabular">€ 950.000</span>
          </div>
          <div style={{ height: 6, background: "var(--bg-elev)", position: "relative", border: "1px solid var(--rule)" }}>
            <div style={{ position: "absolute", left: "64%", width: 2, top: -4, bottom: -4, background: "var(--accent-deep)" }}/>
            <div style={{ position: "absolute", left: "20%", right: "15%", top: 0, bottom: 0, background: "var(--accent-soft)", opacity: 0.5 }}/>
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.08em", marginTop: 8, display: "flex", justifyContent: "space-between" }}>
            <span>12 comparabili</span>
            <span style={{ color: "var(--stamp)" }}>+24% sopramercato</span>
          </div>
        </div>

        {/* Sinistri */}
        <div className="dash__cell" style={{ borderBottom: 0 }}>
          <div className="dash__cell-h">
            <span className="dash__cell-title">Sinistri assicurativi</span>
            <span className="dash__cell-id">§ 10</span>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
            <span className="dash__big">1</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>dichiarato</span>
          </div>
          <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--rule)" }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--ink-mute)" }}>05 · 2019 · COLLISIONE SCAFO</div>
            <div style={{ fontSize: 13, marginTop: 3 }} className="mono">Danno € 47.200 · riparato</div>
          </div>
        </div>

        {/* Registry / flags */}
        <div className="dash__cell" style={{ borderBottom: 0 }}>
          <div className="dash__cell-h">
            <span className="dash__cell-title">Bandiere · storico</span>
            <span className="dash__cell-id">§ 07</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 4 }}>
            {[
              { f: "IT", lbl: "2016–2018", col: "var(--ink)" },
              { f: "FR", lbl: "2018–2021", col: "var(--ink)" },
              { f: "MT", lbl: "2021–2023", col: "var(--accent-deep)" },
              { f: "IT", lbl: "2023—", col: "var(--ink)" },
            ].map((b, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", borderBottom: "1px dotted var(--rule)", paddingBottom: 3 }}>
                <span className="mono" style={{ fontSize: 12, color: b.col, letterSpacing: "0.08em", fontWeight: 600 }}>{b.f}</span>
                <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>{b.lbl}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Recommendation */}
        <div className="dash__cell" style={{ borderBottom: 0, borderRight: 0, background: "var(--bg-elev)" }}>
          <div className="dash__cell-h">
            <span className="dash__cell-title">Raccomandazione SeaVIN</span>
            <span className="dash__cell-id">§ 14</span>
          </div>
          <div style={{
            fontFamily: "var(--font-display)",
            fontSize: "var(--step-1)",
            lineHeight: 1.15,
            fontStyle: "italic",
            marginTop: 4
          }}>
            Procedere con <span style={{ color: "var(--stamp)" }}>perizia strumentale</span> mirata a impianto elettrico e chiglia prima dell'atto.
          </div>
          <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span className="stamp">Firmato · 24 Mar 26</span>
            <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>Rev. 1.2</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.HeroDash = HeroDash;