/* Gridea site — additional feature mockups */
const { useState: useStateM2 } = React;

// === Grid fine / capacity monitor ===
function CapacityMock() {
  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="gauge" size={14}/>
        <span>Tippvõimsuse jälgija — Spordihall A. Le Coq</span>
        <span className="spacer"/>
        <span className="pill" style={{ fontSize: 11, color: 'var(--red)', background: 'color-mix(in oklab, var(--red) 14%, transparent)', padding: '2px 8px', borderRadius: 99, fontWeight: 600 }}>Trahvioht</span>
      </div>
      <div style={{ padding: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>Aprilli tippvõimsus</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--l-muted)' }}>Lepingu piir 125 kW</span>
        </div>
        <div className="cap-gauge">
          <div className="cap-bar-track">
            <div className="cap-bar-fill" style={{ width: '92%' }}/>
            <div className="cap-limit-line" data-label="125 kW" style={{ left: '81%' }}/>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--l-subtle)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Mõõdetud tipp</div>
            <div style={{ fontSize: 24, fontWeight: 700, fontFamily: 'var(--mono)', color: 'var(--red)' }}>142 kW</div>
            <div style={{ fontSize: 12, color: 'var(--l-muted)' }}>14. apr · 18:45</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 11, color: 'var(--l-subtle)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Hinnanguline trahv</div>
            <div style={{ fontSize: 24, fontWeight: 700, fontFamily: 'var(--mono)', color: 'var(--red)' }}>€340</div>
            <div style={{ fontSize: 12, color: 'var(--l-muted)' }}>ületuse tasu</div>
          </div>
        </div>
        <div style={{ marginTop: 18, padding: '14px 16px', background: 'color-mix(in oklab, var(--brand) 7%, transparent)', borderRadius: 9, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <GIcon name="sparkles" size={16} className="" />
          <div style={{ fontSize: 13, color: 'var(--l-text)' }}>
            <strong>Soovitus:</strong> tõsta lepinguline võimsus 160 kW peale (+€14/kuu) — väldid €340 trahvi
            ja katad ka talvise tipu. Tasub end ära juba esimese ületuse pealt.
          </div>
        </div>
      </div>
    </div>
  );
}

// === A-size connection right-sizing ===
function ConnectionSizeMock() {
  // 12 months of peak amps used vs contracted 63A
  const peaks = [38, 36, 34, 31, 28, 24, 22, 25, 29, 33, 37, 41];
  const contracted = 63;
  const maxUsed = Math.max(...peaks);
  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="zap" size={14}/>
        <span>Liitumisvõimsuse analüüs — Lasteaed Mesimumm</span>
        <span className="spacer"/>
        <span style={{ fontSize: 11, color: 'var(--l-subtle)' }}>12 kuud</span>
      </div>
      <div style={{ padding: 24 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 130, position: 'relative', marginBottom: 8 }}>
          {/* contracted line */}
          <div style={{ position: 'absolute', left: 0, right: 0, top: 0, borderTop: '2px dashed var(--red)', zIndex: 2 }}>
            <span style={{ position: 'absolute', right: 0, top: -16, fontSize: 10, fontWeight: 700, color: 'var(--red)', fontFamily: 'var(--mono)' }}>Leping 63 A</span>
          </div>
          {/* recommended line at 40A */}
          <div style={{ position: 'absolute', left: 0, right: 0, top: `${(1 - 40 / contracted) * 100}%`, borderTop: '2px solid var(--brand-2)', zIndex: 2 }}>
            <span style={{ position: 'absolute', right: 0, top: -16, fontSize: 10, fontWeight: 700, color: 'var(--brand-2)', fontFamily: 'var(--mono)' }}>Soovitus 40 A</span>
          </div>
          {peaks.map((p, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', height: '100%' }}>
              <div style={{ width: '100%', height: `${(p / contracted) * 100}%`, background: 'var(--l-border-strong)', borderRadius: '3px 3px 0 0' }}/>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 4, fontSize: 9, color: 'var(--l-subtle)', fontFamily: 'var(--mono)', marginBottom: 18 }}>
          {['J','V','M','A','M','J','J','A','S','O','N','D'].map((m, i) => (
            <span key={i} style={{ flex: 1, textAlign: 'center' }}>{m}</span>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', padding: '14px 16px', background: 'color-mix(in oklab, var(--green) 8%, transparent)', borderRadius: 9 }}>
          <div className="group-mp-icon" style={{ background: 'color-mix(in oklab, var(--green) 16%, transparent)', color: 'oklch(0.5 0.15 155)' }}><GIcon name="trend-down" size={16}/></div>
          <div style={{ flex: 1, fontSize: 13 }}>
            Tippkasutus oli 12 kuu jooksul maksimaalselt <strong>{maxUsed} A</strong>. Sa maksad 63 A eest.
            Vii liitumine <strong>40 A</strong> peale.
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 20, fontWeight: 700, color: 'oklch(0.5 0.15 155)', fontFamily: 'var(--mono)' }}>−€216</div>
            <div style={{ fontSize: 11, color: 'var(--l-muted)' }}>aastas</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// === Spot vs fixed comparison ===
function SpotFixedMock() {
  const w = 460, h = 200, padL = 36, padR = 12, padT = 16, padB = 28;
  const innerW = w - padL - padR, innerH = h - padT - padB;
  // 12 months cumulative cost €k
  const spot =  [2.1, 4.0, 5.6, 6.8, 7.7, 8.4, 9.2, 10.1, 11.4, 13.2, 15.6, 18.1];
  const fixed = [2.4, 4.8, 7.2, 9.6, 12.0, 14.4, 16.8, 19.2, 21.6, 24.0, 26.4, 28.8].map(v => v * 0.66);
  const maxY = 20;
  const months = ['J','V','M','A','M','J','J','A','S','O','N','D'];
  const xStep = innerW / (spot.length - 1);
  const yScale = (v) => padT + innerH - (v / maxY) * innerH;
  const line = (arr) => arr.map((v, i) => `${padL + i * xStep},${yScale(v)}`).join(' ');
  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="trend-up" size={14}/>
        <span>Börs vs fikseeritud — kumulatiivne kulu</span>
        <span className="spacer"/>
        <span style={{ fontSize: 11, color: 'oklch(0.5 0.15 155)', fontWeight: 600 }}>Börs −€9,140/a</span>
      </div>
      <div className="svf-legend">
        <span className="svf-legend-item"><span style={{ width: 12, height: 2, background: 'var(--brand-2)' }}/>Börsihind (tegelik)</span>
        <span className="svf-legend-item"><span style={{ width: 12, height: 2, background: 'var(--l-border-strong)' }}/>Fikseeritud (0.19 €/kWh)</span>
      </div>
      <div style={{ padding: '0 12px 12px' }}>
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: h }}>
          {[0, 5, 10, 15, 20].map(v => (
            <g key={v}>
              <line x1={padL} y1={yScale(v)} x2={w - padR} y2={yScale(v)} stroke="var(--l-border)" strokeDasharray={v === 0 ? '0' : '2 4'}/>
              <text x={padL - 6} y={yScale(v) + 3} fontSize="9" textAnchor="end" fill="var(--l-subtle)" fontFamily="var(--mono)">€{v}k</text>
            </g>
          ))}
          {/* area between */}
          <path d={`${line(fixed).split(' ').map((p,i)=> (i===0?'M':'L')+p).join(' ')} L ${padL + (spot.length-1)*xStep},${yScale(spot[spot.length-1])} ${[...spot].reverse().map((v,ri)=>{const i=spot.length-1-ri; return 'L '+(padL+i*xStep)+','+yScale(v)}).join(' ')} Z`}
            fill="color-mix(in oklab, var(--green) 12%, transparent)"/>
          <polyline points={line(fixed)} fill="none" stroke="var(--l-border-strong)" strokeWidth="2" strokeDasharray="4 3"/>
          <polyline points={line(spot)} fill="none" stroke="var(--brand-2)" strokeWidth="2.5" strokeLinejoin="round"/>
          {months.map((m, i) => (
            <text key={i} x={padL + i * xStep} y={h - 8} fontSize="9" textAnchor="middle" fill="var(--l-subtle)" fontFamily="var(--mono)">{m}</text>
          ))}
        </svg>
      </div>
    </div>
  );
}

// === Before / after consumption change ===
function BeforeAfterMock() {
  const before = [42, 45, 41, 44, 43, 46, 42];
  const after = [32, 30, 33, 29, 31, 28, 30];
  const max = 50;
  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="trend-down" size={14}/>
        <span>Enne / pärast — küttegraafiku muudatus</span>
        <span className="spacer"/>
        <span style={{ fontSize: 11, color: 'oklch(0.5 0.15 155)', fontWeight: 600 }}>−29%</span>
      </div>
      <div style={{ padding: 24 }}>
        <div style={{ display: 'flex', gap: 24 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: 'var(--l-muted)', marginBottom: 8 }}>Enne · märts</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 90 }}>
              {before.map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${(v/max)*100}%`, background: 'var(--l-border-strong)', borderRadius: '3px 3px 0 0' }}/>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
            <GIcon name="arrow-right" size={20} className=""/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: 'var(--brand-2)', fontWeight: 600, marginBottom: 8 }}>Pärast · aprill</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 90 }}>
              {after.map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${(v/max)*100}%`, background: 'var(--brand)', borderRadius: '3px 3px 0 0' }}/>
              ))}
            </div>
          </div>
        </div>
        <div style={{ marginTop: 18, padding: '14px 16px', background: 'color-mix(in oklab, var(--green) 8%, transparent)', borderRadius: 9, fontSize: 13 }}>
          Öise kütte nihutamine soodsamasse tundi vähendas tarbimist <strong>29%</strong> —
          kinnitatud andmetega, mitte oletus. Sääst <strong style={{ color: 'oklch(0.5 0.15 155)' }}>€186/kuu</strong>.
        </div>
      </div>
    </div>
  );
}

