/* VOLZAR — Контакты */
const CONTACT_CARDS = [
  ["Телефон", "+7 708 969 0158", "Звонки и WhatsApp в рабочее время", "tel:+77089690158"],
  ["E-mail", "volzarpump@gmail.com", "Заявки, подбор и коммерческие предложения", "mailto:volzarpump@gmail.com"],
  ["Адрес", "г. Актобе, ул. Газизы Жубановой, 39н", "Офис, склад ЗИП и сервисная база", null],
  ["Режим работы", "Пн–Пт · 09:00–18:00", "Сб–Вс — по предварительной договорённости", null],
];

const REQUISITES = [
  ["Юридическое лицо", "ТОО «ISAN TRADE»"],
  ["Бренд", "VOLZAR — промышленные насосы"],
  ["Регион поставок", "Казахстан и страны СНГ"],
  ["Сайт", "www.volzar.kz"],
];

function ContactsPage() {
  const { go } = useNav();
  return (
    <div>
      <div className="wrap"><div className="crumbs"><a onClick={() => go("home")}>Главная</a><span className="sep">/</span>Контакты</div></div>

      <PageHero eyebrow="Контакты"
        title="Свяжитесь с нами"
        lead="Подберём насос под рабочую точку, рассчитаем срок изготовления и условия поставки. Отвечаем в течение рабочего дня — по телефону, почте или через форму заявки."
        cta="Оставить заявку" ctaSection="lead" />

      {/* Контактные карточки */}
      <section className="sec sec-white">
        <div className="wrap">
          <div className="grid-4">
            {CONTACT_CARDS.map(([label, value, note, href]) => {
              const inner = (
                <React.Fragment>
                  <div className="display num" style={{ fontSize: 12.5, color: "var(--blue-500)", letterSpacing: "0.06em", textTransform: "uppercase" }}>{label}</div>
                  <div style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 18, color: "var(--graphite-900)", marginTop: 12, lineHeight: 1.35 }}>{value}</div>
                  <div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 10, lineHeight: 1.5 }}>{note}</div>
                </React.Fragment>
              );
              return href ? (
                <a key={label} href={href} className="reveal hovercard" style={{ display: "block", background: "var(--white)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: "24px 22px", minHeight: 160 }}>{inner}</a>
              ) : (
                <Card key={label} tone="white" radius="lg" padding="24px 22px" className="reveal" style={{ minHeight: 160 }}>{inner}</Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* Реквизиты + карта */}
      <section className="sec sec-sand" style={{ paddingTop: 0 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "0.82fr 1.18fr", gap: 40, alignItems: "stretch" }} data-fac>
          <div className="reveal">
            <Eyebrow>Реквизиты</Eyebrow>
            <H2>Данные компании</H2>
            <div style={{ marginTop: 20, borderTop: "1px solid var(--border-subtle)" }}>
              {REQUISITES.map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 20, padding: "16px 0", borderBottom: "1px solid var(--border-subtle)" }}>
                  <span style={{ fontSize: 14, color: "var(--text-muted)" }}>{k}</span>
                  <span style={{ fontSize: 14.5, fontWeight: 600, color: "var(--graphite-900)", textAlign: "right" }}>{v}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 26, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Button variant="primary" arrow onClick={() => go(null, "lead")}>Оставить заявку</Button>
              <Button variant="secondary" onClick={() => go("service")}>Заказать сервис</Button>
            </div>
          </div>
          <image-slot id="contacts-map" style={{ width: "100%", minHeight: "clamp(280px,32vw,400px)", borderRadius: "var(--radius-xl)" }}
            shape="rounded" radius="20" placeholder="Карта · г. Актобе, ул. Газизы Жубановой, 39н"></image-slot>
        </div>
      </section>

      <LeadForm eyebrow="Заявка" title="Напишите нам"
        lead="Укажите модель Sulzer или рабочие параметры — пришлём подбор, срок изготовления и условия поставки."
        fields="full" />
    </div>
  );
}
window.ContactsPage = ContactsPage;