/* FinBalance Pro — animated product mockup (hyper-simplified UI representation) */

function ProductMockup() {
  // bank balance table — K€. The 10/01 row has MPS below zero → giroconto.
  const days = [
    { d: "07/01", isp: "200.000", bper: "95.000", mps: "65.000", tot: "360.000" },
    { d: "08/01", isp: "180.000", bper: "95.000", mps: "40.000", tot: "315.000" },
    { d: "09/01", isp: "180.000", bper: "90.000", mps: "40.000", tot: "310.000" },
  ];

  return (
    <div className="fbp-mockup">
      <style>{`
        .fbp-mockup {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: linear-gradient(180deg, #fcfbf8 0%, #f5f4f0 100%);
          border: 1px solid var(--line);
          box-shadow: var(--shadow-product);
          font-family: inherit;
        }
        .fbp-mockup-glow {
          position: absolute; inset: -40px -40px auto -40px; height: 220px;
          background: radial-gradient(60% 80% at 50% 0%, rgba(24,197,168,0.16) 0%, transparent 70%);
          filter: blur(20px); pointer-events: none;
        }

        /* window chrome */
        .fbp-chrome {
          display: flex; align-items: center; gap: 10px;
          padding: 12px 18px;
          background: rgba(255,255,255,0.7);
          border-bottom: 1px solid var(--line);
          backdrop-filter: blur(6px);
        }
        .fbp-chrome .dots { display: flex; gap: 6px; }
        .fbp-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); opacity: 0.6; }
        .fbp-chrome .title { font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.005em; }
        .fbp-chrome .title em { color: var(--teal-dark); font-style: normal; opacity: 0.85; }
        .fbp-chrome .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); font-weight: 500; }
        .fbp-chrome .live .d {
          width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
          box-shadow: 0 0 0 0 rgba(24,197,168,0.6);
          animation: fbp-pulse 2.4s ease-out infinite;
        }
        @keyframes fbp-pulse {
          0%   { box-shadow: 0 0 0 0 rgba(24,197,168,0.7); }
          70%  { box-shadow: 0 0 0 10px rgba(24,197,168,0); }
          100% { box-shadow: 0 0 0 0 rgba(24,197,168,0); }
        }

        .fbp-pad { padding: 22px; }

        /* chart head */
        .fbp-chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
        .fbp-chart-head .l { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
        .fbp-chart-head .v { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; }
        .fbp-chart-head .v small { font-size: 13px; font-weight: 600; color: var(--teal-dark); margin-left: 8px; }

        .fbp-chart { position: relative; width: 100%; height: 180px; }
        .fbp-chart svg { display: block; width: 100%; height: 100%; }

        .fbp-draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: fbp-draw 2s cubic-bezier(.2,.7,.2,1) forwards; }
        .fbp-draw.d1 { animation-delay: 0.3s; }
        .fbp-draw.d2 { animation-delay: 0.5s; }
        .fbp-draw.d3 { animation-delay: 0.7s; }
        .fbp-draw.d4 { animation-delay: 0.9s; }
        @keyframes fbp-draw { to { stroke-dashoffset: 0; } }

        .fbp-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
        .fbp-legend .it { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-mid); font-weight: 500; }
        .fbp-legend .ln { width: 16px; height: 2.5px; border-radius: 2px; }
        .fbp-legend .ln.dash { background: none; border-top: 2px dashed; }

        /* x labels */
        .fbp-x { display: flex; justify-content: space-between; margin-top: 6px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--ink-soft); }

        /* ── balance table ── */
        .fbp-tbl { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 18px; }
        .fbp-tbl-cap { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 12px; }
        .fbp-grid {
          display: grid; grid-template-columns: 64px repeat(4, 1fr);
          font-size: 13px; font-variant-numeric: tabular-nums;
        }
        .fbp-grid .hd {
          font-size: 10.5px; font-weight: 600; color: var(--ink-soft);
          text-transform: uppercase; letter-spacing: 0.04em;
          padding: 0 14px 10px; text-align: right; border-bottom: 1px solid var(--line);
        }
        .fbp-grid .hd.l { text-align: left; }
        .fbp-grid .c {
          padding: 11px 14px; text-align: right; color: var(--navy); font-weight: 600;
          border-bottom: 1px solid var(--line);
        }
        .fbp-grid .c.l { text-align: left; color: var(--ink-mid); font-weight: 500; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; }
        .fbp-grid .c.tot { font-weight: 800; }

        /* giroconto active row */
        .fbp-grow { position: relative; display: contents; }
        .fbp-cell-wrap { position: relative; display: inline-block; white-space: nowrap; }
        .fbp-v-before, .fbp-v-after { display: inline-block; white-space: nowrap; }
        .fbp-v-after { position: absolute; right: 0; top: 0; opacity: 0; white-space: nowrap; }

        .fbp-mps-cell {
          animation: fbp-mps-hl 8s ease-in-out infinite; animation-delay: 1.8s;
        }
        @keyframes fbp-mps-hl {
          0%, 20%   { background: rgba(224,180,40,0.22); }
          30%, 40%  { background: rgba(224,180,40,0.22); }
          50%, 82%  { background: rgba(24,197,168,0.14); }
          90%, 100% { background: rgba(224,180,40,0.0); }
        }
        .fbp-isp-cell {
          animation: fbp-isp-hl 8s ease-in-out infinite; animation-delay: 1.8s;
        }
        @keyframes fbp-isp-hl {
          0%, 24% { background: transparent; }
          28%, 40% { background: rgba(63,130,246,0.12); }
          46%, 100% { background: transparent; }
        }

        .fbp-vb { animation: fbp-vb 8s ease-in-out infinite; animation-delay: 1.8s; }
        .fbp-va { animation: fbp-va 8s ease-in-out infinite; animation-delay: 1.8s; }
        @keyframes fbp-vb { 0%,38%{opacity:1} 44%,84%{opacity:0} 90%,100%{opacity:1} }
        @keyframes fbp-va { 0%,38%{opacity:0} 44%,84%{opacity:1} 90%,100%{opacity:0} }

        .fbp-neg { color: #c0631e; }
        .fbp-pos { color: var(--teal-dark); }

        /* flying giroconto chip */
        .fbp-fly-track { position: relative; height: 0; }
        .fbp-fly {
          position: absolute; top: -42px;
          display: inline-flex; align-items: center; gap: 6px;
          padding: 5px 11px; border-radius: 999px;
          background: var(--navy); color: var(--white);
          font-size: 11.5px; font-weight: 600; white-space: nowrap;
          box-shadow: 0 6px 16px -6px rgba(13,34,64,0.4);
          opacity: 0;
          animation: fbp-fly 8s ease-in-out infinite; animation-delay: 1.8s;
        }
        @keyframes fbp-fly {
          0%, 20%   { left: 26%; opacity: 0; transform: translateY(6px) scale(0.85); }
          26%       { opacity: 1; transform: translateY(0) scale(1); }
          40%       { left: 63%; opacity: 1; transform: translateY(0) scale(1); }
          46%, 100% { left: 63%; opacity: 0; transform: translateY(0) scale(1); }
        }

        /* status banner */
        .fbp-banner {
          margin-top: 16px; padding: 12px 16px; border-radius: 10px;
          font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px;
          background: var(--white); border: 1px solid var(--line); color: var(--navy);
          animation: fbp-banner 8s ease-in-out infinite; animation-delay: 1.8s;
        }
        @keyframes fbp-banner {
          0%, 20% { background: rgba(224,180,40,0.10); border-color: rgba(224,180,40,0.4); color: #8a6a16; }
          30%, 40% { background: rgba(224,180,40,0.10); border-color: rgba(224,180,40,0.4); color: #8a6a16; }
          50%, 82% { background: rgba(24,197,168,0.10); border-color: rgba(24,197,168,0.30); color: var(--teal-dark); }
          90%, 100% { background: rgba(224,180,40,0.10); border-color: rgba(224,180,40,0.4); color: #8a6a16; }
        }
        .fbp-banner-mark {
          width: 18px; height: 18px; border-radius: 50%;
          display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
          color: var(--white); font-size: 11px;
          animation: fbp-mark 8s ease-in-out infinite; animation-delay: 1.8s;
        }
        @keyframes fbp-mark {
          0%, 40% { background: #e0b428; }
          50%, 82% { background: var(--teal); }
          90%, 100% { background: #e0b428; }
        }
        .fbp-banner-msg { position: relative; flex: 1; }
        .fbp-banner-msg .m { display: inline-block; }
        .fbp-banner-msg .m.m-ok { position: absolute; left: 0; top: 0; }
        .fbp-banner-msg .m-warn { animation: fbp-msg-warn 8s ease-in-out infinite; animation-delay: 1.8s; }
        .fbp-banner-msg .m-ok   { animation: fbp-msg-ok 8s ease-in-out infinite; animation-delay: 1.8s; opacity: 0; }
        @keyframes fbp-msg-warn { 0%,40%{opacity:1} 46%,84%{opacity:0} 90%,100%{opacity:1} }
        @keyframes fbp-msg-ok   { 0%,40%{opacity:0} 46%,84%{opacity:1} 90%,100%{opacity:0} }

        @media (prefers-reduced-motion: reduce) {
          .fbp-draw, .fbp-mps-cell, .fbp-isp-cell, .fbp-vb, .fbp-va, .fbp-fly, .fbp-banner, .fbp-banner-mark, .fbp-banner-msg .m-warn, .fbp-banner-msg .m-ok { animation: none !important; }
          .fbp-draw { stroke-dashoffset: 0 !important; }
          .fbp-v-after { opacity: 0 !important; }
        }
      `}</style>

      <div className="fbp-mockup-glow"></div>

      <div className="fbp-chrome">
        <div className="dots"><span className="dot"></span><span className="dot"></span><span className="dot"></span></div>
        <div className="title">Piano di cassa · <em>90 giorni</em></div>
        <div className="live"><span className="d"></span>Live</div>
      </div>

      <div className="fbp-pad">
        {/* chart */}
        <div className="fbp-chart-head">
          <div>
            <div className="l">Saldo cumulato · tutti i conti</div>
            <div className="v">€ 360.000 <small>+90 giorni</small></div>
          </div>
        </div>

        <div className="fbp-chart">
          <svg viewBox="0 0 600 180" preserveAspectRatio="none">
            {/* zero line (gray dashed) */}
            <line x1="0" y1="120" x2="600" y2="120" stroke="#9aa0ad" strokeWidth="1" strokeDasharray="4 5" opacity="0.6"/>
            {/* fidi line (red dashed) */}
            <line x1="0" y1="134" x2="600" y2="134" stroke="#c94040" strokeWidth="1" strokeDasharray="5 5" opacity="0.5"/>
            {/* period markers */}
            <line x1="200" y1="12" x2="200" y2="150" stroke="#0d2240" strokeWidth="0.6" opacity="0.07"/>
            <line x1="400" y1="12" x2="400" y2="150" stroke="#0d2240" strokeWidth="0.6" opacity="0.07"/>

            {/* MPS (orange) */}
            <path className="fbp-draw d3" d="M0 116 L100 122 L200 112 L300 100 L400 104 L500 110 L600 96"
                  stroke="#e07030" strokeWidth="1.6" fill="none" opacity="0.7" strokeLinejoin="round"/>
            {/* BPER (teal) */}
            <path className="fbp-draw d2" d="M0 110 L100 108 L200 96 L300 70 L400 58 L500 60 L600 52"
                  stroke="#18c5a8" strokeWidth="1.6" fill="none" opacity="0.75" strokeLinejoin="round"/>
            {/* Intesa (blue) */}
            <path className="fbp-draw d1" d="M0 118 L100 116 L200 108 L300 92 L400 80 L500 70 L600 60"
                  stroke="#3b82f6" strokeWidth="1.6" fill="none" opacity="0.7" strokeLinejoin="round"/>
            {/* Totale (navy thick, stepped feel) */}
            <path id="fbp-totale-path" className="fbp-draw d4" d="M0 124 L100 126 L200 96 L300 58 L400 36 L500 34 L600 14"
                  stroke="#0d2240" strokeWidth="2.6" fill="none" strokeLinejoin="round" strokeLinecap="round"/>

            {/* pulsing endpoint */}
            <circle cx="595" cy="14" r="3.5" fill="#18c5a8">
              <animate attributeName="r" values="3.5;7;3.5" dur="2.2s" begin="1.2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="1;0.35;1" dur="2.2s" begin="1.2s" repeatCount="indefinite"/>
            </circle>
            <circle cx="595" cy="14" r="3.5" fill="#0d2240"/>

            {/* tracer dot travelling along the Totale line */}
            <circle r="4.5" fill="#18c5a8" opacity="0">
              <animate attributeName="opacity" values="0;1;1;1;0" keyTimes="0;0.05;0.5;0.95;1" dur="3.2s" begin="1.2s" repeatCount="indefinite"/>
              <animateMotion dur="3.2s" begin="1.2s" repeatCount="indefinite" calcMode="linear" keyPoints="0;1" keyTimes="0;1">
                <mpath href="#fbp-totale-path"/>
              </animateMotion>
            </circle>
          </svg>
        </div>

        <div className="fbp-x">
          <span>01/02</span><span>15/02</span><span>01/03</span><span>15/03</span><span>29/03</span>
        </div>

        <div className="fbp-legend">
          <span className="it"><span className="ln" style={{ background: "#3b82f6" }}></span>Intesa San Paolo</span>
          <span className="it"><span className="ln" style={{ background: "#18c5a8" }}></span>BPER Banca</span>
          <span className="it"><span className="ln" style={{ background: "#e07030" }}></span>MPS</span>
          <span className="it"><span className="ln" style={{ background: "#0d2240" }}></span>Totale</span>
          <span className="it"><span className="ln dash" style={{ borderColor: "#9aa0ad" }}></span>Zero</span>
          <span className="it"><span className="ln dash" style={{ borderColor: "#c94040" }}></span>Fidi cassa</span>
        </div>

        {/* balance table */}
        <div className="fbp-tbl">
          <div className="fbp-tbl-cap">Dettaglio saldi per giorno e conto</div>
          <div className="fbp-grid">
            <div className="hd l">Data</div>
            <div className="hd">Intesa S.P.</div>
            <div className="hd">BPER</div>
            <div className="hd">MPS</div>
            <div className="hd">Totale</div>

            {days.map((r, i) => (
              <React.Fragment key={i}>
                <div className="c l">{r.d}</div>
                <div className="c">€ {r.isp}</div>
                <div className="c">€ {r.bper}</div>
                <div className="c">€ {r.mps}</div>
                <div className="c tot">€ {r.tot}</div>
              </React.Fragment>
            ))}

            {/* GIROCONTO active row: 10/01 — MPS below zero */}
            <div className="c l">10/01</div>
            <div className="c fbp-isp-cell">
              <span className="fbp-cell-wrap">
                <span className="fbp-v-before fbp-vb">€ 180.000</span>
                <span className="fbp-v-after fbp-va">€ 130.000</span>
              </span>
            </div>
            <div className="c">€ 85.000</div>
            <div className="c fbp-mps-cell">
              <span className="fbp-cell-wrap">
                <span className="fbp-v-before fbp-vb fbp-neg">−€ 20.000</span>
                <span className="fbp-v-after fbp-va fbp-pos">€ 30.000</span>
              </span>
            </div>
            <div className="c tot">€ 245.000</div>
          </div>

          {/* flying transfer chip — sits over the row gap */}
          <div className="fbp-fly-track">
            <div className="fbp-fly">€ 50.000&nbsp;&nbsp;→</div>
          </div>

          {/* status banner */}
          <div className="fbp-banner">
            <span className="fbp-banner-mark">!</span>
            <div className="fbp-banner-msg">
              <span className="m m-warn">MPS sotto zero il 10/01 — serve copertura di € 20.000.</span>
              <span className="m m-ok">Giroconto € 50.000 da Intesa → MPS. Tutti i conti sopra lo zero.</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ProductMockup = ProductMockup;

/* ─── Aging Crediti e Debiti — refined table (resembles real product) ───── */

function AgingMockup() {
  // values in K€; "" = empty
  const rows = [
    { who: "Meccanica Veneta",   over: "60.000", b: ["",       "45.000", "",       "35.000"], tot: "140.000" },
    { who: "Precisione Toscana", over: "",       b: ["30.000", "",       "35.000", "25.000"], tot: "90.000" },
    { who: "Agro Equipment",     over: "",       b: ["22.000", "28.000", "",       "20.000"], tot: "70.000" },
    { who: "Metalworks Emilia",  over: "",       b: ["",       "28.000", "22.000", ""],       tot: "50.000" },
    { who: "Green Energy Comp.", over: "",       b: ["",       "",       "25.000", "20.000"], tot: "45.000" },
  ];
  const cell = (v) => v === "" ? <span className="fba-empty">—</span> : "€ " + v;

  return (
    <div className="fba">
      <style>{`
        .fba {
          border-radius: 20px; overflow: hidden;
          background: var(--white);
          border: 1px solid var(--line);
          box-shadow: var(--shadow-product);
          font-family: inherit;
        }
        .fba-head {
          display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
          padding: 22px 28px 20px;
        }
        .fba-head .t { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
        .fba-head .t small { display:block; font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
        .fba-chrome {
          display: flex; align-items: center; gap: 10px;
          padding: 12px 18px;
          background: rgba(255,255,255,0.7);
          border-bottom: 1px solid var(--line);
          backdrop-filter: blur(6px);
        }
        .fba-chrome .dots { display: flex; gap: 6px; }
        .fba-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); opacity: 0.6; }
        .fba-chrome .title { font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.005em; }
        .fba-chrome .title em { color: var(--teal-dark); font-style: normal; opacity: 0.85; }
        .fba-chrome .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); font-weight: 500; }
        .fba-chrome .live .d {
          width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
          box-shadow: 0 0 0 0 rgba(24,197,168,0.6);
          animation: fbp-pulse 2.4s ease-out infinite;
        }
        .fba-xls {
          display: inline-flex; align-items: center; gap: 7px;
          padding: 7px 13px; border-radius: 8px;
          background: transparent; color: var(--ink-mid);
          border: 1px solid var(--line);
          font-size: 12.5px; font-weight: 500; cursor: pointer;
          transition: background .15s ease, color .15s ease, border-color .15s ease;
        }
        .fba-xls:hover { background: var(--paper); color: var(--navy); border-color: var(--line-strong); }

        .fba-scroll { overflow-x: auto; }
        .fba-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 640px; }
        .fba-t th, .fba-t td { padding: 13px 18px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
        .fba-t th.l, .fba-t td.l { text-align: left; }

        /* group header row */
        .fba-grp th {
          padding: 10px 18px 6px; font-size: 10.5px; font-weight: 700;
          letter-spacing: 0.1em; text-transform: uppercase;
        }
        .fba-grp .g-scad { color: #c0631e; }
        .fba-grp .g-asc  { color: var(--teal-dark); }

        /* column header row */
        .fba-col th {
          font-size: 11px; font-weight: 600; color: var(--ink-soft);
          border-bottom: 1px solid var(--line); padding-top: 4px; padding-bottom: 12px;
        }

        /* zone tints via cell classes */
        .z-scad { background: rgba(224,112,48,0.05); }
        .z-asc  { background: rgba(24,197,168,0.045); }

        .fba-t tbody td { border-bottom: 1px solid var(--line); color: var(--navy); font-weight: 600; }
        .fba-t tbody td.l { font-weight: 600; }
        .fba-t tbody tr:last-child td { border-bottom: none; }
        .fba-t tbody tr:hover td { background: rgba(13,34,64,0.02); }
        .fba-t tbody tr:hover td.z-scad { background: rgba(224,112,48,0.09); }
        .fba-t tbody tr:hover td.z-asc  { background: rgba(24,197,168,0.085); }
        .fba-empty { color: #c2bdb2; font-weight: 400; }
        td.c-scad { color: #c0631e; }
        td.c-tot  { color: var(--navy); font-weight: 800; }

        .fba-t tfoot td {
          font-weight: 800; color: var(--navy); font-size: 13.5px;
          border-top: 2px solid var(--line-strong);
          padding-top: 15px; padding-bottom: 18px;
        }
        .fba-t tfoot td.c-scad { color: #c0631e; }
        .fba-t tfoot td.c-asc  { color: var(--teal-dark); }
      `}</style>

      <div className="fba-chrome">
        <div className="dots"><span className="dot"></span><span className="dot"></span><span className="dot"></span></div>
        <div className="title">Aging Crediti e Debiti · <em>Clienti</em></div>
        <div className="live"><span className="d"></span>Live</div>
      </div>

      <div className="fba-head">
        <div className="t">Scaduto e a scadere<small>Per controparte, in un'unica vista</small></div>
        <span style={{ flex: 1 }}></span>
        <a className="fba-xls">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
          Esporta Excel
        </a>
      </div>

      <div className="fba-scroll">
        <table className="fba-t">
          <thead>
            <tr className="fba-grp">
              <th className="l"></th>
              <th className="g-scad z-scad">Scaduto</th>
              <th className="g-asc z-asc" colSpan="4" style={{ textAlign: "center" }}>A scadere</th>
              <th></th>
            </tr>
            <tr className="fba-col">
              <th className="l">Controparte</th>
              <th className="z-scad">scaduto</th>
              <th className="z-asc">10 gg</th>
              <th className="z-asc">30 gg</th>
              <th className="z-asc">60 gg</th>
              <th className="z-asc">90 gg</th>
              <th>Totale</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td className="l">{r.who}</td>
                <td className="z-scad c-scad">{cell(r.over)}</td>
                <td className="z-asc">{cell(r.b[0])}</td>
                <td className="z-asc">{cell(r.b[1])}</td>
                <td className="z-asc">{cell(r.b[2])}</td>
                <td className="z-asc">{cell(r.b[3])}</td>
                <td className="c-tot">€ {r.tot}</td>
              </tr>
            ))}
          </tbody>
          <tfoot>
            <tr>
              <td className="l">Totale</td>
              <td className="z-scad c-scad">€ 60.000</td>
              <td className="z-asc">€ 52.000</td>
              <td className="z-asc">€ 101.000</td>
              <td className="z-asc">€ 82.000</td>
              <td className="z-asc">€ 100.000</td>
              <td className="c-asc">€ 395.000</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  );
}