// === Interactive solar / battery payback widget ===
function SolarPaybackWidget() {
  const [kw, setKw] = useStateM2(30);          // array size kWp
  const [battery, setBattery] = useStateM2(0);  // battery kWh
  const [price, setPrice] = useStateM2(16);     // electricity price s/kWh

  // crude model
  const annualYield = kw * 950;                       // kWh/year per kWp in Estonia
  const selfUse = battery > 0 ? 0.72 : 0.55;          // battery raises self-consumption
  const usedKwh = annualYield * selfUse;
  const exportKwh = annualYield * (1 - selfUse);
  const annualSaving = usedKwh * (price / 100) + exportKwh * 0.04; // export at ~4c
  const invest = kw * 780 + battery * 420;            // €/kWp + €/kWh
  const payback = invest / annualSaving;

  const years = 15;
  const cumByYear = Array.from({ length: years + 1 }, (_, y) => y * annualSaving);

  // chart
  const w = 380, h = 150, padL = 8, padR = 8, padT = 10, padB = 20;
  const innerW = w - padL - padR, innerH = h - padT - padB;
  const maxY = Math.max(invest * 1.2, cumByYear[years]);
  const xStep = innerW / years;
  const yScale = (v) => padT + innerH - (v / maxY) * innerH;
  const investY = yScale(invest);
  const breakEvenX = padL + Math.min(payback, years) * xStep;

  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="sun" size={14}/>
        <span>Päikesepaneelide tasuvuskalkulaator</span>
        <span className="spacer"/>
        <span style={{ fontSize: 11, color: 'var(--l-subtle)' }}>Proovi liugureid</span>
      </div>
      <div className="payback-widget">
        <div className="payback-controls">
          <div className="payback-slider-row">
            <div className="payback-slider-head">
              <span className="payback-slider-label">Paneelide võimsus</span>
              <span className="payback-slider-val">{kw} kWp</span>
            </div>
            <input className="payback-input" type="range" min={5} max={100} step={5} value={kw} onChange={e => setKw(+e.target.value)}/>
          </div>
          <div className="payback-slider-row">
            <div className="payback-slider-head">
              <span className="payback-slider-label">Aku maht</span>
              <span className="payback-slider-val">{battery > 0 ? battery + ' kWh' : 'Pole'}</span>
            </div>
            <input className="payback-input" type="range" min={0} max={60} step={5} value={battery} onChange={e => setBattery(+e.target.value)}/>
          </div>
          <div className="payback-slider-row">
            <div className="payback-slider-head">
              <span className="payback-slider-label">Elektri hind</span>
              <span className="payback-slider-val">{price} s/kWh</span>
            </div>
            <input className="payback-input" type="range" min={8} max={30} step={1} value={price} onChange={e => setPrice(+e.target.value)}/>
          </div>
        </div>
        <div className="payback-result">
          <div style={{ fontSize: 11, color: 'var(--l-subtle)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>Tasuvusaeg</div>
          <div className="payback-big" style={{ color: 'var(--brand-2)' }}>{payback.toFixed(1)}<span className="unit"> aastat</span></div>
          <div className="payback-stat-grid">
            <div className="payback-stat">
              <div className="l">Investeering</div>
              <div className="v">€{Math.round(invest).toLocaleString('et-EE')}</div>
            </div>
            <div className="payback-stat">
              <div className="l">Sääst/aasta</div>
              <div className="v" style={{ color: 'oklch(0.5 0.15 155)' }}>€{Math.round(annualSaving).toLocaleString('et-EE')}</div>
            </div>
            <div className="payback-stat">
              <div className="l">15a tulu</div>
              <div className="v">€{Math.round(cumByYear[15] - invest).toLocaleString('et-EE')}</div>
            </div>
          </div>
          <div className="payback-chart">
            <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: '100%' }}>
              {/* investment line */}
              <line x1={padL} y1={investY} x2={w - padR} y2={investY} stroke="var(--red)" strokeWidth="1.5" strokeDasharray="4 3"/>
              <text x={w - padR} y={investY - 5} fontSize="9" textAnchor="end" fill="var(--red)" fontFamily="var(--mono)">Investeering</text>
              {/* cumulative savings */}
              <polyline points={cumByYear.map((v, y) => `${padL + y * xStep},${yScale(v)}`).join(' ')}
                fill="none" stroke="var(--brand-2)" strokeWidth="2.5" strokeLinejoin="round"/>
              {/* break-even marker */}
              {payback <= years && (
                <g>
                  <circle cx={breakEvenX} cy={investY} r="4" fill="var(--brand-2)"/>
                  <line x1={breakEvenX} y1={investY} x2={breakEvenX} y2={h - padB} stroke="var(--brand-2)" strokeWidth="1" strokeDasharray="2 2" opacity="0.5"/>
                </g>
              )}
              {[0, 5, 10, 15].map(y => (
                <text key={y} x={padL + y * xStep} y={h - 6} fontSize="9" textAnchor="middle" fill="var(--l-subtle)" fontFamily="var(--mono)">{y}a</text>
              ))}
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
}

