Changes

src/pages/Index.tsx

@@ -1,13 +1,15 @@
-import { useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef, useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Upload, Glasses, CheckCircle, XCircle, Loader2, Box } from 'lucide-react';
+import { Upload, Glasses, CheckCircle, XCircle, Loader2, Box, Package } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useModelStore } from '@/stores/useModelStore';
 import { toast } from 'sonner';
+import { generateDemoBeamGLB } from '@/lib/generateDemoBeam';
 
 const Index = () => {
   const navigate = useNavigate();
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [loadingDemo, setLoadingDemo] = useState(false);
   const { model, setModel, xrSupported, setXrSupported } = useModelStore();
 
   useEffect(() => {
@@ -30,6 +32,21 @@ const Index = () => {
     toast.success(`Modelo "${file.name}" carregado com sucesso!`);
   }, [setModel]);
 
+  const handleLoadDemo = useCallback(async () => {
+    setLoadingDemo(true);
+    try {
+      const { blob, fileName, fileSize } = await generateDemoBeamGLB();
+      const url = URL.createObjectURL(blob);
+      setModel({ fileName, fileSize, url });
+      toast.success('Modelo demo "IPE 200 — 1000mm" carregado!');
+    } catch (err) {
+      console.error(err);
+      toast.error('Falha ao gerar modelo demo');
+    } finally {
+      setLoadingDemo(false);
+    }
+  }, [setModel]);
+
   const handleEnterViewer = () => {
     if (!model) {
       toast.error('Importe um modelo GLB primeiro');
@@ -76,7 +93,22 @@ const Index = () => {
           </div>
         </Button>
 
-        {/* Model info */}
+        {/* Demo button */}
+        <Button
+          variant="outline"
+          className="h-12 w-full gap-3 border-muted-foreground/30 text-muted-foreground hover:border-primary hover:text-primary transition-all"
+          onClick={handleLoadDemo}
+          disabled={loadingDemo}
+        >
+          {loadingDemo ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Package className="h-4 w-4" />
+          )}
+          {loadingDemo ? 'Gerando modelo…' : 'Carregar Demo — Viga IPE 200'}
+        </Button>
+
+
         {model && (
           <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 glow-primary">
             <div className="flex items-center gap-3">