// Main NBR landing app
const { useState, useEffect } = React;

const WA_LINK = "https://wa.me/77005375376";
const WA_CHANNEL_LINK = "https://whatsapp.com/channel/0029VaddfEo4yltGv8AS3R0W";
const CATALOG_LINK = "https://nbrautoparts.com/online-price/";
const WHOLESALE_LINK = "wholesale.html";
const RETAIL_LINK = "https://nbr-auto.satu.kz/";
const REGISTRATION_VIDEO_IDS = {
  ru: "dqNbHgoUyh8",
  kz: "ywfYGJ9-Xd0",
};
const BRAND = { red: "#BD0603", redDark: "#8a0402", redSoft: "#fbe5e5" };

function trackEvent(name, detail = {}) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: name, ...detail });
  window.va?.("event", { name, data: detail });
}

function withCurrentQueryParams(target) {
  if (!window.location.search) return target;

  try {
    const url = new URL(target, window.location.origin);
    const params = new URLSearchParams(window.location.search);
    params.forEach((value, key) => {
      if (!url.searchParams.has(key)) url.searchParams.append(key, value);
    });

    if (url.origin === window.location.origin) {
      return `${url.pathname}${url.search}${url.hash}`;
    }

    return url.toString();
  } catch (error) {
    return target;
  }
}

function trackCustomerChoice(type) {
  const goal = type === "wholesale" ? "wholesale_chosen" : "retail_chosen";
  trackEvent("choose_customer_type", { type });
  trackEvent(goal, { type });
  window.gtag?.("event", "choose_customer_type", { type });
  window.fbq?.("trackCustom", "ChooseCustomerType", { type });
  if (window.ym && window.NBR_YM_COUNTER_ID) {
    window.ym(window.NBR_YM_COUNTER_ID, "reachGoal", type === "wholesale" ? "WHOLESALE_CHOSEN" : "RETAIL_CHOSEN");
  }
}

