export const htmlLight = `<a href="https://minimoth.dev?utm_source=powered_by" target="_blank" rel="noopener">
  <img
    src="https://minimoth.dev/powered-by/powered-by-light-logo.svg"
    alt="Powered by MiniMoth"
    height="28"
  />
</a>`

export const htmlDark = `<a href="https://minimoth.dev?utm_source=powered_by" target="_blank" rel="noopener">
  <img
    src="https://minimoth.dev/powered-by/powered-by-dark-logo.svg"
    alt="Powered by MiniMoth"
    height="28"
  />
</a>`

<Callout variant="accent">
  <p>
    <span className="text-saffron font-medium">Why this matters:</span> MiniMoth delivers OTPs primarily via
    WhatsApp, with SMS as fallback. On WhatsApp, messages arrive from MiniMoth's registered business account.
    On SMS, they arrive from MiniMoth's TRAI DLT-registered sender ID. Either way, your users see MiniMoth's
    name — not yours. Displaying the <span className="text-ink font-medium">Powered by MiniMoth</span> badge near
    your phone number or OTP input lets users recognise the sender before the message arrives, building
    trust instead of leaving them wondering who "MiniMoth" is.
  </p>
</Callout>

## Badge variants

Four variants are available — light and dark backgrounds, with and without the moth mark. All badges link to `minimoth.dev` and are hosted on our CDN.

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10 mt-6">
  <AssetPreview src="https://minimoth.dev/powered-by/powered-by-light-logo.svg" alt="Powered by MiniMoth — light with logo" bg="light" caption="Light — with logo" />
  <AssetPreview src="https://minimoth.dev/powered-by/powered-by-dark-logo.svg" alt="Powered by MiniMoth — dark with logo" bg="dark" caption="Dark — with logo" />
  <AssetPreview src="https://minimoth.dev/powered-by/powered-by-light.svg" alt="Powered by MiniMoth — light text only" bg="light" caption="Light — text only" />
  <AssetPreview src="https://minimoth.dev/powered-by/powered-by-dark.svg" alt="Powered by MiniMoth — dark text only" bg="dark" caption="Dark — text only" />
</div>

## Where to place it

- Near the phone number input — before the user submits, so they know what sender to expect
- On the OTP entry screen — next to the "enter the code you received" prompt
- Minimum display width: 120 px

## Placement examples

Show the badge where users are about to receive a message — before they look at their phone.

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10 mt-6">
  <div>
    <p className="text-xs text-ink/40 uppercase tracking-widest mb-3">Phone number screen</p>
    <div className="rounded-xl border border-white/10 bg-[#1a1714] p-6 space-y-4">
      <p className="text-sm font-medium text-white/90">Enter your phone number</p>
      <div className="rounded-md border border-white/15 bg-white/5 px-3 py-2.5 text-sm text-white/40 font-mono">
        +91 98765 43210
      </div>
      <div className="rounded-md bg-saffron text-charcoal text-sm font-semibold text-center py-2.5">
        Send OTP
      </div>
      <div className="flex items-center gap-2 pt-1">
        <img src="/powered-by/powered-by-dark-logo.svg" alt="Powered by MiniMoth" height="20" style={{ height: '20px' }} />
      </div>
    </div>
  </div>
  <div>
    <p className="text-xs text-ink/40 uppercase tracking-widest mb-3">OTP entry screen</p>
    <div className="rounded-xl border border-white/10 bg-[#1a1714] p-6 space-y-4">
      <p className="text-sm font-medium text-white/90">Enter the code</p>
      <p className="text-xs text-white/40">Sent to +91 98765 43210 via WhatsApp</p>
      <div className="flex gap-2">
        {['1','2','3','4','5','6'].map((d) => (
          <div className="flex-1 rounded-md border border-white/15 bg-white/5 py-2.5 text-center text-sm font-mono font-medium text-white/80">
            {d}
          </div>
        ))}
      </div>
      <div className="flex items-center gap-2 pt-1">
        <img src="/powered-by/powered-by-dark-logo.svg" alt="Powered by MiniMoth" height="20" style={{ height: '20px' }} />
      </div>
    </div>
  </div>
</div>

## Usage

Badges are hosted on our CDN — no self-hosting needed. Copy the snippet for your background and drop it in.

**Light background**

<CodeBlock code={htmlLight} lang="html" />

**Dark background**

<CodeBlock code={htmlDark} lang="html" />

## Usage terms

- Displaying this badge confirms that your product uses MiniMoth to deliver OTPs. It does not imply a partnership, endorsement, or any formal relationship beyond platform use.
- Do not alter the badge design, colors, or linked URL.
- MiniMoth reserves the right to revoke permission to use these assets at any time.

See [Terms of Service](/terms#brand-assets) for the full brand asset policy.

## Download <span className="text-sm font-normal text-ink/40">— optional</span>

The CDN snippets above are the easiest path. Download only if you need to self-host the files.

<div className="border border-white/10 rounded-lg overflow-hidden">
  {[
    { label: 'Light — with logo', svg: 'powered-by-light-logo.svg', png: 'powered-by-light-logo.png' },
    { label: 'Dark — with logo', svg: 'powered-by-dark-logo.svg', png: 'powered-by-dark-logo.png' },
    { label: 'Light — text only', svg: 'powered-by-light.svg', png: 'powered-by-light.png' },
    { label: 'Dark — text only', svg: 'powered-by-dark.svg', png: 'powered-by-dark.png' },
  ].map(({ label, svg, png }, i) => (
    <div className={`flex items-center justify-between px-5 py-3 text-sm ${i > 0 ? 'border-t border-white/10' : ''}`}>
      <span className="text-ink/50">{label}</span>
      <div className="flex gap-4">
        <a href={`/powered-by/${svg}`} download className="text-ink/40 hover:text-saffron transition-colors font-medium">SVG</a>
        <a href={`/powered-by/${png}`} download className="text-ink/40 hover:text-saffron transition-colors font-medium">PNG</a>
      </div>
    </div>
  ))}
</div>

---

Full documentation index: https://minimoth.dev/llms.txt