/* VOLZAR site — shared chrome & primitives, composed from the bound design system. */
const DS = window.VOLZARDesignSystem_bae5a5;
const { Logo, BlueIsland, Button, Badge, Stat, Card, BulletList, ComparisonTable, Field } = DS;
const { useState, useEffect, useRef, useContext, createContext } = React;

/* ---------------- Navigation context ---------------- */
const NavCtx = createContext({ page: "home", go: () => {} });
const useNav = () => useContext(NavCtx);

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: "smooth" });
}

/* ---------------- Scroll-reveal ---------------- */
function useReveal(depKey) {
  useEffect(() => {
    let raf = 0;
    const reveal = () => {
      const vh = window.innerHeight || 800;
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > -40) el.classList.add("in");
      });
    };
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(reveal); };
    reveal();
    requestAnimationFrame(reveal);
    const t = setTimeout(reveal, 250);
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    const safety = setTimeout(() => { document.querySelectorAll(".reveal:not(.in)").forEach((el) => el.classList.add("in")); }, 2000);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      clearTimeout(t); clearTimeout(safety); cancelAnimationFrame(raf);
    };
  }, [depKey]);
}

/* ---------------- Type primitives ---------------- */
function Eyebrow({ children, tone = "blue", style }) {
  return (
    <div className="reveal" style={{
      fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 13,
      letterSpacing: "var(--ls-caps)", textTransform: "uppercase",
      color: tone === "light" ? "var(--text-on-blue-soft)" : "var(--blue-500)",
      marginBottom: 16, display: "flex", alignItems: "center", gap: 12, ...style,
    }}>
      <span style={{ width: 26, height: 2, background: tone === "light" ? "var(--text-on-blue-soft)" : "var(--blue-500)" }} />
      {children}
    </div>
  );
}

function H2({ children, tone = "dark", style }) {
  return (
    <h2 className="display" style={{
      fontSize: "clamp(28px, 3.4vw, 44px)",
      color: tone === "light" ? "var(--white)" : "var(--graphite-900)",
      marginBottom: 14, ...style,
    }}>{children}</h2>
  );
}

function H3({ children, tone = "dark", style }) {
  return (
    <h3 className="display" style={{
      fontSize: 20, letterSpacing: "0.02em",
      color: tone === "light" ? "var(--white)" : "var(--graphite-900)", ...style,
    }}>{children}</h3>
  );
}

function SectionHead({ eyebrow, title, lead, tone = "dark", style }) {
  return (
    <div className="sec-head" style={style}>
      {eyebrow && <Eyebrow tone={tone === "light" ? "light" : "blue"}>{eyebrow}</Eyebrow>}
      <H2 tone={tone} className="reveal">{title}</H2>
      {lead && <p className="lead reveal" style={{ color: tone === "light" ? "var(--text-on-blue-soft)" : "var(--text-body)", marginTop: 8 }}>{lead}</p>}
    </div>
  );
}

function SummaryLine({ label, text, tone = "dark" }) {
  const c = tone === "light" ? "var(--white)" : "var(--graphite-900)";
  const soft = tone === "light" ? "var(--text-on-blue-soft)" : "var(--text-body)";
  return (
    <div style={{ borderTop: `1px solid ${tone === "light" ? "var(--border-on-blue)" : "var(--border-subtle)"}`, paddingTop: 18, marginTop: 26 }}>
      <div className="display" style={{ fontSize: 14, letterSpacing: "0.05em", color: c, marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 16, color: soft, lineHeight: 1.5 }}>{text}</div>
    </div>
  );
}