function Icon({ name, size = 16 }) {
  const props = {
    width: size, height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 2,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  switch (name) {
    case "phone": return <svg {...props}><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>;
    case "wa": return <svg {...props}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z" /></svg>;
    case "pin": return <svg {...props}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>;
    case "clock": return <svg {...props}><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>;
    case "check": return <svg {...props}><polyline points="20 6 9 17 4 12" /></svg>;
    case "shield": return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>;
    case "truck": return <svg {...props}><rect x="1" y="3" width="15" height="13" /><polygon points="16 8 20 8 23 11 23 16 16 16 16 8" /><circle cx="5.5" cy="18.5" r="2.5" /><circle cx="18.5" cy="18.5" r="2.5" /></svg>;
    case "cart": return <svg {...props}><circle cx="9" cy="21" r="1" /><circle cx="20" cy="21" r="1" /><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" /></svg>;
    case "star": return <svg {...props} fill="currentColor" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>;
    case "arrow-right": return <svg {...props}><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>;
    case "arrow-up-right": return <svg {...props}><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" /></svg>;
    case "plus": return <svg {...props}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>;
    case "play": return <svg {...props} fill="currentColor" stroke="none"><polygon points="8 5 19 12 8 19 8 5" /></svg>;
    case "settings": return <svg {...props}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></svg>;
    case "spark": return <svg {...props}><path d="M12 2 L13.5 10 L21 12 L13.5 14 L12 22 L10.5 14 L3 12 L10.5 10 Z" /></svg>;
    case "tools": return <svg {...props}><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg>;
    default: return null;
  }
}

function ChooseHeader({ lang, setLang }) {
  return (
    <header className="choose-header">
      <div className="container choose-header-inner">
        <a className="choose-logo" href="index.html" aria-label="NBR Auto Parts">
          <NBRMark size={38} inverse />
        </a>
        <div className="lang-toggle choose-lang" role="tablist" aria-label="Language">
          <button className={"lang-btn " + (lang === "ru" ? "active" : "")} onClick={() => setLang("ru")}>RU</button>
          <button className={"lang-btn " + (lang === "kz" ? "active" : "")} onClick={() => setLang("kz")}>KZ</button>
        </div>
      </div>
    </header>
  );
}

function ChooseCard({ type, href, external = false, data }) {
  const isWholesale = type === "wholesale";

  return (
    <a
      href={withCurrentQueryParams(href)}
      className={"choose-card choose-card-" + type}
      target={external ? "_blank" : undefined}
      rel={external ? "noopener" : undefined}
      onClick={() => trackCustomerChoice(type)}
    >
      <span className="choose-card-tag">
        <span className="choose-card-tag-dot"></span>
        {data.tag}
      </span>
      <span className="choose-card-icon">
        <Icon name={isWholesale ? "truck" : "cart"} size={32} />
      </span>
      <h2 className="choose-card-title">{data.title}</h2>
      <p className="choose-card-desc">{data.desc}</p>
      <ul className="choose-card-list">
        {data.items.map((item) => (
          <li key={item}>
            <Icon name="check" size={16} />
            <span>{item}</span>
          </li>
        ))}
      </ul>
      <span className="choose-card-cta">
        <span className="choose-card-cta-text">{data.cta}</span>
        <span className="choose-card-arrow">
          <Icon name={isWholesale ? "arrow-right" : "arrow-up-right"} size={16} />
        </span>
      </span>
    </a>
  );
}

function ChoosePage({ t, lang, setLang }) {
  return (
    <div className="choose-page">
      <ChooseHeader lang={lang} setLang={setLang} />
      <main className="choose-main">
        <div className="container">
          <section className="choose" aria-labelledby="choose-title">
            <div className="choose-eyebrow">
              <span className="choose-eyebrow-dot"></span>
              {t.choose.eyebrow}
            </div>
            <h1 id="choose-title" className="choose-title">
              <span>{t.choose.titleA}</span>{" "}
              <span className="accent">{t.choose.titleB}</span>
            </h1>
            <p className="choose-sub">{t.choose.sub}</p>

            <div className="choose-cards">
              <ChooseCard type="wholesale" href={WHOLESALE_LINK} data={t.choose.wholesale} />
              <ChooseCard type="retail" href={RETAIL_LINK} external data={t.choose.retail} />
            </div>

            <div className="choose-trust" aria-label={t.choose.trustLabel}>
              <div className="choose-trust-item"><Icon name="shield" size={16} /> {t.choose.trustWarranty}</div>
              <div className="choose-trust-item"><Icon name="truck" size={16} /> {t.choose.trustDelivery}</div>
            </div>
          </section>
        </div>
      </main>
      <footer className="choose-footer">
        <div className="container choose-footer-inner">
          <span>NBR Auto Parts</span>
          <a href="privacy.html">{t.footer.privacy}</a>
        </div>
      </footer>
    </div>
  );
}

function Topbar({ t, lang, setLang }) {
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="topbar-left">
          <div className="topbar-item"><Icon name="pin" size={14} /> {t.topbar.address}</div>
          <div className="topbar-item"><Icon name="clock" size={14} /> {t.topbar.hours}</div>
        </div>
        <div className="topbar-right">
          <a href="tel:+77005375376" className="topbar-item" style={{ color: "#fff" }}>
            <Icon name="phone" size={14} /> +7 (700) 537 5376
          </a>
          <div className="lang-toggle" role="tablist">
            <button className={"lang-btn " + (lang === "ru" ? "active" : "")} onClick={() => setLang("ru")}>RU</button>
            <button className={"lang-btn " + (lang === "kz" ? "active" : "")} onClick={() => setLang("kz")}>KZ</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Header({ t, scrollTo, isPrivacyPage = false }) {
  const [open, setOpen] = useState(false);
  const goTo = (id) => {
    if (isPrivacyPage) {
      window.location.href = WHOLESALE_LINK + "#" + id;
      return;
    }
    scrollTo(id);
    setOpen(false);
  };
  const navItems = [
    ["news", t.nav.news],
    ["brands", t.nav.brands],
    ["coverage", t.nav.coverage],
    ["reviews", t.nav.reviews],
    ["form", t.nav.contacts],
  ];

  return (
    <header className="header">
      <div className="container header-inner">
        <a
          href={isPrivacyPage ? "index.html" : "#"}
          className="header-logo"
          onClick={(e) => {
            if (isPrivacyPage) return;
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: "smooth" });
          }}
        >
          <NBRMark size={36} />
        </a>
        <nav className="nav">
          {navItems.map(([id, label]) => (
            id === "news" ? (
              <a key={id} href={WA_CHANNEL_LINK} target="_blank" rel="noopener" onClick={() => trackEvent("whatsapp_channel_click", { placement: "nav" })}>{label}</a>
            ) : (
              <a key={id} href={isPrivacyPage ? WHOLESALE_LINK + "#" + id : "#" + id} onClick={(e) => { e.preventDefault(); goTo(id); }}>{label}</a>
            )
          ))}
        </nav>
        <div className="header-actions">
          <a className="btn btn-ghost" href={CATALOG_LINK} onClick={(e) => { if (CATALOG_LINK === "#") e.preventDefault(); trackEvent("catalog_click"); }}>{t.topbar.login}</a>
          <a className="btn btn-primary" href={isPrivacyPage ? WHOLESALE_LINK + "#form" : "#form"} onClick={(e) => { e.preventDefault(); goTo("form"); }}>
            {t.hero.ctaTertiary}
          </a>
        </div>
        <button
          className={"menu-toggle " + (open ? "active" : "")}
          aria-label="Open navigation"
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <div className={"mobile-menu " + (open ? "open" : "")}>
        <div className="container mobile-menu-inner">
          {navItems.map(([id, label]) => (
            id === "news" ? (
              <a key={id} href={WA_CHANNEL_LINK} target="_blank" rel="noopener" onClick={() => { setOpen(false); trackEvent("whatsapp_channel_click", { placement: "mobile_nav" }); }}>{label}</a>
            ) : (
              <a key={id} href={isPrivacyPage ? WHOLESALE_LINK + "#" + id : "#" + id} onClick={(e) => { e.preventDefault(); goTo(id); }}>{label}</a>
            )
          ))}
          <div className="mobile-menu-actions">
            <a className="btn btn-outline" href={CATALOG_LINK} onClick={(e) => { if (CATALOG_LINK === "#") e.preventDefault(); trackEvent("catalog_click"); }}>{t.topbar.login}</a>
            <a className="btn btn-primary" href={isPrivacyPage ? WHOLESALE_LINK + "#form" : "#form"} onClick={(e) => { e.preventDefault(); goTo("form"); }}>{t.hero.ctaTertiary}</a>
          </div>
        </div>
      </div>
    </header>
  );
}

