Remove API route; submit to Brevo directly from client with fetch fallback

app/books/devops-survival-guide/client-content.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardDescription, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { useNewsletterSubscribe } from '@/hooks/use-newsletter-subscribe';
 import {
   BookOpen,
   Rocket,
@@ -152,6 +153,8 @@ const chapters = [
 export function ClientContent() {
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
   const [isScrolled, setIsScrolled] = useState(false);
+  const [bookEmail, setBookEmail] = useState('');
+  const { status: bookSubscribeStatus, subscribe: bookSubscribe } = useNewsletterSubscribe();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -524,42 +527,43 @@ export function ClientContent() {
             {/* Newsletter Signup Form */}
             <div className="max-w-md mx-auto">
               <div className="p-8 bg-linear-to-br from-primary/5 to-purple-500/5 border-2 border-primary/20 rounded-2xl shadow-2xl backdrop-blur-sm">
-                <form
-                  action="https://devops-daily.us2.list-manage.com/subscribe/post?u=d1128776b290ad8d08c02094f&amp;id=fd76a4e93f&amp;f_id=0022c6e1f0"
-                  method="post"
-                  target="_blank"
-                  noValidate
-                  className="space-y-4"
-                >
-                  <input
-                    type="email"
-                    name="EMAIL"
-                    id="mce-EMAIL-final"
-                    required
-                    placeholder="your@email.com"
-                    className="w-full px-5 py-4 border-2 border-border/50 bg-background/50 backdrop-blur-sm rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
-                  />
-
-                  {/* Honeypot bot field */}
-                  <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
+                {bookSubscribeStatus === 'success' ? (
+                  <div className="flex items-center justify-center gap-3 py-4">
+                    <CheckCircle className="w-6 h-6 text-green-500 shrink-0" />
+                    <p className="text-base font-medium">
+                      You&apos;re on the list! We&apos;ll notify you when it launches. 🚀
+                    </p>
+                  </div>
+                ) : (
+                  <form
+                    onSubmit={(e) => { e.preventDefault(); if (bookEmail) bookSubscribe(bookEmail); }}
+                    noValidate
+                    className="space-y-4"
+                  >
                     <input
-                      type="text"
-                      name="b_d1128776b290ad8d08c02094f_fd76a4e93f"
-                      tabIndex={-1}
-                      defaultValue=""
+                      type="email"
+                      value={bookEmail}
+                      onChange={(e) => setBookEmail(e.target.value)}
+                      required
+                      placeholder="your@email.com"
+                      className="w-full px-5 py-4 border-2 border-border/50 bg-background/50 backdrop-blur-sm rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
                     />
-                  </div>
 
-                  <button
-                    type="submit"
-                    name="subscribe"
-                    className="group inline-flex items-center justify-center w-full px-6 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-xl text-lg font-bold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 shadow-2xl hover:shadow-blue-500/50 hover:scale-105"
-                  >
-                    <Mail className="mr-2 h-5 w-5" />
-                    Subscribe for Early Access
-                    <Sparkles className="ml-2 h-5 w-5" />
-                  </button>
-                </form>
+                    {bookSubscribeStatus === 'error' && (
+                      <p className="text-sm text-red-500">Something went wrong. Please try again.</p>
+                    )}
+
+                    <button
+                      type="submit"
+                      disabled={bookSubscribeStatus === 'loading'}
+                      className="group inline-flex items-center justify-center w-full px-6 py-4 bg-linear-to-r from-blue-600 to-purple-600 text-white rounded-xl text-lg font-bold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 shadow-2xl hover:shadow-blue-500/50 hover:scale-105 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100"
+                    >
+                      <Mail className="mr-2 h-5 w-5" />
+                      {bookSubscribeStatus === 'loading' ? 'Subscribing…' : 'Subscribe for Early Access'}
+                      {bookSubscribeStatus !== 'loading' && <Sparkles className="ml-2 h-5 w-5" />}
+                    </button>
+                  </form>
+                )}
 
                 <p className="text-center text-sm text-muted-foreground mt-4 flex items-center justify-center gap-2">
                   <Shield className="w-4 h-4" />

components/book-promotion-popup.tsx

@@ -5,6 +5,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { BookOpen, X, Sparkles } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import Confetti from 'react-confetti'
+import { EMAIL_RE, BREVO_FORM_URL, submitToBrevo } from '@/lib/newsletter'
 
 export function BookPromotionPopup() {
   const [isVisible, setIsVisible] = useState(false)
@@ -60,34 +61,35 @@ export function BookPromotionPopup() {
     }, 300)
   }
 
-  const handleSubscribe = (e: React.FormEvent) => {
-    e.preventDefault()
+  const handleSubscribe = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
 
-    if (!email) return
+    if (!email || !EMAIL_RE.test(email)) return;
 
-    // Submit to Mailchimp
-    const form = e.target as HTMLFormElement
-    const formData = new FormData(form)
-
-    // Open in new window (Mailchimp requirement)
-    const mailchimpUrl = 'https://devops-daily.us2.list-manage.com/subscribe/post?u=d1128776b290ad8d08c02094f&id=fd76a4e93f&f_id=0022c6e1f0'
-    const params = new URLSearchParams(formData as any).toString()
-    window.open(`${mailchimpUrl}&${params}`, '_blank')
+    try {
+      await submitToBrevo(email);
+    } catch (err) {
+      console.error('[newsletter] Popup subscription error:', err);
+      const w = window.open(BREVO_FORM_URL, '_blank');
+      if (!w) {
+        console.warn('[newsletter] Popup blocked. Direct user to:', BREVO_FORM_URL);
+      }
+    }
 
     // Show thank you message
-    setShowThankYou(true)
-    localStorage.setItem('book-promo-subscribed', 'true')
+    setShowThankYou(true);
+    localStorage.setItem('book-promo-subscribed', 'true');
 
     // Show celebration confetti
-    setShowConfetti(true)
+    setShowConfetti(true);
 
     // Auto-close after 3 seconds
     setTimeout(() => {
-      setShowConfetti(false)
-      setIsLoaded(false)
-      setTimeout(() => setIsVisible(false), 300)
-    }, 3000)
-  }
+      setShowConfetti(false);
+      setIsLoaded(false);
+      setTimeout(() => setIsVisible(false), 300);
+    }, 3000);
+  };
 
   if (!isVisible) return null
 
