// ContactsPageAlt.jsx — "Контакты" page (copy from Gold Orient.fig)

const altContactsStyles = {
  // Hero (small)
  hero: {
    position: "relative",
    background: "var(--gol-navy-950)",
    color: "#fff",
    overflow: "hidden",
    paddingTop: 80,
    paddingBottom: 64,
    backgroundImage: "radial-gradient(ellipse 70% 60% at 80% 20%, rgba(31,77,128,0.45) 0%, transparent 55%), linear-gradient(180deg, #0a1a32 0%, #050f1f 100%)",
  },
  heroMap: { position: "absolute", inset: 0, opacity: 0.25 },
  heroVignette: { position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(5,15,31,0.3) 0%, transparent 50%, rgba(5,15,31,0.6) 100%)" },
  heroEyebrow: {
    display: "inline-flex", alignItems: "center", gap: 10,
    fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 11,
    letterSpacing: "0.22em", textTransform: "uppercase",
    color: "var(--gol-gold-400)",
    marginBottom: 18,
  },
  heroEyebrowDot: { width: 6, height: 6, background: "var(--gol-gold-500)", borderRadius: "50%", boxShadow: "0 0 12px rgba(201,166,65,0.9)" },
  heroTitle: {
    fontFamily: "var(--font-display)", fontWeight: 700,
    fontSize: "clamp(40px, 5.5vw, 76px)",
    lineHeight: 0.98, letterSpacing: "-0.02em",
    color: "#fff", margin: 0,
  },
  heroLead: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 17, lineHeight: 1.65, color: "rgba(255,255,255,0.72)", marginTop: 20, maxWidth: 640 },

  // Departments
  dept: { background: "#fff" },
  deptHead: { display: "flex", flexDirection: "column", gap: 14, marginBottom: 36, maxWidth: 720 },
  deptGrid: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 },
  deptGridMobile: { gridTemplateColumns: "1fr", gap: 12 },
  deptCard: {
    background: "#fff", border: "1px solid var(--border)", borderRadius: 16,
    padding: 24, display: "flex", flexDirection: "column", gap: 12,
    transition: "border-color 140ms, box-shadow 140ms",
  },
  deptTop: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 14 },
  deptCopy: { display: "flex", flexDirection: "column", gap: 4 },
  deptName: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, color: "var(--fg)", textTransform: "uppercase", letterSpacing: 0 },
  deptRoles: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 13, lineHeight: 1.5, color: "var(--fg-muted)" },
  deptIcon: { width: 40, height: 40, borderRadius: 10, background: "var(--gol-navy-50)", color: "var(--gol-navy-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
  contactList: { display: "flex", flexDirection: "column", gap: 8, paddingTop: 12, borderTop: "1px dashed var(--border)" },
  contactItem: { display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg)" },
  contactIcon: { color: "var(--gol-gold-700)" },

  // Warehouses
  wh: { background: "var(--bg-subtle)" },
  whHead: { display: "flex", flexDirection: "column", gap: 14, marginBottom: 32, maxWidth: 720 },
  whGrid: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 },
  whGridMobile: { gridTemplateColumns: "1fr", gap: 12 },
  whCard: {
    background: "#fff", border: "1px solid var(--border)", borderRadius: 18, overflow: "hidden",
    display: "grid", gridTemplateColumns: "1fr 1.4fr",
    minHeight: 220,
  },
  whCardMobile: { gridTemplateColumns: "1fr", minHeight: 0 },
  whVisual: {
    background: "linear-gradient(135deg, var(--gol-navy-800), var(--gol-navy-950))",
    color: "#fff", padding: 22,
    display: "flex", flexDirection: "column", justifyContent: "space-between",
    position: "relative",
  },
  whCode: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gol-gold-400)", letterSpacing: "0.1em" },
  whCity: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, color: "#fff", lineHeight: 1, letterSpacing: "-0.01em" },
  whInfo: { padding: 22, display: "flex", flexDirection: "column", gap: 6 },
  whTitle: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 13, color: "var(--fg-subtle)", textTransform: "uppercase", letterSpacing: "0.12em" },
  whAddr: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, lineHeight: 1.55, color: "var(--fg)" },
  whMeta: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)", paddingTop: 8, borderTop: "1px dashed var(--border)", marginTop: 4 },
};

