// BLOG PAGES

const POSTS = [
  {
    slug: 'what-to-pray-when-you-dont-believe-you-deserve-to-be-heard',
    title: 'what to pray when you don\'t believe you deserve to be heard',
    excerpt: 'some of us don\'t stop praying because we don\'t believe. we stop because we don\'t believe we\'re worth the listening. here\'s how to start again.',
    category: 'Prayer', cat_slug: 'prayer',
    color: 'linear-gradient(165deg, #7C3AED, #4c1d95)',
    icon: '🙏', readTime: '6 min read', date: 'apr 8, 2026', featured: true,
  },
  { slug: 'tuesday-afternoon-prayer', title: 'a prayer for the tuesday afternoon where nothing is technically wrong',
    excerpt: 'no crisis. no reason. still, something underneath feels tired in a place you can\'t name.',
    category: 'Faith & Doubt', cat_slug: 'faith', color: 'linear-gradient(165deg, #FCD34D, #D97706)', icon: '☕', readTime: '4 min', date: 'apr 5' },
  { slug: 'i-dont-know-what-to-say', title: 'why \'i don\'t know what to say\' is already a prayer',
    excerpt: 'the words you can\'t find are not evidence of your distance from God. they are the prayer.',
    category: 'Prayer', cat_slug: 'prayer', color: 'linear-gradient(165deg, #A78BFA, #5b21b6)', icon: '💭', readTime: '5 min', date: 'apr 2' },
  { slug: 'prayers-for-teenager-who-wont-talk', title: 'five prayers for the parent of a teenager who won\'t talk to you',
    excerpt: 'the silence is loud. pray anyway. here\'s what to pray when they stop answering the text.',
    category: 'For Moms', cat_slug: 'moms', color: 'linear-gradient(165deg, #F472B6, #9d174d)', icon: '💗', readTime: '7 min', date: 'mar 30' },
  { slug: 'love-letter-we-almost-didnt-publish', title: 'the love letter we almost didn\'t publish',
    excerpt: 'we wrote one that felt too honest. we almost cut it. then we didn\'t.',
    category: 'Love Letters', cat_slug: 'love-letters', color: 'linear-gradient(165deg, #1E1B4B, #4c1d95)', icon: '✉', readTime: '3 min', date: 'mar 28' },
  { slug: 'prayer-for-diagnosis', title: 'a prayer for the day you got the diagnosis',
    excerpt: 'the moment after the doctor stopped talking. a prayer for the room that got too quiet.',
    category: 'When Life Is Hard', cat_slug: 'hard', color: 'linear-gradient(165deg, #14B8A6, #134e4a)', icon: '🕊', readTime: '4 min', date: 'mar 24' },
  { slug: 'mad-at-god', title: 'on praying when you\'re mad at God',
    excerpt: 'the honest prayer is the only one worth praying. even if it starts with \'i am furious.\'',
    category: 'Faith & Doubt', cat_slug: 'faith', color: 'linear-gradient(165deg, #FB7185, #7f1d1d)', icon: '🔥', readTime: '6 min', date: 'mar 20' },
  { slug: 'grocery-store-parking-lot', title: 'a short prayer for the grocery store parking lot',
    excerpt: 'the one you pray between the cart return and the driver\'s seat. twenty seconds. counts.',
    category: 'Prayer', cat_slug: 'prayer', color: 'linear-gradient(165deg, #C4B5FD, #7C3AED)', icon: '🛒', readTime: '2 min', date: 'mar 16' },
  { slug: 'what-grief-prayer-sounds-like', title: 'what grief prayer actually sounds like (spoiler: not graceful)',
    excerpt: 'a short, ugly, honest tour of prayers that helped me when my dad died.',
    category: 'Grief', cat_slug: 'grief', color: 'linear-gradient(165deg, #60A5FA, #1e40af)', icon: '🌧', readTime: '8 min', date: 'mar 12' },
  { slug: 'hurt-by-the-church', title: 'how to pray when you were hurt by the church',
    excerpt: 'for the ones who still want God but can\'t walk back into the building. start here.',
    category: 'Faith & Doubt', cat_slug: 'faith', color: 'linear-gradient(165deg, #A78BFA, #3b0d8a)', icon: '🩹', readTime: '9 min', date: 'mar 8' },
  { slug: 'hour-before-phone-call', title: 'a prayer for the hour before the phone call',
    excerpt: 'when you\'re waiting to hear. when your stomach won\'t settle. when the clock is mean.',
    category: 'Anxiety', cat_slug: 'anxiety', color: 'linear-gradient(165deg, #8B5CF6, #4c1d95)', icon: '📞', readTime: '3 min', date: 'mar 5' },
  { slug: 'sentence-fragments', title: 'you\'re allowed to pray in sentence fragments',
    excerpt: '"help." "please." "i\'m tired." counts. counts. counts.',
    category: 'Prayer', cat_slug: 'prayer', color: 'linear-gradient(165deg, #F472B6, #7C3AED)', icon: '✍️', readTime: '3 min', date: 'mar 1' },
];

