/* Gridea site — Pricing & Free Trial pages */
const { useState: useStatePr } = React;

// ============ PRICING ============
const PLANS = [
  {
    id: 'trial', name: 'Tasuta proov', desc: 'Näe oma andmeid kohe, ilma kohustusteta.',
    monthly: 0, annual: 0, priceLabel: '€0', sub: '14 päeva',
    cta: 'Alusta tasuta', ctaPrimary: false, points: '∞',
    features: ['Kõik funktsioonid 14 päeva', 'Kuni 50 mõõtepunkti', 'Tariifisoovitused', 'Tasuvuskalkulaatorid', 'Krediitkaarti ei küsi'],
  },
  {
    id: 'starter', name: 'Starter', desc: 'Väiksele portfellile ja üksikobjektidele.',
    monthly: 49, annual: 39, priceLabel: '€49', sub: 'kuni 10 mõõtepunkti',
    cta: 'Vali Starter', ctaPrimary: false, points: '10',
    features: ['Kuni 10 mõõtepunkti', 'Tariifide optimeerimine', 'Tippvõimsuse jälgimine', 'Börsihinna jälgija + alarmid', 'Kuuaruanne e-mailile', '1 kasutaja'],
  },
  {
    id: 'pro', name: 'Professional', desc: 'Kasvavale portfellile ja meeskonnale.',
    monthly: 149, annual: 119, priceLabel: '€149', sub: 'kuni 50 mõõtepunkti',
    cta: 'Vali Professional', ctaPrimary: true, featured: true, points: '50',
    features: ['Kuni 50 mõõtepunkti', 'Kõik Starteris +', 'Anomaalia tuvastus + hoiatused', 'Grupid ja õigused', 'Päike & aku kalkulaator', 'Enne/pärast analüüs', 'Kuni 10 kasutajat', 'Prioriteetne tugi'],
  },
  {
    id: 'enterprise', name: 'Enterprise', desc: 'Suurtele portfellidele ja konsultantidele.',
    monthly: null, annual: null, priceLabel: 'Pakkumine', sub: '50+ mõõtepunkti',
    cta: 'Küsi pakkumist', ctaPrimary: false, points: '∞',
    features: ['Piiramatu mõõtepunktid', 'Kõik Professionalis +', 'API ligipääs', 'SSO / Active Directory', 'Mitme kliendi haldus', 'Pühendatud kontaktisik', 'SLA & kohandatud aruanded'],
  },
];

const COMPARE = [
  { group: 'Andmed ja ülevaade', rows: [
    { name: 'Mõõtepunktide arv', sub: null, vals: ['50 (proov)', '10', '50', '∞'] },
    { name: 'Portfelli kaart', vals: [true, true, true, true] },
    { name: 'Tarbimisajalugu', sub: '15-min täpsus', vals: [true, true, true, true] },
    { name: 'Grupid ja õigused', vals: [false, false, true, true] },
    { name: 'Kasutajaid', vals: ['1', '1', '10', '∞'] },
  ]},
  { group: 'Säästu tööriistad', rows: [
    { name: 'Tariifide optimeerimine', vals: [true, true, true, true] },
    { name: 'Tippvõimsuse jälgimine', sub: 'trahvide vältimine', vals: [true, true, true, true] },
    { name: 'Börsihinna jälgija + alarmid', vals: [true, true, true, true] },
    { name: 'Päike & aku tasuvus', vals: [true, false, true, true] },
    { name: 'A-suuruse soovitus', vals: [true, false, true, true] },
    { name: 'Enne/pärast analüüs', vals: [true, false, true, true] },
  ]},
  { group: 'Automaatika ja tugi', rows: [
    { name: 'Anomaalia tuvastus', vals: [true, false, true, true] },
    { name: 'Kuuaruanne e-mailile', vals: [true, true, true, true] },
    { name: 'API ligipääs', vals: [false, false, false, true] },
    { name: 'SSO / AD', vals: [false, false, false, true] },
    { name: 'Tugi', vals: ['E-mail', 'E-mail', 'Prioriteetne', 'SLA'] },
  ]},
];

