Build a Directory Service in Lovable

Build a directory service app. Stack: React + Vite + TypeScript + Tailwind + shadcn/ui (already scaffolded), React Router v6, Supabase JS client against Lovable Cloud.

## Database schema (migration: supabase/migrations/0001_directory_schema.sql)

First enable extension:
CREATE EXTENSION IF NOT EXISTS pg_trgm;
CREATE EXTENSION IF NOT EXISTS unaccent;

Create four tables:

1. `profiles` — id (uuid references auth.users.id on delete cascade, primary key), full_name (text), email (text), claimed_listings_count (int default 0), created_at (timestamptz default now()).
   RLS: enable. FOR SELECT/UPDATE: USING (id = auth.uid()).

2. `categories` — id (uuid pk default gen_random_uuid()), slug (text unique not null), name (text not null), parent_id (uuid nullable references categories.id), listing_count (int default 0), created_at (timestamptz default now()).
   RLS: enable. FOR SELECT TO anon, authenticated USING (true). No client INSERT/UPDATE — seed manually or via admin.

3. `listings` — id (uuid pk default gen_random_uuid()), slug (text unique not null), name (text not null), description (text), category_id (uuid references categories.id), address (text), lat (float), lng (float), website (text), phone (text), logo_path (text), owner_id (uuid nullable references auth.users.id), claimed (bool default false), featured (bool default false), is_deleted (bool default false), confirmation_token (text unique nullable), created_at (timestamptz default now()),
   search_vector tsvector GENERATED ALWAYS AS (to_tsvector('english', name || ' ' || coalesce(description, ''))) STORED.
   CREATE INDEX idx_listings_search ON listings USING GIN (search_vector);
   CREATE INDEX idx_listings_category ON listings (category_id) WHERE is_deleted = false;
   RLS: enable.
   FOR SELECT TO anon, authenticated USING (is_deleted = false).
   FOR UPDATE TO authenticated USING (owner_id = auth.uid() AND claimed = true).
   FOR UPDATE admin: USING ((auth.jwt() -> 'app_metadata' ->> 'role') = 'admin').
   No client INSERT — listings are seeded by admin or via import. No client DELETE — use is_deleted = true.

4. `leads` — id (uuid pk default gen_random_uuid()), listing_id (uuid references listings.id not null), name (text), email (text not null), phone (text), message (text not null), source (text default 'web'), created_at (timestamptz default now()).
   RLS: enable.
   FOR INSERT TO anon, authenticated WITH CHECK (true) — anyone can submit a lead.
   FOR SELECT TO authenticated USING (EXISTS (SELECT 1 FROM listings l WHERE l.id = leads.listing_id AND l.owner_id = auth.uid())) — listing owner reads own leads only.
   NO SELECT policy for anon — visitors cannot read any leads via the API.

## Layouts

`src/layouts/PublicLayout.tsx` — top nav: Logo, 'Browse Categories' link, 'List Your Business' CTA button (secondary), 'Sign in' link. Prominent search bar below nav on homepage only. Footer with copyright.

`src/layouts/OwnerLayout.tsx` — sidebar (240px): My Listings / Leads / Settings. Protected by `<OwnerGuard>` that checks supabase auth session; redirects to /signin if not authenticated.

## Pages (add to src/App.tsx)

- `/` — Home.tsx: hero with search bar (links to /search?q=), category grid (CategoryGrid component — shows all root categories with icon placeholder and listing_count), featured listings section (listings where featured=true), recent listings grid.
- `/category/[slug]` — Category.tsx: category name + description, filter chips (sub-categories if any), grid of ListingCard components for that category. Pagination (25 per page).
- `/listing/[slug]` — ListingDetail.tsx: logo, name, description, category badge, address, website/phone links, 'Contact' section with LeadCaptureForm. Show 'Claimed' badge if claimed=true.
- `/search` — Search.tsx: reads q from URL query param, calls GET /functions/v1/search-listings?q={q}&limit=25. Shows ranked results as ListingCard grid. Empty state when no results.
- `/claim/[listing-slug]` — Claim.tsx: shows the listing name, explains the claim process, email input form. If user is not signed in, shows sign-in/sign-up inline. Submit button calls /functions/v1/verify-claim to send the one-time token email.
- `/claim/verify` — ClaimVerify.tsx: reads token from URL query param, calls /functions/v1/verify-claim?token={token}&action=confirm. On success: 'Listing claimed!' redirect to /owner/listings.
- `/list-your-business` — ListYourBusiness.tsx: CTA explaining the directory, 'Find and claim your listing' section with search-by-name, link to /claim/[slug] for each result.
- `/owner/dashboard` — owner/Dashboard.tsx: table of claimed listings with name, lead count, 'Edit' link.
- `/owner/listings/[id]/edit` — owner/EditListing.tsx: edit form for name, description, address, website, phone, logo upload. Save calls supabase.from('listings').update().
- `/owner/leads` — owner/Leads.tsx: table of all leads across owned listings. Columns: listing, name, email, phone, message, date.

