/* Gridea — mockup components used in hero + feature rows */

// === Estonia map pin positions (rough lat/lng → relative coords inside box) ===
const MAP_PINS = [
  { x: 70, y: 38, status: 'ok', city: 'Tartu' },
  { x: 50, y: 26, status: 'ok', city: 'Tallinn' },
  { x: 51, y: 28, status: 'ok' },
  { x: 52, y: 28, status: 'ok' },
  { x: 49, y: 27, status: 'ok' },
  { x: 75, y: 35, status: 'ok' },
  { x: 72, y: 42, status: 'ok' },
  { x: 78, y: 60, status: 'ok' },
  { x: 38, y: 48, status: 'ok' },
  { x: 32, y: 35, status: 'ok' },
  { x: 60, y: 32, status: 'ok' },
  { x: 65, y: 52, status: 'ok' },
  { x: 42, y: 58, status: 'ok' },
  { x: 28, y: 65, status: 'ok' },
  { x: 55, y: 70, status: 'ok' },
  { x: 80, y: 28, status: 'ok' },
  { x: 18, y: 30, status: 'ok' },
  { x: 22, y: 42, status: 'ok' },
  { x: 88, y: 48, status: 'ok' },
  { x: 68, y: 18, status: 'ok' },
  { x: 45, y: 35, status: 'ok' },
  { x: 58, y: 45, status: 'ok' },
  { x: 73, y: 67, status: 'ok' },
  { x: 36, y: 25, status: 'ok' },
  { x: 64, y: 24, status: 'warning', city: 'Rakvere' },
  { x: 30, y: 75, status: 'warning', city: 'Pärnu' },
  { x: 56, y: 38, status: 'critical', city: 'Tartu — Tamme Kool' },
];