const FAQS = [
  { q: 'Kust Gridea andmed saab?', a: 'Gridea kasutab Eesti Andmelao (Estfeed) andmevahetust. Annad ühekordse nõusoleku ja platvorm tõmbab su mõõtepunktide ajaloo automaatselt — 15-minutilise täpsusega. Midagi ei pea käsitsi sisestama ega installima.' },
  { q: 'Mis on mõõtepunkt?', a: 'Mõõtepunkt on üks elektriarvesti ehk liitumispunkt — igal on oma EIC-kood. Kui haldad mitut hoonet või objekti, on sul tõenäoliselt mitu mõõtepunkti. Hinnastame just nende arvu järgi.' },
  { q: 'Kas ma vajan IT-meeskonda?', a: 'Ei. Gridea on veebipõhine — logid sisse ja kõik on kohe seal. Seadistus võtab paar minutit ja ei nõua tehnilisi teadmisi. Platvorm on tehtud ärijuhile, mitte insenerile.' },
  { q: 'Kui turvalised mu andmed on?', a: 'Andmed liiguvad krüpteeritud kanalites ja neid hoitakse EList. Ligipääs on rangelt sinu organisatsiooni piires ja saad anda õigusi gruppide kaupa. Me ei jaga ega müü su tarbimisandmeid kunagi.' },
  { q: 'Kas pean lepingu sõlmima pikaks ajaks?', a: 'Ei. Kuumakse on igakuiselt katkestatav. Aastamakse puhul saad soodustuse, kuid sundust pole — alustad alati tasuta prooviga, ilma krediitkaardita.' },
  { q: 'Mis juhtub pärast tasuta proovi?', a: 'Proov kestab 14 päeva ja sisaldab kõiki funktsioone. Pärast valid sobiva paketi või jätad ootele — andmed ei kao. Me ei küsi krediitkaarti enne, kui sa ise paketi valid.' },
];

