/* Gridea site — Home & Features pages */
const { useState: useStatePg } = React;

const EYEBROW_LIGHT = { color: 'var(--brand-2)', background: 'color-mix(in oklab, var(--brand) 12%, transparent)', borderColor: 'color-mix(in oklab, var(--brand) 25%, transparent)' };

// ============ HOME ============
function HomePage({ go }) {
  return (
    <div className="route-page">
      {/* Hero */}
      <section className="hero" data-screen-label="home-hero">
        <div className="hero-inner">
          <div className="hero-meta">
            <span className="eyebrow"><span style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--brand)' }}/> Elektritarbija platvorm · Eesti</span>
          </div>
          <h1 className="hero-h">
            Sinu elektriandmed on keerulised.<br/><em>Meie teeme need lihtsaks.</em>
          </h1>
          <p className="hero-sub">
            Gridea koondab kõik su mõõtepunktid ühte vaatesse — näed kohe, kus raha lekib,
            miks võrguettevõte trahvib ja kas oled õigel tariifil. Ilma tabeliteta, ilma IT-ta.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" onClick={() => go('trial')} style={{ cursor: 'pointer' }}>Alusta tasuta <GIcon name="arrow-right" size={14}/></a>
            <a className="btn btn-ghost-dark" onClick={() => go('features')} style={{ cursor: 'pointer' }}>Vaata võimalusi</a>
          </div>
          <div className="hero-trust">
            <span className="hero-trust-item">Näed oma andmeid kohe</span>
            <span className="hero-trust-item">Krediitkaarti ei küsi</span>
            <span className="hero-trust-item">Andmevahetus AS Eleringiga</span>
          </div>
          {/* Ask-box sits BELOW the CTAs on purpose — it must not compete with
              the primary conversion action. */}
          <HeroAsk/>
          <div className="hero-screen">
            <div className="win-chrome">
              <div className="win-dot"/><div className="win-dot"/><div className="win-dot"/>
              <div className="win-url">app.gridea.io/portfolio</div>
            </div>
            <HeroMockup/>
          </div>
        </div>
      </section>

      <StatStrip/>

      {/* Pain points — the questions */}
      <section className="section light">
        <div className="container">
          <div className="sh-center" style={{ marginBottom: 8 }}>
            <span className="eyebrow" style={EYEBROW_LIGHT}>Kas tuleb tuttav ette?</span>
            <h2 className="section-h" style={{ marginTop: 16 }}>Küsimused, millele arve ei vasta</h2>
            <p className="lede" style={{ margin: '0 auto' }}>
              Kui haldad mitmeid mõõtepunkte, oled neid mõtteid ilmselt mõelnud - Gridea vastab neile, sinu enda andmete põhjal.
            </p>
          </div>
          <div className="pain-grid">
            <PainItem q="Miks ma võrguettevõttelt trahvi sain?" a={<>Näed täpselt, milline mõõtepunkt ületas <strong>lepingulise võimsuse</strong> ja millal — enne kui trahv arvele jõuab.</>}/>
            <PainItem q="Ega ma liiga palju ei maksa?" a={<>Gridea võrdleb kõiki Elektrilevi pakette ja näitab <strong>soodsaima valiku</strong> iga mõõtepunkti kohta.</>}/>
            <PainItem q="Kas tasub paigaldada päikesepaneele?" a={<>Tasuvuskalkulaator näitab <strong>tasuvusaega</strong> sinu tegeliku tarbimisprofiili järgi — paneelid ja aku.</>}/>
            <PainItem q="Mis peakaitsme (A)-suurust ma tegelikult vajan?" a={<>Näed 12 kuu tippkasutust ja saad soovituse, kas <strong>liitumisvõimsust vähendada</strong> ja säästa.</>}/>
            <PainItem q="Börsihind või fikseeritud?" a={<>Kõrvuti võrdlus sinu tarbimismustriga — kumb oleks viimase aasta jooksul <strong>odavam olnud</strong>.</>}/>
            <PainItem q="Kas mu muudatus aitas üldse?" a={<>Enne/pärast vaade <strong>kinnitab tegelike andmetega</strong>, kas harjumuse muutus tõi säästu.</>}/>
            <PainItem q="Kas ma püsin eelarves?" a={<>Koosta oma mõõtepunktidele <strong>eelarve</strong> ja jälgi seda jooksvalt.</>}/>
            <PainItem q="Kas mu soojuspump jälgib hinda?" a={<>Võrdle oma tarbimist <strong>elektrihinna vastu</strong> ning veendu, kas tarbid targalt.</>}/>
            <PainItem q="Kuidas ma näen tarbimisandmeid?" a={<>Suurtes asutustes on ligipääs elektri andmetele keeruline. <strong>Gridea teeb selle lihtsaks.</strong></>}/>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="section light" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="sh-center">
            <span className="eyebrow" style={EYEBROW_LIGHT}>Kuidas see käib</span>
            <h2 className="section-h" style={{ marginTop: 16 }}>Andmetest tegudeni kolme sammuga</h2>
          </div>
          <div className="steps">
            <div className="step">
              <div className="step-num">1</div>
              <h4>Ühenda andmed</h4>
              <p>Anna nõusolek Andmelaos — Gridea tõmbab su mõõtepunktide ajaloo automaatselt. Paari minutiga, ilma installimata.</p>
            </div>
            <div className="step">
              <div className="step-num">2</div>
              <h4>Näe kõike korraga</h4>
              <p>Kogu portfell ühel ekraanil — kaart, tarbimine, kulud, anomaaliad. Kohe, mitte arve saabudes.</p>
            </div>
            <div className="step">
              <div className="step-num">3</div>
              <h4>Tegutse ja säästa</h4>
              <p>Vaheta tariif, väldi trahvi, kinnita säästu. Iga soovitus tuleb koos täpse eurosummaga.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Feature preview — 2 rows */}
      <section className="section light" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="feature-row" style={{ marginBottom: 96 }}>
            <div className="feature-copy">
              <span className="eyebrow" style={EYEBROW_LIGHT}>Trahvide vältimine</span>
              <h3 className="feature-h" style={{ marginTop: 16 }}>Saa teada enne võrguettevõtet.</h3>
              <p className="lede">
                Iga ületus lepingulisest võimsusest tähendab trahvi. Gridea jälgib tippe reaalajas
                ja hoiatab, enne kui kahju tekib — ja soovitab õiget lepingulist võimsust.
              </p>
              <ul className="feature-bullets">
                <li><GIcon name="check" size={16}/> Reaalajas tippvõimsuse jälgimine</li>
                <li><GIcon name="check" size={16}/> Hoiatus enne ületust, mitte pärast trahvi</li>
                <li><GIcon name="check" size={16}/> Soovitus optimaalse lepingulise võimsuse kohta</li>
              </ul>
            </div>
            <div><CapacityMock/></div>
          </div>

          <div className="feature-row reverse">
            <div className="feature-copy">
              <span className="eyebrow" style={EYEBROW_LIGHT}>Tasuvus</span>
              <h3 className="feature-h" style={{ marginTop: 16 }}>Päikesepaneelid — jah või ei?</h3>
              <p className="lede">
                Lõpeta oletamine. Tõmba liugureid ja näe tasuvusaega sinu tegeliku tarbimise põhjal.
                Sama tööriist on platvormil iga mõõtepunkti kohta.
              </p>
              <ul className="feature-bullets">
                <li><GIcon name="check" size={16}/> Põhineb sinu tegelikul tarbimisprofiilil</li>
                <li><GIcon name="check" size={16}/> Arvestab aku mõjuga omatarbele</li>
                <li><GIcon name="check" size={16}/> Tasuvusaeg ja 15. aasta tulu</li>
              </ul>
            </div>
            <div><SolarPaybackWidget/></div>
          </div>
        </div>
      </section>

      {/* Forecast widget hook */}
      <section className="section dark" id="forecast-home">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48, alignItems: 'center', marginBottom: 48 }}>
            <div>
              <span className="eyebrow">Proovi siin</span>
              <h2 className="section-h" style={{ marginTop: 16, color: 'var(--d-text)' }}>
                Kuidas temperatuur muudab minu tarbimist?<br/>
                <span style={{ color: 'var(--d-muted)' }}>Tõmba liugurit ja vaata.</span>
              </h2>
            </div>
            <div>
              <p className="lede" style={{ color: 'var(--d-muted)' }}>
                See on Gridea reaalse eelarve prognoosi tööriist — sama, mida kliendid kasutavad
                järgmise aasta eelarve koostamiseks. Tõmba talve ja suve temperatuuri liuguritega ja
                näed kuluerinevust kohe.
              </p>
            </div>
          </div>
          <ForecastWidget/>
        </div>
      </section>

      <SocialProofSection/>
      <GettingStarted/>
      <HomeCTA go={go}/>
    </div>
  );
}

