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

const FREE_FEATURES = [
  'Delivery date picker on the WooCommerce checkout page',
  'Minimum lead time — require days before delivery',
  'Category-based rules — apply to any product categories, no limit',
  'Delivery timeslots with capacity limits — full slots hide automatically',
  'Delivery window, slot duration, and max orders per slot',
  'Delivery date and timeslot in orders, emails, and thank-you page',
  'HPOS compatible',
]

const PREMIUM_FEATURES = [
  'Working days only — count only business days toward lead time',
  'Holiday and blackout dates — block dates customers cannot book',
  'Disable specific weekdays (e.g. no Sunday deliveries)',
  'Custom delivery date label and description at checkout',
  'Make the delivery date field required',
  'Auto-fill the earliest available delivery date',
]

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

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

      <img
        src={informationHero}
        alt="Delivery date and timeslot scheduling for WooCommerce"
        className="dreamfox-information__hero"
      />

      <div className="dreamfox-information__badge">Free Version</div>

      <p className="dreamfox-information__intro">
        You're using the <strong>free version</strong> of Delivery Date &amp; Timeslot for WooCommerce.
        Let customers choose a delivery date and timeslot at checkout, control capacity, and prevent overbooking — at no cost.
      </p>

      <h3 className="dreamfox-information__heading">What's included for free</h3>
      <ul className="dreamfox-information__list">
        {FREE_FEATURES.map((feature) => (
          <li key={feature}>{feature}</li>
        ))}
      </ul>

      <div className="dreamfox-information__upgrade-box">
        <h3>Upgrade to Premium</h3>
        <p>
          Need holidays, working-day lead times, or full control over checkout labels?
          Unlock advanced delivery scheduling with Premium.
        </p>
        <ul className="dreamfox-information__list dreamfox-information__list--premium">
          {PREMIUM_FEATURES.map((feature) => (
            <li key={feature}>{feature}</li>
          ))}
        </ul>
        <p className="dreamfox-information__cta-row">
          <a
            href={config.upgrade_url}
            className="button button-primary dreamfox-information__cta"
          >
            Upgrade to Premium
          </a>
          <a
            href={config.premium_features_url}
            className="dreamfox-information__link"
          >
            View all Premium features &amp; pricing
          </a>
        </p>
      </div>

      <Line />
    </div>
  )
}

export default InformationTab
