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

/**
 * Renders a single about us section with heading and content
 */
const AboutUsSection = ({ heading, content }) => (
  <section className="AboutUsSection">
    <h2 className="AboutUsHeading">{heading}</h2>
    <div className="AboutUsText">{content}</div>
  </section>
);

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

  // Define sections as data array
  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 className="AboutUsContent">
        <h1 className="title">{title}</h1>
        {sections.map((section, index) => (
          <AboutUsSection
            key={`about-section-${index}`}
            heading={section.heading}
            content={parse(section.text)}
          />
        ))}
      </article>
    </Layout>
  );
};

export default AboutUs