/* global Icon */

// Open daily: Mon-Sat 10:00-18:30, Sun 10:00-14:00
const TR_DAYS = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];
function todayDayName() {
  return TR_DAYS[new Date().getDay()];
}
function todayHoursText() {
  return new Date().getDay() === 0 ? "10:00 – 14:00" : "10:00 – 18:30";
}

function Hero() {
  return (
    <section id="anasayfa" style={heroStyles.section}>
      {/* Subtle background mark — large dental mark, very low opacity */}
      <img src={window.A("assets/logo-mark.png")} alt="" aria-hidden="true" style={heroStyles.bgmark} />
      <div style={heroStyles.bgwash} aria-hidden="true" />

      <div className="container-wide" style={heroStyles.grid}>
        <div style={heroStyles.copy}>
          <div className="eyebrow reveal hero-eyebrow-row" data-d="0" style={heroStyles.eyebrowRow}>
            <span style={heroStyles.eyebrowDoc}>Veteriner Hekim Batuhan Elifoğlu</span>
          </div>
          <h1 className="h-display h1 reveal" data-d="2" style={heroStyles.h1}>
            Kedi ve köpeklerde <span className="orange-word" style={{ whiteSpace: "nowrap" }}>ağız-diş sağlığı</span> üzerine çalışan özel bir veteriner kliniği.
          </h1>
          <p className="lede reveal" data-d="3" style={heroStyles.lede}>
            Ağız kokusu, kırık dişler, diş eti problemleri, çiğneme zorluğu
            ya da çene hastalıkları…
            <br /><br />
            Veteriner Diş Merkezi — Petdent’te tüm süreç yalnızca veteriner
            diş hekimliği odağında değerlendirilir.
          </p>
          <div className="reveal hero-cta-row" data-d="4" style={heroStyles.ctaRow}>
            <a href="Iletisim.html" className="btn btn-primary btn-lg">
              Randevu Al <Icon name="arrowRight" size={16} />
            </a>
            <a href="https://wa.me/905435486208" target="_blank" rel="noopener" className="btn btn-secondary btn-lg">
              <Icon name="whatsapp" size={16} style={{ color: "#25D366" }} />
              WhatsApp ile yaz
            </a>
          </div>
          <div className="reveal" data-d="5" style={heroStyles.trust}>
            <div style={heroStyles.trustItem}>
              <Icon name="check" size={15} style={{ color: "var(--pd-orange)" }} />
              <span>Ağız ve diş sağlığına özel yaklaşım</span>
            </div>
            <div style={heroStyles.trustItem}>
              <Icon name="check" size={15} style={{ color: "var(--pd-orange)" }} />
              <span>Dijital dental görüntüleme</span>
            </div>
            <div style={heroStyles.trustItem}>
              <Icon name="check" size={15} style={{ color: "var(--pd-orange)" }} />
              <span>Kedi ve köpeklere özel tedavi planlaması</span>
            </div>
          </div>
        </div>

        <div className="reveal hero-visual" data-d="2" style={heroStyles.visual}>
          <div style={heroStyles.imageFrame}>
            <img
              src={window.A("assets/hero-anasayfa.jpg")}
              alt="Veteriner Hekim Batuhan Elifoğlu — Petdent kliniğinde köpek hastasını muayene ederken"
              style={heroStyles.imageEl}
            />
          </div>

          {/* Floating "Bugün açık" card */}
          <div className="hero-float-card" style={heroStyles.floatCard}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div style={heroStyles.dot} />
              <div style={heroStyles.floatEyebrow}>Bugün açık</div>
            </div>
            <div style={heroStyles.floatTime}>10:00 – 18:30</div>
            <div style={heroStyles.floatNote}>Randevu ile hizmet verilmektedir.</div>
          </div>

          {/* Floating "Hekim Sevki" badge */}
          <a href="Sevk.html" className="hero-refer-badge" style={heroStyles.referBadge}>
            <div style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--pd-orange)", fontWeight: 700 }}>
              Hekim misiniz?
            </div>
            <div style={{ fontSize: 14, fontWeight: 600, color: "var(--pd-charcoal)", marginTop: 4, fontFamily: "var(--pd-font-body)" }}>
              Sevk süreci →
            </div>
          </a>
        </div>
      </div>

      {/* Sub-band: tiny strip with practice contact + quick stats */}
      <div style={heroStyles.subband}>
        <div className="container-wide hero-subband-row" style={heroStyles.subbandRow}>
          <div style={heroStyles.subItem}>
            <Icon name="mapPin" size={14} style={{ color: "var(--pd-orange)" }} />
            <span>Sahrayı Cedit · Osman Nuri Ergin Sk. No:9B · Kadıköy</span>
          </div>
          <div style={heroStyles.subItem}>
            <Icon name="phone" size={14} style={{ color: "var(--pd-orange)" }} />
            <a href="tel:+905435486208">+90 543 548 62 08</a>
          </div>
          <div style={heroStyles.subItem}>
            <Icon name="instagram" size={14} style={{ color: "var(--pd-orange)" }} />
            <a href="https://www.instagram.com/vdmpetdent/" target="_blank" rel="noopener">@vdmpetdent</a>
            <span style={{ color: "var(--pd-border-2)", margin: "0 2px" }}>·</span>
            <a href="https://www.instagram.com/vetdentistbatuhan/" target="_blank" rel="noopener">@vetdentistbatuhan</a>
          </div>
        </div>
      </div>
    </section>);

}

