// Applications, Objects, About, Contacts — driven by TEXTS / PARTNERS / MILESTONES / FAQ

// Simple markdown-lite: **bold** and *italic*
function renderRichText(str) {
  if (!str) return null;
  const parts = [];
  let idx = 0;
  const regex = /(\*\*([^*]+)\*\*|\*([^*]+)\*)/g;
  let m;
  while ((m = regex.exec(str)) !== null) {
    if (m.index > idx) parts.push(str.slice(idx, m.index));
    if (m[2]) parts.push(<strong key={m.index}>{m[2]}</strong>);
    else if (m[3]) parts.push(<em key={m.index}>{m[3]}</em>);
    idx = m.index + m[0].length;
  }
  if (idx < str.length) parts.push(str.slice(idx));
  return parts;
}

function ApplicationsPage() {
  useLang();
  const ap = TEXTS.applications || {};
  return (
    <main className="applications">
      <section className="page-hero">
        <div className="eyebrow">{ap.eyebrow || "Применение"}</div>
        <h1 className="page-title">{ap.title || "Где живут"}<br/><em>{ap.titleItalic || "наши фактуры"}</em></h1>
        <p className="page-lede">{ap.lede}</p>
      </section>

      <section className="apps-grid">
        {APPLICATIONS.map((a, i) => {
          const p = PRODUCTS[(i * 2) % PRODUCTS.length];
          const photo = a.photo || PHOTOS.applications?.[`slot${i+1}`];
          return (
            <div key={a.title + i} className="app-card">
              <div className="app-card-num">{String(i+1).padStart(2,"0")}</div>
              <div className="app-card-swatch">
                {photo ? <img src={photo} alt={a.title} loading="lazy" onError={e => { e.currentTarget.style.display = "none"; }}/> : <Swatch product={p}/>}
              </div>
              <div className="app-card-body">
                <h3>{a.title}</h3>
                <p>{a.desc}</p>
                <div className="app-card-products">
                  <span>{t("apps.recommended")}</span>
                  <Link to={`/product/${p.slug}`}>{p.name}</Link>
                </div>
              </div>
            </div>
          );
        })}
      </section>

      <section className="apps-compare">
        <div className="eyebrow">{t("apps.matrix.eyebrow")}</div>
        <h2 className="section-title">{t("apps.matrix.title")}</h2>
        <div className="compare-table">
          <div className="compare-head">
            <div>{t("apps.matrix.col.name")}</div>
            <div>{t("apps.matrix.col.interior")}</div>
            <div>{t("apps.matrix.col.exterior")}</div>
            <div>{t("apps.matrix.col.base")}</div>
            <div>{t("apps.matrix.col.effect")}</div>
          </div>
          {PRODUCTS.map(p => (
            <Link key={p.slug} to={`/product/${p.slug}`} className="compare-row">
              <div className="compare-name"><span className="compare-swatch-mini"><Swatch product={p}/></span>{p.name}</div>
              <div>{p.category === "interior" || p.category === "both" ? "●" : "○"}</div>
              <div>{p.category === "exterior" || p.category === "both" ? "●" : "○"}</div>
              <div>{p.base === "mineral" ? t("apps.matrix.mineralShort") : t("apps.matrix.acrylicShort")}</div>
              <div>{p.effect}</div>
            </Link>
          ))}
        </div>
      </section>
    </main>
  );
}

function _objectSlugify(s) {
  return String(s || "").toLowerCase()
    .replace(/['']/g, "")
    .replace(/[^\p{L}\p{N}]+/gu, "-")
    .replace(/^-+|-+$/g, "");
}

function _objectSlug(o) {
  return o.slug || _objectSlugify(o.name) || "object";
}

function _objectImages(o, i) {
  const cover = o.photo || (PHOTOS.objects || [])[i];
  const gallery = (o.gallery || []).map(g => (g && typeof g === "object" ? g.url : g)).filter(Boolean);
  const all = [];
  if (cover) all.push(cover);
  for (const g of gallery) if (g !== cover) all.push(g);
  return { cover, all };
}

