/* global Icon */

const MYTHS = [
{
  id: "m1",
  myth: "Ağız kokusu vardı ama normal sanıyorduk.",
  truth: "Bazı ağız kokuları diş eti hastalığı, enfeksiyon veya kırık dişlerle ilişkili olabilir.",
  icon: "tooth",
  img: "assets/myth-01-agiz-kokusu.jpg"
},
{
  id: "m2",
  myth: "Kuru mamayı yemeye devam ettiği için ağrısı yok sanmıştık.",
  truth: "Kediler ve köpekler ağız içindeki rahatsızlığı uzun süre saklayabilir.",
  icon: "zap",
  img: "assets/myth-02-mama.jpg"
},
{
  id: "m3",
  myth: "Oyuncaklarını kemirmeyi bırakmıştı.",
  truth: "Tek taraflı çiğneme, sert şeylerden kaçınma ya da ağız bölgesine hassasiyet ağız-diş problemleriyle ilişkili olabilir.",
  icon: "bone",
  img: "assets/myth-03-oyuncak.jpg"
},
{
  id: "m4",
  fixed: true,
  headline: "Ağız-diş problemleri bazen günlük davranışların içine gizlenebilir.",
  sub: "Şüphe duyduğunuz bir durumda değerlendirme için bizimle iletişime geçebilirsiniz.",
  icon: "shield"
}];


function Myths() {
  const [flipped, setFlipped] = React.useState({});
  const sectionRef = useScrollReveal();

  const toggle = (id) => setFlipped((f) => ({ ...f, [id]: !f[id] }));

  return (
    <section id="neden-onemli" className="section" ref={sectionRef}>
      <div className="container-wide">
        <div style={mythStyles.head} data-2col-head>
          <div className="scroll-rise" data-stag="0">
            <div className="eyebrow">Sık karşılaşılan durumlar</div>
            <h2 className="h-display h2" style={{ marginTop: 18, marginBottom: 0 }}>
              Bazı ağız-diş problemleri —<br />
              <span className="orange-word">uzun süre fark edilmeyebilir.</span>
            </h2>
          </div>
          <p className="lede scroll-rise" data-stag="1" style={mythStyles.intro}>
            Kediler ve köpekler çoğu zaman yemeye devam eder, oyun oynar ve
            günlük rutinlerini sürdürür. Ağız içindeki rahatsızlıklar bazen
            yalnızca küçük davranış değişiklikleriyle fark edilir ya da hiç
            fark edilmeyebilir.
          </p>
        </div>

        <div style={mythStyles.grid} data-myth-grid>
          {MYTHS.map((m, i) => {
          if (m.fixed) {
            return (
              <div key={m.id}
              className="scroll-rise myth-card"
              data-stag={i % 4}
              style={{
                ...mythStyles.card,
                ...mythStyles.fixedCard,
                cursor: "default"
              }}>
                  <div style={mythStyles.cardHead}>
                    <div style={{
                    ...mythStyles.tag,
                    color: "var(--pd-orange)",
                    borderColor: "rgba(232,115,28,0.4)"
                  }}>
                      ÖZET
                    </div>
                    <div style={{
                    ...mythStyles.iconBox,
                    background: "rgba(232,115,28,0.16)",
                    color: "var(--pd-orange)"
                  }}>
                      <Icon name={m.icon} size={18} />
                    </div>
                  </div>
                  <div style={{
                  ...mythStyles.body,
                  fontFamily: "var(--pd-font-display)",
                  color: "#fff"
                }}>
                    {m.headline}
                  </div>
                  <div style={mythStyles.fixedSub}>
                    {m.sub}
                  </div>
                </div>);

          }

          return (
            <button key={m.id}
            onClick={() => toggle(m.id)}
            className="scroll-rise myth-card"
            data-stag={i % 4}
            style={{
              ...mythStyles.card,
              background: flipped[m.id] ? "var(--pd-charcoal)" : "#fff",
              color: flipped[m.id] ? "#fff" : "var(--pd-charcoal)",
              borderColor: flipped[m.id] ? "var(--pd-charcoal)" : "var(--pd-border-1)"
            }}>
                {m.img &&
              <div style={mythStyles.cardMediaWrap}>
                    <img src={window.A(m.img)} alt={m.myth} style={mythStyles.cardMedia} loading="lazy"
                onError={(e) => {if (!e.currentTarget.dataset.fb) {e.currentTarget.dataset.fb = "1";e.currentTarget.src = "assets/_placeholder.svg";}}} />
                  </div>
              }
                <div style={mythStyles.cardHead}>
                  <div style={{
                  ...mythStyles.tag,
                  color: flipped[m.id] ? "var(--pd-orange)" : "var(--pd-charcoal-3)",
                  borderColor: flipped[m.id] ? "rgba(232,115,28,0.4)" : "var(--pd-border-1)"
                }}>
                    {flipped[m.id] ? "GERÇEK" : "MİT"}
                  </div>
                  <div style={{
                  ...mythStyles.iconBox,
                  background: flipped[m.id] ? "rgba(232,115,28,0.16)" : "var(--pd-neutral-50)",
                  color: flipped[m.id] ? "var(--pd-orange)" : "var(--pd-charcoal)"
                }}>
                    <Icon name={m.icon} size={18} />
                  </div>
                </div>
                <div style={mythStyles.flipText}>
                  <div style={{
                  ...mythStyles.body,
                  fontFamily: "var(--pd-font-display)",
                  color: flipped[m.id] ? "#fff" : "var(--pd-charcoal)",
                  opacity: flipped[m.id] ? 0 : 1,
                  pointerEvents: flipped[m.id] ? "none" : "auto"
                }}>
                    "{m.myth}"
                  </div>
                  <div className="myth-truth-body" style={{
                  ...mythStyles.truthBody,
                  color: flipped[m.id] ? "rgba(255,255,255,0.86)" : "transparent",
                  pointerEvents: flipped[m.id] ? "auto" : "none"
                }}>
                    {m.truth}
                  </div>
                </div>
                <div style={mythStyles.cta}>
                  <span style={{
                  fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
                  fontWeight: 600,
                  color: flipped[m.id] ? "rgba(255,255,255,0.55)" : "var(--pd-orange)"
                }}>
                    {flipped[m.id] ? "← Miti gör" : "Gerçeği gör →"}
                  </span>
                </div>
              </button>);

        })}
        </div>

        <p style={mythStyles.note} className="scroll-rise" data-stag="2">
          <Icon name="book" size={14} style={{ color: "var(--pd-orange)", marginRight: 8 }} />
          Klinik kesinlik gerektiren cümleler için ekibimizin onayını bekliyoruz.
          Bu sayfadaki ifadeler genel bilgilendirmedir, hekim muayenesinin yerini tutmaz.
        </p>
      </div>
    </section>);

}

