/* ─────────────────────────────────────────────────────────────────
   CorpSol — Contacts page sections
   ───────────────────────────────────────────────────────────────── */

function ContactsHero() {
  const t = useT();
  return (
    <section className="cs-section cs-c-hero">
      <div className="cs-container cs-container--wide">
        <span className="cs-eyebrow cs-reveal">{t('c.hero.eyebrow')}</span>
        <h1 className="cs-h1 cs-reveal" style={{ marginTop: 24, maxWidth: '20ch' }}>{t('c.hero.h1')}</h1>
        <p className="cs-lead cs-reveal" style={{ marginTop: 24, maxWidth: '54ch' }}>{t('c.hero.sub')}</p>
      </div>
      <style>{`
        .cs-c-hero { padding-top: 60px; padding-bottom: 40px; }
      `}</style>
    </section>
  );
}

// ── CHANNEL CARDS ──────────────────────────────────────────────────────────
const CHAN_ICONS = {
  office: <g><path d="M5 28V12L16 5l11 7v16"/><rect x="13" y="18" width="6" height="10"/></g>,
  phone:  <g><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z"/></g>,
  email:  <g><rect x="3" y="6" width="26" height="20" rx="2"/><path d="M3 8l13 9 13-9"/></g>,
  tg:     <g><path d="M28 4L3 14.5c-.9.4-.9.9 0 1.2l6.4 2 2.5 7.7c.3.8.8.8 1.2.4l3.6-3.2 7 5.2c1.3.8 2.2.4 2.5-1.2L30 5.6c.4-1.8-.7-2.6-2-2.1z"/></g>,
  wa:     <g><path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.4L3 29l6.8-1.7c1.8 1 3.9 1.7 6.2 1.7 7.2 0 13-5.8 13-13S23.2 3 16 3z"/><path d="M22 19c-.3.8-1.8 1.5-2.5 1.7-.6.1-1.4.1-2.3-.1-.5-.1-1.2-.4-2.2-.8-3.9-1.6-6.4-5.6-6.6-5.9-.2-.3-1.5-2-1.5-3.9 0-1.9.9-2.8 1.3-3.2.3-.4.7-.5.9-.5h.7c.2 0 .5 0 .8.6l1 2.7c.1.3.2.5-.1.8-.1.2-.2.4-.5.6l-.4.4c-.2.2-.3.4-.1.7.1.3.7 1.3 1.7 2.2 1.2 1 2.2 1.4 2.4 1.6.3.1.5.1.6-.1.2-.3.7-.9.9-1.2.2-.3.4-.2.7-.1.3.1 1.7.8 2 .9.3.1.5.2.6.4.2.2.2.7-.1 1.5z" fill="currentColor"/></g>,
  hr:     <g><circle cx="16" cy="11" r="5"/><path d="M4 28c0-6 5-10 12-10s12 4 12 10"/></g>,
};

function ChannelCard({ icon, t, d, cta, href, color }) {
  return (
    <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel={href.startsWith('http') ? 'noopener' : undefined}
       className="cs-chan cs-reveal">
      <div className="cs-chan-icon" style={{ background: color }}>
        <svg width="22" height="22" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          {icon}
        </svg>
      </div>
      <div className="cs-chan-body">
        <div className="cs-chan-t">{t}</div>
        <div className="cs-chan-d">{d}</div>
      </div>
      <div className="cs-chan-cta">
        {cta}
        <svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </div>
    </a>
  );
}

