/* v2 Dashboard preview — full-bleed ops mockup */

const V2_DASH_NAV = [
  { section: "GESTIÓ",  items: [
    { icon: "M3 3h7v7H3z M14 3h7v7h-7z M3 14h7v7H3z M14 14h7v7h-7z", label: "Resum cartera",        badge: "" },
    { icon: "M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z M9 3v15 M15 6v15", label: "Finques",              active: true, badge: "42" },
    { icon: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2 L14 8 L20 8", label: "IOF · PTGMF",        badge: "38" },
    { icon: "M12 22V12 M12 12L7 7 M12 12l5-5 M9 4l3-2 3 2 M12 2v5", label: "Inventari dasomètric", badge: "" },
  ]},
  { section: "TRÀMITS", items: [
    { icon: "M8 3v3M16 3v3M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z", label: "Convocatòries SIDER", badge: "4" },
    { icon: "M3 18l5-6 4 4 5-7 4 5 M3 21h18", label: "Costos",               badge: "" },
    { icon: "M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14h18zM3 13h18", label: "Documents",           badge: "" },
  ]},
];

const V2Dashboard = () => {
  /* Animate the sparkline bars */
  const bars = [4, 6, 5, 7, 8, 6, 9, 11, 9, 12, 14, 13];
  return (
    <section className="v2-section v2-section--tight">
      <div className="v2-container">
        <div className="reveal" style={{ maxWidth: 900, marginBottom: 56 }}>
          <V2Eyebrow>Dins de l'eina</V2Eyebrow>
          <h2>Una fitxa de finca.<br/><em>Tota la vida</em> en una pantalla.</h2>
          <p className="v2-section__lede">
            Obre una finca i veus els seus IOFs vigents, les actuacions executades,
            els costos acumulats i la propera convocatòria SIDER que li aplica.
          </p>
        </div>

        <div className="v2-dash reveal">
          <div className="v2-dash__top">
            <div className="v2-dash__top-lights"><span/><span/><span/></div>
            <span className="v2-dash__top-path">forestos.cat / cartera / Mas Castanyer · Bages</span>
            <div className="v2-dash__top-meta">
              <span><span className="v-accent">●</span> DEMO</span>
              <span>CATALUNYA</span>
              <span className="v-accent">CA</span>
            </div>
          </div>

          <div className="v2-dash__body">
            {/* Nav */}
            <aside className="v2-dash__nav">
              <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "4px 10px 18px", borderBottom: "1px solid var(--v2-line)" }}>
                <div style={{ width: 30, height: 30, background: "var(--v2-accent)", borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--v2-bg-void)" }}>
                  <V2Mark size={18}/>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--v2-font-display)", fontSize: 13, fontWeight: 600, color: "var(--v2-text)" }}>Consultora forestal</div>
                  <div style={{ fontFamily: "var(--v2-font-mono)", fontSize: 10, color: "var(--v2-text-muted)" }}>BAGES · 42 FINQUES</div>
                </div>
              </div>
              {V2_DASH_NAV.map((g) => (
                <div key={g.section}>
                  <div className="v2-dash__nav-section">{g.section}</div>
                  {g.items.map((it) => (
                    <div key={it.label} className={`v2-dash__nav-item ${it.active ? "is-active" : ""}`}>
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d={it.icon}/></svg>
                      <span style={{ flex: 1 }}>{it.label}</span>
                      {it.badge && <span className="v2-dash__nav-badge">{it.badge}</span>}
                    </div>
                  ))}
                </div>
              ))}
            </aside>

            {/* Main */}
            <main className="v2-dash__main">
              <div className="v2-dash__main-head">
                <div>
                  <div className="v2-dash__main-eyebrow">CARTERA · 2026</div>
                  <h3 className="v2-dash__main-title">Bages · 42 finques · IOFs vigents</h3>
                </div>
                <div className="v2-dash__main-actions">
                  <V2Button variant="ghost" icon={false}><span className="v2-btn--mini" style={{padding:0,background:"transparent"}}>Filtres · 3</span></V2Button>
                  <V2Button variant="primary" icon={false}>+ Nova finca</V2Button>
                </div>
              </div>

              <div className="v2-dash__stats">
                {[
                  { l: "FINQUES",      v: "42",     u: "a la cartera",       cls: "accent" },
                  { l: "IOF VIGENTS",  v: "38",     u: "plans actius",       cls: "" },
                  { l: "ACTUACIONS",   v: "17",     u: "obertes 2026",       cls: "cyan" },
                  { l: "VENCEN <90 d", v: "3",      u: "plans · revisar",    cls: "amber" },
                ].map((s, idx) => (
                  <div key={s.l} className="v2-dash__stat">
                    <div className="v2-dash__stat-lbl">{s.l}</div>
                    <div className={`v2-dash__stat-val ${s.cls ? `v2-dash__stat-val--${s.cls}` : ""}`}>{s.v}</div>
                    <div style={{ fontFamily: "var(--v2-font-mono)", fontSize: 10, color: "var(--v2-text-muted)", marginTop: 4 }}>{s.u}</div>
                    <div className="v2-dash__stat-spark">
                      {bars.map((b, i) => (
                        <span key={i} className={i >= bars.length - 4 - idx ? "lit" : ""} style={{ height: `${b * 1.1}px` }} />
                      ))}
                    </div>
                  </div>
                ))}
              </div>

              <div className="v2-dash__charts">
                <div className="v2-dash__chart-card">
                  <div className="v2-dash__chart-head">
                    <div className="v2-dash__chart-title">Actuacions executades · darrers 12 mesos</div>
                    <div className="v2-dash__chart-legend">
                      <span><span className="v-dot" style={{background: "var(--v2-accent)"}}/>Silvícoles</span>
                      <span><span className="v-dot" style={{background: "var(--v2-cyan)"}}/>Xarxa viària</span>
                      <span><span className="v-dot" style={{background: "var(--v2-amber)"}}/>Prevenció incendis</span>
                    </div>
                  </div>
                  <svg viewBox="0 0 600 180" style={{ width: "100%", height: 180 }}>
                    {/* grid */}
                    <g stroke="rgba(184,232,155,0.06)" strokeWidth="0.5">
                      {[0,1,2,3,4].map(i => <line key={i} x1="0" y1={36*i+10} x2="600" y2={36*i+10} />)}
                    </g>
                    {/* y labels */}
                    <g fontFamily="JetBrains Mono" fontSize="8" fill="rgba(184,232,155,0.45)" letterSpacing="0.1em">
                      <text x="0" y="10">2.4k</text>
                      <text x="0" y="118">1.0k</text>
                    </g>
                    {/* Q. ilex area */}
                    <path d="M30 120 L80 110 L130 95 L180 90 L230 75 L280 80 L330 60 L380 50 L430 55 L480 40 L530 35 L580 30 L580 160 L30 160 Z"
                      fill="rgba(184,232,155,0.18)" stroke="#B8E89B" strokeWidth="1.6" strokeLinejoin="round"
                      style={{ filter: "drop-shadow(0 0 6px rgba(184,232,155,0.25))"}}/>
                    {/* P. halepensis line */}
                    <path d="M30 140 L80 135 L130 132 L180 120 L230 118 L280 110 L330 100 L380 95 L430 90 L480 85 L530 80 L580 75"
                      fill="none" stroke="#67D9FF" strokeWidth="1.4" strokeLinejoin="round"/>
                    {/* P. nigra line */}
                    <path d="M30 152 L80 150 L130 148 L180 142 L230 138 L280 135 L330 128 L380 122 L430 118 L480 110 L530 108 L580 100"
                      fill="none" stroke="#FFA640" strokeWidth="1.4" strokeLinejoin="round"/>
                    {/* current marker */}
                    <circle cx="580" cy="30" r="3" fill="#B8E89B"/>
                    <circle cx="580" cy="30" r="6" fill="none" stroke="#B8E89B" strokeWidth="0.6" opacity="0.6">
                      <animate attributeName="r" from="3" to="9" dur="1.6s" repeatCount="indefinite"/>
                      <animate attributeName="opacity" from="0.6" to="0" dur="1.6s" repeatCount="indefinite"/>
                    </circle>
                  </svg>
                </div>

                <div className="v2-dash__chart-card">
                  <div className="v2-dash__chart-head">
                    <div className="v2-dash__chart-title">Mapa finca · Mas Castanyer</div>
                    <div className="v2-dash__chart-legend">
                      <span>12,4 HA · 4 RODALS</span>
                    </div>
                  </div>
                  <svg viewBox="0 0 320 160" style={{ width: "100%", height: 160 }}>
                    <rect width="320" height="160" fill="#04070A"/>
                    <g stroke="rgba(184,232,155,0.10)" strokeWidth="0.4" fill="none">
                      <path d="M0 130 Q80 110 160 115 T320 110"/>
                      <path d="M0 100 Q80 80 160 85 T320 80"/>
                      <path d="M0 70 Q80 50 160 55 T320 50"/>
                      <path d="M0 40 Q80 20 160 25 T320 20"/>
                    </g>
                    <path d="M40 110 L130 80 L210 100 L195 135 L80 140 Z"
                      fill="rgba(184,232,155,0.18)" stroke="#B8E89B" strokeWidth="1.4"
                      style={{ filter: "drop-shadow(0 0 6px rgba(184,232,155,0.3))"}}/>
                    <circle cx="140" cy="105" r="3" fill="#FFA640"/>
                    <circle cx="140" cy="105" r="8" fill="none" stroke="#FFA640" strokeWidth="0.6" opacity="0.6">
                      <animate attributeName="r" from="5" to="14" dur="1.6s" repeatCount="indefinite"/>
                      <animate attributeName="opacity" from="0.7" to="0" dur="1.6s" repeatCount="indefinite"/>
                    </circle>
                    <text x="10" y="14" fontFamily="JetBrains Mono" fontSize="8" fill="#B8E89B" letterSpacing="0.14em">MAS CASTANYER · 12,4 HA</text>
                    <text x="10" y="148" fontFamily="JetBrains Mono" fontSize="8" fill="rgba(184,232,155,0.5)" letterSpacing="0.1em">Q. ILEX 62% · P. HALEP 28%</text>
                  </svg>
                </div>
              </div>
            </main>

            {/* Right rail */}
            <aside className="v2-dash__right">
              <div className="v2-dash__right-section">
                <div className="v2-dash__right-title">Pròxim a vèncer</div>
                {[
                  ["PTGMF · Roureda Cardener", "47 dies"],
                  ["IOF · Mas Carbonell",      "83 dies"],
                  ["Convocatòria ARP/836/2026","41 dies"],
                ].map(([t, d], i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: i < 2 ? "1px solid var(--v2-line)" : "none" }}>
                    <span style={{ fontSize: 12.5, color: "var(--v2-text)" }}>{t}</span>
                    <span style={{ fontFamily: "var(--v2-font-mono)", fontSize: 11, color: "var(--v2-amber)" }}>{d}</span>
                  </div>
                ))}
              </div>

              <div className="v2-dash__right-section">
                <div className="v2-dash__right-title">Activitat recent</div>
                <V2LiveFeed/>
              </div>
            </aside>
          </div>
        </div>
      </div>
    </section>
  );
};

window.V2Dashboard = V2Dashboard;