/* global Icon, useScrollReveal */

/* Instagram-feed placeholder for "Son vakalar".
   Each card is a 1:1 tile with a placeholder image area + caption row.
   Real Instagram embed will replace this. */

const CASES = [
  {
    id: "c1",
    species: "Köpek · 7 yaş",
    breed: "Golden Retriever",
    cat: "Periodontal Tedavi",
    img: "assets/case-01-golden-periodontal.jpg",
  },
  {
    id: "c2",
    species: "Kedi · 9 yaş",
    breed: "British Shorthair",
    cat: "Çekim + Kanal",
    img: "assets/case-02-british-kanal.jpg",
  },
  {
    id: "c3",
    species: "Köpek · 11 yaş",
    breed: "Yorkshire Terrier",
    cat: "Çene Cerrahisi",
    img: "assets/case-03-yorkshire-cerrahi.jpg",
  },
  {
    id: "c4",
    species: "Köpek · 4 yaş",
    breed: "Labrador",
    cat: "Kırık Diş · Kron",
    img: "assets/case-04-labrador-kron.jpg",
  },
];

const FILTERS = [
  { id: "all",       label: "Tümü" },
  { id: "perio",     label: "Periodontal" },
  { id: "endo",      label: "Kanal" },
  { id: "surgery",   label: "Cerrahi" },
  { id: "kron",      label: "Kron" },
];

function Cases() {
  const sectionRef = useScrollReveal();
  const [filter, setFilter] = React.useState("all");

  return (
    <section id="vakalar" className="section" ref={sectionRef}>
      <div className="container-wide">
        <div style={cStyles.head} data-cases-head>
          <div className="scroll-rise" data-stag="0">
            <div className="eyebrow">Son vakalar · Instagram</div>
            <h2 className="h-display h2" style={{ marginTop: 18, marginBottom: 0 }}>
              Her vakanın kendi <span className="orange-word">hikâyesi</span> var.
            </h2>
          </div>
          <div className="scroll-rise" data-stag="1" style={cStyles.intro}>
            <p className="lede" style={{ margin: 0 }}>
              Tedavi ettiğimiz vakaları kategorize ederek Instagram'da paylaşıyoruz.
              Tüm seriyi vaka galerisi sayfasında inceleyebilirsiniz.
            </p>
            <a href="https://instagram.com/vdmpetdent" target="_blank" rel="noopener"
               className="ulink" style={{ marginTop: 18, display: "inline-flex", alignItems: "center" }}>
              <Icon name="instagram" size={14} style={{ marginRight: 8 }} />
              @vdmpetdent <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <div className="scroll-rise" data-stag="2" data-filter-bar style={cStyles.filterRow}>
          {FILTERS.map((f) => (
            <button key={f.id}
                    onClick={() => setFilter(f.id)}
                    style={{
                      ...cStyles.chip,
                      ...(filter === f.id ? cStyles.chipActive : {}),
                    }}>
              {f.label}
            </button>
          ))}
        </div>

        <div style={cStyles.grid} data-cases-grid>
          {CASES.map((c, i) => (
            <a key={c.id}
               href={`Vakalar.html#vaka-${c.id}`}
               className="scroll-rise" data-stag={i % 4} data-case
               style={cStyles.card}>
              <div style={cStyles.tile}>
                <img src={window.A(c.img)} alt={`${c.breed} — ${c.cat}`} style={cStyles.tileImg} loading="lazy" />
                <div style={cStyles.cat}>{c.cat}</div>
                <div className="case-overlay" style={cStyles.overlay}>
                  <Icon name="arrowUpRight" size={20} style={{ color: "#fff" }} />
                </div>
              </div>
              <div style={cStyles.meta}>
                <div style={cStyles.species}>{c.species} · {c.breed}</div>
                <Icon name="instagram" size={12} style={{ color: "var(--pd-charcoal-3)" }} />
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        a[data-case]:hover .case-overlay { opacity: 1; }
      `}</style>
    </section>
  );
}

const cStyles = {
  head: {
    display: "grid",
    gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
    gap: 56, alignItems: "end",
    marginBottom: 36,
  },
  intro: { display: "flex", flexDirection: "column", alignItems: "flex-start" },

  filterRow: {
    display: "flex", gap: 8, flexWrap: "wrap",
    marginBottom: 28,
  },
  chip: {
    padding: "8px 16px", borderRadius: 999,
    border: "1px solid var(--pd-border-1)",
    background: "#fff", color: "var(--pd-charcoal-2)",
    fontFamily: "inherit", fontSize: 13, fontWeight: 500,
    cursor: "pointer",
    transition: "color 160ms, background-color 160ms, border-color 160ms",
  },
  chipActive: {
    color: "#fff", background: "var(--pd-charcoal)", borderColor: "var(--pd-charcoal)",
  },

  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    gap: 18,
  },
  card: {
    display: "flex", flexDirection: "column", gap: 12,
    cursor: "pointer",
  },
  tile: {
    position: "relative",
    aspectRatio: "1 / 1",
    borderRadius: 8,
    overflow: "hidden",
    display: "flex", alignItems: "center", justifyContent: "center",
    border: "1px solid var(--pd-border-1)",
    background: "var(--pd-neutral-50)",
  },
  tileImg: {
    width: "100%", height: "100%",
    objectFit: "cover", display: "block",
    position: "absolute", inset: 0,
  },
  cat: {
    position: "absolute", top: 12, left: 12,
    background: "rgba(255,255,255,0.92)",
    color: "var(--pd-charcoal)",
    fontSize: 10, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase",
    padding: "5px 9px", borderRadius: 4,
    backdropFilter: "blur(4px)",
  },
  overlay: {
    position: "absolute", inset: 0,
    background: "rgba(58,58,60,0.5)",
    display: "flex", alignItems: "center", justifyContent: "center",
    opacity: 0, transition: "opacity 240ms var(--pd-ease-out)",
  },
  meta: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    gap: 8,
  },
  species: {
    fontSize: "clamp(11px, 3vw, 13px)", fontWeight: 500, color: "var(--pd-charcoal)",
    letterSpacing: "-0.005em",
  },
};

window.Cases = Cases;