function GettingStarted() {
  return (
    <section className="section light" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="sh-center">
          <h2 className="section-h">Alustamine on lihtne</h2>
          <p className="lede" style={{ margin: '0 auto' }}>Ei mingit tarkvara ega tabelitööd. Kolm sammu — ja andmed on ees.</p>
        </div>
        <div className="steps">
          <div className="step">
            <div className="step-num">01</div>
            <h4>Anna volitus</h4>
            <p>Paari minutiga annad Grideale volituse oma mõõtepunktide andmetele.</p>
          </div>
          <div className="step">
            <div className="step-num">02</div>
            <h4>Andmed laevad ise</h4>
            <p>Tarbimisandmed ja ajalugu tulevad automaatselt Eleringi andmelaost — käsitsi ei pea midagi sisestama.</p>
          </div>
          <div className="step">
            <div className="step-num">03</div>
            <h4>Näed kohe tulemust</h4>
            <p>Soodsaim võrgupakett, kuluprognoos ja võrdlused on kohe ees.</p>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 16, flexWrap: 'wrap', marginTop: 40, fontSize: 13, color: 'var(--l-muted)' }}>
          <span>Töötab brauseris — midagi ei pea paigaldama</span>
          <span style={{ width: 4, height: 4, borderRadius: 99, background: 'var(--l-border-strong)' }}/>
          <span>Kogu meeskonnale, rollipõhise ligipääsuga</span>
          <span style={{ width: 4, height: 4, borderRadius: 99, background: 'var(--l-border-strong)' }}/>
          <span>Tasuta proov</span>
        </div>
      </div>
    </section>
  );
}

