/* global React */
function BlogPage({ onNav }) {
  const { isMobile, isTablet } = useBreakpoint();
  const bp = (d, t, m) => isMobile ? m : isTablet ? t : d;
  const [heroRef, heroVis] = useReveal(0.05);
  const [postsRef, postsVis] = useReveal(0.05);
  const [allBlogs] = useBlogs();
  const posts = allBlogs.filter(b => b.active !== false);

  return (
    <main>
      <section style={{ padding:bp("64px 32px 48px","48px 24px 36px","40px 20px 32px"), background:"linear-gradient(180deg,#F0FBF7 0%,#fff 100%)" }}>
        <div style={{ maxWidth:1280, margin:"0 auto" }} ref={heroRef}>
          <div style={{ opacity: heroVis ? 1 : 0, transform: heroVis ? "none" : "translateY(20px)", transition:"opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring)", textAlign: isMobile ? "center" : "left" }}>
            <Eyebrow>Blog</Eyebrow>
            <h1 style={{ margin:"12px 0 10px", fontSize:bp("clamp(28px,4vw,48px)","clamp(24px,5vw,36px)","clamp(22px,6vw,30px)"), fontWeight:800, letterSpacing:"-0.025em", lineHeight:1.1 }}>
              Klinička znanja iz prve ruke.
            </h1>
            <p style={{ fontSize:bp(16,15,14), lineHeight:1.6, color:"var(--text-secondary)", maxWidth:580, margin:0 }}>
              Pišemo o tehnikama, kliničkom rezonovanju i lekcijama iz 1-na-1 obuke.
            </p>
          </div>
        </div>
      </section>

      <section ref={postsRef} style={{ padding:bp("24px 32px 96px","20px 24px 72px","16px 20px 56px") }}>
        <div style={{ maxWidth:1280, margin:"0 auto", display:"grid", gridTemplateColumns:bp("repeat(3,1fr)","repeat(2,1fr)","1fr"), gap:bp(22,18,14) }}>
          {posts.map((post, i) => (
            <div key={post.id} style={{ background:"#fff", borderRadius:16, overflow:"hidden",
              boxShadow:"var(--shadow-card)", cursor:"pointer",
              opacity: postsVis ? 1 : 0, transform: postsVis ? "none" : "translateY(24px)",
              transition: `opacity 0.5s ${Math.min(i,5)*0.07}s var(--ease-spring), transform 0.5s ${Math.min(i,5)*0.07}s var(--ease-spring)` }}>
              <div style={{ position:"relative" }}>
                {post.imageUrl
                  ? <img src={post.imageUrl} alt={post.title} style={{ width:"100%", aspectRatio:"16/10", objectFit:"cover", display:"block" }} onError={e => { e.target.style.display="none"; e.target.parentNode.style.background="var(--surface-2)"; }}/>
                  : <Photo ratio="16/10" label={post.cat} style={{ borderRadius:0 }}/>
                }
                {post.featured && <div style={{ position:"absolute", top:10, left:10, background:"var(--omt-green)", color:"#fff", fontSize:9, fontWeight:700, padding:"2px 8px", borderRadius:100, letterSpacing:"0.06em", textTransform:"uppercase" }}>Izdvojeno</div>}
              </div>
              <div style={{ padding:bp("18px 20px","16px 18px","14px 16px") }}>
                <span style={{ fontSize:10, fontWeight:700, letterSpacing:"0.07em", textTransform:"uppercase", color:"var(--omt-green-ink)", background:"rgba(4,175,143,0.08)", padding:"2px 7px", borderRadius:5 }}>{post.cat}</span>
                <h3 style={{ margin:"8px 0 6px", fontSize:bp(16,15,15), fontWeight:700, letterSpacing:"-0.01em", lineHeight:1.3 }}>{post.title}</h3>
                {post.excerpt && <p style={{ margin:"0 0 10px", fontSize:13, lineHeight:1.55, color:"var(--text-secondary)" }}>{post.excerpt}</p>}
                <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between" }}>
                  <div style={{ fontSize:12, color:"var(--text-tertiary)", display:"inline-flex", alignItems:"center", gap:4 }}>
                    <Icon name="clock" size={12}/> {post.read} čitanja
                  </div>
                  <div style={{ fontSize:11, fontWeight:700, color:"var(--omt-green-ink)", display:"inline-flex", alignItems:"center", gap:3 }}>
                    Čitaj <Icon name="arrowRight" size={11}/>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}
window.BlogPage = BlogPage;