// Blog page — index of posts

const POSTS = [
  {
    slug: "unavailable-partners",
    image: "social-rewire-love-story.png",
    cat: "Subconscious Reprogramming",
    title: "Why You Keep Choosing Emotionally Unavailable Partners",
    blurb: "If you've done the work — journaled, gone to therapy, read every attachment style book under the sun — but still find yourself drawn to people who leave you feeling unseen, unsafe, or not enough, you're not alone.",
    date: "May 24, 2025",
    read: "8 min",
  },
  {
    slug: "ignoring-needs",
    image: "social-end-relationship-exhaustion.png",
    cat: "Boundaries",
    title: "Stop Ignoring Your Needs — Here's How to Honor Them",
    blurb: "Have you ever felt unseen, unheard, or like your needs don't matter? Maybe you're always the one showing up for others, but when it comes to asking for what you need, you hesitate.",
    date: "March 8, 2025",
    read: "6 min",
  },
  {
    slug: "5-signs",
    image: "social-attachment-style-key.png",
    cat: "Attachment Patterns",
    title: "5 Signs Your Attachment Style Is Holding You Back — And What to Do",
    blurb: "Have you ever felt like no matter how hard you try, you keep ending up in the same painful relationship cycles? Here's how to find the script your subconscious is running.",
    date: "February 20, 2025",
    read: "7 min",
  },
  {
    slug: "rewire-subconscious",
    image: "social-break-free-anxious-love.png",
    cat: "Subconscious Reprogramming",
    title: "The Secret to Rewiring Your Subconscious: Proof Explained",
    blurb: "Why affirmations don't work — and what your nervous system actually needs to update old beliefs.",
    date: "January 29, 2025",
    read: "9 min",
  },
];

const CATEGORIES = ["All Posts", "Subconscious Reprogramming", "Quick Mindset Shifts From Instagram", "Boundaries", "Attachment Patterns"];

const BlogPage = () => {
  const [cat, setCat] = React.useState("All Posts");
  const filtered = cat === "All Posts" ? POSTS : POSTS.filter(p => p.cat === cat);
  return (
    <main>
      <section className="page-header">
        <div className="container-narrow">
          <Eyebrow>The Blog Of Aligned Attachments</Eyebrow>
          <h1>Field notes on <em>secure love.</em></h1>
          <p>
            Aligned Attachments helps you break free from unhealthy patterns by uncovering
            subconscious beliefs, healing attachment wounds, and reprogramming your mind
            for secure, thriving relationships. Plus — grab your free Subconscious
            Reprogramming Workbook to start rewiring your mind today.
          </p>
          <div style={{ marginTop: 24 }}>
            <Btn variant="dark" href="#/free-workbook" onClick={navTo("free-workbook")}>Get The Free Workbook</Btn>
          </div>
        </div>
      </section>

      <section className="section section-cream" style={{ paddingTop: 24 }}>
        <div className="container">
          {/* CATEGORY CHIPS */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center", marginBottom: 56 }}>
            {CATEGORIES.map((c) => (
              <button key={c} onClick={() => setCat(c)} style={{
                fontFamily: "var(--aa-font-headline)", fontWeight: 600, fontSize: 11,
                letterSpacing: "0.18em", textTransform: "uppercase",
                padding: "10px 20px", borderRadius: 999,
                border: "1.5px solid " + (cat === c ? "var(--aa-ink-1000)" : "rgba(20,57,58,.18)"),
                background: cat === c ? "var(--aa-ink-1000)" : "transparent",
                color: cat === c ? "#fff" : "var(--aa-ink-800)",
                cursor: "pointer", transition: "all 180ms ease-out",
              }}>{c}</button>
            ))}
          </div>

          <div className="blog-grid">
            {filtered.length > 0 ? <BlogCard post={filtered[0]} large/> : null}
            {filtered.slice(1).map((p, i) => <BlogCard key={p.slug} post={p} stagger={i + 1}/>)}
            {filtered.length === 0 ? (
              <div style={{ gridColumn: "1 / -1", textAlign: "center", padding: 60, color: "var(--aa-ink-500)" }}>No posts in this category yet.</div>
            ) : null}
          </div>
        </div>
      </section>
    </main>
  );
};

const BlogCard = ({ post, large, stagger }) => (
  <a className={"blog-card reveal" + (large ? " is-large" : "")} data-stagger={stagger || ""} href={"#/blog/" + post.slug} onClick={(e) => { e.preventDefault(); window.location.hash = "#/blog/" + post.slug; window.scrollTo({top:0,behavior:"instant"}); }}>
    <div className="img-wrap"><img src={`assets/${post.image}`} alt=""/></div>
    <div className="copy">
      <Eyebrow>{post.cat}</Eyebrow>
      <h3>{post.title}</h3>
      <p>{post.blurb}</p>
      <div className="meta">{post.date} &nbsp;·&nbsp; {post.read} read</div>
    </div>
  </a>
);

window.BlogPage = BlogPage;
window.BLOG_POSTS = POSTS;