function ChannelsGrid() {
  const t = useT();
  return (
    <section className="cs-section" style={{ paddingTop: 40 }}>
      <div className="cs-container cs-container--wide">
        <div className="cs-chans">
          <ChannelCard icon={CHAN_ICONS.office} t={t('c.cards.office.t')} d={t('c.cards.office.d')} cta={t('c.cards.office.cta')}
                       href="https://2gis.kz/taraz/search/%D0%91%D0%BE%D0%BB%D1%82%D0%B8%D1%80%D0%B8%D0%BA%20%D1%88%D0%B5%D1%88%D0%B5%D0%BD%D0%B0%207%D0%B0" color="#0A1F44" />
          <ChannelCard icon={CHAN_ICONS.phone}  t={t('c.cards.phone.t')}  d={t('c.cards.phone.d')}  cta={t('c.cards.phone.cta')}
                       href="tel:+77085100833"   color="#2563EB" />
          <ChannelCard icon={CHAN_ICONS.email}  t={t('c.cards.email.t')}  d={t('c.cards.email.d')}  cta={t('c.cards.email.cta')}
                       href="mailto:info@corpsol.kz" color="#1d4ed8" />
          <ChannelCard icon={CHAN_ICONS.tg}     t={t('c.cards.tg.t')}     d={t('c.cards.tg.d')}     cta={t('c.cards.tg.cta')}
                       href="https://t.me/iliyaszhakipbekov" color="#229ED9" />
          <ChannelCard icon={CHAN_ICONS.wa}     t={t('c.cards.wa.t')}     d={t('c.cards.wa.d')}     cta={t('c.cards.wa.cta')}
                       href="https://wa.me/77085100833" color="#25D366" />
          <ChannelCard icon={CHAN_ICONS.hr}     t={t('c.cards.hr.t')}     d={t('c.cards.hr.d')}     cta={t('c.cards.hr.cta')}
                       href="https://t.me/corpsol_hr" color="#16a34a" />
        </div>
      </div>
      <style>{`
        .cs-chans {
          display: grid; gap: 12px;
          grid-template-columns: repeat(3, 1fr);
        }
        @media (max-width: 900px) { .cs-chans { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 540px) { .cs-chans { grid-template-columns: 1fr; } }
        .cs-chan {
          padding: 24px;
          background: var(--c-bg-soft);
          border-radius: var(--r-lg);
          display: flex; flex-direction: column; gap: 14px;
          color: var(--c-ink);
          transition: background 0.2s var(--ease), transform 0.2s var(--ease);
          min-height: 180px;
        }
        @media (max-width: 540px) { .cs-chan { min-height: auto; padding: 20px; } }
        [data-radius="sharp"] .cs-chan { border-radius: 6px; }
        [data-radius="pill"] .cs-chan { border-radius: 24px; }
        .cs-chan:hover { background: var(--c-bg); box-shadow: var(--shadow-md); transform: translateY(-3px); }
        .cs-chan-icon {
          width: 44px; height: 44px; border-radius: 12px;
          display: inline-flex; align-items: center; justify-content: center;
          color: #fff;
        }
        [data-radius="sharp"] .cs-chan-icon { border-radius: 4px; }
        [data-radius="pill"] .cs-chan-icon { border-radius: 999px; }
        .cs-chan-t { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
        .cs-chan-d { color: var(--c-mute); font-size: 14px; margin-top: 4px; }
        .cs-chan-cta {
          margin-top: auto;
          display: inline-flex; align-items: center; gap: 6px;
          color: var(--c-accent); font-weight: 600; font-size: 14px;
        }
        .cs-chan:hover .cs-chan-cta { gap: 10px; }
      `}</style>
    </section>
  );
}

