import React from 'react'
import Heading from '../Heading'
import Line from '../Line'
import Configuration from '../../Configuration'

const FAQ_ITEMS = [
  {
    q: 'The delivery date picker is not showing at checkout.',
    a: 'Make sure you selected at least one product category under the Categories tab and that the cart contains a product from that category.',
  },
  {
    q: 'Timeslots are not appearing after I pick a date.',
    a: 'Enable timeslots under the Timeslot Settings tab and confirm the delivery window, slot duration, and max orders are set.',
  },
  {
    q: 'A timeslot that should still be available is hidden.',
    a: 'Timeslots whose end time has already passed today are automatically filtered out. 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: 'Holiday or disabled weekday dates are still selectable.',
    a: 'Clear your browser cache — the delivery.js script is versioned but browsers occasionally serve a stale copy.',
  },
  {
    q: 'The "working days only" setting does not seem to change the minimum date.',
    a: 'Save and reload the checkout page. The minimum date is calculated server-side on each page load.',
  },
  {
    q: 'How do I make the delivery date field required at checkout?',
    a: 'Go to Other Settings and enable the "Delivery date required" toggle.',
  },
]

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

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

      <p className="dreamfox-information__intro">
        Looking for answers? Browse the most common questions below, visit our{' '}
        <a href={config.kb_url} target="_blank" rel="noopener noreferrer">Knowledge Base</a>, or use the{' '}
        <a href={config.contact_url}>support form</a> and our team will assist you quickly.
      </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>

      <p>
        <a href={config.contact_url} className="button button-primary">
          Open Support Form
        </a>
        {'  '}
        <a href={config.kb_url} target="_blank" rel="noopener noreferrer">
          Full Knowledge Base
        </a>
      </p>

      <Line />
    </div>
  )
}

export default FAQTab