function ContactsPageAlt() {
  const isMobile = window.useMobile ? window.useMobile(900) : false;
  const [lang] = window.useLang();
  const departments = [
    {
      name: t("Болатхан Орнальдин", "Болатхан Орнальдин"),
      roles: t("Консультация по любым вопросам", "Кез келген сұрақтар бойынша кеңес"),
      phone: "+7 708 909 88 10",
      email: "info@goldorient.kz",
      icon: "phone",
    },
  ];

  const warehouses = [
    {
      city: t("Гуанчжоу", "Гуанчжоу"),
      code: "CN-CAN",
      title: t("Партнёрский склад · юг", "Әріптес қоймасы · оңтүстік"),
      addr: "Baiyun District, Yong'an Lu 28, 510440",
      meta: t("12 800 м² · приём 24/7", "12 800 м² · қабылдау 24/7"),
    },
    {
      city: t("Шэньчжэнь", "Шэньчжэнь"),
      code: "CN-SZX",
      title: t("Электроника · авиаконс.", "Электроника · авиаконс."),
      addr: "Bao'an District, Fuyong Logistics Park, B-4",
      meta: "6 400 м² · CN, EN, RU",
    },
    {
      city: t("Иу", "Иу"),
      code: "CN-YIW",
      title: t("Сборка LTL", "LTL жинақ"),
      addr: "Yiwu International Trade Mart, North Gate, 16",
      meta: t("3 200 м² · отгрузки пн-сб", "3 200 м² · жөнелту дс-сб"),
    },
    {
      city: t("Шанхай", "Шанхай"),
      code: "CN-SHA",
      title: t("Морской фрахт", "Теңіз фрахты"),
      addr: "Pudong, Waigaoqiao Free Trade Zone, Bay 22",
      meta: "8 100 м² · FCL · LCL",
    },
  ];

  return (
    <main>
      {/* HERO */}
      <section className="on-dark" style={altContactsStyles.hero}>
        <div style={altContactsStyles.heroMap}><RouteMap animate={false} showLegend={false} /></div>
        <div style={altContactsStyles.heroVignette} />
        <div className="container" style={{ position: "relative" }}>
          <span style={altContactsStyles.heroEyebrow}>
            <span style={altContactsStyles.heroEyebrowDot} />
            {t("КОНТАКТЫ · ОТДЕЛЫ И СКЛАДЫ", "БАЙЛАНЫС · БӨЛІМШЕЛЕР МЕН ҚОЙМАЛАР")}
          </span>
          <h1 style={altContactsStyles.heroTitle}>{t("Свяжитесь с командой", "Командамен байланысыңыз")}</h1>
          <p style={altContactsStyles.heroLead}>
            {t("Звоните в нужный отдел напрямую или оставьте заявку — менеджер свяжется в течение часа в рабочее время.", "Қажетті бөлімге тікелей қоңырау шалыңыз немесе өтінім қалдырыңыз — жұмыс уақытында менеджер бір сағат ішінде хабарласады.")}
          </p>
        </div>
      </section>

      {/* DEPARTMENTS */}
      <section className="section" style={altContactsStyles.dept}>
        <div className="container">
          <div style={altContactsStyles.deptHead}>
            <span className="eyebrow">{t("ОТДЕЛЫ", "БӨЛІМШЕЛЕР")}</span>
            <h2 className="h-section">{t("Контакты по департаментам", "Департаменттер бойынша байланыс")}</h2>
          </div>
          <div style={{ ...altContactsStyles.deptGrid, ...(isMobile ? altContactsStyles.deptGridMobile : {}) }}>
            {departments.map((d) => (
              <div key={d.name} style={altContactsStyles.deptCard}>
                <div style={altContactsStyles.deptTop}>
                  <div style={altContactsStyles.deptCopy}>
                    <div style={altContactsStyles.deptName}>{d.name}</div>
                    <div style={altContactsStyles.deptRoles}>{d.roles}</div>
                  </div>
                  <span style={altContactsStyles.deptIcon}><Icon name={d.icon} size={18} /></span>
                </div>
                <div style={altContactsStyles.contactList}>
                  <span style={altContactsStyles.contactItem}>
                    <span style={altContactsStyles.contactIcon}><Icon name="phone" size={14} strokeWidth={2} /></span>
                    {d.phone}
                  </span>
                  <span style={altContactsStyles.contactItem}>
                    <span style={altContactsStyles.contactIcon}><Icon name="mail" size={14} strokeWidth={2} /></span>
                    {d.email}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaPanelAlt />
    </main>
  );
}

window.ContactsPageAlt = ContactsPageAlt;