const { useState, useEffect, useRef, useMemo } = React;

function BrandLogo({ variant = 'dark', height = 44 }) {
  const [failed, setFailed] = useState(false);
  if (failed) return null;
  const src = variant === 'light' ? '/brand/logo-light.png' : '/brand/logo-dark.png';
  return (
    <img
      src={src}
      alt="ТехПромСталь"
      style={{ display: 'block', height, width: 'auto', objectFit: 'contain' }}
      onError={() => setFailed(true)}
    />
  );
}

function StripedPlate({ label, ratio = '4 / 3', tone = 'dark' }) {
  const bg = tone === 'dark' ? '#1a1a1a' : '#ebe6dc';
  const stripe = tone === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)';
  const fg = tone === 'dark' ? '#888' : '#5a5247';
  return (
    <div style={{
      aspectRatio: ratio,
      background: `repeating-linear-gradient(135deg, ${bg} 0 18px, ${stripe} 18px 19px, ${bg} 19px 36px)`,
      border: tone === 'dark' ? '1px solid #2a2a2a' : '1px solid #d6cfc1',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: '0.08em',
      color: fg, textTransform: 'uppercase',
    }}>
      [ {label} ]
    </div>
  );
}

function TopBar({ accent }) {
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="tb-left">
          <span className="tb-pulse" style={{ background: accent }} />
          <span>Склад работает · Пн–Пт 09:00–18:00</span>
        </div>
        <div className="tb-right">
          <a href={window.TPS_WA_LINK('Здравствуйте! У меня вопрос по ассортименту.')} target="_blank" rel="noopener">
            <WaIcon size={13} /> {window.TPS_WA_DISPLAY}
          </a>
          <span className="tb-sep">·</span>
          <a href={`mailto:${window.TPS_EMAIL}`}>{window.TPS_EMAIL}</a>
        </div>
      </div>
    </div>
  );
}

function Nav({ accent }) {
  const cart = useCart();
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const links = [
    ['О компании', '#about'],
    ['Каталог', '/catalog'],
    ['Отгрузки', '#shipments'],
    ['Калькулятор', '#calculator'],
    ['Услуги', '#services'],
    ['Контакты', '#contact'],
  ];
  const renderLink = (label, href, onClick) =>
    href.startsWith('/')
      ? <TPSLink to={href} onClick={onClick}>{label}</TPSLink>
      : <a href={href} onClick={onClick}>{label}</a>;
  return (
    <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="brand">
          <BrandLogo variant="light" height={36} />
        </a>
        <ul className="nav-links">
          {links.map(([label, href]) => (
            <li key={href}>{renderLink(label, href)}</li>
          ))}
        </ul>
        <div className="nav-actions">
          <button className="nav-cart" onClick={() => cart.setOpen(true)} aria-label="Корзина">
            <CartIcon />
            {cart.count > 0 && (
              <span className="nav-cart-badge" style={{ background: accent }}>
                {cart.countDisplay}
              </span>
            )}
          </button>
          <a
            href={window.TPS_WA_LINK('Здравствуйте! Хочу запросить прайс.')}
            target="_blank" rel="noopener"
            className="nav-cta"
            style={{ background: accent }}
            aria-label="WhatsApp"
          >
            <WaIcon size={14} />
            <span className="nav-cta-label">WhatsApp</span>
          </a>
          <button
            className="nav-burger"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? 'Закрыть меню' : 'Меню'}
            aria-expanded={menuOpen}
          >
            <span className={`burger ${menuOpen ? 'open' : ''}`}>
              <span /><span /><span />
            </span>
          </button>
        </div>
      </div>

      {menuOpen && (
        <div className="nav-mobile">
          <ul className="nav-mobile-list">
            {links.map(([label, href]) => (
              <li key={href}>
                {renderLink(label, href, () => setMenuOpen(false))}
              </li>
            ))}
          </ul>
          <a
            href={window.TPS_WA_LINK('Здравствуйте! Хочу запросить прайс.')}
            target="_blank" rel="noopener"
            className="btn btn-wa-hero nav-mobile-cta"
            onClick={() => setMenuOpen(false)}
          >
            <WaIcon /> Написать в WhatsApp
          </a>
          <a
            href={`tel:+${window.TPS_WA}`}
            className="nav-mobile-phone"
            onClick={() => setMenuOpen(false)}
          >
            {window.TPS_WA_DISPLAY}
          </a>
        </div>
      )}
    </nav>
  );
}

