/* global Icon, useScrollReveal */

function Contact() {
  const sectionRef = useScrollReveal();

  return (
    <section id="iletisim" className="section section--alt" ref={sectionRef}>
      <div className="container-wide">
        <div style={ctStyles.head} data-2col-head>
          <div className="scroll-rise" data-stag="0">
            <div className="eyebrow">Konum & İletişim</div>
            <h2 className="h-display h2" style={{ marginTop: 18, marginBottom: 0 }}>
              Sahrayı Cedit, Kadıköy —<br />
              <span className="orange-word">randevu ile</span> görüşüyoruz.
            </h2>
          </div>
          <p className="lede scroll-rise" data-stag="1" style={ctStyles.intro}>
            Her vakaya zaman ayırabilmek için tüm muayene ve operasyonlar randevu ile
            planlanır. En hızlı yanıt için WhatsApp önerilir.
          </p>
        </div>

        <div style={ctStyles.grid} data-contact-grid>
          {/* LEFT — Map */}
          <div className="scroll-rise" data-stag="0" style={ctStyles.mapWrap} data-map-sticky>
            <div style={ctStyles.map}>
              <iframe
                title="VDM Petdent — Google Haritalar"
                src="https://www.google.com/maps?q=Veteriner+Di%C5%9F+Merkezi+Petdent,+Osman+Nuri+Ergin+Sk.+No:9B,+Kad%C4%B1k%C3%B6y,+%C4%B0stanbul&z=16&output=embed"
                style={ctStyles.mapFrame}
                loading="lazy"
                allowFullScreen
                referrerPolicy="no-referrer-when-downgrade" />
              <a href="https://maps.app.goo.gl/8gnEmyXoZrLFRaF76"
              target="_blank" rel="noopener" style={ctStyles.mapCta}>
                Google Maps'te aç <Icon name="arrowUpRight" size={13} />
              </a>
            </div>
          </div>

          {/* RIGHT — info */}
          <div style={ctStyles.info}>
            <div className="scroll-rise" data-stag="1" style={ctStyles.block}>
              <div style={ctStyles.blockHead}>
                <Icon name="mapPin" size={16} style={{ color: "var(--pd-orange)" }} />
                <div style={ctStyles.blockLabel}>Adres</div>
              </div>
              <div style={ctStyles.blockBody}>
                Sahrayı Cedit, Osman Nuri Ergin Sk. No:9B<br />
                34744 Kadıköy / İstanbul
              </div>
            </div>

            <div className="scroll-rise" data-stag="2" style={ctStyles.block}>
              <div style={ctStyles.blockHead}>
                <Icon name="phone" size={16} style={{ color: "var(--pd-orange)" }} />
                <div style={ctStyles.blockLabel}>Telefon / WhatsApp</div>
              </div>
              <div style={ctStyles.blockBody}>
                <a href="tel:+905435486208" style={ctStyles.phoneLink}>+90 543 548 62 08</a>
              </div>
              <div style={ctStyles.actions}>
                <a href="https://wa.me/905435486208" target="_blank" rel="noopener" className="btn btn-primary btn-sm">
                  <Icon name="whatsapp" size={14} /> WhatsApp ile yaz
                </a>
                <a href="tel:+905435486208" className="btn btn-secondary btn-sm">
                  <Icon name="phone" size={14} /> Ara
                </a>
              </div>
            </div>

            <div className="scroll-rise" data-stag="3" style={ctStyles.block}>
              <div style={ctStyles.blockHead}>
                <Icon name="clock" size={16} style={{ color: "var(--pd-orange)" }} />
                <div style={ctStyles.blockLabel}>Çalışma saatleri</div>
              </div>
              <div style={ctStyles.hours}>
                <div style={ctStyles.dayRow}>
                  <span style={{ color: "var(--pd-charcoal)", fontWeight: 600 }}>Pazartesi – Cumartesi</span>
                  <span style={ctStyles.dayActive}>
                    <span style={ctStyles.greenDot} />
                    10:00 – 18:30
                  </span>
                </div>
                <div style={ctStyles.dayRow}>
                  <span style={{ color: "var(--pd-charcoal)", fontWeight: 600 }}>Pazar</span>
                  <span style={ctStyles.dayActive}>
                    <span style={ctStyles.greenDot} />
                    10:00 – 14:00
                  </span>
                </div>
              </div>
              <p style={ctStyles.placeholder}>
                Tatil ve özel günlerde değişiklik olabilir — WhatsApp'tan teyit önerilir.
              </p>
            </div>

            <div className="scroll-rise" data-stag="4" style={ctStyles.block}>
              <div style={ctStyles.blockHead}>
                <Icon name="instagram" size={16} style={{ color: "var(--pd-orange)" }} />
                <div style={ctStyles.blockLabel}>Instagram</div>
              </div>
              <div style={ctStyles.iglist}>
                <a href="https://www.instagram.com/vdmpetdent/" target="_blank" rel="noopener" style={ctStyles.iglink}>
                  @vdmpetdent <Icon name="arrowUpRight" size={12} />
                </a>
                <a href="https://www.instagram.com/vetdentistbatuhan/" target="_blank" rel="noopener" style={ctStyles.iglink}>
                  @vetdentistbatuhan <Icon name="arrowUpRight" size={12} />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

const ctStyles = {
  head: {
    display: "grid", gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
    gap: 56, alignItems: "end",
    marginBottom: 56
  },
  intro: { margin: 0, paddingBottom: 6, maxWidth: 480 },

  grid: {
    display: "grid", gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
    gap: 32
  },

  mapWrap: { position: "sticky", top: 100 },
  map: {
    position: "relative", overflow: "hidden",
    aspectRatio: "5 / 6",
    borderRadius: 8, border: "1px solid var(--pd-border-1)",
    background: "#E9EAEC"
  },
  mapFrame: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, display: "block" },
  mapCta: {
    position: "absolute", bottom: 18, right: 18,
    background: "var(--pd-charcoal)", color: "#fff",
    padding: "10px 14px", borderRadius: 6,
    fontSize: 12, fontWeight: 600,
    display: "inline-flex", alignItems: "center", gap: 6,
    boxShadow: "var(--pd-shadow-1)"
  },

  info: { display: "flex", flexDirection: "column", gap: 18 },
  block: {
    background: "#fff", border: "1px solid var(--pd-border-1)",
    borderRadius: 8, padding: "22px 24px"
  },
  blockHead: { display: "flex", alignItems: "center", gap: 10, marginBottom: 12 },
  blockLabel: {
    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
    fontWeight: 700, color: "var(--pd-charcoal-3)"
  },
  blockBody: {
    fontSize: 15, lineHeight: 1.55, color: "var(--pd-charcoal)"
  },
  phoneLink: {
    fontFamily: "var(--pd-font-display)",
    fontSize: 28, color: "var(--pd-charcoal)",
    letterSpacing: "-0.01em"
  },
  actions: { display: "flex", gap: 10, marginTop: 16, flexWrap: "wrap" },

  hours: { display: "flex", flexDirection: "column", gap: 8 },
  dayRow: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    fontSize: 13, color: "var(--pd-charcoal-2)",
    padding: "8px 0", borderBottom: "1px solid var(--pd-border-1)"
  },
  dayActive: {
    color: "var(--pd-charcoal)", fontWeight: 600,
    display: "inline-flex", alignItems: "center", gap: 8
  },
  dayDim: { color: "var(--pd-charcoal-3)", fontStyle: "normal", fontSize: 12 },
  greenDot: {
    width: 8, height: 8, borderRadius: "50%",
    background: "var(--pd-success)"
  },
  placeholder: {
    margin: "12px 0 0", fontSize: 11, color: "var(--pd-charcoal-3)",
    lineHeight: 1.5
  },

  iglist: { display: "flex", flexDirection: "column", gap: 6 },
  iglink: {
    display: "inline-flex", alignItems: "center", gap: 8,
    color: "var(--pd-charcoal)", fontSize: 14, fontWeight: 500
  }
};

window.Contact = Contact;