// src/components/NewsletterSignup.jsx
import { useState } from 'react';

export default function NewsletterSignup() {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    await fetch('/api/subscribe', {
      method: 'POST',
      body: JSON.stringify({ email }),
    });
    setSent(true);
  }

  return sent ? (
    <p>Thanks — you're subscribed!</p>
  ) : (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <button>Subscribe</button>
    </form>
  );
}

// src/pages/api/subscribe.ts
export async function POST({ request }) {
  const { email } = await request.json();
  console.log('New subscriber:', email);
  return new Response(JSON.stringify({ status: 'ok' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

---
// src/pages/blog/index.astro (updated)
import BaseLayout from '../../layouts/BaseLayout.astro';
import NewsletterSignup from '../../components/NewsletterSignup.jsx';
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---

<BaseLayout title="Blog">
  <ul>
    {posts.map((post) => (
      <li><a href={`/blog/${post.slug}`}>{post.data.title}</a></li>
    ))}
  </ul>
  <NewsletterSignup client:visible />
</BaseLayout>

<!--
  Notes:
  - This requires output: 'server' (or subscribe.ts marked
    export const prerender = false) in astro.config.mjs, since a
    real POST request can't be answered by a static build.
  - Submitting the form successfully shows "Thanks — you're
    subscribed!" and the server console logs the submitted email,
    confirming the POST endpoint genuinely ran per-request.
-->