## Key components

`src/components/ListingCard.tsx` — logo (fallback to initials avatar), name, category badge, address, description excerpt (max 120 chars), 'View' button. Show 'Featured' badge if featured=true.

`src/components/CategoryGrid.tsx` — grid of category cards with icon placeholder, name, listing_count badge.

`src/components/SearchBar.tsx` — controlled input with debounce (300ms). On change, navigate to /search?q={value}. On the homepage, place prominently in hero. In the nav on other pages, place compact.

`src/components/LeadCaptureForm.tsx` — name, email, phone, message textarea, submit button. On submit: POST to /functions/v1/submit-lead with { listing_id, name, email, phone, message }. Show success message 'Your message has been sent to the listing owner.' on 200. Show error on failure.

`src/components/ClaimDialog.tsx` — modal that appears after finding your listing on /list-your-business. Explains the claim process and links to /claim/[slug].

`src/components/OwnerGuard.tsx` — checks auth, redirects to /signin if not authenticated.

## Edge functions

`supabase/functions/search-listings/index.ts` — GET with query params q (search query), limit (default 25), offset (default 0), category_slug (optional filter). Steps:
1. CORS preflight.
2. Use anon Supabase client (public search).
3. Build query: SELECT *, ts_rank(search_vector, websearch_to_tsquery('english', $1)) AS rank FROM listings WHERE is_deleted = false AND search_vector @@ websearch_to_tsquery('english', $1). If category_slug provided: add AND category_id = (SELECT id FROM categories WHERE slug = $2). ORDER BY rank DESC, name ASC. LIMIT $3 OFFSET $4.
4. Return { listings: [...], total: count }.

`supabase/functions/submit-lead/index.ts` — POST JSON { listing_id, name, email, phone, message }. Steps:
1. CORS preflight.
2. Validate: listing_id, email, and message are required. Reject if message < 10 chars.
3. Rate limit: check if more than 3 leads from the same IP in the last hour (store ip in leads table or use a simple in-memory check). Return 429 if exceeded.
4. INSERT INTO leads using service-role client (bypasses RLS for insert since anon INSERT is already permitted, but service-role is safer for the email step).
5. Fetch the listing's owner_id, then the owner's email from profiles (or auth.users). Send email via Resend to the owner: 'New lead from [name] for your listing [listing.name]'. Include message body and reply-to set to the lead's email.
6. Return 200 { ok: true }.

`supabase/functions/verify-claim/index.ts` — handles both sending and confirming:
- POST { listing_slug, email } → generate UUID token, store in listings.confirmation_token, send email to provided email via Resend: 'Confirm your claim of [listing.name]' with link https://{SITE_URL}/claim/verify?token={token}. Return 200 { ok: true }.
- GET ?token={token}&action=confirm → find listing where confirmation_token = token. If found: set owner_id = auth.uid() (from auth header), claimed = true, confirmation_token = null. Return 200 { ok: true, listing_slug }. If not found: return 404.

## Styling

Trustworthy directory feel: neutral palette (slate/zinc background, white cards), card-based listings with logo + name + category badge. Prominent search bar hero on homepage. shadcn Card, Avatar, Badge, Command (for search typeahead), Command, Pagination, Dialog. Clean, professional — think Yelp meets Clutch.co.

Generate migration first, then layouts, then pages in order, then edge functions.