const heroStyles = {
  section: {
    position: "relative",
    padding: "72px 0 0",
    background: "var(--pd-white)",
    overflow: "hidden"
  },
  bgmark: {
    position: "absolute",
    top: "60px", right: "-80px",
    width: 480, height: "auto",
    opacity: 0.06,
    pointerEvents: "none",
    zIndex: 0,
    filter: "saturate(0.7)"
  },
  bgwash: {
    position: "absolute",
    top: "-80px", right: "-120px",
    width: 520, height: 520,
    background: "radial-gradient(circle at center, rgba(232,115,28,0.05), transparent 65%)",
    pointerEvents: "none",
    zIndex: 0
  },
  grid: {
    display: "grid",
    gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 0.9fr)",
    gap: 72, alignItems: "center",
    padding: "40px 32px 88px",
    position: "relative"
  },
  copy: { display: "flex", flexDirection: "column", gap: 22, position: "relative", zIndex: 1 },
  eyebrowRow: {
    display: "inline-flex", alignItems: "center", gap: 14,
    flexWrap: "nowrap", whiteSpace: "nowrap",
    alignSelf: "flex-start", maxWidth: "100%"
  },
  eyebrowSep: {
    width: 18, height: 1,
    background: "var(--pd-orange)",
    display: "inline-block",
    flexShrink: 0
  },
  eyebrowDoc: {
    color: "var(--pd-charcoal)",
    fontWeight: 700
  },
  docCredit: {
    display: "inline-flex", alignItems: "center", gap: 12,
    alignSelf: "flex-start",
    marginBottom: 2
  },
  docRule: {
    width: 28, height: 1,
    background: "var(--pd-orange)",
    display: "inline-block"
  },
  docKicker: {
    fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
    color: "var(--pd-charcoal-3)", fontWeight: 700
  },
  docName: {
    fontFamily: "var(--pd-font-display)",
    fontSize: 16, letterSpacing: "0.01em",
    color: "var(--pd-charcoal)"
  },
  h1: { margin: 0 },
  lede: { margin: 0, maxWidth: 520 },
  ctaRow: { display: "flex", gap: 12, flexWrap: "wrap" },
  trust: {
    display: "flex", gap: 22, flexWrap: "wrap",
    marginTop: 8, paddingTop: 22,
    borderTop: "1px solid var(--pd-border-1)"
  },
  trustItem: {
    display: "flex", alignItems: "center", gap: 8,
    fontSize: 13, color: "var(--pd-fg-2)", fontWeight: 500
  },
  visual: { position: "relative" },
  imageFrame: {
    borderRadius: 8,
    border: "1px solid var(--pd-border-1)",
    aspectRatio: "4 / 5",
    background: "var(--pd-neutral-50)",
    overflow: "hidden"
  },
  imageEl: {
    width: "100%",
    height: "100%",
    objectFit: "cover",
    objectPosition: "82% center",
    display: "block"
  },
  floatCard: {
    position: "absolute", bottom: -22, left: -22,
    background: "#fff",
    border: "1px solid var(--pd-border-1)",
    borderRadius: 8,
    padding: "14px 18px",
    boxShadow: "var(--pd-shadow-2)",
    minWidth: 200
  },
  floatEyebrow: {
    fontSize: 10, color: "var(--pd-fg-3)",
    textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600
  },
  floatTime: {
    fontFamily: "var(--pd-font-display)", fontSize: 22,
    color: "var(--pd-fg-1)", marginTop: 4
  },
  floatNote: { fontSize: 12, color: "var(--pd-fg-2)", marginTop: 2 },
  dot: { width: 8, height: 8, borderRadius: "50%", background: "var(--pd-success)" },

  referBadge: {
    position: "absolute", top: -16, right: -16,
    background: "#fff",
    border: "1px solid var(--pd-border-1)",
    borderRadius: 8,
    padding: "10px 16px",
    boxShadow: "var(--pd-shadow-2)",
    cursor: "pointer",
    transition: "transform 200ms var(--pd-ease-out), border-color 200ms var(--pd-ease-out)"
  },

  subband: {
    borderTop: "1px solid var(--pd-border-1)",
    borderBottom: "1px solid var(--pd-border-1)",
    background: "var(--pd-neutral-50)"
  },
  subbandRow: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    padding: "14px 0", gap: 24,
    fontSize: 13, color: "var(--pd-fg-2)", flexWrap: "wrap"
  },
  subItem: {
    display: "inline-flex", alignItems: "center", gap: 8,
    fontWeight: 500
  }
};

window.Hero = Hero;