function Lightbox({ images, startIndex, title, onClose }) {
  const [index, setIndex] = React.useState(startIndex || 0);
  const max = images.length;

  const prev = (e) => { if (e) e.stopPropagation(); setIndex(i => (i - 1 + max) % max); };
  const next = (e) => { if (e) e.stopPropagation(); setIndex(i => (i + 1) % max); };

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft") setIndex(i => (i - 1 + max) % max);
      else if (e.key === "ArrowRight") setIndex(i => (i + 1) % max);
    };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [max, onClose]);

  if (!max) return null;

  return (
    <div className="lightbox-backdrop" onClick={onClose} role="dialog" aria-modal="true" aria-label={title || "Галерея"}>
      <button className="lightbox-close" onClick={(e) => { e.stopPropagation(); onClose(); }} aria-label="Закрыть">×</button>
      {max > 1 && <button className="lightbox-prev" onClick={prev} aria-label="Предыдущее фото">‹</button>}
      {max > 1 && <button className="lightbox-next" onClick={next} aria-label="Следующее фото">›</button>}
      <div className="lightbox-content" onClick={(e) => e.stopPropagation()}>
        <img src={images[index]} alt={title || ""} />
        {title && <div className="lightbox-caption">{title}{max > 1 && <span className="lightbox-counter"> · {index + 1} / {max}</span>}</div>}
      </div>
    </div>
  );
}

