1) src/services/ai/business-names.ts (full file)
// src/services/ai/business-names.ts
export type BusinessNameStyle = 'Modern' | 'Classic' | 'Creative' | 'Professional' | 'Playful';

export type Randomness = 'low' | 'medium' | 'high';
export type DomainTLD = '.com' | '.co' | '.ai' | '.io' | '.app';

export interface GenerateBusinessNamesInput {
  industry: string;
  keywords: string;
  style: BusinessNameStyle;
  count?: number;

  // New (safe to ignore server-side if not supported)
  randomness?: Randomness;
  description?: string;
  vibe?: string[]; // ['modern','techy',...]
  length_range?: [number, number];
  starts_with?: string;
  must_include?: string; // comma sep ok
  must_exclude?: string; // comma sep ok
  tlds?: DomainTLD[];
  require_available?: boolean;
}

export interface TLDBadge {
  tld: DomainTLD | string;
  available: boolean;
}

export interface GeneratedBusinessName {
  name: string;
  description?: string;
  available: boolean;      // .com availability for backward-compat
  tldBadges?: TLDBadge[];  // extra TLDs availability
}

const DEFAULT_TLDS: DomainTLD[] = ['.com', '.ai'];

export async function generateBusinessNames(
  input: GenerateBusinessNamesInput
): Promise<GeneratedBusinessName[]> {
  const body = {
    ...input,
    tlds: input.tlds?.length ? input.tlds : DEFAULT_TLDS,
    count: input.count ?? 12,
  };

  try {
    // If you already had this endpoint, this keeps it working.
    const res = await fetch('/api/ai/business-names', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    if (res.ok) {
      const data = await res.json();
      // Expect: { names: [{ name, description?, available, tldBadges? }, ...] }
      if (Array.isArray(data?.names)) return data.names as GeneratedBusinessName[];
    }
  } catch (err) {
    console.warn('Falling back to local generator:', err);
  }

  // Fallback local generator (so the UI still works in dev)
  const seeds = synthesize(body);
  const checked = await checkDomainsFor(seeds, body.tlds!);
  return checked;
}

// --- helpers -------------------------------------------------------------

function synthesize(input: GenerateBusinessNamesInput): string[] {
  const base = input.keywords
    .split(',')
    .map(s => s.trim())
    .filter(Boolean);

  // a tiny brandable mixer
  const endings = ['ly', 'io', 'ify', 'verse', 'lab', 'nest', 'mint', 'nova', 'hub', 'loop', 'grid', 'forge'];
  const results = new Set<string>();

  for (const k of base) {
    const K = k.replace(/[^a-z0-9]/gi, '');
    if (!K) continue;

    results.add(cap(K));
    results.add(`${cap(K)}Lab`);
    results.add(`${cap(K)}Nova`);
    results.add(`${cap(K)}ly`);
    results.add(`${cap(K)}ify`);

    for (const e of endings) results.add(cap(K) + e);

    // mix with industry token
    const firstIndustry = input.industry.split(/[,\s]/)[0]?.replace(/[^a-z0-9]/gi, '') || '';
    if (firstIndustry) {
      results.add(cap(firstIndustry) + cap(K));
      results.add(cap(K) + cap(firstIndustry));
    }
  }

  // pad if too short
  while (results.size < (input.count ?? 12)) {
    const r = randomToken();
    results.add(r);
  }

  return Array.from(results).slice(0, input.count ?? 12);
}

function cap(s: string) {
  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
}

function randomToken() {
  const pieces = ['Caffe', 'Mocha', 'Brew', 'Pulse', 'Prime', 'Astra', 'Neo', 'Cortex', 'Nova', 'Mint', 'Nest', 'Foundry'];
  const a = pieces[Math.floor(Math.random() * pieces.length)];
  const b = pieces[Math.floor(Math.random() * pieces.length)];
  return a === b ? `${a}` : `${a}${b}`;
}

async function checkDomainsFor(names: string[], tlds: DomainTLD[]): Promise<GeneratedBusinessName[]> {
  // TODO: replace with your GoDaddy API lookup.
  // For now we pseudo-randomize availability so UI is useful immediately.
  return names.map(n => {
    const badges: TLDBadge[] = tlds.map(t => ({
      tld: t,
      available: hash(n + t) % 3 !== 0, // 2/3 chance "available"
    }));
    const comAvail = badges.find(b => b.tld === '.com')?.available ?? true;
    return { name: n, available: comAvail, tldBadges: badges };
  });
}

function hash(s: string) {
  let h = 0;
  for (let i = 0; i < s.length; i++) h = (h << 5) - h + s.charCodeAt(i);
  return Math.abs(h);
}

2) src/components/brand/LogoPreview.tsx (new file)

