create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/designs/atelier/ui/home/hero-section.tsx

@@ -1,174 +1,178 @@
-'use client';
-
-import type { Product } from 'brainerce';
-import { Link } from '@/core/lib/navigation';
-import { CdnImage as Image } from '@/ui/shared/cdn-image';
-import { useTranslations } from '@/core/lib/translations';
-import { PriceDisplay } from '@/ui/product/price-display';
-import { getProductPriceInfo } from 'brainerce';
-import { IconArrowEnd, IconStar, IconSparkle } from '@/ui/shared/icons';
-
-/**
- * Homepage hero — grid-breaking composition: oversized serif headline over a
- * soft forest/sand radial wash, live-catalog photography as overlapping,
- * slightly rotated floating cards with a glassy price chip. All imagery comes
- * from useHomeData() in the parent; motion is reduced-motion guarded.
- */
-export function HeroSection({
-  storeName,
-  products = [],
-}: {
-  storeName?: string | null;
-  products?: Product[];
-}) {
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  const heroProduct = products[0];
-  const sideProduct = products[1];
-  const heroImage = heroProduct?.images?.[0]?.url;
-  const sideImage = sideProduct?.images?.[0]?.url;
-
-  return (
-    <section className="wash-hero relative overflow-hidden">
-      {/* Drifting glow blob behind the collage */}
-      <div aria-hidden="true" className="glow-blob blob-drift end-[8%] top-[18%] h-80 w-80" />
-
-      <div className="container-page relative grid items-center gap-12 pb-20 pt-12 lg:grid-cols-12 lg:gap-8 lg:pb-28 lg:pt-20">
-        {/* Copy */}
-        <div className="reveal relative z-10 max-w-2xl lg:col-span-6">
-          <span className="glass inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-semibold text-primary">
-            <IconSparkle size={16} />
-            {t('heroEyebrow')}
-          </span>
-          <h1 className="mt-6 text-[clamp(2.75rem,6.5vw,5.5rem)] leading-[1.04]">
-            {t('heroTitle')}
-          </h1>
-          <p className="mt-6 max-w-lg text-lg leading-8 text-muted-foreground">{t('heroLead')}</p>
-
-          <div className="mt-9 flex flex-wrap items-center gap-3">
-            <Link href="/products" className="btn-primary btn-lg">
-              {tc('shopNow')}
-              <IconArrowEnd size={20} className="rtl-flip" />
-            </Link>
-            <a href="#categories" className="btn-outline btn-lg bg-background/60 backdrop-blur-sm">
-              {t('heroCtaSecondary')}
-            </a>
-          </div>
-
-          {/* Soft social proof */}
-          <p className="mt-9 inline-flex items-center gap-2 text-sm text-muted-foreground">
-            <span className="inline-flex text-primary" aria-hidden="true">
-              {[1, 2, 3, 4, 5].map((n) => (
-                <IconStar key={n} size={16} filled />
-              ))}
-            </span>
-            {t('heroTrust')}
-          </p>
-        </div>
-
-        {/* Overlapping floating collage — real catalog photography */}
-        {heroImage && (
-          <div className="reveal reveal-delay-1 relative mx-auto h-[26rem] w-full max-w-md sm:h-[30rem] lg:col-span-6 lg:h-[34rem] lg:max-w-none">
-            {/* Main card — tilted, floating */}
-            <Link
-              href={`/products/${heroProduct.slug || heroProduct.id}`}
-              className="group float-slow absolute inset-y-0 start-[4%] block w-[72%] -rotate-2 overflow-hidden rounded-3xl border-4 border-background shadow-[0_36px_80px_-30px_hsl(var(--primary)/0.45)]"
-              style={{ '--float-rotate': '-2deg' } as React.CSSProperties}
-            >
-              <Image
-                src={heroImage}
-                alt={heroProduct.images?.[0]?.alt || heroProduct.name}
-                fill
-                priority
-                sizes="(max-width: 1024px) 80vw, 36vw"
-                className="img-zoom object-cover"
-              />
-              {/* Glassy shop-this chip */}
-              <span className="glass absolute bottom-5 end-5 start-5 flex items-center justify-between gap-3 px-4 py-3 sm:end-auto sm:min-w-[15rem]">
-                <span className="min-w-0">
-                  <span className="block truncate text-sm font-semibold text-foreground">
-                    {heroProduct.name}
-                  </span>
-                  <HeroPrice product={heroProduct} />
-                </span>
-                <span
-                  aria-hidden="true"
-                  className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-[0_8px_20px_-6px_hsl(var(--primary)/0.6)]"
-                >
-                  <IconArrowEnd size={18} className="rtl-flip" />
-                </span>
-              </span>
-            </Link>
-
-            {/* Secondary card — overlaps the main one, counter-tilted */}
-            {sideImage && (
-              <Link
-                href={`/products/${sideProduct.slug || sideProduct.id}`}
-                className="group float-slower absolute -end-2 top-[54%] block aspect-[3/4] w-[38%] rotate-3 overflow-hidden rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.4)] sm:end-0"
-                style={{ '--float-rotate': '3deg' } as React.CSSProperties}
-              >
-                <Image
-                  src={sideImage}
-                  alt={sideProduct.images?.[0]?.alt || sideProduct.name}
-                  fill
-                  sizes="(max-width: 1024px) 40vw, 16vw"
-                  className="img-zoom object-cover"
-                />
-                <span className="sr-only">{sideProduct.name}</span>
-              </Link>
-            )}
-
-            {/* Floating accent chip */}
-            <span
-              aria-hidden="true"
-              className="glass float-slower absolute -start-2 top-[12%] hidden -rotate-[4deg] items-center gap-2 px-4 py-2 text-sm font-semibold text-primary sm:inline-flex"
-              style={{ '--float-rotate': '-4deg' } as React.CSSProperties}
-            >
-              <IconSparkle size={18} />
-              {t('storyStat1Value')}
-            </span>
-          </div>
-        )}
-
-        {/* Empty catalog — the same floating composition as designed washes,
-            so a brand-new store still opens rich instead of half-blank. The
-            first two published products replace these automatically. */}
-        {!heroImage && (
-          <div
-            aria-hidden="true"
-            className="reveal reveal-delay-1 relative mx-auto h-[26rem] w-full max-w-md sm:h-[30rem] lg:col-span-6 lg:h-[34rem] lg:max-w-none"
-          >
-            <div
-              className="float-slow wash-forest absolute inset-y-0 start-[4%] flex w-[72%] -rotate-2 items-center justify-center overflow-hidden rounded-3xl border-4 border-background shadow-[0_36px_80px_-30px_hsl(var(--primary)/0.45)]"
-              style={{ '--float-rotate': '-2deg' } as React.CSSProperties}
-            >
-              <IconSparkle size={56} className="text-primary/25" />
-              <span className="glass absolute bottom-5 end-5 start-5 px-4 py-3 text-center text-sm font-medium text-muted-foreground">
-                {t('heroEmptyHint')}
-              </span>
-            </div>
-            <div
-              className="float-slower wash-sand absolute -end-2 top-[54%] flex aspect-[3/4] w-[38%] rotate-3 items-center justify-center rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.4)] sm:end-0"
-              style={{ '--float-rotate': '3deg' } as React.CSSProperties}
-            >
-              <IconStar size={32} filled className="text-primary/20" />
-            </div>
-          </div>
-        )}
-      </div>
-    </section>
-  );
-}
-
-function HeroPrice({ product }: { product: Product }) {
-  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
-  return (
-    <PriceDisplay
-      price={originalPrice}
-      salePrice={isOnSale ? price : undefined}
-      size="sm"
-      className="mt-0.5"
-    />
-  );
-}
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { useTranslations } from '@/core/lib/translations';
+import { PriceDisplay } from '@/ui/product/price-display';
+import { pickDisplayPrice } from '@/core/lib/display-price';
+import { useCurrency } from '@/core/lib/use-currency';
+import { IconArrowEnd, IconStar, IconSparkle } from '@/ui/shared/icons';
+
+/**
+ * Homepage hero — grid-breaking composition: oversized serif headline over a
+ * soft forest/sand radial wash, live-catalog photography as overlapping,
+ * slightly rotated floating cards with a glassy price chip. All imagery comes
+ * from useHomeData() in the parent; motion is reduced-motion guarded.
+ */
+export function HeroSection({
+  storeName,
+  products = [],
+}: {
+  storeName?: string | null;
+  products?: Product[];
+}) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  const heroProduct = products[0];
+  const sideProduct = products[1];
+  const heroImage = heroProduct?.images?.[0]?.url;
+  const sideImage = sideProduct?.images?.[0]?.url;
+
+  return (
+    <section className="wash-hero relative overflow-hidden">
+      {/* Drifting glow blob behind the collage */}
+      <div aria-hidden="true" className="glow-blob blob-drift end-[8%] top-[18%] h-80 w-80" />
+
+      <div className="container-page relative grid items-center gap-12 pb-20 pt-12 lg:grid-cols-12 lg:gap-8 lg:pb-28 lg:pt-20">
+        {/* Copy */}
+        <div className="reveal relative z-10 max-w-2xl lg:col-span-6">
+          <span className="glass inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-semibold text-primary">
+            <IconSparkle size={16} />
+            {t('heroEyebrow')}
+          </span>
+          <h1 className="mt-6 text-[clamp(2.75rem,6.5vw,5.5rem)] leading-[1.04]">
+            {t('heroTitle')}
+          </h1>
+          <p className="mt-6 max-w-lg text-lg leading-8 text-muted-foreground">{t('heroLead')}</p>
+
+          <div className="mt-9 flex flex-wrap items-center gap-3">
+            <Link href="/products" className="btn-primary btn-lg">
+              {tc('shopNow')}
+              <IconArrowEnd size={20} className="rtl-flip" />
+            </Link>
+            <a href="#categories" className="btn-outline btn-lg bg-background/60 backdrop-blur-sm">
+              {t('heroCtaSecondary')}
+            </a>
+          </div>
+
+          {/* Soft social proof */}
+          <p className="mt-9 inline-flex items-center gap-2 text-sm text-muted-foreground">
+            <span className="inline-flex text-primary" aria-hidden="true">
+              {[1, 2, 3, 4, 5].map((n) => (
+                <IconStar key={n} size={16} filled />
+              ))}
+            </span>
+            {t('heroTrust')}
+          </p>
+        </div>
+
+        {/* Overlapping floating collage — real catalog photography */}
+        {heroImage && (
+          <div className="reveal reveal-delay-1 relative mx-auto h-[26rem] w-full max-w-md sm:h-[30rem] lg:col-span-6 lg:h-[34rem] lg:max-w-none">
+            {/* Main card — tilted, floating */}
+            <Link
+              href={`/products/${heroProduct.slug || heroProduct.id}`}
+              className="group float-slow absolute inset-y-0 start-[4%] block w-[72%] -rotate-2 overflow-hidden rounded-3xl border-4 border-background shadow-[0_36px_80px_-30px_hsl(var(--primary)/0.45)]"
+              style={{ '--float-rotate': '-2deg' } as React.CSSProperties}
+            >
+              <Image
+                src={heroImage}
+                alt={heroProduct.images?.[0]?.alt || heroProduct.name}
+                fill
+                priority
+                sizes="(max-width: 1024px) 80vw, 36vw"
+                className="img-zoom object-cover"
+              />
+              {/* Glassy shop-this chip */}
+              <span className="glass absolute bottom-5 end-5 start-5 flex items-center justify-between gap-3 px-4 py-3 sm:end-auto sm:min-w-[15rem]">
+                <span className="min-w-0">
+                  <span className="block truncate text-sm font-semibold text-foreground">
+                    {heroProduct.name}
+                  </span>
+                  <HeroPrice product={heroProduct} />
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-[0_8px_20px_-6px_hsl(var(--primary)/0.6)]"
+                >
+                  <IconArrowEnd size={18} className="rtl-flip" />
+                </span>
+              </span>
+            </Link>
+
+            {/* Secondary card — overlaps the main one, counter-tilted */}
+            {sideImage && (
+              <Link
+                href={`/products/${sideProduct.slug || sideProduct.id}`}
+                className="group float-slower absolute -end-2 top-[54%] block aspect-[3/4] w-[38%] rotate-3 overflow-hidden rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.4)] sm:end-0"
+                style={{ '--float-rotate': '3deg' } as React.CSSProperties}
+              >
+                <Image
+                  src={sideImage}
+                  alt={sideProduct.images?.[0]?.alt || sideProduct.name}
+                  fill
+                  sizes="(max-width: 1024px) 40vw, 16vw"
+                  className="img-zoom object-cover"
+                />
+                <span className="sr-only">{sideProduct.name}</span>
+              </Link>
+            )}
+
+            {/* Floating accent chip */}
+            <span
+              aria-hidden="true"
+              className="glass float-slower absolute -start-2 top-[12%] hidden -rotate-[4deg] items-center gap-2 px-4 py-2 text-sm font-semibold text-primary sm:inline-flex"
+              style={{ '--float-rotate': '-4deg' } as React.CSSProperties}
+            >
+              <IconSparkle size={18} />
+              {t('storyStat1Value')}
+            </span>
+          </div>
+        )}
+
+        {/* Empty catalog — the same floating composition as designed washes,
+            so a brand-new store still opens rich instead of half-blank. The
+            first two published products replace these automatically. */}
+        {!heroImage && (
+          <div
+            aria-hidden="true"
+            className="reveal reveal-delay-1 relative mx-auto h-[26rem] w-full max-w-md sm:h-[30rem] lg:col-span-6 lg:h-[34rem] lg:max-w-none"
+          >
+            <div
+              className="float-slow wash-forest absolute inset-y-0 start-[4%] flex w-[72%] -rotate-2 items-center justify-center overflow-hidden rounded-3xl border-4 border-background shadow-[0_36px_80px_-30px_hsl(var(--primary)/0.45)]"
+              style={{ '--float-rotate': '-2deg' } as React.CSSProperties}
+            >
+              <IconSparkle size={56} className="text-primary/25" />
+              <span className="glass absolute bottom-5 end-5 start-5 px-4 py-3 text-center text-sm font-medium text-muted-foreground">
+                {t('heroEmptyHint')}
+              </span>
+            </div>
+            <div
+              className="float-slower wash-sand absolute -end-2 top-[54%] flex aspect-[3/4] w-[38%] rotate-3 items-center justify-center rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.4)] sm:end-0"
+              style={{ '--float-rotate': '3deg' } as React.CSSProperties}
+            >
+              <IconStar size={32} filled className="text-primary/20" />
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+function HeroPrice({ product }: { product: Product }) {
+  // Region-aware, like every other Product price on the site. Without this the
+  // hero quotes the store currency while the grid below it quotes the region's.
+  const display = pickDisplayPrice(product, useCurrency());
+  return (
+    <PriceDisplay
+      price={display.price}
+      salePrice={display.salePrice ?? undefined}
+      currency={display.currency}
+      size="sm"
+      className="mt-0.5"
+    />
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/home-client.tsx

@@ -4,7 +4,6 @@ import { useStoreInfo } from '@/core/providers/store-provider';
 import { useHomeData } from '@/core/hooks/use-home-data';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 import { Reveal } from '@/ui/shared/reveal';
-import { DiscountBannerStrip } from './discount-banner-strip';
 import { HeroSection } from './hero-section';
 import { BenefitsBand } from './benefits-band';
 import { FeaturedProductsSection } from './featured-products-section';
@@ -15,13 +14,13 @@ import { NewsletterSection } from './newsletter-section';
 
 /**
  * Homepage composition — data via useHomeData() and useStoreInfo():
- * banners → hero (floating collage) → tilted values marquee → trust band →
- * featured grid → category tiles → studio story → testimonials → newsletter.
+ * hero (floating collage) → tilted values marquee → trust band →
+ * featured grid → category tiles → studio story → ratings → newsletter.
  * Sections fade up on scroll via <Reveal> (reduced-motion safe).
  */
 export function HomeClient() {
   const { storeInfo, loading: storeLoading } = useStoreInfo();
-  const { products, banners, loading } = useHomeData();
+  const { products, loading } = useHomeData();
 
   if (storeLoading || loading) {
     return <LoadingSpinner size="lg" className="min-h-[70vh]" />;
@@ -29,7 +28,6 @@ export function HomeClient() {
 
   return (
     <div className="overflow-x-clip">
-      <DiscountBannerStrip banners={banners} />
       <HeroSection storeName={storeInfo?.name} products={products} />
       <Reveal>
         <BenefitsBand />
@@ -44,7 +42,7 @@ export function HomeClient() {
         <EditorialBand />
       </Reveal>
       <Reveal>
-        <TestimonialsBand />
+        <TestimonialsBand products={products} />
       </Reveal>
       <Reveal>
         <NewsletterSection />

package/templates/nextjs/designs/atelier/ui/home/newsletter-section.tsx

@@ -1,78 +1,150 @@
-'use client';
-
-/**
- * Newsletter signup band — forest brand block with an inline email form.
- * Client-side success state (template default; wire a provider later).
- */
-import * as React from 'react';
-import { useTranslations } from '@/core/lib/translations';
-import { IconMail, IconCheck } from '@/ui/shared/icons';
-
-export function NewsletterSection() {
-  const t = useTranslations('home');
-  const [email, setEmail] = React.useState('');
-  const [done, setDone] = React.useState(false);
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!email.trim()) return;
-    setDone(true);
-  }
-
-  return (
-    <section className="section-pad">
-      <div className="container-page">
-        <div className="wash-forest relative overflow-hidden rounded-3xl px-6 py-12 text-primary-foreground shadow-[0_30px_70px_-28px_hsl(var(--primary)/0.55)] sm:px-12 lg:px-20 lg:py-16">
-          <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
-            <span
-              aria-hidden="true"
-              className="mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-primary-foreground/10"
-            >
-              <IconMail size={24} />
-            </span>
-            <h2 className="text-4xl text-primary-foreground sm:text-5xl">{t('newsletterTitle')}</h2>
-            <p className="mt-3 max-w-lg text-primary-foreground/75">{t('newsletterSubtitle')}</p>
-
-            {done ? (
-              <p
-                role="status"
-                className="mt-8 inline-flex items-center gap-2 rounded-full bg-primary-foreground/10 px-5 py-3 text-sm font-semibold"
-              >
-                <IconCheck size={18} />
-                {t('newsletterSuccess')}
-              </p>
-            ) : (
-              <form
-                onSubmit={handleSubmit}
-                className="mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row"
-              >
-                <label className="sr-only" htmlFor="newsletter-email">
-                  {t('newsletterPlaceholder')}
-                </label>
-                <input
-                  id="newsletter-email"
-                  type="email"
-                  required
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder={t('newsletterPlaceholder')}
-                  className="input h-12 flex-1 border-transparent bg-background text-foreground"
-                />
-                <button
-                  type="submit"
-                  className="btn h-12 shrink-0 bg-background px-7 text-foreground hover:bg-background/90"
-                >
-                  {t('newsletterCta')}
-                </button>
-              </form>
-            )}
-
-            {!done && (
-              <p className="mt-3 text-xs text-primary-foreground/60">{t('newsletterPrivacy')}</p>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
+'use client';
+
+/**
+ * Newsletter signup band — forest brand block with an inline email form.
+ *
+ * ⛔ IT IS CONFIRMED OPT-IN AND THAT CANNOT BE TURNED OFF.
+ * `marketing.subscribe()` creates the contact and mails a confirmation link.
+ * The address is unmailable, and invisible to every campaign audience, until
+ * the recipient clicks it, which is why the success state says "check your
+ * email" and never "you're subscribed". The second is a lie until a click
+ * lands in a mailbox this code cannot see, and most people never click.
+ *
+ * ⛔ THE RESPONSE CARRIES NO INFORMATION. `{ ok: true }` comes back identically
+ * for a new address, one that confirmed months ago, one inside its 24-hour
+ * resend cooldown, and one suppressed after a bounce. Deliberately so: a
+ * response that told them apart would turn this public form into a way to test
+ * whether a given person shops here. Render one success state and stop.
+ *
+ * `source` is the only signal the merchant gets about WHICH capture works, so
+ * it differs from the footer's. Rate limited to 3 requests / 60s per IP.
+ *
+ * See `ui/layout/newsletter-signup.tsx` for the footer's copy of this.
+ */
+import * as React from 'react';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { IconMail, IconCheck } from '@/ui/shared/icons';
+
+export function NewsletterSection() {
+  const t = useTranslations('home');
+  const tn = useTranslations('newsletter');
+  const [email, setEmail] = React.useState('');
+  const [honeypot, setHoneypot] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [done, setDone] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // <html lang> is set from the active locale, and passing it decides the
+  // language of the confirmation email. Omit it and a Hebrew shopper gets
+  // English.
+  const locale = React.useMemo(() => {
+    if (typeof document !== 'undefined') return document.documentElement.lang || undefined;
+    return undefined;
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading || !email.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await getClient().marketing.subscribe({
+        email: email.trim(),
+        locale,
+        source: 'home-band',
+        honeypot,
+      });
+      setDone(true);
+      setEmail('');
+    } catch {
+      // A 429 lands here too. The copy stays generic rather than explaining
+      // the rate limit, which would only show an abuser where the edge is.
+      setError(tn('genericError'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <section className="section-pad">
+      <div className="container-page">
+        <div className="wash-forest relative overflow-hidden rounded-3xl px-6 py-12 text-primary-foreground shadow-[0_30px_70px_-28px_hsl(var(--primary)/0.55)] sm:px-12 lg:px-20 lg:py-16">
+          <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
+            <span
+              aria-hidden="true"
+              className="mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-primary-foreground/10"
+            >
+              <IconMail size={24} />
+            </span>
+            <h2 className="text-4xl text-primary-foreground sm:text-5xl">{t('newsletterTitle')}</h2>
+            <p className="mt-3 max-w-lg text-primary-foreground/75">{t('newsletterSubtitle')}</p>
+
+            {done ? (
+              <p
+                role="status"
+                className="mt-8 inline-flex items-center gap-2 rounded-full bg-primary-foreground/10 px-5 py-3 text-sm font-semibold"
+              >
+                <IconCheck size={18} />
+                {t('newsletterSuccess')}
+              </p>
+            ) : (
+              <form
+                onSubmit={handleSubmit}
+                className="mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row"
+              >
+                <label className="sr-only" htmlFor="newsletter-email">
+                  {t('newsletterPlaceholder')}
+                </label>
+                <input
+                  id="newsletter-email"
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder={t('newsletterPlaceholder')}
+                  className="input h-12 flex-1 border-transparent bg-background text-foreground"
+                />
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="btn h-12 shrink-0 bg-background px-7 text-foreground hover:bg-background/90 disabled:opacity-60"
+                >
+                  {loading ? tn('submitting') : t('newsletterCta')}
+                </button>
+
+                {/*
+                  Honeypot. Bots complete every text input; a human never sees
+                  this one, so a non-empty value rejects the request
+                  server-side. Positioned off-screen rather than
+                  `display:none`, because some bots skip hidden inputs, and kept out
+                  of the tab order and the accessibility tree.
+                */}
+                <input
+                  type="text"
+                  name="company_website"
+                  tabIndex={-1}
+                  autoComplete="off"
+                  aria-hidden="true"
+                  value={honeypot}
+                  onChange={(e) => setHoneypot(e.target.value)}
+                  style={{ position: 'absolute', left: '-9999px', width: 1, height: 1 }}
+                />
+              </form>
+            )}
+
+            {error ? (
+              <p role="alert" className="mt-3 text-sm text-primary-foreground">
+                {error}
+              </p>
+            ) : null}
+
+            {!done && (
+              <p className="mt-3 text-xs text-primary-foreground/60">{t('newsletterPrivacy')}</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}