/* ---------------- Utility bar ---------------- */
function UtilityBar() {
  return (
    <div className="ubar">
      <div className="wrap">
        <div className="u-left">Промышленные центробежные насосы · Казахстан и СНГ</div>
        <div className="u-right">
          <a className="ph" href="tel:+77089690158">+7 708 969 0158</a>
          <a href="mailto:volzarpump@gmail.com">volzarpump@gmail.com</a>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Header (with mega menus + mobile drawer) ---------------- */
const PRODUCT_LINKS = [
  { b: "Серия АКМ", eq: "совместима с Sulzer MCE", slug: "akm" },
  { b: "Серия ANS", eq: "совместима с Sulzer SNS", slug: "ans" },
  { b: "Серия AKW", eq: "совместима с Sulzer WPP", slug: "akw" },
  { b: "Серия AKE", eq: "совместима с Sulzer EPP", slug: "ake" },
  { b: "Серия DMBN", eq: "совместима с Sulzer MBN", slug: "dmbn" },
  { b: "Весь каталог и запчасти", span: "подбор под рабочую точку", catalog: true },
];
const INDUSTRY_LINKS = [
  { b: "Целлюлозно-бумажная", span: "волокно, химобработка, водоочистка", go: "industry" },
  { b: "Нефтехимия и химия", span: "агрессивные и токсичные среды", go: "chemical" },
  { b: "Энергетика", span: "питание котлов, конденсат, охлаждение", go: "energy" },
  { b: "ГОК и металлургия", span: "шламы, пульпа, абразив", go: "mining" },
  { b: "Водоснабжение и водоотведение", span: "подача, дренаж, канализация", go: "water" },
  { b: "Экология и переработка", span: "сточные и загрязнённые воды", go: "industry" },
  { b: "Пожаротушение", span: "насосные станции", go: "industry" },
  { b: "Пищевая и фарма", span: "CIP/SIP, гигиена", go: "industry" },
];

function Header() {
  const { go } = useNav();
  const [open, setOpen] = useState(null);
  const [drawer, setDrawer] = useState(false);

  const MenuItem = ({ id, label, children }) => (
    <li className={open === id ? "open" : ""} onMouseEnter={() => setOpen(id)} onMouseLeave={() => setOpen(null)}>
      <button>{label}<span className="caret" /></button>
      {children}
    </li>
  );

  return (
    <header className="site">
      <div className="wrap nav">
        <div onClick={() => go("home")} style={{ cursor: "pointer", display: "flex", alignItems: "center" }}>
          <Logo tone="blue" size={26} />
        </div>
        <ul className="menu">
          <MenuItem id="prod" label="Продукты">
            <div className="mega">
              <div className="mega-h">Серии насосов</div>
              {PRODUCT_LINKS.map((l, i) => (
                <a key={i} onClick={() => { setOpen(null); l.catalog ? go("catalog") : go("product", null, l.slug); }}>
                  <b>{l.b}</b>{l.eq ? <span className="eq">{l.eq}</span> : <span>{l.span}</span>}
                </a>
              ))}
            </div>
          </MenuItem>
          <MenuItem id="ind" label="Применения">
            <div className="mega">
              <div className="mega-h">Отрасли</div>
              {INDUSTRY_LINKS.map((l, i) => (
                <a key={i} onClick={() => { setOpen(null); go(l.go || "industry"); }}>
                  <b>{l.b}</b><span>{l.span}</span>
                </a>
              ))}
            </div>
          </MenuItem>
          <li><a onClick={() => go("about")}>О компании</a></li>
          <li><a onClick={() => go("service")}>Сервис</a></li>
          <li><a onClick={() => go("contacts")}>Контакты</a></li>
        </ul>
        <div className="nav-right">
          <a className="nav-phone" href="tel:+77089690158">+7 708 969 0158</a>
          <Button variant="primary" size="sm" onClick={() => go("home", "lead")}>Оставить заявку</Button>
          <button className="burger" aria-label="Меню" onClick={() => setDrawer(true)}><span /><span /><span /></button>
        </div>
      </div>

      <div className={"drawer" + (drawer ? " open" : "")} onClick={(e) => { if (e.target.classList.contains("drawer")) setDrawer(false); }}>
        <div className="drawer-panel">
          <button className="drawer-close" onClick={() => setDrawer(false)}>×</button>
          <div style={{ clear: "both" }} />
          <a className="d-link" onClick={() => { setDrawer(false); go("home"); }}>Главная</a>
          <a className="d-link" onClick={() => { setDrawer(false); go("catalog"); }}>Продукты</a>
          <a className="d-link" onClick={() => { setDrawer(false); go("industry"); }}>Применения</a>
          <a className="d-link" onClick={() => { setDrawer(false); go("about"); }}>О компании</a>
          <a className="d-link" onClick={() => { setDrawer(false); go("service"); }}>Сервис</a>
          <a className="d-link" onClick={() => { setDrawer(false); go("contacts"); }}>Контакты</a>
          <Button variant="primary" size="lg" onClick={() => { setDrawer(false); go("home", "lead"); }} style={{ width: "100%", marginTop: 18 }}>Оставить заявку</Button>
        </div>
      </div>
    </header>
  );
}

/* ---------------- Trust band (blue island full-width strip) ---------------- */
const TRUST = [
  ["18 000 м²", "площадь завода"],
  ["25 лет", "производства"],
  ["120+", "сотрудников"],
  ["API 610", "ISO 2858 / 5199"],
  ["100%", "взаимозаменяемость"],
  ["Актобе", "гарантия и сервис"],
];
function TrustBand() {
  return (
    <div className="wrap" style={{ marginTop: "calc(-1 * clamp(28px, 6vw, 64px))", position: "relative", zIndex: 2 }}>
      <BlueIsland arrow={false} radius="xl" padding="clamp(26px,4vw,40px)" className="reveal">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: "28px 18px" }} className="trust-grid">
          {TRUST.map(([v, l]) => (
            <div key={l} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <span className="display num" style={{ fontSize: "clamp(18px,1.6vw,24px)", color: "#fff", letterSpacing: "0.01em" }}>{v}</span>
              <span style={{ fontSize: 12.5, color: "var(--text-on-blue-soft)", lineHeight: 1.3 }}>{l}</span>
            </div>
          ))}
        </div>
      </BlueIsland>
    </div>
  );
}