function ObjectsPage() {
  useLang();
  const op = TEXTS.objects || {};

  return (
    <main className="objects-page">
      <section className="page-hero">
        <h1 className="page-title">{op.title || "Реализовано"}<br/><em>{op.titleItalic || "и запомнилось"}</em></h1>
        <p className="page-lede">{op.lede}</p>
      </section>

      {/* OBJECTS — Нам доверяют */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="eyebrow">{op.objectsEyebrow || "Объекты"}</div>
            <h2 className="section-title">{op.objectsTitle || "Нам доверяют"}</h2>
          </div>
        </div>
        <div className="obj-strip">
          {OBJECTS.map((o, i) => {
            const { cover, all } = _objectImages(o, i);
            const slug = _objectSlug(o);
            return (
              <Link
                key={o.name + o.year + i}
                to={`/object/${slug}`}
                className="obj-card obj-card-clickable"
                aria-label={`${o.name} — подробнее`}
              >
                {cover && (
                  <div className="obj-card-photo">
                    <img src={cover} alt="" loading="lazy" onError={e => { e.currentTarget.parentElement.style.display = "none"; }}/>
                    {all.length > 1 && <div className="obj-card-badge" aria-hidden="true">{all.length} фото</div>}
                    <div className="obj-card-zoom" aria-hidden="true">→</div>
                  </div>
                )}
                <div className="obj-year">{o.year}</div>
                <div className="obj-name">{o.name}</div>
                <div className="obj-type">{o.type}</div>
                <div className="obj-surface">{o.surface}</div>
              </Link>
            );
          })}
        </div>
      </section>

      {/* PARTNERS — clean logo bar */}
      {PARTNERS.length > 0 && (
        <section className="logobar-section">
          <h2 className="logobar-title">{op.partnersTitle || "Наши партнеры и заказчики"}</h2>
          <div className="logobar-grid">
            {PARTNERS.map((p, i) => (
              <div key={p.name + i} className="logobar-cell" title={p.name}>
                {p.logo ? (
                  <img src={p.logo} alt={p.name} className="logobar-logo" loading="lazy"
                    onError={e => { e.currentTarget.style.display = "none"; e.currentTarget.parentElement.querySelector(".logobar-fallback").style.display = "block"; }}/>
                ) : null}
                <span className="logobar-fallback" style={{ display: p.logo ? "none" : "block" }}>{p.name}</span>
              </div>
            ))}
          </div>
        </section>
      )}
    </main>
  );
}

function ObjectDetailPage({ slug }) {
  useLang();
  let obj = null, idx = -1;
  for (let i = 0; i < OBJECTS.length; i++) {
    if (_objectSlug(OBJECTS[i]) === slug) { obj = OBJECTS[i]; idx = i; break; }
  }
  const [active, setActive] = React.useState(null);

  if (!obj) {
    return (
      <main className="page-404">
        <h1>{t("notFound.title")}</h1>
        <Link to="/objects" className="btn btn-primary">{t("objects.back") || "К объектам"}</Link>
      </main>
    );
  }

  const { all } = _objectImages(obj, idx);
  const cover = all[0];
  const rest = all.slice(1);
  const open = (start) => setActive({ images: all, name: obj.name, start });

  const facts = [];
  if (obj.type) facts.push({ label: t("objects.tile.type") || "Тип", value: obj.type });
  if (obj.year) facts.push({ label: t("objects.tile.year") || "Год", value: obj.year });
  if (obj.surface) facts.push({ label: t("objects.tile.textures") || "Фактуры", value: obj.surface });
  if (obj.location) facts.push({ label: t("objects.tile.location") || "Локация", value: obj.location });

  return (
    <main className="object-detail">
      <section className="page-hero object-hero">
        <Link to="/objects" className="back-link">← {t("objects.back") || "К объектам"}</Link>
        {obj.year && <div className="eyebrow">{obj.year}</div>}
        <h1 className="page-title">{obj.name}</h1>
        {obj.type && <p className="page-lede">{obj.type}{obj.surface ? ` · ${obj.surface}` : ""}</p>}
      </section>

      {cover && (
        <section className="object-cover">
          <button type="button" className="object-cover-btn" onClick={() => open(0)} aria-label="Открыть фото">
            <img src={cover} alt={obj.name}/>
            {all.length > 1 && <span className="object-cover-badge">{all.length} фото</span>}
          </button>
        </section>
      )}

      {(obj.desc || facts.length > 0) && (
        <section className="object-info">
          <div className="object-info-grid">
            {obj.desc && (
              <div className="object-info-body">
                {String(obj.desc).split("\n\n").map((para, i) => (
                  <p key={i}>{renderRichText(para)}</p>
                ))}
              </div>
            )}
            {facts.length > 0 && (
              <aside className="object-facts">
                {facts.map((f, i) => (
                  <div key={i} className="object-fact">
                    <div className="object-fact-label">{f.label}</div>
                    <div className="object-fact-value">{f.value}</div>
                  </div>
                ))}
              </aside>
            )}
          </div>
        </section>
      )}

      {rest.length > 0 && (
        <section className="object-gallery">
          <div className="section-head">
            <div>
              <div className="eyebrow">{t("objects.galleryEyebrow") || "Галерея"}</div>
              <h2 className="section-title">{t("objects.galleryTitle") || "Фотографии объекта"}</h2>
            </div>
          </div>
          <div className="object-gallery-grid">
            {rest.map((src, i) => (
              <button key={i} type="button" className="object-gallery-tile" onClick={() => open(i + 1)} aria-label={`Открыть фото ${i + 2}`}>
                <img src={src} alt="" loading="lazy"/>
              </button>
            ))}
          </div>
        </section>
      )}

      <section className="object-cta">
        <h2 className="section-title">{t("objects.ctaTitle") || "Ваш объект — следующий"}</h2>
        <p>{t("objects.ctaDesc") || "Поможем подобрать фактуру под вашу задачу — от частных интерьеров до общественных пространств."}</p>
        <div className="object-cta-row">
          <Link to="/contacts" className="btn btn-primary">{t("objects.ctaBtn") || "Связаться с нами"}</Link>
          <Link to="/objects" className="btn btn-ghost">{t("objects.back") || "К объектам"}</Link>
        </div>
      </section>

      {active && (
        <Lightbox images={active.images} startIndex={active.start} title={active.name} onClose={() => setActive(null)}/>
      )}
    </main>
  );
}

// Fallback icons for the horizontal milestone timeline. If a milestone's
// `icon` field is empty, we pick a default based on its position so the
// timeline always has visual variety.
const MILESTONE_FALLBACK_ICONS = ["🏗️", "🎨", "📜", "🌍", "🏆", "🌱", "✨", "⚡"];

function AboutPage() {
  useLang();
  const ab = TEXTS.about || {};
  const storyParagraphs = ab.storyParagraphs || [];
  const stats = ab.stats || [];

  return (
    <main className="about">
      <section className="about-hero about-hero-split">
        <div className="about-hero-copy">
          <div className="eyebrow">{ab.eyebrow}</div>
          <h1 className="page-title">
            {(ab.title || "").split("\n").map((line, i, arr) => (
              <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
            ))}
            {ab.titleItalic && <><br/><em>{ab.titleItalic}</em></>}
          </h1>
          <p className="about-lede">{ab.lede}</p>
        </div>
        {PHOTOS.about?.hero && (
          <div className="about-hero-photo">
            <img src={PHOTOS.about.hero} alt="" loading="lazy" onError={e => { e.currentTarget.parentElement.style.display = "none"; }}/>
          </div>
        )}
      </section>

      {PHOTOS.about?.band?.some(Boolean) && (
        <section className="about-band">
          <div className="eyebrow">{ab.bandEyebrow || "Производство и работа"}</div>
          <div className="about-band-grid">
            {PHOTOS.about.band.filter(Boolean).map((src, i) => (
              <div key={i} className="about-band-photo">
                <img src={src} alt="" loading="lazy" onError={e => { e.currentTarget.parentElement.style.display = "none"; }}/>
              </div>
            ))}
          </div>
        </section>
      )}

      <section className="about-story">
        <div className="about-story-grid">
          <div className="about-story-quote">
            <div className="story-mark">❝</div>
            <p>{COMPANY.director?.quote}</p>
            <div className="about-author">
              <strong>{COMPANY.director?.name}</strong>
              <span>{COMPANY.director?.role}</span>
            </div>
          </div>
          <div className="about-story-body">
            {storyParagraphs.map((p, i) => <p key={i}>{renderRichText(p)}</p>)}
          </div>
        </div>
      </section>

      {(ab.problems || []).length > 0 && (
        <section className="about-problem">
          <div className="eyebrow">{ab.problemEyebrow || "Задача рынка"}</div>
          <h2 className="section-title">{ab.problemTitle || "Какую проблему рынка мы решаем"}</h2>
          <div className="problem-grid">
            {ab.problems.map((p, i) => (
              <div key={i} className="problem-card">
                <div className="problem-icon" aria-hidden="true">{p.icon}</div>
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
              </div>
            ))}
          </div>
        </section>
      )}

      {(ab.mission || ab.vision || (ab.values || []).length > 0) && (
        <section className="about-mvv">
          <div className="eyebrow">{ab.mvvEyebrow || "Направление"}</div>
          <h2 className="section-title">{ab.mvvTitle || "Миссия, видение и ценности"}</h2>
          <div className="mvv-grid">
            {ab.mission && (
              <div className="mvv-card mvv-mission">
                <div className="mvv-icon" aria-hidden="true">🎯</div>
                <div className="mvv-label">{ab.missionTitle || "Миссия"}</div>
                <p>{ab.mission}</p>
              </div>
            )}
            {ab.vision && (
              <div className="mvv-card mvv-vision">
                <div className="mvv-icon" aria-hidden="true">🔭</div>
                <div className="mvv-label">{ab.visionTitle || "Видение"}</div>
                <p>{ab.vision}</p>
              </div>
            )}
            {(ab.values || []).length > 0 && (
              <div className="mvv-card mvv-values">
                <div className="mvv-icon" aria-hidden="true">⚡</div>
                <div className="mvv-label">{ab.valuesTitle || "Ценности"}</div>
                <ul>
                  {ab.values.map((v, i) => (
                    <li key={i}>
                      <span className="mvv-bullet" aria-hidden="true">{v.icon}</span>
                      <strong>{v.title}</strong>
                      <span className="mvv-desc">{v.desc}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        </section>
      )}

      {stats.length > 0 && (
        <section className="about-stats">
          {stats.map((s, i) => (
            <div key={i} className="stat"><strong>{s.num}</strong><span>{s.label}</span></div>
          ))}
        </section>
      )}

      {MILESTONES.length > 0 && (
        <section className="about-milestones">
          <div className="eyebrow">{ab.milestonesEyebrow || "Путь"}</div>
          <h2 className="section-title">{ab.milestonesTitle || "Этапы роста"}</h2>
          <div className="timeline-h">
            <div className="tl-h-line" aria-hidden="true"/>
            {MILESTONES.map((m, i) => (
              <div key={m.year + i} className="tl-h-item">
                <div className="tl-h-icon" aria-hidden="true">
                  {m.icon || MILESTONE_FALLBACK_ICONS[i % MILESTONE_FALLBACK_ICONS.length]}
                </div>
                <div className="tl-h-year">{m.year}</div>
                <h4 className="tl-h-title">{m.title}</h4>
                <p className="tl-h-desc">{m.desc}</p>
              </div>
            ))}
          </div>
        </section>
      )}

      {(ab.achievementBody || []).length > 0 && (
        <section className="about-achievement">
          <div className="achievement-head">
            <div className="eyebrow">{ab.achievementEyebrow || "Достижение 2019 года"}</div>
            <h2 className="section-title">{ab.achievementTitle || "UzBuild 2019"}</h2>
          </div>
          <div className="achievement-body">
            {(ab.achievementBody || []).map((para, i) => (
              <p key={i}>{typeof para === "string" ? para : para?.para || ""}</p>
            ))}
          </div>
          {(() => {
            const photos = (PHOTOS.achievement || [])
              .map(p => typeof p === "string" ? p : p?.url || "")
              .filter(Boolean);
            if (!photos.length) return null;
            return (
              <div className="achievement-gallery">
                {photos.map((src, i) => (
                  <a key={i} href={src} target="_blank" rel="noopener noreferrer"
                     className="achievement-photo" aria-label={`UzBuild 2019 — фото ${i + 1}`}>
                    <img src={src} alt="" loading="lazy"
                      onError={e => { e.currentTarget.parentElement.style.display = "none"; }}/>
                  </a>
                ))}
              </div>
            );
          })()}
        </section>
      )}

      <section className="about-team">
        <div className="eyebrow">{ab.teamEyebrow || "Руководство"}</div>
        <h2 className="section-title">{ab.teamTitle || "Команда"}</h2>
        <div className="team-grid">
          {TEAM.map(tm => (
            <div key={tm.name} className="team-card">
              {tm.photo ? (
                <img className="team-photo" src={tm.photo} alt={tm.name} loading="lazy"
                  onError={e => {
                    e.currentTarget.style.display = "none";
                    const sib = e.currentTarget.nextElementSibling;
                    if (sib) sib.style.display = "flex";
                  }}/>
              ) : null}
              <div className="team-avatar" style={{display: tm.photo ? "none" : "flex"}}>{tm.init}</div>
              <div className="team-name">{tm.name}</div>
              <div className="team-role">{tm.role}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="about-developers">
        <div className="eyebrow">{ab.developersEyebrow || "Для девелоперов"}</div>
        <h2 className="section-title">
          {(ab.developersTitle || "Решения для\nжилых комплексов").split("\n").map((line, i, arr) => (
            <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
          ))}
        </h2>
        {ab.developersLede && <p className="about-dev-lede">{ab.developersLede}</p>}
        <div className="about-dev-grid">
          <div className="about-dev-card">
            <div className="about-dev-card-icon" aria-hidden="true">🏗️</div>
            <h3>{ab.developersGetTitle || "Что получает девелопер"}</h3>
            <ul>
              {(ab.developersGetItems || "").split("\n").map(s => s.trim()).filter(Boolean).map((item, i) => (
                <li key={i}>{item}</li>
              ))}
            </ul>
          </div>
          <div className="about-dev-card">
            <div className="about-dev-card-icon" aria-hidden="true">📍</div>
            <h3>{ab.developersWhereTitle || "Где применяются материалы"}</h3>
            <ul>
              {(ab.developersWhereItems || "").split("\n").map(s => s.trim()).filter(Boolean).map((item, i) => (
                <li key={i}>{item}</li>
              ))}
            </ul>
          </div>
          <div className="about-dev-card">
            <div className="about-dev-card-icon" aria-hidden="true">⚡</div>
            <h3>{ab.developersTechTitle || "Технологическое преимущество"}</h3>
            {ab.developersTechIntro && <p className="about-dev-tech-intro">{ab.developersTechIntro}</p>}
            <ul>
              {(ab.developersTechItems || "").split("\n").map(s => s.trim()).filter(Boolean).map((item, i) => (
                <li key={i}>{item}</li>
              ))}
            </ul>
          </div>
        </div>
        {ab.developersOutro && <p className="about-dev-outro">{ab.developersOutro}</p>}
      </section>

      <section className="about-plans">
        <div className="eyebrow">{ab.plansEyebrow || "Планы на 2026"}</div>
        <h2 className="section-title">{ab.plansTitle || "Куда мы идём"}</h2>
        <div className="plans-grid">
          {PLANS.map((plan, i) => (
            <article key={i} className="plan-card">
              <header className="plan-card-head">
                <span className="plan-card-num">{String(i+1).padStart(2,"0")}</span>
                {plan.icon && <span className="plan-card-icon" aria-hidden="true">{plan.icon}</span>}
              </header>
              <h3>{plan.title}</h3>
              <p>{plan.desc}</p>
              {plan.tag && <div className="plan-card-tag">{plan.tag}</div>}
            </article>
          ))}
        </div>
      </section>
    </main>
  );
}

function ContactsPage() {
  useLang();
  const ct = TEXTS.contacts || {};
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", message: "", projectType: "residential", area: "" });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [errMsg, setErrMsg] = React.useState("");
  const [openFaq, setOpenFaq] = React.useState(-1);

  const submit = async (e) => {
    e.preventDefault();
    setErrMsg("");
    const v = _validateContactForm(form);
    if (!v.ok || !v.cleaned.email) {
      setErrMsg(!v.ok ? v.message : t("form.errContacts"));
      return;
    }
    if (!_canSubmitNow()) {
      setErrMsg(t("form.errRateLimited") || "Слишком много заявок подряд — подождите немного.");
      return;
    }
    setSending(true);
    try {
      await sendRequest({ source: "contacts", contact: v.cleaned });
      _recordSubmit();
      setSent(true);
    } catch {
      setErrMsg(t("form.errSend"));
    } finally {
      setSending(false);
    }
  };

  return (
    <main className="contacts">
      {PHOTOS.contacts?.hero && (
        <div className="contacts-banner">
          <img src={PHOTOS.contacts.hero} alt="" loading="lazy" onError={e => { e.currentTarget.parentElement.style.display = "none"; }}/>
          <div className="contacts-banner-overlay"/>
        </div>
      )}

      <section className="contacts-hero">
        <div className="eyebrow">{ct.eyebrow || "Контакты"}</div>
        <h1 className="page-title">{ct.title || "Свяжитесь"}<br/><em>{ct.titleItalic || "с нами"}</em></h1>
        <p className="page-lede">{ct.lede}</p>
      </section>

      {/* Reach cards — quick options */}
      <section className="contacts-reach">
        <a href={`tel:${COMPANY.phoneHref || ""}`} className="reach-card">
          <div className="reach-icon">📞</div>
          <div className="reach-label">{t("contacts.reach.call")}</div>
          <div className="reach-value">{COMPANY.phone}</div>
        </a>
        <a href={`mailto:${COMPANY.email || ""}`} className="reach-card">
          <div className="reach-icon">✉</div>
          <div className="reach-label">{t("contacts.reach.write")}</div>
          <div className="reach-value">{COMPANY.email}</div>
        </a>
        {COMPANY.social?.telegram && (
          <a href={COMPANY.social.telegram} target="_blank" rel="noopener noreferrer" className="reach-card">
            <div className="reach-icon">💬</div>
            <div className="reach-label">{t("contacts.reach.telegram")}</div>
            <div className="reach-value">{t("contacts.reach.telegramDesc")}</div>
          </a>
        )}
        {COMPANY.social?.whatsapp && (
          <a href={COMPANY.social.whatsapp} target="_blank" rel="noopener noreferrer" className="reach-card">
            <div className="reach-icon">🟢</div>
            <div className="reach-label">{t("contacts.reach.whatsapp")}</div>
            <div className="reach-value">{t("contacts.reach.whatsappDesc")}</div>
          </a>
        )}
      </section>

      <section className="contacts-grid">
        <div className="contacts-info">
          <div className="ci-block">
            <div className="ci-label">{t("contacts.info.address")}</div>
            <p className="ci-value">{(COMPANY.address || "").split("\n").map((line, i, arr) => (
              <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
            ))}</p>
          </div>
          <div className="ci-block">
            <div className="ci-label">{t("contacts.info.hours")}</div>
            <p className="ci-value">{COMPANY.hours}</p>
          </div>
          {COMPANY.mapEmbed && (
            <div className="ci-map">
              <iframe
                src={COMPANY.mapEmbed}
                loading="lazy"
                title={t("contacts.map.title")}
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
            </div>
          )}
          <div className="ci-socials">
            {COMPANY.social?.telegram && <a href={COMPANY.social.telegram} target="_blank" rel="noopener noreferrer">Telegram</a>}
            {COMPANY.social?.instagram && <a href={COMPANY.social.instagram} target="_blank" rel="noopener noreferrer">Instagram</a>}
            {COMPANY.social?.whatsapp && <a href={COMPANY.social.whatsapp} target="_blank" rel="noopener noreferrer">WhatsApp</a>}
          </div>
        </div>

        <div className="contacts-form">
          {!sent ? (
            <form onSubmit={submit}>
              <div className="eyebrow">{t("contacts.form.eyebrow")}</div>
              <h2 className="form-title">{ct.formTitle || "Расскажите о проекте"}</h2>
              <label>
                <span>{t("form.name")}</span>
                <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})}/>
              </label>
              <div className="form-row">
                <label>
                  <span>{t("form.email")}</span>
                  <input type="email" required value={form.email} onChange={e => setForm({...form, email: e.target.value})}/>
                </label>
                <label>
                  <span>{t("form.phone")}</span>
                  <input type="tel" required value={form.phone} onChange={e => setForm({...form, phone: e.target.value})}/>
                </label>
              </div>
              <div className="form-row">
                <label>
                  <span>{t("form.projectType")}</span>
                  <select value={form.projectType} onChange={e => setForm({...form, projectType: e.target.value})}>
                    <option value="residential">{t("form.projectType.residential")}</option>
                    <option value="facade">{t("form.projectType.facade")}</option>
                    <option value="horeca">{t("form.projectType.horeca")}</option>
                    <option value="office">{t("form.projectType.office")}</option>
                    <option value="retail">{t("form.projectType.retail")}</option>
                    <option value="public">{t("form.projectType.public")}</option>
                    <option value="other">{t("form.projectType.other")}</option>
                  </select>
                </label>
                <label>
                  <span>{t("form.area")}</span>
                  <input type="number" min="0" value={form.area} onChange={e => setForm({...form, area: e.target.value})} placeholder={t("form.areaPlaceholder")}/>
                </label>
              </div>
              <label>
                <span>{t("form.message")}</span>
                <textarea rows="4" placeholder={t("form.messagePlaceholder")} value={form.message} onChange={e => setForm({...form, message: e.target.value})}/>
              </label>
              {errMsg && <div className="form-err">{errMsg}</div>}
              <button type="submit" className="btn btn-primary" disabled={sending}>
                {sending ? t("form.sending") : t("form.submit")}
              </button>
              <p className="form-note">{ct.formNote || "Нажимая кнопку, вы соглашаетесь с политикой обработки данных."}</p>
            </form>
          ) : (
            <div className="form-success">
              <div className="success-mark">✓</div>
              <h2>{t("form.success.title")}</h2>
              <p>{t("form.success.body")}</p>
              <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({name:"",email:"",phone:"",message:"",projectType:"residential",area:""}); }}>{t("form.success.again")}</button>
            </div>
          )}
        </div>
      </section>

      {FAQ.length > 0 && (
        <section className="contacts-faq">
          <div className="eyebrow">{ct.faqEyebrow || "Вопросы"}</div>
          <h2 className="section-title">{ct.faqTitle || "Частые вопросы"}</h2>
          <div className="faq-list">
            {FAQ.map((item, i) => (
              <div key={i} className={`faq-item ${openFaq === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span>{item.q}</span>
                  <span className="faq-toggle">{openFaq === i ? "−" : "+"}</span>
                </button>
                {openFaq === i && <div className="faq-a">{item.a}</div>}
              </div>
            ))}
          </div>
        </section>
      )}

    </main>
  );
}

function AdvantagesPage() {
  useLang();
  const a = TEXTS.advantages || {};
  const items = a.items || [];
  return (
    <main className="advantages-page">
      <section className="page-hero">
        <div className="eyebrow">{a.eyebrow || "Преимущества"}</div>
        <h1 className="page-title">
          {(a.title || "").split("\n").map((line, i, arr) => (
            <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
          ))}
        </h1>
        {a.lede && <p className="page-lede">{a.lede}</p>}
      </section>

      <section className="adv-grid-page">
        {items.map((it, i) => (
          <article key={i} className="adv-page-card">
            <div className="adv-page-card-head">
              <span className="adv-page-num">{it.num}</span>
              <span className="adv-page-icon" aria-hidden="true">{it.icon}</span>
            </div>
            <h3>{it.title}</h3>
            {it.desc && <p>{it.desc}</p>}
            {(it.bullets || []).length > 0 && (
              <ul>
                {it.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
            )}
          </article>
        ))}
      </section>
    </main>
  );
}

function ProductionPage() {
  useLang();
  const p = TEXTS.production || {};
  return (
    <main className="production-page">
      <section className="page-hero">
        <div className="eyebrow">{p.eyebrow || "Производство"}</div>
        <h1 className="page-title">
          {(p.title || "").split("\n").map((line, i, arr) => (
            <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
          ))}
        </h1>
        {p.lede && <p className="page-lede">{p.lede}</p>}
      </section>

      {p.intro && (
        <section className="prod-intro">
          <p>{p.intro}</p>
        </section>
      )}

      {(p.nums || []).length > 0 && (
        <section className="prod-nums">
          <div className="eyebrow">{p.numsEyebrow || "Производство в цифрах"}</div>
          <h2 className="section-title">{p.numsTitle || "Мощности и команда"}</h2>
          <div className="prod-nums-grid">
            {p.nums.map((n, i) => (
              <div key={i} className="prod-num-card">
                <div className="prod-num-icon" aria-hidden="true">{n.icon}</div>
                <strong>{n.num}</strong>
                <span>{n.label}</span>
              </div>
            ))}
          </div>
        </section>
      )}

      {(p.team || []).length > 0 && (
        <section className="prod-team">
          <h2 className="section-title">{p.teamTitle || "Наша команда"}</h2>
          <div className="prod-team-grid">
            {p.team.map((t, i) => (
              <div key={i} className="prod-team-card">
                <div className="prod-team-icon" aria-hidden="true">{t.icon}</div>
                <p>{t.label}</p>
              </div>
            ))}
          </div>
        </section>
      )}

      {(p.lab || []).length > 0 && (
        <section className="prod-lab">
          <h2 className="section-title">{p.labTitle || "Собственная лаборатория"}</h2>
          {p.labIntro && <p className="prod-lab-intro">{p.labIntro}</p>}
          <div className="prod-lab-grid">
            {p.lab.map((l, i) => (
              <div key={i} className="prod-lab-card">
                <div className="prod-lab-icon" aria-hidden="true">{l.icon}</div>
                <p>{l.label}</p>
              </div>
            ))}
          </div>
          {p.labNote && <p className="prod-lab-note">{p.labNote}</p>}
        </section>
      )}

      {(p.qa || []).length > 0 && (
        <section className="prod-qa">
          <h2 className="section-title">{p.qaTitle || "Система контроля качества"}</h2>
          <div className="prod-qa-grid">
            {p.qa.map((q, i) => (
              <div key={i} className="prod-qa-card">
                <div className="prod-qa-step">{q.step}</div>
                <h4>{q.title}</h4>
                <p>{q.desc}</p>
              </div>
            ))}
          </div>
          {p.qaNote && <p className="prod-qa-note">{p.qaNote}</p>}
        </section>
      )}
    </main>
  );
}

function PartnershipPage() {
  useLang();
  const p = TEXTS.partnership || {};
  return (
    <main className="partnership-page">
      <section className="page-hero">
        <div className="eyebrow">{p.eyebrow || "Партнёрство"}</div>
        <h1 className="page-title">
          {(p.title || "").split("\n").map((line, i, arr) => (
            <React.Fragment key={i}>{line}{i < arr.length - 1 && <br/>}</React.Fragment>
          ))}
        </h1>
        {p.lede && <p className="page-lede">{p.lede}</p>}
      </section>

      {p.intro && (
        <section className="partnership-intro">
          <p>{p.intro}</p>
        </section>
      )}

      {(p.formats || []).length > 0 && (
        <section className="partnership-formats">
          {p.formatsTitle && <h2 className="section-title">{p.formatsTitle}</h2>}
          <div className="partnership-grid">
            {p.formats.map((f, i) => (
              <article key={i} className="partnership-card">
                <div className="partnership-icon" aria-hidden="true">{f.icon}</div>
                <h3>{f.title}</h3>
                {f.lede && <p className="partnership-lede">{f.lede}</p>}
                {(f.bullets || []).length > 0 && (
                  <ul>
                    {f.bullets.map((b, j) => <li key={j}>{b}</li>)}
                  </ul>
                )}
              </article>
            ))}
          </div>
        </section>
      )}

      <section className="partnership-cta">
        <div className="partnership-cta-inner">
          <h2>{p.ctaTitle || "Станьте нашим партнёром"}</h2>
          {p.ctaLede && <p>{p.ctaLede}</p>}
          <Link to="/contacts" className="btn btn-primary">{p.ctaButton || "Оставить заявку"}</Link>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ApplicationsPage, ObjectsPage, ObjectDetailPage, AboutPage, ContactsPage, AdvantagesPage, ProductionPage, PartnershipPage });