/* Gridea site — nav, hash router, footer, app shell */
const { useState: useStateRt, useEffect: useEffectRt } = React;

/* Full Gridea lockup (mark + wordmark + .io badge) — 383x127 PNG, ratio ~3.02:1.
   Because the wordmark is part of the image, callers must NOT render a "Gridea"
   text node next to it.
   variant 'light' = white artwork, for dark backgrounds (nav and footer both are).
   variant 'dark'  = navy artwork, for light backgrounds. */
function SiteLogo({ variant = 'light', height = 28 }) {
  return (
    <img
      src={`assets/logo-${variant}.png`}
      alt="Gridea"
      width={Math.round(height * 383 / 127)}
      height={height}
      style={{ height, width: 'auto', display: 'block' }}
    />
  );
}

const ROUTES = [
  { id: 'home', label: 'Avaleht' },
  { id: 'features', label: 'Funktsioonid' },
  { id: 'pricing', label: 'Hinnakiri' },
];

function SiteNav({ route, go }) {
  // Below 680px the horizontal links are replaced by this toggled panel — before
  // it existed, phone visitors had no way to reach Funktsioonid or Hinnakiri.
  const [menuOpen, setMenuOpen] = useStateRt(false);
  const navTo = (id) => { setMenuOpen(false); go(id); };

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="brand" onClick={() => navTo('home')} style={{ cursor: 'pointer' }} aria-label="Gridea — avaleht">
          <SiteLogo/>
        </a>
        <div className="nav-links">
          {ROUTES.map(r => (
            <a key={r.id} className={route === r.id ? 'active' : ''} onClick={() => navTo(r.id)} style={{ cursor: 'pointer' }}>{r.label}</a>
          ))}
        </div>
        <div className="nav-cta">
          <a
            className="nav-login"
            href="https://portal.gridea.io"
            target="_blank"
            rel="noopener noreferrer"
            title="Avaneb uues aknas"
          >
            Logi sisse <GIcon name="arrow-up-right" size={13}/>
          </a>
          <a className="btn btn-primary btn-sm" onClick={() => navTo('trial')} style={{ cursor: 'pointer' }}>Alusta tasuta <GIcon name="arrow-right" size={12}/></a>
        </div>
        <button
          className="nav-toggle"
          onClick={() => setMenuOpen(!menuOpen)}
          aria-expanded={menuOpen}
          aria-controls="nav-mobile-menu"
          aria-label={menuOpen ? 'Sulge menüü' : 'Ava menüü'}
        >
          <GIcon name={menuOpen ? 'plus' : 'menu'} size={20} className={menuOpen ? 'nav-toggle-x' : ''}/>
        </button>
      </div>

      <div id="nav-mobile-menu" className={`nav-mobile ${menuOpen ? 'open' : ''}`} hidden={!menuOpen}>
        {ROUTES.map(r => (
          <a key={r.id} className={route === r.id ? 'active' : ''} onClick={() => navTo(r.id)}>{r.label}</a>
        ))}
        <a href="https://portal.gridea.io" target="_blank" rel="noopener noreferrer" onClick={() => setMenuOpen(false)}>
          Logi sisse <GIcon name="arrow-up-right" size={13}/>
        </a>
        <a className="btn btn-primary" onClick={() => navTo('trial')}>Alusta tasuta <GIcon name="arrow-right" size={13}/></a>
      </div>
    </nav>
  );
}

