/* global Icon, Logo, FullLogo, useScrollReveal */

function Footer({ onNavigate }) {
  const sectionRef = useScrollReveal();

  return (
    <footer ref={sectionRef} style={ftStyles.wrap}>
      {/* Sevk eden hekimler için CTA bandı — eşit ağırlığın final hatırlatması */}
      <div style={ftStyles.referralBand}>
        <div className="container-wide" style={ftStyles.referralRow} data-footer-referral>
          <div className="scroll-rise" data-stag="0">
            <div className="eyebrow" style={{ color: "var(--pd-orange)" }}>Sevk eden hekimler için</div>
            <h3 className="h-display" style={ftStyles.referralH3}>
              Vakanızı bize iletin —<br/>
              <span className="orange-word">tedavi sonrası raporu</span> ile geri gelsin.
            </h3>
          </div>
          <div className="scroll-rise" data-stag="1" data-actions style={ftStyles.referralActions}>
            <a href="Sevk.html" className="btn btn-primary btn-lg">
              Sevk formu <Icon name="arrowRight" size={14} />
            </a>
            <a href="mailto:info@vdmpetdent.com" className="btn btn-on-dark btn-lg">
              <Icon name="mail" size={14} /> E-posta yaz
            </a>
          </div>
        </div>
      </div>

      <div style={ftStyles.main}>
        <div className="container-wide" style={ftStyles.mainGrid} data-footer-grid>
          <div>
            <FullLogo width={130} onDark={true} />
            <p style={ftStyles.tagline}>
              Köpek ve kedilerde ağız, diş ve çene cerrahisine
              odaklanan veteriner diş merkezi. Kadıköy / İstanbul.
            </p>
            <div style={ftStyles.socials}>
              <a href="https://www.instagram.com/vdmpetdent/" target="_blank" rel="noopener" style={ftStyles.social}>
                <Icon name="instagram" size={16} /> @vdmpetdent
              </a>
              <a href="https://www.instagram.com/vetdentistbatuhan/" target="_blank" rel="noopener" style={ftStyles.social}>
                <Icon name="instagram" size={16} /> @vetdentistbatuhan
              </a>
            </div>
          </div>

          <div style={ftStyles.col}>
            <div style={ftStyles.colLabel}>Site Haritası</div>
            <a href="Anasayfa.html" style={ftStyles.fLink}>Anasayfa</a>
            <a href="Hakkimizda.html" style={ftStyles.fLink}>Hakkımızda</a>
            <a href="Hizmetler.html" style={ftStyles.fLink}>Hizmetler</a>
            <a href="Vakalar.html" style={ftStyles.fLink}>Vaka Serisi</a>
            <a href="Sevk.html" style={ftStyles.fLink}>Hekim Sevki</a>
            <a href="SSS.html" style={ftStyles.fLink}>SSS</a>
            <a href="Iletisim.html" style={ftStyles.fLink}>İletişim</a>
          </div>

          <div style={ftStyles.col}>
            <div style={ftStyles.colLabel}>İletişim</div>
            <div style={ftStyles.fText}>
              Sahrayı Cedit · Osman Nuri Ergin Sk. No:9B<br/>
              34744 Kadıköy / İstanbul
            </div>
            <a href="tel:+905435486208" style={{ ...ftStyles.fLink, color: "#fff" }}>+90 543 548 62 08</a>
            <a href="https://wa.me/905435486208" target="_blank" rel="noopener" style={ftStyles.fLink}>
              WhatsApp: wa.me/905435486208
            </a>
          </div>

          <div style={ftStyles.col}>
            <div style={ftStyles.colLabel}>Çalışma</div>
            <div style={ftStyles.fText}>
              Pzt – Cmt · 10:00 – 18:30<br/>
              Pazar · 10:00 – 14:00
            </div>
            <a href="Iletisim.html" className="btn btn-on-dark btn-sm" style={{ marginTop: 8, alignSelf: "flex-start" }}>
              Randevu Al
            </a>
          </div>
        </div>

        <div style={ftStyles.legalRow}>
          <div className="container-wide" style={ftStyles.legalInner} data-legal-inner>
            <div style={ftStyles.copy}>
              © {new Date().getFullYear()} Veteriner Diş Merkezi Petdent. Tüm hakları saklıdır.
            </div>
            <div style={ftStyles.legalLinks}>
              <a href="#kvkk">KVKK Aydınlatma Metni</a>
              <a href="#gizlilik">Gizlilik</a>
              <a href="#cerez">Çerez</a>
              <span style={ftStyles.placeholder}>[PLACEHOLDER · metinler eklenecek]</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

const ftStyles = {
  wrap: { background: "var(--pd-charcoal)" },
  referralBand: {
    background: "#2A2A2C",
    borderBottom: "1px solid rgba(255,255,255,0.06)",
  },
  referralRow: {
    display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 0.9fr)",
    gap: 40, alignItems: "center",
    padding: "56px 32px",
  },
  referralH3: {
    color: "#fff", margin: "16px 0 0",
    fontSize: "clamp(28px, 3.2vw, 40px)",
    lineHeight: 1.1,
    letterSpacing: "-0.005em",
  },
  referralActions: {
    display: "flex", gap: 12, alignItems: "center",
    justifyContent: "flex-end", flexWrap: "wrap",
  },

  main: { color: "rgba(255,255,255,0.78)" },
  mainGrid: {
    display: "grid",
    gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
    gap: 40,
    padding: "72px 32px 48px",
  },
  tagline: {
    fontSize: 14, lineHeight: 1.6,
    color: "rgba(255,255,255,0.65)",
    margin: "20px 0 24px",
    maxWidth: 320,
  },
  socials: { display: "flex", flexDirection: "column", gap: 6 },
  social: {
    display: "inline-flex", alignItems: "center", gap: 8,
    fontSize: 13, color: "rgba(255,255,255,0.78)",
    fontWeight: 500,
  },

  col: { display: "flex", flexDirection: "column", gap: 10 },
  colLabel: {
    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
    fontWeight: 700, color: "rgba(255,255,255,0.5)",
    marginBottom: 6,
  },
  fLink: {
    fontSize: 14, color: "rgba(255,255,255,0.78)",
    transition: "color 160ms",
  },
  fText: {
    fontSize: 14, color: "rgba(255,255,255,0.7)",
    lineHeight: 1.55,
  },

  legalRow: {
    borderTop: "1px solid rgba(255,255,255,0.08)",
  },
  legalInner: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    padding: "22px 32px", flexWrap: "wrap", gap: 12,
  },
  copy: {
    fontSize: 12, color: "rgba(255,255,255,0.5)",
  },
  legalLinks: {
    display: "flex", gap: 22, fontSize: 12,
    color: "rgba(255,255,255,0.6)", alignItems: "center",
    flexWrap: "wrap",
  },
  placeholder: {
    fontSize: 10, color: "rgba(232,115,28,0.65)",
    letterSpacing: "0.06em",
  },
};

window.Footer = Footer;