/* ---------------- Page hero (interior pages) ---------------- */
function PageHero({ eyebrow, title, lead, cta, ctaSection }) {
  const { go } = useNav();
  return (
    <section className="sec-sand" style={{ padding: "48px 0 60px" }}>
      <div className="wrap">
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 className="display reveal" style={{ fontSize: "clamp(30px,4.2vw,52px)", maxWidth: "22ch", marginBottom: 18 }}>{title}</h1>
        <p className="lead reveal" style={{ maxWidth: "62ch" }}>{lead}</p>
        {cta && <div className="reveal" style={{ marginTop: 28 }}><Button variant="primary" size="lg" arrow onClick={() => go(null, ctaSection)}>{cta}</Button></div>}
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const { go } = useNav();
  const linkStyle = { display: "block", padding: "6px 0", fontSize: 14, color: "rgba(255,255,255,.7)", cursor: "pointer", transition: "color var(--dur-fast)" };
  const Col = ({ head, children }) => (
    <div>
      <h4 className="display" style={{ color: "#fff", fontSize: 13, letterSpacing: "0.1em", marginBottom: 14 }}>{head}</h4>
      {children}
    </div>
  );
  const FL = ({ children, onClick, href }) => (
    <a href={href} onClick={onClick} style={linkStyle}
       onMouseEnter={(e) => e.currentTarget.style.color = "#fff"} onMouseLeave={(e) => e.currentTarget.style.color = "rgba(255,255,255,.7)"}>{children}</a>
  );
  return (
    <footer style={{ background: "var(--graphite-900)", color: "rgba(255,255,255,.6)", padding: "56px 0 30px" }}>
      <div className="wrap">
        <div className="foot-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 32 }}>
          <div>
            <Logo tone="white" size={26} />
            <p style={{ marginTop: 16, fontSize: 14, maxWidth: "34ch", lineHeight: 1.55 }}>Инженерная альтернатива промышленным насосам Sulzer. Поставка, сервис и запчасти в Казахстане и СНГ.</p>
            <p style={{ marginTop: 14, fontSize: 12.5, color: "rgba(255,255,255,.4)" }}>ТОО «ISAN TRADE» · 2026</p>
          </div>
          <Col head="Продукты">
            <FL onClick={() => go("catalog")}>Каталог серий</FL>
            <FL onClick={() => go("product", null, "akm")}>Серия АКМ</FL>
            <FL onClick={() => go("catalog")}>Запчасти и ремкомплекты</FL>
          </Col>
          <Col head="Отрасли">
            <FL onClick={() => go("industry")}>Целлюлозно-бумажная</FL>
            <FL onClick={() => go("chemical")}>Нефтехимия и химия</FL>
            <FL onClick={() => go("energy")}>Энергетика</FL>
            <FL onClick={() => go("water")}>Водоснабжение</FL>
          </Col>
          <Col head="Контакты">
            <FL onClick={() => go("contacts")}>Страница контактов</FL>
            <FL href="tel:+77089690158">+7 708 969 0158</FL>
            <FL href="mailto:volzarpump@gmail.com">volzarpump@gmail.com</FL>
            <FL onClick={() => go("about")}>О компании</FL>
          </Col>
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,.1)", marginTop: 40, paddingTop: 22, display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap", fontSize: 12.5, color: "rgba(255,255,255,.4)" }}>
          <span>© 2026 VOLZAR · ТОО «ISAN TRADE»</span>
          <span style={{ maxWidth: "70ch" }}>Sulzer®, MCE, SNS, WPP, EPP, MBN — товарные знаки соответствующих владельцев. VOLZAR — независимый производитель совместимого оборудования и не аффилирован с Sulzer.</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- Lead form (reusable) ---------------- */