function CartIcon({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 4h2l2.4 11.5a2 2 0 0 0 2 1.5h8.6a2 2 0 0 0 2-1.5L22 7H6"/>
      <circle cx="9" cy="20" r="1.5"/>
      <circle cx="18" cy="20" r="1.5"/>
    </svg>
  );
}

function InstaIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <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="0.6" fill="currentColor" stroke="none"/>
    </svg>
  );
}

function Hero({ accent }) {
  const heroPhotos = window.TPS_SHIPMENT_PHOTOS();
  const bgPhoto = heroPhotos[29] || heroPhotos[0];

  return (
    <section id="top" className="hero">
      {bgPhoto && (
        <div className="hero-bg">
          <img src={bgPhoto} alt="" loading="eager" />
          <div className="hero-bg-shade" />
        </div>
      )}

      <div className="container hero-content">
        <div className="hero-eyebrow">
          <span className="hero-dot" style={{ background: accent }} />
          <span>Металлопрокат · Алматы · с 2017 года</span>
        </div>

        <h1 className="hero-title">
          <span>Металлопрокат в Алматы</span>{' '}
          <span className="hero-title-accent" style={{ color: accent }}>резка, цинкование, доставка по Казахстану.</span>
        </h1>

        <p className="hero-sub">
          Прямые контракты с ММК, Северсталью, Qarmet.
          Склад в наличии — отгрузка день в день.
        </p>

        <div className="hero-actions">
          <TPSLink to="/catalog" className="btn btn-primary" style={{ background: accent }}>
            Каталог и цены →
          </TPSLink>
          <a
            href={window.TPS_WA_LINK('Здравствуйте! Хочу получить прайс на металлопрокат.')}
            target="_blank" rel="noopener"
            className="btn btn-wa-hero"
          >
            <WaIcon /> Запрос в WhatsApp
          </a>
        </div>
      </div>

      <div className="hero-foot">
        <div className="container hero-foot-inner">
          <div className="hf-stat">
            <div className="hf-k">8</div>
            <div className="hf-v">лет на&nbsp;рынке<br/>с&nbsp;2017&nbsp;года</div>
          </div>
          <div className="hf-stat">
            <div className="hf-k">7</div>
            <div className="hf-v">групп проката</div>
          </div>
          <div className="hf-stat">
            <div className="hf-k">до&nbsp;12 м</div>
            <div className="hf-v">цинкование</div>
          </div>
          <div className="hf-stat">
            <div className="hf-k">ГОСТ</div>
            <div className="hf-v">на каждую партию</div>
          </div>
          <div className="hf-stat hf-stat-cta">
            <a href={`tel:+${window.TPS_WA}`} className="hf-phone">
              {window.TPS_WA_DISPLAY}
            </a>
            <div className="hf-v">главный — звонок без меню</div>
          </div>
        </div>
      </div>

      <div className="marquee">
        <div className="marquee-track">
          {[...window.TPS_CATEGORIES, ...window.TPS_CATEGORIES].map((c, i) => (
            <span key={i} className="marquee-item">
              <span className="marquee-dot" style={{ background: accent }} />
              {c.title}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="section">
      <div className="container about-grid">
        <div>
          <div className="section-eyebrow">
            <span className="eyebrow-num">01</span>
            <span>О компании</span>
          </div>
        </div>
        <div className="about-body">
          <p className="lead">
            ТехПромСталь — поставщик чёрного и цветного металлопроката для строительства,
            энергетики, нефтегазовой и машиностроительной отрасли.
          </p>
          <p>
            Работаем напрямую с крупнейшими комбинатами СНГ. Держим складские позиции
            по основной номенклатуре, отгружаем по всему Казахстану.
          </p>
          <p>
            Помимо поставки — режем, гнём, обрабатываем отверстия, наносим защитные
            покрытия (холодное и горячее цинкование), делаем тепловую и антикоррозийную
            изоляцию труб по ГОСТ.
          </p>

          <ul className="bullets">
            <li><b>Прямые контракты</b> с заводами-производителями</li>
            <li><b>Складская программа</b> — отгрузка день в день</li>
            <li><b>Резка под габарит</b> — экономия на доставке</li>
            <li><b>Документы</b> — сертификаты на каждую партию</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function ItemRow({ it, accent, onAdd }) {
  const fmt = (n) => new Intl.NumberFormat('ru-RU').format(n);
  const waMsg = `Здравствуйте! Интересует позиция: ${it.name} (${it.spec}, ${it.sizes}). Можете дать актуальную цену и наличие?`;
  const photo = window.TPS_ITEM_PHOTO(it.name);
  return (
    <tr>
      <td className="td-thumb">
        {photo
          ? <img src={photo} alt={it.name} loading="lazy" />
          : <span className="td-thumb-empty">—</span>}
      </td>
      <td className="td-name">{it.name}</td>
      <td className="td-spec">{it.spec}</td>
      <td className="td-mono">{it.sizes}</td>
      <td className="td-mono">{it.length}</td>
      <td className="td-price">
        {it.price ? <><span>{fmt(it.price)}</span> ₸/{it.unit}</> : 'по запросу'}
      </td>
      <td className="td-action">
        <button className="row-add" onClick={onAdd} style={{ borderColor: accent, color: accent }}>+ В корзину</button>
        <a href={window.TPS_WA_LINK(waMsg)} target="_blank" rel="noopener" className="row-wa">
          <WaIcon size={14} />
        </a>
      </td>
    </tr>
  );
}

function CategoryCard({ cat, idx, accent }) {
  return (
    <TPSLink to={`/catalog/${cat.id}`} className="cat cat-link">
      <div className="cat-head">
        <div className="cat-head-l">
          <span className="cat-num">{String(idx + 1).padStart(2, '0')}</span>
          <div>
            <div className="cat-title">{cat.title}</div>
            <div className="cat-short">{cat.short}</div>
          </div>
        </div>
        <div className="cat-head-r">
          <span className="cat-count">{cat.items.length} позиций</span>
          <span className="cat-chev" style={{ color: accent }}>→</span>
        </div>
      </div>
    </TPSLink>
  );
}

function Catalog({ accent }) {
  return (
    <section id="catalog" className="section section-dark">
      <div className="container">
        <div className="section-eyebrow eyebrow-dark">
          <span className="eyebrow-num">02</span>
          <span>Каталог продукции</span>
        </div>
        <h2 className="section-title">
          Семь групп номенклатуры.<br/>
          <span style={{ color: accent }}>Сотни позиций со склада и под заказ.</span>
        </h2>
        <p className="section-sub">
          Выберите группу — откроется страница с позициями, ценами, корзиной и WhatsApp-запросом.
        </p>
        <div className="cats">
          {window.TPS_CATEGORIES.map((cat, i) => (
            <CategoryCard key={cat.id} cat={cat} idx={i} accent={accent} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CatalogIndexPage({ accent }) {
  React.useEffect(() => { window.scrollTo(0, 0); }, []);
  return (
    <section className="section section-dark cat-page">
      <div className="container">
        <nav className="cat-crumbs" aria-label="Хлебные крошки">
          <TPSLink to="/">Главная</TPSLink>
          <span className="cat-crumbs-sep">·</span>
          <span className="cat-crumbs-cur">Каталог</span>
        </nav>

        <div className="section-eyebrow eyebrow-dark">
          <span className="eyebrow-num">02</span>
          <span>Каталог продукции</span>
        </div>
        <h2 className="section-title">
          Семь групп номенклатуры.<br/>
          <span style={{ color: accent }}>Сотни позиций со склада и под заказ.</span>
        </h2>
        <p className="section-sub">
          Выберите раздел — откроется страница с позициями, ценами, корзиной и WhatsApp-запросом.
        </p>
        <div className="cats">
          {window.TPS_CATEGORIES.map((cat, i) => (
            <CategoryCard key={cat.id} cat={cat} idx={i} accent={accent} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CategoryPage({ slug, accent }) {
  const cart = useCart();
  React.useEffect(() => { window.scrollTo(0, 0); }, [slug]);
  const cats = window.TPS_CATEGORIES;
  const cat = cats.find((c) => c.id === slug);
  const idx = cats.findIndex((c) => c.id === slug);

  if (!cat) {
    return (
      <section className="section section-dark">
        <div className="container">
          <div className="section-eyebrow eyebrow-dark"><span>404 · Раздел не найден</span></div>
          <h2 className="section-title">Такой категории нет</h2>
          <p className="section-sub" style={{ marginBottom: 32 }}>
            Возможно ссылка устарела. Вернитесь к списку разделов каталога.
          </p>
          <TPSLink to="/#catalog" className="btn btn-primary" style={{ background: accent }}>
            ← К каталогу
          </TPSLink>
        </div>
      </section>
    );
  }

  return (
    <section className="section section-dark cat-page">
      <div className="container">
        <nav className="cat-crumbs" aria-label="Хлебные крошки">
          <TPSLink to="/">Главная</TPSLink>
          <span className="cat-crumbs-sep">·</span>
          <TPSLink to="/catalog">Каталог</TPSLink>
          <span className="cat-crumbs-sep">·</span>
          <span className="cat-crumbs-cur">{cat.title}</span>
        </nav>

        <div className="section-eyebrow eyebrow-dark">
          <span className="eyebrow-num">{String(idx + 1).padStart(2, '0')}</span>
          <span>Каталог продукции</span>
        </div>
        <h2 className="section-title">
          {cat.title}.<br/>
          <span style={{ color: accent }}>{cat.short}.</span>
        </h2>
        <p className="section-sub">
          {cat.items.length} позиций · цены в тенге за кг (без НДС)
        </p>

        <div className="cats">
          <div className="cat cat-open">
            <div className="cat-body">
              <table className="cat-table">
                <thead>
                  <tr>
                    <th className="th-thumb"></th>
                    <th>Наименование</th>
                    <th>Стандарт</th>
                    <th>Размеры</th>
                    <th>Длина</th>
                    <th>Цена</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {cat.items.map((it) => (
                    <ItemRow key={it.name} it={it} accent={accent} onAdd={() => { cart.add(it, 100); cart.setOpen(true); }} />
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div className="cat-page-foot">
          <TPSLink to="/catalog" className="btn btn-line" style={{ borderColor: accent, color: accent }}>
            ← Все разделы
          </TPSLink>
          <a
            href={window.TPS_WA_LINK(`Здравствуйте! Интересует ${cat.title.toLowerCase()}. Можете прислать актуальный прайс и наличие?`)}
            target="_blank" rel="noopener"
            className="btn btn-wa-hero"
          >
            <WaIcon /> Запрос по разделу в WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

function Shipments({ accent }) {
  const photos = window.TPS_SHIPMENT_PHOTOS();
  const trackRef = React.useRef(null);
  const [pos, setPos] = useState({ atStart: true, atEnd: false });

  const updatePos = () => {
    const el = trackRef.current;
    if (!el) return;
    setPos({
      atStart: el.scrollLeft <= 4,
      atEnd: el.scrollLeft + el.clientWidth >= el.scrollWidth - 4,
    });
  };

  useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    updatePos();
    el.addEventListener('scroll', updatePos, { passive: true });
    window.addEventListener('resize', updatePos);
    return () => {
      el.removeEventListener('scroll', updatePos);
      window.removeEventListener('resize', updatePos);
    };
  }, [photos.length]);

  const scrollBy = (dir) => {
    const el = trackRef.current;
    if (!el) return;

    const card = el.querySelector('.ship-cell');
    const colW = card ? card.offsetWidth + 12 : el.clientWidth / 4;
    el.scrollBy({ left: colW * 4 * dir, behavior: 'smooth' });
  };

  return (
    <section id="shipments" className="section section-shipments">
      <div className="container">
        <div className="ship-head">
          <div>
            <div className="section-eyebrow">
              <span className="eyebrow-num">03</span>
              <span>Отгрузки и объёмы</span>
            </div>
            <h2 className="section-title light-title">
              Реальные объёмы<br/>
              <span style={{ color: accent }}>наших клиентов.</span>
            </h2>
            <p className="section-sub light-sub">
              Партии профильной трубы, балки, проката. От пары тонн до вагона — собираем, режем под габарит, отгружаем.
            </p>
          </div>
          {photos.length > 0 && (
            <div className="ship-controls">
              <span className="ship-counter">{photos.length} фото</span>
            </div>
          )}
        </div>

        {photos.length === 0 ? (
          <div className="ship-empty">
            Фото отгрузок появятся здесь — как только клиент пришлёт.
          </div>
        ) : (
          <div className="ship-track-wrap">
            <button
              type="button"
              className="ship-nav-btn left"
              onClick={() => scrollBy(-1)}
              disabled={pos.atStart}
              aria-label="Назад"
            >‹</button>
            <div className="ship-track" ref={trackRef}>
              {photos.map((src, i) => (
                <figure key={i} className="ship-cell">
                  <img src={src} alt={`Отгрузка ${i + 1}`} loading="lazy" />
                  <figcaption className="ship-cap">
                    <span className="ship-num">№ {String(i + 1).padStart(2, '0')}</span>
                  </figcaption>
                </figure>
              ))}
            </div>
            <button
              type="button"
              className="ship-nav-btn right"
              onClick={() => scrollBy(1)}
              disabled={pos.atEnd}
              aria-label="Вперёд"
            >›</button>
            <div className={`ship-fade ship-fade-r ${pos.atEnd ? 'is-hidden' : ''}`} aria-hidden />
            <div className={`ship-fade ship-fade-l ${pos.atStart ? 'is-hidden' : ''}`} aria-hidden />
          </div>
        )}
      </div>
    </section>
  );
}

function Services({ accent }) {
  return (
    <section id="services" className="section">
      <div className="container">
        <div className="section-eyebrow">
          <span className="eyebrow-num">05</span>
          <span>Услуги металлообработки</span>
        </div>
        <h2 className="section-title light-title">
          Не только склад.<br/>
          <span style={{ color: accent }}>Полный цикл обработки.</span>
        </h2>

        <div className="srv-grid">
          {window.TPS_SERVICES.map((s) => {
            const waMsg = `Здравствуйте! Интересует услуга: ${s.title}. ${s.desc} Можете рассчитать стоимость?`;
            return (
              <a key={s.code} href={window.TPS_WA_LINK(waMsg)} target="_blank" rel="noopener" className="srv">
                <div className="srv-top">
                  <div className="srv-code" style={{ color: accent }}>{s.code}</div>
                  <div className="srv-arrow" style={{ color: accent }}>→</div>
                </div>
                <div className="srv-title">{s.title}</div>
                <div className="srv-desc">{s.desc}</div>
                <div className="srv-foot">
                  <span className="srv-price">{s.price}</span>
                  <span className="srv-cta" style={{ background: accent, borderColor: accent }}>
                    <WaIcon size={13} /> Заказать
                  </span>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HowWeWork({ accent }) {
  const steps = [
    ['Запрос', 'Присылаете спецификацию через сайт, WhatsApp или e-mail.'],
    ['Расчёт', 'В течение рабочего дня даём цену, сроки и условия.'],
    ['Договор', 'Выставляем счёт. Работаем с НДС, без НДС, налично/безнал.'],
    ['Отгрузка', 'Со склада — день в день. Под заказ — по графику завода.'],
    ['Доставка', 'Своим транспортом или ТК по всему Казахстану.'],
  ];
  return (
    <section className="section section-beige">
      <div className="container">
        <div className="section-eyebrow">
          <span className="eyebrow-num">06</span>
          <span>Как мы работаем</span>
        </div>
        <h2 className="section-title">
          Пять шагов<br/>
          <span style={{ color: accent }}>от заявки до доставки.</span>
        </h2>

        <div className="steps">
          {steps.map(([t, d], i) => (
            <div key={i} className="step">
              <div className="step-num" style={{ color: accent }}>0{i+1}</div>
              <div className="step-line" style={{ background: i === steps.length - 1 ? 'transparent' : accent }} />
              <div className="step-title">{t}</div>
              <div className="step-desc">{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Partners({ accent }) {
  return (
    <section id="partners" className="section">
      <div className="container">
        <div className="section-eyebrow">
          <span className="eyebrow-num">07</span>
          <span>Заводы-партнёры</span>
        </div>
        <h2 className="section-title light-title">
          Прямые контракты<br/>с комбинатами СНГ.
        </h2>
        <div className="partners-list">
          {window.TPS_PARTNERS.map((p) => (
            <div key={p.name} className="partner">
              <span className="partner-mark" style={{ borderColor: accent, color: accent }}>
                {p.short || p.name.slice(0, 2)}
              </span>
              <span className="partner-name">{p.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ accent }) {
  const [form, setForm] = useState({ name: '', company: '', phone: '', spec: '' });
  const [sent, setSent] = useState(false);
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const buildBody = () =>
    `Здравствуйте! Заявка с сайта:\n\nИмя: ${form.name}\nКомпания: ${form.company}\nТелефон: ${form.phone}\nЗапрос: ${form.spec}`;
  const submit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent('Заявка с сайта ТехПромСталь');
    const body = encodeURIComponent(buildBody());
    window.location.href = `mailto:${window.TPS_EMAIL}?subject=${subject}&body=${body}`;
    setSent(true);
  };
  const waSubmit = () => {
    window.open(`https://wa.me/${window.TPS_WA}?text=${encodeURIComponent(buildBody())}`, '_blank');
  };
  return (
    <section id="contact" className="section section-dark">
      <div className="container contact-grid">
        <div>
          <div className="section-eyebrow eyebrow-dark">
            <span className="eyebrow-num">08</span>
            <span>Запрос цены</span>
          </div>
          <h2 className="section-title">
            Пришлите спецификацию —<br/>
            <span style={{ color: accent }}>дадим расчёт за день.</span>
          </h2>

          <div className="contact-info">
            <a href={window.TPS_WA_LINK('Здравствуйте!')} target="_blank" rel="noopener" className="ci-row ci-link">
              <div className="ci-k">WhatsApp</div>
              <div className="ci-v"><WaIcon size={14} /> {window.TPS_WA_DISPLAY}</div>
            </a>
            {window.TPS_PHONES.slice(1).map((p) => (
              <a key={p} href={`tel:${p.replace(/\s/g, '')}`} className="ci-row ci-link">
                <div className="ci-k">Телефон</div>
                <div className="ci-v">{p}</div>
              </a>
            ))}
            <a href={`mailto:${window.TPS_EMAIL}`} className="ci-row ci-link">
              <div className="ci-k">E-mail</div>
              <div className="ci-v">{window.TPS_EMAIL}</div>
            </a>
            <div className="ci-row">
              <div className="ci-k">Офис / склад</div>
              <div className="ci-v">{window.TPS_ADDRESS_FULL}</div>
            </div>
            <div className="ci-row">
              <div className="ci-k">График</div>
              <div className="ci-v">Пн–Пт 09:00–18:00</div>
            </div>
            <div className="ci-row">
              <div className="ci-k">Реквизиты</div>
              <div className="ci-v">{window.TPS_COMPANY_NAME} · БИН {window.TPS_COMPANY_BIN}</div>
            </div>
          </div>

          <div className="contact-map">
            <iframe
              src="https://yandex.kz/map-widget/v1/?ll=76.985%2C43.243&z=14&pt=76.985%2C43.243&text=%D0%90%D0%BB%D0%BC%D0%B0%D1%82%D1%8B%2C%20%D1%83%D0%BB.%20%D0%A5%D0%B0%D0%BB%D0%B8%D1%83%D0%BB%D0%BB%D0%B8%D0%BD%D0%B0%2066%2F1"
              loading="lazy"
              title="ТехПромСталь — на карте Алматы"
              allowFullScreen
            />
            <a
              className="contact-map-link"
              href="https://yandex.kz/maps/?text=Алматы,%20ул.%20Халиуллина%2066/1"
              target="_blank" rel="noopener"
            >
              Открыть на Яндекс.Картах →
            </a>
          </div>
        </div>

        {sent ? (
          <div className="form-sent">
            <div className="sent-icon" style={{ borderColor: accent, color: accent }}>✓</div>
            <h3>Заявка принята</h3>
            <p>Менеджер свяжется в течение рабочего дня. Если срочно — напишите в WhatsApp.</p>
            <div className="hero-actions" style={{ justifyContent: 'center' }}>
              <a href={window.TPS_WA_LINK('Здравствуйте!')} target="_blank" rel="noopener" className="btn btn-primary" style={{ background: accent }}>
                <WaIcon /> Открыть WhatsApp
              </a>
              <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name:'', company:'', phone:'', spec:'' }); }}>
                Отправить ещё одну
              </button>
            </div>
          </div>
        ) : (
          <form className="form" onSubmit={submit}>
            <label className="field">
              <span>Имя</span>
              <input required value={form.name} onChange={upd('name')} placeholder="Как к вам обращаться" />
            </label>
            <label className="field">
              <span>Компания</span>
              <input value={form.company} onChange={upd('company')} placeholder="Необязательно" />
            </label>
            <label className="field">
              <span>Телефон</span>
              <input required type="tel" value={form.phone} onChange={upd('phone')} placeholder="+7" />
            </label>
            <label className="field">
              <span>Спецификация</span>
              <textarea required rows={4} value={form.spec} onChange={upd('spec')} placeholder="Например: арматура А3, Ø12 мм, 12 м — 8 тонн" />
            </label>
            <div className="form-actions">
              <button type="submit" className="btn btn-primary" style={{ background: accent }}>
                Отправить заявку
              </button>
              <button type="button" onClick={waSubmit} className="btn btn-wa-outline" style={{ borderColor: accent, color: accent }}>
                <WaIcon /> Через WhatsApp
              </button>
            </div>
            <div className="form-note">Отправляя форму, вы соглашаетесь на обработку данных.</div>
          </form>
        )}
      </div>
    </section>
  );
}

function Footer({ accent }) {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <div className="brand">
            <BrandLogo variant="light" height={56} />
          </div>
          <div className="footer-tag">
            Чёрный и цветной металлопрокат. Металлообработка. Защитные покрытия.
          </div>
          <a href={window.TPS_WA_LINK('Здравствуйте!')} target="_blank" rel="noopener" className="footer-wa" style={{ borderColor: accent, color: accent }}>
            <WaIcon /> Написать в WhatsApp
          </a>
        </div>
        <div className="footer-cols">
          <div>
            <div className="fc-title">Каталог</div>
            <ul>
              {window.TPS_CATEGORIES.map((c) => (
                <li key={c.id}><TPSLink to={`/catalog/${c.id}`}>{c.title}</TPSLink></li>
              ))}
            </ul>
          </div>
          <div>
            <div className="fc-title">Услуги</div>
            <ul>
              {window.TPS_SERVICES.map((s) => (
                <li key={s.code}><a href="#services">{s.title}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <div className="fc-title">Контакты</div>
            <ul>
              {window.TPS_PHONES.map((p) => (
                <li key={p}><a href={`tel:${p.replace(/\s/g, '')}`}>{p}</a></li>
              ))}
              <li><a href={`mailto:${window.TPS_EMAIL}`}>{window.TPS_EMAIL}</a></li>
              <li>{window.TPS_ADDRESS_SHORT}</li>
              <li>Пн–Пт 09:00–18:00</li>
            </ul>
          </div>
        </div>
      </div>
      <div className="footer-foot container">
        <span>© ТОО «ТехПромСталь»</span>
        <a
        
        >
        </a>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, Nav, Hero, About, Catalog, CatalogIndexPage, CategoryPage, Shipments, Services, HowWeWork, Partners, Contact, Footer, StripedPlate });