import Layout from '../components/layout'
import './AboutUs.scss'
import { getVariableValue } from '$ustoreinternal/services/cssVariables'
import { t } from '$themelocalization'
import parse from 'html-react-parser';

/**
 * About Us page component
 */
const AboutUs = (props) => {
  const title = getVariableValue('--cust-aboutus-title', t('aboutusTitle'))

  const sections = [
    {
      heading: getVariableValue('--cust-aboutus-section1-header', t('aboutusHeader1')),
      text: getVariableValue('--cust-aboutus-section1-text', t('aboutusText1')),
    },
    {
      heading: getVariableValue('--cust-aboutus-section2-header', t('aboutusHeader2')),
      text: getVariableValue('--cust-aboutus-section2-text', t('aboutusText2')),
    },
    {
      heading: getVariableValue('--cust-aboutus-section3-header', t('aboutusHeader3')),
      text: getVariableValue('--cust-aboutus-section3-text', t('aboutusText3')),
    },
  ]

  return (
    <Layout {...props} className="AboutUs">
      <article aria-label="About Us">
        {title && <h1 className="title">{title}</h1>}
        {sections.map((section, index) => (
          (section.heading || section.text) && (
            <section key={index} aria-labelledby={section.heading ? `about-heading-${index}` : undefined}>
              {section.heading && (
                <h2 id={`about-heading-${index}`} className="AboutUsHeading">{section.heading}</h2>
              )}
              {section.text && (
                <div className="AboutUsText">{parse(section.text)}</div>
              )}
            </section>
          )
        ))}
      </article>
    </Layout>
  )
}

export default AboutUs
