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

const FAQ_ITEMS = [
  {
    q: 'The delivery date picker is not showing at checkout.',
    a: 'Make sure you selected at least one product category under Settings and that the cart contains a product from that category.',
  },
  {
    q: 'Timeslots are not appearing after I pick a date.',
    a: 'Enable timeslots under WooCommerce → Delivery Date → Timeslot Settings and confirm the delivery window and duration are set.',
  },
  {
    q: 'A timeslot that should still be available is hidden.',
    a: 'Timeslots whose end time has already passed today are filtered out automatically. Check your delivery window end time.',
  },
  {
    q: 'The delivery date is not saved on the order.',
    a: 'If WooCommerce HPOS (custom order tables) is enabled, make sure you are running plugin version 2.5.1 or later.',
  },
  {
    q: 'Can I block holidays or specific weekdays?',
    a: 'Yes — this is a Premium feature. Upgrade to unlock holiday blackout dates and per-weekday delivery rules.',
  },
]

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" />

      <h3 className="dreamfox-information__heading">Frequently Asked Questions</h3>
      <p>
        Below you will find answers to the most common questions. For the full FAQ visit our{' '}
        <a href={config.kb_url} target="_blank" rel="noopener noreferrer">Knowledge Base</a> or the{' '}
        <a href={config.faq_url} target="_blank" rel="noopener noreferrer">WordPress.org FAQ</a>.
      </p>

      <dl className="dreamfox-support__faq">
        {FAQ_ITEMS.map((item) => (
          <div key={item.q} className="dreamfox-support__faq-item">
            <dt>{item.q}</dt>
            <dd>{item.a}</dd>
          </div>
        ))}
      </dl>

      <h3 className="dreamfox-information__heading">Still need help?</h3>
      <p>
        If your question is not answered above, please submit a support request and we'll get back to you quickly.
      </p>
      <p>
        <a
          href={config.support_url}
          className="button button-primary"
          target="_blank"
          rel="noopener noreferrer"
        >
          Open Support Form
        </a>
        {'  '}
        <a
          href={config.wp_support_url}
          target="_blank"
          rel="noopener noreferrer"
        >
          WordPress.org support forum
        </a>
      </p>

      <Line />
    </div>
  )
}

export default SupportTab
