/* global React, ReactDOM, Nav, Footer, PageHero, Crown, Icon, Divider, PageShell, useT, useLang */

const AboutContent = () => {
  const lang = useLang();
  const tr = (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {};
  const t  = tr.aboutPage || {};
  const standards = tr.aboutStandards || [];
  const process   = tr.aboutProcess   || [];
  const materials = tr.aboutMaterials || [];
  const icons    = ["cert", "cog", "pen"];
  const matIcons = ["saw", "shield", "house", "package"];
  const statNums = [{n:200,s:"+"},{n:10,s:"+"},{n:4,s:""},{n:100,s:"%"}];

  return (
    <>
      <PageHero
        eyebrow={t.heroEyebrow}
        title={t.heroTitle}
        lead={t.heroLead}
        image={window.NH_DATA.about}
        imageAlt="About Norge House"
      />

      {/* Our Story */}
      <section className="section">
        <div className="container about">
          <div className="about__media">
            <img src="img/our-story.jpeg" alt="Norge House construction site"/>
          </div>
          <div>
            <span className="eyebrow"><Crown/> {t.storyEyebrow}</span>
            <h2 style={{ marginTop: 16, marginBottom: 24 }}>{t.storyH2}</h2>
            <p>{t.storyP1}</p>
            <p style={{ marginTop: 16 }}>{t.storyP2}</p>
          </div>
        </div>
      </section>

      {/* Our Standards */}
      <section className="section section--alt">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.standardsEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.standardsH2}</h2>
            </div>
            <p>{t.standardsLead}</p>
          </div>
          <div className="standards">
            {standards.map((s, i) => (
              <article className="standards__card" key={i}>
                <span className="standards__icon"><Icon name={icons[i]} size={28}/></span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* What We Do */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.whatWeDoEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.whatWeDoH2}</h2>
            </div>
            <p>{t.whatWeDoLead}</p>
          </div>
        </div>
      </section>

      {/* Construction Process */}
      <section className="section section--alt">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.processEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.processH2}</h2>
            </div>
            <p>{t.processLead}</p>
          </div>
          <div className="process">
            {process.map((s, i) => (
              <article className="process__step" key={i}>
                <div className="process__num">0{i + 1}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Materials */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.materialsEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.materialsH2}</h2>
            </div>
            <p>{t.materialsLead}</p>
          </div>
          <div className="materials">
            {materials.map((m, i) => (
              <article className="material" key={i}>
                <div className="material__icon"><Icon name={matIcons[i]} size={28}/></div>
                <div><h3>{m.title}</h3><p>{m.body}</p></div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="section section--alt">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.statsEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.statsH2}</h2>
            </div>
            <p>{t.statsLead}</p>
          </div>
          <div className="stats">
            {statNums.map((it, i) => (
              <div className="stat" key={i}>
                <div className="stat__num">{it.n}<span className="suffix">{it.s}</span></div>
                <div className="stat__label">{(t.statLabels || [])[i]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Divider ctaText={t.dividerCta} ctaHref="Production.html">
        {t.dividerText}
      </Divider>
    </>
  );
};

const About = () => (
  <PageShell current="about">
    <AboutContent/>
  </PageShell>
);

ReactDOM.createRoot(document.getElementById("root")).render(<About/>);