// ── MAP + REQUISITES ───────────────────────────────────────────────────────
function MapAndReq() {
  const t = useT();
  return (
    <section className="cs-section">
      <div className="cs-container cs-container--wide">
        <div className="cs-map-grid">
          {/* faux map */}
          <div className="cs-map cs-reveal">
            <div className="cs-map-canvas">
              <svg viewBox="0 0 600 380" preserveAspectRatio="xMidYMid slice">
                {/* roads grid */}
                <defs>
                  <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
                    <circle cx="1.5" cy="1.5" r="1" fill="rgba(10,31,68,0.10)" />
                  </pattern>
                </defs>
                <rect width="600" height="380" fill="#eef1f7" />
                <rect width="600" height="380" fill="url(#dots)" />
                {/* roads */}
                <g stroke="#fff" strokeWidth="22" strokeLinecap="round">
                  <line x1="-20" y1="120" x2="620" y2="160" />
                  <line x1="-20" y1="260" x2="620" y2="280" />
                  <line x1="200" y1="-20" x2="240" y2="400" />
                  <line x1="440" y1="-20" x2="460" y2="400" />
                </g>
                <g stroke="#fff" strokeWidth="10" strokeLinecap="round">
                  <line x1="0" y1="60" x2="600" y2="80" />
                  <line x1="0" y1="200" x2="600" y2="220" />
                  <line x1="0" y1="330" x2="600" y2="340" />
                  <line x1="100" y1="0" x2="120" y2="380" />
                  <line x1="320" y1="0" x2="340" y2="380" />
                  <line x1="540" y1="0" x2="560" y2="380" />
                </g>
                {/* river */}
                <path d="M0 100 Q150 60 300 110 T600 90 L600 130 Q450 100 300 150 T0 140 Z"
                      fill="rgba(37, 99, 235, 0.12)" />
                {/* blocks */}
                {Array.from({ length: 18 }).map((_, i) => {
                  const x = 30 + (i % 6) * 100 + (i % 2) * 16;
                  const y = 30 + Math.floor(i / 6) * 110;
                  const w = 60 + (i % 3) * 12;
                  const h = 50 + ((i + 1) % 3) * 16;
                  return <rect key={i} x={x} y={y} width={w} height={h} rx="6" fill="rgba(10,31,68,0.06)" />;
                })}
                {/* pin */}
                <g transform="translate(310 190)">
                  <circle r="40" fill="rgba(37,99,235,0.15)">
                    <animate attributeName="r" values="20;48;20" dur="2.4s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.5;0;0.5" dur="2.4s" repeatCount="indefinite" />
                  </circle>
                  <path d="M0 -30 C-14 -30 -22 -18 -22 -8 C-22 8 0 26 0 26 C0 26 22 8 22 -8 C22 -18 14 -30 0 -30 Z"
                        fill="#2563EB" />
                  <circle r="6" cy="-10" fill="#fff" />
                </g>
              </svg>
              <div className="cs-map-tip">
                <div className="cs-map-tip-t">CorpSol · офис</div>
                <div className="cs-map-tip-d">ул. Болтирик шешена, 7а · Тараз</div>
                <a className="cs-map-tip-cta" href="https://2gis.kz/taraz/search/%D0%91%D0%BE%D0%BB%D1%82%D0%B8%D1%80%D0%B8%D0%BA%20%D1%88%D0%B5%D1%88%D0%B5%D0%BD%D0%B0%207%D0%B0" target="_blank" rel="noopener">
                  Построить маршрут →
                </a>
              </div>
            </div>
            <div className="cs-map-foot">
              <div>
                <div className="cs-map-h">{t('c.map.t')}</div>
                <div className="cs-mute" style={{ fontSize: 13.5, marginTop: 4 }}>{t('c.map.d')}</div>
              </div>
              <a className="cs-btn cs-btn--ghost cs-btn--sm" href="https://2gis.kz/taraz/search/%D0%91%D0%BE%D0%BB%D1%82%D0%B8%D1%80%D0%B8%D0%BA%20%D1%88%D0%B5%D1%88%D0%B5%D0%BD%D0%B0%207%D0%B0" target="_blank" rel="noopener">2GIS</a>
            </div>
          </div>

          {/* requisites */}
          <div className="cs-req cs-reveal">
            <h2 className="cs-h2" style={{ fontSize: 'clamp(28px, 3vw, 40px)' }}>{t('c.req.h2')}</h2>
            <dl className="cs-req-list">
              {[1, 2, 3, 4, 5, 6].map((i) => (
                <div key={i} className="cs-req-row">
                  <span className="cs-req-i">0{i}</span>
                  <span>{t(`c.req.${i}`)}</span>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
      <style>{`
        .cs-map-grid { display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr; align-items: start; }
        @media (max-width: 1000px) { .cs-map-grid { grid-template-columns: 1fr; } }

        .cs-map { display: flex; flex-direction: column; gap: 16px; }
        .cs-map-canvas {
          position: relative;
          background: var(--c-bg-soft);
          border-radius: var(--r-lg);
          overflow: hidden;
          aspect-ratio: 16 / 10;
        }
        [data-radius="sharp"] .cs-map-canvas { border-radius: 6px; }
        [data-radius="pill"] .cs-map-canvas { border-radius: 28px; }
        .cs-map-canvas svg { width: 100%; height: 100%; display: block; }
        .cs-map-tip {
          position: absolute; top: 16px; left: 16px;
          max-width: min(260px, calc(100% - 32px));
          background: var(--c-bg); border-radius: var(--r-md);
          padding: 14px 18px;
          box-shadow: var(--shadow-md);
        }
        [data-radius="sharp"] .cs-map-tip { border-radius: 4px; }
        .cs-map-tip-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.015em; }
        .cs-map-tip-d { font-size: 13px; color: var(--c-mute-2); margin-top: 4px; }
        .cs-map-tip-cta { display: inline-block; margin-top: 12px; color: var(--c-accent); font-weight: 600; font-size: 13.5px; }
        .cs-map-foot {
          display: flex; align-items: center; justify-content: space-between; gap: 16px;
          padding: 4px 4px 0;
        }
        .cs-map-h { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }

        .cs-req { padding: 32px; background: var(--c-bg-soft); border-radius: var(--r-lg); }
        [data-radius="sharp"] .cs-req { border-radius: 6px; }
        .cs-req-list { margin-top: 24px; display: flex; flex-direction: column; gap: 0; }
        .cs-req-row {
          display: flex; align-items: flex-start; gap: 16px;
          padding: 16px 0;
          border-bottom: 1px solid var(--c-line);
          font-size: 14.5px; color: var(--c-mute-2); line-height: 1.4;
        }
        .cs-req-row:last-child { border-bottom: 0; }
        .cs-req-i { color: var(--c-accent); font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; flex-shrink: 0; padding-top: 2px; }
      `}</style>
    </section>
  );
}

// ── INLINE FORM ────────────────────────────────────────────────────────────
function ContactsForm({ onOpenModal }) {
  const t = useT();
  return (
    <section className="cs-section">
      <div className="cs-container cs-container--wide">
        <div className="cs-cform cs-reveal">
          <div className="cs-cform-l">
            <h2 className="cs-h2" style={{ color: 'var(--c-bg)', maxWidth: '20ch' }}>{t('c.form.h2')}</h2>
            <p className="cs-mute" style={{ marginTop: 16, color: 'rgba(255,255,255,0.7)', maxWidth: '40ch' }}>{t('cta.sub')}</p>
          </div>
          <button className="cs-btn cs-btn--primary cs-btn--lg" onClick={onOpenModal} style={{ height: 64, padding: '0 32px' }}>
            {t('nav.cp')}
            <svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 8h12M9 3l5 5-5 5" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
      <style>{`
        .cs-cform {
          padding: 56px 56px;
          background: var(--c-ink);
          color: var(--c-bg);
          border-radius: var(--r-xl);
          display: flex; align-items: center; justify-content: space-between; gap: 40px;
          flex-wrap: wrap;
        }
        [data-radius="sharp"] .cs-cform { border-radius: 8px; }
        @media (max-width: 700px) { .cs-cform { padding: 36px 28px; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { ContactsHero, ChannelsGrid, MapAndReq, ContactsForm });