const PRIVACY_POLICY_SECTIONS = [
  {
    title: "1. Основные определения",
    body: [
      "Персональные данные - информация, которая прямо или косвенно относится к физическому лицу.",
      "Пользователь - лицо, использующее наши услуги.",
      "Оператор данных - NBR AUTO PARTS, определяющий цели и способы обработки персональных данных.",
      "Обработка - любые действия с данными: сбор, хранение, использование, передача и удаление.",
      "Cookie-файлы - небольшие текстовые файлы, размещаемые в браузере Пользователя для улучшения функциональности сайта.",
    ],
  },
  {
    title: "2. Принципы обработки данных",
    lead: "Мы руководствуемся следующими принципами:",
    body: [
      "Законность, прозрачность и добросовестность обработки;",
      "Минимизация объема собираемых данных;",
      "Точность и актуальность информации;",
      "Ограничение сроков хранения;",
      "Защита данных от несанкционированного доступа;",
      "Соблюдение прав субъектов данных.",
    ],
  },
  {
    title: "3. Какие данные мы собираем",
    lead: "Мы можем собирать следующие данные:",
    body: [
      "ФИО, дата рождения, пол, гражданство;",
      "Контактные данные (телефон, e-mail, адрес);",
      "Данные документов (например, номер и срок действия паспорта);",
      "Данные о действиях на сайте, IP-адрес, тип устройства и браузера;",
      "Любые иные данные, добровольно предоставленные пользователем.",
    ],
  },
  {
    title: "4. Цели использования данных",
    lead: "Собранные данные используются для:",
    body: [
      "Предоставления и улучшения услуг;",
      "Регистрации личного кабинета;",
      "Обратной связи и технической поддержки;",
      "Выполнения договорных обязательств;",
      "Обеспечения безопасности и аналитики;",
      "Рассылки уведомлений (см. п. 5).",
    ],
  },
  {
    title: "5. Рассылка уведомлений",
    body: [
      "Компания имеет право отправлять Пользователю уведомления о новых продуктах, услугах, акциях и других событиях.",
      "Пользователь может отказаться от рассылки, отправив письмо на адрес: nbr.kazakhstan@gmail.com с темой «Отказ от уведомлений».",
    ],
  },
  {
    title: "6. Cookie-файлы",
    body: [
      "Мы используем cookie для аналитики, улучшения работы сайта и запоминания предпочтений пользователя. Вы можете отключить cookie в настройках браузера, но это может ограничить работу отдельных функций сайта.",
    ],
  },
  {
    title: "7. Безопасность данных",
    body: [
      "Мы применяем технические и организационные меры защиты данных. Однако ни одна система не может гарантировать 100% безопасность. Мы делаем всё возможное, чтобы минимизировать риски.",
    ],
  },
  {
    title: "8. Права пользователя",
    lead: "Пользователь имеет право:",
    body: [
      "Получить доступ к своим данным;",
      "Потребовать их изменения или удаления;",
      "Ограничить обработку;",
      "Отозвать согласие;",
      "Подать жалобу.",
    ],
  },
  {
    title: "9. Ссылки на сторонние сайты",
    body: [
      "Наш сайт может содержать ссылки на другие сайты. Мы не несем ответственности за политику конфиденциальности этих ресурсов и рекомендуем ознакомиться с их условиями.",
    ],
  },
  {
    title: "10. Дети",
    body: [
      "Сервис не предназначен для лиц младше 13 лет. Мы не собираем данные о детях намеренно. Если вы считаете, что ребёнок предоставил нам данные - сообщите нам, и мы удалим информацию.",
    ],
  },
  {
    title: "11. Изменения в политике",
    body: [
      "Мы можем вносить изменения в настоящую Политику. Об изменениях сообщается на сайте или по электронной почте. Рекомендуем регулярно проверять актуальность документа.",
    ],
  },
];

