/* global Icon, useScrollReveal */

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

  return (
    <section id="hekim" className="section section--dark" ref={sectionRef} style={{ padding: "120px 0" }}>
      <div className="container-wide">
        <div style={bsStyles.grid} data-batuhan-grid>
          {/* Photo column */}
          <div className="scroll-rise" data-stag="0" style={bsStyles.photoCol}>
            <div style={bsStyles.photo}>
              <img src={window.A("assets/batuhan-strip-portrait.jpg")}
                   alt="Veteriner Hekim Batuhan Elifoğlu"
                   style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <div style={bsStyles.imeta}>
              <span style={{ width: 24, height: 1, background: "var(--pd-orange)" }} />
              <span>İstanbul Üniversitesi · 2018</span>
            </div>
          </div>

          {/* Copy column */}
          <div style={bsStyles.copy}>
            <div className="eyebrow scroll-rise" data-stag="0" style={{ color: "var(--pd-orange)" }}>
              Veteriner Hekim Batuhan Elifoğlu
            </div>
            <h2 className="h-display h2 scroll-rise" data-stag="1" style={bsStyles.h2}>
              Veteriner diş hekimliğine odaklanan<br/>
              <span className="orange-word">bir klinik pratiği.</span>
            </h2>
            <p className="lede scroll-rise" data-stag="2" style={bsStyles.lede}>
              Veteriner Hekim Batuhan Elifoğlu, İstanbul Üniversitesi Veteriner
              Fakültesi'nden 2018 yılında mezun oldu. Mesleğinin ilk yıllarında
              pratisyen hekimlik yaptıktan sonra, 2021'de genel veteriner
              hekimlik alanında kendi kliniğini açtı; ardından ağız ve diş
              cerrahisine yoğunlaşarak gerekli eğitim ve sertifikasyon
              programlarına katıldı.
              <br /><br />
              2025 yılında Veteriner Diş Merkezi — Petdent'i kurarak yalnızca
              ağız-diş sağlığı odağında çalışmaya başladı.
            </p>

            <div className="scroll-rise" data-stag="3" style={bsStyles.badges} data-batuhan-badges>
              <div style={bsStyles.badge}>
                <div style={bsStyles.badgeIcon}><Icon name="tooth" size={16} style={{ color: "var(--pd-orange)" }} /></div>
                <div>
                  <div style={bsStyles.badgeTitle}>Veteriner diş hekimliği odağı</div>
                </div>
              </div>
              <div style={bsStyles.badge}>
                <div style={bsStyles.badgeIcon}><Icon name="book" size={16} style={{ color: "var(--pd-orange)" }} /></div>
                <div>
                  <div style={bsStyles.badgeTitle}>Yurt içi ve yurt dışı eğitim programları</div>
                </div>
              </div>
              <div style={bsStyles.badge}>
                <div style={bsStyles.badgeIcon}><Icon name="scalpel" size={16} style={{ color: "var(--pd-orange)" }} /></div>
                <div>
                  <div style={bsStyles.badgeTitle}>Sevkli ve ileri vakalar</div>
                </div>
              </div>
            </div>

            <div className="scroll-rise" data-stag="4" style={bsStyles.actions}>
              <a href="Hakkimizda.html" className="btn btn-on-dark">
                Tam özgeçmiş <Icon name="arrowRight" size={14} />
              </a>
              <a href="https://www.instagram.com/vetdentistbatuhan/" target="_blank" rel="noopener" style={bsStyles.iglink}>
                <Icon name="instagram" size={15} /> @vetdentistbatuhan
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const bsStyles = {
  grid: {
    display: "grid",
    gridTemplateColumns: "minmax(0, 0.85fr) minmax(0, 1.15fr)",
    gap: 80, alignItems: "center",
  },
  photoCol: { display: "flex", flexDirection: "column", gap: 14 },
  photo: {
    aspectRatio: "4 / 5",
    borderRadius: 8,
    border: "1px solid rgba(255,255,255,0.08)",
    overflow: "hidden",
  },
  imeta: {
    fontSize: 11, color: "rgba(255,255,255,0.55)",
    letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600,
    display: "flex", alignItems: "center", gap: 12,
  },

  copy: { display: "flex", flexDirection: "column", gap: 18 },
  h2: { color: "#fff", margin: 0, marginTop: 12 },
  lede: { color: "rgba(255,255,255,0.78)", margin: 0, maxWidth: 560 },

  badges: {
    display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
    gap: 14, marginTop: 12,
    paddingTop: 28, borderTop: "1px solid rgba(255,255,255,0.12)",
  },
  badge: {
    display: "flex", alignItems: "flex-start", gap: 12,
  },
  badgeIcon: {
    width: 36, height: 36, borderRadius: 8,
    background: "rgba(232,115,28,0.14)",
    border: "1px solid rgba(232,115,28,0.32)",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    flexShrink: 0,
  },
  badgeTitle: {
    fontFamily: "var(--pd-font-body)", fontSize: 14, fontWeight: 600, color: "#fff",
    letterSpacing: "-0.005em",
  },
  badgeDesc: {
    fontSize: 12, color: "rgba(255,255,255,0.6)", marginTop: 2,
  },

  actions: { display: "flex", gap: 18, alignItems: "center", marginTop: 18, flexWrap: "wrap" },
  iglink: {
    color: "rgba(255,255,255,0.75)", fontSize: 13, fontWeight: 500,
    display: "inline-flex", alignItems: "center", gap: 8,
  },

  note: {
    fontSize: 11, color: "rgba(255,255,255,0.45)",
    marginTop: 8,
    display: "inline-flex", alignItems: "center",
  },
};

window.BatuhanStrip = BatuhanStrip;