A tiny component that “Namelix-ifies” a name by previewing it in curated Google Fonts + color blocks.

// src/components/brand/LogoPreview.tsx
import React, { useEffect } from 'react';

type PreviewPalette = { bg: string; fg: string };

const PALETTES: PreviewPalette[] = [
  { bg: '#ffffff', fg: '#111827' },
  { bg: '#0f172a', fg: '#e2e8f0' },
  { bg: '#111827', fg: '#a7f3d0' },
  { bg: '#fde68a', fg: '#1f2937' },
  { bg: '#f1f5f9', fg: '#0f172a' },
];

const FONTS = [
  { family: 'Poppins', weight: 600 },
  { family: 'Montserrat', weight: 700 },
  { family: 'Playfair Display', weight: 600 },
  { family: 'Inter', weight: 800 },
  { family: 'Outfit', weight: 700 },
  { family: 'Raleway', weight: 700 },
  { family: 'Rubik', weight: 700 },
];

function loadGoogleFonts() {
  const existed = document.getElementById('ibrandbiz-google-fonts');
  if (existed) return;
  const link = document.createElement('link');
  link.id = 'ibrandbiz-google-fonts';
  link.rel = 'stylesheet';
  link.href =
    'https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&family=Montserrat:wght@700&family=Outfit:wght@700&family=Poppins:wght@600&family=Playfair+Display:wght@600&family=Raleway:wght@700&family=Rubik:wght@700&display=swap';
  document.head.appendChild(link);
}

export function LogoPreview({ name }: { name: string }) {
  useEffect(() => loadGoogleFonts(), []);

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
      {FONTS.slice(0, 6).map((font, i) => {
        const pal = PALETTES[i % PALETTES.length];
        return (
          <div
            key={`${font.family}-${i}`}
            className="rounded-lg p-5 flex items-center justify-center"
            style={{ backgroundColor: pal.bg }}
          >
            <span
              style={{
                fontFamily: `'${font.family}', system-ui, sans-serif`,
                fontWeight: font.weight as any,
                color: pal.fg,
                letterSpacing: '0.3px',
                fontSize: '1.25rem',
              }}
            >
              {name}
            </span>
          </div>
        );
      })}
    </div>
  );
}

3) src/pages/BusinessName.tsx (replace with this upgraded version)

Adds an expandable “Logo Previews” section inside each generated card (matching what you saw in Namelix), using the new LogoPreview component. Everything else you had remains.

import React, { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { Slider } from '@/components/ui/slider';
import { Switch } from '@/components/ui/switch';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Wand2, Check, X, Heart, Loader2, ArrowRight, Eye, EyeOff } from 'lucide-react';
import {
  generateBusinessNames,
  type GeneratedBusinessName,
  type BusinessNameStyle,
  type Randomness,
  type DomainTLD,
} from '@/services/ai/business-names';
import { useLocation } from 'wouter';
import { useAuth } from '@/contexts/AuthContext';
import { LogoPreview } from '@/components/brand/LogoPreview';

type Vibe = 'modern' | 'professional' | 'creative' | 'playful' | 'luxury' | 'techy' | 'organic';