function PrivacyPage({ t }) {
  return (
    <main className="privacy-page">
      <section className="privacy-hero">
        <div className="container">
          <a className="privacy-back" href="index.html">← На главную</a>
          <span className="eyebrow">NBR Auto Parts</span>
          <h1>Политика конфиденциальности</h1>
          <p>
            NBR AUTO PARTS, общество с ограниченной ответственностью, основное место деятельности которого находится по адресу:
            Республика Казахстан, г. Алматы, ТЦ Бақорда, проспект Рыскулова 103/21Б, бутик 283 (далее «NBR», «мы», «нас»),
            вебсайт: www.nbrautoparts.com (далее - «Сервис», «Интернет-сайт»). Настоящее Положение распространяется на все
            структурные подразделения NBR AUTO PARTS, а также на уполномоченные компании-партнёры.
          </p>
          <p>
            NBR AUTO PARTS придаёт особое значение защите персональных данных. Мы стремимся обрабатывать и хранить личную
            информацию безопасно, в соответствии с законами Республики Казахстан и международными нормами, включая GDPR, если
            применимо. Настоящее Положение описывает, какие данные мы собираем, как их используем, храним и обрабатываем, а
            также какие права имеют Пользователи в отношении своих данных.
          </p>
        </div>
      </section>
      <section className="privacy-content">
        <div className="container privacy-layout">
          <aside className="privacy-aside">
            <NBRMark size={54} />
            <p>{t.footer.tagline}</p>
            <a href="mailto:nbr.kazakhstan@gmail.com">nbr.kazakhstan@gmail.com</a>
            <a href="tel:+77005375376">87005375376</a>
          </aside>
          <div className="privacy-document">
            {PRIVACY_POLICY_SECTIONS.map((section) => (
              <section className="privacy-section" key={section.title}>
                <h2>{section.title}</h2>
                {section.lead && <p>{section.lead}</p>}
                <ul>
                  {section.body.map((item) => <li key={item}>{item}</li>)}
                </ul>
              </section>
            ))}
            <section className="privacy-section privacy-contacts">
              <h2>12. Контакты</h2>
              <p>Если у вас есть вопросы или жалобы по поводу обработки персональных данных, свяжитесь с нами:</p>
              <div className="privacy-contact-list">
                <a href="mailto:nbr.kazakhstan@gmail.com">Email: nbr.kazakhstan@gmail.com</a>
                <a href="tel:+77005375376">Телефон: 87005375376</a>
              </div>
            </section>
          </div>
        </div>
      </section>
    </main>
  );
}

