import React from 'react'
import { Card, CardBody } from '@wordpress/components'
import { useI18n } from '@wordpress/react-i18n'
import Video from './video'
import './styles.scss'
import bringLogo from '../../assets/img/Bring_logo.svg'
import Guide from './Guide'
import HowTo from './HowTo'
import FeedbackForm from './components/FeedbackForm'
// @ts-expect-error 7016
import { getAdminLink } from '@woocommerce/settings'
import { useEnableWpCompatOverlaySlot } from '@wordpress/ui'

const LandingPage = () => {
  const { __ } = useI18n()
  useEnableWpCompatOverlaySlot()
  return (
    <div id="landing-page-container">
      <Card className={'card-section'}>
        <CardBody>
          <h1>
            {__(
              'Get started with Posten Bring Checkout',
              'posten-bring-checkout'
            )}
          </h1>

          <div>
            {__(
              "You need a Mybring user. Don't have an account?",
              'posten-bring-checkout'
            )}{' '}
            <a
              href="https://www.mybring.com/signup/customer/company"
              target="_blank"
              rel="noreferrer"
            >
              {__('Register now', 'posten-bring-checkout')}
            </a>
          </div>
          <Guide />
          <HowTo />
          <hr className="mbm mtm" />
          <div className="flex justify-csb align-ic">
            <i>
              {__(
                'To see how you can make the best checkout visit our',
                'posten-bring-checkout'
              )}
              <a
                href={getAdminLink(
                  'admin.php?page=wc-admin&path=/posten-bring-checkout/faq'
                )}
              >
                {__('FAQ page', 'posten-bring-checkout')}
              </a>
              {__(', or contact us on', 'posten-bring-checkout')}
              <a
                href="mailto:checkout.implementering@posten.no"
                target="_blank"
                rel="noreferrer"
              >
                checkout.implementering@posten.no
              </a>
            </i>
            <img className="bring-logo" src={bringLogo} alt={'bring logo'} />
          </div>
        </CardBody>
      </Card>
      <Video />
      <FeedbackForm className="mtl" />
    </div>
  )
}

export default LandingPage