function LeadForm({ eyebrow, title, lead, fields = "full", okText, showContacts = true }) {
  const [sent, setSent] = useState(false);
  return (
    <section className="sec sec-sand" id="lead">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 48, alignItems: "start" }} data-formgrid>
        <div className="reveal">
          <Eyebrow>{eyebrow}</Eyebrow>
          <H2>{title}</H2>
          <p className="lead" style={{ marginTop: 14 }}>{lead}</p>
          {showContacts && (
            <div style={{ marginTop: 28, fontSize: 15, lineHeight: 2, color: "var(--text-body)" }}>
              <div style={{ fontWeight: 700, color: "var(--graphite-900)" }}>+7 708 969 0158</div>
              <div>volzarpump@gmail.com</div>
              <div>г. Актобе, ул. Газизы Жубановой, 39н</div>
            </div>
          )}
        </div>
        <Card tone="white" radius="xl" padding="clamp(24px,3vw,32px)" className="reveal">
          {sent ? (
            <div style={{ padding: "40px 8px", textAlign: "center" }}>
              <div className="display" style={{ fontSize: 22, color: "var(--blue-500)" }}>Заявка принята</div>
              <p style={{ color: "var(--text-body)", marginTop: 12 }}>{okText || "Свяжемся с вами в течение рабочего дня."}</p>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
              <Field label="Имя" placeholder="Как к вам обращаться" required />
              <Field label="Телефон" type="tel" placeholder="+7 ___ ___ __ __" required />
              {fields === "full" && <Field label="E-mail" type="email" placeholder="name@company.kz" />}
              {fields === "full" && <Field label="Модель Sulzer для подбора" placeholder="напр. MCE, SNS, WPP" />}
              {fields === "point" && <div style={{ gridColumn: "1 / -1" }}><Field label="Рабочая точка / модель" placeholder="подача, напор, среда или модель Sulzer" /></div>}
              <div style={{ gridColumn: "1 / -1" }}>
                <Field label="Сообщение" as="textarea" placeholder="Рабочая точка, среда, объём, сроки" />
              </div>
              <div style={{ gridColumn: "1 / -1" }}>
                <Button variant="primary" size="lg" arrow type="submit" onClick={() => {}} style={{ width: "100%" }}>Отправить заявку</Button>
              </div>
              <p style={{ gridColumn: "1 / -1", fontSize: 12, color: "var(--text-muted)", margin: 0 }}>Нажимая кнопку, вы соглашаетесь с политикой обработки персональных данных.</p>
            </form>
          )}
        </Card>
      </div>
    </section>
  );
}

Object.assign(window, {
  NavCtx, useNav, scrollToId, useReveal,
  Eyebrow, H2, H3, SectionHead, SummaryLine,
  UtilityBar, Header, TrustBand, PageHero, Footer, LeadForm,
  DS, Logo, BlueIsland, Button, Badge, Stat, Card, BulletList, ComparisonTable, Field,
});