function Hero({ t }) {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <h1>
            {t.hero.titleA}{" "}
            <span className="underlined">{t.hero.titleB}</span>{" "}
            {t.hero.titleC}
          </h1>
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-cta-row">
            <a className="btn btn-primary btn-lg" href={CATALOG_LINK} onClick={(e) => { if (CATALOG_LINK === "#") e.preventDefault(); trackEvent("catalog_click"); }}>
              {t.hero.ctaPrimary} <Icon name="arrow-right" size={16} />
            </a>
            <a className="btn btn-wa btn-lg" href={WA_LINK} target="_blank" rel="noopener" onClick={() => trackEvent("whatsapp_click", { placement: "hero" })}>
              <Icon name="wa" size={16} /> {t.hero.ctaSecondary}
            </a>
            <a className="btn btn-outline btn-lg" href="#form" onClick={(e) => { e.preventDefault(); document.getElementById("form")?.scrollIntoView({ behavior: "smooth" }); }}>
              {t.hero.ctaTertiary}
            </a>
          </div>
          <div className="hero-trust">
            <div className="hero-trust-item"><Icon name="shield" size={16} /> {t.hero.trustA}</div>
            <div className="hero-trust-item"><Icon name="truck" size={16} /> {t.hero.trustB}</div>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-visual-grid"></div>
          <div className="hero-brands-panel">
            <div className="hero-brands-header">
              <span className="hero-brands-label">{t.brands.kicker}</span>
              <span className="hero-brands-count">8</span>
            </div>
            <div className="hero-brands-list">
              {[
                { key: "sensen", label: "SENSEN", badge: t.brands.exclusive, kind: "exclusive" },
                { key: "ccl",    label: "CCL",    badge: t.brands.official,  kind: "official" },
                { key: "masuma", label: "MASUMA", badge: t.brands.partner,   kind: "partner" },
                { key: "denso",  label: "DENSO",  badge: t.brands.partner,   kind: "partner" },
                { key: "ngk",    label: "NGK",    badge: t.brands.partner,   kind: "partner" },
                { key: "koyo",   label: "KOYO",   badge: t.brands.partner,   kind: "partner" },
                { key: "nsk",    label: "NSK",    badge: t.brands.partner,   kind: "partner" },
                { key: "mcb",    label: "MCB",    badge: t.brands.partner,   kind: "partner" },
              ].map(({ key, label, badge, kind }) => (
                <a key={key} className={"hero-brand-item " + kind} href={window.BRAND_LINKS[key]} onClick={() => trackEvent("catalog_click", { placement: "hero_brands", brand: label })}>
                  <strong>{label}</strong>
                  <span className="hero-brand-badge">{badge}</span>
                </a>
              ))}
            </div>
            <div className="hero-brands-nbr">
              <NBRMark size={28} inverse />
              <span>{t.brands.ownBadge}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatsAppNews({ t }) {
  return (
    <section className="wa-news" id="news">
      <div className="container">
        <a
          className="wa-news-card"
          href={WA_CHANNEL_LINK}
          target="_blank"
          rel="noopener"
          onClick={() => trackEvent("whatsapp_channel_click", { placement: "news_section" })}
        >
          <div className="wa-news-mark">
            <NBRMark size={46} inverse />
          </div>
          <div className="wa-news-copy">
            <span className="wa-news-kicker">{t.news.kicker}</span>
            <h2>{t.news.title}</h2>
            <p>{t.news.sub}</p>
          </div>
          <div className="wa-news-list">
            {t.news.items.map((item) => (
              <span key={item}>{item}</span>
            ))}
          </div>
          <span className="btn btn-wa wa-news-btn">
            <Icon name="wa" size={16} /> {t.news.cta}
          </span>
        </a>
      </div>
    </section>
  );
}

function Marquee({ t }) {
  const items = t.marquee;
  const renderRow = (key) => (
    <div className="marquee-item" key={key}>
      {items.map((it, i) => <span key={i}>{it}</span>)}
    </div>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {renderRow("a")}
        {renderRow("b")}
      </div>
    </div>
  );
}

function Stats({ t }) {
  return (
    <section className="stats">
      <div className="container stats-grid">
        <div className="stat-item">
          <div className="stat-num">9<span className="plus">+</span></div>
          <div className="stat-label">{t.stats.brands}</div>
        </div>
        <div className="stat-item">
          <div className="stat-num">1000<span className="plus">+</span></div>
          <div className="stat-label">{t.stats.dealers}</div>
        </div>
        <div className="stat-item">
          <div className="stat-num">16<span className="plus">+</span></div>
          <div className="stat-label">{t.stats.cities}</div>
        </div>
        <div className="stat-item">
          <div className="stat-num">12</div>
          <div className="stat-label">{t.stats.warranty}</div>
        </div>
      </div>
    </section>
  );
}

function Why({ t }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <span className="eyebrow">{t.why.kicker}</span>
            <h2>{t.why.title}</h2>
          </div>
        </div>
        <div className="why-grid">
          <div className="why-item">
            <div className="why-icon"><Icon name="check" size={22} /></div>
            <span className="why-num">01 / QUALITY</span>
            <h3>{t.why.p1Title}</h3>
            <p>{t.why.p1Body}</p>
          </div>
          <div className="why-item">
            <div className="why-icon"><Icon name="shield" size={22} /></div>
            <span className="why-num">02 / WARRANTY</span>
            <h3>{t.why.p2Title}</h3>
            <p>{t.why.p2Body}</p>
          </div>
          <div className="why-item">
            <div className="why-icon"><Icon name="tools" size={22} /></div>
            <span className="why-num">03 / TRUST</span>
            <h3>{t.why.p3Title}</h3>
            <p>{t.why.p3Body}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Coverage({ t, accent }) {
  const [selectedCity, setSelectedCity] = React.useState(null);
  const mapRef = React.useRef(null);
  const cities = (window.KZ_CITIES || []).map((c) => ({
    id: c.id,
    n: c.name,
    d: c.days ? `${c.days} дн.` : "до 30 кг",
    hub: c.hub || false,
  }));

  const selectCity = (id) => {
    setSelectedCity(id);
    if (id && window.matchMedia?.("(max-width: 760px)").matches) {
      window.requestAnimationFrame(() => {
        mapRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
      });
    }
  };

  React.useEffect(() => {
    if (!selectedCity) return;

    const clearMapSelection = (event) => {
      if (event.target.closest?.(".kz-map-wrap, .coverage-city")) return;
      setSelectedCity(null);
    };

    document.addEventListener("pointerdown", clearMapSelection);
    return () => document.removeEventListener("pointerdown", clearMapSelection);
  }, [selectedCity]);

  return (
    <section className="section section-coverage" id="coverage">
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <span className="eyebrow on-dark">{t.coverage.kicker}</span>
            <h2>{t.coverage.title}</h2>
          </div>
        </div>
        <div ref={mapRef}>
          <KZMap t={t} accent={accent} selectedCity={selectedCity} onSelectCity={selectCity} />
        </div>
        <div className="coverage-cities">
          {cities.map((c) => (
            <button
              key={c.id}
              type="button"
              className={"coverage-city " + (c.hub ? "hub " : "") + (selectedCity === c.id ? "active" : "")}
              aria-pressed={selectedCity === c.id}
              onClick={() => selectCity(c.id)}
            >
              <span>{c.n}</span>
              <span className="coverage-city-days">{c.d}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function Reviews({ t }) {
  const items = [
    { text: t.reviews.r2, name: t.reviews.r2n, meta: t.reviews.r2m, ini: "Д" },
  ];
  return (
    <section className="section" id="reviews">
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <span className="eyebrow">{t.reviews.kicker}</span>
            <h2>{t.reviews.title}</h2>
          </div>
        </div>
        <div className={"reviews-grid " + (items.length === 1 ? "single" : "")}>
          {items.map((r, i) => (
            <div className="review-card" key={i}>
              <div className="review-stars">
                {[0, 1, 2, 3, 4].map(s => <Icon key={s} name="star" size={14} />)}
              </div>
              <p className="review-text">«{r.text}»</p>
              <div className="review-author">
                <div className="review-avatar">{r.ini}</div>
                <div>
                  <div className="review-name">{r.name}</div>
                  <div className="review-meta">{r.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const brands = [
  {
    name: "Toyota",
    description: "ТО и расходники",
    logo: "public/brand-logos/toyota.png",
    href: "https://nbrautoparts.com/online-price/?carfilter=1&crb_id=579",
    accent: "#BD0603",
    logoScale: 0.48,
  },
  {
    name: "Lexus",
    description: "Премиум-сегмент",
    logo: "public/brand-logos/lexus.png",
    href: "https://nbrautoparts.com/online-price/?carfilter=1&crb_id=874",
    accent: "#374151",
  },
  {
    name: "Nissan",
    description: "Ходовая и фильтры",
    logo: "public/brand-logos/nissan.png",
    href: "https://nbrautoparts.com/online-price/?carfilter=1&crb_id=558",
    accent: "#BD0603",
  },
  {
    name: "Honda",
    description: "Электрика и тормоза",
    logo: "public/brand-logos/honda.png",
    href: "https://nbrautoparts.com/online-price/?carfilter=1&crb_id=533",
    accent: "#2563EB",
  },
  {
    name: "Kia",
    description: "Подвеска и сервис",
    logo: "public/brand-logos/kia.png",
    href: "https://nbrautoparts.com/online-price/?carfilter=1&crb_id=648",
    accent: "#001427",
  },
  {
    name: "Hyundai",
    description: "Двигатель и кузов",
    logo: "public/brand-logos/hyundai.png",
    href: "https://nbrautoparts.com/online-price/?carfilter=1&crb_id=647",
    accent: "#0B4EA2",
  },
];

function SupportedCars({ t }) {
  const marqueeBrands = [...brands, ...brands];

  const renderCard = (brand, i) => {
    const isDuplicate = i >= brands.length;

    return (
      <a
        className="brand-card car-brand-card"
        href={brand.href}
        style={{
          "--brand-accent": brand.accent,
          "--brand-logo-scale": brand.logoScale || 0.68,
        }}
        key={`${brand.name}-${i}`}
        aria-hidden={isDuplicate ? "true" : undefined}
        tabIndex={isDuplicate ? -1 : undefined}
        onClick={() => trackEvent("catalog_click", { placement: "car_brands", brand: brand.name })}
      >
        <div className="brand-logo-tile">
          <img
            src={brand.logo}
            alt={`${brand.name} logo`}
            className="brand-logo"
          />
        </div>
        <div className="brand-copy">
          <h3>{brand.name}</h3>
        </div>
      </a>
    );
  };

  return (
    <section className="section section-car-brands" id="car-brands" aria-labelledby="car-brands-title">
      <div className="container">
        <div className="section-head car-brands-head">
          <div className="section-head-text">
            <span className="eyebrow">{t.carBrands.kicker}</span>
            <h2 id="car-brands-title">{t.carBrands.title}</h2>
            <p>{t.carBrands.sub}</p>
          </div>
          <div className="car-brands-count" aria-hidden="true">
            <strong>6</strong>
            <span>{t.carBrands.badgeSuffix}</span>
          </div>
        </div>
        <div className="car-brands-stage" aria-label={t.carBrands.title}>
          <div className="car-brands-glow"></div>
          <div className="car-brands-scan"></div>
          <div className="car-brand-rail">
            {marqueeBrands.map((brand, i) => renderCard(brand, i))}
          </div>
        </div>
        <div className="car-brands-contact">
          <div className="car-brands-contact-copy">
            <strong>{t.carBrands.contactTitle}</strong>
            <span>{t.carBrands.contactBody}</span>
          </div>
          <a className="btn btn-wa car-brands-contact-btn" href={WA_LINK} target="_blank" rel="noopener" onClick={() => trackEvent("whatsapp_click", { placement: "car_brands" })}>
            <Icon name="wa" size={16} /> {t.carBrands.contactCta}
          </a>
        </div>
      </div>
    </section>
  );
}

function RegistrationGuide({ t, lang }) {
  const videos = [
    { label: t.registration.videoOne, meta: t.registration.videoOneMeta, videoId: REGISTRATION_VIDEO_IDS[lang] || null },
  ];

  return (
    <section className="section section-registration" id="form">
      <div className="container">
        <div className="registration-grid">
          <div className="section-head-text">
            <span className="eyebrow on-dark">{t.registration.kicker}</span>
            <h2>{t.registration.title}</h2>
            <p>{t.registration.sub}</p>
            <div className="registration-steps">
              {t.registration.steps.map((step, i) => (
                <div className="registration-step" key={step}>
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  {step}
                </div>
              ))}
            </div>
          </div>
          <div className="registration-videos">
            {videos.map((video, i) => (
              <div className={"video-placeholder " + (i === 0 ? "primary" : "")} key={video.label}>
                <div className="video-frame">
                  {video.videoId ? (
                    <iframe
                      className="video-embed"
                      src={"https://www.youtube-nocookie.com/embed/" + video.videoId}
                      title={video.label}
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                      allowFullScreen
                    ></iframe>
                  ) : (
                    <>
                      <span className="video-play"><Icon name="play" size={28} /></span>
                      <span className="video-tag">{t.registration.placeholder}</span>
                    </>
                  )}
                </div>
                <div className="video-copy">
                  <h3>{video.label}</h3>
                  <p>{video.meta}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = useState(0);
  const items = [
    { q: t.faq.q1, a: t.faq.a1 },
    { q: t.faq.q2, a: t.faq.a2 },
    { q: t.faq.q3, a: t.faq.a3 },
    { q: t.faq.q4, a: t.faq.a4 },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <span className="eyebrow">{t.faq.kicker}</span>
            <h2>{t.faq.title}</h2>
          </div>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={"faq-item " + (open === i ? "open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="faq-toggle"><Icon name="plus" size={14} /></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer" id="contacts">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <NBRMark size={52} inverse />
            <p className="footer-tagline" style={{ marginTop: 16 }}>{t.footer.tagline}</p>
            <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
              <a href="tel:+77005375376" style={{ color: "#fff", fontWeight: 600 }}>+7 (700) 537 5376</a>
              <a href="mailto:nbr.kazakhstan@gmail.com">nbr.kazakhstan@gmail.com</a>
              <span style={{ color: "rgba(255,255,255,0.5)" }}>{t.topbar.address}</span>
            </div>
          </div>
          <div className="footer-col">
            <h5>Бренды</h5>
            <ul>
              <li><a href={window.BRAND_LINKS.sensen}>SENSEN</a></li>
              <li><a href={window.BRAND_LINKS.ccl}>CCL</a></li>
              <li><a href={window.BRAND_LINKS.masuma}>MASUMA</a></li>
              <li><a href={window.BRAND_LINKS.denso}>DENSO</a></li>
              <li><a href={window.BRAND_LINKS.ngk}>NGK</a></li>
              <li><a href={window.BRAND_LINKS.koyo}>KOYO</a></li>
              <li><a href={window.BRAND_LINKS.nsk}>NSK</a></li>
              <li><a href={window.BRAND_LINKS.mcb}>MCB</a></li>
              <li><a href={window.BRAND_LINKS.nbr}>NBR</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.rights}</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="privacy.html">{t.footer.privacy}</a>
            <a href="#">{t.footer.offer}</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [lang, setLangState] = useState(() => localStorage.getItem("nbr-lang") || "ru");
  const t = I18N[lang];
  const accent = BRAND.red;
  const path = window.location.pathname;
  const isPrivacyPage = path.endsWith("privacy.html");
  const isWholesalePage = path.endsWith("wholesale.html");
  const isChoosePage = !isPrivacyPage && !isWholesalePage;

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", BRAND.red);
    document.documentElement.style.setProperty("--accent-dark", BRAND.redDark);
    document.documentElement.style.setProperty("--accent-soft", BRAND.redSoft);
  }, []);

  useEffect(() => {
    document.body.classList.toggle("choose-page-body", isChoosePage);
    return () => document.body.classList.remove("choose-page-body");
  }, [isChoosePage]);

  useEffect(() => {
    localStorage.setItem("nbr-lang", lang);
    document.documentElement.lang = lang === "kz" ? "kk" : "ru";
    document.title = isPrivacyPage
      ? "Политика конфиденциальности — NBR Auto Parts"
      : isChoosePage
      ? "NBR — Выберите тип клиента"
      : lang === "kz"
      ? "NBR Auto Parts — Қазақстан бойынша автобөлшектердің көтерме жеткізілімі"
      : "NBR Auto Parts — Оптовая поставка автозапчастей по Казахстану";
    const meta = document.querySelector('meta[name="description"]');
    if (meta) {
      meta.setAttribute("content", isPrivacyPage
        ? "Политика конфиденциальности NBR Auto Parts: обработка, хранение и защита персональных данных."
        : isChoosePage
        ? "Выберите формат покупки: оптовый клиент или розничный клиент NBR."
        : lang === "kz"
        ? "SENSEN эксклюзивті дистрибьюторы және CCL, MASUMA, DENSO, NGK, KOYO, NSK ресми дилері. Қазақстан бойынша көтерме автобөлшектер."
        : "Эксклюзивный дистрибьютор SENSEN и официальный дилер CCL, MASUMA, DENSO, NGK, KOYO, NSK. Оптовые автозапчасти по Казахстану.");
    }
  }, [lang, isPrivacyPage, isChoosePage]);

  const setLang = (l) => setLangState(l);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollTo ? null : el.getBoundingClientRect();
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      {isChoosePage ? (
        <ChoosePage t={t} lang={lang} setLang={setLang} />
      ) : (
        <>
          <Topbar t={t} lang={lang} setLang={setLang} />
          <Header t={t} scrollTo={scrollTo} isPrivacyPage={isPrivacyPage} />
          {isPrivacyPage ? (
            <PrivacyPage t={t} />
          ) : (
            <>
              <Hero t={t} />
              <WhatsAppNews t={t} />
              <Marquee t={t} />
              <Stats t={t} />
              <Why t={t} />
              <section className="section section-brands" id="brands">
                <div className="container">
                  <div className="section-head">
                    <div className="section-head-text">
                      <span className="eyebrow">{t.brands.kicker}</span>
                      <h2>{t.brands.title}</h2>
                      <p>{t.brands.sub}</p>
                    </div>
                  </div>
                  <BrandsGrid t={t} />
                </div>
              </section>
              <Coverage t={t} accent={accent} />
              <Reviews t={t} />
              <SupportedCars t={t} />
              <RegistrationGuide t={t} lang={lang} />
              <FAQ t={t} />
            </>
          )}
          <Footer t={t} />

          <a className="fab-wa" href={WA_LINK} target="_blank" rel="noopener" aria-label="WhatsApp" onClick={() => trackEvent("whatsapp_click", { placement: "floating" })}>
            <Icon name="wa" size={26} />
          </a>
        </>
      )}
    </>
  );
}

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