// === Budget / forecast-vs-actual (Eelarvestamine) ===
function BudgetMock() {
  const months = ['Jaan','Veebr','Märts','Apr','Mai','Juuni','Juuli','Aug','Sept','Okt','Nov','Dets'];
  // [prognoos, tegelik|null, over?]
  const data = [
    [199.2, 198.0, false], [176.0, 182.7, true], [170.1, 158.8, false],
    [147.6, 129.2, false], [130.5, 114.9, false], [93.7, 91.5, false],
    [85.4, 40.3, false], [104.6, null], [142.5, null],
    [155.4, null], [173.5, null], [188.3, null],
  ];
  const max = 210;
  return (
    <div className="feature-mock">
      <div className="mock-toolbar">
        <GIcon name="wallet" size={14}/>
        <span>Eelarve — Tarbija X · 2026</span>
        <span className="spacer"/>
        <span className="pill" style={{ fontSize: 11, color: 'oklch(0.5 0.15 155)', background: 'color-mix(in oklab, var(--green) 14%, transparent)', padding: '2px 8px', borderRadius: 99, fontWeight: 600 }}>Juuli · 47% kasutatud</span>
      </div>
      <div style={{ padding: '18px 20px 20px' }}>
        <div className="svf-legend" style={{ padding: '0 0 14px' }}>
          <span className="svf-legend-item"><span style={{ width: 12, height: 10, background: 'color-mix(in oklab, var(--brand) 30%, transparent)', borderRadius: 2 }}/>Prognoos</span>
          <span className="svf-legend-item"><span style={{ width: 12, height: 10, background: 'var(--green)', borderRadius: 2 }}/>Tegelik — eelarves</span>
          <span className="svf-legend-item"><span style={{ width: 12, height: 10, background: 'var(--red)', borderRadius: 2 }}/>Üle eelarve</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 5, height: 150, position: 'relative' }}>
          {data.map(([prog, teg, over], i) => (
            <div key={i} style={{ flex: 1, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', gap: 2, height: '100%' }}>
              <div title={`Prognoos ${prog} MWh`} style={{ width: '42%', height: `${(prog / max) * 100}%`, background: 'color-mix(in oklab, var(--brand) 28%, transparent)', borderRadius: '3px 3px 0 0' }}/>
              {teg !== null && (
                <div title={`Tegelik ${teg} MWh`} style={{ width: '42%', height: `${(teg / max) * 100}%`, background: over ? 'var(--red)' : 'var(--green)', borderRadius: '3px 3px 0 0' }}/>
              )}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 5, marginTop: 6 }}>
          {months.map((m, i) => (
            <span key={i} style={{ flex: 1, textAlign: 'center', fontSize: 9, color: 'var(--l-subtle)', fontFamily: 'var(--mono)' }}>{m.slice(0, 1)}</span>
          ))}
        </div>
        <div style={{ marginTop: 16, padding: '14px 16px', background: 'color-mix(in oklab, var(--brand) 7%, transparent)', borderRadius: 9, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <GIcon name="trend-down" size={16} className=""/>
          <div style={{ fontSize: 13, color: 'var(--l-text)' }}>
            Aasta seni <strong>3.4% alla prognoosi</strong> — v.a veebruar (+4%). Prognoosimudel R² 0.18,
            põhineb 8.4 aasta ajalool ja temperatuuril.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CapacityMock, ConnectionSizeMock, SpotFixedMock, BeforeAfterMock, SolarPaybackWidget, BudgetMock });