/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────
// TWEAKABLES — single source of truth, host can rewrite via __edit_mode_set_keys
// ─────────────────────────────────────────────────────────────────
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00B7FF",
  "displayFont": "Bai Jamjuree",
  "bodyFont": "Montserrat",
  "heroVariant": "split",
  "showGridBg": false,
  "showStats": true,
  "density": "comfortable"
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────────
// PRIMITIVES
// ─────────────────────────────────────────────────────────────────
const Pill = ({ children, dark }) => (
  <span style={{
    display: "inline-flex", alignItems: "center", gap: 8,
    alignSelf: "flex-start", whiteSpace: "nowrap", width: "fit-content",
    padding: "6px 12px", borderRadius: 999,
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 500,
    letterSpacing: "0.08em", textTransform: "uppercase",
    background: dark ? "rgba(255,255,255,0.06)" : "rgba(11,15,18,0.06)",
    color: dark ? "rgba(245,240,234,0.7)" : "rgba(11,15,18,0.7)",
    border: `1px solid ${dark ? "rgba(255,255,255,0.1)" : "rgba(11,15,18,0.1)"}`,
  }}>
    <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)" }} />
    {children}
  </span>
);

const Counter = ({ to, suffix = "", duration = 1500 }) => {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  const inView = window.useInView(ref);
  const ran = useRef(false);
  useEffect(() => {
    if (!inView || ran.current) return;
    ran.current = true;
    const start = performance.now();
    const tick = (t) => {
      const p = Math.min((t - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(to * eased));
      if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
    // safety: guarantee the final value even if rAF is throttled
    const snap = setTimeout(() => setN(to), duration + 400);
    return () => clearTimeout(snap);
  }, [inView, to, duration]);
  return <span ref={ref}>{n.toLocaleString()}{suffix}</span>;
};

// ─────────────────────────────────────────────────────────────────
// I18N
// ─────────────────────────────────────────────────────────────────
function useLang() {
  const [lang, setLangState] = useState(() => (window.LABYZLY_I18N ? window.LABYZLY_I18N.getLang() : "en"));
  useEffect(() => {
    const onChange = (e) => setLangState(e.detail.lang);
    window.addEventListener("i18n:changed", onChange);
    return () => window.removeEventListener("i18n:changed", onChange);
  }, []);
  const setLang = (l) => {
    // English-only launch: RU/TM buttons stay visible but stay inert.
    if (l !== "en") return;
    if (window.LABYZLY_I18N) window.LABYZLY_I18N.setLang(l);
    setLangState(l);
  };
  const t = (path) => {
    const parts = path.split(".");
    const dict = window.__I18N__ || {};
    let node = dict[lang] || dict.en || {};
    for (const p of parts) node = node && node[p];
    if (node === undefined || node === null) {
      node = dict.en || {};
      for (const p of parts) node = node && node[p];
    }
    return node;
  };
  return { lang, setLang, t };
}

// ─────────────────────────────────────────────────────────────────
// TOP UTILITY BAR
// ─────────────────────────────────────────────────────────────────
function TopBar({ lang, setLang }) {
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="topbar-contact">
          <a href="tel:+99312468077"><PhoneIcon /> +993 (12) 468077</a>
          <a href="mailto:hello@labyzly.com"><MailIcon /> hello@labyzly.com</a>
        </div>
        {/* <div className="topbar-meta">
          <span className="lang-toggle">
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "ru" ? "active" : ""} onClick={() => setLang("ru")}>RU</button>
            <button className={lang === "tm" ? "active" : ""} onClick={() => setLang("tm")}>TM</button>
          </span>
        </div> */}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────────
function Nav({ t, lang, setLang }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const closeMobile = () => setMobileOpen(false);
  return (
    <nav className={`nav ${scrolled ? "nav-scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#" className="logo">
          <img className="logo-img" src="assets/logo-color.png?v=2" alt="«LABYZLY» IE" />
        </a>
        <div className="nav-links">
          <a href="About.html">{t("nav.about")}</a>
          <a href="Services.html">{t("nav.services")}</a>
          <a href="Projects.html">{t("nav.projects")}</a>
          <a href="Brands.html">{t("nav.brands")}</a>
          <a href="HSE.html">{t("nav.hse")}</a>
          <a href="Careers.html">{t("nav.careers")}</a>
        </div>
        <a href="#contact" className="btn btn-primary nav-cta">
          {t("nav.contact")}
        </a>
        <div className="lang-toggle nav-lang" role="group" aria-label="Language">
          <button type="button" className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          <button type="button" className={lang === "ru" ? "active" : ""} onClick={() => setLang("ru")}>RU</button>
          <button type="button" className={lang === "tm" ? "active" : ""} onClick={() => setLang("tm")}>TM</button>
        </div>
        <button
          className={`nav-burger ${mobileOpen ? "open" : ""}`}
          type="button"
          aria-label="Toggle menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((v) => !v)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className={`mobile-menu ${mobileOpen ? "open" : ""}`}>
        <a href="About.html" onClick={closeMobile}>{t("nav.about")}</a>
        <a href="Services.html" onClick={closeMobile}>{t("nav.services")}</a>
        <a href="Projects.html" onClick={closeMobile}>{t("nav.projects")}</a>
        <a href="Brands.html" onClick={closeMobile}>{t("nav.brands")}</a>
        <a href="HSE.html" onClick={closeMobile}>{t("nav.hse")}</a>
        <a href="Careers.html" onClick={closeMobile}>{t("nav.careers")}</a>
        <div className="lang-toggle" role="group" aria-label="Language">
          <button type="button" className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          <button type="button" className={lang === "ru" ? "active" : ""} onClick={() => setLang("ru")}>RU</button>
          <button type="button" className={lang === "tm" ? "active" : ""} onClick={() => setLang("tm")}>TM</button>
        </div>
        <div className="mobile-menu-divider"></div>
        <a href="tel:+99312468077" className="mobile-menu-contact" onClick={closeMobile}>
          <PhoneIcon /> +993 (12) 468077
        </a>
        <a href="mailto:hello@labyzly.com" className="mobile-menu-contact" onClick={closeMobile}>
          <MailIcon /> hello@labyzly.com
        </a>
        <a href="#contact" className="btn btn-primary mobile-menu-cta" onClick={closeMobile}>
          {t("nav.contact")}
        </a>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────────
function Hero({ t, showGrid, showStats }) {
  const { Gear, ParallaxLayer } = window;
  return (
    <section className="hero">
      {showGrid && <div className="grid-bg" aria-hidden />}
      <div className="hero-glow" aria-hidden />

      {/* ── FAINT POLYGONAL SKYLINE ── */}
      <div className="hero-scene" aria-hidden>
        <ParallaxLayer speed={0.28} className="scene-layer scene-skyline"
          style={{ backgroundImage: "url(assets/hero-lineart-pattern.png?v=5)" }} />
      </div>

      <div className="container hero-inner">
        <div className="hero-copy">
          <h1 className="display">
            {t("home.heroLine1")}<br />
            {t("home.heroLine2")}<br />
            <em>{t("home.heroLine3")}</em>
          </h1>
          <p className="hero-sub">
            {t("home.heroSub")}
          </p>

          <div className="hero-meta">
            <div>
              <span className="hero-meta-k">{t("home.metaK1")}</span>
              <span className="hero-meta-v">{t("home.metaV1")}</span>
            </div>
            <div>
              <span className="hero-meta-k">{t("home.metaK2")}</span>
              <span className="hero-meta-v">{t("home.metaV2")}</span>
            </div>
            <div>
              <span className="hero-meta-k">{t("home.metaK3")}</span>
              <span className="hero-meta-v">{t("home.metaV3")}</span>
            </div>
          </div>
        </div>

        <div className="hero-art">
          <div className="hero-card hero-card-main">
            <div className="hero-card-frame photo">
              <img src="assets/hero-lng.jpg?v=1" alt="LNG terminal — onshore gas processing facility" />
            </div>
          </div>
          <div className="hero-card hero-card-floating">
            <div className="hero-card-row">
              <span className="hero-card-tag">{t("home.cardTag")}</span>
              <span className="hero-card-title">{t("home.cardTitle")}</span>
            </div>
            <div className="hero-card-body">
              <div className="bar"><i style={{width: "76%"}} /></div>
              <span className="bar-lbl">{t("home.cardBarLbl")}</span>
            </div>
            <div className="hero-card-row">
              <span className="hero-card-mini">{t("home.cardMini")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// MARQUEE TRUST STRIP
// ─────────────────────────────────────────────────────────────────
function TrustStrip({ t }) {
  const partners = t("home.marquee");
  return (
    <section className="marquee">
      <div className="marquee-track-wrap">
        <div className="marquee-track">
          {[...partners, ...partners].map((p, i) => (
            <span key={i} className="marquee-item">{p}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// SCOPE OF SERVICES
// ─────────────────────────────────────────────────────────────────
const SCOPE_ICONS = ["gear", "globe", "wrench", "shield", "construction", "headset"];

function ScopeIcon({ name }) {
  const p = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "gear") return (
    <svg {...p}><circle cx="12" cy="12" r="3" /><path d="M12 3v2.4M12 18.6V21M3 12h2.4M18.6 12H21M5.6 5.6l1.7 1.7M16.7 16.7l1.7 1.7M18.4 5.6l-1.7 1.7M7.3 16.7l-1.7 1.7" /></svg>
  );
  if (name === "wrench") return (
    <svg {...p}><path d="M15.5 5.6a3.6 3.6 0 0 0-4.8 4.8l-6.3 6.3 2 2 6.3-6.3a3.6 3.6 0 0 0 4.8-4.8l-2.3 2.3-2-2 2.3-2.3z" /></svg>
  );
  if (name === "globe") return (
    <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18" /></svg>
  );
  if (name === "shield") return (
    <svg {...p}><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z" /><path d="m9 12 2 2 4-4" /></svg>
  );
  if (name === "truck") return (
    <svg {...p}><path d="M3 6.5h11v9H3z" /><path d="M14 9.5h3.5l3 3v3H14z" /><circle cx="7" cy="18" r="1.6" /><circle cx="17.5" cy="18" r="1.6" /></svg>
  );
  if (name === "headset") return (
    <svg {...p}><path d="M5 13v-1a7 7 0 0 1 14 0v1" /><path d="M5 13H4a1.8 1.8 0 0 0-1.8 1.8v1.4A1.8 1.8 0 0 0 4 18h1zM19 13h1a1.8 1.8 0 0 1 1.8 1.8v1.4A1.8 1.8 0 0 1 20 18h-1z" /><path d="M19 18v.5a3 3 0 0 1-3 3h-2.5" /></svg>
  );
  if (name === "construction") return (
    <svg {...p}><path d="M3 21h18M5 21V8l7-4 7 4v13M9 21v-5h6v5M8.4 11h.01M15 11h.01" /></svg>
  );
  return null;
}

function Services({ t }) {
  const scope = t("home.scope");
  return (
    <section id="services" className="services">
      <div className="container">
        <header className="section-head">
          <h2 className="display section-title" dangerouslySetInnerHTML={{ __html: t("home.scopeTitleHtml") }} />
          <p className="section-sub">
            {t("home.scopeDesc")}
          </p>
        </header>

        <div className="scope-grid">
          {scope.map((s, i) => (
            <article key={s.title} className="scope-card">
              <div className="scope-card-head">
                <span className="scope-ico"><ScopeIcon name={SCOPE_ICONS[i]} /></span>
                <h3 className="scope-title">{s.title}</h3>
              </div>
              <p className="scope-desc">{s.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// EQUIPMENT TABS
// ─────────────────────────────────────────────────────────────────
const EQUIPMENT_IMGS = ["assets/eq-mechanical.jpg", "assets/eq-electrical.png", "assets/eq-instrumentation.jpg", "assets/eq-chemical.jpg"];

function Equipment({ t }) {
  const equipment = t("home.equipment");
  return (
    <section id="equipment" className="equipment">
      <div className="container">
        <header className="section-head section-head-light">
          <h2 className="display section-title light" dangerouslySetInnerHTML={{ __html: t("home.eqTitleHtml") }} />
          <p className="section-sub light" dangerouslySetInnerHTML={{ __html: t("home.eqDesc") }} />
        </header>

        <div className="eq-stack">
          {equipment.map((d, i) => (
            <div className="eq-stack-item" key={d.name} style={{ top: `${110 + i * 26}px`, zIndex: i + 1 }}>
              <article className="eq-panel">
                <div className="eq-panel-art">
                  <img src={EQUIPMENT_IMGS[i]} alt={d.name} />
                  <div className="eq-panel-art-overlay">
                    <span className="eq-panel-art-cat">{d.name}</span>
                  </div>
                </div>
                <div className="eq-panel-body">
                  <p className="eq-panel-blurb">{d.blurb}</p>
                  <ul className="eq-list">
                    {d.items.map((k) => (
                      <li key={k}>
                        <span className="eq-list-k">{k}</span>
                      </li>
                    ))}
                  </ul>
                  <div className="eq-panel-foot">
                    <a href="#contact" className="btn btn-light">
                      {t("home.requestInfo")} <ArrowIcon />
                    </a>
                    <span className="eq-foot-meta">{t("home.eqFootMeta")}</span>
                  </div>
                </div>
              </article>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// SAFETY / QUALITY / ENVIRONMENT
// ─────────────────────────────────────────────────────────────────
const PILLAR_FILES = [
  { page: "assets/docs/page-health.png", pdf: "assets/docs/Health-and-Safety-Policy.pdf" },
  { page: "assets/docs/page-environmental.png", pdf: "assets/docs/Environmental-Responsibility-Policy.pdf" },
  { page: "assets/docs/page-quality.png", pdf: "assets/docs/Quality-Policy.pdf" },
  { page: "assets/docs/page-compliance.png", pdf: "assets/docs/Compliance-and-Corporate-Responsibility-Policy.pdf" },
];

function Pillars({ t }) {
  const cards = t("hse.cards");
  const PILLARS = cards.map((c, i) => ({ k: c.title, desc: c.desc, page: PILLAR_FILES[i].page, pdf: PILLAR_FILES[i].pdf }));
  const gridRef = useRef(null);
  const cardsRef = useRef([]);
  useEffect(() => {
    let raf;
    const update = () => {
      const el = gridRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const h = window.innerHeight || document.documentElement.clientHeight;
      const start = h * 0.96;
      const end = h * 0.38;
      let p = (start - r.top) / (start - end);
      p = Math.max(0, Math.min(1, p));
      cardsRef.current.forEach((c, i) => {
        if (!c) return;
        const stagger = i * 0.14;
        let cp = (p - stagger) / (1 - stagger);
        cp = Math.max(0, Math.min(1, cp));
        const eased = 1 - Math.pow(1 - cp, 3);
        c.style.setProperty("--rise", `${(1 - eased) * 96}px`);
        c.style.setProperty("--op", (0.25 + 0.75 * eased).toFixed(3));
      });
    };
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);
  return (
    <section id="about" className="pillars">
      <div className="container">
        <header className="section-head">
          <h2 className="display section-title" dangerouslySetInnerHTML={{ __html: t("hse.sectionTitleHtml") }} />
          <p className="section-sub">
            {t("hse.sectionDesc")}
          </p>
        </header>

        <div ref={gridRef} className="doc-grid">
          {PILLARS.map((p, i) => (
            <a
              key={p.k}
              href={p.pdf}
              target="_blank"
              rel="noopener"
              className="doc-card doc-card-static"
              style={{ textDecoration: "none", color: "inherit" }}
              ref={(el) => (cardsRef.current[i] = el)}
            >
              <div className="doc-head">
                <h3 className="doc-title">{p.k}</h3>
                <p className="doc-desc">{p.desc}</p>
              </div>
              <div className="doc-preview">
                <img className="doc-page" src={p.page} alt={`${p.k} — cover`} loading="lazy" />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// FEATURED MANUFACTURERS
// ─────────────────────────────────────────────────────────────────
const MANUFACTURER_FILES = [
  { name: "RMT Valvomeccanica S.r.l.", logo: "assets/mfg-rmt.png?v=2" },
  { name: "Pure Aqua, Inc.", logo: "assets/mfg-pureaqua.png?v=2" },
  { name: "FLENDER GmbH", logo: "assets/mfg-flender.png?v=2" },
  { name: "Johnson Screens", logo: "assets/mfg-johnson.webp" },
  { name: "MSNT Co., Ltd.", logo: "assets/mfg-msnt.png?v=3" },
  { name: "Sewon Q.E.C. Co., Ltd.", logo: "assets/mfg-sewon.png" },
];

function Manufacturers({ t }) {
  const [openSet, setOpenSet] = useState(() => new Set());
  const toggle = (i) =>
    setOpenSet((prev) => {
      const next = new Set(prev);
      next.has(i) ? next.delete(i) : next.add(i);
      return next;
    });
  const mfgText = t("brands.mfg");
  const MANUFACTURERS = MANUFACTURER_FILES.map((f, i) => ({ ...f, ...mfgText[i] }));
  return (
    <section id="partners" className="manufacturers">
      <div className="container">
        <header className="section-head section-head-light">
          <h2 className="display section-title light" dangerouslySetInnerHTML={{ __html: t("brands.sectionTitleHtml") }} />
          <p className="section-sub light">
            {t("brands.sectionDesc")}
          </p>
        </header>

        <div className="mfg-grid">
          {MANUFACTURERS.map((m, i) => {
            const isOpen = openSet.has(i);
            return (
              <article key={m.name} className={`mfg-card ${isOpen ? "open" : ""}`}>
                <div className="mfg-plate">
                  {m.logo
                    ? <img src={m.logo} alt={m.name} className="mfg-plate-img" />
                    : <span className="mfg-plate-name">{m.name}</span>}
                </div>

                <p className="mfg-short">{m.short}</p>

                <div className="mfg-chips">
                  <span className="mfg-badge">
                    <span className="mfg-badge-dot" />
                    {m.status}
                  </span>
                  <span className="mfg-country">{m.country}</span>
                </div>

                <div className="mfg-detail-wrap">
                  <div className="mfg-detail">
                    <p className="mfg-desc">{m.desc}</p>
                  </div>
                </div>

                <div className="mfg-foot">
                  <button
                    type="button"
                    className="mfg-more"
                    onClick={() => toggle(i)}
                  >
                    {isOpen ? t("brands.showLess") : t("brands.readMore")} <ArrowIcon />
                  </button>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// COOPERATION CLIENTS
// ─────────────────────────────────────────────────────────────────
function Clients({ t }) {
  const { Reveal } = window;
  const clients = [
    { name: "The State Concern \u201cTurkmengaz\u201d", logo: "assets/client-turkmengaz.png?v=2" },
    { name: "The State Concern \u201cTurkmennebit\u201d", logo: "assets/client-turkmennebit.png?v=2" },
    { name: "State Concern \u201cTurkmenhimiya\u201d", logo: "assets/client-turkmenhimiya.png?v=2" },
    { name: "\u201cTurkmengeology\u201d State Corporation", logo: "assets/client-turkmengeology.png?v=2" },
    { name: "PETRONAS Carigali (Turkmenistan) Sdn. Bhd.", logo: "assets/client-petronas.png?v=5" },
    { name: "Dragon Oil\n(Turkmenistan) Ltd.", logo: "assets/client-dragonoil.png?v=2" },
    { name: "CNPC International Ltd. (Turkmenistan Branch)", logo: "assets/client-cnpc.png?v=2" },
    { name: "ENI Turkmenistan Limited", logo: "assets/client-eni.png?v=2" },
    { name: "Schlumberger", logo: "assets/client-schlumberger.png?v=2" },
    { name: "Daewoo Engineering & Construction", logo: "assets/client-daewoo.png?v=2" },
    { name: "Ronesans Endustri Tesisleri", logo: "assets/client-ronesans.png?v=2" },
    { name: "PETROFAC", logo: "assets/client-petrofac.png?v=2" },
  ];
  return (
    <section className="clients">
      <div className="container">
        <header className="section-head">
          <h2 className="display section-title" dangerouslySetInnerHTML={{ __html: t("services.clientsTitleHtml") }} />
          <p className="section-sub">
            {t("services.clientsDesc")}
          </p>
        </header>
        <div className="clients-grid">
          {clients.map((c) => (
            <div key={c.name} className="client-card">
              <span className="client-logo"><img src={c.logo} alt={c.name.replace(/\n/g, ' ')} /></span>
              <div>
                <strong style={{ whiteSpace: "pre-line" }}>{c.name}</strong>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// CTA + FOOTER
// ─────────────────────────────────────────────────────────────────
function CTA({ t }) {
  const [sent, setSent] = useState(false);
  return (
    <section id="contact" className="cta">
      <div className="cta-bg" aria-hidden />
      <div className="container cta-inner">
        <div className="cta-copy">
          <h2 className="display cta-title">
            <span dangerouslySetInnerHTML={{ __html: t("home.ctaLine1") }} /><br />
            <span dangerouslySetInnerHTML={{ __html: t("home.ctaLine2") }} /><br />
            <span dangerouslySetInnerHTML={{ __html: t("home.ctaLine3") }} />
          </h2>
          <div className="cta-contact">
            <div>
              <span className="cta-k">{t("home.phoneLabel")}</span>
              <a href="tel:+99312468077">+993 (12) 468077</a>
            </div>
            <div>
              <span className="cta-k">{t("home.emailLabel")}</span>
              <a href="mailto:hello@labyzly.com">hello@labyzly.com</a>
            </div>
            <div>
              <span className="cta-k">{t("home.regOfficeLabel")}</span>
              <span>Bld. 89, G. Guliyev — 2127 street, Ashgabat 744000, Turkmenistan</span>
            </div>
            <div>
              <span className="cta-k">{t("home.opOfficeLabel")}</span>
              <span>Z6, Bld. 82, Ataturk — 1972 street, Ashgabat 744000, Turkmenistan</span>
            </div>
          </div>
        </div>

        <form
          className="cta-form"
          onSubmit={(e) => { e.preventDefault(); setSent(true); }}
        >
          {sent ? (
            <div className="cta-thanks">
              <CheckCircleIcon />
              <h3>{t("home.thanksTitle")}</h3>
              <p>{t("home.thanksDesc")}</p>
              <button type="button" className="btn btn-ghost" onClick={() => setSent(false)}>{t("home.sendAnother")}</button>
            </div>
          ) : (
            <>
              <h3>{t("home.formTitle")}</h3>
              <label>
                <span>{t("home.labelCompany")}</span>
                <input type="text" required placeholder={t("home.placeholderCompany")} />
              </label>
              <div className="cta-form-row">
                <label>
                  <span>{t("home.labelName")}</span>
                  <input type="text" required placeholder={t("home.placeholderName")} />
                </label>
                <label>
                  <span>{t("home.labelEmail")}</span>
                  <input type="email" required placeholder={t("home.placeholderEmail")} />
                </label>
              </div>
              <label>
                <span>{t("home.labelInterest")}</span>
                <select defaultValue="">
                  <option value="" disabled>{t("home.optionChoose")}</option>
                  <option>{t("home.opt1")}</option>
                  <option>{t("home.opt2")}</option>
                  <option>{t("home.opt3")}</option>
                  <option>{t("home.opt4")}</option>
                  <option>{t("home.opt5")}</option>
                  <option>{t("home.opt6")}</option>
                  <option>{t("home.opt7")}</option>
                </select>
              </label>
              <label>
                <span>{t("home.labelMessage")}</span>
                <textarea rows={3} placeholder={t("home.placeholderMessage")} />
              </label>
              <label className="cta-consent">
                <input type="checkbox" required />
                <span>{t("home.consentText")}</span>
              </label>
              <button type="submit" className="btn btn-primary btn-lg">
                {t("home.submitBtn")} <ArrowIcon />
              </button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <a href="#" className="logo logo-light">
            <img className="logo-img" src="assets/logo-footer-white.png?v=1" alt="«LABYZLY» IE" />
          </a>
          <p>{t("footer.tagline")}</p>
        </div>
        <div className="footer-cols">
          <div>
            <h4>{t("footer.company")}</h4>
            <a href="About.html">{t("footer.linkAbout")}</a>
            <a href="#partners">{t("footer.linkPartners")}</a>
            <a href="Brands.html">{t("nav.brands")}</a>
            <a href="Projects.html">{t("nav.projects")}</a>
            <a href="#contact">{t("footer.linkContact")}</a>
          </div>
          <div>
            <h4>{t("footer.servicesTitle")}</h4>
            <a href="Services.html">{t("footer.svcEngineering")}</a>
            <a href="Services.html">{t("footer.svcMaintenance")}</a>
            <a href="Services.html">{t("footer.svcConstruction")}</a>
            <a href="Services.html">{t("footer.svcProcurement")}</a>
            <a href="Services.html">{t("footer.svcInspection")}</a>
            <a href="Services.html">{t("footer.svcAftersales")}</a>
          </div>
          <div>
            <h4>{t("footer.resources")}</h4>
            <a href="HSE.html">{t("footer.linkHse")}</a>
            <a href="Careers.html">{t("nav.careers")}</a>
          </div>
          <div className="footer-social">
            <h4>{t("footer.connect")}</h4>
            <a href="https://www.linkedin.com/company/ie-labyzly" target="_blank" rel="noopener noreferrer"><SocialIcon name="linkedin" /> LinkedIn</a>
            <a href="https://www.facebook.com/share/1CFwVvc2B2/" target="_blank" rel="noopener noreferrer"><SocialIcon name="facebook" /> Facebook</a>
            <a href="https://www.instagram.com/labyzly_enterprise?igsh=MTQ0bnMxaWdxeDE0Mw==" target="_blank" rel="noopener noreferrer"><SocialIcon name="instagram" /> Instagram</a>
            <a href="https://t.me/+99371154447" target="_blank" rel="noopener noreferrer"><SocialIcon name="telegram" /> Telegram</a>
            <a href="https://wa.me/99371154447" target="_blank" rel="noopener noreferrer"><SocialIcon name="whatsapp" /> WhatsApp</a>
          </div>
        </div>
      </div>
      <div className="container footer-foot">
        <span>{t("footer.copyright")}</span>
        <span>{t("footer.rights")}</span>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────
// ICONS
// ─────────────────────────────────────────────────────────────────
function LogoMark({ light }) {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
      <path d="M18 4 C 24 12, 28 18, 28 23 A 10 10 0 1 1 8 23 C 8 18, 12 12, 18 4 Z"
            fill="var(--accent)" />
      <path d="M18 4 C 24 12, 28 18, 28 23 A 10 10 0 1 1 8 23 C 8 18, 12 12, 18 4 Z"
            stroke={light ? "rgba(255,255,255,0.2)" : "rgba(11,15,18,0.15)"} strokeWidth="1.2" fill="none" />
    </svg>
  );
}
function PhoneIcon() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></svg>; }
function MailIcon() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg>; }
function PinIcon() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>; }
function ArrowIcon() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>; }
function PlayIcon() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>; }
function CheckIcon() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="m5 12 4 4L19 6"/></svg>; }
function CloseIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M18 6 6 18M6 6l12 12"/></svg>; }
function CheckCircleIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>; }
function SocialIcon({ name }) {
  if (name === "linkedin") return <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 1 2.5 6 2.5 2.5 0 0 1 4.98 3.5zM3 8.5h4V21H3zM9.5 8.5h3.8v1.7h.05a4.2 4.2 0 0 1 3.77-2.07c4 0 4.75 2.64 4.75 6.06V21h-4v-5.5c0-1.31-.02-3-1.83-3s-2.11 1.43-2.11 2.9V21h-4z"/></svg>;
  if (name === "facebook") return <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12z"/></svg>;
  if (name === "instagram") return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/></svg>;
  if (name === "telegram") return <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M21.9 4.3 18.6 20c-.24 1.09-.9 1.36-1.82.85l-5.03-3.71-2.43 2.34c-.27.27-.5.5-1 .5l.36-5.12L16.96 6.4c.4-.36-.09-.56-.62-.2L6.02 12.9l-5-1.56C-.05 11-.09 10.28 1.4 9.7L20.34 2.4c.9-.33 1.7.22 1.56 1.9z"/></svg>;
  if (name === "whatsapp") return <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2a9.9 9.9 0 0 0-8.42 15.13L2 22l4.98-1.3A9.9 9.9 0 1 0 12.04 2zm0 1.8a8.1 8.1 0 0 1 5.72 13.83 8.1 8.1 0 0 1-9.9 1.23l-.35-.21-2.96.77.79-2.88-.23-.37A8.1 8.1 0 0 1 12.04 3.8zm-2.6 3.7c-.14 0-.37.05-.56.26s-.74.72-.74 1.76.76 2.04.86 2.18 1.5 2.4 3.66 3.28c1.8.71 2.17.57 2.56.53.39-.03 1.26-.51 1.44-1.01.18-.5.18-.93.13-1.02-.05-.09-.2-.14-.42-.25s-1.26-.62-1.45-.69c-.2-.07-.34-.11-.48.11s-.55.69-.68.83c-.12.14-.25.16-.46.05a5.9 5.9 0 0 1-1.74-1.07 6.5 6.5 0 0 1-1.2-1.49c-.13-.22 0-.33.1-.44.1-.1.22-.25.32-.38.11-.13.14-.22.22-.37.07-.14.03-.27-.02-.38-.05-.11-.47-1.16-.65-1.58-.16-.4-.33-.35-.46-.36z"/></svg>;
  return null;
}
function DotIcon() { return <svg width="8" height="8" viewBox="0 0 8 8"><rect x="0" y="0" width="8" height="8" fill="var(--accent)" transform="rotate(45 4 4)" /></svg>; }
function ServiceIcon({ name }) {
  const common = { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", stroke: "var(--accent)", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "wrench") return (
    <svg {...common}><path d="M30 6a8 8 0 0 0-9.6 10.4L6 30.8 17.2 42l14.4-14.4A8 8 0 0 0 42 18l-6 6-4-4 6-6a8 8 0 0 0-8-8z" /></svg>
  );
  if (name === "helmet") return (
    <svg {...common}><path d="M6 32a18 18 0 0 1 36 0Z"/><path d="M6 32h36v6H6z"/><path d="M18 14v8M30 14v8M24 12v10"/></svg>
  );
  if (name === "box") return (
    <svg {...common}><path d="M6 14 24 6l18 8v20l-18 8L6 34z"/><path d="M6 14l18 8 18-8M24 22v20"/></svg>
  );
  if (name === "compass") return (
    <svg {...common}><circle cx="24" cy="24" r="18"/><path d="m32 16-4 12-12 4 4-12z"/></svg>
  );
  return null;
}

// ─────────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────────
function App() {
  const [tw, setTweak] = window.useTweaks(DEFAULTS);
  const { lang, setLang, t } = useLang();

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tw.accent);
    document.documentElement.style.setProperty("--display-font", `'${tw.displayFont}', sans-serif`);
    document.documentElement.style.setProperty("--body-font", `'${tw.bodyFont}', sans-serif`);
    document.documentElement.dataset.density = tw.density;
  }, [tw.accent, tw.displayFont, tw.bodyFont, tw.density]);

  const { TweaksPanel, TweakSection, TweakColor, TweakSelect, TweakToggle } = window;

  return (
    <>
      <header className="site-header">
        <TopBar lang={lang} setLang={setLang} />
        <Nav t={t} lang={lang} setLang={setLang} />
      </header>
      <main>
        <Hero t={t} showGrid={tw.showGridBg} showStats={tw.showStats} />
        <TrustStrip t={t} />
        <Services t={t} />
        <Equipment t={t} />
        <Pillars t={t} />
        <Manufacturers t={t} />
        <Clients t={t} />
        <CTA t={t} />
      </main>
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor
            label="Accent"
            value={tw.accent}
            options={["#00B7FF", "#FF6A2A", "#E5FF3D", "#7C5CFF", "#22C55E"]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection title="Typography">
          <TweakSelect
            label="Display font"
            value={tw.displayFont}
            options={["Bai Jamjuree", "Montserrat"]}
            onChange={(v) => setTweak("displayFont", v)}
          />
          <TweakSelect
            label="Body font"
            value={tw.bodyFont}
            options={["Montserrat", "Bai Jamjuree"]}
            onChange={(v) => setTweak("bodyFont", v)}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakToggle
            label="Grid background"
            value={tw.showGridBg}
            onChange={(v) => setTweak("showGridBg", v)}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakSelect
            label="Density"
            value={tw.density}
            options={["compact", "comfortable", "spacious"]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
window.__appMounted = true;
window.dispatchEvent(new Event("app:mounted"));

if (window.location.hash) {
  const targetId = window.location.hash.slice(1);
  const scrollToTarget = () => {
    const target = document.getElementById(targetId);
    if (target) target.scrollIntoView({ behavior: "instant", block: "start" });
  };
  // Scroll as soon as the section exists, then re-apply once every image on
  // the page has finished loading — images below the target section shift
  // its position as they load, so the first attempt alone can land short.
  requestAnimationFrame(scrollToTarget);
  if (document.readyState === "complete") {
    setTimeout(scrollToTarget, 50);
  } else {
    window.addEventListener("load", () => setTimeout(scrollToTarget, 50), { once: true });
  }
}