@@ -160,23 +162,20 @@ export function BookPromotionPopup() {
                         Subscribe for exclusive content & launch updates! ✨
                       </p>
 
-                      <form onSubmit={handleSubscribe} className="space-y-2">
+                      <form
+                        onSubmit={handleSubscribe}
+                        className="space-y-2"
+                      >
                         <input
                           type="email"
                           name="EMAIL"
-                          id="mce-EMAIL"
                           value={email}
                           onChange={(e) => setEmail(e.target.value)}
                           placeholder="your@email.com"
                           required
                           className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
                         />
 
-                        {/* Honeypot */}
-                        <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
-                          <input type="text" name="b_d1128776b290ad8d08c02094f_fd76a4e93f" tabIndex={-1} defaultValue="" />
-                        </div>
-
                         <Button
                           type="submit"
                           className="w-full bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 text-white font-semibold py-2.5 text-sm rounded-lg transition-all duration-200 hover:shadow-lg"

components/footer/newsletter-form.tsx

@@ -1,6 +1,29 @@
-import { Mail, ArrowRight } from 'lucide-react';
+'use client';
+
+import { useState } from 'react';
+import { Mail, ArrowRight, CheckCircle } from 'lucide-react';
+import { useNewsletterSubscribe } from '@/hooks/use-newsletter-subscribe';
 
 export function NewsletterForm() {
+  const [email, setEmail] = useState('');
+  const { status, subscribe } = useNewsletterSubscribe();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email) subscribe(email);
+  };
+
+  if (status === 'success') {
+    return (
+      <div className="p-6 bg-linear-to-br from-primary/5 to-purple-500/5 border border-primary/20 rounded-2xl shadow-lg flex items-center gap-3">
+        <CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
+        <p className="text-sm font-medium text-foreground">
+          You&apos;re subscribed! Check your inbox.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="p-6 bg-linear-to-br from-primary/5 to-purple-500/5 border border-primary/20 rounded-2xl shadow-lg">
       <div className="flex items-center gap-2 mb-3">
@@ -10,39 +33,29 @@ export function NewsletterForm() {
       <p className="text-sm text-muted-foreground mb-4 leading-relaxed">
         Get the latest DevOps insights delivered to your inbox weekly.
       </p>
-      <form
-        action="https://devops-daily.us2.list-manage.com/subscribe/post?u=d1128776b290ad8d08c02094f&amp;id=fd76a4e93f&amp;f_id=0022c6e1f0"
-        method="post"
-        target="_blank"
-        noValidate
-        className="space-y-3"
-      >
+      <form onSubmit={handleSubmit} noValidate className="space-y-3">
         <input
           type="email"
-          name="EMAIL"
-          id="mce-EMAIL"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
           required
           placeholder="your@email.com"
           className="w-full px-4 py-3 border border-border/50 bg-background/50 backdrop-blur-sm rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300"
         />
 
-        {/* Honeypot bot field */}
-        <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
-          <input
-            type="text"
-            name="b_d1128776b290ad8d08c02094f_fd76a4e93f"
-            tabIndex={-1}
-            defaultValue=""
-          />
-        </div>
+        {status === 'error' && (
+          <p className="text-xs text-red-500">Something went wrong. Please try again.</p>
+        )}
 
         <button
           type="submit"
-          name="subscribe"
-          className="group inline-flex items-center justify-center w-full px-4 py-3 bg-linear-to-r from-primary to-purple-600 text-white rounded-xl text-sm font-bold hover:from-primary/90 hover:to-purple-600/90 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
+          disabled={status === 'loading'}
+          className="group inline-flex items-center justify-center w-full px-4 py-3 bg-linear-to-r from-primary to-purple-600 text-white rounded-xl text-sm font-bold hover:from-primary/90 hover:to-purple-600/90 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100"
         >
-          Subscribe Now
-          <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
+          {status === 'loading' ? 'Subscribing…' : 'Subscribe Now'}
+          {status !== 'loading' && (
+            <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
+          )}
         </button>
       </form>
     </div>

components/newsletter-inline-form.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useState } from 'react';
+import { CheckCircle } from 'lucide-react';
+import { useNewsletterSubscribe } from '@/hooks/use-newsletter-subscribe';
+
+export function NewsletterInlineForm() {
+  const [email, setEmail] = useState('');
+  const { status, subscribe } = useNewsletterSubscribe();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (email) subscribe(email);
+  };
+
+  if (status === 'success') {
+    return (
+      <div className="flex items-center gap-2 py-2">
+        <CheckCircle className="w-4 h-4 text-green-500 shrink-0" />
+        <p className="text-sm font-medium">You&apos;re subscribed! Check your inbox.</p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} noValidate className="space-y-3">
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+        placeholder="you@example.com"
+        className="w-full px-3 py-2 border border-border bg-background rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+      />
+
+      {status === 'error' && (
+        <p className="text-xs text-red-500">Something went wrong. Please try again.</p>
+      )}
+
+      <button
+        type="submit"
+        disabled={status === 'loading'}
+        className="inline-flex items-center justify-center w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        {status === 'loading' ? 'Subscribing…' : 'Subscribe to Newsletter'}
+      </button>
+    </form>
+  );
+}

components/sponsor-sidebar.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils';
 import { Clock, Sparkles, ExternalLink } from 'lucide-react';
 import { CarbonAds } from '@/components/carbon-ads';
 import { sponsors } from '@/lib/sponsors';
+import { NewsletterInlineForm } from '@/components/newsletter-inline-form';
 
 interface SponsorSidebarProps {
   className?: string;
@@ -97,40 +98,7 @@ export function SponsorSidebar({ className, relatedPosts = [] }: SponsorSidebarP
         <p className="text-sm text-muted-foreground mb-3">
           Get the latest DevOps tips and tutorials delivered to your inbox.
         </p>
-        <form
-          action="https://devops-daily.us2.list-manage.com/subscribe/post?u=d1128776b290ad8d08c02094f&amp;id=fd76a4e93f&amp;f_id=0022c6e1f0"
-          method="post"
-          target="_blank"
-          noValidate
-          className="space-y-3"
-        >
-          <input
-            type="email"
-            name="EMAIL"
-            id="mce-EMAIL"
-            required
-            placeholder="you@example.com"
-            className="w-full px-3 py-2 border border-border bg-background rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-          />
-
-          {/* Honeypot bot field */}
-          <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
-            <input
-              type="text"
-              name="b_d1128776b290ad8d08c02094f_fd76a4e93f"
-              tabIndex={-1}
-              defaultValue=""
-            />
-          </div>
-
-          <button
-            type="submit"
-            name="subscribe"
-            className="inline-flex items-center justify-center w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors"
-          >
-            Subscribe to Newsletter
-          </button>
-        </form>
+        <NewsletterInlineForm />
       </div>
 
       {/* Related Posts Section */}

hooks/use-newsletter-subscribe.ts

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'react';
+import { BREVO_FORM_URL, EMAIL_RE, submitToBrevo } from '@/lib/newsletter';
+
+export type SubscribeStatus = 'idle' | 'loading' | 'success' | 'error';
+
+export function useNewsletterSubscribe() {
+  const [status, setStatus] = useState<SubscribeStatus>('idle');
+
+  const subscribe = async (email: string) => {
+    if (!EMAIL_RE.test(email)) {
+      setStatus('error');
+      return;
+    }
+    setStatus('loading');
+    try {
+      await submitToBrevo(email);
+      setStatus('success');
+    } catch {
+      const w = window.open(BREVO_FORM_URL, '_blank');
+      if (!w) {
+        console.warn('[newsletter] Popup blocked. Direct user to:', BREVO_FORM_URL);
+      }
+      setStatus('error');
+    }
+  };
+
+  return { status, subscribe };
+}