import React from 'react'
import Heading from '../Heading'
import Line from '../Line'
import Configuration from '../../Configuration'
import informationHero from '../../assets/images/information-hero.png'

const FEATURES = [
  {
    title: 'Delivery date picker',
    items: [
      'Smart date picker on the WooCommerce checkout page',
      'Minimum lead time with optional working-days-only counting',
      'Category-based rules — apply delivery scheduling to any product categories',
      'Holiday and blackout dates — block unavailable dates',
      'Disable specific weekdays (e.g. no Sunday or Monday deliveries)',
      'Custom checkout label, description, required field, and auto-fill options',
    ],
  },
  {
    title: 'Delivery timeslots',
    items: [
      'Enable timeslots with a single toggle',
      'Define delivery window start and end time',
      'Slot duration: 1, 2, 3, 4, 6, 8, or 12 hours',
      'Max orders per slot — full slots hide automatically',
      'Past timeslots on today filtered out in real time',
      'Live slot preview in the Timeslot Settings tab',
    ],
  },
  {
    title: 'Order visibility & reliability',
    items: [
      'Delivery date and timeslot on admin orders',
      'Shown in customer emails, order details, and thank-you page',
      'HPOS compatible — WooCommerce custom order tables supported',
      'Server-side validation for lead time, holidays, and blocked weekdays',
    ],
  },
]

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

  return (
    <div className="dreamfox-tab dreamfox-information dreamfox-information--premium">
      <Heading text="Information" />
      <Line />

      <img
        src={informationHero}
        alt="Delivery Date and Timeslot for WooCommerce Premium"
        className="dreamfox-information__hero"
      />

      <div className="dreamfox-information__badge dreamfox-information__badge--premium">Premium Version</div>

      <p className="dreamfox-information__intro">
        You have the <strong>Premium version</strong> of Delivery Date &amp; Timeslot for WooCommerce —
        the complete delivery scheduling toolkit for WooCommerce stores that deliver on a schedule.
      </p>

      <p className="dreamfox-information__intro">
        Perfect for bakeries, florists, meal prep businesses, local delivery shops, and any store
        that needs reliable date and timeslot booking without overbooking.
      </p>

      {FEATURES.map((section) => (
        <div key={section.title} className="dreamfox-information__feature-block">
          <h3 className="dreamfox-information__heading">{section.title}</h3>
          <ul className="dreamfox-information__list">
            {section.items.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      ))}

      <div className="dreamfox-information__links">
        <p>
          <strong>Documentation:</strong>{' '}
          <a href="https://help.dreamfoxmedia.com" target="_blank" rel="noopener noreferrer">
            help.dreamfoxmedia.com
          </a>
        </p>
        <p>
          <strong>Support:</strong>{' '}
          <a href={config.contact_url} target="_blank" rel="noopener noreferrer">
            Open a support request
          </a>
        </p>
      </div>

      <Line />
    </div>
  )
}

export default InformationTab
