// MG Ceramic — section components (exported to window)
const { useState, useRef, useEffect } = React;
const D = window.MGData;

// ─────────────────────────────────────────────
function Ph({ label, style, className }) {
  return <div className={"ph " + (className || "")} data-label={label} style={style} />;
}

function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" style={{ display: "inline-block" }}>
      <path d="M3 11 L11 3 M5 3 H11 V9" stroke="currentColor" strokeWidth="1.5" fill="none" />
    </svg>
  );
}

function Btn({ children, ghost, onClick, disabled, type }) {
  return (
    <button
      type={type || "button"}
      disabled={disabled}
      className={
        "btn" +
        (ghost ? " btn-ghost" : "") +
        (disabled ? " is-disabled" : "")
      }
      onClick={onClick}
    >
      {children}
      <Arrow />
    </button>
  );
}

// ─────────────────────────────────────────────
function TopBar() {
  return (
    <div className="topbar">
      <div className="shell-wide">
        <div className="topbar-left">
          <span>10 складов · Доставка по РФ</span>
          <span>Иранский керамогранит · Сертификат ГОСТ Р</span>
        </div>
        <div className="topbar-right">
          <a href={"tel:" + D.brand.phone.replace(/\D/g, '')}>{D.brand.phone}</a>
          <a href={"mailto:" + D.brand.email}>{D.brand.email}</a>
        </div>
      </div>
    </div>
  );
}

function Header() {
  const A = window.__ASSET || 'assets/';

  return (
    <header className="header" data-screen-label="00 Header">
      <div className="shell-wide">

      <a href="#" className="brand">
  <img src="./assets/logo-3-white.svg" alt="MG Ceramic" />
</a>

        <nav className="nav">
          <a href="#catalog">Каталог</a>
          <a href="#applications">Применение</a>
          <a href="#about">О компании</a>
          <a href="#projects">Проекты</a>
          <a href="#b2b">B2B</a>
          <a href="#contact">Контакты</a>
        </nav>

        <div className="header-right">
          <a
            className="header-phone"
            href={"tel:" + D.brand.phone.replace(/\D/g, '')}
          >
            {D.brand.phone}
          </a>

          <Btn
  onClick={() => {
    document
      .getElementById("contact")
      ?.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
  }}
>
  Получить расчёт
</Btn>
        </div>

      </div>
    </header>
  );
}

