Newsletter — Inline Bar

---
//    VELOCITY COMPONENT · theming
// 
//    Colours here are Tailwind `primary-*` / `accent-*`, which resolve through
//    the Velocity preset. Out of the box they are a neutral indigo — NOT the
//    Aidxn brand — so this drops into your project without dragging our look in.
// 
//    ⚡ NOT USING VELOCITY? Run this once, in your project root:
// 
//          velocityx theme
// 
//    It writes velocity-preset.cjs + velocity-theme.css. Add the preset to your
//    tailwind.config, import the css, then set your whole brand in ONE place:
// 
//          :root {
//            --vx-brand: custom;
//            --vx-primary-600: 220 38 38;   <- your action colour
//            --vx-primary-700: 185 28 28;
//          }
// 
//    ⚠️  Raw RGB channels, space separated — NOT hex. `#DC2626` here silently
//        breaks every /opacity variant in the library (bg-primary-600/20 etc).
// 
//    Prefer not to install anything? Find-and-replace `primary-` with your own
//    scale name. Nothing else in this file depends on Velocity.
/**
 * NewsletterInline — a slim single-row email capture bar for footers or
 * inline in-content placements. Email + button sit side by side on desktop,
 * stack on mobile. Presentational only.
 */
export interface Props {
  action?: string;
  method?: string;
  heading?: string;
  subheading?: string;
  submitLabel?: string;
  placeholder?: string;
  className?: string;
}

const {
  action = '#',
  method = 'POST',
  heading = 'Get occasional build notes',
  subheading = 'No spam, unsubscribe any time.',
  submitLabel = 'Subscribe',
  placeholder = 'you@company.com',
  className = '',
} = Astro.props;
---

<div class:list={['flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6', className]}>
  <div class="min-w-0">
    <p class="font-semibold text-primary-950 dark:text-white">{heading}</p>
    <p class="body-sm text-primary-950/50 dark:text-primary-200/50 mt-0.5">{subheading}</p>
  </div>

  <form action={action} method={method} class="flex w-full sm:w-auto flex-col xs:flex-row gap-2.5 shrink-0">
    <label for="nli-email" class="sr-only">Email address</label>
    <input
      id="nli-email"
      name="email"
      type="email"
      required
      autocomplete="email"
      placeholder={placeholder}
      class="w-full sm:w-64 rounded-xl border-2 border-primary-200 dark:border-primary-800 bg-white dark:bg-primary-950/60 px-4 py-2.5 text-sm font-medium text-primary-950 dark:text-white placeholder:text-primary-950/40 dark:placeholder:text-primary-300/40 outline-none transition focus:border-primary-500 focus:ring-4 focus:ring-primary-500/15"
    />
    <button type="submit" class="btn btn-primary shrink-0">{submitLabel}</button>
  </form>
</div>