import React, { FC } from 'react'
import { __, _n, sprintf } from '@wordpress/i18n'
import NvitMap from './NvitMap'

const OnTheOrder: FC = () => (
  <div className="tips-section">
    <h3 className="tips-section-heading">
      {__("You'll see it on the order", 'posten-bring-checkout')}
    </h3>
    <div className="tips-nvit-notice" aria-hidden="true">
      <span className="tips-nvit-notice-title">
        {sprintf(
          _n(
            '%d item needs customs information',
            '%d items need customs information',
            1,
            'posten-bring-checkout'
          ),
          1
        )}
      </span>
      <span className="tips-nvit-notice-action">
        {__('Add customs information', 'posten-bring-checkout')}
      </span>
    </div>
    <p className="tips-body-text">
      {__(
        "The plugin spots these orders from the sender's and the recipient's postal codes. There's nothing to turn on.",
        'posten-bring-checkout'
      )}
    </p>
  </div>
)

const HsCode: FC = () => (
  <div className="tips-section">
    <h3 className="tips-section-heading">
      {__('Add the HS code once', 'posten-bring-checkout')}
    </h3>
    <p className="tips-body-text tips-body-text-strong">
      {__(
        'Choose «Add customs information» on the order and enter a 6-digit HS code, or search by item type.',
        'posten-bring-checkout'
      )}
    </p>
    <p className="tips-body-text">
      {__(
        "The code is saved on the product, so you're never asked for the same item twice. You can also add it to your products in advance, as a product attribute.",
        'posten-bring-checkout'
      )}
    </p>
  </div>
)

const HsCodeExplained: FC = () => (
  <div className="tips-nvit-explainer">
    <span className="tips-nvit-explainer-mark" aria-hidden="true">
      ?
    </span>
    <span className="tips-nvit-explainer-text">
      <span className="tips-nvit-explainer-title">
        {__('What is an HS code?', 'posten-bring-checkout')}
      </span>
      <span className="tips-body-text">
        {__(
          'A number customs use to see what kind of goods are in a parcel. It comes from the Harmonized System, an international standard, and the first six digits are the same in every country. 6110.11, for example, means jumpers of wool.',
          'posten-bring-checkout'
        )}
      </span>
    </span>
  </div>
)

/**
 * Why parcels to Northern Norway need customs information, and how to add it.
 */
export const NvitStory: FC = () => (
  <>
    <NvitMap />
    <OnTheOrder />
    <HsCode />
    <HsCodeExplained />
  </>
)