on the admin dashboard create a tab called "embed" on this tab all the n

src/app/admin/embed/page.tsx

@@ -0,0 +1,85 @@
+
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CardFooter,
+} from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Clipboard } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+export default function EmbedPage() {
+  const [embedCode, setEmbedCode] = useState('');
+  const [origin, setOrigin] = useState('');
+  const { toast } = useToast();
+
+  useEffect(() => {
+    // This ensures window is defined, as it's only available on the client
+    if (typeof window !== 'undefined') {
+      const currentOrigin = window.location.origin;
+      setOrigin(currentOrigin);
+      setEmbedCode(
+        `<iframe\n  src="${currentOrigin}"\n  width="100%"\n  height="800px"\n  style="border:none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"\n  title="EstimateFlow"\n></iframe>`
+      );
+    }
+  }, []);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(embedCode).then(
+      () => {
+        toast({
+          title: 'Copied to Clipboard',
+          description: 'The embed code has been copied successfully.',
+        });
+      },
+      (err) => {
+        toast({
+          title: 'Failed to Copy',
+          description: 'Could not copy the code. Please try again.',
+          variant: 'destructive',
+        });
+        console.error('Could not copy text: ', err);
+      }
+    );
+  };
+
+  return (
+    <Card className="max-w-4xl">
+      <CardHeader>
+        <CardTitle>Embed EstimateFlow</CardTitle>
+        <CardDescription>
+          Copy and paste the code below into your website's HTML to embed the
+          cost estimator flow.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="embed-code">HTML Embed Code</Label>
+            <Textarea
+              id="embed-code"
+              readOnly
+              value={embedCode}
+              className="font-code h-48 min-h-48 resize-none bg-muted"
+              aria-label="Embed code"
+            />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-end">
+        <Button onClick={handleCopy}>
+          <Clipboard className="mr-2" />
+          Copy Code
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

src/app/admin/layout.tsx

@@ -16,7 +16,7 @@ import {
   SidebarTrigger,
   SidebarFooter,
 } from '@/components/ui/sidebar';
-import { LayoutDashboard, LogOut, Settings, Mail, User as UserIcon } from 'lucide-react';
+import { LayoutDashboard, LogOut, Settings, Mail, User as UserIcon, Code2 } from 'lucide-react';
 import { signOut } from '@/lib/auth';
 import { Button } from '@/components/ui/button';
 import {
@@ -61,6 +61,12 @@ export default async function AdminLayout({
                 <LayoutDashboard />
                 Dashboard
               </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton href="/admin/embed">
+                <Code2 />
+                Embed
+              </SidebarMenuButton>
             </SidebarMenuItem>
              <SidebarMenuItem>
               <SidebarMenuButton>