import React from 'react'
import Heading from '../Heading'
import Line from '../Line'
import Configuration from '../../Configuration'
import needHelpImage from '../../assets/images/Need-Help.png'

const SupportTab = () => {
  const config = Configuration.getInstance()

  return (
    <div className="dreamfox-tab dreamfox-support">
      <Heading text="Support" />
      <Line />

      <img src={needHelpImage} alt="Need help?" className="dreamfox-support__image" />

      <p className="dreamfox-information__intro">
        Our support team typically responds quickly and is happy to assist you.
        Use the button below to open the support form.
      </p>

      <p>
        <a
          href={config.contact_url}
          className="button button-primary dreamfox-support__cta"
        >
          Open Support Form
        </a>
      </p>

      <div className="dreamfox-information__links">
        <p>
          <strong>Knowledge Base:</strong>{' '}
          <a href={config.kb_url} target="_blank" rel="noopener noreferrer">
            {config.kb_url}
          </a>
        </p>
        <p>
          <strong>WordPress.org support forum:</strong>{' '}
          <a href={config.wp_support_url} target="_blank" rel="noopener noreferrer">
            wordpress.org/support/plugin/woocommerce-delivery-date
          </a>
        </p>
      </div>

      <Line />
    </div>
  )
}

export default SupportTab