// ─────────────────────────────────────────────
function Hero({ variant }) {
  return (
    <section className="hero" data-hero={variant} data-screen-label="01 Hero">
      <div className="shell-wide">
      <div className="hero-grid">

<div className="hero-left">
  <div className="kicker">Иранский керамогранит · с 2022 года</div>

  <h1 className="display-1">
    <span className="ink">Распродажа склада</span><br />
    <span className="strike">по оптовым ценам!</span>
  </h1>

  <p className="lead">
  Срочная распродажа керамогранита в Москве. Успейте купить по акции от 630 ₽/м². Цены действуют до 30 июня!
  </p>

  <div className="hero-ctas">
  <Btn
  onClick={() => {
    document
      .getElementById("contact")
      ?.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
  }}
>
Отправить запрос
</Btn>
 
</div>

  <div className="hero-meta">
    <div className="hero-meta-item">
      <small>Коллекций</small>
      <strong>11</strong>
    </div>

    <div className="hero-meta-item">
      <small>Складской запас</small>
      <strong>500 000 м²</strong>
    </div>

    <div className="hero-meta-item">
      <small>Городов</small>
      <strong>10</strong>
    </div>

    <div className="hero-meta-item">
      <small>От</small>
      <strong>630 ₽/м²</strong>
    </div>
  </div>
</div>

<div className="hero-image">
  <img
  src="./assets/banner3.png"
  alt="MG Ceramic — иранский керамогранит"
  loading="eager"
  fetchpriority="high"
  width="820"
  height="820"
  decoding="async"
/>
</div>


        </div>

        {variant === "catalog" && (
          <>
            <div className="hero-quickfilter">
              {D.formats.map((f) => (
                <div className="quickfilter-cell" key={f.name}>
                  <small>Формат</small>
                  <b>{f.name}</b>
                </div>
              ))}
            </div>
            <div className="hero-strip-products">
              {D.hits.slice(0, 6).map((h) => (
                <Ph key={h.id} label={h.category} />
              ))}
            </div>
          </>
        )}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Marquee() {
  const items = [
    "Под мрамор", "60×60", "60×120", "Под бетон", "Морозостойкий F 100",
    "Под дерево", "73,5×73,5", "PEI IV", "Под камень", "Ректифицированный",
    "20×120", "Доставка по РФ",
  ];
  const loop = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((t, i) => (
          <span className="marquee-item" key={i}>{t}</span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
function Stats() {
  return (
    <section style={{ padding: 0 }}>
      <div className="shell-wide">
        <div className="stats">
          <div><strong>500&nbsp;000+</strong><small>м² складского запаса в постоянном наличии</small></div>
          <div><strong>150+</strong><small>коллекций в неснижаемом остатке</small></div>
          <div><strong>10</strong><small>городов: офисы и склады по России</small></div>
          <div><strong>F 100</strong><small>морозостойкость · 100 циклов заморозки</small></div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
/*function Applications() {
  return (
    <section id="applications" data-screen-label="02 Applications">
      <div className="shell-wide">
        <div className="sec-head">
          <div className="left">
            <div className="kicker">По применению</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>
              Каждая поверхность<br/>под свою задачу
            </h2>
          </div>
          <div className="right">
            <p className="lead">
              Подбор керамогранита по сценарию — от ванной комнаты до фасада здания.
              Технические характеристики и подходящие коллекции в каждой категории.
            </p>
          </div>
        </div>

        <div className="app-grid">
          {D.applications.map((a, i) => (
            <a className={"app-card" + (a.large ? " large" : "")} key={a.id} href={"#app-" + a.id}>
              <div className="num">{String(i + 1).padStart(2, "0")} · {a.subtitle}</div>
              <h3>{a.title}</h3>
              <p>{a.desc}</p>
              <span className="more">Смотреть подборку <Arrow /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}*/

// ─────────────────────────────────────────────
function Designs() {
  return (
    <section id="catalog" data-screen-label="03 Designs">
      <div className="shell-wide">
        <div className="sec-head">
          <div className="left">
            <div className="kicker">По дизайну</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>
              Восемь языков<br/>натуральной поверхности
            </h2>
          </div>
          <div className="right">
            <p className="lead">
              Имитация природных материалов с микрорельефом и глубиной цвета. Все коллекции выпускаются
              на иранской белой глине — премиальное сырьё с предсказуемой геометрией.
            </p>
          </div>
        </div>

        <div className="design-grid">
          {D.designs.map((d) => (
            <a className="design-card" key={d.id} href={d.link}>
              {/* Если есть изображение, показываем его, иначе — placeholder */}
              {d.img ? (
               <img
               src={d.img}
               alt={d.title}
               loading="lazy"
               onError={(e) => {
                 e.target.style.display = "none";
               }}
             />
              ) : (
                <Ph label={d.title.toUpperCase()} />
              )}
              <div className="label">
                <span>{d.hint}</span>
                <Arrow />
              </div>
              <div className="title">{d.title}</div>
             {/* <div className="count">{d.count} коллекций / артикулов</div>*/}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Hits() {
  const [active, setActive] = useState("all");
  const cats = [
    { id: "all", label: "Все" },
   /* { id: "60x60", label: "60×60" },*/
  
   { id: "60x120", label: "60×120" },    
   { id: "30x90", label: "30x90" }, 
    { id: "73,5×73,5", label: "73,5×73,5" },
    /*{ id: "20×120", label: "20×120" },
    
    { id: "59×59", label: "59×59" },*/
  ];
  const list = D.hits.filter(h => active === "all" || h.category === active);

  return (
    <section id="hits" data-screen-label="04 Hits">
      <div className="shell-wide">
        <div className="sec-head">
          <div className="left">
            <div className="kicker">Хиты каталога</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>
              Подобрано для тех,<br/>кто берёт сразу
            </h2>
          </div>
          <div
  className="right"
  style={{
    display: "flex",
    gap: 8,
    flexWrap: "wrap",
    justifyContent: "flex-end"
  }}
>
            {cats.map(c => (
              <button
                key={c.id}
                className={`chip${active === c.id ? " is-active" : ""}`}
                onClick={() => setActive(c.id)}
              >
                {c.label}
              </button>
            ))}
          </div>
        </div>

        <div className="hits-grid">
          {list.map(h => (
            <a
            className="prod"
            key={h.id}
            href={h.link}
          >
              <div className="prod-img">
                {/* Отображение изображения, если оно доступно */}
                {h.pic && (
                  <img
                    src={h.pic}
                    alt={h.name}
                    loading="lazy"
                    onError={e => {
                      // Скрытие изображения при ошибке загрузки
                      e.target.style.display = "none";
                    }}
                  />
                )}
                {/* Показываем плейсхолдер, если изображение отсутствует или не загрузилось */}
                {!h.pic && <Ph label={`${h.category} · ${h.type}`} />}
              </div>
              <div className="prod-body">
                <div className="prod-meta">
                  <span>{h.collection}</span>
                  <span>{h.category}</span>
                </div>
                <h4 className="prod-name">
                  {h.name}{" "}
                  <br />
                  <span
                    style={{
                      color: "var(--muted)",
                      fontWeight: 400,
                      fontSize: 13,
                      letterSpacing: 0
                    }}
                  >
                    {h.nameEn}
                  </span>
                </h4>
                <div className="prod-specs">
                  <span className="prod-spec">{h.type}</span>
                  <span className="prod-spec">{h.color}</span>
                  <span className="prod-spec">матовый</span>
                </div>
                <div className="prod-foot">
                  <div className="prod-price">
                    <strong>{h.price.toLocaleString("ru-RU")} ₽</strong>
                    <small>за м²</small>
                  </div>
                  <div className="prod-add">
  <Arrow size={12} />
</div>
                </div>
              </div>
            </a>
          ))}
        </div>
{/*
        <div style={{ marginTop: 48, display: "flex", justifyContent: "center" }}>
          <Btn ghost>Перейти в каталог</Btn>
                  </div> */}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Heritage() {
  return (
    <section id="about" data-screen-label="05 Heritage">
      <div className="shell-wide">
        <div className="heritage">
        <div className="img heritage-photo">
  <img
    src="https://mg-ceramic.ru/bitrix/templates/MG/images/section/about4.jpg"
    alt="Иран · ООО «Материал Гроуп»"
  />

  <div className="ph-label">
    ИРАН · ООО «МАТЕРИАЛ ГРОУП»
  </div>
</div>
          <div className="copy">
            <div className="kicker">О компании</div>
            <h2 className="h-section">
              Производство, проверенное<br/>столетиями
            </h2>
            <p>
              Производство керамической плитки в Иране имеет многовековую историю и по праву считается
              одним из эталонов отрасли. Именно иранская белая глина признана одним из лучших видов сырья
              в мире — благодаря плотности, чистоте и стабильным физико-механическим характеристикам.
            </p>
            <p>
              <b>ООО «Материал Гроуп»</b> — собственник бренда MG Ceramic. Компания основана 22 декабря 2022 года
              и специализируется на оптово-розничной реализации иранской керамики. Мы контролируем полный цикл —
              от формирования ассортимента и утверждения декоров до логистики и поставок по России и за её пределы.
            </p>
            <div className="heritage-stats">
              <div><strong>2022</strong><small>год основания</small></div>
              <div><strong>11</strong><small>фирменных коллекций</small></div>
              <div><strong>ГОСТ Р</strong><small>сертификация</small></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Why() {
  return (
    <section>
      <div className="shell-wide">
        <div className="sec-head">
          <div className="left">
            <div className="kicker">Почему мы</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>
              Шесть причин,<br/>почему с нами работают повторно
            </h2>
          </div>
          <div className="right">
            <p className="lead">
              Полный контроль от формирования декоров до отгрузки. Стратегическое размещение складов,
              международная логистика и партнёрские условия для проектных клиентов.
            </p>
          </div>
        </div>

        <div className="why-grid">
          {D.why.map((w) => (
            <div className="why" key={w.num}>
              <div className="num">{w.num}</div>
              <h4>{w.title}</h4>
              <p>{w.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Projects() {
  const projectsTop = [
    {
      img: "https://mg-ceramic.ru/upload/iblock/e1b/7zirrhor3z3r98gdp22uqtamgwq7fvm6.jpg",
      tag: "Москва · 2026",
      decoding: "async",
      title: "Акцентная стена: Даймонд Опал PL 60х120. Стена и пол: Арон PL 60х120",
    },
    {
      img: "https://mg-ceramic.ru/upload/iblock/14e/vx94z165185632t26zj1ubx6ucc153mx.jpg",
      tag: "Краснодар · 2026",
      decoding: "async",
      title: "Офис строительной компании. Пол: Дунай светло-серый MT 60×120",
    },
  ];

  const projectsBottom = [
    {
      img: "https://mg-ceramic.ru/upload/iblock/af1/0r96lu2l6qdzgwbdx6du6fj5uslurq5w.jpg",
      tag: "МО · 2026",
      decoding: "async",
      title: "Готовое решение: акцентная стена и пол — Зоя светлый PL 60×120",
    },
    {
      img: "https://mg-ceramic.ru/upload/iblock/c51/9m8pqzqgaypnm6t05k206ye0s0o4o14i.jpg",
      tag: "Сочи · 2026",
      decoding: "async",
      title: "Кварц бежевый MT 60×60 и София светло-серый MT 20×120",
    },
    {
      img: "https://mg-ceramic.ru/upload/iblock/826/qewqm48luvp7y7dn1bhef42u3r96t4op.jpg",
      tag: "Казань · 2026",
      decoding: "async",
      title: "Пол: Делван PL 60×120",
    },
  ];

  return (
    <section id="projects" data-screen-label="06 Projects">
      <div className="shell-wide">

        <div className="sec-head">
          <div className="left">
            <div className="kicker">Проекты</div>

            <h2
              className="h-section"
              style={{ marginTop: 24 }}
            >
              Объекты, в которых
              <br />
              лежит наш керамогранит
            </h2>
          </div>

          <div className="right">
            <a
              className="btn btn-ghost"
              href="https://mg-ceramic.ru/gallery/"
            >
              Все реализованные проекты
              <Arrow />
            </a>
          </div>
        </div>

        {/* Верхний ряд — 2 блока */}

        <div className="projects projects-top">
          {projectsTop.map((p, i) => (
            <div className="proj" key={i}>

              <img
                src={p.img}
                alt={p.title}
                loading="lazy"
              />

              <div className="proj-cap">
                <small>{p.tag}</small>
                <b>{p.title}</b>
              </div>

            </div>
          ))}
        </div>

        {/* Нижний ряд — 3 блока */}

        <div className="projects projects-bottom">
          {projectsBottom.map((p, i) => (
            <div className="proj" key={i}>

              <img
                src={p.img}
                alt={p.title}
                loading="lazy"
              />

              <div className="proj-cap">
                <small>{p.tag}</small>
                <b>{p.title}</b>
              </div>

            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Calculator() {
  const [area, setArea] = useState(50);
  const [price, setPrice] = useState(1440);
  const [reserve, setReserve] = useState(7);

  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");

  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");

  // honeypot
  const [company, setCompany] = useState("");
  const phoneRef = useRef(null);

usePhoneMask(phoneRef);

const safeArea = Number(area) || 0;
const safeReserve = Number(reserve) || 0;
const safePrice = Number(price) || 0;

const reserved = Math.ceil(
  safeArea * (1 + safeReserve / 100)
);

const sum = reserved * safePrice;

  async function handleSubmit() {
    setError("");

    if (!name || !phone) {
      setError("Заполните имя и телефон");
      return;
    }

    // honeypot
    if (company.length > 0) {
      return;
    }

    try {
      setLoading(true);

      const response = await fetch("./api/calc.php", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },

        body: JSON.stringify({
          name,
          phone,
          email,
        
          area,
          reserve,
          reserved,
          price,
          total: sum,
        
          company,
        
          utm_source: localStorage.getItem("utm_source") || "",
          utm_medium: localStorage.getItem("utm_medium") || "",
          utm_campaign: localStorage.getItem("utm_campaign") || "",
          utm_content: localStorage.getItem("utm_content") || "",
          utm_term: localStorage.getItem("utm_term") || "",
        }),
      });

      const data = await response.json();

      if (data.success) {
        setSuccess(true);
        setTimeout(() => {
          setSuccess(false);
        }, 5000);
        setName("");
        setPhone("");
        setEmail("");
      } else {
        setError(data.message || "Ошибка отправки");
      }
    } catch (e) {
      setError("Ошибка соединения");
    } finally {
      setLoading(false);
    }
  }

  return (
    <section>
      <div className="shell-wide">
        <div className="calc">

          <div className="calc-left">
            <div className="kicker">Калькулятор</div>

            <h2 className="h-section">
              Быстрый расчёт<br/>
              стоимости м²
            </h2>

            <p className="body calc-text">
              Ориентировочный расчёт без учёта подрезки и упаковки.
              Точная стоимость с логистикой — в коммерческом предложении менеджера.
            </p>

            <div className="calc-form">

              <div className="field">
                <label>Площадь, м²</label>

                <input
                  type="number"
                  value={area}
                  min="1"
                  onChange={(e) => setArea(+e.target.value || 0)}
                />
              </div>

              <div className="field">
                <label>Коллекция</label>

                <select
                  value={price}
                  onChange={(e) => setPrice(+e.target.value)}
                >
                  <option value={800}>
                    800 ₽ — Эконом / под камень
                  </option>

                  <option value={900}>
                    900 ₽ — Metropolis MT
                  </option>

                  <option value={1360}>
                    1 360 ₽ — Mono Line / Wood line
                  </option>

                  <option value={1440}>
                    1 440 ₽ — Marble Style
                  </option>

                  <option value={1520}>
                    1 520 ₽ — Brick line
                  </option>

                  <option value={1760}>
                    1 760 ₽ — Sugar SHG
                  </option>
                </select>
              </div>

              <div className="field">
                <label>Запас на подрезку, %</label>

                <input
                  type="number"
                  value={reserve}
                  min="0"
                  max="20"
                  onChange={(e) => setReserve(+e.target.value || 0)}
                />
              </div>

              <div className="calc-divider"></div>

              <div className="field">
                <label>Ваше имя</label>

                <input
                  type="text"
                  placeholder="Иван"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                />
              </div>

              <div className="field">
                <label>Телефон</label>

                <input
                  type="tel"
                  ref={phoneRef}
                  placeholder="+7 (999) 999-99-99"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                />
              </div>

              <div className="field">
                <label>E-mail</label>

                <input
                  type="email"
                  placeholder="mail@company.ru"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>

              {/* honeypot */}
              <input
                type="text"
                value={company}
                onChange={(e) => setCompany(e.target.value)}
                autoComplete="off"
                tabIndex="-1"
                className="hp"
              />

            </div>
          </div>

          <div className="calc-result">

            <div className="kicker calc-kicker">
              Предварительный расчёт
            </div>

            <div className="calc-row">
              <span>Площадь укладки</span>
              <b>{area} м²</b>
            </div>

            <div className="calc-row">
              <span>С учётом подрезки {reserve}%</span>
              <b>{reserved} м²</b>
            </div>

            <div className="calc-row">
              <span>Цена за м²</span>
              <b>{price.toLocaleString("ru-RU")} ₽</b>
            </div>

            <div className="calc-row total">
              <span>Итого материал</span>

              <b>
                {sum.toLocaleString("ru-RU")} ₽
              </b>
            </div>

            {error && (
              <div className="calc-error">
                {error}
              </div>
            )}

            {success && (
              <div className="calc-success">
                Заявка отправлена. Менеджер свяжется с вами.
              </div>
            )}

            <button
              className="calc-submit"
              onClick={handleSubmit}
              disabled={loading}
            >
              {loading ? "Отправка..." : "Отправить менеджеру"}
            </button>

          </div>

        </div>
      </div>
    </section>
  );
}
// ─────────────────────────────────────────────
function Reviews() {
  return (
    <section data-screen-label="07 Reviews">
      <div className="shell-wide">
        <div className="sec-head">
          <div className="left">
            <div className="kicker">Отзывы</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>
              Архитекторы, прорабы,<br/>дизайнеры — о нас
            </h2>
          </div>
          <div className="right">
            <p className="lead">
              Работаем с проектными командами, девелоперами и частными клиентами. Главное, что нам говорят —
              «понятно, в срок, без сюрпризов».
            </p>
          </div>
        </div>

        <div className="testimonials-grid">
          {D.reviews.map((r, i) => (
            <div className="tstm" key={i}>
              <p className="tstm-quote">{r.quote}</p>
              <div className="tstm-meta">
                <div className="tstm-avatar">{r.initials}</div>
                <div>
                  <div className="tstm-name">{r.name}</div>
                  <div className="tstm-role">{r.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" data-screen-label="08 FAQ">
      <div className="shell-wide">
        <div className="sec-head">
          <div className="left">
            <div className="kicker">Частые вопросы</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>
              Ответы<br/>на главные вопросы
            </h2>
          </div>
          <div className="right">
            <p className="lead">
              Не нашли ответ? Напишите на {D.brand.email} или позвоните {D.brand.phone} — менеджер ответит
              в течение рабочего дня.
            </p>
          </div>
        </div>

        <div className="faq-list">
          {D.faq.map((f, i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{f.q}</span>
                <span className="plus">
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.5" /></svg>
                </span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Blog() {

  const posts = [
    {
      tag: "о ремонте",
      date: "12 мая 2026",
      title: "Микроцемент в евродвушке",
      link: "https://mg-ceramic.ru/blog/o-remonte/mikrotsement-v-evrodvushke/",
      img: "https://mg-ceramic.ru/upload/iblock/57c/84geu84uilxyb0wedql1ftzq7umo18ha.jpg"
    },

    {
      tag: "партнёрам",
      date: "04 мая 2026",
      title: "MG Ceramic: о системе, рынке и партнерстве",
      link: "https://mg-ceramic.ru/blog/partneram/mg-ceramic-o-sisteme-rynke-i-partnerstve/",
      img: "https://mg-ceramic.ru/upload/iblock/833/gtk6g3u4bm11a7trwvxzymy7lq078rn0.jpg"
    },

    {
      tag: "о дизайне",
      date: "21 апр 2026",
      title: "Разбор интерьера квартиры с Onyx Gold GL",
      link: "https://mg-ceramic.ru/blog/o-dizayne/razbor-interera-kvartiry-s-onyx-gold-gl/",
      img: "https://mg-ceramic.ru/upload/iblock/856/l9lifvopeqohmxiqgch5e14i83c2t8at.jpg"
    }
  ];

  return (
    <section data-screen-label="09 Blog">
      <div className="shell-wide">

        <div className="sec-head">

          <div className="left">
            <div className="kicker">Блог</div>

            <h2
              className="h-section"
              style={{ marginTop: 24 }}
            >
              О материале,<br/>
              применении и технологиях
            </h2>
          </div>

          <div className="right">
            <a
              className="btn btn-ghost"
              href="https://mg-ceramic.ru/blog/"
            >
              Все статьи
              <Arrow />
            </a>
          </div>

        </div>

        <div className="blog-grid">

          {posts.map((p, i) => (

            <a
              className="post"
              key={i}
              href={p.link}
              target="_blank"
              rel="noopener noreferrer"
            >

              <div className="post-img">

                <img
                  src={p.img}
                  alt={p.title}
                  loading="lazy"
                />

                <div                 
                  data-label={p.tag}
                ></div>

              </div>

              <div className="post-meta">
                <span>{p.tag}</span>
                <span>{p.date}</span>
              </div>

              <h4>{p.title}</h4>

            </a>

          ))}

        </div>

      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Geo() {
  return (
    <section style={{ padding: "80px 0" }} data-screen-label="10 Geo">
      <div className="shell-wide">
        <div className="sec-head" style={{ marginBottom: 32 }}>
          <div className="left">
            <div className="kicker">География</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>
              10 складов<br/>в ключевых регионах
            </h2>
          </div>
          <div className="right">
            <p className="lead">
              Стратегическое размещение позволяет обеспечивать стабильные поставки и оперативную доставку
              позиций при отсутствии на конкретном складе.
            </p>
          </div>
        </div>

        <div className="cities">
  {D.cities.map((c) => (
    <div className="city" key={c.name}>
      <div className="city-top">
        <div className="city-dot"></div>
        <span>{c.name}</span>
      </div>

      <small>{c.tag}</small>
    </div>
  ))}
</div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function B2B() {
  return (
    <section id="b2b" data-screen-label="11 B2B">
      <div className="shell-wide">
        <div className="b2b">
          <div>
            <div className="kicker" style={{ color: "currentColor", opacity: 0.7 }}>B2B / Проекты</div>
            <h2 className="h-section" style={{ margin: "20px 0 24px" }}>
              Поставки под объект,<br/>проектные условия
            </h2>
            <p className="lead">
              Принимаем заказы на производстве под конкретные проекты. Гарантированная бесперебойность,
              минимальные сроки согласования, единый ассортимент по всем очередям ЖК.
            </p>
            <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Btn
  onClick={() => {
    document
      .getElementById("contact")
      ?.scrollIntoView({ behavior: "smooth" });
  }}
>
  Запросить проектные цены
</Btn>
            </div>
          </div>

          <div className="b2b-list">
            {D.b2b.map((b) => (
              <div className="b2b-row" key={b.num}>
                <span className="b2b-num">{b.num}</span>
                <div>
                  <b>{b.title}</b>
                  <span>{b.desc}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
function Contact() {
  const phoneRef = useRef(null);

usePhoneMask(phoneRef);
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();

    const form = new FormData(e.target);

    // honeypot
    if (form.get("company")) {
      return;
    }

    setLoading(true);

    try {
      const res = await fetch("./api/contact.php", {
        method: "POST",
        body: JSON.stringify({
          name: form.get("name"),
          phone: form.get("phone"),
          email: form.get("email"),
          type: form.get("type"),
          area: form.get("area"),
          comment: form.get("comment"),
    
          utm_source: localStorage.getItem("utm_source") || "",
          utm_medium: localStorage.getItem("utm_medium") || "",
          utm_campaign: localStorage.getItem("utm_campaign") || "",
          utm_content: localStorage.getItem("utm_content") || "",
          utm_term: localStorage.getItem("utm_term") || "",
        }),
        headers: {
          "Content-Type": "application/json",
        },
      });
    
      const data = await res.json();
    
      if (data.success) {
        console.log(data);
        window.scrollTo({
          top: document.getElementById("contact").offsetTop - 100,
          behavior: "smooth"
        });
        setSent(true);
        e.target.reset();
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  }

  return (
    <section id="contact" data-screen-label="12 Contact">
      <div className="shell-wide">
        <div className="contact">
          <div className="contact-info">
            <div className="kicker">Контакты</div>

            <h2 className="h-section">
              Расскажите о проекте
              <br />
              — подберём материал
            </h2>

            <p className="lead">
              Оставьте заявку — менеджер свяжется в течение
              рабочего дня. Подбор по техническим требованиям,
              расчёт стоимости с логистикой, образцы для альбомов.
            </p>

            <div style={{ marginTop: 16 }}>
              <div className="contact-card">
                <small>Телефон</small>

                <div className="v">
                  {D.brand.phone}

                  <small>
                    Пн–Пт 09:00 — 19:00 МСК
                  </small>
                </div>
              </div>

              <div className="contact-card">
                <small>Почта</small>

                <div className="v">
                  {D.brand.email}

                  <small>
                    Ответим в течение рабочего дня
                  </small>
                </div>
              </div>

              <div className="contact-card">
                <small>Юр. лицо</small>

                <div className="v">
                  ООО «Материал Гроуп»

                  <small>
                    Собственник бренда MG Ceramic
                  </small>
                </div>
              </div>
            </div>
          </div>

          {sent ? (
  <div className="form-success">
    <div className="form-success-icon">✓</div>

    <h3>Заявка отправлена</h3>

    <p>
      Менеджер MG Ceramic свяжется с вами
      в течение рабочего дня.
    </p>
  </div>
) : (
  <form className="form" onSubmit={handleSubmit}>
            {/* honeypot */}
            <input
              type="text"
              name="company"
              autoComplete="off"
              tabIndex="-1"
              className="hp"
            />

            <div className="form-row">
              <div className="field">
                <label>Имя</label>

                <input
                  type="text"
                  name="name"
                  required
                  placeholder="Как к вам обращаться"
                />
              </div>

              <div className="field">
                <label>Телефон</label>

                <input
                  type="tel"
                  name="phone"
                  ref={phoneRef}
                  required
                  placeholder="+7 (___) ___-__-__"
                />
              </div>
            </div>

            <div className="field">
              <label>E-mail</label>

              <input
                type="email"
                name="email"
                placeholder="you@company.ru"
              />
            </div>

            <div className="form-row">
              <div className="field">
                <label>Тип клиента</label>

                <select name="type">
                  <option>Частный клиент</option>
                  <option>Дизайнер / архитектор</option>
                  <option>Строитель / прораб</option>
                  <option>Застройщик / подрядчик</option>
                  <option>Оптовик / дилер</option>
                </select>
              </div>

              <div className="field">
                <label>Площадь, м²</label>

                <input
                  type="number"
                  name="area"
                  placeholder="50"
                />
              </div>
            </div>

            <div className="field">
              <label>Комментарий</label>

              <textarea
                name="comment"
                placeholder="Опишите проект, желаемый формат, коллекции, сроки..."
              />
            </div>

            <div className="form-foot">
              <small>
                Нажимая «Отправить», вы соглашаетесь
                с обработкой персональных данных
                и политикой конфиденциальности.
              </small>

              <Btn type="submit" disabled={loading}>
                {sent
                  ? "Заявка отправлена"
                  : loading
                  ? "Отправка..."
                  : "Отправить заявку"}
              </Btn>
            </div>
            </form>
)}
        </div>
      </div>
    </section>
  );
}

/// ─────────────────────────────────────────────
function Footer() {

  return (
    <footer className="footer">

      <div className="shell-wide">

        <div className="footer-brand">

        <a href="/">
  <img
    src="./assets/logo.svg"
    alt="MG Ceramic"
  />
</a>

          <p>
            Иранский керамогранит на белой глине.
            Поставки по России — 10 складов,
            более 500 000 м² в наличии.
          </p>

          <p
            style={{
              marginTop: 12,
              fontSize: 12
            }}
          >
            © {new Date().getFullYear()} ООО «Материал Гроуп» · mg-ceramic.ru
          </p>

        </div>

        {/* Каталог */}

        <div className="footer-col">

          <h5>Каталог</h5>

          <ul>

            <li>
              <a href="https://mg-ceramic.ru/catalog/60x60/">
                60×60
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/catalog/60x120/">
                60×120
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/catalog/73-5x73-5/">
                73,5×73,5
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/catalog/30x90/">
                30×90
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/catalog/20x120/">
                20×120
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/catalog/lestnitsy/">
                Ступени
              </a>
            </li>

          </ul>

        </div>

        {/* Коллекции */}

        <div className="footer-col">

          <h5>Коллекции</h5>

          <ul>

            <li>
              <a href="https://mg-ceramic.ru/collection/marble-line-gl/">
                Мрамор GL
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/collection/pro-line-mt/">
                Про МТ
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/collection/loft-stone-mt/">
                Лофт МТ
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/collection/wood-line-mr-mrp/">
                Экостиль MR
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/collection/street-line-mr-mrp/">
                Бульвар MR
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/collection/step-line-mt/">
                Лестницы MT
              </a>
            </li>

          </ul>

        </div>

        {/* Компания */}

        <div className="footer-col">

          <h5>Компания</h5>

          <ul>

            <li>
              <a href="https://mg-ceramic.ru/about/">
                О компании
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/gallery/">
                Готовые работы
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/calc/">
                Калькулятор
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/delivery/">
                Доставка
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/contacts/">
                Контакты
              </a>
            </li>

            <li>
              <a href="https://mg-ceramic.ru/blog/">
                Блог
              </a>
            </li>

          </ul>

        </div>

      </div>

      {/* Нижняя строка */}

      <div className="shell-wide">

        <div className="footer-bottom">

          <span>

            <a href="tel:79911777770">
            +7 (991) 177-77-70
            </a>

            {" · "}

            <a href="mailto:office@mg-ceramic.ru">
              office@mg-ceramic.ru
            </a>

          </span>

          <span>
            Москва · Краснодар · Казань · Самара · и ещё 6 городов
          </span>

          <a href="https://mg-ceramic.ru/politics/">
            Политика конфиденциальности
          </a>

        </div>

      </div>

    </footer>
  );
}
function usePhoneMask(ref) {
  useEffect(() => {
    if (!ref.current || !window.IMask) return;
  
    const mask = IMask(ref.current, {
      mask: '+{7} (000) 000-00-00'
    });
  
    return () => {
      mask.destroy();
    };
  }, []);
}
// UTM save
(function () {
  const params = new URLSearchParams(window.location.search);

  [
    "utm_source",
    "utm_medium",
    "utm_campaign",
    "utm_content",
    "utm_term"
  ].forEach((key) => {
    const value = params.get(key);

    if (value) {
      localStorage.setItem(key, value);
    }
  });
})();
// ─────────────────────────────────────────────
Object.assign(window, {
  TopBar, Header, Hero, Marquee, Stats, /*Applications, */Designs, Hits,
  Heritage, Why, Projects, Calculator, Reviews, Faq, Blog, Geo, B2B,
  Contact, Footer, Btn, Arrow, Ph,
});