/* eslint-disable react-pug/quotes */
import React, { createElement } from 'react';
import { SkipNavLink, SkipNavContent } from 'elements/skip-nav';
import { useTabulaDebug } from 'hooks';
import { Ph } from 'utils';
import { FaIcon } from 'elements/icon';

import { SiteNav } from '../_navigation/site-nav';

export function SiteLayout({ children, headerNavTree, footerNavTree }) {
  useTabulaDebug();
  return createElement(
    () => pug`

      #site

        // site-header
        SiteHeader(navTree=headerNavTree)

        SkipNavContent
        =children

        // site-footer
        SiteFooter(navTree=footerNavTree)

    `,
  );
}

export function SiteHeader() {
  return (
    <>
      <SkipNavLink />
      <aside className="trademark-banner"></aside>
      <header className="site site-header">
        <SiteNav />
      </header>
    </>
  );
}

export function SiteFooter({ navTree }) {
  return createElement(
    () => pug`
      footer.site.site-footer
        .frame.wrap-l

          // newsletter signup
          form.grid-s.ml__cols-2.py-m.ji-center.a-center.ml__a-left
            .cell.ml__js-start.f-sans-s
              span.fw-500 Join our Community Newsletter
              br
              span Stay up to date with the latest news from the Rasa community!
            .cell.ml__js-end
              .stack-s(style={width: 400})
                Ph(h=50)
                .f-sans-xs This form uses Google ReCaptcha verification. For more information on this, see our Privacy Policy.

          // menu area
          .py-m(style={borderTop: '1px solid gray', borderBottom: '1px solid gray'})
            .stop: .mcol-grid.cols-2.s__cols-3.m__cols-4.ml__cols-5
              a(href="/").d-block.cell.prose-sans-xs
                Ph(aspect=1, w=80)
                p Rasa is the only serious solution for mission-critical conversational AI NLU NLP
              each list, i in navTree
                .cell.stack-s(key=list.text)
                  h5.f-sans-s.trim= list.text
                  ul.f-sans-s.trim(role="list")
                    each link, j in list.items
                      li(role="listitem", key=link.text)
                        if link.icon
                          a(href=link.href)
                            FaIcon(icon=link.icon)
                            |&ensp;
                            span= link.text
                        else
                          a(href=link.href, dangerouslySetInnerHTML={__html: link.text})

          // bottom line
          .chain.ai-center.f-sans-xs.py-s
            .cell
              a(href='https://twitter.com/Rasa_HQ'): FaIcon(icon=['fab','twitter'])
            .cell
              a(href='https://www.linkedin.com/company/rasa.'): FaIcon(icon=['fab','linkedin'])
            .cell
              a(href='https://stackoverflow.com/questions/tagged/rasa-nlu+or+rasa+or+rasa-core'): FaIcon(icon=['fab','stack-overflow'])
            .cell
              a(href='https://github.com/RasaHQ/'): FaIcon(icon=['fab','github'])
            .cell
              a(href='https://www.youtube.com/channel/UCJ0V6493mLvqdiVwOKWBODQ'): FaIcon(icon=['fab','youtube'])
            .cell
              a(href='https://angel.co/company/rasahq'): FaIcon(icon=['fab','angellist'])
            .cell.ml-auto © Rasa Technologies Inc - 2022
              |&ensp;|&ensp;
              a(href='https://rasa.com/imprint/') Imprint
              |&ensp;|&ensp;
              a(href='https://rasa.com/privacy-policy/') Privacy Policy
  `,
  );
}