function PricingPage({ go }) {
  const [annual, setAnnual] = useStatePr(true);
  return (
    <div className="route-page">
      <section className="page-hero">
        <div className="page-hero-inner">
          <span className="eyebrow">Hinnakiri</span>
          <h1>Maksad mõõtepunktide järgi. <em>Mitte rohkem.</em></h1>
          <p>Alusta alati tasuta prooviga — näed oma andmeid kohe. Edasi vali pakett portfelli suuruse järgi. Krediitkaarti ei küsi enne, kui ise valid.</p>
          <div className="pricing-toggle">
            <button className={!annual ? 'active' : ''} onClick={() => setAnnual(false)}>Kuumakse</button>
            <button className={annual ? 'active' : ''} onClick={() => setAnnual(true)}>Aastamakse<span className="save-badge">−20%</span></button>
          </div>
        </div>
      </section>

      <section className="section light" style={{ paddingTop: 56 }}>
        <div className="container">
          <div className="pricing-grid">
            {PLANS.map(p => (
              <div key={p.id} className={`price-card ${p.featured ? 'featured' : ''}`}>
                {p.featured && <div className="price-badge">Populaarseim</div>}
                <div className="price-name">{p.name}</div>
                <div className="price-desc">{p.desc}</div>
                <div className="price-amount">
                  {p.monthly === null ? (
                    <span className="num" style={{ fontSize: 28 }}>Pakkumine</span>
                  ) : (
                    <>
                      <span className="num">€{annual ? p.annual : p.monthly}</span>
                      <span className="per">/ kuus</span>
                    </>
                  )}
                </div>
                <div className="price-sub">
                  {p.monthly === null ? p.sub : annual && p.monthly > 0 ? `${p.sub} · arveldatakse aastas` : p.sub}
                </div>
                <div className="price-cta">
                  <button className={`btn ${p.ctaPrimary ? 'btn-primary' : 'btn-ghost'}`} onClick={() => go(p.id === 'enterprise' ? 'trial' : 'trial')}>
                    {p.cta}{p.ctaPrimary && <GIcon name="arrow-right" size={14}/>}
                  </button>
                </div>
                <ul className="price-features">
                  {p.features.map((f, i) => (
                    <li key={i}><GIcon name="check" size={15}/> {f}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Comparison table */}
      <section className="section light" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="sh-center" style={{ marginBottom: 8 }}>
            <h2 className="section-h">Võrdle pakette</h2>
          </div>
          <div style={{ overflowX: 'auto' }}>
            <table className="compare-tbl">
              <thead>
                <tr>
                  <th style={{ minWidth: 240 }}>Funktsioon</th>
                  <th>Proov</th>
                  <th>Starter</th>
                  <th>Professional</th>
                  <th>Enterprise</th>
                </tr>
              </thead>
              <tbody>
                {COMPARE.map((g, gi) => (
                  <React.Fragment key={gi}>
                    <tr className="group-row"><td colSpan={5}>{g.group}</td></tr>
                    {g.rows.map((r, ri) => (
                      <tr key={ri} className="highlight-col">
                        <td>
                          <div className="feat-name">{r.name}</div>
                          {r.sub && <div className="feat-sub">{r.sub}</div>}
                        </td>
                        {r.vals.map((v, vi) => (
                          <td key={vi}>
                            {v === true ? <GIcon name="check" size={16} className="compare-check"/> :
                             v === false ? <span className="compare-dash">—</span> :
                             <span style={{ fontSize: 13, fontWeight: 600 }}>{v}</span>}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section light" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="sh-center"><h2 className="section-h">Korduma kippuvad küsimused</h2></div>
          <FAQ/>
        </div>
      </section>

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

function FAQ() {
  const [open, setOpen] = useStatePr(0);
  return (
    <div className="faq-list">
      {FAQS.map((f, i) => (
        <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            {f.q}
            <GIcon name="chevron-down" size={18} className="chev"/>
          </button>
          <div className="faq-a">{f.a}</div>
        </div>
      ))}
    </div>
  );
}

// ============ FREE TRIAL ============
function TrialPage({ go }) {
  const [form, setForm] = useStatePr({ firstName: '', lastName: '', email: '', company: '', regcode: '', website: '' });
  const [submitted, setSubmitted] = useStatePr(false);
  const [sending, setSending] = useStatePr(false);
  const [err, setErr] = useStatePr('');
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  // Posts to /api/signup, which emails the details. The success screen is shown
  // only after the server confirms — never optimistically, or we would again be
  // telling people they registered when nothing was delivered.
  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSending(true);
    setErr('');
    try {
      const res = await fetch('/api/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) { setErr(data.message || 'Registreerimine ebaõnnestus. Kirjuta palun support@gridea.io.'); return; }
      setSubmitted(true);
    } catch (_) {
      setErr('Ühendus ebaõnnestus. Kontrolli internetiühendust või kirjuta support@gridea.io.');
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="route-page">
      <section className="page-hero" style={{ paddingBottom: 48 }}>
        <div className="page-hero-inner">
          <span className="eyebrow">Tasuta proov</span>
          <h1>Näe oma elektriandmeid <em>14 päeva tasuta</em></h1>
          <p>Krediitkaarti ei küsi. Seadistus võtab paar minutit. Pärast registreerumist näed oma mõõtepunktide andmeid kohe.</p>
        </div>
      </section>

      <section className="section light" style={{ paddingTop: 0, marginTop: -32 }}>
        <div className="trial-split">
          <div className="trial-form-side">
            {!submitted ? (
              <form onSubmit={submit}>
                <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 6px' }}>Loo konto</h3>
                <p style={{ fontSize: 14, color: 'var(--l-muted)', margin: '0 0 16px' }}>Alusta minutiga. Kõik väljad on kohustuslikud.</p>
                <p style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--l-muted)', margin: '0 0 24px', padding: '10px 12px', borderRadius: 8, background: 'color-mix(in oklab, var(--brand) 8%, transparent)', border: '1px solid color-mix(in oklab, var(--brand) 22%, transparent)' }}>
                  Vabandame, hetkel on portaal kasutamiseks ainult juriidilistele isikutele.
                </p>
                <div className="trial-field">
                  <label htmlFor="tf-firstname">Eesnimi</label>
                  <input id="tf-firstname" type="text" value={form.firstName} onChange={upd('firstName')} placeholder="Mari" autoComplete="given-name" required/>
                </div>
                <div className="trial-field">
                  <label htmlFor="tf-lastname">Perekonnanimi</label>
                  <input id="tf-lastname" type="text" value={form.lastName} onChange={upd('lastName')} placeholder="Maasikas" autoComplete="family-name" required/>
                </div>
                <div className="trial-field">
                  <label htmlFor="tf-email">E-post</label>
                  <input id="tf-email" type="email" value={form.email} onChange={upd('email')} placeholder="mari@ettevote.ee" autoComplete="email" required/>
                </div>
                <div className="trial-field">
                  <label htmlFor="tf-company">Äriühingu nimi</label>
                  <input id="tf-company" type="text" value={form.company} onChange={upd('company')} placeholder="Ettevõte OÜ" autoComplete="organization" required/>
                </div>
                <div className="trial-field">
                  <label htmlFor="tf-regcode">Reg. nr.</label>
                  <input id="tf-regcode" type="text" value={form.regcode} onChange={upd('regcode')} placeholder="12345678" inputMode="numeric" pattern="[0-9]{8}" title="Eesti registrikood on 8-kohaline number" required/>
                </div>
                {/* Honeypot — hidden from people, tempting to bots. Never filled by a real user. */}
                <div style={{ position: 'absolute', left: -9999, width: 1, height: 1, overflow: 'hidden' }} aria-hidden="true">
                  <label>Veebileht<input type="text" tabIndex={-1} autoComplete="off" value={form.website} onChange={upd('website')}/></label>
                </div>

                {err && (
                  <div role="alert" style={{ fontSize: 13, lineHeight: 1.5, color: 'oklch(0.45 0.17 25)', background: 'oklch(0.96 0.04 25)', border: '1px solid oklch(0.6 0.18 25 / 0.25)', borderRadius: 8, padding: '10px 12px', marginTop: 8 }}>
                    {err}
                  </div>
                )}

                <button type="submit" className="btn btn-primary" disabled={sending} style={{ width: '100%', justifyContent: 'center', height: 44, marginTop: 8, opacity: sending ? 0.65 : 1, cursor: sending ? 'wait' : 'pointer' }}>
                  {sending ? 'Saadan...' : <>Alusta tasuta proovi <GIcon name="arrow-right" size={14}/></>}
                </button>
                <p style={{ fontSize: 12, color: 'var(--l-subtle)', textAlign: 'center', marginTop: 14 }}>
                  Registreerudes nõustud <a href="#tingimused" style={{ color: 'inherit', textDecoration: 'underline' }}>kasutustingimustega</a>. Krediitkaarti ei küsi.
                </p>
              </form>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', height: '100%', minHeight: 360 }}>
                <div style={{ width: 52, height: 52, borderRadius: 99, background: 'color-mix(in oklab, var(--green) 18%, transparent)', color: 'oklch(0.5 0.15 155)', display: 'grid', placeItems: 'center', marginBottom: 20 }}>
                  <GIcon name="check-circle" size={28}/>
                </div>
                <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 8px' }}>Aitäh, {form.firstName}!</h3>
                <p style={{ fontSize: 15, color: 'var(--l-muted)', margin: '0 0 20px' }}>
                  Võtame sinuga ühendust aadressil <strong>{form.email}</strong> ja seadistame
                  ettevõttele <strong>{form.company}</strong> konto.
                </p>
                <button className="btn btn-ghost" onClick={() => go('home')}>Tagasi avalehele</button>
              </div>
            )}
          </div>
          <div className="trial-benefits-side">
            <h3 style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 28px', color: 'var(--d-text)' }}>Mida sa kohe saad</h3>
            <div className="trial-benefit">
              <div className="trial-benefit-icon"><GIcon name="map" size={18}/></div>
              <div><h5>Kogu portfell kaardil</h5><p>Kõik mõõtepunktid ühe vaatega, värvitud staatuse järgi.</p></div>
            </div>
            <div className="trial-benefit">
              <div className="trial-benefit-icon"><GIcon name="sparkles" size={18}/></div>
              <div><h5>Tariifisoovitused kohe</h5><p>Näed esimese päevaga, kui palju saaksid tariifi vahetusega säästa.</p></div>
            </div>
            <div className="trial-benefit">
              <div className="trial-benefit-icon"><GIcon name="gauge" size={18}/></div>
              <div><h5>Trahvioht nähtavale</h5><p>Kohe selge, millised punktid ületavad lepingulist võimsust.</p></div>
            </div>
            <div className="trial-benefit">
              <div className="trial-benefit-icon"><GIcon name="shield-check" size={18}/></div>
              <div><h5>Andmed turvaliselt</h5><p>Krüpteeritud, EList, ei jagata kunagi kolmandatele.</p></div>
            </div>
            <div style={{ marginTop: 32, padding: 20, background: 'var(--d-surface)', borderRadius: 12, border: '1px solid var(--d-border-soft)' }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 10 }}>
                <div className="quote-avatar" style={{ width: 36, height: 36, fontSize: 13 }}>KR</div>
                <div><div style={{ fontWeight: 600, fontSize: 13, color: 'var(--d-text)' }}>Kristin Kaleviste</div><div style={{ fontSize: 11, color: 'var(--d-muted)' }}>Energiajuht · Omavalitsus</div></div>
              </div>
              <p style={{ fontSize: 13, color: 'var(--d-muted)', margin: 0, lineHeight: 1.5 }}>"Esimese päevaga nägime €4,200/kuu tariifi vigu. Proov tasus end ära enne, kui maksma hakkasime."</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PricingPage, TrialPage, FAQ });