Small 04 brand

---
/**
 * Small 04 brand: The logo beside an email signup, with the copyright under them, on the brand colour.
 *
 * @block footers
 * @order 40
 */
import { Orbit } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import Input from '@/components/apogee/Input/Input.astro'
import { type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

/** @composable */
interface Props extends FooterContent {}

const {
  brand = 'Example',
  submitLabel = 'Subscribe',
  copyright = '© 2026 Example. All rights reserved.',
} = Astro.props
---

<Section as="footer" spacing="small" background="primary">
  <div class="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
    <Link href="/" color="inherit" underline="none" class="inline-flex items-center gap-2 text-lg font-semibold "><FeaturedIcon theme="solid" color="neutral" size="small"><Orbit /></FeaturedIcon>{brand}</Link>
    <div class="flex flex-col gap-4 ">
      <form method="post" class="flex flex-col gap-3 sm:flex-row">
        <Input type="email" name="email" placeholder="Enter your email" aria-label="Email" autocomplete="email" required class="sm:w-64" />
        <Button type="submit" color="neutral">{submitLabel}</Button>
      </form>
    </div>
  </div>
  {copyright && <p class="opacity-85 mt-8 md:text-end">{copyright}</p>}
</Section>