function PainItem({ q, a }) {
  return (
    <div className="pain-item">
      <div className="pain-q"><span className="qmark">?</span><span>{q}</span></div>
      <div className="pain-a">{a}</div>
    </div>
  );
}

function StatStrip() {
  return (
    <div style={{ background: 'var(--d-bg)', padding: '0 32px' }}>
      <div className="container">
        <div className="stat-strip">
          <div className="stat-item"><div className="stat-num">11</div><div className="stat-label">aastat kogemust</div></div>
          <div className="stat-item"><div className="stat-num">500+</div><div className="stat-label">klienti</div></div>
          <div className="stat-item"><div className="stat-num">30 000+</div><div className="stat-label">analüüsitud mõõtepunkti</div></div>
          <div className="stat-item"><div className="stat-num">€2,6 mil</div><div className="stat-label">säästetud võrgutasudelt</div></div>
        </div>
      </div>
    </div>
  );
}

function SocialProofSection() {
  return (
    <section className="section-tight light" style={{ borderTop: '1px solid var(--l-border)' }}>
      <div className="container">
        <div style={{ fontSize: 12, color: 'var(--l-subtle)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, textAlign: 'center', marginBottom: 16 }}>
          Usaldavad meid omavalitsused ja eraettevõtted
        </div>
        <div className="logo-strip">
          <div className="logo"><GIcon name="building" size={18}/> Stantum</div>
          <div className="logo"><GIcon name="gauge" size={18}/> Emajõe Veevärk</div>
          <div className="logo"><GIcon name="building" size={18}/> KEVILI</div>
          <div className="logo"><GIcon name="building" size={18}/> Maxima</div>
          <div className="logo"><GIcon name="map" size={18}/> Hoolekandeteenused</div>
          <div className="logo"><GIcon name="flame" size={18}/> Anija VV</div>
        </div>
        <div className="quote-grid">
          <div className="quote-card">
            <div className="quote-mark">"</div>
            <div className="quote-text">Esimese kuu jooksul leidsime kolme kooli juurest seadmevigu, mis maksid €4,200 kuus. Poleks ilma Gridea-ta märganud.</div>
            <div className="quote-author">
              <div className="quote-avatar">KR</div>
              <div><div className="quote-author-name">Kristin Kaleviste</div><div className="quote-author-role">Energiajuht · Omavalitsus</div></div>
            </div>
          </div>
          <div className="quote-card">
            <div className="quote-mark">"</div>
            <div className="quote-text">Eelarve koostamine võttis varem kaks nädalat. Nüüd 20 minutit — ja prognoos on täpsem kui käsitsi tehtud.</div>
            <div className="quote-author">
              <div className="quote-avatar" style={{ background: 'linear-gradient(135deg, var(--amber) 0%, oklch(0.65 0.18 50) 100%)' }}>AT</div>
              <div><div className="quote-author-name">Andres Tamm</div><div className="quote-author-role">CFO · Kinnisvara haldus</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeCTA({ go }) {
  return (
    <section className="section light">
      <div className="cta-band">
        <span className="eyebrow">Alusta täna</span>
        <h2 className="section-h" style={{ marginTop: 16, color: 'var(--d-text)' }}>
          Sinu mõõtepunktid saadavad juba andmeid.<br/>
          <span style={{ color: 'var(--brand)' }}>Vaata, mida nad räägivad.</span>
        </h2>
        <p style={{ fontSize: 16, color: 'var(--d-muted)', maxWidth: 520, margin: '20px auto 0' }}>
          Tasuta proov · näed oma andmeid kohe · krediitkaarti ei küsi
        </p>
        <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'center' }}>
          <a className="btn btn-primary" onClick={() => go('trial')} style={{ cursor: 'pointer' }}>Alusta tasuta <GIcon name="arrow-right" size={14}/></a>
          <a className="btn btn-ghost-dark" onClick={() => go('pricing')} style={{ cursor: 'pointer' }}>Vaata hinnakirja</a>
        </div>
      </div>
    </section>
  );
}

// ============ FEATURES ============
const FEATURE_LIST = [
  { id: 'overview', tab: 'Ülevaade', eyebrow: 'Portfelli ülevaade', title: 'Kõik mõõtepunktid ühel ekraanil.', lede: 'Andmed ei ole enam laiali eri portaalides ja Exceli failides. Üks vaade kogu portfellile — kaart, tarbimine, kulud, staatus. Õiged inimesed näevad õiget infot.', bullets: ['Kõik mõõtepunktid kaardil, värvitud staatuse järgi', 'Grupeeri hoonete, regioonide või äriüksuste kaupa', 'Õigused gruppide tasandil — jaga ligipääsu valikuliselt'], mock: 'groups' },
  { id: 'fines', tab: 'Trahvid', eyebrow: 'Trahvide vältimine', title: 'Saa teada enne võrguettevõtet.', lede: 'Lepingulise võimsuse ületamine tähendab trahvi. Gridea jälgib tippe reaalajas, hoiatab enne ületust ja soovitab õiget lepingulist võimsust.', bullets: ['Reaalajas tippvõimsuse jälgimine', 'Hoiatus enne ületust, mitte pärast trahvi', 'Soovitus optimaalse lepingulise võimsuse kohta'], mock: 'capacity' },
  { id: 'tariff', tab: 'Tariifid', eyebrow: 'Tariifide optimeerimine', title: 'Õige võrgutariif igale punktile.', lede: 'Elektrilevi pakub mitut võrgupaketti. Parim sõltub su tarbimismustrist — ja muutub aasta jooksul. Gridea arvutab soodsaima iga kuu.', bullets: ['Arvestab päeva/öö ja tippvõimsuse erinevustega', 'Soovitatud vahetus + ühe klikiga rakendamine', 'Iga kuu uuesti — sest tarbimine muutub'], mock: 'tariff' },
  { id: 'solar', tab: 'Päike & aku', eyebrow: 'Tasuvus', title: 'Päikesepaneelid ja aku — tasub või ei?', lede: 'Lõpeta oletamine. Kalkulaator näitab tasuvusaega sinu tegeliku tarbimise põhjal, arvestades ka aku mõju omatarbele.', bullets: ['Põhineb sinu tegelikul tarbimisprofiilil', 'Modelleerib aku mõju omatarbele', 'Tasuvusaeg, investeering ja 15 aasta tulu'], mock: 'solar' },
  { id: 'capacity', tab: 'A-suurus', eyebrow: 'Liitumisvõimsus', title: 'Maksad õige A-suuruse eest?', lede: 'Paljud ettevõtted maksavad liiga suure liitumisvõimsuse eest. Gridea näitab 12 kuu tippkasutust ja ütleb, kas saad ohutult vähendada.', bullets: ['12 kuu tippkasutuse analüüs', 'Soovitus liitumisvõimsuse kohta', 'Täpne aastane sääst eurodes'], mock: 'connection' },
  { id: 'spotfixed', tab: 'Börs vs fix', eyebrow: 'Lepingu valik', title: 'Börsihind või fikseeritud?', lede: 'Vaata, kumb oleks viimase aasta jooksul su tegeliku tarbimise juures odavam olnud — enne kui järgmise lepingu allkirjastad.', bullets: ['Kõrvuti võrdlus sinu tarbimismustriga', 'Kumulatiivne kulu üle 12 kuu', 'Tagasivaatav ja prognoositav stsenaarium'], mock: 'spotfixed' },
  { id: 'beforeafter', tab: 'Tarbimine/hind', eyebrow: 'Mõju mõõtmine', title: 'Kas su muudatus aitas?', lede: 'Muutsid küttegraafikut või nihutasid tarbimist? Gridea kinnitab tegelike andmetega, kas see tõi säästu — mitte oletus, vaid arv.', bullets: ['Enne/pärast võrdlus valitud kuupäeva järgi', 'Ilmastiku-korrigeeritud võrdlus', 'Kinnitatud sääst eurodes'], mock: 'beforeafter' },
  { id: 'anomaly', tab: 'Anomaaliad', eyebrow: 'Anomaaliad', title: 'Märka 1 päeva, mitte 1 kuuga.', lede: 'Riknenud termostaat, lahtine aken, unustatud ventilatsioon. Gridea õpib su mustreid ja hoiatab kohe, kui tarbimine kõrvale kaldub.', bullets: ['Õpib igapäevased ja hooajalised mustrid', 'E-kiri, SMS või Slack — sinu valik', 'Hoiatused gruppide kaupa õige inimeseni'], mock: 'anomaly' },
  { id: 'reports', tab: 'Aruanded', eyebrow: 'Aruanded', title: 'Kuuaruanne õigesse postkasti.', lede: 'Iga kuu alguses saadab Gridea automaatse kokkuvõtte sulle, juhtkonnale, raamatupidamisele. Üks vaade, mida kõik loevad.', bullets: ['Tarbimine, kulu, eelmise kuu võrdlus', 'Anomaalia kokkuvõte ja säästupotentsiaal', 'Adresseeritud inimese ja grupi kaupa'], mock: 'report' },
  { id: 'budget', tab: 'Eelarvestamine', eyebrow: 'Eelarvestamine', title: 'Koosta eelarve ja jälgi seda jooksvalt.', lede: 'Ehita oma mõõtepunktidele tarbimis- ja kuluprognoos temperatuurimudeli põhjal ning võrdle tegelikku tarbimist prognoosiga kuu kaupa — näed kohe, kus jääd alla või üle eelarve.', bullets: ['Automaatne prognoosimudel 8+ aasta ajaloost', 'Tegelik vs prognoos kuu ja päeva täpsusega', 'Vali hinnamudel — fikseeritud, NordPool või mõlemad', 'Ebakindluse vahemik ja mudeli täpsus (R², RMSE)'], mock: 'budget' },
];

function renderMock(kind) {
  switch (kind) {
    case 'groups': return <GroupsMock/>;
    case 'capacity': return <CapacityMock/>;
    case 'tariff': return <TariffMock/>;
    case 'solar': return <SolarPaybackWidget/>;
    case 'connection': return <ConnectionSizeMock/>;
    case 'spotfixed': return <SpotFixedMock/>;
    case 'beforeafter': return <BeforeAfterMock/>;
    case 'anomaly': return <AnomalyFeedMock/>;
    case 'report': return <ReportMock/>;
    case 'budget': return <BudgetMock/>;
    default: return null;
  }
}

function FeaturesPage({ go }) {
  const [active, setActive] = useStatePg('overview');
  const scrollTo = (id) => {
    setActive(id);
    const el = document.getElementById('feat-' + id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 90;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };
  return (
    <div className="route-page">
      <section className="page-hero">
        <div className="page-hero-inner">
          <span className="eyebrow">Funktsioonid</span>
          <h1>Kõik, mida vajad, et <em>elektrikulu kontrolli alla saada</em></h1>
          <p>Kümme tööriista, mis muudavad keerulised mõõtmisandmed selgeteks tegudeks. Igaüks vastab ühele küsimusele, mis sind tegelikult vaevab.</p>
          <div className="feature-tabs">
            {FEATURE_LIST.map(f => (
              <button key={f.id} className={`feature-tab ${active === f.id ? 'active' : ''}`} onClick={() => scrollTo(f.id)}>{f.tab}</button>
            ))}
          </div>
        </div>
      </section>

      <section className="section light">
        <div className="container">
          {FEATURE_LIST.map((f, i) => (
            <div key={f.id} id={'feat-' + f.id} className={`feature-row ${i % 2 === 1 ? 'reverse' : ''}`} style={{ marginBottom: i < FEATURE_LIST.length - 1 ? 96 : 0, scrollMarginTop: 90 }}>
              <div className="feature-copy">
                <span className="eyebrow" style={EYEBROW_LIGHT}>{String(i + 1).padStart(2, '0')} — {f.eyebrow}</span>
                <h3 className="feature-h" style={{ marginTop: 16 }}>{f.title}</h3>
                <p className="lede">{f.lede}</p>
                <ul className="feature-bullets">
                  {f.bullets.map((b, j) => <li key={j}><GIcon name="check" size={16}/> {b}</li>)}
                </ul>
              </div>
              <div>{renderMock(f.mock)}</div>
            </div>
          ))}
        </div>
      </section>

      <HomeCTA go={go}/>
    </div>
  );
}

Object.assign(window, { HomePage, FeaturesPage, StatStrip, SocialProofSection, HomeCTA, EYEBROW_LIGHT });