const Contacts = () => (
  <section className="section shell" id="contacts">
    <div className="section-head">
      <div>
        <div className="overline">Контакты</div>
        <h2>Найдите меня<br/>в <em style={{fontFamily:"var(--serif)",fontStyle:"italic",color:"var(--olive)"}}>тишине центра</em>.</h2>
      </div>
      <p>Частный кабинет. Приду открыть дверь за 5 минут до вашего времени.</p>
    </div>

    <div className="contacts">
      <div className="contacts-info">
        <a href="tel:+79991234567" className="contact-card">
          <div className="ic"><Icon name="phone" size={18}/></div>
          <div>
            <div className="k">Телефон</div>
            <div className="v">+7 (999) 123-45-67</div>
          </div>
        </a>
        <a href="#" className="contact-card">
          <div className="ic"><Icon name="wa" size={18}/></div>
          <div>
            <div className="k">WhatsApp / Telegram</div>
            <div className="v">@anna.kovaleva.nails</div>
          </div>
        </a>
        <a href="#" className="contact-card">
          <div className="ic"><Icon name="ig" size={18}/></div>
          <div>
            <div className="k">Instagram / ВК</div>
            <div className="v">12.4k подписчиков</div>
          </div>
        </a>
        <a href="#" className="contact-card">
          <div className="ic"><Icon name="pin" size={18}/></div>
          <div>
            <div className="k">Адрес</div>
            <div className="v">Москва, 1-я Тверская-Ямская, 11</div>
          </div>
        </a>
        <a href="#" className="contact-card">
          <div className="ic"><Icon name="clock" size={18}/></div>
          <div>
            <div className="k">График</div>
            <div className="v">Пн–Сб · 10:00 — 21:00</div>
          </div>
        </a>
      </div>

      <div className="map-card">
        <iframe
          title="Карта — 1-я Тверская-Ямская, 11"
          src="https://yandex.ru/map-widget/v1/?ll=37.594600%2C55.770600&z=17&pt=37.594600%2C55.770600,pm2rdl&l=map&mode=search&text=Москва%2C+1-я+Тверская-Ямская%2C+11"
          width="100%"
          height="100%"
          frameBorder="0"
          loading="lazy"
          allowFullScreen
          style={{
            position:"absolute", inset:0,
            width:"100%", height:"100%",
            border:0, display:"block",
            filter:"saturate(.95)"
          }}
        />
        <a
          href="https://yandex.ru/maps/?ll=37.5946%2C55.7706&z=17&pt=37.5946%2C55.7706"
          target="_blank" rel="noreferrer"
          style={{
            position:"absolute", right:14, bottom:14, zIndex:2,
            background:"var(--paper)", color:"var(--ink)",
            padding:"10px 16px", borderRadius:"var(--r-pill)",
            fontSize:13, textDecoration:"none",
            border:"1px solid var(--line)",
            boxShadow:"0 8px 24px -8px rgba(28,26,21,.25)"
          }}
        >Открыть в Яндекс.Картах →</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { Contacts });