function HeroMockup() {
  return (
    <div className="heromock">
      <div className="heromock-map">
        <svg className="estonia-map" viewBox="0 0 400 280" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          {/* very rough Estonia silhouette */}
          <path
            d="M 30 90 Q 50 60 90 65 L 130 60 Q 180 50 230 55 L 290 60 Q 340 70 360 90 L 365 130 Q 355 160 320 175 L 290 195 Q 240 210 200 205 L 140 210 Q 90 215 60 195 L 35 160 Q 25 130 30 90 Z"
            fill="color-mix(in oklab, var(--brand) 8%, transparent)"
            stroke="color-mix(in oklab, var(--brand) 30%, transparent)"
            strokeWidth="1"
          />
          {/* tiny dotted line for Estonia-Russia border feel */}
          <path d="M 365 90 Q 370 130 365 175" fill="none" stroke="color-mix(in oklab, var(--brand) 20%, transparent)" strokeWidth="1" strokeDasharray="2 3"/>
        </svg>
        <div className="map-grid-bg"/>
        {MAP_PINS.map((p, i) => (
          <div
            key={i}
            className={`map-pin ${p.status === 'warning' ? 'amber' : p.status === 'critical' ? 'red' : ''}`}
            style={{ left: p.x + '%', top: p.y + '%', animationDelay: (i * 0.15) + 's' }}
          />
        ))}
        {/* Callout for critical pin */}
        <div className="map-callout" style={{ left: '50%', top: '50%' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
            <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--red)' }}/>
            <span style={{ fontWeight: 600 }}>Anomaalia</span>
            <span className="mono" style={{ marginLeft: 'auto', color: 'var(--d-subtle)', fontSize: 11 }}>2 min</span>
          </div>
          <div style={{ color: 'var(--d-muted)', fontSize: 11 }}>Tartu — Tamme Kool</div>
          <div style={{ color: 'var(--d-text)', marginTop: 6 }}>
            <span style={{ fontFamily: 'var(--mono)', color: 'var(--red)', fontWeight: 600 }}>+340%</span>
            {' '}vs ootus
          </div>
        </div>
        <div className="map-stats">
          <div className="map-stat">
            <span className="v">247</span>
            mõõtepunkti
          </div>
          <div className="map-stat">
            <span className="v amber">3</span>
            hoiatust
          </div>
          <div className="map-stat">
            <span className="v red">1</span>
            kriitiline
          </div>
        </div>
      </div>

      <div className="heromock-aside">
        <div className="heromock-side-header">
          <div className="heromock-side-title">Anomaaliad</div>
          <span style={{ fontSize: 11, color: 'var(--d-subtle)', fontFamily: 'var(--mono)' }}>Live</span>
        </div>
        <div className="feed-row">
          <div className="feed-dot red"/>
          <div className="feed-content">
            <div className="feed-title">Tarbimine +340% normaalsest</div>
            <div className="feed-sub">Tamme Kool · katlamaja</div>
          </div>
          <div className="feed-time">2 min</div>
        </div>
        <div className="feed-row">
          <div className="feed-dot amber"/>
          <div className="feed-content">
            <div className="feed-title">Öine tarbimine tõusis 22%</div>
            <div className="feed-sub">Pumbajaam P-04</div>
          </div>
          <div className="feed-time">18 min</div>
        </div>
        <div className="feed-row">
          <div className="feed-dot amber"/>
          <div className="feed-content">
            <div className="feed-title">Tippvõimsus &gt; lepingulisest</div>
            <div className="feed-sub">Spordihall A. Le Coq</div>
          </div>
          <div className="feed-time">1 h</div>
        </div>
        <div className="feed-row">
          <div className="feed-dot"/>
          <div className="feed-content">
            <div className="feed-title">Tariifivahetus sooritatud</div>
            <div className="feed-sub">Lasteaed Mesimumm</div>
          </div>
          <div className="feed-time">3 h</div>
        </div>
        <div className="feed-row">
          <div className="feed-dot"/>
          <div className="feed-content">
            <div className="feed-title">12 uut soovitust</div>
            <div className="feed-sub">€1,840/kuu sääst</div>
          </div>
          <div className="feed-time">6 h</div>
        </div>
      </div>
    </div>
  );
}

// === Anomaly feed mockup (feature section) ===
function Sparkline({ data, color = 'currentColor', anomaly = false }) {
  const w = 100, h = 36;
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const step = w / (data.length - 1);
  const pts = data.map((v, i) => `${i * step},${h - ((v - min) / range) * (h - 4) - 2}`).join(' ');
  const lastY = h - ((data[data.length - 1] - min) / range) * (h - 4) - 2;
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      {anomaly && <circle cx={w} cy={lastY} r="3" fill={color}/>}
    </svg>
  );
}

