-- Create branded_pages table
CREATE TABLE branded_pages (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users NOT NULL,
  page_name TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  brand_colors JSONB DEFAULT '{}',
  logo_url TEXT,
  custom_css TEXT,
  meta_title TEXT,
  meta_description TEXT,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP DEFAULT now()
);

-- Enable RLS
ALTER TABLE branded_pages ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users manage their pages"
  ON branded_pages FOR ALL
  USING (auth.uid() = user_id);

// BrandedPageTemplate.tsx
import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';

export const BrandedPageTemplate = () => {
  const { slug } = useParams();
  const { data: page } = useQuery({
    queryKey: ['branded-page', slug],
    queryFn: async () => {
      const { data } = await supabase
        .from('branded_pages')
        .select('*')
        .eq('slug', slug)
        .single();
      return data;
    }
  });

  return (
    <div style={{ 
      '--primary': page?.brand_colors?.primary,
      '--accent': page?.brand_colors?.accent 
    }}>
      <Hero logo={page?.logo_url} />
      <Features data={page?.features} />
      <CTA />
    </div>
  );
};

// applyBrandTheme.ts
export const applyBrandTheme = (colors: BrandColors) => {
  const root = document.documentElement;
  
  root.style.setProperty('--primary', colors.primary);
  root.style.setProperty('--secondary', colors.secondary);
  root.style.setProperty('--accent', colors.accent);
  root.style.setProperty('--text', colors.text);
  root.style.setProperty('--background', colors.background);
};

// Usage in component
useEffect(() => {
  if (pageData?.brand_colors) {
    applyBrandTheme(pageData.brand_colors);
  }
}, [pageData]);

// uploadBrandAssets.ts
export const uploadLogo = async (file: File, pageId: string) => {
  const fileExt = file.name.split('.').pop();
  const fileName = `${pageId}/logo.${fileExt}`;
  
  const { data, error } = await supabase.storage
    .from('branded-pages')
    .upload(fileName, file, { upsert: true });
  
  if (error) throw error;
  
  const { data: { publicUrl } } = supabase.storage
    .from('branded-pages')
    .getPublicUrl(fileName);
  
  return publicUrl;
};

// App.tsx routing
import { BrandedPageTemplate } from './pages/BrandedPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Index />} />
      <Route 
        path="/p/:slug" 
        element={<BrandedPageTemplate />} 
      />
      <Route 
        path="/admin/pages" 
        element={<PageManager />} 
      />
    </Routes>
  );
}

// PageManager.tsx
export const PageManager = () => {
  const { data: pages } = useQuery({
    queryKey: ['user-pages'],
    queryFn: async () => {
      const { data } = await supabase
        .from('branded_pages')
        .select('*')
        .order('created_at', { ascending: false });
      return data;
    }
  });

  return (
    <div className="admin-dashboard">
      <Button onClick={createNewPage}>
        + New Branded Page
      </Button>
      <PageList pages={pages} />
    </div>
  );
};