/* global React, ReactDOM, PageShell, PageHero, Crown, Icon, ContactForm, useT, useLang */
const { useState } = React;

const ContactsInner = () => {
  const lang = useLang();
  const t = ((window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {}).contactsPage || {};
  return (
    <>
      <PageHero eyebrow={t.eyebrow || "Contact Us"} title={t.h2 || "Get in touch."} lead={t.lead || "Our project team replies within one business day."}/>
      <section className="section">
        <div className="container">
          <div className="about" style={{ marginBottom: "clamp(64px, 8vw, 100px)" }}>
            <div className="about__media">
              <img src={(window.__resources && window.__resources.contactsAbout1) || "https://cms.wooden-houses.itlinden.lv/api/media/file/slider-2.jpg"} alt="Norge House"/>
            </div>
            <div>
              <span className="eyebrow"><Crown/> {t.formEyebrow || "Send Us a Message"}</span>
              <h2 style={{ marginTop: 16, marginBottom: 28 }}>{t.formH2 || "Tell us about your project."}</h2>
              <div className="cta-form-light">
                <ContactForm projects={window.NH_DATA.projects.map(p => p.name)} fields={t.fields || {}} lang={lang}/>
              </div>
            </div>
          </div>
          <div className="about" style={{ marginBottom: "clamp(64px, 8vw, 100px)" }}>
            <div>
              <span className="eyebrow"><Crown/> {t.companyEyebrow || "Company Details"}</span>
              <h2 style={{ marginTop: 16, marginBottom: 28 }}>Norge House SIA</h2>
              <div className="contact-info">
                <div className="contact-info__row">
                  <div className="contact-info__row__icon"><Icon name="mapPin" size={18}/></div>
                  <div>
                    <div className="contact-info__label">{t.addrLabel || "Address"}</div>
                    <div className="contact-info__value">Vītoli, Limbažu pagasts,<br/>Limbažu novads, Latvija</div>
                  </div>
                </div>
                <div className="contact-info__row">
                  <div className="contact-info__row__icon"><Icon name="phone" size={18}/></div>
                  <div>
                    <div className="contact-info__label">{t.phoneLabel || "Phone"}</div>
                    <div className="contact-info__value">
                      <a href="tel:+37125774431">+371 25774431</a><br/>
                      <a href="tel:+4407926691478">+44 07926691478</a><br/>
                      <a href="tel:+31628286862">+31 628286862</a>
                    </div>
                  </div>
                </div>
                <div className="contact-info__row">
                  <div className="contact-info__row__icon"><Icon name="mail" size={18}/></div>
                  <div>
                    <div className="contact-info__label">{t.emailLabel || "Email"}</div>
                    <div className="contact-info__value"><a href="mailto:info@norgehouse.com">info@norgehouse.com</a></div>
                  </div>
                </div>
                <div className="contact-info__row">
                  <div className="contact-info__row__icon"><Icon name="cert" size={18}/></div>
                  <div>
                    <div className="contact-info__label">{t.vatLabel || "VAT Number"}</div>
                    <div className="contact-info__value">LV40203079564</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="about__media">
              <img src={(window.__resources && window.__resources.contactsAbout2) || "https://cms.wooden-houses.itlinden.lv/api/media/file/building-1.jpg"} alt="Norge House production"/>
            </div>
          </div>
          <div>
            <span className="eyebrow"><Crown/> {t.locationEyebrow || "Our Location"}</span>
            <h2 style={{ marginTop: 16, marginBottom: 8 }}>{t.locationH2 || "Vītoli, Limbažu novads, Latvia"}</h2>
            <p style={{ color: "var(--muted)", maxWidth: "60ch", marginBottom: 28 }}>{t.locationLead || "Visitors are welcome by appointment."}</p>
            <div className="map-block">
              <iframe title="Norge House location" src="https://www.openstreetmap.org/export/embed.html?bbox=24.680%2C57.495%2C24.750%2C57.530&amp;layer=mapnik&amp;marker=57.513%2C24.714" loading="lazy"/>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

const Contacts = () => (
  <PageShell current="contacts">
    <ContactsInner/>
  </PageShell>
);

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