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

const SUBNAV_ITEMS = [
  { id: "construction-stages", label: "Construction Stages" },
  { id: "manufacturing-kit",   label: "Manufacturing Kit" },
  { id: "house-units",         label: "House Units" },
];

const ProductionSubNav = () => {
  const [active, setActive] = React.useState(null);

  React.useEffect(() => {
    const sections = SUBNAV_ITEMS.map(item => document.getElementById(item.id)).filter(Boolean);
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) setActive(entry.target.id);
        });
      },
      { rootMargin: "-30% 0px -60% 0px", threshold: 0 }
    );
    sections.forEach(s => observer.observe(s));
    return () => observer.disconnect();
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const offset = 140; // main nav (~76px) + subnav (~40px) + breathing room
    const top = el.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top, behavior: "smooth" });
  };

  return (
    <div className="prod-subnav">
      <div className="container">
        <nav className="prod-subnav__nav">
          {SUBNAV_ITEMS.map(item => (
            <button
              key={item.id}
              className={"prod-subnav__item" + (active === item.id ? " is-active" : "")}
              onClick={() => scrollTo(item.id)}
            >
              {item.label}
            </button>
          ))}
        </nav>
      </div>
    </div>
  );
};

const KitSection = ({ section, idx }) => {
  const icons = ["shield", "house", "package", "saw", "house", "pen"];
  return (
    <div className="kit-section" style={{ marginBottom: 56 }}>
      <div className="kit-section__head">
        <span className="kit-section__num">0{idx + 1}</span>
        <div>
          <h3 style={{ fontSize: "clamp(18px, 2vw, 22px)", marginBottom: 4 }}>{section.title}</h3>
          {section.subtitle && <p style={{ color: "var(--muted)", fontSize: 14 }}>{section.subtitle}</p>}
        </div>
      </div>
      <div className="kit-section__variants">
        {section.variants.map((v, i) => (
          <div className="kit-variant" key={i}>
            {v.label && <div className="kit-variant__label">{v.label}</div>}
            <ul className="kit-variant__list">
              {v.items.map((item, j) => (
                <li key={j}><Icon name="check" size={13}/> {item}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      {section.note && <p className="kit-section__note"><em>{section.note}</em></p>}
    </div>
  );
};

const ProductionContent = () => {
  const lang = useLang();
  const tr = (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {};
  const t = tr.productionPage || {};
  const prodProcess = tr.productionProcess || [];
  const kitSections = t.kitSections || [];
  const notIncluded = t.notIncluded || [];
  const statNums = [{n:3000,s:""},{n:50,s:"+"},{n:5,s:""},{n:100,s:"%"}];

  return (
    <>
      <PageHero
        eyebrow={t.heroEyebrow}
        title={t.heroTitle}
        lead={t.heroLead}
        image="img/production-facility.png"
        imageAlt="Aerial view of the Norge House production facility"
        tilted
      />

      <ProductionSubNav />

      {/* Facility */}
      <section className="section">
        <div className="container about">
          <div className="about__media">
            <img src="https://cms.wooden-houses.itlinden.lv/api/media/file/building-1.jpg" alt="Norge House manufacturing facility"/>
          </div>
          <div>
            <span className="eyebrow"><Crown/> {t.facilityEyebrow}</span>
            <h2 style={{ marginTop: 16, marginBottom: 24 }}>{t.facilityH2}</h2>
            <p>{t.facilityP1}</p>
            <p style={{ marginTop: 16 }}>{t.facilityP2}</p>
          </div>
        </div>
      </section>

      {/* Construction Stages */}
      <section id="construction-stages" className="section">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.stagesEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.stagesH2}</h2>
            </div>
            <p>{t.stagesLead}</p>
          </div>
          <div className="process">
            {(t.stages || []).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>


      {/* Manufacturing Kit — what's included */}
      <section id="manufacturing-kit" className="section">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.kitEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.kitH2}</h2>
            </div>
            <p style={{ maxWidth: "52ch" }}>{t.kitDesc}</p>
          </div>
          <div style={{ marginTop: 48 }}>
            {kitSections.map((section, i) => (
              <KitSection key={i} section={section} idx={i}/>
            ))}
          </div>
        </div>
      </section>
      {/* Units — house diagram + technical cross-sections */}
      <section id="house-units" className="section section--alt">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.unitsEyebrow || "House Units"}</span>
              <h2 style={{ marginTop: 16 }}>{t.unitsH2 || "All units in the manufacturing kit."}</h2>
            </div>
            <p style={{ maxWidth: "52ch" }}>{t.unitsLead || "Below you can see all of the units that can be included in the manufacturing kit of the house frame. The production of wall units takes into account the most advanced technologies that provide high quality, energy efficiency, durability and safety."}</p>
          </div>

          {/* House diagram */}
          <div style={{ margin: "40px 0", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--hairline)", padding: "clamp(24px, 4vw, 48px)", background: "#fff" }}>
            <img src="img/units-house-diagram.png" alt="House frame unit diagram" style={{ width: "100%", maxWidth: 760, display: "block", margin: "0 auto" }}/>
            <div style={{ maxWidth: 760, margin: "20px auto 0", textAlign: "center" }}>
              <p style={{ color: "var(--ink)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>
                Below you can see all of the units that can be included in the manufacturing kit of the house frame.
              </p>
              <p style={{ color: "var(--muted)", fontSize: 14, fontStyle: "italic", marginTop: 8, lineHeight: 1.6 }}>
                (The production of wall units takes into account the most advanced technologies that provide high quality, energy efficiency, durability and safety.)
              </p>
            </div>
          </div>

          {/* External walls + inner walls + floors + roofs — 14 unit cards */}
          <div className="units-grid">

            {/* 01 External wall option 1 */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-01-ext-wall-1.png" alt="External wall option 1"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">External Wall (Option 1)</h3>
                <ol className="unit-card__list">
                  <li>Plasterboard 12.5 mm <strong>(Norgips)</strong></li>
                  <li>Insulation 50 mm <strong>(Paroc Ultra)</strong></li>
                  <li>Wooden laths 45×45 mm <strong>(Puumerkki)</strong></li>
                  <li>OSB 10 mm</li>
                  <li>Vapor barrier <strong>(ELT-Pefoil 200)</strong></li>
                  <li>Insulation 200 mm <strong>(Paroc Ultra)</strong></li>
                  <li>Timber frame 45×195 mm <strong>(C24 Puumerkki)</strong></li>
                  <li>Wind insulation 9 mm <strong>(Norgips GU)</strong></li>
                  <li>Diffusion membrane <strong>(Tyvek Soft)</strong></li>
                  <li>Ventilation laths 25×50 mm <strong>(Puumerkki)</strong></li>
                  <li>Decoration board finish 21 mm</li>
                </ol>
              </div>
            </div>

            {/* 02 External wall option 2 */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-02-ext-wall-2.png" alt="External wall option 2"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">External Wall (Option 2)</h3>
                <ol className="unit-card__list">
                  <li>Plaster board 12.5 mm</li>
                  <li>Heat insulation 50 mm rockwool</li>
                  <li>Wooden lath 45×45 mm</li>
                  <li>OSB 10 mm</li>
                  <li>Vapor barrier</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Frame C24 45×195 mm</li>
                  <li>Norgips GU</li>
                  <li>Diffusion membrane</li>
                  <li>Ventilation lath 25×50 mm</li>
                  <li>ISOPLAAT 50 mm</li>
                  <li>Reinforced gypsum</li>
                  <li>Paint</li>
                </ol>
              </div>
            </div>

            {/* 03 External wall option 3 */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-03-ext-wall-3.png" alt="External wall option 3"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">External Wall (Option 3)</h3>
                <ol className="unit-card__list">
                  <li>Plaster board 12.5 mm</li>
                  <li>Heat insulation 50 mm rockwool</li>
                  <li>Wooden lath 45×45 mm</li>
                  <li>OSB 10 mm</li>
                  <li>Vapor barrier</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Frame C24 45×195 mm</li>
                  <li>Norgips GU</li>
                  <li>Diffusion membrane</li>
                  <li>Ventilation lath 25×50 mm</li>
                  <li>Decorative bricks</li>
                </ol>
              </div>
            </div>

            {/* 04 External wall option 4 */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-04-ext-wall-4.png" alt="External wall option 4"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">External Wall (Option 4)</h3>
                <ol className="unit-card__list">
                  <li>Plaster board 12.5 mm</li>
                  <li>Heat insulation 50 mm rockwool</li>
                  <li>Wooden lath 45×45 mm</li>
                  <li>OSB 10 mm</li>
                  <li>Vapor barrier</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Frame C24 45×195 mm</li>
                  <li>Norgips GU</li>
                  <li>Diffusion membrane</li>
                  <li>Ventilation lath 25×50 mm</li>
                  <li>Fiber-cement plates</li>
                </ol>
              </div>
            </div>

            {/* 05 Inner bearing wall */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-05-inner-bearing.png" alt="Inner bearing wall"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Inner Bearing Wall</h3>
                <ol className="unit-card__list">
                  <li>Plaster board 12.5 mm</li>
                  <li>OSB 10 mm</li>
                  <li>Sound isolation / heat insulation 100 mm rockwool</li>
                  <li>Frame C24 45×95 mm</li>
                  <li>OSB 10 mm</li>
                  <li>Plaster board 12.5 mm</li>
                </ol>
              </div>
            </div>

            {/* 06 Partition wall */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-06-partition.png" alt="Partition wall"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Partition Wall</h3>
                <ol className="unit-card__list">
                  <li>Plaster board 12.5 mm ×2</li>
                  <li>Sound isolation / heat insulation 75 mm rockwool</li>
                  <li>Frame C24 45×70 mm</li>
                  <li>Plaster board 12.5 mm ×2</li>
                </ol>
              </div>
            </div>

            {/* 07 Intermediate floor */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-07-inter-floor.png" alt="Intermediate floor"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Intermediate Floor</h3>
                <ol className="unit-card__list">
                  <li>OSB 22 mm</li>
                  <li>Amortization tape 50 mm</li>
                  <li>Frame C24 45×220 mm (can change based on calculations)</li>
                  <li>Sound isolation 100 mm rockwool</li>
                  <li>Wooden lath 45×45 mm</li>
                  <li>Plaster board 12.5 mm</li>
                </ol>
              </div>
            </div>

            {/* 08 Heated ceiling cover */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-08-heated-ceil.png" alt="Heated ceiling cover"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Heated Ceiling Cover</h3>
                <ol className="unit-card__list">
                  <li>Heat insulation 100 mm rockwool</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Timber frame 45×220 mm</li>
                  <li>Vapor barrier</li>
                  <li>Wooden lath 45×45 mm</li>
                  <li>Plaster board 12.5 mm</li>
                </ol>
              </div>
            </div>

            {/* 09 Insulated ceiling cover */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-09-ins-ceil.png" alt="Insulated ceiling cover"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Insulated Ceiling Cover</h3>
                <ol className="unit-card__list">
                  <li>Heat insulation 100 mm rockwool</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Timber frame 45×220 mm</li>
                  <li>Vapor barrier</li>
                  <li>Wooden lath 45×45 mm</li>
                  <li>Plaster board 12.5 mm</li>
                </ol>
              </div>
            </div>

            {/* 10 Heated ceiling cover v2 */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-10-heated-ceil2.png" alt="Heated ceiling cover variant"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Heated Ceiling Cover (variant)</h3>
                <ol className="unit-card__list">
                  <li>Heat insulation 100 mm rockwool</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Timber frame 45×220 mm</li>
                  <li>Vapor barrier</li>
                  <li>Wooden lath 45×45 mm</li>
                  <li>Plaster board 12.5 mm</li>
                </ol>
              </div>
            </div>

            {/* 11 Flat roof cover */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-11-flat-roof.png" alt="Flat roof cover"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Flat Roof Cover</h3>
                <ol className="unit-card__list">
                  <li>Upper bitumen melting cover</li>
                  <li>Lower bitumen melting cover</li>
                  <li>ISOPLAAT 25 mm</li>
                  <li>Heat insulation 100 mm rockwool</li>
                  <li>Timber frame 45×100 mm</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Timber frame 45×220 mm</li>
                  <li>Vapor barrier</li>
                  <li>Wooden lath 45×45 mm</li>
                  <li>Plaster board 12.5 mm</li>
                </ol>
              </div>
            </div>

            {/* 12 Uninsulated roof */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-12-unins-roof.png" alt="Uninsulated roof construction"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Uninsulated Roof Construction</h3>
                <ol className="unit-card__list">
                  <li>Wooden lath 45×45 mm (can change depending on roof covering)</li>
                  <li>Wooden lath 25×50 mm</li>
                  <li>Diffusion membrane</li>
                  <li>Roof rafters 45×195 mm (can change depending on technical development)</li>
                </ol>
              </div>
            </div>

            {/* 13 Insulated roof */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-13-ins-roof.png" alt="Insulated roof construction"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Insulated Roof Construction</h3>
                <ol className="unit-card__list">
                  <li>Wooden lath 25×100 mm or 45×45 mm</li>
                  <li>Wooden lath 25×50 mm</li>
                  <li>Diffusion membrane</li>
                  <li>Roof rafters 45×195 mm</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Vapor barrier</li>
                  <li>Wooden lath 45×95 mm</li>
                  <li>Heat insulation 100 mm rockwool</li>
                  <li>Plaster board 12.5 mm</li>
                </ol>
              </div>
            </div>

            {/* 14 Floor */}
            <div className="unit-card">
              <div className="unit-card__img"><img src="img/unit-14-floor.png" alt="Floor"/></div>
              <div className="unit-card__text">
                <h3 className="unit-card__title">Floor</h3>
                <ol className="unit-card__list">
                  <li>Laminate 10 mm</li>
                  <li>Floor plaster board 12.5 mm</li>
                  <li>ISOPLAAT 25 mm</li>
                  <li>OSB 22 mm</li>
                  <li>Vapor barrier</li>
                  <li>Heat insulation 50 mm rockwool</li>
                  <li>Timber frame 45×50 mm</li>
                  <li>Heat insulation 200 mm rockwool</li>
                  <li>Timber frame 45×220 mm</li>
                  <li>Minerit plate 8 mm</li>
                  <li>Net</li>
                </ol>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Not Included */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.notIncludedEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.notIncludedH2}</h2>
            </div>
            <p style={{ maxWidth: "52ch" }}>{t.notIncludedNote}</p>
          </div>
          <div className="standards" style={{ marginTop: 40 }}>
            {notIncluded.map((group, i) => (
              <article className="standards__card" key={i}>
                <h3 style={{ marginBottom: 16 }}>{group.group}</h3>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                  {group.items.map((item, j) => (
                    <li key={j} style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 14, color: "var(--muted)" }}>
                      <span style={{ marginTop: 3, flexShrink: 0, color: "var(--accent-2)" }}><Icon name="arrow" size={12}/></span>
                      {item}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Turnkey */}
      <section className="section section--alt">
        <div className="container about">
          <div className="about__media">
            <img src="https://cms.wooden-houses.itlinden.lv/api/media/file/slider-21.jpg" alt="Norge House turnkey"/>
          </div>
          <div>
            <span className="eyebrow"><Crown/> {t.turnkeyEyebrow}</span>
            <h2 style={{ marginTop: 16, marginBottom: 24 }}>{t.turnkeyH2}</h2>
            <p>{t.turnkeyDesc}</p>
            <a href="Contacts.html" className="btn" style={{ marginTop: 28 }}>
              {(tr.contactsPage || {}).eyebrow || "Contact Us"} <span className="arrow"><Icon name="arrow" size={14}/></span>
            </a>
          </div>
        </div>
      </section>

      {/* Capacity */}
      <section className="section section--alt">
        <div className="container">
          <div className="section__head">
            <div>
              <span className="eyebrow"><Crown/> {t.capacityEyebrow}</span>
              <h2 style={{ marginTop: 16 }}>{t.capacityH2}</h2>
            </div>
            <p>{t.capacityLead}</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="Contacts.html">
        {t.dividerText}
      </Divider>
    </>
  );
};

const Production = () => (
  <PageShell current="production">
    <ProductionContent/>
  </PageShell>
);

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