const CATEGORIES = [
  { name: 'Prayer', count: 24 },
  { name: 'Anxiety', count: 18 },
  { name: 'Grief', count: 12 },
  { name: 'Gratitude', count: 9 },
  { name: 'Faith & Doubt', count: 15 },
  { name: 'For Moms', count: 11 },
  { name: 'When Life Is Hard', count: 17 },
  { name: 'Love Letters', count: 7 },
];

function BlogIndexPage() {
  useEffect(() => {
    document.title = "The Unspoken Blog | Honest Writing on Prayer, Faith & Real Life";
    const meta = document.querySelector('meta[name="description"]');
    if (meta) meta.setAttribute('content', 'Honest, tender writing on prayer, anxiety, grief, gratitude, faith, doubt, and the quiet middle of real life. New posts weekly.');
  }, []);

  const featured = POSTS[0];
  const rest = POSTS.slice(1);

  return (
    <main id="main">
      <section className="page-hero" style={{ paddingBottom: 56 }}>
        <FloatingHearts count={5} />
        <div className="container" style={{ position: 'relative' }}>
          <Reveal>
            <div className="eyebrow" style={{ display: 'inline-flex' }}>the blog</div>
            <h1 style={{ marginTop: 16 }}>the <em>unspoken</em> blog.</h1>
            <p>honest writing about prayer, faith, anxiety, grief, gratitude, and the quiet middle of real life.</p>
          </Reveal>
        </div>
      </section>

      <section className="blog-wrap">
        <div className="blog-layout">
          <div>
            <Reveal>
              <a href={`#/blog/${featured.slug}`} className="blog-featured" aria-label={`Read: ${featured.title}`}>
                <div className="blog-featured-img" style={{ background: featured.color }}>
                  <span style={{ filter: 'drop-shadow(0 10px 30px rgba(0,0,0,0.3))' }}>{featured.icon}</span>
                </div>
                <div className="blog-featured-body">
                  <span className="category-pill-coral">{featured.category} · featured</span>
                  <h2>{featured.title}</h2>
                  <p>{featured.excerpt}</p>
                  <div className="meta">by laura · {featured.date} · {featured.readTime}</div>
                </div>
              </a>
            </Reveal>

            <div className="blog-grid">
              {rest.map((p, i) => (
                <Reveal key={p.slug} delay={i * 40}>
                  <a href={`#/blog/${p.slug}`} className="blog-card" aria-label={`Read: ${p.title}`}>
                    <div className="blog-card-img" style={{ background: p.color }}>
                      <span style={{ filter: 'drop-shadow(0 6px 20px rgba(0,0,0,0.3))' }}>{p.icon}</span>
                    </div>
                    <div className="blog-card-body">
                      <span className="category-pill-purple">{p.category}</span>
                      <h3>{p.title}</h3>
                      <p>{p.excerpt}</p>
                      <div className="meta">by laura · {p.date} · {p.readTime}</div>
                    </div>
                  </a>
                </Reveal>
              ))}
            </div>
          </div>

          <aside className="blog-sidebar" aria-label="Blog sidebar">
            <Reveal>
              <div className="sidebar-card">
                <h4>categories</h4>
                <ul className="sidebar-categories">
                  {CATEGORIES.map(c => (
                    <li key={c.name}>
                      <a href="#">
                        <span>{c.name}</span>
                        <span className="count">{c.count}</span>
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
            <Reveal delay={100}>
              <div className="sidebar-card">
                <h4>most prayed with this week</h4>
                <ul className="sidebar-categories">
                  {POSTS.slice(0, 4).map(p => (
                    <li key={p.slug}><a href={`#/blog/${p.slug}`} style={{ borderBottom: 'none', padding: '6px 0' }}>
                      <span style={{ fontSize: 14, fontWeight: 600 }}>{p.title}</span>
                    </a></li>
                  ))}
                </ul>
              </div>
            </Reveal>
            <Reveal delay={180}>
              <div className="sidebar-signup">
                <h4>sunday prayer</h4>
                <p>one honest prayer in your inbox every sunday. that\'s it.</p>
                <input type="email" placeholder="you@wherever.com" aria-label="email" />
                <button type="button">Subscribe</button>
              </div>
            </Reveal>
          </aside>
        </div>
      </section>

      <CTABlock />
    </main>
  );
}

function BlogPostPage({ slug }) {
  const post = POSTS.find(p => p.slug === slug) || POSTS[0];
  const [prayed, setPrayed] = useState(() => {
    try { return !!JSON.parse(localStorage.getItem('unspoken_post_prayed_'+post.slug) || 'false'); }
    catch { return false; }
  });

  useEffect(() => {
    document.title = `${post.title} | The Unspoken Blog`;
    const meta = document.querySelector('meta[name="description"]');
    if (meta) meta.setAttribute('content', post.excerpt);
  }, [post]);

  const related = POSTS.filter(p => p.slug !== post.slug).slice(0, 3);

  const togglePrayed = () => {
    const next = !prayed;
    setPrayed(next);
    try { localStorage.setItem('unspoken_post_prayed_'+post.slug, JSON.stringify(next)); } catch {}
  };

  // Full body only for the featured post; others get a placeholder
  const isFeaturedPost = post.slug === POSTS[0].slug;

  return (
    <main id="main">
      <section className="post-hero">
        <div className="breadcrumb">
          <a href="#/blog">Blog</a>
          <span className="sep">›</span>
          <a href="#">{post.category}</a>
          <span className="sep">›</span>
          <span>{post.title.slice(0, 48)}{post.title.length > 48 ? '…' : ''}</span>
        </div>
        <div className="post-header">
          <span className="category-pill-coral">{post.category}</span>
          <h1>{post.title}</h1>
          <div className="post-meta">
            <div className="post-avatar">L</div>
            <span>by laura</span>
            <span className="dot"></span>
            <span>{post.date}</span>
            <span className="dot"></span>
            <span>{post.readTime}</span>
          </div>
        </div>
        <div className="post-cover" style={{ background: post.color }} aria-hidden="true">
          <span style={{ filter: 'drop-shadow(0 20px 50px rgba(0,0,0,0.4))' }}>{post.icon}</span>
        </div>
      </section>

      <article className="post-body">
        {isFeaturedPost ? (
          <>
            <p>there\'s a very particular kind of quiet that lives in people who\'ve stopped praying for themselves. i know because i was one of them for about a year and a half.</p>
            <p>i didn\'t stop because i didn\'t believe. i stopped because i didn\'t believe <em>i</em> was worth the listening. i could pray for my kids. i could pray for a friend in chemo. i could pray for the woman behind me at the grocery store whose card didn\'t go through. i could not, for the life of me, ask for anything for myself.</p>

            <div className="pull">i wasn\'t faithless. i was ashamed.</div>

            <p>if that\'s where you are — if you\'ve been praying for everyone except yourself, if the words dry up the second the subject becomes <em>you</em> — i want to say two things very gently.</p>

            <h2>first: you are not alone in this.</h2>
            <p>a lot of people i love pray beautifully for strangers and choke on their own names. it\'s usually not a theology problem. it\'s a worthiness problem. and worthiness problems don\'t respond to more effort. they respond to being reminded, over and over, that the door was never locked.</p>
            <p>you don\'t pray your way back in. you just come in.</p>

            <div className="inline-prayer-card">
              <div className="label">start here</div>
              <div className="prayer-copy">"God, i don\'t believe i deserve to be heard. i\'m going to ask anyway. please listen. — amen."</div>
            </div>

            <h2>second: the prayer doesn\'t have to be good.</h2>
            <p>nobody is grading this. you don\'t need to open with praise. you don\'t need to warm up. you don\'t need a verse. you don\'t need to sound composed. the prayer that starts with "i\'m not okay" is the prayer that gets heard. it\'s the one that\'s true.</p>

            <div className="scripture">
              "the Lord is close to the brokenhearted and saves those who are crushed in spirit."
              <cite>— psalm 34:18</cite>
            </div>

            <p>close. not impressed. not waiting for you to get it together. close.</p>

            <p>if it helps: name the thing you don\'t believe you deserve, and then ask for it anyway. the asking is not arrogance. the asking is how you learn you were wrong about yourself.</p>

            <p>the first time i prayed for myself again, it was in my car, in a parking lot, at 8:47pm on a wednesday. i said "i\'m tired and i don\'t know how to ask for help." i did not feel a sunset open. i did not feel a verse arrive. i felt my shoulders drop half an inch. that was enough.</p>

            <div className="pull">your shoulders dropping half an inch is a prayer answered.</div>

            <p>so start there. one sentence. one breath. one small, specific thing you don\'t think you deserve but are asking for anyway. the door was never locked. nobody\'s keeping score. come in.</p>

            <div className="try-cta">
              <div>
                <h4>want a prayer written for this exact moment?</h4>
                <p>unspoken will meet you there. free for 7 days.</p>
              </div>
              <a href="#/pricing" className="btn btn-primary">
                <PixelHeart /> Start Free Trial
              </a>
            </div>

            <button
              className={`post-pray-btn ${prayed ? 'prayed' : ''}`}
              onClick={togglePrayed}
              aria-pressed={prayed}
            >
              <PixelHeart />
              {prayed ? 'prayed for this writer · thank you' : 'pray for this writer'}
            </button>

            <div className="post-author-card">
              <div className="post-author-avatar">L</div>
              <div>
                <h4 style={{ fontSize: 18, fontWeight: 900 }}>laura</h4>
                <p>laura builds unspoken. she homeschools her kids. she prays badly and often.</p>
              </div>
            </div>
          </>
        ) : (
          <>
            <p>{post.excerpt}</p>
            <p style={{ fontStyle: 'italic', color: 'var(--muted)', fontFamily: 'Fraunces, serif' }}>
              — the full post is on its way. in the meantime, the prayer for this moment is already waiting in the app.
            </p>
            <div className="try-cta">
              <div>
                <h4>get this prayer delivered to your phone.</h4>
                <p>unspoken. free for 7 days.</p>
              </div>
              <a href="#/pricing" className="btn btn-primary">
                <PixelHeart /> Start Free Trial
              </a>
            </div>
          </>
        )}
      </article>

      <section className="related-section">
        <div className="container">
          <div className="eyebrow">keep reading</div>
          <h2 className="section-title" style={{ marginTop: 12 }}>related <em>posts.</em></h2>
          <div className="blog-grid" style={{ marginTop: 40 }}>
            {related.map(p => (
              <a key={p.slug} href={`#/blog/${p.slug}`} className="blog-card">
                <div className="blog-card-img" style={{ background: p.color }}>
                  <span>{p.icon}</span>
                </div>
                <div className="blog-card-body">
                  <span className="category-pill-purple">{p.category}</span>
                  <h3>{p.title}</h3>
                  <p>{p.excerpt}</p>
                  <div className="meta">by laura · {p.date} · {p.readTime}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": post.title,
        "description": post.excerpt,
        "author": { "@type": "Person", "name": "Laura" },
        "datePublished": "2026-04-08",
        "publisher": { "@type": "Organization", "name": "Soleo Technologies" }
      })}} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          { "@type": "ListItem", "position": 1, "name": "Blog", "item": "https://unspoken.app/blog" },
          { "@type": "ListItem", "position": 2, "name": post.category },
          { "@type": "ListItem", "position": 3, "name": post.title }
        ]
      })}} />
    </main>
  );
}

Object.assign(window, { BlogIndexPage, BlogPostPage, POSTS });