function AnomalyFeedMock() {
  const normalData = [12, 14, 11, 13, 15, 12, 14, 13, 15, 12, 14, 13];
  const spikeData = [12, 14, 11, 13, 15, 12, 14, 13, 15, 12, 28, 52];
  const driftData = [8, 9, 8, 10, 11, 12, 13, 14, 15, 17, 18, 20];
  const okData = [22, 24, 23, 25, 24, 26, 25, 27, 26, 28, 27, 28];

  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="bell" size={14}/>
        <span>Hoiatused — viimased 24h</span>
        <span className="spacer"/>
        <span style={{ fontSize: 11, color: 'var(--l-subtle)', fontFamily: 'var(--mono)' }}>4 aktiivset</span>
      </div>
      <div className="anomaly-feed">
        <div className="anomaly-item severe">
          <div className="anomaly-icon severe"><GIcon name="alert" size={16}/></div>
          <div className="anomaly-text">
            <div className="anomaly-title">Tarbimine +340% baastasemest</div>
            <div className="anomaly-meta">Tartu Tamme Kool · katlamaja · 2 min tagasi</div>
          </div>
          <div className="anomaly-spark">
            <Sparkline data={spikeData} color="var(--red)" anomaly/>
          </div>
          <div className="anomaly-value">
            <div className="delta up">+340%</div>
            <div className="label">vs prog</div>
          </div>
        </div>
        <div className="anomaly-item warning">
          <div className="anomaly-icon warning"><GIcon name="trend-up" size={16}/></div>
          <div className="anomaly-text">
            <div className="anomaly-title">Öine baasvool drift +22%</div>
            <div className="anomaly-meta">Pumbajaam P-04 · 18 min tagasi · seadme leke?</div>
          </div>
          <div className="anomaly-spark">
            <Sparkline data={driftData} color="var(--amber)" anomaly/>
          </div>
          <div className="anomaly-value">
            <div className="delta up" style={{ color: 'oklch(0.55 0.13 60)' }}>+22%</div>
            <div className="label">14 päeva</div>
          </div>
        </div>
        <div className="anomaly-item warning">
          <div className="anomaly-icon warning"><GIcon name="gauge" size={16}/></div>
          <div className="anomaly-text">
            <div className="anomaly-title">Tippvõimsus üle lepingu</div>
            <div className="anomaly-meta">Spordihall A. Le Coq · 1 h tagasi · 142 kW vs 125 kW</div>
          </div>
          <div className="anomaly-spark">
            <Sparkline data={[100, 105, 98, 110, 115, 108, 112, 118, 125, 130, 138, 142]} color="var(--amber)" anomaly/>
          </div>
          <div className="anomaly-value">
            <div className="delta up" style={{ color: 'oklch(0.55 0.13 60)' }}>+14%</div>
            <div className="label">kW</div>
          </div>
        </div>
        <div className="anomaly-item">
          <div className="anomaly-icon info"><GIcon name="eye-off" size={16}/></div>
          <div className="anomaly-text">
            <div className="anomaly-title">Andmete edastus katkenud</div>
            <div className="anomaly-meta">Veetorn Pärnu · 4 h tagasi</div>
          </div>
          <div className="anomaly-spark">
            <Sparkline data={[14, 13, 15, 12, 14, 13, 15, 12, 0, 0, 0, 0]} color="var(--l-muted)"/>
          </div>
          <div className="anomaly-value">
            <div className="label" style={{ color: 'var(--l-muted)' }}>—</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// === Tariff comparison mockup ===
function TariffMock() {
  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="sparkles" size={14}/>
        <span>Tariifide võrdlus — Tamme Kool</span>
        <span className="spacer"/>
        <span style={{ fontSize: 11, color: 'var(--l-subtle)' }}>Aprill 2026 · 4,820 kWh</span>
      </div>
      <table className="tariff-tbl">
        <thead>
          <tr>
            <th>Pakett</th>
            <th style={{ textAlign: 'right' }}>Kuus</th>
            <th style={{ textAlign: 'right' }}>Sääst</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div style={{ fontWeight: 500 }}>Üldpakett <span className="pill muted" style={{ marginLeft: 6 }}>Käib</span></div>
              <div style={{ fontSize: 11, color: 'var(--l-subtle)' }}>Ühtne hind · €0.0481/kWh</div>
            </td>
            <td className="mono num" style={{ textAlign: 'right', fontWeight: 600 }}>€237.84</td>
            <td style={{ textAlign: 'right', color: 'var(--l-subtle)' }}>—</td>
          </tr>
          <tr className="recommended">
            <td>
              <div style={{ fontWeight: 600 }}>Päeva/öö pakett <span className="pill brand" style={{ marginLeft: 6 }}>Soovitatud</span></div>
              <div style={{ fontSize: 11, color: 'var(--l-subtle)' }}>Päev €0.0612 · öö €0.0354</div>
            </td>
            <td className="mono num" style={{ textAlign: 'right', fontWeight: 700 }}>€198.20</td>
            <td style={{ textAlign: 'right' }}><span className="savings-pill">−€39.64/kuu</span></td>
          </tr>
          <tr>
            <td>
              <div style={{ fontWeight: 500 }}>Võimsuspakett</div>
              <div style={{ fontSize: 11, color: 'var(--l-subtle)' }}>+ €3.85/kW võimsustasu</div>
            </td>
            <td className="mono num" style={{ textAlign: 'right' }}>€224.10</td>
            <td style={{ textAlign: 'right' }}><span style={{ fontSize: 12, color: 'oklch(0.5 0.15 155)', fontWeight: 600 }}>−€13.74</span></td>
          </tr>
          <tr>
            <td>
              <div style={{ fontWeight: 500 }}>Võrk 4</div>
              <div style={{ fontSize: 11, color: 'var(--l-subtle)' }}>Madalpinge kuni 63 A</div>
            </td>
            <td className="mono num" style={{ textAlign: 'right' }}>€241.02</td>
            <td style={{ textAlign: 'right', color: 'var(--red)', fontWeight: 600, fontSize: 12 }}>+€3.18</td>
          </tr>
        </tbody>
      </table>
      <div style={{ padding: '14px 18px', background: 'var(--l-surface-2)', borderTop: '1px solid var(--l-border)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <GIcon name="sparkles" size={14} className="" />
        <span style={{ fontSize: 13, color: 'var(--l-muted)', flex: 1 }}>
          Soovitatud vahetus säästab <span className="mono" style={{ fontWeight: 700, color: 'oklch(0.5 0.15 155)' }}>€475.68/aastas</span>
        </span>
        <button className="btn btn-primary btn-sm">Vaheta tariif</button>
      </div>
    </div>
  );
}

// === Group management mock ===
function GroupsMock() {
  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="folder" size={14}/>
        <span>Grupid</span>
        <span className="spacer"/>
        <button className="btn btn-ghost btn-sm" style={{ height: 26, fontSize: 11 }}><GIcon name="plus" size={11}/> Uus grupp</button>
      </div>
      <div className="groups-mock">
        <div className="groups-tree">
          <div className="tree-node">
            <GIcon name="chevron-down" size={12}/>
            <GIcon name="building" size={14}/>
            <span style={{ flex: 1 }}>Tartu LV</span>
            <span className="tree-count">47</span>
          </div>
          <div className="tree-node child">
            <GIcon name="school" size={13}/>
            <span style={{ flex: 1 }}>Koolid</span>
            <span className="tree-count">12</span>
          </div>
          <div className="tree-node child active">
            <GIcon name="school" size={13}/>
            <span style={{ flex: 1 }}>Lasteaiad</span>
            <span className="tree-count">8</span>
          </div>
          <div className="tree-node child">
            <GIcon name="building" size={13}/>
            <span style={{ flex: 1 }}>Pumplad</span>
            <span className="tree-count">100</span>
          </div>
          <div className="tree-node child">
            <GIcon name="lightbulb" size={13}/>
            <span style={{ flex: 1 }}>Tänavavalgustus</span>
            <span className="tree-count">22</span>
          </div>
          <div className="tree-node">
            <GIcon name="chevron-right" size={12}/>
            <GIcon name="building" size={14}/>
            <span style={{ flex: 1 }}>Tallinna Vesi</span>
            <span className="tree-count">28</span>
          </div>
          <div className="tree-node">
            <GIcon name="chevron-right" size={12}/>
            <GIcon name="building" size={14}/>
            <span style={{ flex: 1 }}>Viljandi LV</span>
            <span className="tree-count">219</span>
          </div>
        </div>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12, padding: '0 4px' }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Lasteaiad</div>
            <span style={{ fontSize: 11, color: 'var(--l-subtle)', fontFamily: 'var(--mono)' }}>8 mõõtepunkti · 64.2 MWh aprill</span>
          </div>
          <div className="groups-list">
            {[
              { name: 'Lasteaed Mesimumm', eic: '38ZEE-LV3037028546', kwh: '8,420 kWh' },
              { name: 'Lasteaed Sipsik', eic: '38ZEE-LV5037036465', kwh: '7,940 kWh' },
              { name: 'Lasteaed Päike', eic: '38ZEE-LV0037044384', kwh: '9,180 kWh' },
              { name: 'Lasteaed Lepatriinu', eic: '38ZEE-LV1037052303', kwh: '6,720 kWh' },
              { name: 'Lasteaed Tähekene', eic: '38ZEE-LV2037060222', kwh: '8,640 kWh' },
            ].map((mp, i) => (
              <div key={i} className="group-item">
                <div className="group-mp-icon"><GIcon name="zap" size={14}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="group-mp-name">{mp.name}</div>
                  <div className="group-mp-eic">{mp.eic}</div>
                </div>
                <div className="group-mp-kwh">{mp.kwh}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// === Monthly report email mockup ===
function ReportMock() {
  return (
    <div className="feature-mock" style={{ background: 'var(--l-surface-2)' }}>
      <div className="mock-toolbar">
        <GIcon name="mail" size={14}/>
        <span>kuuaruanne@gridea.io → mart.kallas@tartu.ee</span>
        <span className="spacer"/>
        <span style={{ fontSize: 11, color: 'var(--l-subtle)' }}>1. mai · 06:00</span>
      </div>
      <div style={{ background: 'var(--l-surface)', margin: 20, borderRadius: 8, border: '1px solid var(--l-border)', overflow: 'hidden' }}>
        <div style={{ padding: '24px 28px', borderBottom: '1px solid var(--l-border)' }}>
          <div style={{ fontSize: 11, color: 'var(--brand-2)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 8 }}>Aprill 2026 · Tartu Linnavalitsus</div>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
            142.6 MWh tarbiti aprillis. <span style={{ color: 'oklch(0.5 0.15 155)' }}>€1,840 säästupotentsiaali</span> tariifide vahetamisega.
          </div>
        </div>
        <div style={{ padding: '20px 28px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--l-subtle)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>Tarbimine</div>
            <div style={{ fontSize: 24, fontWeight: 700, fontFamily: 'var(--mono)' }}>142.6</div>
            <div style={{ fontSize: 12, color: 'var(--l-muted)' }}>MWh · −8% vs märts</div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--l-subtle)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>Kulu</div>
            <div style={{ fontSize: 24, fontWeight: 700, fontFamily: 'var(--mono)' }}>€14,820</div>
            <div style={{ fontSize: 12, color: 'var(--l-muted)' }}>sh. KM · −€680 vs märts</div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: 'var(--l-subtle)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>Anomaaliad</div>
            <div style={{ fontSize: 24, fontWeight: 700, fontFamily: 'var(--mono)' }}>4</div>
            <div style={{ fontSize: 12, color: 'var(--l-muted)' }}>3 lahendatud · 1 vajab tähelepanu</div>
          </div>
        </div>
        <div style={{ padding: '4px 28px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 80, marginTop: 8 }}>
            {[155, 148, 162, 142, 0, 0, 0, 0, 0, 0, 0, 0].map((v, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, height: '100%', justifyContent: 'flex-end' }}>
                <div style={{ width: '100%', height: v ? `${v / 2}%` : '4%', background: i === 3 ? 'var(--brand-2)' : v ? 'var(--l-border-strong)' : 'var(--l-surface-2)', borderRadius: '2px 2px 0 0' }}/>
                <div style={{ fontSize: 9, color: 'var(--l-subtle)', fontWeight: 600 }}>{['J','V','M','A','M','J','J','A','S','O','N','D'][i]}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: '14px 28px', background: 'color-mix(in oklab, var(--brand) 8%, transparent)', display: 'flex', alignItems: 'center', gap: 12, borderTop: '1px solid var(--l-border)' }}>
          <GIcon name="sparkles" size={16} className=""/>
          <div style={{ flex: 1, fontSize: 13 }}>
            <strong>12 mõõtepunkti</strong> saaks tariifi vahetamisega kokku hoida <strong>€1,840/kuu</strong>
          </div>
          <a href="#" style={{ fontSize: 13, color: 'var(--brand-2)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>
            Vaata soovitusi <GIcon name="arrow-right" size={12}/>
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroMockup, AnomalyFeedMock, TariffMock, GroupsMock, ReportMock, Sparkline });