// Reusable IntersectionObserver hook
// (Moved to components/hooks.jsx but kept here as fallback if Myths is loaded
// before hooks. The window assignment makes it idempotent.)
if (typeof window.useScrollReveal !== "function") {
  function useScrollReveal() {
    const ref = React.useRef(null);
    React.useEffect(() => {
      const root = ref.current;
      if (!root) return;
      const els = root.querySelectorAll(".scroll-rise");
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
      els.forEach((el) => io.observe(el));
      return () => io.disconnect();
    }, []);
    return ref;
  }
  window.useScrollReveal = useScrollReveal;
}

const mythStyles = {
  head: {
    display: "grid",
    gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 0.95fr)",
    gap: 56, alignItems: "end",
    marginBottom: 64
  },
  intro: { margin: 0, paddingBottom: 8 },

  cardMediaWrap: {
    margin: "-28px -24px 18px",
    aspectRatio: "4 / 3",
    overflow: "hidden",
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    background: "var(--pd-neutral-50)"
  },
  cardMedia: {
    width: "100%", height: "100%",
    objectFit: "cover", display: "block"
  },
  flipText: { position: "relative", flex: 1, display: "grid" },

  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    gap: 20
  },
  card: {
    position: "relative",
    border: "1px solid var(--pd-border-1)",
    borderRadius: 8,
    padding: "28px 24px 24px",
    textAlign: "left",
    background: "#fff",
    fontFamily: "inherit", cursor: "pointer",
    minHeight: 280,
    display: "flex", flexDirection: "column",
    transition:
    "background-color 320ms var(--pd-ease-out)," +
    "color 320ms var(--pd-ease-out)," +
    "border-color 320ms var(--pd-ease-out)," +
    "transform 260ms var(--pd-ease-out)," +
    "box-shadow 260ms var(--pd-ease-out)"
  },
  fixedCard: {
    background: "var(--pd-charcoal)",
    color: "#fff",
    borderColor: "var(--pd-charcoal)"
  },
  fixedSub: {
    fontFamily: "var(--pd-font-body)",
    fontSize: 14,
    lineHeight: 1.55,
    color: "rgba(255,255,255,0.72)",
    marginTop: 16
  },
  cardHead: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    marginBottom: 24
  },
  tag: {
    fontSize: 10, fontWeight: 700, letterSpacing: "0.16em",
    border: "1px solid var(--pd-border-1)",
    padding: "4px 10px", borderRadius: 999,
    transition: "color 240ms, border-color 240ms"
  },
  iconBox: {
    width: 38, height: 38, borderRadius: 8,
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    background: "var(--pd-neutral-50)", color: "var(--pd-charcoal)",
    transition: "background-color 240ms, color 240ms"
  },
  body: {
    fontSize: "clamp(16px, 4.6vw, 22px)",
    lineHeight: 1.18,
    letterSpacing: "-0.005em",
    gridArea: "1 / 1",
    transition: "opacity 240ms"
  },
  truthBody: {
    fontFamily: "var(--pd-font-body)",
    fontSize: 14,
    lineHeight: 1.55,
    gridArea: "1 / 1",
    overflow: "auto",
    transition: "color 320ms"
  },
  cta: { marginTop: "auto", paddingTop: 16 },

  note: {
    marginTop: 40,
    fontSize: 12,
    color: "var(--pd-fg-3)",
    display: "flex", alignItems: "flex-start",
    maxWidth: 720,
    lineHeight: 1.55
  }
};

window.Myths = Myths;