window.AgingMockup = AgingMockup;

/* ─── Piano operativo — action plan table ───────────────────────────────── */

function PlanMockup() {
  const rows = [
    { d: "15/01/2026", type: "Giroconto",     tone: "navy", txt: <>Giroconto di <b>{"€ 40.000"}</b> da MPS a Intesa San Paolo.</> },
    { d: "20/01/2026", type: "Finanziamento", tone: "teal", txt: <>Nuovo finanziamento di <b>{"€ 200.000"}</b> accreditato su Intesa San Paolo.</> },
    { d: "20/01/2026", type: "Giroconto",     tone: "navy", txt: <>Giroconto di <b>{"€ 60.000"}</b> da Intesa San Paolo a BPER Banca.</> },
    { d: "20/01/2026", type: "Giroconto",     tone: "navy", txt: <>Giroconto di <b>{"€ 50.000"}</b> da Intesa San Paolo a MPS.</>, fresh: true },
  ];

  return (
    <div className="fbpl">
      <style>{`
        .fbpl {
          border-radius: 20px; overflow: hidden;
          background: var(--white);
          border: 1px solid var(--line);
          box-shadow: var(--shadow-product);
          font-family: inherit;
        }
        .fbpl-chrome {
          display: flex; align-items: center; gap: 10px;
          padding: 12px 18px;
          background: rgba(255,255,255,0.7);
          border-bottom: 1px solid var(--line);
          backdrop-filter: blur(6px);
        }
        .fbpl-chrome .dots { display: flex; gap: 6px; }
        .fbpl-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); opacity: 0.6; }
        .fbpl-chrome .title { font-size: 12.5px; font-weight: 600; color: var(--navy); }
        .fbpl-chrome .title em { color: var(--teal-dark); font-style: normal; opacity: 0.85; }
        .fbpl-chrome .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); font-weight: 500; }
        .fbpl-chrome .live .d {
          width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
          box-shadow: 0 0 0 0 rgba(24,197,168,0.6);
          animation: fbp-pulse 2.4s ease-out infinite;
        }

        .fbpl-head { display: flex; align-items: center; gap: 14px; padding: 20px 26px 16px; }
        .fbpl-head .t { font-size: 16px; font-weight: 700; color: var(--navy); }
        .fbpl-head .t small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
        .fbpl-head .pdf {
          margin-left: auto;
          display: inline-flex; align-items: center; gap: 7px;
          padding: 7px 13px; border-radius: 8px;
          background: transparent; color: var(--ink-mid); border: 1px solid var(--line);
          font-size: 12.5px; font-weight: 500; cursor: pointer;
          transition: background .15s ease, color .15s ease, border-color .15s ease;
        }
        .fbpl-head .pdf:hover { background: var(--paper); color: var(--navy); border-color: var(--line-strong); }

        .fbpl-scroll { overflow-x: auto; }
        .fbpl-grid {
          display: grid;
          grid-template-columns: 96px 124px 1fr;
          min-width: 440px;
        }
        .fbpl-grid .hd {
          font-size: 10.5px; font-weight: 600; color: var(--ink-soft);
          text-transform: uppercase; letter-spacing: 0.05em;
          padding: 10px 20px 12px; border-bottom: 1px solid var(--line);
        }
        .fbpl-grid .hd.r { text-align: right; }
        .fbpl-cell {
          padding: 16px 20px; border-bottom: 1px solid var(--line);
          display: flex; align-items: center;
          font-size: 13.5px; color: var(--navy);
        }
        .fbpl-row:last-child .fbpl-cell { border-bottom: none; }
        .fbpl-cell.date { color: var(--ink-mid); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; }
        .fbpl-cell.txt { display: block; padding-top: 16px; padding-bottom: 16px; }
        .fbpl-cell.txt p { margin: 0; color: var(--ink-mid); line-height: 1.45; text-wrap: pretty; }
        .fbpl-cell.txt b { color: var(--navy); font-weight: 700; white-space: nowrap; }
        .fbpl-cell.act { justify-content: flex-end; gap: 8px; }
        .fbpl-ico {
          width: 30px; height: 30px; border-radius: 8px;
          display: inline-flex; align-items: center; justify-content: center;
          border: 1px solid var(--line); color: var(--ink-soft);
          transition: background .15s ease, color .15s ease, border-color .15s ease;
        }
        .fbpl-ico.del:hover { background: rgba(201,64,64,0.08); color: #c94040; border-color: rgba(201,64,64,0.3); }
        .fbpl-ico.edit:hover { background: var(--paper); color: var(--navy); border-color: var(--line-strong); }

        .fbpl-badge {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 4px 11px; border-radius: 999px;
          font-size: 12px; font-weight: 600;
        }
        .fbpl-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
        .fbpl-badge.navy { background: rgba(13,34,64,0.07); color: var(--navy); }
        .fbpl-badge.teal { background: rgba(24,197,168,0.13); color: var(--teal-dark); }

        /* row stagger-in */
        .fbpl-row { display: contents; }
        .fbpl-row .fbpl-cell { opacity: 0; transform: translateY(6px); animation: fbpl-in .6s cubic-bezier(.2,.7,.2,1) forwards; }
        .fbpl-row.r0 .fbpl-cell { animation-delay: .15s; }
        .fbpl-row.r1 .fbpl-cell { animation-delay: .3s; }
        .fbpl-row.r2 .fbpl-cell { animation-delay: .45s; }
        .fbpl-row.r3 .fbpl-cell { animation-delay: .6s; }
        @keyframes fbpl-in { to { opacity: 1; transform: translateY(0); } }

        /* fresh row highlight pulse */
        .fbpl-row.fresh .fbpl-cell { animation: fbpl-in .6s cubic-bezier(.2,.7,.2,1) .6s forwards, fbpl-fresh 6s ease-in-out 1.2s infinite; }
        @keyframes fbpl-fresh {
          0%, 8%   { background: rgba(24,197,168,0.0); }
          16%, 30% { background: rgba(24,197,168,0.12); }
          46%, 100%{ background: rgba(24,197,168,0.0); }
        }

        @media (prefers-reduced-motion: reduce) {
          .fbpl-row .fbpl-cell { opacity: 1 !important; transform: none !important; animation: none !important; }
        }
      `}</style>

      <div className="fbpl-chrome">
        <div className="dots"><span className="dot"></span><span className="dot"></span><span className="dot"></span></div>
        <div className="title">Piano operativo · <em>azioni</em></div>
        <div className="live"><span className="d"></span>Live</div>
      </div>

      <div className="fbpl-head">
        <div className="t">Piano d'azione<small>Cosa fare, quando — pronto da condividere</small></div>
        <a className="pdf">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
          Esporta PDF
        </a>
      </div>

      <div className="fbpl-scroll">
        <div className="fbpl-grid">
          <div className="hd">Data</div>
          <div className="hd">Tipo operazione</div>
          <div className="hd">Testo</div>

          {rows.map((r, i) => (
            <div className={`fbpl-row r${i}${r.fresh ? " fresh" : ""}`} key={i}>
              <div className="fbpl-cell date">{r.d}</div>
              <div className="fbpl-cell"><span className={`fbpl-badge ${r.tone}`}>{r.type}</span></div>
              <div className="fbpl-cell txt"><p>{r.txt}</p></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.PlanMockup = PlanMockup;