function SiteFooter({ go }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-col">
          <div className="brand" style={{ marginBottom: 16 }}>
            <SiteLogo height={30}/>
          </div>
          <p style={{ fontSize: 14, color: 'var(--d-muted)', margin: 0, maxWidth: 320 }}>
            Elektritarbija platvorm ettevõtetele ja omavalitsustele. Keerulised andmed, lihtsad otsused.
          </p>
        </div>
        <div className="footer-col">
          <h5>Toode</h5>
          <ul>
            <li><a onClick={() => go('features')} style={{ cursor: 'pointer' }}>Funktsioonid</a></li>
            <li style={{ display: 'none' }}><a onClick={() => go('pricing')} style={{ cursor: 'pointer' }}>Hinnakiri</a></li>
            <li><a onClick={() => go('trial')} style={{ cursor: 'pointer' }}>Tasuta proov</a></li>
            <li><a href="#">API</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Ettevõte</h5>
          <ul>
            <li><a onClick={() => go('meist')} style={{ cursor: 'pointer' }}>Meist</a></li>
            <li><a onClick={() => go('tookohad')} style={{ cursor: 'pointer' }}>Töökohad</a></li>
            <li><a onClick={() => go('kontakt')} style={{ cursor: 'pointer' }}>Kontakt</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Õiguslik</h5>
          <ul>
            <li><a onClick={() => go('privaatsus')} style={{ cursor: 'pointer' }}>Privaatsuspoliitika</a></li>
            <li><a onClick={() => go('tingimused')} style={{ cursor: 'pointer' }}>Kasutustingimused</a></li>
            <li><a onClick={() => go('andmekaitse')} style={{ cursor: 'pointer' }}>Andmekaitse</a></li>
            <li><a onClick={() => go('kupsised')} style={{ cursor: 'pointer' }}>Küpsised</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Gridea OÜ · Registrikood 17165308 · Eesti</span>
        <span style={{ display: 'flex', gap: 16 }}>
          <a href="#">Eesti</a>
          <a href="#">English</a>
        </span>
      </div>
    </footer>
  );
}

function SiteApp() {
  const [route, setRoute] = useStateRt(() => (window.location.hash.slice(1) || 'home'));

  useEffectRt(() => {
    // popstate as well as hashchange: navigating home uses pushState (see go),
    // which does not fire hashchange, so back/forward needs both.
    // Normalise /#home to the canonical bare URL — on first load and whenever a
    // shared link brings it back into an already-loaded page.
    const normalise = () => {
      if (window.location.hash === '#home') {
        history.replaceState(null, '', window.location.pathname + window.location.search);
      }
    };
    const onNav = () => { normalise(); setRoute(window.location.hash.slice(1) || 'home'); };
    window.addEventListener('hashchange', onNav);
    window.addEventListener('popstate', onNav);
    normalise();
    return () => {
      window.removeEventListener('hashchange', onNav);
      window.removeEventListener('popstate', onNav);
    };
  }, []);

  const go = (r) => {
    if (r === 'home') {
      // Home is the bare URL — writing #home would give the same page two
      // addresses (gridea.io and gridea.io/#home).
      history.pushState(null, '', window.location.pathname + window.location.search);
      setRoute('home');
    } else {
      window.location.hash = r;
    }
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
  };

  let page;
  switch (route) {
    case 'features': page = <FeaturesPage go={go}/>; break;
    case 'pricing': page = <PricingPage go={go}/>; break;
    case 'trial': page = <TrialPage go={go}/>; break;
    case 'meist': page = <AboutPage go={go}/>; break;
    case 'tookohad': page = <CareersPage go={go}/>; break;
    case 'kontakt': page = <ContactPage go={go}/>; break;
    case 'privaatsus': page = <PrivacyPage/>; break;
    case 'tingimused': page = <TermsPage/>; break;
    case 'andmekaitse': page = <DataProtectionPage/>; break;
    case 'kupsised': page = <CookiePage/>; break;
    case 'home':
    default: page = <HomePage go={go}/>;
  }

  return (
    <div data-screen-label={'gridea-' + route}>
      <SiteNav route={route} go={go}/>
      {page}
      <SiteFooter go={go}/>
      {/* Mounted app-level so one conversation is shared by the hero ask-box
          and the floating launcher, and survives route changes. */}
      <ChatWidget/>
    </div>
  );
}

window.SiteApp = SiteApp;