export default function BusinessName() {
  const [industry, setIndustry] = useState('');
  const [keywords, setKeywords] = useState('');
  const [description, setDescription] = useState('');
  const [selectedStyle, setSelectedStyle] = useState<BusinessNameStyle>('Modern');
  const [randomness, setRandomness] = useState<Randomness>('medium');
  const [vibes, setVibes] = useState<Vibe[]>(['modern']);
  const [lengthRange, setLengthRange] = useState<[number, number]>([6, 10]);
  const [startsWith, setStartsWith] = useState('');
  const [mustInclude, setMustInclude] = useState('');
  const [mustExclude, setMustExclude] = useState('');
  const [tlds, setTlds] = useState<DomainTLD[]>(['.com', '.ai']);
  const [requireAvailable, setRequireAvailable] = useState(true);

  const [isGenerating, setIsGenerating] = useState(false);
  const [generatedNames, setGeneratedNames] = useState<GeneratedBusinessName[]>([]);
  const [savedNames, setSavedNames] = useState<GeneratedBusinessName[]>([]);
  const [expandedPreview, setExpandedPreview] = useState<number | null>(null);

  const [, setLocation] = useLocation();
  const { currentUser } = useAuth();

  const styles: BusinessNameStyle[] = ['Modern', 'Classic', 'Creative', 'Professional', 'Playful'];
  const SAVED_NAMES_KEY = 'ibrandbiz-saved-names';

  useEffect(() => {
    try {
      const saved = localStorage.getItem(SAVED_NAMES_KEY);
      if (saved) setSavedNames(JSON.parse(saved));
    } catch (error) {
      console.error('Error loading saved names:', error);
    }
  }, []);

  useEffect(() => {
    try {
      localStorage.setItem(SAVED_NAMES_KEY, JSON.stringify(savedNames));
    } catch (error) {
      console.error('Error saving names to localStorage:', error);
    }
  }, [savedNames]);

  const toggleSave = (nameData: GeneratedBusinessName) => {
    setSavedNames(prev => {
      const isAlreadySaved = prev.some(saved => saved.name === nameData.name);
      return isAlreadySaved ? prev.filter(s => s.name !== nameData.name) : [...prev, nameData];
    });
  };
  const isNameSaved = (name: string) => savedNames.some(s => s.name === name);

  const sendToBrandKit = (businessName: string) => {
    setLocation(`/brand-kit?name=${encodeURIComponent(businessName)}`);
  };
  const goToDomains = (businessName: string) => {
    setLocation(`/domains?search=${encodeURIComponent(businessName.toLowerCase())}`);
  };

  const toggleArrayValue = <T,>(arr: T[], value: T): T[] =>
    arr.includes(value) ? arr.filter(v => v !== value) : [...arr, value];

  const handleGenerateNames = async () => {
    if (!industry.trim() || !keywords.trim()) {
      alert('Please enter both industry and keywords to generate names.');
      return;
    }
    setExpandedPreview(null);
    setIsGenerating(true);
    setGeneratedNames([]);

    try {
      const names = await generateBusinessNames({
        industry: industry.trim(),
        keywords: keywords.trim(),
        style: selectedStyle,
        count: 12,
        randomness,
        description: description.trim() || undefined,
        vibe: vibes,
        length_range: lengthRange,
        starts_with: startsWith.trim() || undefined,
        must_include: mustInclude.trim(),
        must_exclude: mustExclude.trim(),
        tlds,
        require_available: requireAvailable,
      } as any);
      setGeneratedNames(names);
    } catch (error) {
      console.error('Failed to generate names:', error);
      alert('Failed to generate business names. Please try again.');
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-bold text-dark">Business Name Wizard</h2>
          <p className="text-muted-foreground mt-2">
            Find the perfect name for your business with AI-powered suggestions
          </p>
        </div>
      </div>

      {/* Wizard + Form */}
      <Card>
        <div className="p-6 border-b border-border">
          <h3 className="text-xl font-semibold text-dark">Generate Business Names</h3>
          <p className="text-base font-semibold text-ibrand-dark-blue mt-2">
            Create a short, brandable business name using artificial intelligence
          </p>
        </div>
        <CardContent className="p-6 space-y-6">
          <Tabs defaultValue="style" className="w-full">
            <TabsList className="grid grid-cols-3 w-full md:w-auto">
              <TabsTrigger value="style">Name Style</TabsTrigger>
              <TabsTrigger value="randomness">Randomness</TabsTrigger>
              <TabsTrigger value="brand">Brand Info & Domains</TabsTrigger>
            </TabsList>

            {/* STYLE */}
            <TabsContent value="style" className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="industry-category" className="block text-sm font-medium text-foreground mb-2">
                    Industry/Category
                  </Label>
                  <Input
                    id="industry-category"
                    type="text"
                    placeholder="e.g., Coffee Shop, Tech Startup, Consulting"
                    value={industry}
                    onChange={(e) => setIndustry(e.target.value)}
                  />
                </div>
                <div>
                  <Label htmlFor="keywords" className="block text-sm font-medium text-foreground mb-2">
                    Keywords
                  </Label>
                  <Input
                    id="keywords"
                    type="text"
                    placeholder="e.g., fast, reliable, premium"
                    value={keywords}
                    onChange={(e) => setKeywords(e.target.value)}
                  />
                </div>
              </div>

              <div>
                <Label className="block text-sm font-medium text-foreground mb-2">Style Preference</Label>
                <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
                  {styles.map((style) => (
                    <button
                      key={style}
                      onClick={() => setSelectedStyle(style)}
                      className={`p-3 border rounded-lg text-center transition-colors ${
                        selectedStyle === style
                          ? 'border-primary bg-primary/5'
                          : 'border-border hover:border-primary hover:bg-primary/5'
                      }`}
                      disabled={isGenerating}
                    >
                      <span className="text-sm">{style}</span>
                    </button>
                  ))}
                </div>
              </div>
            </TabsContent>

            {/* RANDOMNESS */}
            <TabsContent value="randomness" className="space-y-4">
              <Label className="block text-sm font-medium text-foreground">Select generation randomness</Label>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                {(['low', 'medium', 'high'] as Randomness[]).map(r => (
                  <button
                    key={r}
                    onClick={() => setRandomness(r)}
                    className={`p-3 border rounded-lg text-left transition-colors ${
                      randomness === r ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'
                    }`}
                    disabled={isGenerating}
                  >
                    <div className="font-medium capitalize">{r}</div>
                    <div className="text-xs text-muted-foreground">
                      {r === 'low' && 'Less random. The most direct name ideas.'}
                      {r === 'medium' && 'Balanced. More creative results.'}
                      {r === 'high' && 'Wildcard. More varied results.'}
                    </div>
                  </button>
                ))}
              </div>
            </TabsContent>

            {/* BRAND INFO & DOMAINS */}
            <TabsContent value="brand" className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label className="block text-sm font-medium text-foreground mb-2">Business description (optional)</Label>
                  <Input
                    type="text"
                    placeholder="One sentence about what you do or for whom"
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                  />
                </div>
                <div>
                  <Label className="block text-sm font-medium text-foreground mb-2">Starts with (optional)</Label>
                  <Input
                    type="text"
                    placeholder="e.g., A, Neo, Omni"
                    value={startsWith}
                    onChange={(e) => setStartsWith(e.target.value)}
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label className="block text-sm font-medium text-foreground mb-2">Must include (comma separated)</Label>
                  <Input
                    type="text"
                    placeholder="e.g., lab, cloud"
                    value={mustInclude}
                    onChange={(e) => setMustInclude(e.target.value)}
                  />
                </div>
                <div>
                  <Label className="block text-sm font-medium text-foreground mb-2">Must NOT include (comma separated)</Label>
                  <Input
                    type="text"
                    placeholder="e.g., tech, corp"
                    value={mustExclude}
                    onChange={(e) => setMustExclude(e.target.value)}
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label className="block text-sm font-medium text-foreground mb-2">Vibe</Label>
                  <div className="flex flex-wrap gap-2">
                    {(['modern','professional','creative','playful','luxury','techy','organic'] as Vibe[]).map(v => (
                      <Badge
                        key={v}
                        variant={vibes.includes(v) ? 'default' : 'secondary'}
                        className="cursor-pointer capitalize"
                        onClick={() => setVibes(prev => toggleArrayValue(prev, v))}
                      >
                        {v}
                      </Badge>
                    ))}
                  </div>
                </div>

                <div>
                  <Label className="block text-sm font-medium text-foreground mb-2">Name length (characters)</Label>
                  <div className="px-1">
                    <Slider
                      min={4}
                      max={14}
                      step={1}
                      value={lengthRange}
                      onValueChange={(v) => setLengthRange([v[0], v[1]] as [number, number])}
                    />
                    <div className="text-xs text-muted-foreground mt-2">
                      {lengthRange[0]} – {lengthRange[1]} chars
                    </div>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label className="block text-sm font-medium text-foreground mb-2">Preferred TLDs</Label>
                  <div className="flex flex-wrap gap-2">
                    {(['.com','.co','.ai','.io','.app'] as DomainTLD[]).map(ext => (
                      <Badge
                        key={ext}
                        variant={tlds.includes(ext) ? 'default' : 'secondary'}
                        className="cursor-pointer"
                        onClick={() => setTlds(prev => toggleArrayValue(prev, ext))}
                      >
                        {ext}
                      </Badge>
                    ))}
                  </div>
                </div>

                <div className="flex items-center gap-3">
                  <Switch checked={requireAvailable} onCheckedChange={setRequireAvailable} />
                  <div>
                    <div className="text-sm font-medium">Require available domain</div>
                    <div className="text-xs text-muted-foreground">
                      Filter out names without an available domain in selected TLDs
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
          </Tabs>

          <Button
            onClick={handleGenerateNames}
            className="bg-primary hover:bg-primary/90 text-white font-bold"
            disabled={isGenerating}
          >
            {isGenerating ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Wand2 className="mr-2 h-4 w-4" />}
            {isGenerating ? 'Generating...' : 'Generate Names'}
          </Button>
        </CardContent>
      </Card>

      {/* Generated Names */}
      <Card>
        <div className="p-6 border-b border-border">
          <h3 className="text-xl font-semibold text-dark">Generated Names</h3>
          <p className="text-muted-foreground mt-1">Click on any name to create a brand kit</p>
        </div>
        <CardContent className="p-6">
          {generatedNames.length === 0 && !isGenerating ? (
            <div className="text-center py-8">
              <p className="text-muted-foreground">Generate business names using the form above to see suggestions here.</p>
            </div>
          ) : isGenerating ? (
            <div className="text-center py-8">
              <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
              <p className="text-muted-foreground">Generating creative business names...</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {generatedNames.map((nameData, index) => {
                const open = expandedPreview === index;
                return (
                  <div
                    key={`${nameData.name}-${index}`}
                    className="border border-border rounded-lg p-4 transition-colors"
                  >
                    <div className="flex items-center justify-between">
                      <h4
                        className="font-semibold text-foreground cursor-pointer"
                        onClick={() => sendToBrandKit(nameData.name)}
                        title="Open in Brand Kit"
                      >
                        {nameData.name}
                      </h4>

                      <div className="flex items-center gap-1">
                        <button
                          className="p-1 rounded transition-colors hover:bg-gray-100"
                          onClick={() => setExpandedPreview(open ? null : index)}
                          aria-label="Toggle logo previews"
                        >
                          {open ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                        </button>
                        <button
                          className="p-1 rounded transition-colors hover:bg-gray-100"
                          onClick={() => toggleSave(nameData)}
                          aria-label={isNameSaved(nameData.name) ? 'Remove from saved' : 'Save this name'}
                        >
                          <Heart
                            className={`h-4 w-4 transition-colors ${
                              isNameSaved(nameData.name) ? 'text-red-500 fill-red-500' : 'text-muted-foreground hover:text-red-500'
                            }`}
                          />
                        </button>
                      </div>
                    </div>

                    {nameData.description && (
                      <p className="text-xs text-muted-foreground mt-1">{nameData.description}</p>
                    )}

                    {/* Domain badges */}
                    <div className="flex items-center mt-2 gap-2 flex-wrap">
                      <span
                        className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
                          nameData.available ? 'bg-accent/10 text-accent' : 'bg-red-100 text-red-600'
                        }`}
                      >
                        {nameData.available ? <Check className="mr-1 h-3 w-3" /> : <X className="mr-1 h-3 w-3" />}
                        .com {nameData.available ? 'Available' : 'Taken'}
                      </span>

                      {Array.isArray(nameData.tldBadges) &&
                        nameData.tldBadges
                          .filter(b => b.tld !== '.com')
                          .map((b, i) => (
                            <span
                              key={`${b.tld}-${i}`}
                              className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
                                b.available ? 'bg-accent/10 text-accent' : 'bg-red-100 text-red-600'
                              }`}
                            >
                              {b.available ? <Check className="mr-1 h-3 w-3" /> : <X className="mr-1 h-3 w-3" />}
                              {b.tld} {b.available ? 'Available' : 'Taken'}
                            </span>
                          ))}
                    </div>

                    {/* Quick logo previews */}
                    {open && (
                      <div className="mt-4">
                        <LogoPreview name={nameData.name} />
                        <div className="mt-3 flex gap-2">
                          <Button size="sm" variant="outline" onClick={() => goToDomains(nameData.name)}>
                            Check Domains
                          </Button>
                          <Button size="sm" onClick={() => sendToBrandKit(nameData.name)}>
                            Use in Brand Kit
                          </Button>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Saved Names */}
      <Card>
        <div className="p-6 border-b border-border">
          <h3 className="text-xl font-semibold text-dark">Saved Names ({savedNames.length})</h3>
          <p className="text-muted-foreground mt-1">Your favorite business name ideas</p>
        </div>
        <CardContent className="p-6">
          {savedNames.length === 0 ? (
            <div className="text-center py-8">
              <p className="text-muted-foreground">No saved names yet. Save your favorites by clicking the heart icon on any generated name!</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {savedNames.map((nameData, index) => (
                <div
                  key={`${nameData.name}-saved-${index}`}
                  className="border border-border rounded-lg p-4 hover:border-primary hover:bg-primary/5 transition-colors"
                >
                  <div className="flex items-center justify-between">
                    <h4 className="font-semibold text-foreground">{nameData.name}</h4>
                    <button
                      className="p-1 rounded transition-colors hover:bg-gray-100"
                      onClick={() => toggleSave(nameData)}
                      aria-label="Remove from saved"
                    >
                      <Heart className="h-4 w-4 text-red-500 fill-red-500" />
                    </button>
                  </div>
                  {nameData.description && (
                    <p className="text-xs text-muted-foreground mt-1">{nameData.description}</p>
                  )}
                  <div className="flex items-center justify-between mt-3">
                    <span
                      className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
                        nameData.available ? 'bg-accent/10 text-accent' : 'bg-red-100 text-red-600'
                      }`}
                    >
                      {nameData.available ? <Check className="mr-1 h-3 w-3" /> : <X className="mr-1 h-3 w-3" />}
                      .com {nameData.available ? 'Available' : 'Taken'}
                    </span>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => sendToBrandKit(nameData.name)}
                      className="text-xs py-1 px-2 h-auto"
                    >
                      <ArrowRight className="mr-1 h-3 w-3" />
                      Send to Brand Kit
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

Notes / Next options

These previews use Google Fonts on-the-fly (no bundler work). You can add/remove fonts or palettes anytime.

When you’re ready for real domain checks, I’ll wire the GoDaddy API call in the service and map results to tldBadges.

If you want Canva-style color cycles per card, I can add a mini palette picker and persist the choice into the Brand Kit handoff.