112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"SWRDataProvider"] 116:[] 117:[["b_BM5hDWlbDlG",null],["b_UlZZTc00Uij",null],["b_GwbfcvnQ6uV",null]] 118:[["b_BM5hDWlbDlG",{"templateVersionId":null,"templateCanonId":null}],["b_UlZZTc00Uij",{"templateVersionId":null,"templateCanonId":null}],["b_GwbfcvnQ6uV",{"templateVersionId":null,"templateCanonId":null}]] 119:[["b_uXFz8TR7IG8","$D2025-06-05T17:25:09.777Z"],["b_LHl5boUisTE","$D2025-06-05T17:27:15.452Z"],["b_51JOifwvkpi","$D2025-06-05T17:34:56.481Z"],["b_BdsAmC6Wy41","$D2025-06-05T17:40:22.158Z"],["b_CeZvKC63wbg","$D2025-06-05T18:28:00.658Z"],["b_TFiXzhvzvnD","$D2025-06-05T18:41:38.681Z"],["b_YZsaegPpDpB","$D2025-06-05T18:46:50.743Z"],["b_NcfpWtUJ7C5","$D2025-06-05T18:51:25.083Z"],["b_sBmcv4W9gKn","$D2025-06-05T19:06:01.437Z"],["b_LTcQBQhJJyH","$D2025-06-05T19:09:33.052Z"],["b_Si1HbQLyjM6","$D2025-06-05T19:11:51.377Z"],["b_ODOxUsZW5vp","$D2025-06-05T19:16:51.477Z"],["b_SlDbnix1rnU","$D2025-06-05T19:20:20.190Z"],["b_LPSpb3UzJZ8","$D2025-06-05T19:24:33.351Z"],["b_u0VfaQAQ0vt","$D2025-06-05T19:26:50.284Z"],["b_G4oeVkiYCjD","$D2025-06-05T19:42:51.742Z"],["b_E12pMUm2W0L","$D2025-06-05T19:49:34.767Z"],["b_dxRHVTdfkWt","$D2025-06-05T20:00:53.620Z"],["b_5YC0pkRuG79","$D2025-06-05T20:07:12.676Z"],["b_lCUHPTrXHRf","$D2025-06-05T20:16:15.160Z"],["b_uS6uOABRecg","$D2025-06-05T20:24:44.617Z"],["b_EZcjnzmtWNO","$D2025-06-05T20:28:19.222Z"],["b_dHHUbcqw8OH","$D2025-06-05T20:32:31.854Z"],["b_9emeElaoqr1","$D2025-06-05T20:38:13.879Z"],["b_TtSAoWiydCR","$D2025-06-05T20:41:25.745Z"],["b_CYJmshYw6Sf","$D2025-06-05T20:46:59.611Z"],["b_nTwXuiq3c9O","$D2025-06-05T20:55:18.556Z"],["b_KlpMW8wuR5F","$D2025-06-05T21:01:02.746Z"],["b_Vq0F39Gnwjl","$D2025-06-05T21:05:52.662Z"],["b_5JDgK8TOkAO","$D2025-06-05T21:08:26.455Z"],["b_jZt97niiHf2","$D2025-06-05T21:13:29.003Z"],["b_EWMUBe2Rsbh","$D2025-06-05T21:19:35.358Z"],["b_BlxWqe6r0da","$D2025-06-05T21:24:20.265Z"],["b_qG1qQBRTgbB","$D2025-06-05T21:26:52.853Z"],["b_nKAYkqmjNEH","$D2025-06-05T21:30:04.703Z"],["b_8x2eQMOEwaB","$D2025-06-05T21:36:44.747Z"],["b_h4MIZVK8jns","$D2025-06-05T21:45:22.417Z"],["b_McubBlS1Sdd","$D2025-06-05T21:55:38.096Z"],["b_MKZ5omX9CKg","$D2025-06-05T21:58:24.740Z"],["b_69KCMsnSmfw","$D2025-06-05T22:08:48.245Z"],["b_I1YY1GKpAE2","$D2025-06-05T22:14:50.648Z"],["b_PVJY40fQNc3","$D2025-06-05T22:19:06.527Z"],["b_41lJcOxKmnA","$D2025-06-05T22:24:44.678Z"],["b_l4A9lTEd7yo","$D2025-06-05T22:27:44.679Z"],["b_dDTWeRHct78","$D2025-06-05T22:32:34.693Z"],["b_cJcVtX5HTLi","$D2025-06-05T22:39:58.318Z"],["b_wcNxetzWsB0","$D2025-06-05T22:44:01.761Z"],["b_JKy32wG8AaK","$D2025-06-05T22:48:06.393Z"],["b_gaZxNPI74lY","$D2025-06-05T22:55:17.251Z"],["b_i6TmzWlTm3v","$D2025-06-05T22:58:12.647Z"],["b_BPTPkayKdjF","$D2025-06-05T22:59:31.674Z"],["b_BHC4mw8712S","$D2025-06-06T05:17:57.751Z"],["b_vOdUGS79fU9","$D2025-06-06T05:23:27.129Z"],["b_cW9Z1q0eOIa","$D2025-06-06T05:38:22.114Z"],["b_PG7DaSmAkat","$D2025-06-06T05:47:42.903Z"],["b_oTcV1R0lusi","$D2025-06-06T05:58:33.012Z"],["b_jHaqUbVsHVx","$D2025-06-06T06:04:00.514Z"],["b_k3XkFl2qtb1","$D2025-06-06T06:21:01.637Z"],["b_HVGxrCHAuSS","$D2025-06-06T06:24:03.083Z"],["b_lxHXW8SpAdw","$D2025-06-06T06:32:35.011Z"],["b_DlV6fSv0s0Q","$D2025-06-06T06:48:21.124Z"],["b_1gNAvRsSoWP","$D2025-06-06T06:54:30.737Z"],["b_es3zPR7hvgh","$D2025-06-06T06:56:12.477Z"],["b_q6vknZYNmLd","$D2025-06-06T07:02:01.180Z"],["b_EaVE7sJBAsa","$D2025-06-06T07:02:30.199Z"],["b_5HvEtkrTvU0","$D2025-06-06T08:44:36.564Z"],["b_gvEUb6ZEZtb","$D2025-06-06T09:27:49.254Z"],["b_0HJug1wAoR5","$D2025-06-06T09:45:10.032Z"],["b_odeR3WtZqmI","$D2025-06-06T09:49:53.177Z"],["b_HFfC8BSOI6W","$D2025-06-06T09:53:28.722Z"],["b_NoJsPTGTnly","$D2025-06-06T09:55:54.339Z"],["b_4VfH1EJ02l1","$D2025-06-06T10:08:52.160Z"],["b_mOxhBKNHthY","$D2025-06-06T10:13:04.055Z"],["b_5rbAPZqoMIH","$D2025-06-06T10:38:23.358Z"],["b_dB62I2zDOCs","$D2025-06-06T10:49:16.361Z"],["b_V1i6MYjKmY9","$D2025-06-06T10:56:51.353Z"],["b_ozcZxjrmaCW","$D2025-06-06T11:09:16.323Z"],["b_7ZElPr73zf1","$D2025-06-09T14:54:15.642Z"],["b_7aDMrtXR7x2","$D2025-06-09T15:01:26.188Z"],["b_2CIs9waUz3l","$D2025-06-09T15:21:19.617Z"],["b_KI2Xxsi91f0","$D2025-06-09T15:37:37.050Z"],["b_zEz0KIgotXJ","$D2025-06-09T17:20:42.873Z"],["b_9SAZxjpdqmH","$D2025-06-09T19:59:05.898Z"],["b_QClhNvzQHzj","$D2025-06-09T20:09:07.803Z"],["b_2eLFji7aUHX","$D2025-06-09T20:28:01.253Z"],["b_IDI0DuIi3tY","$D2025-06-09T20:49:08.265Z"],["b_jDtlGIQ8r5R","$D2025-06-09T20:55:52.451Z"],["b_ZxzTdG9OdCF","$D2025-06-09T21:06:36.469Z"],["b_LwGie76x2r1","$D2025-06-09T21:10:31.520Z"],["b_EaCZpLeMexw","$D2025-06-09T21:16:00.430Z"],["b_QgfzMTG70B3","$D2025-06-09T21:19:33.498Z"],["b_Kieawus2pT5","$D2025-06-09T21:38:43.044Z"],["b_B0JFpwxxpel","$D2025-06-15T17:38:10.882Z"],["b_KgDwWUHngnu","$D2025-06-15T18:02:33.320Z"],["b_jCCYkkT4H64","$D2025-06-15T18:17:17.488Z"],["b_BiURmZzjWoO","$D2025-06-15T18:21:27.783Z"],["b_Ho73Vr3uNQk","$D2025-06-15T18:30:49.839Z"],["b_ecGxnazy4XG","$D2025-06-15T18:38:36.682Z"],["b_nbXe9vqKPeD","$D2025-08-07T07:46:35.251Z"],["b_m1r7Owg40yN","$D2025-12-11T10:00:26.556Z"],["b_8os39tH0sGU","$D2025-12-11T10:23:41.767Z"],["b_zSuxpNJ93by","$D2025-12-11T10:29:32.554Z"],["b_MTPzmrZQd2T","$D2025-12-11T11:04:00.136Z"],["b_ikjhmSxMN9n","$D2025-12-12T16:53:15.063Z"],["b_YhstR7180VF","$D2025-12-12T17:30:08.303Z"],["b_BpGLk3SswSc","$D2025-12-12T19:07:17.104Z"],["b_Lob1h282LbS","$D2026-03-02T06:29:06.500Z"],["b_gDJINVEYZld","$D2026-03-02T06:29:15.621Z"],["b_AIT2BjGlJ3d","$D2026-03-02T06:32:50.722Z"],["b_4ho5PjCyiai","$D2026-03-02T06:33:09.367Z"],["b_3YOqGCudfCw","$D2026-03-02T06:42:47.648Z"],["b_DCMFNPXRocG","$D2026-03-02T07:30:05.130Z"],["b_XKJAzllmeYH","$D2026-03-02T07:31:01.649Z"],["b_oUqYISs9W39","$D2026-03-02T07:40:12.061Z"],["b_jwebyhwAO1U","$D2026-03-02T07:42:29.572Z"],["b_Z4BfTsnvPWx","$D2026-03-13T21:28:44.097Z"],["b_y8Gk9kziKdv","$D2026-03-13T21:30:09.501Z"],["b_TPumM1ksSoD","$D2026-03-14T07:45:37.330Z"],["b_Sc3dF13XGjG","$D2026-03-14T07:55:51.681Z"],["b_BeCeBtDlyLy","$D2026-03-14T08:14:35.378Z"],["b_gHqbspJznux","$D2026-05-19T20:50:51.946Z"],["b_cTRujYnqjRO","$D2026-05-19T20:55:40.849Z"],["b_qEDVrJ6zFgJ","$D2026-06-06T07:52:20.039Z"],["b_RcOTd9LwNR5","$D2026-06-06T07:52:26.208Z"],["b_Uc2amvDFo74","$D2026-06-06T07:55:23.444Z"],["b_EuOk3VN7Vfb","$D2026-06-07T07:21:16.595Z"],["b_vntu5cPws1K","$D2026-06-07T07:46:46.760Z"],["b_rMkJ588Dlvq","$D2026-07-26T17:20:57.770Z"],["b_BM5hDWlbDlG","$D2026-07-26T17:27:12.772Z"],["b_UlZZTc00Uij","$D2026-07-29T08:25:00.593Z"],["b_GwbfcvnQ6uV","$D2026-07-29T08:26:34.531Z"]] 11a:[["b_BM5hDWlbDlG",false],["b_UlZZTc00Uij",false],["b_GwbfcvnQ6uV",false]] 11b:[["b_BM5hDWlbDlG",{"git":{"ref":"v0/ghassan8080-b4f12364","sha":"a9e4706700ad15a8c9b5c1422f8bd505625d047b","type":"github","repoId":0,"repoName":"www.tekamul.link-fe","ownerName":"ghassan8080","commitMessage":"Merge pull request #15 from ghassan8080/v0/ghassan8080-a9c94646\n\nUpdate footer information and add unique identifier page"},"deploymentId":"dpl_9bBjt7JSG2L3W4ppgRjacynEjSpj"}],["b_UlZZTc00Uij",{"git":{"ref":"v0/ghassan8080-b4f12364","sha":"1f6e26c642d4516ce0c5d1379a97de45a759fff8","type":"github","repoId":0,"repoName":"www.tekamul.link-fe","ownerName":"ghassan8080","commitMessage":"feat: update footer text to غسان عبد الواحد عبد الله — البصرة, Iraq"},"deploymentId":"dpl_D2D8egkp4rhPAiJC61xuivWscB2y"}],["b_GwbfcvnQ6uV",{"git":{"ref":"v0/ghassan8080-d3572099","sha":"d5dccb8aa94a64a605e4c4da6ca28161edd9e27d","type":"github","repoId":0,"repoName":"www.tekamul.link-fe","ownerName":"ghassan8080","commitMessage":"Merge pull request #16 from ghassan8080/v0/ghassan8080-b4f12364\n\nUpdate footer information and add unique identifier page"},"deploymentId":"dpl_D2D8egkp4rhPAiJC61xuivWscB2y"}]] 11c:[["b_BM5hDWlbDlG",null],["b_UlZZTc00Uij",null],["b_GwbfcvnQ6uV",null]] 11d:[["b_BM5hDWlbDlG",true],["b_UlZZTc00Uij",true],["b_GwbfcvnQ6uV",true]] 11e:[["b_BM5hDWlbDlG",true],["b_UlZZTc00Uij",true],["b_GwbfcvnQ6uV",true]] 11f:[] 120:T7d2a6,[V0_FILE]yaml:file=".github/workflows/deploy.yml" name: Deploy to S3 on: push: branches: [ main ] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install dependencies run: | npm install npm install embla-carousel-react recharts cmdk vaul react-hook-form @hookform/resolvers zod sonner class-variance-authority clsx tailwind-merge tailwindcss-animate input-otp react-resizable-panels next-themes @radix-ui/react-aspect-ratio @radix-ui/react-context-menu date-fns @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-select @radix-ui/react-checkbox @radix-ui/react-radio-group @radix-ui/react-toggle @radix-ui/react-avatar @radix-ui/react-toast @radix-ui/react-dropdown-menu @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-label @radix-ui/react-switch @radix-ui/react-hover-card @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-progress @radix-ui/react-scroll-area @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-tooltip - name: Build run: npm run build - name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: me-central-1 - name: Deploy to S3 run: | aws s3 sync out/ s3://www.tekamul.link --delete - name: Configure S3 website run: | aws s3api put-bucket-website --bucket www.tekamul.link --website-configuration '{ "IndexDocument": { "Suffix": "index.html" }, "ErrorDocument": { "Key": "index.html" }, "RoutingRules": [ { "Condition": { "KeyPrefixEquals": "en/", "HttpErrorCodeReturnedEquals": "404" }, "Redirect": { "ReplaceKeyWith": "en/index.html" } }, { "Condition": { "KeyPrefixEquals": "ar/", "HttpErrorCodeReturnedEquals": "404" }, "Redirect": { "ReplaceKeyWith": "ar/index.html" } }, { "Condition": { "HttpErrorCodeReturnedEquals": "404" }, "Redirect": { "ReplaceKeyWith": "index.html" } } ] }' [V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # tekamul.link - Production **الموقع الرسمي لشركة InfraOps Solutions** [![Deploy Status](https://github.com/ghassan8080/tekamul-link/workflows/Deploy%20to%20Production/badge.svg)](https://github.com/ghassan8080/tekamul-link/actions) [![Live Site](https://img.shields.io/badge/Live-tekamul.link-blue)](https://tekamul.link) ## نظرة عامة موقع شركة InfraOps Solutions الذي يقدم: - خدمات البنية التحتية السحابية - حلول الذكاء الاصطناعي - تطوير المواقع والتطبيقات - خدمات الاستضافة والدعم التقني ## المميزات - ✅ تصميم متجاوب مع جميع الأجهزة - ✅ واجهة باللغة العربية مع دعم RTL - ✅ نظام حجز المواعيد - ✅ صفحات الخدمات والأسعار - ✅ نماذج التواصل والاشتراك - ✅ تكامل مع WhatsApp والبريد الإلكتروني ## التقنيات المستخدمة - **Framework**: Next.js 14 - **Styling**: Tailwind CSS - **UI Components**: Radix UI + shadcn/ui - **Icons**: Lucide React - **Deployment**: AWS S3 + CloudFront - **CI/CD**: GitHub Actions ## النشر يتم النشر تلقائياً إلى الإنتاج عند دفع التحديثات إلى فرع `main`: 1. GitHub Actions يبني المشروع 2. يتم رفع الملفات إلى AWS S3 3. CloudFront يحدث الكاش تلقائياً 4. الموقع يصبح متاحاً على https://tekamul.link ## البيئة المحلية \`\`\`bash # تثبيت التبعيات npm install # تشغيل الخادم المحلي npm run dev # بناء المشروع npm run build \`\`\` ## معلومات الاتصال - **الموقع**: https://tekamul.link - **WhatsApp**: +9647707028327 - **Email**: ghassan@tekamul.link --- © 2025 InfraOps Solutions. جميع الحقوق محفوظة. [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .font-arabic { font-family: var(--font-tajawal), "Tajawal", sans-serif; } /* RTL specific adjustments */ [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; } [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } /* Smooth scrolling for navigation */ html { scroll-behavior: smooth; } /* Mobile menu animation */ @media (max-width: 768px) { .mobile-menu { transition: all 0.3s ease-in-out; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { Tajawal } from "next/font/google" const tajawal = Tajawal({ subsets: ["arabic", "latin"], weight: ["400", "500", "700"], variable: "--font-tajawal", display: "swap", }) export const metadata = { title: "InfraOps Solutions - Complete Infrastructure Solutions", description: "Transform your business with cutting-edge cloud infrastructure, AI-powered solutions, and enterprise-grade applications.", generator: "v0.dev", } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import ModernLanding from "@/components/modern-landing" export default function Home() { return } [V0_FILE]typescriptreact:file="app/pricing/page.tsx" import PricingPlans from "@/components/pricing-plans" export const metadata = { title: "خطط الأسعار - اشترك الآن", description: "اختر الباقة المناسبة لمشروعك الرقمي مع معاينة مجانية", } export default function PricingPage() { return } [V0_FILE]typescriptreact:file="app/privacy/page.tsx" import type { Metadata } from "next" import PrivacyPolicy from "@/components/privacy-policy" export const metadata: Metadata = { title: "Privacy Policy | Tekamul AI", description: "Privacy Policy for Tekamul AI Mobile App and automation services.", } export default function PrivacyPage() { return } [V0_FILE]typescriptreact:file="app/subscribe/page.tsx" import SubscribeForm from "@/components/subscribe-form" export const metadata = { title: "اشترك الآن - خطط الأسعار", description: "اختر الباقة المناسبة لمشروعك الرقمي مع معاينة مجانية", } export default function SubscribePage() { return } [V0_FILE]typescriptreact:file="app/subscription/page.tsx" import SubscriptionPage from "@/components/subscription-page" export const metadata = { title: "اشترك الآن - InfraOps Solutions", description: "اختر الباقة المناسبة لمشروعك الرقمي وابدأ بمعاينة مجانية", } export default function Subscription() { return } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/arabic-landing.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Check, Calendar, ShoppingBag, FileText, ChevronLeft, Mail } from "lucide-react" export default function ArabicLanding() { return (

{/* Hero Section */}

تقنية متطورة

حلول ذكية باستخدام الذكاء الاصطناعي

نقدم لك حلول تقنية متكاملة مدعومة بالذكاء الاصطناعي لتطوير أعمالك وتحسين تجربة عملائك بأسعار مناسبة وسرعة عالية

{/* Features Section */}

حلولنا الجاهزة

نقدم مجموعة من الحلول الجاهزة التي يمكن تخصيصها لتناسب احتياجات عملك

{/* Feature 1 */}

نظام حجز مواعيد نظام متكامل لإدارة المواعيد والحجوزات مع إشعارات تلقائية للعملاء

واجهة سهلة الاستخدام
إشعارات تلقائية للعملاء
تقارير وإحصائيات

{/* Feature 2 */}

متجر إلكتروني منصة بيع إلكترونية سهلة الاستخدام مع خيارات الدفع المحلية

تصميم متجاوب مع جميع الأجهزة
خيارات دفع متعددة
لوحة تحكم سهلة

{/* Feature 3 */}

صفحة طلبات صفحة مخصصة لاستقبال الطلبات والاستفسارات من العملاء

نماذج طلب مخصصة
إشعارات فورية
متابعة حالة الطلب

{/* Pricing Section */}

خطط الأسعار

نقدم باقات متنوعة تناسب احتياجاتك وميزانيتك

{/* Pricing Tier 1 */} مجاني

$0 /للتجربة

جرب النسخة الأولية من موقعك أو تطبيقك بدون أي التزام

نسخة تجريبية كاملة
تصميم مخصص
تعديلات غير محدودة

{/* Pricing Tier 2 */} الأكثر شيوعاً نشر

$50 /لمرة واحدة

احصل على موقع أو تطبيق احترافي جاهز للاستخدام

تطوير كامل للموقع أو التطبيق
استضافة على خوادم سريعة
دعم فني لمدة شهر
اسم نطاق مجاني

{/* Pricing Tier 3 */} دعم شهري

$15 /شهرياً

خدمة دعم وصيانة مستمرة لموقعك أو تطبيقك

دعم فني على مدار الساعة
تحديثات وتطويرات مستمرة
تحليلات وتقارير شهرية
نسخ احتياطية منتظمة

{/* CTA Section */}

جاهز للبدء؟

تواصل معنا الآن للحصول على استشارة مجانية وابدأ رحلتك نحو النجاح الرقمي

واتساب: +9647707028327 | إيميل: ghassan@tekamul.link

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/landing-page.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Rocket, DollarSign, Wrench, Calendar, ShoppingBag, FileText, LayoutDashboard, Star, ChevronRight, Check, } from "lucide-react" export default function LandingPage() { const [language, setLanguage] = useState<"ar" | "en">("ar") const content = { ar: { hero: { title: "ابني موقعك أو تطبيقك باستخدام الذكاء الاصطناعي خلال يومين", subtitle: "حلول ذكية، مخصصة، ومناسبة للسوق المحلي – نسخة مجانية للتجربة قبل النشر", cta: "ابدأ مجاناً", }, whyUs: { title: "لماذا تختارنا", reasons: [ { icon: , title: "السرعة", description: "تنفيذ خلال 48 ساعة", }, { icon: , title: "السعر المناسب", description: "نسخة مجانية وتجربة واقعية", }, { icon: , title: "الدعم والصيانة", description: "إدارة شهرية مرنة", }, ], }, solutions: { title: "الحلول الجاهزة", items: [ { icon: , title: "نظام حجز للعيادات والصالونات", description: "نظام متكامل لإدارة المواعيد والحجوزات مع إشعارات تلقائية للعملاء", }, { icon: , title: "متجر إلكتروني بسيط", description: "منصة بيع إلكترونية سهلة الاستخدام مع خيارات الدفع المحلية", }, { icon: , title: "صفحة استقبال الطلبات", description: "صفحة مخصصة لاستقبال الطلبات والاستفسارات من العملاء", }, { icon: , title: "لوحة إدارة داخلية", description: "لوحة تحكم سهلة الاستخدام لإدارة المحتوى والطلبات", }, ], }, pricing: { title: "الأسعار", plans: [ { title: "خطة البداية", price: "مجانية للتجربة", description: "جرب النسخة الأولية من موقعك أو تطبيقك بدون أي التزام", features: ["نسخة تجريبية كاملة", "تصميم مخصص", "تعديلات غير محدودة", "دعم فني خلال فترة التجربة"], cta: "ابدأ الآن", }, { title: "نشر و إدارة", price: "$50 لمرة واحدة + $15 شهريًا", description: "احصل على موقع أو تطبيق احترافي مع دعم مستمر", features: [ "تطوير كامل للموقع أو التطبيق", "استضافة على خوادم سريعة", "دعم فني على مدار الساعة", "تحديثات وتطويرات مستمرة", "تحليلات وتقارير شهرية", ], cta: "اشترك الآن", featured: true, }, ], }, testimonials: { title: "آراء العملاء", items: [ { name: "محمد علي", role: "صاحب عيادة أسنان", content: "ساعدني نظام الحجز في تنظيم مواعيد العيادة بشكل رائع. توفير الوقت والجهد كان ملحوظاً منذ اليوم الأول.", rating: 5, }, { name: "سارة أحمد", role: "صاحبة متجر ملابس", content: "المتجر الإلكتروني سهل الاستخدام وساعدني في الوصول لعملاء جدد. الدعم الفني ممتاز والاستجابة سريعة.", rating: 5, }, ], }, contact: { title: "تواصل معنا", subtitle: "نحن هنا لمساعدتك في بناء حضورك الرقمي", whatsapp: "تواصل عبر واتساب", }, footer: { copyright: "© 2025 خدمات تطوير المواقع والتطبيقات. جميع الحقوق محفوظة.", }, }, en: { hero: { title: "Build Your Website or App with AI in Just Two Days", subtitle: "Smart, customized solutions suitable for the local market - Free trial version before deployment", cta: "Start for Free", }, whyUs: { title: "Why Choose Us", reasons: [ { icon: , title: "Speed", description: "Implementation within 48 hours", }, { icon: , title: "Affordable Price", description: "Free trial version and realistic experience", }, { icon: , title: "Support & Maintenance", description: "Flexible monthly management", }, ], }, solutions: { title: "Ready Solutions", items: [ { icon: , title: "Booking System for Clinics & Salons", description: "Integrated system for appointment management with automatic customer notifications", }, { icon: , title: "Simple E-commerce Store", description: "User-friendly online selling platform with local payment options", }, { icon: , title: "Order Intake Page", description: "Custom page for receiving orders and inquiries from customers", }, { icon: , title: "Internal Admin Dashboard", description: "Easy-to-use control panel for managing content and orders", }, ], }, pricing: { title: "Pricing", plans: [ { title: "Starter Plan", price: "Free Trial", description: "Try the initial version of your website or app with no commitment", features: [ "Complete trial version", "Custom design", "Unlimited revisions", "Technical support during trial period", ], cta: "Start Now", }, { title: "Deploy & Manage", price: "$50 one-time + $15 monthly", description: "Get a professional website or app with continuous support", features: [ "Full website or app development", "Hosting on fast servers", "24/7 technical support", "Continuous updates and improvements", "Monthly analytics and reports", ], cta: "Subscribe Now", featured: true, }, ], }, testimonials: { title: "Client Testimonials", items: [ { name: "Mohammed Ali", role: "Dental Clinic Owner", content: "The booking system helped me organize clinic appointments wonderfully. Time and effort savings were noticeable from day one.", rating: 5, }, { name: "Sarah Ahmed", role: "Clothing Store Owner", content: "The e-commerce store is easy to use and helped me reach new customers. Technical support is excellent and response is quick.", rating: 5, }, ], }, contact: { title: "Contact Us", subtitle: "We're here to help you build your digital presence", whatsapp: "Contact via WhatsApp", }, footer: { copyright: "© 2025 Website & App Development Services. All rights reserved.", }, }, } const currentContent = content[language] const dir = language === "ar" ? "rtl" : "ltr" return (

{/* Language Switcher */}

setLanguage(value as "ar" | "en")}> عربي English

{/* Hero Section */}

{currentContent.hero.title}

{currentContent.hero.subtitle}

{/* Why Us Section */}

{currentContent.whyUs.title}

{currentContent.whyUs.reasons.map((reason, index) => (

{reason.icon}

{reason.title}

{reason.description}

))}

{/* Solutions Section */}

{currentContent.solutions.title}

{currentContent.solutions.items.map((solution, index) => (

{solution.icon}

{solution.title}

{solution.description}

))}

{/* Pricing Section */}

{currentContent.pricing.title}

{currentContent.pricing.plans.map((plan, index) => ( {plan.featured && ( {language === "ar" ? "موصى به" : "Recommended"} )} {plan.title}

{plan.price}

{plan.description}

{feature}

))}

{/* Testimonials Section */}

{currentContent.testimonials.title}

{currentContent.testimonials.items.map((testimonial, index) => (

{[...Array(testimonial.rating)].map((_, i) => ( ))}

"{testimonial.content}"

{testimonial.name}

{testimonial.role}

))}

{/* Contact Section */}

{currentContent.contact.title}

{currentContent.contact.subtitle}

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/merged-landing.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Check, Calendar, ShoppingBag, FileText, ChevronLeft, Cloud, Settings, Menu, X, Server, ArrowRight, Code, CheckCircle, Rocket, LineChart, Eye, Bell, Shield, Zap, DollarSign, } from "lucide-react" import { useState } from "react" export default function MergedLanding() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

{/* Navigation */}

InfraOps Solutions

{/* Desktop Navigation */}

nav.home nav.services nav.contact

{/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && (

nav.home nav.services nav.contact

)}

{/* Hero Section */}

حلول متكاملة

نحن نبني وندير بنيتك التحتية على السحابة أو في موقعك

حلول ذكية باستخدام الذكاء الاصطناعي مع خدمات البنية التحتية المتقدمة - نقدم لك تجربة شاملة لتطوير أعمالك

{/* Infrastructure Services Section */}

خدماتنا

نقدم مجموعة شاملة من خدمات البنية التحتية والحلول الذكية

{/* Infrastructure Service 1 - Updated Cloud Services */}

نقل مشروعك إلى السحابة

نساعدك في تشغيل تطبيقك على خدمات مثل AWS أو Azure بحيث يعمل بكفاءة وبدون انقطاع

{/* Cloud Benefits */}

المزيد من الأمان

سرعة أفضل

توفير في التكاليف

المزيد من الأمان، سرعة أفضل، وتوفير في التكاليف

{/* Infrastructure Service 2 - Updated for monitoring */}

مراقبة أداء موقعك

نراقب أداء موقعك 24/7 وننبهك فورًا إذا حدث أي خلل أو بطء في التحميل.

{/* Monitoring Visualization */}

أداء طبيعي

تنبيه

إشعار

لا حاجة للقلق، نكتشف المشاكل قبل أن يلاحظها الزبائن

{/* Infrastructure Service 3 - Updated for automatic app updates */}

تحديثات تلقائية للتطبيقات

نربط مراحل تطوير التطبيق بحيث يتم إطلاق التحديثات بشكل تلقائي وآمن دون توقف.

{/* Simple Infographic */}


                    كود جديد



                  

                  
                    
                      
                    
                    اختبار
                  

                  

                  
                    
                      
                    
                    إطلاق تلقائي



                
                  
                    مثالي للتطبيقات التي تحتاج تحديثات مستمرة



            {/* Infrastructure Service 4 - Updated for non-technical users */}
            
              
                
                  
                    
                    
                  
                
                تجهيز الخوادم بشكل آلي
              
              
                
                  بدلاً من إعداد الخوادم يدويًا، نستخدم أدوات ذكية تجهز كل شيء تلقائيًا خلال دقائق، بدقة وسرعة عالية.
                

                {/* Simple Infographic */}
                
                  
                    
                      
                    
                    طلب الخدمة
                  

                  

                  
                    
                      
                    
                    إعداد تلقائي
                  

                  

                  
                    
                      
                    
                    جاهز للعمل



      {/* AI Solutions Section */}
      
        
          
            
              حلول ذكية
            
            حلول الذكاء الاصطناعي الجاهزة
            
              نقدم مجموعة من الحلول الجاهزة المدعومة بالذكاء الاصطناعي التي يمكن تخصيصها لتناسب احتياجات عملك
            
          

          
            {/* AI Solution 1 */}
            
              
                
                  
                
                نظام حجز مواعيد
                نظام متكامل لإدارة المواعيد والحجوزات مع إشعارات تلقائية للعملاء
              
              
                
                  
                    
                    واجهة سهلة الاستخدام
                  
                  
                    
                    إشعارات تلقائية للعملاء
                  
                  
                    
                    تقارير وإحصائيات
                  
                
              
              
                
              
            

            {/* AI Solution 2 */}
            
              
                
                  
                
                متجر إلكتروني
                منصة بيع إلكترونية سهلة الاستخدام مع خيارات الدفع المحلية
              
              
                
                  
                    
                    تصميم متجاوب مع جميع الأجهزة
                  
                  
                    
                    خيارات دفع متعددة
                  
                  
                    
                    لوحة تحكم سهلة
                  
                
              
              
                
              
            

            {/* AI Solution 3 */}
            
              
                
                  
                
                صفحة طلبات
                صفحة مخصصة لاستقبال الطلبات والاستفسارات من العملاء
              
              
                
                  
                    
                    نماذج طلب مخصصة
                  
                  
                    
                    إشعارات فورية
                  
                  
                    
                    متابعة حالة الطلب
                  
                
              
              
                
              
            
          
        
      

      {/* Free Trial CTA Section */}
      
        
          جرب نموذجك مجانًا قبل اتخاذ القرار
          
        
      

      {/* Pricing Section */}
      
        
          
            خطط الأسعار
            
              نقدم باقات متنوعة تناسب احتياجاتك وميزانيتك لكل من خدمات البنية التحتية والحلول الذكية
            
          

          
            {/* Pricing Tier 1 */}
            
              
                مجاني
                
                  $0
                  /للتجربة
                
                جرب النسخة الأولية من موقعك أو تطبيقك بدون أي التزام
              
              
                
                  
                    
                    نسخة تجريبية كاملة
                  
                  
                    
                    تصميم مخصص
                  
                  
                    
                    تعديلات غير محدودة
                  
                  
                    
                    استشارة مجانية
                  
                
              
              
                
              
            

            {/* Pricing Tier 2 */}
            
              
                الأكثر شيوعاً
                نشر
                
                  $50
                  /لمرة واحدة
                
                
                  احصل على موقع أو تطبيق احترافي جاهز للاستخدام مع البنية التحتية
                
              
              
                
                  
                    
                    تطوير كامل للموقع أو التطبيق
                  
                  
                    
                    استضافة على خوادم سريعة
                  
                  
                    
                    إعداد البنية التحتية
                  
                  
                    
                    دعم فني لمدة شهر
                  
                  
                    
                    اسم نطاق مجاني
                  
                
              
              
                
              
            

            {/* Pricing Tier 3 */}
            
              
                دعم شهري
                
                  $15
                  /شهرياً
                
                
                  خدمة دعم وصيانة مستمرة لموقعك أو تطبيقك مع مراقبة البنية التحتية
                
              
              
                
                  
                    
                    دعم فني على مدار الساعة
                  
                  
                    
                    مراقبة البنية التحتية
                  
                  
                    
                    تحديثات وتطويرات مستمرة
                  
                  
                    
                    تحليلات وتقارير شهرية
                  
                  
                    
                    نسخ احتياطية منتظمة
                  
                
              
              
                
              
            
          
        
      

      {/* CTA Section */}
      
        
          
            جاهز للبدء؟
            
              تواصل معنا الآن للحصول على استشارة مجانية وابدأ رحلتك نحو النجاح الرقمي مع حلول البنية التحتية والذكاء
              الاصطناعي
            
          

          {/* Contact Options */}
          
            {/* WhatsApp Contact Card */}
            
              
                
                  
                
                تواصل عبر واتساب
                تواصل معنا مباشرة عبر واتساب للحصول على الدعم الفني والاستشارات
              
              
            

            {/* Email Contact Card */}
            
              
                
                  
                
                تواصل عبر البريد الإلكتروني
                أرسل لنا بريدًا إلكترونيًا وسنقوم بالرد عليك في أقرب وقت ممكن
              
              
            
          
        
      

      {/* Footer */}
      
        
          © {new Date().getFullYear()} InfraOps Solutions. جميع الحقوق محفوظة.


  )
}
[V0_FILE]typescriptreact:file="components/modern-landing.tsx"
"use client"

import type React from "react"

import { useState, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  ArrowRight,
  Check,
  Cloud,
  Code,
  Database,
  Globe,
  Mail,
  Menu,
  MessageCircle,
  Monitor,
  Server,
  Shield,
  Star,
  Users,
  X,
  Zap,
  Play,
  BarChart3,
  Headphones,
  ShoppingCart,
  Bot,
  TrendingUp,
} from "lucide-react"

export default function ModernLanding() {
  const [language, setLanguage] = useState<"en" | "ar">("ar")
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const isRTL = language === "ar"

  const content = {
    en: {
      nav: {
        home: "Home",
        services: "Services",
        solutions: "Solutions",
        pricing: "Pricing",
        contact: "Contact",
        getStarted: "Get Started",
      },
      hero: {
        badge: "🚀 Next-Gen Infrastructure Solutions",
        title: "Build & Scale Your",
        titleHighlight: " Digital Infrastructure",
        description:
          "Transform your business with cutting-edge cloud infrastructure, AI-powered solutions, and enterprise-grade applications. From concept to deployment in just 48 hours.",
        startTrial: "Start Free Trial",
        watchDemo: "Watch Demo",
        happyClients: "500+ Happy Clients",
        rating: "4.9/5 Rating",
        live: "Live",
        cloudInfra: "Cloud Infrastructure",
        database: "Database Cluster",
        monitoring: "Monitoring",
        active: "Active",
        healthy: "Healthy",
        online: "Online",
      },
      services: {
        badge: "Our Services",
        title: "Complete Infrastructure Solutions",
        description:
          "From cloud migration to AI implementation, we provide end-to-end solutions that scale with your business needs.",
        items: [
          {
            title: "Cloud Infrastructure",
            description:
              "Scalable cloud solutions on AWS, Azure, and Google Cloud with automated deployment and monitoring.",
            features: ["Auto-scaling infrastructure", "24/7 monitoring & alerts", "Cost optimization"],
          },
          {
            title: "CI/CD Pipelines",
            description: "Automated deployment pipelines with GitHub Actions, GitLab CI, and custom workflows.",
            features: ["Automated testing", "Zero-downtime deployments", "Rollback capabilities"],
          },
          {
            title: "Monitoring & Analytics",
            description: "Comprehensive monitoring with Prometheus, Grafana, and custom dashboards.",
            features: ["Real-time metrics", "Custom alerts", "Performance insights"],
          },
          {
            title: "Security & Compliance",
            description: "Enterprise-grade security with compliance frameworks and automated security scanning.",
            features: ["Security audits", "Compliance reporting", "Vulnerability scanning"],
          },
          {
            title: "Database Management",
            description: "Managed database solutions with backup, replication, and performance optimization.",
            features: ["Automated backups", "High availability", "Performance tuning"],
          },
          {
            title: "Infrastructure as Code",
            description: "Automated infrastructure provisioning with Terraform, Ansible, and CloudFormation.",
            features: ["Version controlled", "Reproducible environments", "Disaster recovery"],
          },
        ],
      },
      smartStore: {
        badge: "AI-Powered Commerce",
        title: "Smart Store & AI Assistant",
        subtitle: "WhatsApp / Messenger / Instagram",
        description:
          "Launch your smart store inside chat apps with an AI-powered assistant that automatically answers customers, shows products, and processes orders—24/7.",
        features: {
          inChat: {
            title: "In-Chat Store Features",
            items: [
              "Custom seller dashboard",
              "Add/edit/delete products with images",
              "Products appear in chat instantly",
              "Multi-platform support",
            ],
          },
          ai: {
            title: "AI Assistant (Smart Secretary)",
            items: [
              "Auto-reply to common questions",
              "Store hours & location info",
              "Pricing information",
              "Learns and improves over time",
            ],
          },
          automation: {
            title: "Order Process Automation",
            items: [
              "AI shows product details",
              "Collects delivery address",
              "Processes payments",
              "Confirms orders in chat",
            ],
          },
          useCases: {
            title: "Perfect For",
            items: ["Clinics & Services", "Online Stores", "Support Teams", "Retailers & Shops"],
          },
        },
        pricingBadge: "Flexible Pricing",
        pricingTitle: "Pricing Plans",
        pricing: [
          {
            name: "Free Trial",
            duration: "15 days",
            price: "Free",
            description: "Full access to all features",
            features: ["Complete feature access", "Up to 100 products", "AI assistant enabled", "Basic analytics"],
            cta: "Start Free",
            highlight: false,
          },
          {
            name: "Ready Template",
            duration: "Per month",
            price: "$20",
            description: "Pre-made assistant/store bots",
            features: [
              "Pre-made templates",
              "Clinic or shop setup",
              "AI assistant configured",
              "24/7 support",
              "Advanced analytics",
            ],
            cta: "Choose Plan",
            highlight: true,
          },
          {
            name: "Custom Workflow",
            duration: "Per month",
            price: "$35–50",
            description: "Fully tailored experience",
            features: [
              "Custom workflow design",
              "Unlimited products",
              "Full personalization",
              "Priority support",
              "Advanced integrations",
            ],
            cta: "Contact Sales",
            highlight: false,
          },
        ],
        cta: "Try It FREE for 15 Days",
        ctaDesc: "Connect your page and automate your sales & support instantly!",
      },
      solutions: {
        badge: "Ready Solutions",
        title: "Pre-built Solutions for Every Need",
        description: "Launch faster with our ready-to-deploy solutions, customized for your industry and requirements.",
        mostPopular: "Most Popular",
        getStarted: "Get Started",
        items: [
          {
            title: "E-commerce Platform",
            description: "Complete online store with payment processing, inventory management, and analytics.",
            features: [
              "Multi-payment gateway integration",
              "Inventory management system",
              "Customer analytics dashboard",
              "Mobile-responsive design",
            ],
          },
          {
            title: "Booking System",
            description: "Advanced appointment booking with automated notifications and calendar integration.",
            features: [
              "Real-time availability",
              "Automated reminders",
              "Calendar synchronization",
              "Customer management",
            ],
          },
          {
            title: "Analytics Dashboard",
            description: "Comprehensive business intelligence with real-time reporting and insights.",
            features: [
              "Real-time data visualization",
              "Custom report generation",
              "Data export capabilities",
              "Multi-user access control",
            ],
          },
        ],
      },
      pricing: {
        badge: "Pricing Plans",
        title: "Simple, Transparent Pricing",
        description: "Choose the perfect plan for your needs. All plans include free trial and 24/7 support.",
        mostPopular: "Most Popular",
        plans: [
          {
            name: "Starter",
            price: "$0",
            period: "/month",
            description: "Perfect for trying out our platform and small projects",
            features: ["Free prototype development", "Basic cloud hosting", "Community support", "Basic monitoring"],
            cta: "Start Free Trial",
            variant: "outline",
          },
          {
            name: "Professional",
            price: "$50",
            period: "/one-time",
            description: "Complete solution deployment with ongoing support",
            features: [
              "Full application development",
              "Production deployment",
              "Custom domain setup",
              "SSL certificate",
              "1 month free support",
            ],
            cta: "Get Started",
            variant: "default",
            popular: true,
          },
          {
            name: "Enterprise",
            price: "$15",
            period: "/month",
            description: "Ongoing support and maintenance for your applications",
            features: [
              "24/7 technical support",
              "Infrastructure monitoring",
              "Regular updates",
              "Performance optimization",
              "Priority support",
            ],
            cta: "Contact Sales",
            variant: "outline",
          },
        ],
        comparisonTitle: "مقارنة شاملة بين الخطط",
        comparisonFeatures: [
          { name: "مدة التجربة", free: "15 يوم", ready: "-", custom: "-" },
          { name: "عدد المنتجات", free: "حتى 10", ready: "حتى 50", custom: "غير محدود" },
          { name: "الصور لكل منتج", free: "صورة واحدة", ready: "4 صور", custom: "غير محدود" },
          { name: "الرد التلقائي", free: "✓", ready: "✓", custom: "✓" },
          { name: "جمع بيانات العملاء", free: "أساسي", ready: "✓", custom: "✓" },
          { name: "تخصيص الردود", free: "-", ready: "محدود", custom: "✓ كامل" },
          { name: "واتساب", free: "✓", ready: "✓", custom: "✓" },
          { name: "إنستغرام", free: "-", ready: "-", custom: "✓" },
          { name: "ماسنجر", free: "✓", ready: "✓", custom: "✓" },
          { name: "التقارير", free: "أساسية", ready: "متقدمة", custom: "شاملة" },
          { name: "الدعم الفني", free: "مجتمع", ready: "24/7", custom: "أولوية 24/7" },
        ],
      },
      contact: {
        badge: "Get In Touch",
        title: "Ready to Transform Your Infrastructure?",
        description:
          "Let's discuss your project and see how we can help you build, scale, and optimize your digital infrastructure.",
        whatsapp: "WhatsApp",
        email: "Email",
        support: "Support",
        supportDesc: "24/7 Technical Support",
        formTitle: "Start Your Project",
        formDescription: "Fill out the form below and we'll get back to you within 24 hours.",
        firstName: "First Name",
        lastName: "Last Name",
        phone: "Phone",
        projectDesc: "Project Description",
        projectPlaceholder: "Tell us about your project requirements...",
        sendMessage: "Send Message",
      },
      footer: {
        description: "Transforming businesses with cutting-edge infrastructure solutions and AI-powered applications.",
        services: "Services",
        company: "Company",
        aboutUs: "About Us",
        careers: "Careers",
        blog: "Blog",
        privacyPolicy: "Privacy Policy",
        connect: "Connect",
        copyright: "© 2025 InfraOps Solutions. All rights reserved.",
      },
    },
    ar: {
      nav: {
        home: "الرئيسية",
        services: "الخدمات",
        solutions: "الحلول",
        pricing: "الأسعار",
        contact: "اتصل بنا",
        getStarted: "ابدأ الآن",
      },
      hero: {
        badge: "🚀 حلول البنية التحتية من الجيل القادم",
        title: "ابني وطور",
        titleHighlight: " بنيتك التحتية الرقمية",
        description:
          "حول عملك باستخدام البنية التحتية السحابية المتطورة والحلول المدعومة بالذكاء الاصطناعي والتطبيقات على مستوى المؤسسات. من الفكرة إلى النشر في 48 ساعة فقط.",
        startTrial: "ابدأ تجربة مجانية",
        watchDemo: "شاهد العرض التوضيحي",
        happyClients: "500+ عميل راضٍ",
        rating: "تقييم 4.9/5",
        live: "مباشر",
        cloudInfra: "البنية التحتية السحابية",
        database: "مجموعة قواعد البيانات",
        monitoring: "المراقبة",
        active: "نشط",
        healthy: "سليم",
        online: "متصل",
      },
      services: {
        badge: "خدماتنا",
        title: "حلول البنية التحتية الشاملة",
        description: "من الهجرة السحابية إلى تطبيق الذكاء الاصطناعي، نقدم حلولاً شاملة تتوسع مع احتياجات عملك.",
        items: [
          {
            title: "البنية التحتية السحابية",
            description: "حلول سحابية قابلة للتوسع على AWS و Azure و Google Cloud مع النشر والمراقبة التلقائية.",
            features: ["بنية تحتية ذاتية التوسع", "مراقبة وتنبيهات 24/7", "تحسين التكاليف"],
          },
          {
            title: "خطوط أنابيب CI/CD",
            description: "خطوط نشر آلية مع GitHub Actions و GitLab CI وسير العمل المخصص.",
            features: ["اختبار آلي", "نشر بدون توقف", "إمكانيات التراجع"],
          },
          {
            title: "المراقبة والتحليلات",
            description: "مراقبة شاملة مع Prometheus و Grafana ولوحات المعلومات المخصصة.",
            features: ["مقاييس في الوقت الفعلي", "تنبيهات مخصصة", "رؤى الأداء"],
          },
          {
            title: "الأمان والامتثال",
            description: "أمان على مستوى المؤسسات مع أطر الامتثال والفحص الأمني التلقائي.",
            features: ["تدقيق أمني", "تقارير الامتثال", "فحص الثغرات"],
          },
          {
            title: "إدارة قواعس البيانات",
            description: "حلول قواعس بيانات مُدارة مع النسخ الاحتياطية والتكرار وتحسين الأداء.",
            features: ["نسخ احتياطية آلية", "توفر عالي", "ضبط الأداء"],
          },
          {
            title: "البنية التحتية كرمز",
            description: "توفير البنية التحتية التلقائي مع Terraform و Ansible و CloudFormation.",
            features: ["مُتحكم في الإصدار", "بيئات قابلة للتكرار", "استعادة الكوارث"],
          },
        ],
      },
      smartStore: {
        badge: "التجارة الإلكترونية المدعومة بالذكاء الاصطناعي",
        title: "متجر ذكي ومساعد ذكي",
        subtitle: "WhatsApp / Messenger / Instagram",
        description:
          "أطلق متجرك الذكي داخل تطبيقات الدردشة مع مساعد ذكي يجيب على عملائك تلقائياً ويعرض المنتجات ويعالج الطلبات 24/7.",
        features: {
          inChat: {
            title: "ميزات المتجر الموجود في الدردشة",
            items: [
              "لوحة تحكم مخصصة للبائع",
              "إضافة/تعديل/حذف المنتجات مع الصور",
              "ظهور المنتجات في الدردشة فوراً",
              "دعم منصات متعددة",
            ],
          },
          ai: {
            title: "المساعد الذكي (السكرتيرة الذكية)",
            items: [
              "الرد التلقائي على الأسئلة الشائعة",
              "معلومات ساعات العمل والموقع",
              "معلومات الأسعار",
              "التعلم والتحسن المستمر",
            ],
          },
          automation: {
            title: "أتمتة عملية الطلب",
            items: ["المساعد يعرض تفاصيل المنتج", "جمع عنوان التسليم", "معالجة الدفع", "تأكيد الطلب في الدردشة"],
          },
          useCases: {
            title: "مثالي ل",
            items: ["العيادات والخدمات", "المتاجر الإلكترونية", "فرق الدعم", "تجار التجزئة والمتاجر"],
          },
        },
        pricingBadge: "أسعار مرنة",
        pricingTitle: "خطط الأسعار",
        pricing: [
          {
            name: "تجربة مجانية",
            duration: "15 يوماً",
            price: "مجاني",
            description: "وصول كامل إلى جميع الميزات",
            features: ["وصول كامل للميزات", "حتى 100 منتج", "مساعد ذكي مفعل", "تحليلات أساسية"],
            cta: "ابدأ مجاناً",
            highlight: false,
          },
          {
            name: "قالب جاهز",
            duration: "شهرياً",
            price: "$20",
            description: "بوتات متجر/مساعد جاهزة",
            features: ["قوالب جاهزة", "إعداد عيادة أو متجر", "مساعد ذكي مُعد", "دعم 24/7", "تحليلات متقدمة"],
            cta: "اختر الخطة",
            highlight: true,
          },
          {
            name: "سير عمل مخصص",
            duration: "شهرياً",
            price: "$35–50",
            description: "تجربة مخصصة بالكامل",
            features: ["تصميم سير عمل مخصص", "منتجات غير محدودة", "تخصيص كامل", "دعم أولوية", "تكاملات متقدمة"],
            cta: "تواصل معنا",
            highlight: false,
          },
        ],
        cta: "جرب مجاناً لمدة 15 يوم",
        ctaDesc: "أتصل بصفحتك وأتمتة المبيعات والدعم فوراً!",
      },
      solutions: {
        badge: "الحلول الجاهزة",
        title: "حلول جاهزة لكل احتياج",
        description: "انطلق بشكل أسرع مع حلولنا الجاهزة للنشر، مخصصة لصناعتك ومتطلباتك.",
        mostPopular: "الأكثر شيوعاً",
        getStarted: "ابدأ الآن",
        items: [
          {
            title: "منصة التجارة الإلكترونية",
            description: "متجر إلكتروني كامل مع معالجة المدفوعات وإدارة المخزون والتحليلات.",
            features: [
              "تكامل بوابات دفع متعددة",
              "نظام إدارة المخزون",
              "لوحة تحليلات العملاء",
              "تصميم متجاوب مع الهواتف",
            ],
          },
          {
            title: "نظام الحجز",
            description: "حجز مواعيد متقدم مع إشعارات آلية وتكامل التقويم.",
            features: ["توفر في الوقت الفعلي", "تذكيرات آلية", "مزامنة التقويم", "إدارة العملاء"],
          },
          {
            title: "لوحة التحليلات",
            description: "ذكاء أعمال شامل مع تقارير ورؤى في الوقت الفعلي.",
            features: [
              "تصور البيانات في الوقت الفعلي",
              "إنشاء تقارير مخصصة",
              "إمكانيات تصدير البيانات",
              "تحكم وصول متعدد المستخدمين",
            ],
          },
        ],
      },
      pricing: {
        badge: "خطط الأسعار",
        title: "اختر الخطة المناسبة لك",
        description: "اختر الخطة المناسبة لك من صفحة الاشتراك",
        ctaText: "عرض جميع الخطط",
        ctaLink: "/subscribe",
        mostPopular: "الأكثر شيوعاً",
        plans: [
          {
            name: "Starter",
            price: "$0",
            period: "/month",
            description: "Perfect for trying out our platform and small projects",
            features: ["Free prototype development", "Basic cloud hosting", "Community support", "Basic monitoring"],
            cta: "Start Free Trial",
            variant: "outline",
          },
          {
            name: "Professional",
            price: "$50",
            period: "/one-time",
            description: "Complete solution deployment with ongoing support",
            features: [
              "Full application development",
              "Production deployment",
              "Custom domain setup",
              "SSL certificate",
              "1 month free support",
            ],
            cta: "Get Started",
            variant: "default",
            popular: true,
          },
          {
            name: "Enterprise",
            price: "$15",
            period: "/month",
            description: "Ongoing support and maintenance for your applications",
            features: [
              "24/7 technical support",
              "Infrastructure monitoring",
              "Regular updates",
              "Performance optimization",
              "Priority support",
            ],
            cta: "Contact Sales",
            variant: "outline",
          },
        ],
        comparisonTitle: "مقارنة شاملة بين الخطط",
        comparisonFeatures: [
          { name: "مدة التجربة", free: "15 يوم", ready: "-", custom: "-" },
          { name: "عدد المنتجات", free: "حتى 10", ready: "حتى 50", custom: "غير محدود" },
          { name: "الصور لكل منتج", free: "صورة واحدة", ready: "4 صور", custom: "غير محدود" },
          { name: "الرد التلقائي", free: "✓", ready: "✓", custom: "✓" },
          { name: "جمع بيانات العملاء", free: "أساسي", ready: "✓", custom: "✓" },
          { name: "تخصيص الردود", free: "-", ready: "محدود", custom: "✓ كامل" },
          { name: "واتساب", free: "✓", ready: "✓", custom: "✓" },
          { name: "إنستغرام", free: "-", ready: "-", custom: "✓" },
          { name: "ماسنجر", free: "✓", ready: "✓", custom: "✓" },
          { name: "التقارير", free: "أساسية", ready: "متقدمة", custom: "شاملة" },
          { name: "الدعم الفني", free: "مجتمع", ready: "24/7", custom: "أولوية 24/7" },
        ],
      },
      contact: {
        badge: "تواصل معنا",
        title: "جاهز لتحويل بنيتك التحتية؟",
        description: "دعنا نناقش مشروعك ونرى كيف يمكننا مساعدتك في بناء وتوسيع وتحسين بنيتك التحتية الرقمية.",
        whatsapp: "واتساب",
        email: "البريد الإلكتروني",
        support: "الدعم",
        supportDesc: "دعم تقني 24/7",
        formTitle: "ابدأ مشروعك",
        formDescription: "املأ النموذج أدناه وسنعاود الاتصال بك خلال 24 ساعة.",
        firstName: "الاسم الأول",
        lastName: "اسم العائلة",
        phone: "الهاتف",
        projectDesc: "وصف المشروع",
        projectPlaceholder: "أخبرنا عن متطلبات مشروعك...",
        sendMessage: "إرسال الرسالة",
      },
      footer: {
        description: "تحويل الأعمال بحلول البنية التحتية المتطورة والتطبيقات المدعومة بالذكاء الاصطناعي.",
        services: "الخدمات",
        company: "الشركة",
        aboutUs: "من نحن",
        careers: "الوظائف",
        blog: "المدونة",
        privacyPolicy: "سياسة الخصوصية",
        connect: "تواصل",
        copyright: "© 2025 InfraOps Solutions. All rights reserved.",
      },
    },
  }
  const currentContent = content[language]

  const scrollToSection = useCallback((sectionId: string) => {
    const element = document.getElementById(sectionId)
    if (element) {
      const headerOffset = 80 // Account for sticky header
      const elementPosition = element.getBoundingClientRect().top
      const offsetPosition = elementPosition + window.pageYOffset - headerOffset

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      })
    }
    setIsMenuOpen(false) // Close mobile menu after navigation
  }, [])

  const openWhatsApp = useCallback((message = "") => {
    window.open(`https://wa.me/9647707028327?text=${message}`, "_blank")
  }, [])

  const goToSubscribe = useCallback(() => {
    window.open("/subscribe", "_self")
  }, [])

  const handleContactSubmit = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault()
      const formData = new FormData(e.currentTarget)
      const firstName = formData.get("firstName")
      const lastName = formData.get("lastName")
      const email = formData.get("email")
      const phone = formData.get("phone")
      const project = formData.get("project")

      // Format message for WhatsApp
      const message = `*New Contact Request*%0A%0A*Name:* ${firstName} ${lastName}%0A*Email:* ${email}%0A*Phone:* ${phone}%0A*Project:* ${project}`
      openWhatsApp(message)
    },
    [openWhatsApp],
  )

  return (
    
      {/* Navigation */}
      
        
          
            
              
                
              
            

            {/* Language Switcher */}
            
               setLanguage(value as "en" | "ar")}>
                
                  
                    EN
                  
                  
                    عربي
                  
                
              

              {/* Desktop Navigation - Replace href with onClick handlers */}
              
                
                  
                  
                  
                  
                  
                
              

              
                
              

              {/* Mobile menu button */}
              
                
              
            
          
        

        {/* Mobile Navigation - Replace href with onClick handlers */}
        {isMenuOpen && (
          
            
              
              
              
              
              
              
                
              
            
          
        )}
      

      {/* Hero Section */}
      
        
          
            
              {currentContent.hero.badge}
              
                {currentContent.hero.title}
                
                  {currentContent.hero.titleHighlight}
                
              
              {currentContent.hero.description}
              
                
                
              
              
                
                  
                    
                    
                    
                  
                  
                    {currentContent.hero.happyClients}
                  
                
                
                  
                    {[...Array(5)].map((_, i) => (
                      
                    ))}
                  
                  
                    {currentContent.hero.rating}
                  
                
              
            
            
              
                
                  
                    
                      
                      
                      
                    
                    {currentContent.hero.live}
                  
                  
                    
                      
                        
                        {currentContent.hero.cloudInfra}
                      
                      {currentContent.hero.active}
                    
                    
                      
                        
                        {currentContent.hero.database}
                      
                      {currentContent.hero.healthy}
                    
                    
                      
                        
                        {currentContent.hero.monitoring}
                      
                      {currentContent.hero.online}
                    
                  
                
              
              
              
            
          
        
      

      {/* Services Section */}
      
        
          
            {currentContent.services.badge}
            {currentContent.services.title}
            {currentContent.services.description}
          

          
            {currentContent.services.items.map((service, index) => {
              const icons = [Cloud, Code, Monitor, Shield, Database, Zap]
              const colors = [
                "from-blue-500 to-blue-600",
                "from-purple-500 to-purple-600",
                "from-green-500 to-green-600",
                "from-orange-500 to-orange-600",
                "from-red-500 to-red-600",
                "from-indigo-500 to-indigo-600",
              ]
              const Icon = icons[index]

              return (
                
                  
                    
                      
                    
                    {service.title}
                    {service.description}
                  
                  
                    
                      {service.features.map((feature, featureIndex) => (
                        
                          
                          {feature}
                        
                      ))}
                    
                  
                
              )
            })}
          
        
      

      {/* Smart Store & AI Assistant Section */}
      
        
          
            {currentContent.smartStore.badge}
            {currentContent.smartStore.title}
            {currentContent.smartStore.subtitle}
            {currentContent.smartStore.description}
          

          {/* Features Grid */}
          
            {[
              {
                title: currentContent.smartStore.features.inChat.title,
                icon: ShoppingCart,
                items: currentContent.smartStore.features.inChat.items,
                color: "from-blue-500 to-blue-600",
              },
              {
                title: currentContent.smartStore.features.ai.title,
                icon: Bot,
                items: currentContent.smartStore.features.ai.items,
                color: "from-purple-500 to-purple-600",
              },
              {
                title: currentContent.smartStore.features.automation.title,
                icon: Zap,
                items: currentContent.smartStore.features.automation.items,
                color: "from-pink-500 to-pink-600",
              },
              {
                title: currentContent.smartStore.features.useCases.title,
                icon: TrendingUp,
                items: currentContent.smartStore.features.useCases.items,
                color: "from-green-500 to-green-600",
              },
            ].map((feature, index) => {
              const Icon = feature.icon
              return (
                
                  
                    
                      
                    
                    {feature.title}
                  
                  
                    
                      {feature.items.map((item, itemIndex) => (
                        
                          
                          {item}
                        
                      ))}
                    
                  
                
              )
            })}
          

          {/* Pricing Section */}
          
            
              {currentContent.smartStore.pricingBadge}
              
                {currentContent.smartStore.pricingTitle}
              
            

            
              {currentContent.smartStore.pricing.map((plan, index) => (
                
                  {plan.highlight && (
                    
                      
                        {currentContent.smartStore.pricingBadge}
                      
                    
                  )}
                  
                    {plan.name}
                    {plan.duration}
                    
                      {plan.price}
                    
                    {plan.description}
                  
                  
                    
                      {plan.features.map((feature, featureIndex) => (
                        
                          
                          {feature}
                        
                      ))}
                    
                    
                  
                
              ))}
            

            {/* CTA Banner - Add onClick handler */}
            
              {currentContent.smartStore.cta}
              {currentContent.smartStore.ctaDesc}
              
            
          
        
      

      {/* Solutions Section */}
      
        
          
            {currentContent.solutions.badge}
            {currentContent.solutions.title}
            {currentContent.solutions.description}
          

          
            {currentContent.solutions.items.map((solution, index) => {
              const icons = [Globe, Users, BarChart3]
              const colors = [
                "from-blue-500 to-purple-500",
                "from-purple-500 to-pink-500",
                "from-green-500 to-teal-500",
              ]
              const Icon = icons[index]
              const isPopular = index === 1

              return (
                
                  
                    {isPopular && (
                      
                        {currentContent.solutions.mostPopular}
                      
                    )}
                    
                      
                    
                    {solution.title}
                    {solution.description}
                  
                  
                    
                      {solution.features.map((feature, featureIndex) => (
                        
                          
                          {feature}
                        
                      ))}
                    
                    
                  
                
              )
            })}
          
        
      

      {/* Pricing Section - Arabic Simplified */}
      {language === "ar" && (
        
          
            
              {currentContent.pricing.badge}
              {currentContent.pricing.title}
              {currentContent.pricing.description}

              
            
          
        
      )}

      {/* Pricing Section - English (unchanged) */}
      {language === "en" && (
        
          
            
              {currentContent.pricing.badge}
              {currentContent.pricing.title}
              {currentContent.pricing.description}
            

            
              {currentContent.pricing.plans.map((plan, index) => (
                
                  {plan.popular && (
                    
                      {currentContent.pricing.mostPopular}
                    
                  )}
                  
                    {plan.name}
                    
                      {plan.price}
                      {plan.period}
                    
                    {plan.description}
                  
                  
                    
                      {plan.features.map((feature, featureIndex) => (
                        
                          
                          {feature}
                        
                      ))}
                    
                    
                  
                
              ))}
            
          
        
      )}

      {/* Contact Section - Add form submission handler */}
      
        
          
            
              {currentContent.contact.badge}
              {currentContent.contact.title}
              {currentContent.contact.description}

              
                

                

                
                  
                    
                  
                  
                    {currentContent.contact.support}
                    {currentContent.contact.supportDesc}
                  
                
              
            

            
              
                {currentContent.contact.formTitle}
                {currentContent.contact.formDescription}
              
              
                
                  
                    
                      {currentContent.contact.firstName}
                      
                    
                    
                      {currentContent.contact.lastName}
                      
                    
                  
                  
                    {currentContent.contact.email}
                    
                  
                  
                    {currentContent.contact.phone}
                    
                  
                  
                    {currentContent.contact.projectDesc}
                                      </div>
                  <Button
                    type="submit"
                    className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
                  >
                    {currentContent.contact.sendMessage}
                    <ArrowRight className={`h-4 w-4 ${isRTL ? "mr-2 rotate-180" : "ml-2"}`} />
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Footer - Fix footer links */}
      <footer className="bg-gray-900 text-gray-300 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <button
                onClick={() => scrollToSection("home")}
                className={`flex items-center ${isRTL ? "space-x-reverse space-x-2" : "space-x-2"} mb-4`}
              >
                <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                  <Cloud className="h-5 w-5 text-white" />
                </div>
                <span className="text-xl font-bold text-white">Tekamul</span>
              </button>
              <p className="text-sm leading-relaxed">{currentContent.footer.description}</p>
            </div>

            <div>
              <h3 className="text-white font-semibold mb-4">{currentContent.footer.services}</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <button onClick={() => scrollToSection("services")} className="hover:text-white transition-colors">
                    {currentContent.hero.cloudInfra}
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection("services")} className="hover:text-white transition-colors">
                    {currentContent.services.items[1].title}
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection("services")} className="hover:text-white transition-colors">
                    {currentContent.services.items[3].title}
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection("services")} className="hover:text-white transition-colors">
                    {currentContent.services.items[2].title}
                  </button>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="text-white font-semibold mb-4">{currentContent.footer.company}</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <button onClick={() => scrollToSection("home")} className="hover:text-white transition-colors">
                    {currentContent.footer.aboutUs}
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection("solutions")} className="hover:text-white transition-colors">
                    {currentContent.footer.careers}
                  </button>
                </li>
                <li>
  <button onClick={() => scrollToSection("contact")} className="hover:text-white transition-colors">
  {currentContent.footer.blog}
  </button>
</li>
<li>
  <a href="/privacy" className="hover:text-white transition-colors">
  {currentContent.footer.privacyPolicy}
  </a>
</li>
                <li>
                  <button onClick={() => scrollToSection("contact")} className="hover:text-white transition-colors">
                    {currentContent.footer.contact}
                  </button>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="text-white font-semibold mb-4">{currentContent.footer.connect}</h3>
              <div className={`flex ${isRTL ? "space-x-reverse space-x-4" : "space-x-4"}`}>
                <button
                  onClick={() => openWhatsApp()}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
                >
                  <MessageCircle className="h-5 w-5" />
                </button>
                <button
                  onClick={() => window.open("mailto:ghassan@tekamul.link", "_blank")}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
                >
                  <Mail className="h-5 w-5" />
                </button>
                <button
                  onClick={() => window.open("https://github.com/tekamul", "_blank")}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
                >
                  <Globe className="h-5 w-5" />
                </button>
              </div>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-12 pt-8 text-sm text-center">
            <p>{currentContent.footer.copyright}</p>
            <p className="text-gray-500 mt-2">غسان عبد الواحد عبد الله — البصرة, Iraq</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Menu, X } from "lucide-react"

export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4 sticky top-0 z-50">
      <div className="max-w-6xl mx-auto flex items-center justify-between">
        <div className="flex items-center">
          <Link href="/" className="text-xl font-bold text-gray-900">
            InfraOps Solutions
          </Link>
        </div>

        {/* Desktop Navigation */}
        <div className="hidden md:flex items-center space-x-8 space-x-reverse">
          <Link href="/" className="text-gray-600 hover:text-gray-900">
            الرئيسية
          </Link>
          <Link href="/services" className="text-gray-600 hover:text-gray-900">
            خدماتنا
          </Link>
          <Link href="/subscribe" className="text-gray-600 hover:text-gray-900">
            الاشتراك
          </Link>
          <Link href="/contact" className="text-gray-600 hover:text-gray-900">
            اتصل بنا
          </Link>
        </div>

        {/* Mobile Menu Button */}
        <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
          {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </button>
      </div>

      {/* Mobile Navigation */}
      {isMenuOpen && (
        <div className="md:hidden mt-4 pb-4 border-t border-gray-200">
          <div className="flex flex-col space-y-2 pt-4">
            <Link href="/" className="text-gray-600 hover:text-gray-900 py-2">
              الرئيسية
            </Link>
            <Link href="/services" className="text-gray-600 hover:text-gray-900 py-2">
              خدماتنا
            </Link>
            <Link href="/subscribe" className="text-gray-600 hover:text-gray-900 py-2">
              الاشتراك
            </Link>
            <Link href="/contact" className="text-gray-600 hover:text-gray-900 py-2">
              اتصل بنا
            </Link>
          </div>
        </div>
      )}
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/pricing-plans.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Check,
  MessageCircle,
  Smartphone,
  Globe,
  Settings,
  ArrowLeft,
  CreditCard,
  Phone,
  Building2,
  User,
  X,
  Mail,
} from "lucide-react"
import SubscriptionDetails from "./subscription-details"

export default function PricingPlans() {
  const [selectedPackage, setSelectedPackage] = useState<string | null>(null)
  const [showDetails, setShowDetails] = useState(false)

  const handlePackageSelect = (packageName: string) => {
    setSelectedPackage(packageName)
    setShowDetails(true)
  }

  const handleCloseDetails = () => {
    setShowDetails(false)
    setSelectedPackage(null)
  }

  const handleReceiptWhatsApp = () => {
    const message = "مرحبا، لقد قمت بتحويل مبلغ الاشتراك، هذا هو الإيصال."
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message)}`, "_blank")
  }

  return (
    <div dir="rtl" className="min-h-screen font-arabic bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-gray-900">InfraOps Solutions</h1>
          </div>
          <Button variant="outline" onClick={() => window.history.back()} className="flex items-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            العودة
          </Button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-gray-900">اشترك الآن</h1>
          <p className="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed mb-8">
            ابدأ مشروعك الرقمي اليوم مع نسخة معاينة مجانية، ثم ادفع فقط عند النشر.
          </p>
          <div className="flex justify-center">
            <Badge className="bg-green-100 text-green-700 px-6 py-3 text-lg font-semibold">
              ✨ معاينة مجانية لجميع الباقات
            </Badge>
          </div>
        </div>
      </section>

      {/* Subscription Details Modal */}
      {showDetails && selectedPackage && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-6 border-b">
              <h3 className="text-2xl font-bold">تفاصيل الاشتراك - {selectedPackage}</h3>
              <Button variant="ghost" size="icon" onClick={handleCloseDetails}>
                <X className="h-6 w-6" />
              </Button>
            </div>
            <div className="p-6">
              <SubscriptionDetails packageName={selectedPackage} onClose={handleCloseDetails} />
            </div>
          </div>
        </div>
      )}

      {/* Pricing Plans */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900">اختر الباقة المناسبة لك</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">جميع الباقات تشمل معاينة مجانية كاملة قبل الدفع</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Basic Plan */}
            <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader className="text-center pb-6">
                <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Smartphone className="h-10 w-10 text-blue-600" />
                </div>
                <CardTitle className="text-2xl mb-4">الباقة الأساسية</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">150,000 دينار</div>
                  <div className="text-sm text-gray-500 mb-3">للتنفيذ لمرة واحدة</div>
                  <div className="text-xl font-semibold text-blue-600">+ 50,000 دينار شهريًا</div>
                  <div className="text-sm text-gray-500">للدعم والاستضافة</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">
                  مثالية للمشاريع البسيطة والمواقع الشخصية
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>موقع بسيط أو تطبيق صفحة واحدة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تصميم متجاوب مع الهواتف</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني أساسي</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>استضافة شهر مجاني</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>نطاق مجاني (.com)</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  className="w-full bg-blue-600 hover:bg-blue-700 py-4 text-lg"
                  onClick={() => handlePackageSelect("الباقة الأساسية")}
                >
                  اختر هذه الباقة
                </Button>
              </CardFooter>
            </Card>

            {/* Advanced Plan */}
            <Card className="border-0 shadow-2xl ring-4 ring-purple-500 relative transform scale-105">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                <Badge className="bg-purple-500 text-white px-6 py-2 text-lg">الأكثر شيوعًا</Badge>
              </div>
              <CardHeader className="text-center pb-6 pt-8">
                <div className="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Globe className="h-10 w-10 text-purple-600" />
                </div>
                <CardTitle className="text-2xl mb-4">الباقة المتقدمة</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">250,000 دينار</div>
                  <div className="text-sm text-gray-500 mb-3">للتنفيذ لمرة واحدة</div>
                  <div className="text-xl font-semibold text-purple-600">+ 75,000 دينار شهريًا</div>
                  <div className="text-sm text-gray-500">للدعم والاستضافة</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">الأفضل للشركات الصغيرة والمتوسطة</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تطبيق متعدد الصفحات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تصميم مخصص حسب الطلب</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>لوحة تحكم إدارية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني متقدم</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تحليلات وإحصائيات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>نسخ احتياطية أسبوعية</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700 py-4 text-lg"
                  onClick={() => handlePackageSelect("الباقة المتقدمة")}
                >
                  اختر هذه الباقة
                </Button>
              </CardFooter>
            </Card>

            {/* Custom Plan */}
            <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader className="text-center pb-6">
                <div className="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Settings className="h-10 w-10 text-orange-600" />
                </div>
                <CardTitle className="text-2xl mb-4">باقة مخصصة</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">يبدأ من 400,000</div>
                  <div className="text-sm text-gray-500 mb-3">دينار للتنفيذ</div>
                  <div className="text-xl font-semibold text-orange-600">حسب المتطلبات</div>
                  <div className="text-sm text-gray-500">للدعم الشهري</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">
                  للمشاريع الكبيرة والمتطلبات الخاصة
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تطوير حسب الطلب</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>ميزات إضافية متقدمة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تكامل مع أنظمة خارجية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني مخصص 24/7</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>استشارة تقنية مستمرة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>أولوية في التطوير</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  variant="outline"
                  className="w-full border-2 border-orange-500 text-orange-600 hover:bg-orange-50 py-4 text-lg"
                  onClick={() => handlePackageSelect("الباقة المخصصة")}
                >
                  طلب استشارة
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* Payment Instructions */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-gray-50 to-blue-50">
        <div className="max-w-4xl mx-auto">
          <Card className="border-0 shadow-2xl bg-white">
            <CardHeader className="text-center bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-t-lg py-8">
              <div className="flex items-center justify-center mb-6">
                <CreditCard className="h-10 w-10 ml-3" />
                <CardTitle className="text-3xl">معلومات الدفع البنكي</CardTitle>
              </div>
              <CardDescription className="text-blue-100 text-lg">يرجى تحويل المبلغ على الحساب التالي:</CardDescription>
            </CardHeader>
            <CardContent className="p-10">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="flex items-center p-6 bg-gray-50 rounded-xl">
                    <User className="h-8 w-8 text-blue-600 ml-4" />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">اسم الحساب</div>
                      <div className="font-bold text-xl">غسان عبد الله</div>
                    </div>
                  </div>

                  <div className="flex items-center p-6 bg-gray-50 rounded-xl">
                    <Building2 className="h-8 w-8 text-blue-600 ml-4" />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">المصرف</div>
                      <div className="font-bold text-xl">مصرف الرافدين</div>
                    </div>
                  </div>
                </div>

                <div className="space-y-6">
                  <div className="flex items-center p-6 bg-blue-50 rounded-xl border-4 border-blue-200">
                    <CreditCard className="h-8 w-8 text-blue-600 ml-4" />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">رقم الحساب</div>
                      <div className="font-bold text-3xl text-blue-600 tracking-wider">8534699650</div>
                    </div>
                  </div>

                  <div className="flex items-center p-6 bg-green-50 rounded-xl border-4 border-green-200">
                    <Phone className="h-8 w-8 text-green-600 ml-4" />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">واتساب للإيصال</div>
                      <div className="font-bold text-xl text-green-600">+9647707028327</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="p-4 border rounded-lg bg-blue-50">
                <div className="font-bold mb-2 flex items-center">
                  <Mail className="ml-2 text-blue-600" />
                  <span>التواصل عبر الإيميل</span>
                </div>
                <p className="text-sm mb-2">
                  يمكنك أيضًا التواصل معنا عبر الإيميل لأي استفسارات أو لإرسال تفاصيل المشروع
                </p>
                <div className="flex items-center p-3 bg-white rounded-lg border border-blue-200">
                  <Mail className="h-5 w-5 text-blue-600 ml-2" />
                  <a href="mailto:ghassan@tekamul.link" className="font-bold text-blue-600 hover:underline">
                    ghassan@tekamul.link
                  </a>
                </div>
              </div>

              <div className="mt-10 p-8 bg-yellow-50 border-2 border-yellow-200 rounded-xl">
                <div className="flex items-start">
                  <MessageCircle className="h-8 w-8 text-yellow-600 ml-4 mt-1 flex-shrink-0" />
                  <div>
                    <h4 className="font-bold text-yellow-800 mb-4 text-lg">خطوات مهمة بعد التحويل:</h4>
                    <ol className="list-decimal list-inside space-y-2 text-yellow-700">
                      <li>التقط صورة واضحة لإيصال التحويل</li>
                      <li>أرسل الصورة عبر واتساب على الرقم أعلاه</li>
                      <li>اذكر اسم الباقة التي اخترتها</li>
                      <li>سنبدأ العمل خلال 24 ساعة من استلام الإيصال</li>
                    </ol>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Call-to-Action */}
      <section className="py-20 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-green-500 to-green-600">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-3xl md:text-4xl font-bold text-white mb-8">هل قمت بالتحويل؟</h3>
          <p className="text-xl text-green-100 mb-12 max-w-2xl mx-auto">
            أرسل صورة الإيصال الآن وسنبدأ العمل على مشروعك فورًا
          </p>
          <Button
            size="lg"
            className="bg-white text-green-600 hover:bg-green-50 px-12 py-8 text-xl rounded-xl shadow-2xl transform hover:scale-105 transition-all duration-200"
            onClick={handleReceiptWhatsApp}
          >
            <MessageCircle className="h-8 w-8 ml-3" />
            أرسل صورة الإيصال الآن
          </Button>

          <div className="mt-10 text-center">
            <p className="text-green-100 text-lg mb-4">أو تواصل معنا للاستفسار:</p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
              <a
                href="https://wa.me/9647707028327"
                className="text-white font-bold hover:underline text-xl flex items-center"
                target="_blank"
                rel="noopener noreferrer"
              >
                <MessageCircle className="h-5 w-5 ml-2" />
                +9647707028327
              </a>
              <span className="text-green-200 hidden sm:inline">|</span>
              <a
                href="mailto:ghassan@tekamul.link"
                className="text-white font-bold hover:underline text-xl flex items-center"
              >
                <Mail className="h-5 w-5 ml-2" />
                ghassan@tekamul.link
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto text-center">
          <div className="mb-6">
            <h3 className="text-2xl font-bold mb-3">InfraOps Solutions</h3>
            <p className="text-gray-400">حلول تقنية متكاملة لنجاح مشروعك الرقمي</p>
          </div>
          <div className="border-t border-gray-700 pt-6">
            <p className="text-gray-400">© {new Date().getFullYear()} InfraOps Solutions. جميع الحقوق محفوظة.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/privacy-policy.tsx"
"use client"

import Link from "next/link"
import { Cloud, ArrowLeft, Mail, MessageCircle, Globe, Shield, Database, Eye, Lock, UserCheck, RefreshCw, Phone, ChevronRight } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

const sections = [
  { id: "information-we-collect", label: "Information We Collect", icon: Database },
  { id: "how-we-use-information", label: "How We Use Information", icon: Eye },
  { id: "data-sharing", label: "Data Sharing", icon: Globe },
  { id: "data-security", label: "Data Security", icon: Lock },
  { id: "your-rights", label: "Your Rights", icon: UserCheck },
  { id: "external-services", label: "External Services", icon: Shield },
  { id: "policy-updates", label: "Policy Updates", icon: RefreshCw },
  { id: "contact-information", label: "Contact Information", icon: Phone },
]

function scrollToSection(id: string) {
  const el = document.getElementById(id)
  if (el) {
    const offset = 100
    const y = el.getBoundingClientRect().top + window.scrollY - offset
    window.scrollTo({ top: y, behavior: "smooth" })
  }
}

export default function PrivacyPolicy() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                <Cloud className="h-5 w-5 text-white" />
              </div>
              <span className="text-xl font-bold text-gray-900">Tekamul</span>
            </Link>
            <Link href="/">
              <Button variant="ghost" className="text-gray-600 hover:text-gray-900">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Home
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-600 to-purple-700 text-white py-16 lg:py-24">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-2xl mb-6">
            <Shield className="h-8 w-8 text-white" />
          </div>
          <h1 className="text-4xl lg:text-5xl font-bold mb-4 text-balance">Privacy Policy</h1>
          <p className="text-lg lg:text-xl text-blue-100 mb-6 max-w-2xl mx-auto leading-relaxed">
            Privacy Policy for Tekamul AI Mobile App and automation services.
          </p>
          <Badge className="bg-white/20 text-white hover:bg-white/30 text-sm px-4 py-1.5">
            Last updated: March 2026
          </Badge>
        </div>
      </section>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-10">

          {/* Sidebar Navigation */}
          <aside className="lg:col-span-1">
            <div className="sticky top-24">
              <Card className="border-gray-200 shadow-sm">
                <CardContent className="p-4">
                  <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">On this page</h3>
                  <nav className="space-y-1">
                    {sections.map((section) => {
                      const Icon = section.icon
                      return (
                        <button
                          key={section.id}
                          onClick={() => scrollToSection(section.id)}
                          className="flex items-center gap-2.5 w-full text-left px-3 py-2 rounded-lg text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-colors"
                        >
                          <Icon className="h-4 w-4 flex-shrink-0" />
                          <span>{section.label}</span>
                        </button>
                      )
                    })}
                  </nav>
                </CardContent>
              </Card>
            </div>
          </aside>

          {/* Content Area */}
          <main className="lg:col-span-3">
            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 lg:p-12">

              {/* Intro */}
              <div className="mb-12 pb-8 border-b border-gray-100">
                <p className="text-lg text-gray-700 leading-relaxed">
                  Tekamul AI Automation (“we”, “our”, or “us”) operates the Tekamul AI mobile
                  application (the “App”). This Privacy Policy explains how we collect, use, and protect
                  information when you use our mobile application and related automation services.
                </p>
              </div>

              {/* Section 1 */}
              <section id="information-we-collect" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-blue-100 text-blue-600">
                    <span className="text-lg font-bold">1</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Information We Collect</h2>
                </div>

                <div className="space-y-6">
                  <div className="rounded-xl bg-gray-50 p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                      <UserCheck className="h-5 w-5 text-blue-600" />
                      Personal Information
                    </h3>
                    <ul className="space-y-2 text-gray-600">
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-blue-500 mt-1 flex-shrink-0" />
                        <span>Name, phone number, or contact details entered in forms</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-blue-500 mt-1 flex-shrink-0" />
                        <span>Messages or requests sent through the app</span>
                      </li>
                    </ul>
                  </div>

                  <div className="rounded-xl bg-gray-50 p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                      <Database className="h-5 w-5 text-purple-600" />
                      Usage Data
                    </h3>
                    <ul className="space-y-2 text-gray-600">
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-purple-500 mt-1 flex-shrink-0" />
                        <span>Device type, OS version, and app usage activity</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-purple-500 mt-1 flex-shrink-0" />
                        <span>Error logs and diagnostic data</span>
                      </li>
                    </ul>
                  </div>

                  <div className="rounded-xl bg-gray-50 p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                      <Eye className="h-5 w-5 text-teal-600" />
                      Automation & AI Data
                    </h3>
                    <ul className="space-y-2 text-gray-600">
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-teal-500 mt-1 flex-shrink-0" />
                        <span>Inputs submitted to automation workflows</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-teal-500 mt-1 flex-shrink-0" />
                        <span>Messages processed through AI or chatbot integrations</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-teal-500 mt-1 flex-shrink-0" />
                        <span>Data routed to workflow engines such as n8n</span>
                      </li>
                    </ul>
                  </div>

                  <div className="rounded-xl bg-gray-50 p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                      <Globe className="h-5 w-5 text-orange-600" />
                      Third-Party Processing
                    </h3>
                    <p className="text-gray-600 mb-3">Some data may be processed by integrated services such as:</p>
                    <ul className="space-y-2 text-gray-600">
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-orange-500 mt-1 flex-shrink-0" />
                        <span>AI providers</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-orange-500 mt-1 flex-shrink-0" />
                        <span>Cloud workflow engines</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-orange-500 mt-1 flex-shrink-0" />
                        <span>Messaging or notification services</span>
                      </li>
                    </ul>
                    <p className="text-gray-500 text-sm mt-3 italic">
                      These providers process data only to perform the requested automation or response.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 2 */}
              <section id="how-we-use-information" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-purple-100 text-purple-600">
                    <span className="text-lg font-bold">2</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">How We Use Information</h2>
                </div>
                <p className="text-gray-700 mb-4 leading-relaxed">We use collected data to:</p>
                <ul className="space-y-3 text-gray-600">
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Operate the mobile application</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Execute automation workflows requested by the user</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Improve system performance and reliability</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Provide support and troubleshooting</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Meet legal or compliance requirements</span>
                  </li>
                </ul>
                <div className="mt-6 rounded-xl bg-blue-50 border border-blue-100 p-4">
                  <p className="text-blue-800 font-medium text-sm">
                    We do not sell personal data to third parties.
                  </p>
                </div>
              </section>

              {/* Section 3 */}
              <section id="data-sharing" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-teal-100 text-teal-600">
                    <span className="text-lg font-bold">3</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Data Sharing</h2>
                </div>
                <p className="text-gray-700 mb-4 leading-relaxed">We may share limited data only when necessary:</p>
                <ul className="space-y-3 text-gray-600">
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-teal-600" />
                    </div>
                    <span>With automation infrastructure used to process requests</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-teal-600" />
                    </div>
                    <span>With AI providers for generating responses</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-teal-600" />
                    </div>
                    <span>With hosting or analytics services for system stability</span>
                  </li>
                </ul>
                <p className="text-gray-500 text-sm mt-4 italic">
                  All providers are required to handle data securely and only for intended functionality.
                </p>
              </section>

              {/* Section 4 */}
              <section id="data-security" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-green-100 text-green-600">
                    <span className="text-lg font-bold">4</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Data Security</h2>
                </div>
                <div className="rounded-xl bg-green-50 border border-green-100 p-6">
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                      <Lock className="h-5 w-5 text-green-600" />
                    </div>
                    <div>
                      <p className="text-gray-700 leading-relaxed">
                        We implement reasonable security measures to protect information from unauthorized access, loss,
                        or misuse. However, no digital service can guarantee absolute security.
                      </p>
                    </div>
                  </div>
                </div>
              </section>

              {/* Section 5 */}
              <section id="your-rights" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-orange-100 text-orange-600">
                    <span className="text-lg font-bold">5</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Your Rights</h2>
                </div>
                <p className="text-gray-700 mb-4 leading-relaxed">Users may request:</p>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="rounded-xl bg-gray-50 p-5 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-orange-100 flex items-center justify-center flex-shrink-0">
                      <Eye className="h-4 w-4 text-orange-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Access</h4>
                      <p className="text-gray-500 text-sm">Access to stored data</p>
                    </div>
                  </div>
                  <div className="rounded-xl bg-gray-50 p-5 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                      <RefreshCw className="h-4 w-4 text-blue-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Correction</h4>
                      <p className="text-gray-500 text-sm">Correction of inaccurate data</p>
                    </div>
                  </div>
                  <div className="rounded-xl bg-gray-50 p-5 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center flex-shrink-0">
                      <Shield className="h-4 w-4 text-red-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Deletion</h4>
                      <p className="text-gray-500 text-sm">Deletion of data</p>
                    </div>
                  </div>
                  <div className="rounded-xl bg-gray-50 p-5 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
                      <UserCheck className="h-4 w-4 text-purple-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Withdrawal</h4>
                      <p className="text-gray-500 text-sm">Withdrawal of consent</p>
                    </div>
                  </div>
                </div>
                <div className="mt-6 rounded-xl bg-gray-50 p-4 flex items-center gap-3">
                  <Mail className="h-5 w-5 text-blue-600 flex-shrink-0" />
                  <p className="text-gray-700 text-sm">
                    Contact email: <a href="mailto:info@tekamul.link" className="text-blue-600 font-medium hover:underline">info@tekamul.link</a>
                  </p>
                </div>
              </section>

              {/* Section 6 */}
              <section id="external-services" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-100 text-indigo-600">
                    <span className="text-lg font-bold">6</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">External Services</h2>
                </div>
                <p className="text-gray-700 leading-relaxed">
                  The App may communicate with external APIs or automation servers to complete tasks requested by the
                  user. We are not responsible for the privacy practices of third-party platforms used through
                  integrations.
                </p>
              </section>

              {/* Section 7 */}
              <section id="policy-updates" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-cyan-100 text-cyan-600">
                    <span className="text-lg font-bold">7</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Policy Updates</h2>
                </div>
                <p className="text-gray-700 leading-relaxed">
                  We may update this Privacy Policy periodically. The updated version will always be published with a
                  revised date.
                </p>
              </section>

              {/* Section 8 */}
              <section id="contact-information" className="mb-6">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-rose-100 text-rose-600">
                    <span className="text-lg font-bold">8</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Contact Information</h2>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <a
                    href="mailto:info@tekamul.link"
                    className="rounded-xl bg-gray-50 p-5 flex items-center gap-3 hover:bg-gray-100 transition-colors"
                  >
                    <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                      <Mail className="h-5 w-5 text-blue-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Email</h4>
                      <p className="text-blue-600 text-sm">info@tekamul.link</p>
                    </div>
                  </a>
                  <a
                    href="https://tekamul.link"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="rounded-xl bg-gray-50 p-5 flex items-center gap-3 hover:bg-gray-100 transition-colors"
                  >
                    <div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
                      <Globe className="h-5 w-5 text-purple-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Website</h4>
                      <p className="text-blue-600 text-sm">https://tekamul.link</p>
                    </div>
                  </a>
                </div>
              </section>
            </div>

            {/* CTA Section */}
            <div className="mt-10 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-700 p-8 lg:p-12 text-center text-white">
              <h3 className="text-2xl lg:text-3xl font-bold mb-3">Have questions about your privacy?</h3>
              <p className="text-blue-100 mb-6 max-w-lg mx-auto leading-relaxed">
                We are committed to protecting your data. If you have any questions or concerns, feel free to reach out.
              </p>
              <Link href="/#contact">
                <Button size="lg" className="bg-white text-blue-700 hover:bg-blue-50 font-semibold px-8">
                  <MessageCircle className="h-5 w-5 mr-2" />
                  Contact Us
                </Button>
              </Link>
            </div>
          </main>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-300 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                <Cloud className="h-5 w-5 text-white" />
              </div>
              <span className="text-xl font-bold text-white">Tekamul</span>
            </Link>
            <div className="flex items-center gap-6 text-sm">
              <Link href="/" className="hover:text-white transition-colors">Home</Link>
              <Link href="/#services" className="hover:text-white transition-colors">Services</Link>
              <Link href="/#contact" className="hover:text-white transition-colors">Contact</Link>
              <Link href="/privacy" className="text-white font-medium">Privacy Policy</Link>
            </div>
            <div className="flex items-center gap-3">
              <a
                href="https://wa.me/9647707028327"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
              >
                <MessageCircle className="h-4 w-4" />
              </a>
              <a
                href="mailto:info@tekamul.link"
                className="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
              >
                <Mail className="h-4 w-4" />
              </a>
              <a
                href="https://tekamul.link"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
              >
                <Globe className="h-4 w-4" />
              </a>
            </div>
          </div>
          <div className="border-t border-gray-800 mt-8 pt-8 text-sm text-center text-gray-500">
            © {new Date().getFullYear()} Tekamul AI Automation. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscribe-form.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Check,
  CreditCard,
  Phone,
  Building2,
  User,
  MessageCircle,
  ArrowLeft,
  Smartphone,
  Globe,
  Settings,
  Send,
  Mail,
} from "lucide-react"

export default function SubscribeForm() {
  const [selectedPackage, setSelectedPackage] = useState<string | null>(null)
  const [showSubscriptionForm, setShowSubscriptionForm] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    projectDescription: "",
  })

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handlePackageSelect = (packageName: string) => {
    setSelectedPackage(packageName)
    setShowSubscriptionForm(true)
    // Scroll to form
    setTimeout(() => {
      const formElement = document.getElementById("subscription-form")
      if (formElement) {
        formElement.scrollIntoView({ behavior: "smooth" })
      }
    }, 100)
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedPackage) return

    // Construct WhatsApp message with form data
    const message = `
مرحباً، أرغب بالاشتراك في ${selectedPackage}
الاسم: ${formData.name}
البريد الإلكتروني: ${formData.email}
رقم الهاتف: ${formData.phone}
تفاصيل المشروع: ${formData.projectDescription}
    `
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message.trim())}`, "_blank")
  }

  const handleReceiptWhatsApp = () => {
    const message = "مرحبا، لقد قمت بتحويل مبلغ الاشتراك، هذا هو الإيصال."
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message)}`, "_blank")
  }

  const getPackageDetails = (packageName: string) => {
    switch (packageName) {
      case "تجربة مجانية":
        return {
          price: "مجاني",
          monthlyFee: "0 دينار",
          color: "blue",
          features: [
            "وصول كامل للميزات لمدة 15 يوم",
            "حتى 100 منتج في المتجر",
            "مساعد ذكي مُفعّل",
            "تحليلات أساسية",
            "دعم فني مجاني",
          ],
        }
      case "خطة المتجر الذكي الجاهزة":
        return {
          price: "$20",
          monthlyFee: "20 دولار",
          color: "purple",
          features: [
            "قوالب متجر جاهزة للاستخدام",
            "إعداد عيادة أو متجر",
            "مساعد ذكي مُعد مسبقاً",
            "دعم فني 24/7",
            "تحليلات متقدمة",
            "تكامل مع واتساب وإنستغرام",
          ],
        }
      case "مساعد ذكاء اصطناعي مخصص":
        return {
          price: "يبدأ من $35",
          monthlyFee: "35-50 دولار",
          color: "orange",
          features: [
            "تصميم سير عمل مخصص بالكامل",
            "منتجات غير محدودة",
            "تخصيص كامل للمساعد الذكي",
            "دعم ذو أولوية",
            "تكاملات متقدمة",
            "استشارة تقنية مستمرة",
          ],
        }
      default:
        return {
          price: "",
          monthlyFee: "",
          color: "gray",
          features: [],
        }
    }
  }

  return (
    <div dir="rtl" className="min-h-screen font-arabic bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-gray-900">InfraOps Solutions</h1>
          </div>
          <Button variant="outline" onClick={() => window.history.back()} className="flex items-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            العودة
          </Button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-gray-900">اشترك الآن</h1>
          <p className="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed mb-8">
            ابدأ بأتمتة متجرك وخدماتك عبر الذكاء الاصطناعي. جرّب مجاناً لمدة 15 يوم!
          </p>
          <div className="flex justify-center">
            <Badge className="bg-green-100 text-green-700 px-6 py-3 text-lg font-semibold">
              تجربة مجانية لمدة 15 يوم
            </Badge>
          </div>
        </div>
      </section>

      {/* Pricing Plans */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900">
              خطط المتجر الذكي ومساعد الذكاء الاصطناعي
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">اختر الخطة المناسبة لاحتياجات عملك</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Free Trial Plan */}
            <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader className="text-center pb-6">
                <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Smartphone className="h-10 w-10 text-blue-600" />
                </div>
                <CardTitle className="text-2xl mb-4">تجربة مجانية</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">مجاني</div>
                  <div className="text-sm text-gray-500 mb-3">لمدة 15 يوم</div>
                  <div className="text-xl font-semibold text-blue-600">وصول كامل للميزات</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">
                  مثالية لتجربة النظام قبل الاشتراك
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>وصول كامل للميزات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>حتى 100 منتج</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>مساعد ذكي مُفعّل</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تحليلات أساسية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني مجاني</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  className="w-full bg-blue-600 hover:bg-blue-700 py-4 text-lg"
                  onClick={() => handlePackageSelect("تجربة مجانية")}
                >
                  ابدأ التجربة المجانية
                </Button>
              </CardFooter>
            </Card>

            {/* Smart Store Ready Plan */}
            <Card className="border-0 shadow-2xl ring-4 ring-purple-500 relative transform scale-105">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                <Badge className="bg-purple-500 text-white px-6 py-2 text-lg">الأكثر شيوعاً</Badge>
              </div>
              <CardHeader className="text-center pb-6 pt-8">
                <div className="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Globe className="h-10 w-10 text-purple-600" />
                </div>
                <CardTitle className="text-2xl mb-4">خطة المتجر الذكي الجاهزة</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">$20</div>
                  <div className="text-sm text-gray-500 mb-3">شهرياً</div>
                  <div className="text-xl font-semibold text-purple-600">قوالب جاهزة للاستخدام</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">الأفضل للمتاجر والعيادات</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>قوالب متجر جاهزة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>إعداد عيادة أو متجر</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>مساعد ذكي مُعد مسبقاً</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني 24/7</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تحليلات متقدمة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تكامل مع واتساب وإنستغرام</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700 py-4 text-lg"
                  onClick={() => handlePackageSelect("خطة المتجر الذكي الجاهزة")}
                >
                  اختر هذه الخطة
                </Button>
              </CardFooter>
            </Card>

            {/* Custom AI Assistant Plan */}
            <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader className="text-center pb-6">
                <div className="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Settings className="h-10 w-10 text-orange-600" />
                </div>
                <CardTitle className="text-2xl mb-4">مساعد ذكاء اصطناعي مخصص</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">$35-50</div>
                  <div className="text-sm text-gray-500 mb-3">شهرياً</div>
                  <div className="text-xl font-semibold text-orange-600">تخصيص كامل</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">للشركات التي تحتاج حلول مخصصة</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تصميم سير عمل مخصص</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>منتجات غير محدودة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تخصيص كامل للمساعد</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم ذو أولوية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تكاملات متقدمة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>استشارة تقنية مستمرة</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  variant="outline"
                  className="w-full border-2 border-orange-500 text-orange-600 hover:bg-orange-50 py-4 text-lg bg-transparent"
                  onClick={() => handlePackageSelect("مساعد ذكاء اصطناعي مخصص")}
                >
                  تواصل معنا
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* Subscription Form */}
      {showSubscriptionForm && selectedPackage && (
        <section
          id="subscription-form"
          className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-gray-50 to-blue-50"
        >
          <div className="max-w-4xl mx-auto">
            <Card className="border-0 shadow-2xl bg-white">
              <CardHeader className="text-center bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-t-lg py-8">
                <div className="flex items-center justify-center mb-6">
                  <CardTitle className="text-3xl">تفاصيل الاشتراك - {selectedPackage}</CardTitle>
                </div>
                <CardDescription className="text-blue-100 text-lg">
                  يرجى إكمال النموذج أدناه للاشتراك في الباقة المختارة
                </CardDescription>
              </CardHeader>
              <CardContent className="p-8">
                {/* Package Details */}
                <div className="mb-8">
                  <h3 className="text-xl font-bold mb-4">تفاصيل الباقة المختارة</h3>
                  <div className="bg-blue-50 p-6 rounded-lg border border-blue-200">
                    <div className="flex justify-between items-center mb-4">
                      <div>
                        <span className="text-2xl font-bold">{getPackageDetails(selectedPackage).price}</span>
                        <span className="text-gray-500 mr-2">للتنفيذ لمرة واحدة</span>
                      </div>
                      <Badge className="bg-green-100 text-green-700 px-3 py-1">معاينة مجانية</Badge>
                    </div>
                    <div className="mb-4">
                      <span className="text-lg font-semibold text-blue-600">
                        + {getPackageDetails(selectedPackage).monthlyFee} دينار شهريًا
                      </span>
                      <span className="text-gray-500 mr-2">للدعم والاستضافة</span>
                    </div>
                    <div className="mt-4">
                      <h4 className="font-semibold mb-2">المميزات المتضمنة:</h4>
                      <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
                        {getPackageDetails(selectedPackage).features.map((feature, index) => (
                          <li key={index} className="flex items-center">
                            <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                            <span className="text-sm">{feature}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>

                {/* Subscription Form */}
                <div className="mb-8">
                  <h3 className="text-xl font-bold mb-4">نموذج الاشتراك</h3>
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">الاسم الكامل</Label>
                      <Input
                        id="name"
                        name="name"
                        placeholder="أدخل اسمك الكامل"
                        value={formData.name}
                        onChange={handleInputChange}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="email">البريد الإلكتروني</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        placeholder="example@domain.com"
                        value={formData.email}
                        onChange={handleInputChange}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="phone">رقم الهاتف</Label>
                      <Input
                        id="phone"
                        name="phone"
                        placeholder="أدخل رقم هاتفك"
                        value={formData.phone}
                        onChange={handleInputChange}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="projectDescription">وصف المشروع (اختياري)</Label>
                      <Textarea
                        id="projectDescription"
                        name="projectDescription"
                        placeholder="اكتب وصفاً مختصراً لمشروعك أو متطلباتك الخاصة"
                        value={formData.projectDescription}
                        onChange={handleInputChange}
                        rows={4}
                      />
                    </div>

                    <Button type="submit" className="w-full py-6 text-lg mt-6">
                      <Send className="ml-2" />
                      إرسال طلب الاشتراك
                    </Button>
                  </form>
                </div>

                {/* Payment Information */}
                <div>
                  <h3 className="text-xl font-bold mb-4">معلومات الدفع</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-4">
                      <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                        <User className="h-6 w-6 text-blue-600 ml-3" />
                        <div>
                          <div className="text-sm text-gray-600">اسم الحساب</div>
                          <div className="font-bold text-lg">غسان عبد الله</div>
                        </div>
                      </div>

                      <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                        <Building2 className="h-6 w-6 text-blue-600 ml-3" />
                        <div>
                          <div className="text-sm text-gray-600">المصرف</div>
                          <div className="font-bold text-lg">مصرف الرافدين</div>
                        </div>
                      </div>
                    </div>

                    <div className="space-y-4">
                      <div className="flex items-center p-4 bg-blue-50 rounded-lg border-2 border-blue-200">
                        <CreditCard className="h-6 w-6 text-blue-600 ml-3" />
                        <div>
                          <div className="text-sm text-gray-600">رقم الحساب</div>
                          <div className="font-bold text-2xl text-blue-600 tracking-wider">8534699650</div>
                        </div>
                      </div>

                      <div className="flex items-center p-4 bg-green-50 rounded-lg border-2 border-green-200">
                        <Phone className="h-6 w-6 text-green-600 ml-3" />
                        <div>
                          <div className="text-sm text-gray-600">واتساب للإيصال</div>
                          <div className="font-bold text-lg text-green-600">+9647707028327</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="p-4 border rounded-lg bg-blue-50">
                    <div className="font-bold mb-2 flex items-center">
                      <Mail className="ml-2 text-blue-600" />
                      <span>التواصل عبر الإيميل</span>
                    </div>
                    <p className="text-sm mb-2">
                      يمكنك أيضًا التواصل معنا عبر الإيميل لأي استفسارات أو لإرسال تفاصيل المشروع
                    </p>
                    <div className="flex items-center p-3 bg-white rounded-lg border border-blue-200">
                      <Mail className="h-5 w-5 text-blue-600 ml-2" />
                      <a href="mailto:ghassan@tekamul.link" className="font-bold text-blue-600 hover:underline">
                        ghassan@tekamul.link
                      </a>
                    </div>
                  </div>

                  <div className="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <div className="flex items-start">
                      <MessageCircle className="h-6 w-6 text-yellow-600 ml-3 mt-1 flex-shrink-0" />
                      <div>
                        <h4 className="font-semibold text-yellow-800 mb-2">خطوات مهمة بعد التحويل:</h4>
                        <ol className="list-decimal list-inside space-y-1 text-yellow-700 text-sm">
                          <li>التقط صورة واضحة لإيصال التحويل</li>
                          <li>أرسل الصورة عبر واتساب على الرقم أعلاه</li>
                          <li>اذكر اسم الباقة التي اخترتها</li>
                          <li>سنبدأ العمل خلال 24 ساعة من استلام الإيصال</li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>
      )}

      {/* Call-to-Action */}
      <section className="py-20 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-green-500 to-green-600">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-3xl md:text-4xl font-bold text-white mb-8">هل قمت بالتحويل؟</h3>
          <p className="text-xl text-green-100 mb-12 max-w-2xl mx-auto">
            أرسل صورة الإيصال الآن وسنبدأ العمل على مشروعك فورًا
          </p>
          <Button
            size="lg"
            className="bg-white text-green-600 hover:bg-green-50 px-12 py-8 text-xl rounded-xl shadow-2xl transform hover:scale-105 transition-all duration-200"
            onClick={handleReceiptWhatsApp}
          >
            <MessageCircle className="h-8 w-8 ml-3" />
            أرسل صورة الإيصال الآن
          </Button>

          <div className="mt-10 text-center">
            <p className="text-green-100 text-lg mb-4">أو تواصل معنا للاستفسار:</p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
              <a
                href="https://wa.me/9647707028327"
                className="text-white font-bold hover:underline text-xl flex items-center"
                target="_blank"
                rel="noopener noreferrer"
              >
                <MessageCircle className="h-5 w-5 ml-2" />
                +9647707028327
              </a>
              <span className="text-green-200 hidden sm:inline">|</span>
              <a
                href="mailto:ghassan@tekamul.link"
                className="text-white font-bold hover:underline text-xl flex items-center"
              >
                <Mail className="h-5 w-5 ml-2" />
                ghassan@tekamul.link
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto text-center">
          <div className="mb-6">
            <h3 className="text-2xl font-bold mb-3">InfraOps Solutions</h3>
            <p className="text-gray-400">حلول تقنية متكاملة لنجاح مشروعك الرقمي</p>
          </div>
          <div className="border-t border-gray-700 pt-6">
            <p className="text-gray-400">© {new Date().getFullYear()} InfraOps Solutions. جميع الحقوق محفوظة.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscription-details.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Check, CreditCard, Download, MessageCircle, Send } from "lucide-react"

interface SubscriptionDetailsProps {
  packageName: string
  onClose: () => void
}

export default function SubscriptionDetails({ packageName, onClose }: SubscriptionDetailsProps) {
  const [activeTab, setActiveTab] = useState("details")
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    projectDescription: "",
  })

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Construct WhatsApp message with form data
    const message = `
مرحباً، أرغب بالاشتراك في ${packageName}
الاسم: ${formData.name}
البريد الإلكتروني: ${formData.email}
رقم الهاتف: ${formData.phone}
تفاصيل المشروع: ${formData.projectDescription}
    `
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message.trim())}`, "_blank")
    onClose()
  }

  const getPackageDetails = () => {
    switch (packageName) {
      case "الباقة الأساسية":
        return {
          price: "150,000",
          monthlyFee: "50,000",
          color: "blue",
          features: [
            "موقع بسيط أو تطبيق صفحة واحدة",
            "تصميم متجاوب مع الهواتف",
            "دعم فني أساسي",
            "استضافة شهر مجاني",
            "نطاق مجاني (.com)",
            "تعديلات مجانية خلال فترة التطوير",
            "معاينة مجانية قبل الدفع",
          ],
          description:
            "الباقة الأساسية مثالية للأفراد وأصحاب المشاريع الصغيرة الذين يحتاجون إلى تواجد رقمي بسيط وفعال. تشمل هذه الباقة كل ما تحتاجه لبدء مشروعك الرقمي بتكلفة معقولة.",
        }
      case "الباقة المتقدمة":
        return {
          price: "250,000",
          monthlyFee: "75,000",
          color: "purple",
          features: [
            "تطبيق متعدد الصفحات",
            "تصميم مخصص حسب الطلب",
            "لوحة تحكم إدارية",
            "دعم فني متقدم",
            "تحليلات وإحصائيات",
            "نسخ احتياطية أسبوعية",
            "تكامل مع وسائل التواصل الاجتماعي",
            "تحسين محركات البحث (SEO)",
            "معاينة مجانية قبل الدفع",
          ],
          description:
            "الباقة المتقدمة مثالية للشركات الصغيرة والمتوسطة التي تتطلع إلى تواجد رقمي احترافي مع ميزات متقدمة. تشمل هذه الباقة كل ما تحتاجه لتنمية عملك عبر الإنترنت.",
        }
      case "الباقة المخصصة":
        return {
          price: "يبدأ من 400,000",
          monthlyFee: "حسب المتطلبات",
          color: "orange",
          features: [
            "تطوير حسب الطلب",
            "ميزات إضافية متقدمة",
            "تكامل مع أنظمة خارجية",
            "دعم فني مخصص 24/7",
            "استشارة تقنية مستمرة",
            "أولوية في التطوير",
            "تطبيقات الهاتف المحمول",
            "أنظمة إدارة علاقات العملاء",
            "حلول تجارة إلكترونية متكاملة",
            "معاينة مجانية قبل الدفع",
          ],
          description:
            "الباقة المخصصة مصممة للشركات والمؤسسات التي لديها متطلبات خاصة وتحتاج إلى حلول مخصصة تمامًا. نعمل معك لفهم احتياجاتك وتطوير حل يناسب عملك بشكل مثالي.",
        }
      default:
        return {
          price: "",
          monthlyFee: "",
          color: "gray",
          features: [],
          description: "",
        }
    }
  }

  const packageDetails = getPackageDetails()
  const colorClass = `text-${packageDetails.color}-600`
  const bgColorClass = `bg-${packageDetails.color}-100`
  const borderColorClass = `border-${packageDetails.color}-200`

  return (
    <div className="space-y-6">
      <Tabs defaultValue="details" value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="details">تفاصيل الباقة</TabsTrigger>
          <TabsTrigger value="payment">طرق الدفع</TabsTrigger>
          <TabsTrigger value="form">نموذج الاشتراك</TabsTrigger>
        </TabsList>

        <TabsContent value="details" className="space-y-6 pt-4">
          <div className="flex justify-between items-start">
            <div>
              <h3 className="text-2xl font-bold">{packageName}</h3>
              <div className="mt-2">
                <span className="text-3xl font-bold">{packageDetails.price} دينار</span>
                <span className="text-gray-500 mr-2">للتنفيذ لمرة واحدة</span>
              </div>
              <div className="mt-1">
                <span className={`text-xl font-semibold ${colorClass}`}>+ {packageDetails.monthlyFee} دينار شهريًا</span>
                <span className="text-gray-500 mr-2">للدعم والاستضافة</span>
              </div>
            </div>
            <Badge className={`${bgColorClass} ${colorClass} px-4 py-2`}>معاينة مجانية</Badge>
          </div>

          <div className="mt-6">
            <p className="text-gray-700">{packageDetails.description}</p>
          </div>

          <Card className={`${bgColorClass} border ${borderColorClass}`}>
            <CardHeader>
              <CardTitle>المميزات المتضمنة</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {packageDetails.features.map((feature, index) => (
                  <li key={index} className="flex items-center">
                    <Check className={`h-5 w-5 ${colorClass} ml-2 flex-shrink-0`} />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>

          <div className="flex justify-between pt-4">
            <Button variant="outline" onClick={onClose}>
              العودة
            </Button>
            <Button onClick={() => setActiveTab("payment")}>متابعة للدفع</Button>
          </div>
        </TabsContent>

        <TabsContent value="payment" className="space-y-6 pt-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <CreditCard className="ml-2" />
                طرق الدفع المتاحة
              </CardTitle>
              <CardDescription>يمكنك الدفع بإحدى الطرق التالية</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="p-4 border rounded-lg">
                <div className="font-bold mb-2">التحويل البنكي</div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <div className="text-sm text-gray-600">اسم الحساب</div>
                    <div className="font-bold">غسان عبد الله</div>
                  </div>
                  <div>
                    <div className="text-sm text-gray-600">المصرف</div>
                    <div className="font-bold">مصرف الرافدين</div>
                  </div>
                  <div>
                    <div className="text-sm text-gray-600">رقم الحساب</div>
                    <div className="font-bold text-xl text-blue-600">8534699650</div>
                  </div>
                </div>
              </div>

              <div className="p-4 border rounded-lg bg-green-50">
                <div className="font-bold mb-2 flex items-center">
                  <MessageCircle className="ml-2 text-green-600" />
                  <span>الدفع عبر واتساب</span>
                </div>
                <p className="text-sm">
                  يمكنك التواصل معنا عبر واتساب لترتيب عملية الدفع والحصول على المساعدة في كل خطوة
                </p>
                <Button
                  variant="outline"
                  className="mt-4 border-green-500 text-green-600"
                  onClick={() => {
                    window.open(
                      `https://wa.me/9647707028327?text=مرحباً،%20أرغب%20بالاستفسار%20عن%20طرق%20الدفع%20للاشتراك%20في%20${packageName}`,
                      "_blank",
                    )
                  }}
                >
                  <MessageCircle className="ml-2" />
                  تواصل عبر واتساب
                </Button>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>خطوات الدفع</CardTitle>
            </CardHeader>
            <CardContent>
              <ol className="list-decimal list-inside space-y-3">
                <li>قم بتحويل المبلغ إلى الحساب المذكور أعلاه</li>
                <li>التقط صورة واضحة لإيصال التحويل</li>
                <li>أرسل الصورة عبر واتساب على الرقم +9647707028327</li>
                <li>اذكر اسم الباقة التي اخترتها ({packageName})</li>
                <li>سنبدأ العمل على مشروعك خلال 24 ساعة من استلام الإيصال</li>
              </ol>
            </CardContent>
          </Card>

          <div className="flex justify-between pt-4">
            <Button variant="outline" onClick={() => setActiveTab("details")}>
              العودة للتفاصيل
            </Button>
            <Button onClick={() => setActiveTab("form")}>متابعة لنموذج الاشتراك</Button>
          </div>
        </TabsContent>

        <TabsContent value="form" className="space-y-6 pt-4">
          <Card>
            <CardHeader>
              <CardTitle>نموذج الاشتراك</CardTitle>
              <CardDescription>يرجى تعبئة البيانات التالية للاشتراك في {packageName}</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="name">الاسم الكامل</Label>
                  <Input
                    id="name"
                    name="name"
                    placeholder="أدخل اسمك الكامل"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="email">البريد الإلكتروني</Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    placeholder="example@domain.com"
                    value={formData.email}
                    onChange={handleInputChange}
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="phone">رقم الهاتف</Label>
                  <Input
                    id="phone"
                    name="phone"
                    placeholder="أدخل رقم هاتفك"
                    value={formData.phone}
                    onChange={handleInputChange}
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="projectDescription">وصف المشروع (اختياري)</Label>
                  <Textarea
                    id="projectDescription"
                    name="projectDescription"
                    placeholder="اكتب وصفاً مختصراً لمشروعك أو متطلباتك الخاصة"
                    value={formData.projectDescription}
                    onChange={handleInputChange}
                    rows={4}
                  />
                </div>

                <div className="pt-4 flex justify-between">
                  <Button type="button" variant="outline" onClick={() => setActiveTab("payment")}>
                    العودة
                  </Button>
                  <Button
                    type="submit"
                    className={`bg-${packageDetails.color}-600 hover:bg-${packageDetails.color}-700`}
                  >
                    <Send className="ml-2" />
                    إرسال طلب الاشتراك
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>

          <Card className="bg-blue-50 border border-blue-200">
            <CardHeader>
              <CardTitle className="flex items-center">
                <Download className="ml-2 text-blue-600" />
                <span>تنزيل نموذج العقد</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p>يمكنك تنزيل نموذج العقد للاطلاع على كافة الشروط والأحكام قبل الاشتراك</p>
              <Button variant="outline" className="mt-4 border-blue-500 text-blue-600">
                <Download className="ml-2" />
                تنزيل نموذج العقد (PDF)
              </Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscription-page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Check,
  CreditCard,
  Phone,
  Building2,
  User,
  MessageCircle,
  ArrowLeft,
  Smartphone,
  Globe,
  Settings,
  Shield,
  RefreshCw,
  Clock,
  ThumbsUp,
  AlertCircle,
  Mail,
} from "lucide-react"

export default function SubscriptionPage() {
  const handleWhatsAppContact = () => {
    const message = "مرحبا، لقد قمت بتحويل مبلغ الاشتراك، هذا هو الإيصال."
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message)}`, "_blank")
  }

  return (
    <div dir="rtl" className="min-h-screen font-arabic bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-gray-900">InfraOps Solutions</h1>
          </div>
          <Button variant="outline" onClick={() => window.history.back()} className="flex items-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            العودة
          </Button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-gray-900">اشترك الآن</h1>
          <p className="text-lg md:text-xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
            ابدأ مشروعك الرقمي اليوم مع نسخة معاينة مجانية، ثم ادفع فقط عند النشر.
          </p>
          <div className="mt-8">
            <Badge className="bg-green-100 text-green-700 px-4 py-2 text-sm">✨ معاينة مجانية لجميع الباقات</Badge>
          </div>
        </div>
      </section>

      {/* Pricing Plans */}
      <section className="py-8 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">اختر الباقة المناسبة لك</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">جميع الباقات تشمل معاينة مجانية كاملة قبل الدفع</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Basic Plan */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow relative">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Smartphone className="h-8 w-8 text-blue-600" />
                </div>
                <CardTitle className="text-xl mb-2">الباقة الأساسية</CardTitle>
                <div className="text-center">
                  <div className="text-2xl font-bold text-gray-900 mb-1">150,000 دينار</div>
                  <div className="text-sm text-gray-500 mb-2">للتنفيذ لمرة واحدة</div>
                  <div className="text-lg font-semibold text-blue-600">+ 50,000 دينار شهريًا</div>
                  <div className="text-xs text-gray-500">للدعم والاستضافة</div>
                </div>
                <CardDescription className="mt-4 text-center">مثالية للمشاريع البسيطة والمواقع الشخصية</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">موقع بسيط أو تطبيق صفحة واحدة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تصميم متجاوب مع الهواتف</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">دعم فني أساسي</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">استضافة شهر مجاني</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">نطاق مجاني (.com)</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-blue-600 hover:bg-blue-700"
                  onClick={() =>
                    window.open("https://wa.me/9647707028327?text=أريد%20الاشتراك%20في%20الباقة%20الأساسية", "_blank")
                  }
                >
                  اختر هذه الباقة
                </Button>
              </CardFooter>
            </Card>

            {/* Advanced Plan */}
            <Card className="border-0 shadow-xl ring-2 ring-purple-500 relative">
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                <Badge className="bg-purple-500 text-white px-4 py-1">الأكثر شيوعًا</Badge>
              </div>
              <CardHeader className="text-center pb-4 pt-8">
                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Globe className="h-8 w-8 text-purple-600" />
                </div>
                <CardTitle className="text-xl mb-2">الباقة المتقدمة</CardTitle>
                <div className="text-center">
                  <div className="text-2xl font-bold text-gray-900 mb-1">250,000 دينار</div>
                  <div className="text-sm text-gray-500 mb-2">للتنفيذ لمرة واحدة</div>
                  <div className="text-lg font-semibold text-purple-600">+ 75,000 دينار شهريًا</div>
                  <div className="text-xs text-gray-500">للدعم والاستضافة</div>
                </div>
                <CardDescription className="mt-4 text-center">الأفضل للشركات الصغيرة والمتوسطة</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تطبيق متعدد الصفحات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تصميم مخصص حسب الطلب</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">لوحة تحكم إدارية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">دعم فني متقدم</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تحليلات وإحصائيات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">نسخ احتياطية أسبوعية</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700"
                  onClick={() =>
                    window.open("https://wa.me/9647707028327?text=أريد%20الاشتراك%20في%20الباقة%20المتقدمة", "_blank")
                  }
                >
                  اختر هذه الباقة
                </Button>
              </CardFooter>
            </Card>

            {/* Custom Plan */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow relative">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Settings className="h-8 w-8 text-orange-600" />
                </div>
                <CardTitle className="text-xl mb-2">باقة مخصصة</CardTitle>
                <div className="text-center">
                  <div className="text-2xl font-bold text-gray-900 mb-1">يبدأ من 400,000</div>
                  <div className="text-sm text-gray-500 mb-2">دينار للتنفيذ</div>
                  <div className="text-lg font-semibold text-orange-600">حسب المتطلبات</div>
                  <div className="text-xs text-gray-500">للدعم الشهري</div>
                </div>
                <CardDescription className="mt-4 text-center">للمشاريع الكبيرة والمتطلبات الخاصة</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تطوير حسب الطلب</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">ميزات إضافية متقدمة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تكامل مع أنظمة خارجية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">دعم فني مخصص 24/7</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">استشارة تقنية مستمرة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">أولوية في التطوير</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  variant="outline"
                  className="w-full border-orange-500 text-orange-600 hover:bg-orange-50"
                  onClick={() =>
                    window.open("https://wa.me/9647707028327?text=أريد%20استشارة%20حول%20الباقة%20المخصصة", "_blank")
                  }
                >
                  طلب استشارة
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* Payment Instructions */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-gray-50 to-blue-50">
        <div className="max-w-4xl mx-auto">
          <Card className="border-0 shadow-lg bg-white">
            <CardHeader className="text-center bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-t-lg">
              <div className="flex items-center justify-center mb-4">
                <CreditCard className="h-8 w-8 ml-2" />
                <CardTitle className="text-2xl">معلومات الدفع البنكي</CardTitle>
              </div>
              <CardDescription className="text-blue-100">يرجى تحويل المبلغ على الحساب التالي:</CardDescription>
            </CardHeader>
            <CardContent className="p-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                    <User className="h-6 w-6 text-blue-600 ml-3" />
                    <div>
                      <div className="text-sm text-gray-600">اسم الحساب</div>
                      <div className="font-bold text-lg">غسان عبد الله</div>
                    </div>
                  </div>

                  <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                    <Building2 className="h-6 w-6 text-blue-600 ml-3" />
                    <div>
                      <div className="text-sm text-gray-600">المصرف</div>
                      <div className="font-bold text-lg">مصرف الرافدين</div>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="flex items-center p-4 bg-blue-50 rounded-lg border-2 border-blue-200">
                    <CreditCard className="h-6 w-6 text-blue-600 ml-3" />
                    <div>
                      <div className="text-sm text-gray-600">رقم الحساب</div>
                      <div className="font-bold text-2xl text-blue-600 tracking-wider">8534699650</div>
                    </div>
                  </div>

                  <div className="flex items-center p-4 bg-green-50 rounded-lg border-2 border-green-200">
                    <Phone className="h-6 w-6 text-green-600 ml-3" />
                    <div>
                      <div className="text-sm text-gray-600">واتساب للإيصال</div>
                      <div className="font-bold text-lg text-green-600">+9647707028327</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="p-4 border rounded-lg bg-blue-50">
                <div className="font-bold mb-2 flex items-center">
                  <Mail className="ml-2 text-blue-600" />
                  <span>التواصل عبر الإيميل</span>
                </div>
                <p className="text-sm mb-2">
                  يمكنك أيضًا التواصل معنا عبر الإيميل لأي استفسارات أو لإرسال تفاصيل المشروع
                </p>
                <div className="flex items-center p-3 bg-white rounded-lg border border-blue-200">
                  <Mail className="h-5 w-5 text-blue-600 ml-2" />
                  <a href="mailto:ghassan@tekamul.link" className="font-bold text-blue-600 hover:underline">
                    ghassan@tekamul.link
                  </a>
                </div>
              </div>

              <div className="mt-8 p-6 bg-yellow-50 border border-yellow-200 rounded-lg">
                <div className="flex items-start">
                  <MessageCircle className="h-6 w-6 text-yellow-600 ml-3 mt-1 flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold text-yellow-800 mb-2">خطوات مهمة بعد التحويل:</h4>
                    <ol className="list-decimal list-inside space-y-1 text-yellow-700 text-sm">
                      <li>التقط صورة واضحة لإيصال التحويل</li>
                      <li>أرسل الصورة عبر واتساب على الرقم أعلاه</li>
                      <li>اذكر اسم الباقة التي اخترتها</li>
                      <li>سنبدأ العمل خلال 24 ساعة من استلام الإيصال</li>
                    </ol>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Guarantees and Refund Policy */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <div className="inline-block p-3 bg-blue-50 rounded-full mb-4">
              <Shield className="h-8 w-8 text-blue-600" />
            </div>
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">ضماناتنا وسياسة الاسترداد</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">نحن نؤمن بجودة خدماتنا ونقدم ضمانات واضحة لحماية حقوقك</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            {/* Guarantee Card 1 */}
            <Card className="border-0 shadow-md hover:shadow-lg transition-shadow">
              <CardHeader className="pb-4 border-b">
                <div className="flex items-center">
                  <ThumbsUp className="h-6 w-6 text-green-500 ml-3" />
                  <CardTitle className="text-lg">ضمان الرضا</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="pt-6">
                <p className="text-gray-700 mb-4">
                  نضمن لك الرضا التام عن الخدمة المقدمة. سنعمل معك على التعديلات المطلوبة حتى تكون راضيًا تمامًا عن
                  النتيجة النهائية.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">تعديلات غير محدودة خلال فترة التطوير</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">مراجعة شاملة للتصميم والوظائف قبل الإطلاق</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">دعم فني مستمر لضمان أداء مثالي</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

            {/* Guarantee Card 2 */}
            <Card className="border-0 shadow-md hover:shadow-lg transition-shadow">
              <CardHeader className="pb-4 border-b">
                <div className="flex items-center">
                  <Clock className="h-6 w-6 text-blue-500 ml-3" />
                  <CardTitle className="text-lg">ضمان الوقت</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="pt-6">
                <p className="text-gray-700 mb-4">
                  نلتزم بالجدول الزمني المتفق عليه لتسليم المشروع. في حال التأخير من جانبنا، ستحصل على خصم على الرسوم
                  الشهرية.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">جدول زمني واضح منذ البداية</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">تحديثات منتظمة عن سير العمل</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">تعويض في حال التأخير من جانبنا</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>

          {/* Refund Policy */}
          <Card className="border-0 shadow-lg bg-gradient-to-r from-blue-50 to-purple-50">
            <CardHeader className="pb-4 border-b">
              <div className="flex items-center justify-center">
                <RefreshCw className="h-6 w-6 text-purple-600 ml-3" />
                <CardTitle>سياسة الاسترداد</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="pt-6">
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="bg-white p-2 rounded-full shadow-sm mr-4">
                    <AlertCircle className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">المعاينة المجانية</h4>
                    <p className="text-sm text-gray-700">
                      تبدأ جميع مشاريعنا بمعاينة مجانية قبل الدفع. هذا يعني أنك لن تدفع أي مبلغ حتى ترى نموذجًا أوليًا
                      للمشروع وتوافق عليه.
                    </p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-white p-2 rounded-full shadow-sm mr-4">
                    <AlertCircle className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">قبل بدء التطوير</h4>
                    <p className="text-sm text-gray-700">
                      في حال قررت إلغاء المشروع بعد الدفع وقبل بدء التطوير، يمكنك استرداد 90% من المبلغ المدفوع.
                    </p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-white p-2 rounded-full shadow-sm mr-4">
                    <AlertCircle className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">خلال مرحلة التطوير</h4>
                    <p className="text-sm text-gray-700">
                      في حال إلغاء المشروع خلال مرحلة التطوير، يتم احتساب نسبة الاسترداد بناءً على مقدار العمل المنجز:
                    </p>
                    <ul className="list-disc list-inside mt-2 space-y-1 text-sm text-gray-700">
                      <li>إكمال 25% من المشروع: استرداد 75% من المبلغ</li>
                      <li>إكمال 50% من المشروع: استرداد 50% من المبلغ</li>
                      <li>إكمال 75% من المشروع: استرداد 25% من المبلغ</li>
                    </ul>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-white p-2 rounded-full shadow-sm mr-4">
                    <AlertCircle className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">بعد اكتمال المشروع</h4>
                    <p className="text-sm text-gray-700">
                      بعد اكتمال المشروع وتسليمه، لا يمكن استرداد رسوم التطوير. أما بالنسبة للاشتراك الشهري، يمكنك
                      إلغاؤه في أي وقت دون رسوم إضافية.
                    </p>
                  </div>
                </div>
              </div>

              <div className="mt-8 p-4 bg-white rounded-lg border border-purple-200 shadow-sm">
                <p className="text-sm text-center text-gray-700">
                  لمزيد من المعلومات حول سياسة الاسترداد أو الضمانات، يرجى التواصل معنا على
                  <a href="https://wa.me/9647707028327" className="text-purple-600 font-semibold mx-1 hover:underline">
                    واتساب
                  </a>
                  وسنقوم بالرد على استفساراتك في أقرب وقت.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Call-to-Action */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-green-500 to-green-600">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-2xl md:text-3xl font-bold text-white mb-6">هل قمت بالتحويل؟</h3>
          <p className="text-lg text-green-100 mb-8 max-w-2xl mx-auto">
            أرسل صورة الإيصال الآن وسنبدأ العمل على مشروعك فورًا
          </p>
          <Button
            size="lg"
            className="bg-white text-green-600 hover:bg-green-50 px-8 py-6 text-lg rounded-lg shadow-lg transform hover:scale-105 transition-all duration-200"
            onClick={handleWhatsAppContact}
          >
            <MessageCircle className="h-6 w-6 ml-2" />
            أرسل صورة الإيصال الآن
          </Button>

          <div className="mt-10 text-center">
            <p className="text-green-100 text-lg mb-4">أو تواصل معنا للاستفسار:</p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
              <a
                href="https://wa.me/9647707028327"
                className="text-white font-bold hover:underline text-xl flex items-center"
                target="_blank"
                rel="noopener noreferrer"
              >
                <MessageCircle className="h-5 w-5 ml-2" />
                +9647707028327
              </a>
              <span className="text-green-200 hidden sm:inline">|</span>
              <a
                href="mailto:ghassan@tekamul.link"
                className="text-white font-bold hover:underline text-xl flex items-center"
              >
                <Mail className="h-5 w-5 ml-2" />
                ghassan@tekamul.link
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-8 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto text-center">
          <div className="mb-4">
            <h3 className="text-lg font-semibold mb-2">InfraOps Solutions</h3>
            <p className="text-gray-400 text-sm">حلول تقنية متكاملة لنجاح مشروعك الرقمي</p>
          </div>
          <div className="border-t border-gray-700 pt-4">
            <p className="text-sm text-gray-400">
              © {new Date().getFullYear()} InfraOps Solutions. جميع الحقوق محفوظة.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'

interface ThemeProviderProps {
  children: React.ReactNode
  attribute?: string
  defaultTheme?: string
  forcedTheme?: string
  disableTransitionOnChange?: boolean
}

export function ThemeProvider({ children }: ThemeProviderProps) {
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
'use client'

import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDown } from 'lucide-react'

import { cn } from '@/lib/utils'

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn('border-b', className)}
    {...props}
  />
))
AccordionItem.displayName = 'AccordionItem'

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
        className,
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn('pb-4 pt-0', className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
'use client'

import * as React from 'react'
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'

import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-2 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
AlertDialogHeader.displayName = 'AlertDialogHeader'

const AlertDialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
AlertDialogFooter.displayName = 'AlertDialogFooter'

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn('text-lg font-semibold', className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: 'outline' }),
      'mt-2 sm:mt-0',
      className,
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const alertVariants = cva(
  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
  {
    variants: {
      variant: {
        default: 'bg-background text-foreground',
        destructive:
          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = 'Alert'

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
    {...props}
  />
))
AlertTitle.displayName = 'AlertTitle'

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('text-sm [&_p]:leading-relaxed', className)}
    {...props}
  />
))
AlertDescription.displayName = 'AlertDescription'

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx"
'use client'

import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
'use client'

import * as React from 'react'
import * as AvatarPrimitive from '@radix-ui/react-avatar'

import { cn } from '@/lib/utils'

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
      className,
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn('aspect-square h-full w-full', className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      'flex h-full w-full items-center justify-center rounded-full bg-muted',
      className,
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { ChevronRight, MoreHorizontal } from 'lucide-react'

import { cn } from '@/lib/utils'

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<'nav'> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = 'Breadcrumb'

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<'ol'>
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
      className,
    )}
    {...props}
  />
))
BreadcrumbList.displayName = 'BreadcrumbList'

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<'li'>
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn('inline-flex items-center gap-1.5', className)}
    {...props}
  />
))
BreadcrumbItem.displayName = 'BreadcrumbItem'

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<'a'> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : 'a'

  return (
    <Comp
      ref={ref}
      className={cn('transition-colors hover:text-foreground', className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = 'BreadcrumbLink'

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<'span'>
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn('font-normal text-foreground', className)}
    {...props}
  />
))
BreadcrumbPage.displayName = 'BreadcrumbPage'

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<'li'>) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<'span'>) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn('flex h-9 w-9 items-center justify-center', className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button-group.tsx"
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

const buttonGroupVariants = cva(
  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
  {
    variants: {
      orientation: {
        horizontal:
          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
        vertical:
          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  },
)

function ButtonGroup({
  className,
  orientation,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : 'div'

  return (
    <Comp
      className={cn(
        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
        className,
      )}
      {...props}
    />
  )
}

function ButtonGroupSeparator({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="button-group-separator"
      orientation={orientation}
      className={cn(
        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
        className,
      )}
      {...props}
    />
  )
}

export {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
  buttonGroupVariants,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
'use client'

import * as React from 'react'
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from 'lucide-react'
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = 'label',
  buttonVariant = 'ghost',
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>['variant']
}) {
  const defaultClassNames = getDefaultClassNames()

  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        'bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className,
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: (date) =>
          date.toLocaleString('default', { month: 'short' }),
        ...formatters,
      }}
      classNames={{
        root: cn('w-fit', defaultClassNames.root),
        months: cn(
          'flex gap-4 flex-col md:flex-row relative',
          defaultClassNames.months,
        ),
        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
        nav: cn(
          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
          defaultClassNames.nav,
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_previous,
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_next,
        ),
        month_caption: cn(
          'flex items-center justify-center h-[--cell-size] w-full px-[--cell-size]',
          defaultClassNames.month_caption,
        ),
        dropdowns: cn(
          'w-full flex items-center text-sm font-medium justify-center h-[--cell-size] gap-1.5',
          defaultClassNames.dropdowns,
        ),
        dropdown_root: cn(
          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
          defaultClassNames.dropdown_root,
        ),
        dropdown: cn(
          'absolute bg-popover inset-0 opacity-0',
          defaultClassNames.dropdown,
        ),
        caption_label: cn(
          'select-none font-medium',
          captionLayout === 'label'
            ? 'text-sm'
            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
          defaultClassNames.caption_label,
        ),
        table: 'w-full border-collapse',
        weekdays: cn('flex', defaultClassNames.weekdays),
        weekday: cn(
          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
          defaultClassNames.weekday,
        ),
        week: cn('flex w-full mt-2', defaultClassNames.week),
        week_number_header: cn(
          'select-none w-[--cell-size]',
          defaultClassNames.week_number_header,
        ),
        week_number: cn(
          'text-[0.8rem] select-none text-muted-foreground',
          defaultClassNames.week_number,
        ),
        day: cn(
          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
          defaultClassNames.day,
        ),
        range_start: cn(
          'rounded-l-md bg-accent',
          defaultClassNames.range_start,
        ),
        range_middle: cn('rounded-none', defaultClassNames.range_middle),
        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
        today: cn(
          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
          defaultClassNames.today,
        ),
        outside: cn(
          'text-muted-foreground aria-selected:text-muted-foreground',
          defaultClassNames.outside,
        ),
        disabled: cn(
          'text-muted-foreground opacity-50',
          defaultClassNames.disabled,
        ),
        hidden: cn('invisible', defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === 'left') {
            return (
              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
            )
          }

          if (orientation === 'right') {
            return (
              <ChevronRightIcon
                className={cn('size-4', className)}
                {...props}
              />
            )
          }

          return (
            <ChevronDownIcon className={cn('size-4', className)} {...props} />
          )
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-[--cell-size] items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

  const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

  return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
        defaultClassNames.day,
        className,
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx"
'use client'

import * as React from 'react'
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from 'embla-carousel-react'
import { ArrowLeft, ArrowRight } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: 'horizontal' | 'vertical'
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

  if (!context) {
    throw new Error('useCarousel must be used within a <Carousel />')
  }

  return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = 'horizontal',
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref,
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === 'horizontal' ? 'x' : 'y',
      },
      plugins,
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

    const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

      setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

    const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

    const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

    const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === 'ArrowLeft') {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === 'ArrowRight') {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext],
    )

    React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

      setApi(api)
    }, [api, setApi])

    React.useEffect(() => {
      if (!api) {
        return
      }

      onSelect(api)
      api.on('reInit', onSelect)
      api.on('select', onSelect)

      return () => {
        api?.off('select', onSelect)
      }
    }, [api, onSelect])

    return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn('relative', className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  },
)
Carousel.displayName = 'Carousel'

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

  return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          'flex',
          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
          className,
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = 'CarouselContent'

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

  return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        'min-w-0 shrink-0 grow-0 basis-full',
        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
        className,
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = 'CarouselItem'

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        'absolute  h-8 w-8 rounded-full',
        orientation === 'horizontal'
          ? '-left-12 top-1/2 -translate-y-1/2'
          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = 'CarouselPrevious'

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        'absolute h-8 w-8 rounded-full',
        orientation === 'horizontal'
          ? '-right-12 top-1/2 -translate-y-1/2'
          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = 'CarouselNext'

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
'use client'

import * as React from 'react'
import * as RechartsPrimitive from 'recharts'

import { cn } from '@/lib/utils'

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

  return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >['children']
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = 'Chart'

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color,
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join('\n')}
}
`,
          )
          .join('\n'),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<'div'> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: 'line' | 'dot' | 'dashed'
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = 'dot',
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref,
  ) => {
    const { config } = useChart()

    const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

      const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || 'value'}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === 'string'
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

      if (labelFormatter) {
        return (
          <div className={cn('font-medium', labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

      if (!value) {
        return null
      }

      return <div className={cn('font-medium', labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

    if (!active || !payload?.length) {
      return null
    }

    const nestLabel = payload.length === 1 && indicator !== 'dot'

    return (
      <div
        ref={ref}
        className={cn(
          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
          className,
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || 'value'}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
                  indicator === 'dot' && 'items-center',
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
                            {
                              'h-2.5 w-2.5': indicator === 'dot',
                              'w-1': indicator === 'line',
                              'w-0 border-[1.5px] border-dashed bg-transparent':
                                indicator === 'dashed',
                              'my-0.5': nestLabel && indicator === 'dashed',
                            },
                          )}
                          style={
                            {
                              '--color-bg': indicatorColor,
                              '--color-border': indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        'flex flex-1 justify-between leading-none',
                        nestLabel ? 'items-end' : 'items-center',
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  },
)
ChartTooltipContent.displayName = 'ChartTooltip'

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> &
    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
    ref,
  ) => {
    const { config } = useChart()

    if (!payload?.length) {
      return null
    }

    return (
      <div
        ref={ref}
        className={cn(
          'flex items-center justify-center gap-4',
          verticalAlign === 'top' ? 'pb-3' : 'pt-3',
          className,
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || 'value'}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className="flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  },
)
ChartLegendContent.displayName = 'ChartLegend'

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

  const payloadPayload =
    'payload' in payload &&
    typeof payload.payload === 'object' &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === 'string'
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { Check } from 'lucide-react'

import { cn } from '@/lib/utils'

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
'use client'

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
'use client'

import * as React from 'react'
import { type DialogProps } from '@radix-ui/react-dialog'
import { Command as CommandPrimitive } from 'cmdk'
import { Search } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Dialog, DialogContent } from '@/components/ui/dialog'

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
      className,
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
      className,
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 h-px bg-border', className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className,
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = 'CommandShortcut'

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx"
'use client'

import * as React from 'react'
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
      inset && 'pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-sm font-semibold text-foreground',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-border', className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = 'ContextMenuShortcut'

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-1.5 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
DialogHeader.displayName = 'DialogHeader'

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
DialogFooter.displayName = 'DialogFooter'

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx"
'use client'

import * as React from 'react'
import { Drawer as DrawerPrimitive } from 'vaul'

import { cn } from '@/lib/utils'

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = 'Drawer'

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn('fixed inset-0 z-50 bg-black/80', className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
        className,
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = 'DrawerContent'

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
    {...props}
  />
)
DrawerHeader.displayName = 'DrawerHeader'

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
    {...props}
  />
)
DrawerFooter.displayName = 'DrawerFooter'

const DrawerTitle = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Title
    ref={ref}
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName

const DrawerDescription = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
      inset && 'pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-sm font-semibold',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/empty.tsx"
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

function Empty({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty"
      className={cn(
        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
        className,
      )}
      {...props}
    />
  )
}

function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-header"
      className={cn(
        'flex max-w-sm flex-col items-center gap-2 text-center',
        className,
      )}
      {...props}
    />
  )
}

const emptyMediaVariants = cva(
  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function EmptyMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
  return (
    <div
      data-slot="empty-icon"
      data-variant={variant}
      className={cn(emptyMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-title"
      className={cn('text-lg font-medium tracking-tight', className)}
      {...props}
    />
  )
}

function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <div
      data-slot="empty-description"
      className={cn(
        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-content"
      className={cn(
        'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
        className,
      )}
      {...props}
    />
  )
}

export {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
}
[V0_FILE]typescriptreact:file="components/ui/field.tsx"
'use client'

import { useMemo } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  return (
    <fieldset
      data-slot="field-set"
      className={cn(
        'flex flex-col gap-6',
        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
        className,
      )}
      {...props}
    />
  )
}

function FieldLegend({
  className,
  variant = 'legend',
  ...props
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
  return (
    <legend
      data-slot="field-legend"
      data-variant={variant}
      className={cn(
        'mb-3 font-medium',
        'data-[variant=legend]:text-base',
        'data-[variant=label]:text-sm',
        className,
      )}
      {...props}
    />
  )
}

function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-group"
      className={cn(
        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
        className,
      )}
      {...props}
    />
  )
}

const fieldVariants = cva(
  'group/field data-[invalid=true]:text-destructive flex w-full gap-3',
  {
    variants: {
      orientation: {
        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
        horizontal: [
          'flex-row items-center',
          '[&>[data-slot=field-label]]:flex-auto',
          'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start',
        ],
        responsive: [
          '@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto',
          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
        ],
      },
    },
    defaultVariants: {
      orientation: 'vertical',
    },
  },
)

function Field({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
  return (
    <div
      role="group"
      data-slot="field"
      data-orientation={orientation}
      className={cn(fieldVariants({ orientation }), className)}
      {...props}
    />
  )
}

function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-content"
      className={cn(
        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
        className,
      )}
      {...props}
    />
  )
}

function FieldLabel({
  className,
  ...props
}: React.ComponentProps<typeof Label>) {
  return (
    <Label
      data-slot="field-label"
      className={cn(
        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4',
        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
        className,
      )}
      {...props}
    />
  )
}

function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-label"
      className={cn(
        'flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="field-description"
      className={cn(
        'text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
        'nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function FieldSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  children?: React.ReactNode
}) {
  return (
    <div
      data-slot="field-separator"
      data-content={!!children}
      className={cn(
        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
        className,
      )}
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
      {children && (
        <span
          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
          data-slot="field-separator-content"
        >
          {children}
        </span>
      )}
    </div>
  )
}

function FieldError({
  className,
  children,
  errors,
  ...props
}: React.ComponentProps<'div'> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const content = useMemo(() => {
    if (children) {
      return children
    }

    if (!errors) {
      return null
    }

    if (errors.length === 1 && errors[0]?.message) {
      return errors[0].message
    }

    return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {errors.map(
          (error, index) =>
            error?.message && <li key={index}>{error.message}</li>,
        )}
      </ul>
    )
  }, [children, errors])

  if (!content) {
    return null
  }

  return (
    <div
      role="alert"
      data-slot="field-error"
      className={cn('text-destructive text-sm font-normal', className)}
      {...props}
    >
      {content}
    </div>
  )
}

export {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldContent,
  FieldTitle,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { Slot } from '@radix-ui/react-slot'
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from 'react-hook-form'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue,
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

  const fieldState = getFieldState(fieldContext.name, formState)

  if (!fieldContext) {
    throw new Error('useFormField should be used within <FormField>')
  }

  const { id } = itemContext

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue,
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

  return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn('space-y-2', className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = 'FormItem'

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

  return (
    <Label
      ref={ref}
      className={cn(error && 'text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = 'FormLabel'

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

  return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = 'FormControl'

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

  return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn('text-sm text-muted-foreground', className)}
      {...props}
    />
  )
})
FormDescription.displayName = 'FormDescription'

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

  if (!body) {
    return null
  }

  return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn('text-sm font-medium text-destructive', className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = 'FormMessage'

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx"
'use client'

import * as React from 'react'
import * as HoverCardPrimitive from '@radix-ui/react-hover-card'

import { cn } from '@/lib/utils'

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-group.tsx"
'use client'

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="input-group"
      role="group"
      className={cn(
        'group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]',
        'h-9 has-[>textarea]:h-auto',

        // Variants based on alignment.
        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',

        // Focus state.
        'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1',

        // Error state.
        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',

        className,
      )}
      {...props}
    />
  )
}

const inputGroupAddonVariants = cva(
  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
  {
    variants: {
      align: {
        'inline-start':
          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
        'inline-end':
          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
        'block-start':
          '[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5',
        'block-end':
          '[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5',
      },
    },
    defaultVariants: {
      align: 'inline-start',
    },
  },
)

function InputGroupAddon({
  className,
  align = 'inline-start',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
  return (
    <div
      role="group"
      data-slot="input-group-addon"
      data-align={align}
      className={cn(inputGroupAddonVariants({ align }), className)}
      onClick={(e) => {
        if ((e.target as HTMLElement).closest('button')) {
          return
        }
        e.currentTarget.parentElement?.querySelector('input')?.focus()
      }}
      {...props}
    />
  )
}

const inputGroupButtonVariants = cva(
  'flex items-center gap-2 text-sm shadow-none',
  {
    variants: {
      size: {
        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
        sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
        'icon-xs':
          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
      },
    },
    defaultVariants: {
      size: 'xs',
    },
  },
)

function InputGroupButton({
  className,
  type = 'button',
  variant = 'ghost',
  size = 'xs',
  ...props
}: Omit<React.ComponentProps<typeof Button>, 'size'> &
  VariantProps<typeof inputGroupButtonVariants>) {
  return (
    <Button
      type={type}
      data-size={size}
      variant={variant}
      className={cn(inputGroupButtonVariants({ size }), className)}
      {...props}
    />
  )
}

function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      className={cn(
        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
        className,
      )}
      {...props}
    />
  )
}

function InputGroupInput({
  className,
  ...props
}: React.ComponentProps<'input'>) {
  return (
    <Input
      data-slot="input-group-control"
      className={cn(
        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

function InputGroupTextarea({
  className,
  ...props
}: React.ComponentProps<'textarea'>) {
  return (
    <Textarea
      data-slot="input-group-control"
      className={cn(
        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

export {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
  InputGroupTextarea,
}
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx"
'use client'

import * as React from 'react'
import { OTPInput, OTPInputContext } from 'input-otp'
import { Dot } from 'lucide-react'

import { cn } from '@/lib/utils'

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      'flex items-center gap-2 has-[:disabled]:opacity-50',
      containerClassName,
    )}
    className={cn('disabled:cursor-not-allowed', className)}
    {...props}
  />
))
InputOTP.displayName = 'InputOTP'

const InputOTPGroup = React.forwardRef<
  React.ElementRef<'div'>,
  React.ComponentPropsWithoutRef<'div'>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn('flex items-center', className)} {...props} />
))
InputOTPGroup.displayName = 'InputOTPGroup'

const InputOTPSlot = React.forwardRef<
  React.ElementRef<'div'>,
  React.ComponentPropsWithoutRef<'div'> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

  return (
    <div
      ref={ref}
      className={cn(
        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
        isActive && 'z-10 ring-2 ring-ring ring-offset-background',
        className,
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = 'InputOTPSlot'

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<'div'>,
  React.ComponentPropsWithoutRef<'div'>
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = 'InputOTPSeparator'

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/item.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      role="list"
      data-slot="item-group"
      className={cn('group/item-group flex flex-col', className)}
      {...props}
    />
  )
}

function ItemSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="item-separator"
      orientation="horizontal"
      className={cn('my-0', className)}
      {...props}
    />
  )
}

const itemVariants = cva(
  'group/item [a&]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px] [a&]:transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border-border',
        muted: 'bg-muted/50',
      },
      size: {
        default: 'gap-4 p-4 ',
        sm: 'gap-2.5 px-4 py-3',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Item({
  className,
  variant = 'default',
  size = 'default',
  asChild = false,
  ...props
}: React.ComponentProps<'div'> &
  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'
  return (
    <Comp
      data-slot="item"
      data-variant={variant}
      data-size={size}
      className={cn(itemVariants({ variant, size, className }))}
      {...props}
    />
  )
}

const itemMediaVariants = cva(
  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
        image:
          'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function ItemMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
  return (
    <div
      data-slot="item-media"
      data-variant={variant}
      className={cn(itemMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-content"
      className={cn(
        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
        className,
      )}
      {...props}
    />
  )
}

function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-title"
      className={cn(
        'flex w-fit items-center gap-2 text-sm font-medium leading-snug',
        className,
      )}
      {...props}
    />
  )
}

function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="item-description"
      className={cn(
        'text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-actions"
      className={cn('flex items-center gap-2', className)}
      {...props}
    />
  )
}

function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-header"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-footer"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

export {
  Item,
  ItemMedia,
  ItemContent,
  ItemActions,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
  ItemDescription,
  ItemHeader,
  ItemFooter,
}
[V0_FILE]typescriptreact:file="components/ui/kbd.tsx"
import { cn } from '@/lib/utils'

function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium',
        "[&_svg:not([class*='size-'])]:size-3",
        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
        className,
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn('inline-flex items-center gap-1', className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx"
'use client'

import * as React from 'react'
import * as MenubarPrimitive from '@radix-ui/react-menubar'
import { Check, ChevronRight, Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      'flex h-10 items-center space-x-1 rounded-md border bg-background p-1',
      className,
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
      className,
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    className={cn(
      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
      inset && 'pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
    ref,
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          className,
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  ),
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.RadioItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-sm font-semibold',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = 'MenubarShortcut'

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from 'react'
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
import { cva } from 'class-variance-authority'
import { ChevronDown } from 'lucide-react'

import { cn } from '@/lib/utils'

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      'relative z-10 flex max-w-max flex-1 items-center justify-center',
      className,
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      'group flex flex-1 list-none items-center justify-center space-x-1',
      className,
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), 'group', className)}
    {...props}
  >
    {children}{' '}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
      className,
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className="absolute left-0 top-full flex justify-center">
    <NavigationMenuPrimitive.Viewport
      className={cn(
        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
        className,
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
      className,
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from 'react'
import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'

import { cn } from '@/lib/utils'
import { ButtonProps, buttonVariants } from '@/components/ui/button'

const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn('mx-auto flex w-full justify-center', className)}
    {...props}
  />
)
Pagination.displayName = 'Pagination'

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn('flex flex-row items-center gap-1', className)}
    {...props}
  />
))
PaginationContent.displayName = 'PaginationContent'

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn('', className)} {...props} />
))
PaginationItem.displayName = 'PaginationItem'

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, 'size'> &
  React.ComponentProps<'a'>

const PaginationLink = ({
  className,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? 'page' : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? 'outline' : 'ghost',
        size,
      }),
      className,
    )}
    {...props}
  />
)
PaginationLink.displayName = 'PaginationLink'

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn('gap-1 pl-2.5', className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = 'PaginationPrevious'

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn('gap-1 pr-2.5', className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = 'PaginationNext'

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<'span'>) => (
  <span
    aria-hidden
    className={cn('flex h-9 w-9 items-center justify-center', className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = 'PaginationEllipsis'

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'

import { cn } from '@/lib/utils'

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
'use client'

import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'

import { cn } from '@/lib/utils'

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
      className,
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
'use client'

import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn('grid gap-2', className)}
      {...props}
      ref={ref}
    />
  )
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
'use client'

import { GripVertical } from 'lucide-react'
import * as ResizablePrimitive from 'react-resizable-panels'

import { cn } from '@/lib/utils'

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
      className,
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
      className,
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
'use client'

import * as React from 'react'
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'

import { cn } from '@/lib/utils'

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn('relative overflow-hidden', className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = 'vertical', ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      'flex touch-none select-none transition-colors',
      orientation === 'vertical' &&
        'h-full w-2.5 border-l border-l-transparent p-[1px]',
      orientation === 'horizontal' &&
        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { Check, ChevronDown, ChevronUp } from 'lucide-react'

import { cn } from '@/lib/utils'

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      'flex cursor-default items-center justify-center py-1',
      className,
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      'flex cursor-default items-center justify-center py-1',
      className,
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        position === 'popper' &&
          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          'p-1',
          position === 'popper' &&
            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
'use client'

import * as React from 'react'
import * as SeparatorPrimitive from '@radix-ui/react-separator'

import { cn } from '@/lib/utils'

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = 'horizontal', decorative = true, ...props },
    ref,
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'shrink-0 bg-border',
        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
        className,
      )}
      {...props}
    />
  ),
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
  {
    variants: {
      side: {
        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
        bottom:
          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
        right:
          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
      },
    },
    defaultVariants: {
      side: 'right',
    },
  },
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = 'right', className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-2 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
SheetHeader.displayName = 'SheetHeader'

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
SheetFooter.displayName = 'SheetFooter'

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn('text-lg font-semibold text-foreground', className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx"
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { VariantProps, cva } from 'class-variance-authority'
import { PanelLeft } from 'lucide-react'

import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { Sheet, SheetContent } from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

const SIDEBAR_COOKIE_NAME = 'sidebar:state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContext = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

  return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref,
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

    // This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === 'function' ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

        // This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open],
    )

    // Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

    // Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

      window.addEventListener('keydown', handleKeyDown)
      return () => window.removeEventListener('keydown', handleKeyDown)
    }, [toggleSidebar])

    // We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? 'expanded' : 'collapsed'

    const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      ],
    )

    return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                '--sidebar-width': SIDEBAR_WIDTH,
                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
              className,
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  },
)
SidebarProvider.displayName = 'SidebarProvider'

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    side?: 'left' | 'right'
    variant?: 'sidebar' | 'floating' | 'inset'
    collapsible?: 'offcanvas' | 'icon' | 'none'
  }
>(
  (
    {
      side = 'left',
      variant = 'sidebar',
      collapsible = 'offcanvas',
      className,
      children,
      ...props
    },
    ref,
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

    if (collapsible === 'none') {
      return (
        <div
          className={cn(
            'flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
            className,
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

    if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

    return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === 'collapsed' ? collapsible : ''}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
            'group-data-[collapsible=offcanvas]:w-0',
            'group-data-[side=right]:rotate-180',
            variant === 'floating' || variant === 'inset'
              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
          )}
        />
        <div
          className={cn(
            'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
            side === 'left'
              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
            // Adjust the padding for floating and inset variants.
            variant === 'floating' || variant === 'inset'
              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
            className,
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  },
)
Sidebar.displayName = 'Sidebar'

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

  return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn('h-7 w-7', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = 'SidebarTrigger'

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'>
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

  return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = 'SidebarRail'

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'main'>
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        'relative flex min-h-svh flex-1 flex-col bg-background',
        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
        className,
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = 'SidebarInset'

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
        className,
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = 'SidebarInput'

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = 'SidebarHeader'

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = 'SidebarFooter'

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn('mx-2 w-auto bg-sidebar-border', className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = 'SidebarSeparator'

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = 'SidebarContent'

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = 'SidebarGroup'

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'div'

  return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        className,
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = 'SidebarGroupLabel'

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 after:md:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = 'SidebarGroupAction'

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn('w-full text-sm', className)}
    {...props}
  />
))
SidebarGroupContent.displayName = 'SidebarGroupContent'

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
    {...props}
  />
))
SidebarMenu.displayName = 'SidebarMenu'

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn('group/menu-item relative', className)}
    {...props}
  />
))
SidebarMenuItem.displayName = 'SidebarMenuItem'

const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
      },
      size: {
        default: 'h-8 text-sm',
        sm: 'h-7 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = 'default',
      size = 'default',
      tooltip,
      className,
      ...props
    },
    ref,
  ) => {
    const Comp = asChild ? Slot : 'button'
    const { isMobile, state } = useSidebar()

    const button = (
      <Comp
        ref={ref}
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

    if (!tooltip) {
      return button
    }

    if (typeof tooltip === 'string') {
      tooltip = {
        children: tooltip,
      }
    }

    return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent
          side="right"
          align="center"
          hidden={state !== 'collapsed' || isMobile}
          {...tooltip}
        />
      </Tooltip>
    )
  },
)
SidebarMenuButton.displayName = 'SidebarMenuButton'

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 after:md:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
        className,
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = 'SidebarMenuAction'

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
      'peer-data-[size=sm]/menu-button:top-1',
      'peer-data-[size=default]/menu-button:top-1.5',
      'peer-data-[size=lg]/menu-button:top-2.5',
      'group-data-[collapsible=icon]:hidden',
      className,
    )}
    {...props}
  />
))
SidebarMenuBadge.displayName = 'SidebarMenuBadge'

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

  return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn('rounded-md h-8 flex gap-2 px-2 items-center', className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            '--skeleton-width': width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
      'group-data-[collapsible=icon]:hidden',
      className,
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = 'SidebarMenuSub'

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<'a'> & {
    asChild?: boolean
    size?: 'sm' | 'md'
    isActive?: boolean
  }
>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : 'a'

  return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from '@/lib/utils'

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn('animate-pulse rounded-md bg-muted', className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'

import { cn } from '@/lib/utils'

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      'relative flex w-full touch-none select-none items-center',
      className,
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
'use client'

import { useTheme } from 'next-themes'
import { Toaster as Sonner } from 'sonner'

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
          description: 'group-[.toast]:text-muted-foreground',
          actionButton:
            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
          cancelButton:
            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/spinner.tsx"
import { Loader2Icon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn('size-4 animate-spin', className)}
      {...props}
    />
  )
}

export { Spinner }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
'use client'

import * as React from 'react'
import * as SwitchPrimitives from '@radix-ui/react-switch'

import { cn } from '@/lib/utils'

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn('w-full caption-bottom text-sm', className)}
      {...props}
    />
  </div>
))
Table.displayName = 'Table'

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
))
TableHeader.displayName = 'TableHeader'

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn('[&_tr:last-child]:border-0', className)}
    {...props}
  />
))
TableBody.displayName = 'TableBody'

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
      className,
    )}
    {...props}
  />
))
TableFooter.displayName = 'TableFooter'

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
      className,
    )}
    {...props}
  />
))
TableRow.displayName = 'TableRow'

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
      className,
    )}
    {...props}
  />
))
TableHead.displayName = 'TableHead'

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
    {...props}
  />
))
TableCell.displayName = 'TableCell'

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn('mt-4 text-sm text-muted-foreground', className)}
    {...props}
  />
))
TableCaption.displayName = 'TableCaption'

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
'use client'

import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn('text-sm font-semibold', className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn('text-sm opacity-90', className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
'use client'

import { useToast } from '@/hooks/use-toast'
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from '@/components/ui/toast'

export function Toaster() {
  const { toasts } = useToast()

  return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx"
'use client'

import * as React from 'react'
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
import { type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { toggleVariants } from '@/components/ui/toggle'

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: 'default',
  variant: 'default',
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn('flex items-center justify-center gap-1', className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

  return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className,
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
'use client'

import * as React from 'react'
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const toggleVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline:
          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-10 px-3 min-w-10',
        sm: 'h-9 px-2.5 min-w-9',
        lg: 'h-11 px-5 min-w-11',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

import { cn } from '@/lib/utils'

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

  return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

  toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

    case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

    case 'DISMISS_TOAST': {
      const { toastId } = action

      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

  const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

  dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

  return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

  React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="hooks/use-mobile.ts"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

  return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

  toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

    case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

    case 'DISMISS_TOAST': {
      const { toastId } = action

      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

  const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

  dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

  return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

  React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="page-editor.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Trash2, Eye, Code, Type, ImageIcon, Square, MousePointer, Layout, Settings, Download } from "lucide-react"

interface Element {
  id: string
  type: "text" | "heading" | "button" | "image" | "container" | "card" | "navbar" | "hero" | "footer"
  content: string
  styles: {
    backgroundColor?: string
    color?: string
    fontSize?: string
    padding?: string
    margin?: string
    borderRadius?: string
    textAlign?: "left" | "center" | "right"
    fontWeight?: string
    width?: string
    height?: string
    display?: string
    flexDirection?: string
    justifyContent?: string
    alignItems?: string
  }
  children?: Element[]
}

export default function PageEditor() {
  const [elements, setElements] = useState<Element[]>([])
  const [selectedElement, setSelectedElement] = useState<Element | null>(null)
  const [mode, setMode] = useState<"design" | "preview">("design")
  const [isLoading, setIsLoading] = useState(false)
  const [pageUrl, setPageUrl] = useState("https://v0-tekamul-link.vercel.app/ar/")

  // تحميل الصفحة الافتراضية عند بدء التشغيل
  useEffect(() => {
    loadTekamulPage()
  }, [])

  // تحميل صفحة تكامل
  const loadTekamulPage = () => {
    setIsLoading(true)

    // إنشاء عناصر الصفحة
    const tekamulElements: Element[] = [
      {
        id: "navbar-1",
        type: "navbar",
        content: "InfraOps Solutions",
        styles: {
          backgroundColor: "#ffffff",
          padding: "16px",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          width: "100%",
        },
        children: [
          {
            id: "nav-links",
            type: "container",
            content: "",
            styles: {
              display: "flex",
              gap: "16px",
            },
            children: [
              {
                id: "nav-link-1",
                type: "button",
                content: "nav.home",
                styles: {
                  color: "#333",
                  backgroundColor: "transparent",
                  padding: "8px",
                },
              },
              {
                id: "nav-link-2",
                type: "button",
                content: "nav.services",
                styles: {
                  color: "#333",
                  backgroundColor: "transparent",
                  padding: "8px",
                },
              },
              {
                id: "nav-link-3",
                type: "button",
                content: "nav.contact",
                styles: {
                  color: "#333",
                  backgroundColor: "transparent",
                  padding: "8px",
                },
              },
            ],
          },
          {
            id: "logo",
            type: "heading",
            content: "InfraOps Solutions",
            styles: {
              fontSize: "1.25rem",
              fontWeight: "bold",
              color: "#000",
            },
          },
        ],
      },
      {
        id: "hero-1",
        type: "hero",
        content: "",
        styles: {
          backgroundColor: "#2563eb",
          color: "white",
          padding: "64px 16px",
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
        },
        children: [
          {
            id: "hero-title",
            type: "heading",
            content: "نحن نبني وندير بنيتك التحتية على السحابة أو في موقعك",
            styles: {
              fontSize: "2rem",
              fontWeight: "bold",
              margin: "0 0 24px 0",
              color: "white",
              textAlign: "center",
            },
          },
          {
            id: "hero-button",
            type: "button",
            content: "احجز استشارة مجانية",
            styles: {
              backgroundColor: "white",
              color: "#2563eb",
              padding: "12px 24px",
              borderRadius: "8px",
              fontWeight: "bold",
              margin: "16px 0 0 0",
            },
          },
        ],
      },
      {
        id: "services-section",
        type: "container",
        content: "",
        styles: {
          padding: "64px 16px",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          width: "100%",
        },
        children: [
          {
            id: "services-title",
            type: "heading",
            content: "خدماتنا",
            styles: {
              fontSize: "1.75rem",
              fontWeight: "bold",
              margin: "0 0 48px 0",
              textAlign: "center",
            },
          },
          {
            id: "services-grid",
            type: "container",
            content: "",
            styles: {
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              flexWrap: "wrap",
              gap: "24px",
              width: "100%",
              maxWidth: "1200px",
            },
            children: [
              {
                id: "service-card-1",
                type: "card",
                content: "",
                styles: {
                  backgroundColor: "white",
                  borderRadius: "8px",
                  padding: "24px",
                  width: "280px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                },
                children: [
                  {
                    id: "service-icon-1",
                    type: "image",
                    content: "/placeholder.svg?height=64&width=64",
                    styles: {
                      width: "64px",
                      height: "64px",
                      margin: "0 0 16px 0",
                      backgroundColor: "#e6f0ff",
                      padding: "12px",
                      borderRadius: "50%",
                    },
                  },
                  {
                    id: "service-title-1",
                    type: "heading",
                    content: "مزودي الخدمات السحابية",
                    styles: {
                      fontSize: "1.25rem",
                      fontWeight: "bold",
                      margin: "0 0 8px 0",
                    },
                  },
                  {
                    id: "service-desc-1",
                    type: "text",
                    content: "نشر البنية التحتية الخاصة بك على AWS و Azure",
                    styles: {
                      fontSize: "0.875rem",
                      color: "#666",
                    },
                  },
                ],
              },
              {
                id: "service-card-2",
                type: "card",
                content: "",
                styles: {
                  backgroundColor: "white",
                  borderRadius: "8px",
                  padding: "24px",
                  width: "280px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                },
                children: [
                  {
                    id: "service-icon-2",
                    type: "image",
                    content: "/placeholder.svg?height=64&width=64",
                    styles: {
                      width: "64px",
                      height: "64px",
                      margin: "0 0 16px 0",
                      backgroundColor: "#e6f0ff",
                      padding: "12px",
                      borderRadius: "50%",
                    },
                  },
                  {
                    id: "service-title-2",
                    type: "heading",
                    content: "المراقبة",
                    styles: {
                      fontSize: "1.25rem",
                      fontWeight: "bold",
                      margin: "0 0 8px 0",
                    },
                  },
                  {
                    id: "service-desc-2",
                    type: "text",
                    content: "نشر البنية التحتية الخاصة بك مع Prometheus و Grafana",
                    styles: {
                      fontSize: "0.875rem",
                      color: "#666",
                    },
                  },
                ],
              },
              {
                id: "service-card-3",
                type: "card",
                content: "",
                styles: {
                  backgroundColor: "white",
                  borderRadius: "8px",
                  padding: "24px",
                  width: "280px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                },
                children: [
                  {
                    id: "service-icon-3",
                    type: "image",
                    content: "/placeholder.svg?height=64&width=64",
                    styles: {
                      width: "64px",
                      height: "64px",
                      margin: "0 0 16px 0",
                      backgroundColor: "#e6f0ff",
                      padding: "12px",
                      borderRadius: "50%",
                    },
                  },
                  {
                    id: "service-title-3",
                    type: "heading",
                    content: "خطوط أنابيب CI/CD",
                    styles: {
                      fontSize: "1.25rem",
                      fontWeight: "bold",
                      margin: "0 0 8px 0",
                    },
                  },
                  {
                    id: "service-desc-3",
                    type: "text",
                    content: "تبسيط سير عمل التطوير الخاص بك مع GitHub Actions و GitLab CI",
                    styles: {
                      fontSize: "0.875rem",
                      color: "#666",
                    },
                  },
                ],
              },
              {
                id: "service-card-4",
                type: "card",
                content: "",
                styles: {
                  backgroundColor: "white",
                  borderRadius: "8px",
                  padding: "24px",
                  width: "280px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                },
                children: [
                  {
                    id: "service-icon-4",
                    type: "image",
                    content: "/placeholder.svg?height=64&width=64",
                    styles: {
                      width: "64px",
                      height: "64px",
                      margin: "0 0 16px 0",
                      backgroundColor: "#e6f0ff",
                      padding: "12px",
                      borderRadius: "50%",
                    },
                  },
                  {
                    id: "service-title-4",
                    type: "heading",
                    content: "البنية التحتية كرمز",
                    styles: {
                      fontSize: "1.25rem",
                      fontWeight: "bold",
                      margin: "0 0 8px 0",
                    },
                  },
                  {
                    id: "service-desc-4",
                    type: "text",
                    content: "أتمتة نشر البنية التحتية الخاصة بك باستخدام Terraform و Ansible",
                    styles: {
                      fontSize: "0.875rem",
                      color: "#666",
                    },
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        id: "footer-1",
        type: "footer",
        content: "",
        styles: {
          backgroundColor: "#f8fafc",
          padding: "24px",
          textAlign: "center",
          width: "100%",
        },
        children: [
          {
            id: "footer-text",
            type: "text",
            content: "© 2024 إنفراأوبس سوليوشنز. جميع الحقوق محفوظة.",
            styles: {
              fontSize: "0.875rem",
              color: "#666",
            },
          },
        ],
      },
    ]

    setElements(tekamulElements)
    setIsLoading(false)
  }

  const addElement = (type: Element["type"]) => {
    const newElement: Element = {
      id: Date.now().toString(),
      type,
      content: getDefaultContent(type),
      styles: getDefaultStyles(type),
    }
    setElements([...elements, newElement])
  }

  const getDefaultContent = (type: Element["type"]): string => {
    switch (type) {
      case "heading":
        return "عنوان جديد"
      case "text":
        return "نص جديد"
      case "button":
        return "زر جديد"
      case "image":
        return "/placeholder.svg?height=200&width=300"
      case "container":
        return ""
      case "card":
        return ""
      case "navbar":
        return ""
      case "hero":
        return ""
      case "footer":
        return ""
      default:
        return ""
    }
  }

  const getDefaultStyles = (type: Element["type"]) => {
    switch (type) {
      case "heading":
        return {
          fontSize: "1.5rem",
          fontWeight: "bold",
          color: "#1f2937",
          margin: "16px 0",
        }
      case "text":
        return {
          fontSize: "1rem",
          color: "#374151",
          margin: "8px 0",
        }
      case "button":
        return {
          backgroundColor: "#3b82f6",
          color: "white",
          padding: "8px 16px",
          borderRadius: "6px",
          fontSize: "0.875rem",
          margin: "8px 0",
          width: "fit-content",
        }
      case "image":
        return {
          width: "300px",
          height: "200px",
          margin: "8px 0",
        }
      case "container":
        return {
          padding: "16px",
          margin: "8px 0",
          backgroundColor: "#f9fafb",
          borderRadius: "8px",
          display: "flex",
          flexDirection: "column",
        }
      case "card":
        return {
          padding: "16px",
          margin: "8px",
          backgroundColor: "white",
          borderRadius: "8px",
          boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
          display: "flex",
          flexDirection: "column",
        }
      case "navbar":
        return {
          padding: "16px",
          backgroundColor: "white",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          width: "100%",
        }
      case "hero":
        return {
          padding: "64px 16px",
          backgroundColor: "#3b82f6",
          color: "white",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
        }
      case "footer":
        return {
          padding: "24px",
          backgroundColor: "#f8fafc",
          textAlign: "center",
          width: "100%",
        }
      default:
        return {}
    }
  }

  const updateElement = (id: string, updates: Partial<Element>) => {
    const updateElementRecursive = (elements: Element[]): Element[] => {
      return elements.map((el) => {
        if (el.id === id) {
          return { ...el, ...updates }
        }
        if (el.children) {
          return {
            ...el,
            children: updateElementRecursive(el.children),
          }
        }
        return el
      })
    }

    const updatedElements = updateElementRecursive(elements)
    setElements(updatedElements)

    if (selectedElement?.id === id) {
      setSelectedElement({ ...selectedElement, ...updates })
    }
  }

  const deleteElement = (id: string) => {
    const deleteElementRecursive = (elements: Element[]): Element[] => {
      return elements
        .filter((el) => el.id !== id)
        .map((el) => {
          if (el.children) {
            return {
              ...el,
              children: deleteElementRecursive(el.children),
            }
          }
          return el
        })
    }

    const updatedElements = deleteElementRecursive(elements)
    setElements(updatedElements)

    if (selectedElement?.id === id) {
      setSelectedElement(null)
    }
  }

  const renderElement = (element: Element, isSelected = false): React.ReactNode => {
    const commonProps = {
      className: `${mode === "design" ? "cursor-pointer hover:outline hover:outline-2 hover:outline-blue-400" : ""} ${isSelected ? "outline outline-2 outline-blue-500" : ""}`,
      style: element.styles,
      onClick:
        mode === "design"
          ? (e: React.MouseEvent) => {
              e.stopPropagation()
              setSelectedElement(element)
            }
          : undefined,
    }

    const renderChildren = () => {
      return element.children?.map((child) => renderElement(child, selectedElement?.id === child.id))
    }

    switch (element.type) {
      case "heading":
        return (
          <h2 key={element.id} {...commonProps}>
            {element.content}
          </h2>
        )
      case "text":
        return (
          <p key={element.id} {...commonProps}>
            {element.content}
          </p>
        )
      case "button":
        return (
          <button key={element.id} {...commonProps}>
            {element.content}
          </button>
        )
      case "image":
        return <img key={element.id} {...commonProps} src={element.content || "/placeholder.svg"} alt="صورة" />
      case "container":
        return (
          <div key={element.id} {...commonProps}>
            {renderChildren()}
          </div>
        )
      case "card":
        return (
          <div key={element.id} {...commonProps}>
            {renderChildren()}
          </div>
        )
      case "navbar":
        return (
          <nav key={element.id} {...commonProps}>
            {renderChildren()}
          </nav>
        )
      case "hero":
        return (
          <section key={element.id} {...commonProps}>
            {renderChildren()}
          </section>
        )
      case "footer":
        return (
          <footer key={element.id} {...commonProps}>
            {renderChildren()}
          </footer>
        )
      default:
        return null
    }
  }

  const findElementPath = (id: string, elements: Element[], path: string[] = []): string[] | null => {
    for (let i = 0; i < elements.length; i++) {
      const element = elements[i]
      const currentPath = [...path, i.toString()]

      if (element.id === id) {
        return currentPath
      }

      if (element.children) {
        const childPath = findElementPath(id, element.children, currentPath)
        if (childPath) {
          return childPath
        }
      }
    }

    return null
  }

  const getElementByPath = (path: string[], elements: Element[]): Element | null => {
    if (path.length === 0) return null

    const index = Number.parseInt(path[0])
    if (index >= elements.length) return null

    const element = elements[index]
    if (path.length === 1) return element

    if (!element.children) return null

    return getElementByPath(path.slice(1), element.children)
  }

  const addChildElement = (parentId: string, type: Element["type"]) => {
    const newElement: Element = {
      id: Date.now().toString(),
      type,
      content: getDefaultContent(type),
      styles: getDefaultStyles(type),
    }

    const updateElementRecursive = (elements: Element[]): Element[] => {
      return elements.map((el) => {
        if (el.id === parentId) {
          return {
            ...el,
            children: [...(el.children || []), newElement],
          }
        }
        if (el.children) {
          return {
            ...el,
            children: updateElementRecursive(el.children),
          }
        }
        return el
      })
    }

    setElements(updateElementRecursive(elements))
  }

  const exportCode = () => {
    const code = `export default function GeneratedPage() {
  return (
    <div className="min-h-screen">
      ${generateElementsCode(elements)}
    </div>
  )
}`
    navigator.clipboard.writeText(code)
    alert("تم نسخ الكود!")
  }

  const generateElementsCode = (elements: Element[]): string => {
    return elements.map((el) => generateElementCode(el)).join("\n      ")
  }

  const generateElementCode = (element: Element): string => {
    const styleString = Object.entries(element.styles)
      .map(([key, value]) => `${key}: '${value}'`)
      .join(", ")

    const childrenCode = element.children ? generateElementsCode(element.children) : ""

    switch (element.type) {
      case "heading":
        return `<h2 style={{${styleString}}}>${element.content}</h2>`
      case "text":
        return `<p style={{${styleString}}}>${element.content}</p>`
      case "button":
        return `<button style={{${styleString}}}>${element.content}</button>`
      case "image":
        return `<img style={{${styleString}}} src="${element.content}" alt="صورة" />`
      case "container":
        return `<div style={{${styleString}}}>
        ${childrenCode}
      </div>`
      case "card":
        return `<div style={{${styleString}}}>
        ${childrenCode}
      </div>`
      case "navbar":
        return `<nav style={{${styleString}}}>
        ${childrenCode}
      </nav>`
      case "hero":
        return `<section style={{${styleString}}}>
        ${childrenCode}
      </section>`
      case "footer":
        return `<footer style={{${styleString}}}>
        ${childrenCode}
      </footer>`
      default:
        return ""
    }
  }

  const renderElementTree = (elements: Element[], level = 0) => {
    return elements.map((element) => (
      <div key={element.id}>
        <div
          className={`flex items-center justify-between p-2 rounded border ${
            selectedElement?.id === element.id ? "bg-blue-50 border-blue-200" : "hover:bg-gray-50"
          }`}
          style={{ marginLeft: `${level * 16}px` }}
          onClick={() => setSelectedElement(element)}
        >
          <span className="text-sm truncate flex items-center">
            {element.type === "heading" && "📝"}
            {element.type === "text" && "📄"}
            {element.type === "button" && "🔘"}
            {element.type === "image" && "🖼️"}
            {element.type === "container" && "📦"}
            {element.type === "card" && "🃏"}
            {element.type === "navbar" && "🧭"}
            {element.type === "hero" && "🌟"}
            {element.type === "footer" && "🔽"}
            <span className="mr-2">{element.content ? element.content.substring(0, 20) : element.type}</span>
          </span>
          <div className="flex">
            {(element.type === "container" ||
              element.type === "card" ||
              element.type === "navbar" ||
              element.type === "hero" ||
              element.type === "footer") && (
              <Button
                size="sm"
                variant="ghost"
                onClick={(e) => {
                  e.stopPropagation()
                  setSelectedElement(element)
                }}
              >
                <Square className="w-3 h-3" />
              </Button>
            )}
            <Button
              size="sm"
              variant="ghost"
              onClick={(e) => {
                e.stopPropagation()
                deleteElement(element.id)
              }}
            >
              <Trash2 className="w-3 h-3" />
            </Button>
          </div>
        </div>
        {element.children && renderElementTree(element.children, level + 1)}
      </div>
    ))
  }

  return (
    <div className="min-h-screen bg-gray-50" dir="rtl">
      {/* شريط الأدوات العلوي */}
      <div className="bg-white border-b p-4 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <h1 className="text-xl font-bold">محرر الصفحات</h1>
          <Badge variant="secondary">v1.0</Badge>
        </div>

        <div className="flex items-center gap-2">
          <Button variant={mode === "design" ? "default" : "outline"} size="sm" onClick={() => setMode("design")}>
            <Settings className="w-4 h-4 ml-2" />
            تصميم
          </Button>
          <Button variant={mode === "preview" ? "default" : "outline"} size="sm" onClick={() => setMode("preview")}>
            <Eye className="w-4 h-4 ml-2" />
            معاينة
          </Button>
          <Separator orientation="vertical" className="h-6" />
          <Button size="sm" onClick={exportCode}>
            <Code className="w-4 h-4 ml-2" />
            تصدير الكود
          </Button>
          <Button size="sm" onClick={loadTekamulPage}>
            <Download className="w-4 h-4 ml-2" />
            إعادة تحميل الصفحة
          </Button>
        </div>
      </div>

      <div className="flex h-[calc(100vh-80px)]">
        {/* الشريط الجانبي للأدوات */}
        {mode === "design" && (
          <div className="w-80 bg-white border-l p-4 overflow-y-auto">
            <Tabs defaultValue="elements" className="w-full">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="elements">العناصر</TabsTrigger>
                <TabsTrigger value="properties">الخصائص</TabsTrigger>
              </TabsList>

              <TabsContent value="elements" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-sm">إضافة عناصر</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("heading")}>
                      <Type className="w-4 h-4 ml-2" />
                      عنوان
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("text")}>
                      <Type className="w-4 h-4 ml-2" />
                      نص
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("button")}>
                      <MousePointer className="w-4 h-4 ml-2" />
                      زر
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("image")}>
                      <ImageIcon className="w-4 h-4 ml-2" />
                      صورة
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("container")}>
                      <Square className="w-4 h-4 ml-2" />
                      حاوية
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("card")}>
                      <Square className="w-4 h-4 ml-2" />
                      بطاقة
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("navbar")}>
                      <Square className="w-4 h-4 ml-2" />
                      شريط تنقل
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("hero")}>
                      <Square className="w-4 h-4 ml-2" />
                      قسم رئيسي
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("footer")}>
                      <Square className="w-4 h-4 ml-2" />
                      تذييل
                    </Button>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle className="text-sm">العناصر الموجودة</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">{renderElementTree(elements)}</CardContent>
                </Card>

                {selectedElement &&
                  (selectedElement.type === "container" ||
                    selectedElement.type === "card" ||
                    selectedElement.type === "navbar" ||
                    selectedElement.type === "hero" ||
                    selectedElement.type === "footer") && (
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-sm">إضافة عناصر فرعية</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-2">
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "heading")}
                        >
                          <Type className="w-4 h-4 ml-2" />
                          عنوان
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "text")}
                        >
                          <Type className="w-4 h-4 ml-2" />
                          نص
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "button")}
                        >
                          <MousePointer className="w-4 h-4 ml-2" />
                          زر
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "image")}
                        >
                          <ImageIcon className="w-4 h-4 ml-2" />
                          صورة
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "container")}
                        >
                          <Square className="w-4 h-4 ml-2" />
                          حاوية
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "card")}
                        >
                          <Square className="w-4 h-4 ml-2" />
                          بطاقة
                        </Button>
                      </CardContent>
                    </Card>
                  )}
              </TabsContent>

              <TabsContent value="properties" className="space-y-4">
                {selectedElement ? (
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-sm">خصائص العنصر المحدد</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      {selectedElement.type !== "container" &&
                        selectedElement.type !== "card" &&
                        selectedElement.type !== "navbar" &&
                        selectedElement.type !== "hero" &&
                        selectedElement.type !== "footer" && (
                          <div>
                            <Label htmlFor="content">المحتوى</Label>
                            {selectedElement.type === "image" ? (
                              <Input
                                id="content"
                                value={selectedElement.content}
                                onChange={(e) => updateElement(selectedElement.id, { content: e.target.value })}
                                placeholder="رابط الصورة"
                              />
                            ) : (
                              <Textarea
                                id="content"
                                value={selectedElement.content}
                                onChange={(e) => updateElement(selectedElement.id, { content: e.target.value })}
                                rows={3}
                              />
                            )}
                          </div>
                        )}

                      <div>
                        <Label htmlFor="backgroundColor">لون الخلفية</Label>
                        <Input
                          id="backgroundColor"
                          type="color"
                          value={selectedElement.styles.backgroundColor || "#ffffff"}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, backgroundColor: e.target.value },
                            })
                          }
                        />
                      </div>

                      {selectedElement.type !== "image" && (
                        <>
                          <div>
                            <Label htmlFor="color">لون النص</Label>
                            <Input
                              id="color"
                              type="color"
                              value={selectedElement.styles.color || "#000000"}
                              onChange={(e) =>
                                updateElement(selectedElement.id, {
                                  styles: { ...selectedElement.styles, color: e.target.value },
                                })
                              }
                            />
                          </div>

                          <div>
                            <Label htmlFor="fontSize">حجم الخط</Label>
                            <Select
                              value={selectedElement.styles.fontSize || "1rem"}
                              onValueChange={(value) =>
                                updateElement(selectedElement.id, {
                                  styles: { ...selectedElement.styles, fontSize: value },
                                })
                              }
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="0.75rem">صغير جداً</SelectItem>
                                <SelectItem value="0.875rem">صغير</SelectItem>
                                <SelectItem value="1rem">عادي</SelectItem>
                                <SelectItem value="1.125rem">متوسط</SelectItem>
                                <SelectItem value="1.25rem">كبير</SelectItem>
                                <SelectItem value="1.5rem">كبير جداً</SelectItem>
                                <SelectItem value="2rem">عملاق</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

                          <div>
                            <Label htmlFor="textAlign">محاذاة النص</Label>
                            <Select
                              value={selectedElement.styles.textAlign || "right"}
                              onValueChange={(value: "left" | "center" | "right") =>
                                updateElement(selectedElement.id, {
                                  styles: { ...selectedElement.styles, textAlign: value },
                                })
                              }
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="right">يمين</SelectItem>
                                <SelectItem value="center">وسط</SelectItem>
                                <SelectItem value="left">يسار</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </>
                      )}

                      <div>
                        <Label htmlFor="padding">المسافة الداخلية</Label>
                        <Input
                          id="padding"
                          value={selectedElement.styles.padding || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, padding: e.target.value },
                            })
                          }
                          placeholder="مثال: 16px"
                        />
                      </div>

                      <div>
                        <Label htmlFor="margin">المسافة الخارجية</Label>
                        <Input
                          id="margin"
                          value={selectedElement.styles.margin || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, margin: e.target.value },
                            })
                          }
                          placeholder="مثال: 16px 0"
                        />
                      </div>

                      <div>
                        <Label htmlFor="borderRadius">استدارة الحواف</Label>
                        <Input
                          id="borderRadius"
                          value={selectedElement.styles.borderRadius || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, borderRadius: e.target.value },
                            })
                          }
                          placeholder="مثال: 8px"
                        />
                      </div>

                      {(selectedElement.type === "container" ||
                        selectedElement.type === "card" ||
                        selectedElement.type === "navbar" ||
                        selectedElement.type === "hero" ||
                        selectedElement.type === "footer") && (
                        <>
                          <div>
                            <Label htmlFor="display">العرض</Label>
                            <Select
                              value={selectedElement.styles.display || "block"}
                              onValueChange={(value) =>
                                updateElement(selectedElement.id, {
                                  styles: { ...selectedElement.styles, display: value },
                                })
                              }
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="block">كتلة</SelectItem>
                                <SelectItem value="flex">مرن</SelectItem>
                                <SelectItem value="grid">شبكة</SelectItem>
                                <SelectItem value="inline-block">كتلة مضمنة</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

                          {selectedElement.styles.display === "flex" && (
                            <>
                              <div>
                                <Label htmlFor="flexDirection">اتجاه المرونة</Label>
                                <Select
                                  value={selectedElement.styles.flexDirection || "row"}
                                  onValueChange={(value) =>
                                    updateElement(selectedElement.id, {
                                      styles: { ...selectedElement.styles, flexDirection: value },
                                    })
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="row">أفقي</SelectItem>
                                    <SelectItem value="column">عمودي</SelectItem>
                                    <SelectItem value="row-reverse">أفقي معكوس</SelectItem>
                                    <SelectItem value="column-reverse">عمودي معكوس</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <div>
                                <Label htmlFor="justifyContent">محاذاة أفقية</Label>
                                <Select
                                  value={selectedElement.styles.justifyContent || "flex-start"}
                                  onValueChange={(value) =>
                                    updateElement(selectedElement.id, {
                                      styles: { ...selectedElement.styles, justifyContent: value },
                                    })
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="flex-start">بداية</SelectItem>
                                    <SelectItem value="center">وسط</SelectItem>
                                    <SelectItem value="flex-end">نهاية</SelectItem>
                                    <SelectItem value="space-between">توزيع متساوي</SelectItem>
                                    <SelectItem value="space-around">توزيع حول</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <div>
                                <Label htmlFor="alignItems">محاذاة عمودية</Label>
                                <Select
                                  value={selectedElement.styles.alignItems || "stretch"}
                                  onValueChange={(value) =>
                                    updateElement(selectedElement.id, {
                                      styles: { ...selectedElement.styles, alignItems: value },
                                    })
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="flex-start">بداية</SelectItem>
                                    <SelectItem value="center">وسط</SelectItem>
                                    <SelectItem value="flex-end">نهاية</SelectItem>
                                    <SelectItem value="stretch">تمدد</SelectItem>
                                    <SelectItem value="baseline">خط القاعدة</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </>
                          )}
                        </>
                      )}

                      <div>
                        <Label htmlFor="width">العرض</Label>
                        <Input
                          id="width"
                          value={selectedElement.styles.width || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, width: e.target.value },
                            })
                          }
                          placeholder="مثال: 100% أو 300px"
                        />
                      </div>

                      <div>
                        <Label htmlFor="height">الارتفاع</Label>
                        <Input
                          id="height"
                          value={selectedElement.styles.height || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, height: e.target.value },
                            })
                          }
                          placeholder="مثال: auto أو 200px"
                        />
                      </div>
                    </CardContent>
                  </Card>
                ) : (
                  <Card>
                    <CardContent className="p-6 text-center text-gray-500">اختر عنصراً لتعديل خصائصه</CardContent>
                  </Card>
                )}
              </TabsContent>
            </Tabs>
          </div>
        )}

        {/* منطقة التصميم */}
        <div className="flex-1 p-4 overflow-auto">
          {isLoading ? (
            <div className="flex items-center justify-center h-full">
              <div className="text-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
                <p>جاري التحميل...</p>
              </div>
            </div>
          ) : (
            <div
              className="min-h-full bg-white rounded-lg shadow-sm"
              onClick={() => mode === "design" && setSelectedElement(null)}
            >
              {elements.map((element) => renderElement(element, selectedElement?.id === element.id))}

              {elements.length === 0 && (
                <div className="text-center text-gray-400 py-20">
                  <Layout className="w-12 h-12 mx-auto mb-4 opacity-50" />
                  <p>ابدأ بإضافة عناصر من الشريط الجانبي</p>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]html:file="public/ar00hsecmonyomwak56b0hymksw9ui.html"
<html>
<head><meta charset="utf-8" /></head>
<body>
ar00hsecmonyomwak56b0hymksw9ui
</body>
</html>
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/F61tROFiNveaAIukBzQM3s/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/Vk8oRGy3fKhRE_ftNqUNTL/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/OB2VP-FGShsnkaOPtlG4Vd/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"121:T7d2a6,[V0_FILE]yaml:file=".github/workflows/deploy.yml"
name: Deploy to S3

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    
    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: |
        npm install
        npm install embla-carousel-react recharts cmdk vaul react-hook-form @hookform/resolvers zod sonner class-variance-authority clsx tailwind-merge tailwindcss-animate input-otp react-resizable-panels next-themes @radix-ui/react-aspect-ratio @radix-ui/react-context-menu date-fns @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-select @radix-ui/react-checkbox @radix-ui/react-radio-group @radix-ui/react-toggle @radix-ui/react-avatar @radix-ui/react-toast @radix-ui/react-dropdown-menu @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-label @radix-ui/react-switch @radix-ui/react-hover-card @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-progress @radix-ui/react-scroll-area @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-tooltip
      
    - name: Build
      run: npm run build
      
    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: me-central-1
        
    - name: Deploy to S3
      run: |
        aws s3 sync out/ s3://www.tekamul.link --delete
        
    - name: Configure S3 website
      run: |
        aws s3api put-bucket-website --bucket www.tekamul.link --website-configuration '{
          "IndexDocument": {
            "Suffix": "index.html"
          },
          "ErrorDocument": {
            "Key": "index.html"
          },
          "RoutingRules": [
            {
              "Condition": {
                "KeyPrefixEquals": "en/",
                "HttpErrorCodeReturnedEquals": "404"
              },
              "Redirect": {
                "ReplaceKeyWith": "en/index.html"
              }
            },
            {
              "Condition": {
                "KeyPrefixEquals": "ar/",
                "HttpErrorCodeReturnedEquals": "404"
              },
              "Redirect": {
                "ReplaceKeyWith": "ar/index.html"
              }
            },
            {
              "Condition": {
                "HttpErrorCodeReturnedEquals": "404"
              },
              "Redirect": {
                "ReplaceKeyWith": "index.html"
              }
            }
          ]
        }'
[V0_FILE]plaintext:file=".gitignore"
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules

# next.js
/.next/
/out/

# production
/build

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# env files
.env*

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
[V0_FILE]markdown:file="README.md"
# tekamul.link - Production

**الموقع الرسمي لشركة InfraOps Solutions**

[![Deploy Status](https://github.com/ghassan8080/tekamul-link/workflows/Deploy%20to%20Production/badge.svg)](https://github.com/ghassan8080/tekamul-link/actions)
[![Live Site](https://img.shields.io/badge/Live-tekamul.link-blue)](https://tekamul.link)

## نظرة عامة

موقع شركة InfraOps Solutions الذي يقدم:
- خدمات البنية التحتية السحابية
- حلول الذكاء الاصطناعي
- تطوير المواقع والتطبيقات
- خدمات الاستضافة والدعم التقني

## المميزات

- ✅ تصميم متجاوب مع جميع الأجهزة
- ✅ واجهة باللغة العربية مع دعم RTL
- ✅ نظام حجز المواعيد
- ✅ صفحات الخدمات والأسعار
- ✅ نماذج التواصل والاشتراك
- ✅ تكامل مع WhatsApp والبريد الإلكتروني

## التقنيات المستخدمة

- **Framework**: Next.js 14
- **Styling**: Tailwind CSS
- **UI Components**: Radix UI + shadcn/ui
- **Icons**: Lucide React
- **Deployment**: AWS S3 + CloudFront
- **CI/CD**: GitHub Actions

## النشر

يتم النشر تلقائياً إلى الإنتاج عند دفع التحديثات إلى فرع `main`:

1. GitHub Actions يبني المشروع
2. يتم رفع الملفات إلى AWS S3
3. CloudFront يحدث الكاش تلقائياً
4. الموقع يصبح متاحاً على https://tekamul.link

## البيئة المحلية

\`\`\`bash
# تثبيت التبعيات
npm install

# تشغيل الخادم المحلي
npm run dev

# بناء المشروع
npm run build
\`\`\`

## معلومات الاتصال

- **الموقع**: https://tekamul.link
- **WhatsApp**: +9647707028327
- **Email**: ghassan@tekamul.link

---

© 2025 InfraOps Solutions. جميع الحقوق محفوظة.
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.font-arabic {
  font-family: var(--font-tajawal), "Tajawal", sans-serif;
}

/* RTL specific adjustments */
[dir="rtl"] .ml-2 {
  margin-left: 0;
  margin-right: 0.5rem;
}

[dir="rtl"] .mr-2 {
  margin-right: 0;
  margin-left: 0.5rem;
}

[dir="rtl"] .ml-3 {
  margin-left: 0;
  margin-right: 0.75rem;
}

[dir="rtl"] .mr-3 {
  margin-right: 0;
  margin-left: 0.75rem;
}

[dir="rtl"] .ml-4 {
  margin-left: 0;
  margin-right: 1rem;
}

[dir="rtl"] .mr-4 {
  margin-right: 0;
  margin-left: 1rem;
}

/* Smooth scrolling for navigation */
html {
  scroll-behavior: smooth;
}

/* Mobile menu animation */
@media (max-width: 768px) {
  .mobile-menu {
    transition: all 0.3s ease-in-out;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { Tajawal } from "next/font/google"

const tajawal = Tajawal({
  subsets: ["arabic", "latin"],
  weight: ["400", "500", "700"],
  variable: "--font-tajawal",
  display: "swap",
})

export const metadata = {
  title: "InfraOps Solutions - Complete Infrastructure Solutions",
  description:
    "Transform your business with cutting-edge cloud infrastructure, AI-powered solutions, and enterprise-grade applications.",
  generator: "v0.dev",
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning className={tajawal.variable}>
      <head>
        <meta name="facebook-domain-verification" content="ar00hsecmonymwak56b0hymksw9ui" />
      </head>
      <body>
        <ThemeProvider attribute="class" defaultTheme="light" forcedTheme="light" disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
import ModernLanding from "@/components/modern-landing"

export default function Home() {
  return <ModernLanding />
}
[V0_FILE]typescriptreact:file="app/pricing/page.tsx"
import PricingPlans from "@/components/pricing-plans"

export const metadata = {
  title: "خطط الأسعار - اشترك الآن",
  description: "اختر الباقة المناسبة لمشروعك الرقمي مع معاينة مجانية",
}

export default function PricingPage() {
  return <PricingPlans />
}
[V0_FILE]typescriptreact:file="app/privacy/page.tsx"
import type { Metadata } from "next"
import PrivacyPolicy from "@/components/privacy-policy"

export const metadata: Metadata = {
  title: "Privacy Policy | Tekamul AI",
  description: "Privacy Policy for Tekamul AI Mobile App and automation services.",
}

export default function PrivacyPage() {
  return <PrivacyPolicy />
}
[V0_FILE]typescriptreact:file="app/subscribe/page.tsx"
import SubscribeForm from "@/components/subscribe-form"

export const metadata = {
  title: "اشترك الآن - خطط الأسعار",
  description: "اختر الباقة المناسبة لمشروعك الرقمي مع معاينة مجانية",
}

export default function SubscribePage() {
  return <SubscribeForm />
}
[V0_FILE]typescriptreact:file="app/subscription/page.tsx"
import SubscriptionPage from "@/components/subscription-page"

export const metadata = {
  title: "اشترك الآن - InfraOps Solutions",
  description: "اختر الباقة المناسبة لمشروعك الرقمي وابدأ بمعاينة مجانية",
}

export default function Subscription() {
  return <SubscriptionPage />
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/arabic-landing.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Check, Calendar, ShoppingBag, FileText, ChevronLeft, Mail } from "lucide-react"

export default function ArabicLanding() {
  return (
    <div dir="rtl" className="min-h-screen font-arabic bg-white">
      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-20 px-4 md:px-8 lg:px-16">
        <div className="max-w-5xl mx-auto text-center">
          <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100 px-3 py-1 text-sm">تقنية متطورة</Badge>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight text-gray-900">
            حلول ذكية باستخدام الذكاء الاصطناعي
          </h1>
          <p className="text-lg md:text-xl mb-8 text-gray-700 max-w-3xl mx-auto">
            نقدم لك حلول تقنية متكاملة مدعومة بالذكاء الاصطناعي لتطوير أعمالك وتحسين تجربة عملائك بأسعار مناسبة وسرعة
            عالية
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button
              size="lg"
              className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 text-lg rounded-lg"
              onClick={() => window.open("https://wa.me/9647707028327", "_blank")}
            >
              تواصل معنا الآن
              <ChevronLeft className="mr-2 h-5 w-5" />
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="bg-white text-blue-600 hover:bg-blue-50 border-blue-200 px-8 py-6 text-lg rounded-lg"
            >
              اكتشف المزيد
            </Button>
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white to-transparent"></div>
      </section>

      {/* Features Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-white">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">حلولنا الجاهزة</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              نقدم مجموعة من الحلول الجاهزة التي يمكن تخصيصها لتناسب احتياجات عملك
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Feature 1 */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <Calendar className="h-6 w-6 text-blue-600" />
                </div>
                <CardTitle className="text-xl">نظام حجز مواعيد</CardTitle>
                <CardDescription>نظام متكامل لإدارة المواعيد والحجوزات مع إشعارات تلقائية للعملاء</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>واجهة سهلة الاستخدام</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>إشعارات تلقائية للعملاء</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تقارير وإحصائيات</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full"
                  onClick={() =>
                    window.open(
                      "https://wa.me/9647707028327?text=أريد%20معرفة%20المزيد%20عن%20نظام%20حجز%20المواعيد",
                      "_blank",
                    )
                  }
                >
                  طلب عرض
                </Button>
              </CardFooter>
            </Card>

            {/* Feature 2 */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <ShoppingBag className="h-6 w-6 text-blue-600" />
                </div>
                <CardTitle className="text-xl">متجر إلكتروني</CardTitle>
                <CardDescription>منصة بيع إلكترونية سهلة الاستخدام مع خيارات الدفع المحلية</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تصميم متجاوب مع جميع الأجهزة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>خيارات دفع متعددة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>لوحة تحكم سهلة</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full"
                  onClick={() =>
                    window.open(
                      "https://wa.me/9647707028327?text=أريد%20معرفة%20المزيد%20عن%20المتجر%20الإلكتروني",
                      "_blank",
                    )
                  }
                >
                  طلب عرض
                </Button>
              </CardFooter>
            </Card>

            {/* Feature 3 */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <FileText className="h-6 w-6 text-blue-600" />
                </div>
                <CardTitle className="text-xl">صفحة طلبات</CardTitle>
                <CardDescription>صفحة مخصصة لاستقبال الطلبات والاستفسارات من العملاء</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>نماذج طلب مخصصة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>إشعارات فورية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>متابعة حالة الطلب</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full"
                  onClick={() =>
                    window.open(
                      "https://wa.me/9647707028327?text=أريد%20معرفة%20المزيد%20عن%20صفحة%20الطلبات",
                      "_blank",
                    )
                  }
                >
                  طلب عرض
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">خطط الأسعار</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">نقدم باقات متنوعة تناسب احتياجاتك وميزانيتك</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Pricing Tier 1 */}
            <Card className="border-0 shadow-md hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-xl">مجاني</CardTitle>
                <div className="mt-2">
                  <span className="text-3xl font-bold text-gray-900">$0</span>
                  <span className="text-gray-500">/للتجربة</span>
                </div>
                <CardDescription className="mt-2">جرب النسخة الأولية من موقعك أو تطبيقك بدون أي التزام</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>نسخة تجريبية كاملة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تصميم مخصص</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تعديلات غير محدودة</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() =>
                    window.open("https://wa.me/9647707028327?text=أريد%20تجربة%20الخطة%20المجانية", "_blank")
                  }
                >
                  ابدأ الآن
                </Button>
              </CardFooter>
            </Card>

            {/* Pricing Tier 2 */}
            <Card className="border-0 shadow-xl ring-2 ring-blue-500">
              <CardHeader>
                <Badge className="mb-2 self-start">الأكثر شيوعاً</Badge>
                <CardTitle className="text-xl">نشر</CardTitle>
                <div className="mt-2">
                  <span className="text-3xl font-bold text-gray-900">$50</span>
                  <span className="text-gray-500">/لمرة واحدة</span>
                </div>
                <CardDescription className="mt-2">احصل على موقع أو تطبيق احترافي جاهز للاستخدام</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تطوير كامل للموقع أو التطبيق</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>استضافة على خوادم سريعة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>دعم فني لمدة شهر</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>اسم نطاق مجاني</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-blue-600 hover:bg-blue-700"
                  onClick={() =>
                    window.open("https://wa.me/9647707028327?text=أريد%20الاشتراك%20في%20خطة%20النشر", "_blank")
                  }
                >
                  اشترك الآن
                </Button>
              </CardFooter>
            </Card>

            {/* Pricing Tier 3 */}
            <Card className="border-0 shadow-md hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-xl">دعم شهري</CardTitle>
                <div className="mt-2">
                  <span className="text-3xl font-bold text-gray-900">$15</span>
                  <span className="text-gray-500">/شهرياً</span>
                </div>
                <CardDescription className="mt-2">خدمة دعم وصيانة مستمرة لموقعك أو تطبيقك</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>دعم فني على مدار الساعة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تحديثات وتطويرات مستمرة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تحليلات وتقارير شهرية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>نسخ احتياطية منتظمة</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() =>
                    window.open(
                      "https://wa.me/9647707028327?text=أريد%20الاشتراك%20في%20خطة%20الدعم%20الشهري",
                      "_blank",
                    )
                  }
                >
                  اشترك الآن
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-blue-600 text-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-2xl md:text-3xl font-bold mb-4">جاهز للبدء؟</h2>
          <p className="text-lg mb-8 text-blue-100">
            تواصل معنا الآن للحصول على استشارة مجانية وابدأ رحلتك نحو النجاح الرقمي
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4 mb-8">
            <Button
              size="lg"
              variant="outline"
              className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-6 text-lg rounded-lg"
              onClick={() => window.open("https://wa.me/9647707028327", "_blank")}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="currentColor"
                className="ml-2"
              >
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
              </svg>
              تواصل عبر واتساب
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-6 text-lg rounded-lg"
              onClick={() => window.open("mailto:ghassan@tekamul.link", "_blank")}
            >
              <Mail className="ml-2 h-6 w-6" />
              تواصل عبر الإيميل
            </Button>
          </div>
          <div className="text-center">
            <p className="text-blue-100 text-sm">واتساب: +9647707028327 | إيميل: ghassan@tekamul.link</p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 md:px-8 lg:px-16 bg-gray-900 text-gray-400 text-center">
        <p>© 2025 حلول ذكية باستخدام الذكاء الاصطناعي. جميع الحقوق محفوظة.</p>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/landing-page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Rocket,
  DollarSign,
  Wrench,
  Calendar,
  ShoppingBag,
  FileText,
  LayoutDashboard,
  Star,
  ChevronRight,
  Check,
} from "lucide-react"

export default function LandingPage() {
  const [language, setLanguage] = useState<"ar" | "en">("ar")

  const content = {
    ar: {
      hero: {
        title: "ابني موقعك أو تطبيقك باستخدام الذكاء الاصطناعي خلال يومين",
        subtitle: "حلول ذكية، مخصصة، ومناسبة للسوق المحلي – نسخة مجانية للتجربة قبل النشر",
        cta: "ابدأ مجاناً",
      },
      whyUs: {
        title: "لماذا تختارنا",
        reasons: [
          {
            icon: <Rocket className="h-8 w-8" />,
            title: "السرعة",
            description: "تنفيذ خلال 48 ساعة",
          },
          {
            icon: <DollarSign className="h-8 w-8" />,
            title: "السعر المناسب",
            description: "نسخة مجانية وتجربة واقعية",
          },
          {
            icon: <Wrench className="h-8 w-8" />,
            title: "الدعم والصيانة",
            description: "إدارة شهرية مرنة",
          },
        ],
      },
      solutions: {
        title: "الحلول الجاهزة",
        items: [
          {
            icon: <Calendar className="h-8 w-8" />,
            title: "نظام حجز للعيادات والصالونات",
            description: "نظام متكامل لإدارة المواعيد والحجوزات مع إشعارات تلقائية للعملاء",
          },
          {
            icon: <ShoppingBag className="h-8 w-8" />,
            title: "متجر إلكتروني بسيط",
            description: "منصة بيع إلكترونية سهلة الاستخدام مع خيارات الدفع المحلية",
          },
          {
            icon: <FileText className="h-8 w-8" />,
            title: "صفحة استقبال الطلبات",
            description: "صفحة مخصصة لاستقبال الطلبات والاستفسارات من العملاء",
          },
          {
            icon: <LayoutDashboard className="h-8 w-8" />,
            title: "لوحة إدارة داخلية",
            description: "لوحة تحكم سهلة الاستخدام لإدارة المحتوى والطلبات",
          },
        ],
      },
      pricing: {
        title: "الأسعار",
        plans: [
          {
            title: "خطة البداية",
            price: "مجانية للتجربة",
            description: "جرب النسخة الأولية من موقعك أو تطبيقك بدون أي التزام",
            features: ["نسخة تجريبية كاملة", "تصميم مخصص", "تعديلات غير محدودة", "دعم فني خلال فترة التجربة"],
            cta: "ابدأ الآن",
          },
          {
            title: "نشر و إدارة",
            price: "$50 لمرة واحدة + $15 شهريًا",
            description: "احصل على موقع أو تطبيق احترافي مع دعم مستمر",
            features: [
              "تطوير كامل للموقع أو التطبيق",
              "استضافة على خوادم سريعة",
              "دعم فني على مدار الساعة",
              "تحديثات وتطويرات مستمرة",
              "تحليلات وتقارير شهرية",
            ],
            cta: "اشترك الآن",
            featured: true,
          },
        ],
      },
      testimonials: {
        title: "آراء العملاء",
        items: [
          {
            name: "محمد علي",
            role: "صاحب عيادة أسنان",
            content:
              "ساعدني نظام الحجز في تنظيم مواعيد العيادة بشكل رائع. توفير الوقت والجهد كان ملحوظاً منذ اليوم الأول.",
            rating: 5,
          },
          {
            name: "سارة أحمد",
            role: "صاحبة متجر ملابس",
            content:
              "المتجر الإلكتروني سهل الاستخدام وساعدني في الوصول لعملاء جدد. الدعم الفني ممتاز والاستجابة سريعة.",
            rating: 5,
          },
        ],
      },
      contact: {
        title: "تواصل معنا",
        subtitle: "نحن هنا لمساعدتك في بناء حضورك الرقمي",
        whatsapp: "تواصل عبر واتساب",
      },
      footer: {
        copyright: "© 2025 خدمات تطوير المواقع والتطبيقات. جميع الحقوق محفوظة.",
      },
    },
    en: {
      hero: {
        title: "Build Your Website or App with AI in Just Two Days",
        subtitle: "Smart, customized solutions suitable for the local market - Free trial version before deployment",
        cta: "Start for Free",
      },
      whyUs: {
        title: "Why Choose Us",
        reasons: [
          {
            icon: <Rocket className="h-8 w-8" />,
            title: "Speed",
            description: "Implementation within 48 hours",
          },
          {
            icon: <DollarSign className="h-8 w-8" />,
            title: "Affordable Price",
            description: "Free trial version and realistic experience",
          },
          {
            icon: <Wrench className="h-8 w-8" />,
            title: "Support & Maintenance",
            description: "Flexible monthly management",
          },
        ],
      },
      solutions: {
        title: "Ready Solutions",
        items: [
          {
            icon: <Calendar className="h-8 w-8" />,
            title: "Booking System for Clinics & Salons",
            description: "Integrated system for appointment management with automatic customer notifications",
          },
          {
            icon: <ShoppingBag className="h-8 w-8" />,
            title: "Simple E-commerce Store",
            description: "User-friendly online selling platform with local payment options",
          },
          {
            icon: <FileText className="h-8 w-8" />,
            title: "Order Intake Page",
            description: "Custom page for receiving orders and inquiries from customers",
          },
          {
            icon: <LayoutDashboard className="h-8 w-8" />,
            title: "Internal Admin Dashboard",
            description: "Easy-to-use control panel for managing content and orders",
          },
        ],
      },
      pricing: {
        title: "Pricing",
        plans: [
          {
            title: "Starter Plan",
            price: "Free Trial",
            description: "Try the initial version of your website or app with no commitment",
            features: [
              "Complete trial version",
              "Custom design",
              "Unlimited revisions",
              "Technical support during trial period",
            ],
            cta: "Start Now",
          },
          {
            title: "Deploy & Manage",
            price: "$50 one-time + $15 monthly",
            description: "Get a professional website or app with continuous support",
            features: [
              "Full website or app development",
              "Hosting on fast servers",
              "24/7 technical support",
              "Continuous updates and improvements",
              "Monthly analytics and reports",
            ],
            cta: "Subscribe Now",
            featured: true,
          },
        ],
      },
      testimonials: {
        title: "Client Testimonials",
        items: [
          {
            name: "Mohammed Ali",
            role: "Dental Clinic Owner",
            content:
              "The booking system helped me organize clinic appointments wonderfully. Time and effort savings were noticeable from day one.",
            rating: 5,
          },
          {
            name: "Sarah Ahmed",
            role: "Clothing Store Owner",
            content:
              "The e-commerce store is easy to use and helped me reach new customers. Technical support is excellent and response is quick.",
            rating: 5,
          },
        ],
      },
      contact: {
        title: "Contact Us",
        subtitle: "We're here to help you build your digital presence",
        whatsapp: "Contact via WhatsApp",
      },
      footer: {
        copyright: "© 2025 Website & App Development Services. All rights reserved.",
      },
    },
  }

  const currentContent = content[language]
  const dir = language === "ar" ? "rtl" : "ltr"

  return (
    <div dir={dir} className={`min-h-screen ${language === "ar" ? "font-arabic" : ""}`}>
      {/* Language Switcher */}
      <div className="fixed top-4 right-4 z-50">
        <Tabs defaultValue={language} onValueChange={(value) => setLanguage(value as "ar" | "en")}>
          <TabsList className="grid w-[160px] grid-cols-2">
            <TabsTrigger value="ar">عربي</TabsTrigger>
            <TabsTrigger value="en">English</TabsTrigger>
          </TabsList>
        </Tabs>
      </div>

      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-20 px-4 md:px-8 lg:px-16">
        <div className="max-w-5xl mx-auto text-center">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight text-gray-900">
            {currentContent.hero.title}
          </h1>
          <p className="text-lg md:text-xl mb-8 text-gray-700 max-w-3xl mx-auto">{currentContent.hero.subtitle}</p>
          <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 text-lg rounded-lg">
            {currentContent.hero.cta}
            <ChevronRight className={`ml-2 h-5 w-5 ${language === "ar" ? "rotate-180" : ""}`} />
          </Button>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white to-transparent"></div>
      </section>

      {/* Why Us Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-white">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold mb-12 text-center text-gray-900">
            {currentContent.whyUs.title}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {currentContent.whyUs.reasons.map((reason, index) => (
              <div
                key={index}
                className="flex flex-col items-center text-center p-6 rounded-lg bg-gray-50 hover:shadow-md transition-shadow"
              >
                <div className="mb-4 text-blue-600">{reason.icon}</div>
                <h3 className="text-xl font-semibold mb-2 text-gray-900">{reason.title}</h3>
                <p className="text-gray-600">{reason.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Solutions Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold mb-12 text-center text-gray-900">
            {currentContent.solutions.title}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {currentContent.solutions.items.map((solution, index) => (
              <Card key={index} className="border-0 shadow-md hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="mb-4 text-blue-600">{solution.icon}</div>
                  <CardTitle>{solution.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600">{solution.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-white">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold mb-12 text-center text-gray-900">
            {currentContent.pricing.title}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {currentContent.pricing.plans.map((plan, index) => (
              <Card
                key={index}
                className={`border-0 ${plan.featured ? "shadow-xl ring-2 ring-blue-500" : "shadow-md"}`}
              >
                <CardHeader>
                  {plan.featured && (
                    <Badge className="mb-2 self-start">{language === "ar" ? "موصى به" : "Recommended"}</Badge>
                  )}
                  <CardTitle className="text-xl">{plan.title}</CardTitle>
                  <div className="mt-2 text-2xl font-bold text-gray-900">{plan.price}</div>
                  <CardDescription className="mt-2">{plan.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    {plan.features.map((feature, i) => (
                      <li key={i} className="flex items-center">
                        <Check className="h-5 w-5 text-green-500 mr-2" />
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button className={`w-full ${plan.featured ? "bg-blue-600 hover:bg-blue-700" : ""}`}>
                    {plan.cta}
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold mb-12 text-center text-gray-900">
            {currentContent.testimonials.title}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {currentContent.testimonials.items.map((testimonial, index) => (
              <Card key={index} className="border-0 shadow-md">
                <CardContent className="pt-6">
                  <div className="flex items-center mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                    ))}
                  </div>
                  <p className="text-gray-700 mb-4">"{testimonial.content}"</p>
                  <div className="flex items-center">
                    <div className="ml-3">
                      <p className="text-sm font-medium text-gray-900">{testimonial.name}</p>
                      <p className="text-sm text-gray-500">{testimonial.role}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-blue-600 text-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-2xl md:text-3xl font-bold mb-4">{currentContent.contact.title}</h2>
          <p className="text-lg mb-8 text-blue-100">{currentContent.contact.subtitle}</p>
          <Button
            size="lg"
            variant="outline"
            className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-6 text-lg rounded-lg"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="mr-2"
            >
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
            </svg>
            {currentContent.contact.whatsapp}
          </Button>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 md:px-8 lg:px-16 bg-gray-900 text-gray-400 text-center">
        <p>{currentContent.footer.copyright}</p>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/merged-landing.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Check,
  Calendar,
  ShoppingBag,
  FileText,
  ChevronLeft,
  Cloud,
  Settings,
  Menu,
  X,
  Server,
  ArrowRight,
  Code,
  CheckCircle,
  Rocket,
  LineChart,
  Eye,
  Bell,
  Shield,
  Zap,
  DollarSign,
} from "lucide-react"
import { useState } from "react"

export default function MergedLanding() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <div dir="rtl" className="min-h-screen font-arabic bg-white">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-gray-900">InfraOps Solutions</h1>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8 space-x-reverse">
            <a href="#home" className="text-gray-600 hover:text-gray-900">
              nav.home
            </a>
            <a href="#services" className="text-gray-600 hover:text-gray-900">
              nav.services
            </a>
            <a href="#contact" className="text-gray-600 hover:text-gray-900">
              nav.contact
            </a>
          </div>

          {/* Mobile Menu Button */}
          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden mt-4 pb-4 border-t border-gray-200">
            <div className="flex flex-col space-y-2 pt-4">
              <a href="#home" className="text-gray-600 hover:text-gray-900 py-2">
                nav.home
              </a>
              <a href="#services" className="text-gray-600 hover:text-gray-900 py-2">
                nav.services
              </a>
              <a href="#contact" className="text-gray-600 hover:text-gray-900 py-2">
                nav.contact
              </a>
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section
        id="home"
        className="relative bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 py-20 px-4 md:px-8 lg:px-16 text-white"
      >
        <div className="max-w-5xl mx-auto text-center">
          <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100 px-3 py-1 text-sm">حلول متكاملة</Badge>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
            نحن نبني وندير بنيتك التحتية على السحابة أو في موقعك
          </h1>
          <p className="text-lg md:text-xl mb-8 text-blue-100 max-w-3xl mx-auto">
            حلول ذكية باستخدام الذكاء الاصطناعي مع خدمات البنية التحتية المتقدمة - نقدم لك تجربة شاملة لتطوير أعمالك
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button
              size="lg"
              className="bg-white text-blue-600 hover:bg-blue-50 px-8 py-6 text-lg rounded-lg"
              onClick={() => window.open("https://wa.me/9647707028327", "_blank")}
            >
              احجز استشارة مجانية
              <ChevronLeft className="mr-2 h-5 w-5" />
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-blue-600 px-8 py-6 text-lg rounded-lg"
              onClick={() => {
                const servicesSection = document.getElementById("services")
                if (servicesSection) {
                  servicesSection.scrollIntoView({ behavior: "smooth" })
                }
              }}
            >
              اكتشف المزيد عن خدماتنا
            </Button>
          </div>
        </div>
      </section>

      {/* Infrastructure Services Section */}
      <section id="services" className="py-16 px-4 md:px-8 lg:px-16 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">خدماتنا</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">نقدم مجموعة شاملة من خدمات البنية التحتية والحلول الذكية</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
            {/* Infrastructure Service 1 - Updated Cloud Services */}
            <Card className="border-0 shadow-md hover:shadow-xl transition-shadow">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <div className="relative">
                    <Cloud className="h-8 w-8 text-blue-600" />
                    <Rocket className="h-5 w-5 text-blue-600 absolute -bottom-1 -right-1" />
                  </div>
                </div>
                <CardTitle className="text-lg">نقل مشروعك إلى السحابة</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 text-sm mb-4">
                  نساعدك في تشغيل تطبيقك على خدمات مثل AWS أو Azure بحيث يعمل بكفاءة وبدون انقطاع
                </p>

                {/* Cloud Benefits */}
                <div className="flex flex-col gap-2 mt-4">
                  <div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                      <Shield className="h-4 w-4 text-blue-600" />
                    </div>
                    <span className="text-xs text-gray-700">المزيد من الأمان</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                      <Zap className="h-4 w-4 text-blue-600" />
                    </div>
                    <span className="text-xs text-gray-700">سرعة أفضل</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                      <DollarSign className="h-4 w-4 text-blue-600" />
                    </div>
                    <span className="text-xs text-gray-700">توفير في التكاليف</span>
                  </div>
                </div>

                <div className="mt-4 p-2 bg-blue-50 rounded-lg">
                  <p className="text-xs text-blue-700 text-center font-medium">
                    المزيد من الأمان، سرعة أفضل، وتوفير في التكاليف
                  </p>
                </div>
              </CardContent>
            </Card>

            {/* Infrastructure Service 2 - Updated for monitoring */}
            <Card className="border-0 shadow-md hover:shadow-xl transition-shadow">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <div className="relative">
                    <LineChart className="h-8 w-8 text-green-600" />
                    <Eye className="h-5 w-5 text-green-600 absolute -bottom-1 -right-1" />
                  </div>
                </div>
                <CardTitle className="text-lg">مراقبة أداء موقعك</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 text-sm mb-4">
                  نراقب أداء موقعك 24/7 وننبهك فورًا إذا حدث أي خلل أو بطء في التحميل.
                </p>

                {/* Monitoring Visualization */}
                <div className="flex items-center justify-between mt-4 mb-4">
                  <div className="h-8 w-full bg-gray-100 rounded-lg overflow-hidden flex">
                    <div className="h-full w-3/4 bg-gradient-to-r from-green-500 to-green-400"></div>
                    <div className="h-full w-1/12 bg-yellow-400"></div>
                    <div className="h-full w-1/6 bg-green-400"></div>
                  </div>
                </div>

                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center">
                    <div className="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
                    <span className="text-xs text-gray-600">أداء طبيعي</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-3 h-3 rounded-full bg-yellow-400 mr-1"></div>
                    <span className="text-xs text-gray-600">تنبيه</span>
                  </div>
                  <div className="flex items-center">
                    <Bell className="h-3 w-3 text-blue-600 mr-1" />
                    <span className="text-xs text-gray-600">إشعار</span>
                  </div>
                </div>

                <div className="mt-4 p-2 bg-green-50 rounded-lg">
                  <p className="text-xs text-green-700 text-center font-medium">
                    لا حاجة للقلق، نكتشف المشاكل قبل أن يلاحظها الزبائن
                  </p>
                </div>
              </CardContent>
            </Card>

            {/* Infrastructure Service 3 - Updated for automatic app updates */}
            <Card className="border-0 shadow-md hover:shadow-xl transition-shadow">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <div className="relative">
                    <ArrowRight className="h-8 w-8 text-blue-600 transform rotate-45" />
                    <ArrowRight className="h-6 w-6 text-blue-600 absolute top-1 left-1 transform -rotate-45 animate-pulse" />
                  </div>
                </div>
                <CardTitle className="text-lg">تحديثات تلقائية للتطبيقات</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 text-sm mb-4">
                  نربط مراحل تطوير التطبيق بحيث يتم إطلاق التحديثات بشكل تلقائي وآمن دون توقف.
                </p>

                {/* Simple Infographic */}
                <div className="flex items-center justify-between mt-4 px-1">
                  <div className="flex flex-col items-center">
                    <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center mb-1">
                      <Code className="h-4 w-4 text-blue-600" />
                    </div>
                    <p className="text-xs text-gray-600 text-center">كود جديد</p>
                  </div>

                  <ArrowRight className="h-3 w-3 text-gray-400" />

                  <div className="flex flex-col items-center">
                    <div className="w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center mb-1">
                      <CheckCircle className="h-4 w-4 text-blue-600" />
                    </div>
                    <p className="text-xs text-gray-600 text-center">اختبار</p>
                  </div>

                  <ArrowRight className="h-3 w-3 text-gray-400" />

                  <div className="flex flex-col items-center">
                    <div className="w-9 h-9 rounded-full bg-green-100 flex items-center justify-center mb-1">
                      <Rocket className="h-4 w-4 text-green-600" />
                    </div>
                    <p className="text-xs text-gray-600 text-center">إطلاق تلقائي</p>
                  </div>
                </div>

                <div className="mt-4 p-2 bg-blue-50 rounded-lg">
                  <p className="text-xs text-blue-700 text-center font-medium">
                    مثالي للتطبيقات التي تحتاج تحديثات مستمرة
                  </p>
                </div>
              </CardContent>
            </Card>

            {/* Infrastructure Service 4 - Updated for non-technical users */}
            <Card className="border-0 shadow-md hover:shadow-xl transition-shadow">
              <CardHeader className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <div className="relative">
                    <Server className="h-8 w-8 text-blue-600" />
                    <Settings className="h-5 w-5 text-blue-600 absolute -bottom-1 -right-1" />
                  </div>
                </div>
                <CardTitle className="text-lg">تجهيز الخوادم بشكل آلي</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 text-sm mb-4">
                  بدلاً من إعداد الخوادم يدويًا، نستخدم أدوات ذكية تجهز كل شيء تلقائيًا خلال دقائق، بدقة وسرعة عالية.
                </p>

                {/* Simple Infographic */}
                <div className="flex items-center justify-between mt-4 px-2">
                  <div className="flex flex-col items-center">
                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-1">
                      <FileText className="h-5 w-5 text-blue-600" />
                    </div>
                    <p className="text-xs text-gray-600">طلب الخدمة</p>
                  </div>

                  <ArrowRight className="h-4 w-4 text-gray-400" />

                  <div className="flex flex-col items-center">
                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-1">
                      <Settings className="h-5 w-5 text-blue-600 animate-pulse" />
                    </div>
                    <p className="text-xs text-gray-600">إعداد تلقائي</p>
                  </div>

                  <ArrowRight className="h-4 w-4 text-gray-400" />

                  <div className="flex flex-col items-center">
                    <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mb-1">
                      <Check className="h-5 w-5 text-green-600" />
                    </div>
                    <p className="text-xs text-gray-600">جاهز للعمل</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* AI Solutions Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-white">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <Badge className="mb-4 bg-purple-100 text-purple-700 hover:bg-purple-100 px-3 py-1 text-sm">
              حلول ذكية
            </Badge>
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">حلول الذكاء الاصطناعي الجاهزة</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              نقدم مجموعة من الحلول الجاهزة المدعومة بالذكاء الاصطناعي التي يمكن تخصيصها لتناسب احتياجات عملك
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* AI Solution 1 */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                  <Calendar className="h-6 w-6 text-purple-600" />
                </div>
                <CardTitle className="text-xl">نظام حجز مواعيد</CardTitle>
                <CardDescription>نظام متكامل لإدارة المواعيد والحجوزات مع إشعارات تلقائية للعملاء</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>واجهة سهلة الاستخدام</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>إشعارات تلقائية للعملاء</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تقارير وإحصائيات</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700"
                  onClick={() =>
                    window.open(
                      "https://wa.me/9647707028327?text=أريد%20معرفة%20المزيد%20عن%20نظام%20حجز%20المواعيد",
                      "_blank",
                    )
                  }
                >
                  طلب عرض
                </Button>
              </CardFooter>
            </Card>

            {/* AI Solution 2 */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                  <ShoppingBag className="h-6 w-6 text-purple-600" />
                </div>
                <CardTitle className="text-xl">متجر إلكتروني</CardTitle>
                <CardDescription>منصة بيع إلكترونية سهلة الاستخدام مع خيارات الدفع المحلية</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تصميم متجاوب مع جميع الأجهزة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>خيارات دفع متعددة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>لوحة تحكم سهلة</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700"
                  onClick={() =>
                    window.open(
                      "https://wa.me/9647707028327?text=أريد%20معرفة%20المزيد%20عن%20المتجر%20الإلكتروني",
                      "_blank",
                    )
                  }
                >
                  طلب عرض
                </Button>
              </CardFooter>
            </Card>

            {/* AI Solution 3 */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="pb-4">
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
                  <FileText className="h-6 w-6 text-purple-600" />
                </div>
                <CardTitle className="text-xl">صفحة طلبات</CardTitle>
                <CardDescription>صفحة مخصصة لاستقبال الطلبات والاستفسارات من العملاء</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>نماذج طلب مخصصة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>إشعارات فورية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>متابعة حالة الطلب</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700"
                  onClick={() =>
                    window.open(
                      "https://wa.me/9647707028327?text=أريد%20معرفة%20المزيد%20عن%20صفحة%20الطلبات",
                      "_blank",
                    )
                  }
                >
                  طلب عرض
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* Free Trial CTA Section */}
      <section className="py-12 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-blue-500 to-blue-600 text-white">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-xl md:text-2xl font-medium mb-6">جرب نموذجك مجانًا قبل اتخاذ القرار</h3>
          <Button
            size="lg"
            className="bg-green-500 hover:bg-green-600 text-white px-8 py-6 text-lg rounded-lg shadow-lg"
            onClick={() =>
              window.open("https://wa.me/9647707028327?text=أريد%20الحصول%20على%20معاينة%20مجانية%20لمشروعي", "_blank")
            }
          >
            تواصل معنا لتحصل على معاينة مجانية لمشروعك
          </Button>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">خطط الأسعار</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              نقدم باقات متنوعة تناسب احتياجاتك وميزانيتك لكل من خدمات البنية التحتية والحلول الذكية
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Pricing Tier 1 */}
            <Card className="border-0 shadow-md hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-xl">مجاني</CardTitle>
                <div className="mt-2">
                  <span className="text-3xl font-bold text-gray-900">$0</span>
                  <span className="text-gray-500">/للتجربة</span>
                </div>
                <CardDescription className="mt-2">جرب النسخة الأولية من موقعك أو تطبيقك بدون أي التزام</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>نسخة تجريبية كاملة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تصميم مخصص</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تعديلات غير محدودة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>استشارة مجانية</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button variant="outline" className="w-full" onClick={() => window.open("/subscribe", "_self")}>
                  ابدأ الآن
                </Button>
              </CardFooter>
            </Card>

            {/* Pricing Tier 2 */}
            <Card className="border-0 shadow-xl ring-2 ring-blue-500">
              <CardHeader>
                <Badge className="mb-2 self-start">الأكثر شيوعاً</Badge>
                <CardTitle className="text-xl">نشر</CardTitle>
                <div className="mt-2">
                  <span className="text-3xl font-bold text-gray-900">$50</span>
                  <span className="text-gray-500">/لمرة واحدة</span>
                </div>
                <CardDescription className="mt-2">
                  احصل على موقع أو تطبيق احترافي جاهز للاستخدام مع البنية التحتية
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تطوير كامل للموقع أو التطبيق</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>استضافة على خوادم سريعة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>إعداد البنية التحتية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>دعم فني لمدة شهر</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>اسم نطاق مجاني</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-blue-600 hover:bg-blue-700"
                  onClick={() => window.open("/subscribe", "_self")}
                >
                  اشترك الآن
                </Button>
              </CardFooter>
            </Card>

            {/* Pricing Tier 3 */}
            <Card className="border-0 shadow-md hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-xl">دعم شهري</CardTitle>
                <div className="mt-2">
                  <span className="text-3xl font-bold text-gray-900">$15</span>
                  <span className="text-gray-500">/شهرياً</span>
                </div>
                <CardDescription className="mt-2">
                  خدمة دعم وصيانة مستمرة لموقعك أو تطبيقك مع مراقبة البنية التحتية
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>دعم فني على مدار الساعة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>مراقبة البنية التحتية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تحديثات وتطويرات مستمرة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>تحليلات وتقارير شهرية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2" />
                    <span>نسخ احتياطية منتظمة</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button variant="outline" className="w-full" onClick={() => window.open("/subscribe", "_self")}>
                  اشترك الآن
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section
        id="contact"
        className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white"
      >
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-bold mb-4">جاهز للبدء؟</h2>
            <p className="text-lg mb-8 text-blue-100 max-w-3xl mx-auto">
              تواصل معنا الآن للحصول على استشارة مجانية وابدأ رحلتك نحو النجاح الرقمي مع حلول البنية التحتية والذكاء
              الاصطناعي
            </p>
          </div>

          {/* Contact Options */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            {/* WhatsApp Contact Card */}
            <div className="bg-white bg-opacity-10 p-8 rounded-2xl border border-white border-opacity-20 backdrop-blur-sm hover:bg-opacity-15 transition-all duration-300">
              <div className="text-center">
                <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-6">
                  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="#25D366">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                  </svg>
                </div>
                <CardTitle className="text-xl">تواصل عبر واتساب</CardTitle>
                <CardDescription>تواصل معنا مباشرة عبر واتساب للحصول على الدعم الفني والاستشارات</CardDescription>
              </div>
              <Button
                className="w-full bg-green-500 hover:bg-green-600"
                onClick={() => window.open("https://wa.me/9647707028327", "_blank")}
              >
                تواصل الآن
              </Button>
            </div>

            {/* Email Contact Card */}
            <div className="bg-white bg-opacity-10 p-8 rounded-2xl border border-white border-opacity-20 backdrop-blur-sm hover:bg-opacity-15 transition-all duration-300">
              <div className="text-center">
                <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="40"
                    height="40"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#3B82F6"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                    <polyline points="22,6 12,13 2,6" />
                  </svg>
                </div>
                <CardTitle className="text-xl">تواصل عبر البريد الإلكتروني</CardTitle>
                <CardDescription>أرسل لنا بريدًا إلكترونيًا وسنقوم بالرد عليك في أقرب وقت ممكن</CardDescription>
              </div>
              <Button
                className="w-full bg-blue-500 hover:bg-blue-600"
                onClick={() => window.open("mailto:info@infraops.solutions", "_blank")}
              >
                إرسال بريد إلكتروني
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-8 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto text-center">
          <p className="text-sm">© {new Date().getFullYear()} InfraOps Solutions. جميع الحقوق محفوظة.</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/modern-landing.tsx"
"use client"

import type React from "react"

import { useState, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  ArrowRight,
  Check,
  Cloud,
  Code,
  Database,
  Globe,
  Mail,
  Menu,
  MessageCircle,
  Monitor,
  Server,
  Shield,
  Star,
  Users,
  X,
  Zap,
  Play,
  BarChart3,
  Headphones,
  ShoppingCart,
  Bot,
  TrendingUp,
} from "lucide-react"

export default function ModernLanding() {
  const [language, setLanguage] = useState<"en" | "ar">("ar")
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const isRTL = language === "ar"

  const content = {
    en: {
      nav: {
        home: "Home",
        services: "Services",
        solutions: "Solutions",
        pricing: "Pricing",
        contact: "Contact",
        getStarted: "Get Started",
      },
      hero: {
        badge: "🚀 Next-Gen Infrastructure Solutions",
        title: "Build & Scale Your",
        titleHighlight: " Digital Infrastructure",
        description:
          "Transform your business with cutting-edge cloud infrastructure, AI-powered solutions, and enterprise-grade applications. From concept to deployment in just 48 hours.",
        startTrial: "Start Free Trial",
        watchDemo: "Watch Demo",
        happyClients: "500+ Happy Clients",
        rating: "4.9/5 Rating",
        live: "Live",
        cloudInfra: "Cloud Infrastructure",
        database: "Database Cluster",
        monitoring: "Monitoring",
        active: "Active",
        healthy: "Healthy",
        online: "Online",
      },
      services: {
        badge: "Our Services",
        title: "Complete Infrastructure Solutions",
        description:
          "From cloud migration to AI implementation, we provide end-to-end solutions that scale with your business needs.",
        items: [
          {
            title: "Cloud Infrastructure",
            description:
              "Scalable cloud solutions on AWS, Azure, and Google Cloud with automated deployment and monitoring.",
            features: ["Auto-scaling infrastructure", "24/7 monitoring & alerts", "Cost optimization"],
          },
          {
            title: "CI/CD Pipelines",
            description: "Automated deployment pipelines with GitHub Actions, GitLab CI, and custom workflows.",
            features: ["Automated testing", "Zero-downtime deployments", "Rollback capabilities"],
          },
          {
            title: "Monitoring & Analytics",
            description: "Comprehensive monitoring with Prometheus, Grafana, and custom dashboards.",
            features: ["Real-time metrics", "Custom alerts", "Performance insights"],
          },
          {
            title: "Security & Compliance",
            description: "Enterprise-grade security with compliance frameworks and automated security scanning.",
            features: ["Security audits", "Compliance reporting", "Vulnerability scanning"],
          },
          {
            title: "Database Management",
            description: "Managed database solutions with backup, replication, and performance optimization.",
            features: ["Automated backups", "High availability", "Performance tuning"],
          },
          {
            title: "Infrastructure as Code",
            description: "Automated infrastructure provisioning with Terraform, Ansible, and CloudFormation.",
            features: ["Version controlled", "Reproducible environments", "Disaster recovery"],
          },
        ],
      },
      smartStore: {
        badge: "AI-Powered Commerce",
        title: "Smart Store & AI Assistant",
        subtitle: "WhatsApp / Messenger / Instagram",
        description:
          "Launch your smart store inside chat apps with an AI-powered assistant that automatically answers customers, shows products, and processes orders—24/7.",
        features: {
          inChat: {
            title: "In-Chat Store Features",
            items: [
              "Custom seller dashboard",
              "Add/edit/delete products with images",
              "Products appear in chat instantly",
              "Multi-platform support",
            ],
          },
          ai: {
            title: "AI Assistant (Smart Secretary)",
            items: [
              "Auto-reply to common questions",
              "Store hours & location info",
              "Pricing information",
              "Learns and improves over time",
            ],
          },
          automation: {
            title: "Order Process Automation",
            items: [
              "AI shows product details",
              "Collects delivery address",
              "Processes payments",
              "Confirms orders in chat",
            ],
          },
          useCases: {
            title: "Perfect For",
            items: ["Clinics & Services", "Online Stores", "Support Teams", "Retailers & Shops"],
          },
        },
        pricingBadge: "Flexible Pricing",
        pricingTitle: "Pricing Plans",
        pricing: [
          {
            name: "Free Trial",
            duration: "15 days",
            price: "Free",
            description: "Full access to all features",
            features: ["Complete feature access", "Up to 100 products", "AI assistant enabled", "Basic analytics"],
            cta: "Start Free",
            highlight: false,
          },
          {
            name: "Ready Template",
            duration: "Per month",
            price: "$20",
            description: "Pre-made assistant/store bots",
            features: [
              "Pre-made templates",
              "Clinic or shop setup",
              "AI assistant configured",
              "24/7 support",
              "Advanced analytics",
            ],
            cta: "Choose Plan",
            highlight: true,
          },
          {
            name: "Custom Workflow",
            duration: "Per month",
            price: "$35–50",
            description: "Fully tailored experience",
            features: [
              "Custom workflow design",
              "Unlimited products",
              "Full personalization",
              "Priority support",
              "Advanced integrations",
            ],
            cta: "Contact Sales",
            highlight: false,
          },
        ],
        cta: "Try It FREE for 15 Days",
        ctaDesc: "Connect your page and automate your sales & support instantly!",
      },
      solutions: {
        badge: "Ready Solutions",
        title: "Pre-built Solutions for Every Need",
        description: "Launch faster with our ready-to-deploy solutions, customized for your industry and requirements.",
        mostPopular: "Most Popular",
        getStarted: "Get Started",
        items: [
          {
            title: "E-commerce Platform",
            description: "Complete online store with payment processing, inventory management, and analytics.",
            features: [
              "Multi-payment gateway integration",
              "Inventory management system",
              "Customer analytics dashboard",
              "Mobile-responsive design",
            ],
          },
          {
            title: "Booking System",
            description: "Advanced appointment booking with automated notifications and calendar integration.",
            features: [
              "Real-time availability",
              "Automated reminders",
              "Calendar synchronization",
              "Customer management",
            ],
          },
          {
            title: "Analytics Dashboard",
            description: "Comprehensive business intelligence with real-time reporting and insights.",
            features: [
              "Real-time data visualization",
              "Custom report generation",
              "Data export capabilities",
              "Multi-user access control",
            ],
          },
        ],
      },
      pricing: {
        badge: "Pricing Plans",
        title: "Simple, Transparent Pricing",
        description: "Choose the perfect plan for your needs. All plans include free trial and 24/7 support.",
        mostPopular: "Most Popular",
        plans: [
          {
            name: "Starter",
            price: "$0",
            period: "/month",
            description: "Perfect for trying out our platform and small projects",
            features: ["Free prototype development", "Basic cloud hosting", "Community support", "Basic monitoring"],
            cta: "Start Free Trial",
            variant: "outline",
          },
          {
            name: "Professional",
            price: "$50",
            period: "/one-time",
            description: "Complete solution deployment with ongoing support",
            features: [
              "Full application development",
              "Production deployment",
              "Custom domain setup",
              "SSL certificate",
              "1 month free support",
            ],
            cta: "Get Started",
            variant: "default",
            popular: true,
          },
          {
            name: "Enterprise",
            price: "$15",
            period: "/month",
            description: "Ongoing support and maintenance for your applications",
            features: [
              "24/7 technical support",
              "Infrastructure monitoring",
              "Regular updates",
              "Performance optimization",
              "Priority support",
            ],
            cta: "Contact Sales",
            variant: "outline",
          },
        ],
        comparisonTitle: "مقارنة شاملة بين الخطط",
        comparisonFeatures: [
          { name: "مدة التجربة", free: "15 يوم", ready: "-", custom: "-" },
          { name: "عدد المنتجات", free: "حتى 10", ready: "حتى 50", custom: "غير محدود" },
          { name: "الصور لكل منتج", free: "صورة واحدة", ready: "4 صور", custom: "غير محدود" },
          { name: "الرد التلقائي", free: "✓", ready: "✓", custom: "✓" },
          { name: "جمع بيانات العملاء", free: "أساسي", ready: "✓", custom: "✓" },
          { name: "تخصيص الردود", free: "-", ready: "محدود", custom: "✓ كامل" },
          { name: "واتساب", free: "✓", ready: "✓", custom: "✓" },
          { name: "إنستغرام", free: "-", ready: "-", custom: "✓" },
          { name: "ماسنجر", free: "✓", ready: "✓", custom: "✓" },
          { name: "التقارير", free: "أساسية", ready: "متقدمة", custom: "شاملة" },
          { name: "الدعم الفني", free: "مجتمع", ready: "24/7", custom: "أولوية 24/7" },
        ],
      },
      contact: {
        badge: "Get In Touch",
        title: "Ready to Transform Your Infrastructure?",
        description:
          "Let's discuss your project and see how we can help you build, scale, and optimize your digital infrastructure.",
        whatsapp: "WhatsApp",
        email: "Email",
        support: "Support",
        supportDesc: "24/7 Technical Support",
        formTitle: "Start Your Project",
        formDescription: "Fill out the form below and we'll get back to you within 24 hours.",
        firstName: "First Name",
        lastName: "Last Name",
        phone: "Phone",
        projectDesc: "Project Description",
        projectPlaceholder: "Tell us about your project requirements...",
        sendMessage: "Send Message",
      },
      footer: {
        description: "Transforming businesses with cutting-edge infrastructure solutions and AI-powered applications.",
        services: "Services",
        company: "Company",
        aboutUs: "About Us",
        careers: "Careers",
        blog: "Blog",
        privacyPolicy: "Privacy Policy",
        connect: "Connect",
        copyright: "© 2025 InfraOps Solutions. All rights reserved.",
      },
    },
    ar: {
      nav: {
        home: "الرئيسية",
        services: "الخدمات",
        solutions: "الحلول",
        pricing: "الأسعار",
        contact: "اتصل بنا",
        getStarted: "ابدأ الآن",
      },
      hero: {
        badge: "🚀 حلول البنية التحتية من الجيل القادم",
        title: "ابني وطور",
        titleHighlight: " بنيتك التحتية الرقمية",
        description:
          "حول عملك باستخدام البنية التحتية السحابية المتطورة والحلول المدعومة بالذكاء الاصطناعي والتطبيقات على مستوى المؤسسات. من الفكرة إلى النشر في 48 ساعة فقط.",
        startTrial: "ابدأ تجربة مجانية",
        watchDemo: "شاهد العرض التوضيحي",
        happyClients: "500+ عميل راضٍ",
        rating: "تقييم 4.9/5",
        live: "مباشر",
        cloudInfra: "البنية التحتية السحابية",
        database: "مجموعة قواعد البيانات",
        monitoring: "المراقبة",
        active: "نشط",
        healthy: "سليم",
        online: "متصل",
      },
      services: {
        badge: "خدماتنا",
        title: "حلول البنية التحتية الشاملة",
        description: "من الهجرة السحابية إلى تطبيق الذكاء الاصطناعي، نقدم حلولاً شاملة تتوسع مع احتياجات عملك.",
        items: [
          {
            title: "البنية التحتية السحابية",
            description: "حلول سحابية قابلة للتوسع على AWS و Azure و Google Cloud مع النشر والمراقبة التلقائية.",
            features: ["بنية تحتية ذاتية التوسع", "مراقبة وتنبيهات 24/7", "تحسين التكاليف"],
          },
          {
            title: "خطوط أنابيب CI/CD",
            description: "خطوط نشر آلية مع GitHub Actions و GitLab CI وسير العمل المخصص.",
            features: ["اختبار آلي", "نشر بدون توقف", "إمكانيات التراجع"],
          },
          {
            title: "المراقبة والتحليلات",
            description: "مراقبة شاملة مع Prometheus و Grafana ولوحات المعلومات المخصصة.",
            features: ["مقاييس في الوقت الفعلي", "تنبيهات مخصصة", "رؤى الأداء"],
          },
          {
            title: "الأمان والامتثال",
            description: "أمان على مستوى المؤسسات مع أطر الامتثال والفحص الأمني التلقائي.",
            features: ["تدقيق أمني", "تقارير الامتثال", "فحص الثغرات"],
          },
          {
            title: "إدارة قواعس البيانات",
            description: "حلول قواعس بيانات مُدارة مع النسخ الاحتياطية والتكرار وتحسين الأداء.",
            features: ["نسخ احتياطية آلية", "توفر عالي", "ضبط الأداء"],
          },
          {
            title: "البنية التحتية كرمز",
            description: "توفير البنية التحتية التلقائي مع Terraform و Ansible و CloudFormation.",
            features: ["مُتحكم في الإصدار", "بيئات قابلة للتكرار", "استعادة الكوارث"],
          },
        ],
      },
      smartStore: {
        badge: "التجارة الإلكترونية المدعومة بالذكاء الاصطناعي",
        title: "متجر ذكي ومساعد ذكي",
        subtitle: "WhatsApp / Messenger / Instagram",
        description:
          "أطلق متجرك الذكي داخل تطبيقات الدردشة مع مساعد ذكي يجيب على عملائك تلقائياً ويعرض المنتجات ويعالج الطلبات 24/7.",
        features: {
          inChat: {
            title: "ميزات المتجر الموجود في الدردشة",
            items: [
              "لوحة تحكم مخصصة للبائع",
              "إضافة/تعديل/حذف المنتجات مع الصور",
              "ظهور المنتجات في الدردشة فوراً",
              "دعم منصات متعددة",
            ],
          },
          ai: {
            title: "المساعد الذكي (السكرتيرة الذكية)",
            items: [
              "الرد التلقائي على الأسئلة الشائعة",
              "معلومات ساعات العمل والموقع",
              "معلومات الأسعار",
              "التعلم والتحسن المستمر",
            ],
          },
          automation: {
            title: "أتمتة عملية الطلب",
            items: ["المساعد يعرض تفاصيل المنتج", "جمع عنوان التسليم", "معالجة الدفع", "تأكيد الطلب في الدردشة"],
          },
          useCases: {
            title: "مثالي ل",
            items: ["العيادات والخدمات", "المتاجر الإلكترونية", "فرق الدعم", "تجار التجزئة والمتاجر"],
          },
        },
        pricingBadge: "أسعار مرنة",
        pricingTitle: "خطط الأسعار",
        pricing: [
          {
            name: "تجربة مجانية",
            duration: "15 يوماً",
            price: "مجاني",
            description: "وصول كامل إلى جميع الميزات",
            features: ["وصول كامل للميزات", "حتى 100 منتج", "مساعد ذكي مفعل", "تحليلات أساسية"],
            cta: "ابدأ مجاناً",
            highlight: false,
          },
          {
            name: "قالب جاهز",
            duration: "شهرياً",
            price: "$20",
            description: "بوتات متجر/مساعد جاهزة",
            features: ["قوالب جاهزة", "إعداد عيادة أو متجر", "مساعد ذكي مُعد", "دعم 24/7", "تحليلات متقدمة"],
            cta: "اختر الخطة",
            highlight: true,
          },
          {
            name: "سير عمل مخصص",
            duration: "شهرياً",
            price: "$35–50",
            description: "تجربة مخصصة بالكامل",
            features: ["تصميم سير عمل مخصص", "منتجات غير محدودة", "تخصيص كامل", "دعم أولوية", "تكاملات متقدمة"],
            cta: "تواصل معنا",
            highlight: false,
          },
        ],
        cta: "جرب مجاناً لمدة 15 يوم",
        ctaDesc: "أتصل بصفحتك وأتمتة المبيعات والدعم فوراً!",
      },
      solutions: {
        badge: "الحلول الجاهزة",
        title: "حلول جاهزة لكل احتياج",
        description: "انطلق بشكل أسرع مع حلولنا الجاهزة للنشر، مخصصة لصناعتك ومتطلباتك.",
        mostPopular: "الأكثر شيوعاً",
        getStarted: "ابدأ الآن",
        items: [
          {
            title: "منصة التجارة الإلكترونية",
            description: "متجر إلكتروني كامل مع معالجة المدفوعات وإدارة المخزون والتحليلات.",
            features: [
              "تكامل بوابات دفع متعددة",
              "نظام إدارة المخزون",
              "لوحة تحليلات العملاء",
              "تصميم متجاوب مع الهواتف",
            ],
          },
          {
            title: "نظام الحجز",
            description: "حجز مواعيد متقدم مع إشعارات آلية وتكامل التقويم.",
            features: ["توفر في الوقت الفعلي", "تذكيرات آلية", "مزامنة التقويم", "إدارة العملاء"],
          },
          {
            title: "لوحة التحليلات",
            description: "ذكاء أعمال شامل مع تقارير ورؤى في الوقت الفعلي.",
            features: [
              "تصور البيانات في الوقت الفعلي",
              "إنشاء تقارير مخصصة",
              "إمكانيات تصدير البيانات",
              "تحكم وصول متعدد المستخدمين",
            ],
          },
        ],
      },
      pricing: {
        badge: "خطط الأسعار",
        title: "اختر الخطة المناسبة لك",
        description: "اختر الخطة المناسبة لك من صفحة الاشتراك",
        ctaText: "عرض جميع الخطط",
        ctaLink: "/subscribe",
        mostPopular: "الأكثر شيوعاً",
        plans: [
          {
            name: "Starter",
            price: "$0",
            period: "/month",
            description: "Perfect for trying out our platform and small projects",
            features: ["Free prototype development", "Basic cloud hosting", "Community support", "Basic monitoring"],
            cta: "Start Free Trial",
            variant: "outline",
          },
          {
            name: "Professional",
            price: "$50",
            period: "/one-time",
            description: "Complete solution deployment with ongoing support",
            features: [
              "Full application development",
              "Production deployment",
              "Custom domain setup",
              "SSL certificate",
              "1 month free support",
            ],
            cta: "Get Started",
            variant: "default",
            popular: true,
          },
          {
            name: "Enterprise",
            price: "$15",
            period: "/month",
            description: "Ongoing support and maintenance for your applications",
            features: [
              "24/7 technical support",
              "Infrastructure monitoring",
              "Regular updates",
              "Performance optimization",
              "Priority support",
            ],
            cta: "Contact Sales",
            variant: "outline",
          },
        ],
        comparisonTitle: "مقارنة شاملة بين الخطط",
        comparisonFeatures: [
          { name: "مدة التجربة", free: "15 يوم", ready: "-", custom: "-" },
          { name: "عدد المنتجات", free: "حتى 10", ready: "حتى 50", custom: "غير محدود" },
          { name: "الصور لكل منتج", free: "صورة واحدة", ready: "4 صور", custom: "غير محدود" },
          { name: "الرد التلقائي", free: "✓", ready: "✓", custom: "✓" },
          { name: "جمع بيانات العملاء", free: "أساسي", ready: "✓", custom: "✓" },
          { name: "تخصيص الردود", free: "-", ready: "محدود", custom: "✓ كامل" },
          { name: "واتساب", free: "✓", ready: "✓", custom: "✓" },
          { name: "إنستغرام", free: "-", ready: "-", custom: "✓" },
          { name: "ماسنجر", free: "✓", ready: "✓", custom: "✓" },
          { name: "التقارير", free: "أساسية", ready: "متقدمة", custom: "شاملة" },
          { name: "الدعم الفني", free: "مجتمع", ready: "24/7", custom: "أولوية 24/7" },
        ],
      },
      contact: {
        badge: "تواصل معنا",
        title: "جاهز لتحويل بنيتك التحتية؟",
        description: "دعنا نناقش مشروعك ونرى كيف يمكننا مساعدتك في بناء وتوسيع وتحسين بنيتك التحتية الرقمية.",
        whatsapp: "واتساب",
        email: "البريد الإلكتروني",
        support: "الدعم",
        supportDesc: "دعم تقني 24/7",
        formTitle: "ابدأ مشروعك",
        formDescription: "املأ النموذج أدناه وسنعاود الاتصال بك خلال 24 ساعة.",
        firstName: "الاسم الأول",
        lastName: "اسم العائلة",
        phone: "الهاتف",
        projectDesc: "وصف المشروع",
        projectPlaceholder: "أخبرنا عن متطلبات مشروعك...",
        sendMessage: "إرسال الرسالة",
      },
      footer: {
        description: "تحويل الأعمال بحلول البنية التحتية المتطورة والتطبيقات المدعومة بالذكاء الاصطناعي.",
        services: "الخدمات",
        company: "الشركة",
        aboutUs: "من نحن",
        careers: "الوظائف",
        blog: "المدونة",
        privacyPolicy: "سياسة الخصوصية",
        connect: "تواصل",
        copyright: "© 2025 InfraOps Solutions. All rights reserved.",
      },
    },
  }
  const currentContent = content[language]

  const scrollToSection = useCallback((sectionId: string) => {
    const element = document.getElementById(sectionId)
    if (element) {
      const headerOffset = 80 // Account for sticky header
      const elementPosition = element.getBoundingClientRect().top
      const offsetPosition = elementPosition + window.pageYOffset - headerOffset

      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      })
    }
    setIsMenuOpen(false) // Close mobile menu after navigation
  }, [])

  const openWhatsApp = useCallback((message = "") => {
    window.open(`https://wa.me/9647707028327?text=${message}`, "_blank")
  }, [])

  const goToSubscribe = useCallback(() => {
    window.open("/subscribe", "_self")
  }, [])

  const handleContactSubmit = useCallback(
    (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      const formData = new FormData(e.currentTarget)
      const firstName = formData.get("firstName")
      const lastName = formData.get("lastName")
      const email = formData.get("email")
      const phone = formData.get("phone")
      const project = formData.get("project")

      // Format message for WhatsApp
      const message = `*New Contact Request*%0A%0A*Name:* ${firstName} ${lastName}%0A*Email:* ${email}%0A*Phone:* ${phone}%0A*Project:* ${project}`
      openWhatsApp(message)
    },
    [openWhatsApp],
  )

  return (
    <div className={`min-h-screen bg-white ${isRTL ? "font-arabic" : ""}`} dir={isRTL ? "rtl" : "ltr"}>
      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <button
                  onClick={() => scrollToSection("home")}
                  className={`flex items-center ${isRTL ? "space-x-reverse space-x-2" : "space-x-2"}`}
                >
                  <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                    <Cloud className="h-5 w-5 text-white" />
                  </div>
                  <span className="text-xl font-bold text-gray-900">Tekamul</span>
                </button>
              </div>
            </div>

            {/* Language Switcher */}
            <div className="flex items-center space-x-4">
              <Tabs value={language} onValueChange={(value) => setLanguage(value as "en" | "ar")}>
                <TabsList className="grid w-[120px] grid-cols-2">
                  <TabsTrigger value="en" className="text-xs">
                    EN
                  </TabsTrigger>
                  <TabsTrigger value="ar" className="text-xs">
                    عربي
                  </TabsTrigger>
                </TabsList>
              </Tabs>

              {/* Desktop Navigation - Replace href with onClick handlers */}
              <div className="hidden md:block">
                <div className={`ml-10 flex items-baseline ${isRTL ? "space-x-reverse space-x-4" : "space-x-4"}`}>
                  <button
                    onClick={() => scrollToSection("home")}
                    className="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors"
                  >
                    {currentContent.nav.home}
                  </button>
                  <button
                    onClick={() => scrollToSection("services")}
                    className="text-gray-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors"
                  >
                    {currentContent.nav.services}
                  </button>
                  <button
                    onClick={() => scrollToSection("solutions")}
                    className="text-gray-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors"
                  >
                    {currentContent.nav.solutions}
                  </button>
                  <button
                    onClick={() => scrollToSection("pricing")}
                    className="text-gray-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors"
                  >
                    {currentContent.nav.pricing}
                  </button>
                  <button
                    onClick={() => scrollToSection("contact")}
                    className="text-gray-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors"
                  >
                    {currentContent.nav.contact}
                  </button>
                </div>
              </div>

              <div className="hidden md:block">
                <Button
                  onClick={goToSubscribe}
                  className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
                >
                  {currentContent.nav.getStarted}
                </Button>
              </div>

              {/* Mobile menu button */}
              <div className="md:hidden">
                <button
                  onClick={() => setIsMenuOpen(!isMenuOpen)}
                  className="text-gray-600 hover:text-gray-900 focus:outline-none"
                >
                  {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Mobile Navigation - Replace href with onClick handlers */}
        {isMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
              <button
                onClick={() => scrollToSection("home")}
                className="text-gray-900 block px-3 py-2 text-base font-medium w-full text-left"
              >
                {currentContent.nav.home}
              </button>
              <button
                onClick={() => scrollToSection("services")}
                className="text-gray-600 block px-3 py-2 text-base font-medium w-full text-left"
              >
                {currentContent.nav.services}
              </button>
              <button
                onClick={() => scrollToSection("solutions")}
                className="text-gray-600 block px-3 py-2 text-base font-medium w-full text-left"
              >
                {currentContent.nav.solutions}
              </button>
              <button
                onClick={() => scrollToSection("pricing")}
                className="text-gray-600 block px-3 py-2 text-base font-medium w-full text-left"
              >
                {currentContent.nav.pricing}
              </button>
              <button
                onClick={() => scrollToSection("contact")}
                className="text-gray-600 block px-3 py-2 text-base font-medium w-full text-left"
              >
                {currentContent.nav.contact}
              </button>
              <div className="px-3 py-2">
                <Button onClick={goToSubscribe} className="w-full bg-gradient-to-r from-blue-600 to-purple-600">
                  {currentContent.nav.getStarted}
                </Button>
              </div>
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="relative overflow-hidden bg-gradient-to-br from-gray-50 to-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100">{currentContent.hero.badge}</Badge>
              <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
                {currentContent.hero.title}
                <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  {currentContent.hero.titleHighlight}
                </span>
              </h1>
              <p className="text-xl text-gray-600 mb-8 leading-relaxed">{currentContent.hero.description}</p>
              <div className={`flex flex-col sm:flex-row gap-4 ${isRTL ? "sm:flex-row-reverse" : ""}`}>
                <Button
                  size="lg"
                  onClick={goToSubscribe}
                  className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
                >
                  {currentContent.hero.startTrial}
                  <ArrowRight className={`h-5 w-5 ${isRTL ? "mr-2 rotate-180" : "ml-2"}`} />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  onClick={() => scrollToSection("services")}
                  className="border-gray-300 bg-transparent"
                >
                  <Play className={`h-5 w-5 ${isRTL ? "ml-2" : "mr-2"}`} />
                  {currentContent.hero.watchDemo}
                </Button>
              </div>
              <div className={`mt-8 flex items-center ${isRTL ? "space-x-reverse space-x-6" : "space-x-6"}`}>
                <div className="flex items-center">
                  <div className={`flex ${isRTL ? "space-x-reverse -space-x-2" : "-space-x-2"}`}>
                    <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 border-2 border-white"></div>
                    <div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-400 to-purple-600 border-2 border-white"></div>
                    <div className="w-8 h-8 rounded-full bg-gradient-to-r from-green-400 to-green-600 border-2 border-white"></div>
                  </div>
                  <span className={`text-sm text-gray-600 ${isRTL ? "mr-3" : "ml-3"}`}>
                    {currentContent.hero.happyClients}
                  </span>
                </div>
                <div className="flex items-center">
                  <div className="flex text-yellow-400">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="h-4 w-4 fill-current" />
                    ))}
                  </div>
                  <span className={`text-sm text-gray-600 ${isRTL ? "mr-2" : "ml-2"}`}>
                    {currentContent.hero.rating}
                  </span>
                </div>
              </div>
            </div>
            <div className="relative">
              <div className="relative z-10">
                <div className="bg-white rounded-2xl shadow-2xl p-8 border border-gray-200">
                  <div className="flex items-center justify-between mb-6">
                    <div className={`flex items-center ${isRTL ? "space-x-reverse space-x-3" : "space-x-3"}`}>
                      <div className="w-3 h-3 rounded-full bg-red-400"></div>
                      <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
                      <div className="w-3 h-3 rounded-full bg-green-400"></div>
                    </div>
                    <Badge className="bg-green-100 text-green-700">{currentContent.hero.live}</Badge>
                  </div>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div className={`flex items-center ${isRTL ? "space-x-reverse space-x-3" : "space-x-3"}`}>
                        <Server className="h-5 w-5 text-blue-600" />
                        <span className="text-sm font-medium">{currentContent.hero.cloudInfra}</span>
                      </div>
                      <Badge className="bg-green-100 text-green-700">{currentContent.hero.active}</Badge>
                    </div>
                    <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div className={`flex items-center ${isRTL ? "space-x-reverse space-x-3" : "space-x-3"}`}>
                        <Database className="h-5 w-5 text-purple-600" />
                        <span className="text-sm font-medium">{currentContent.hero.database}</span>
                      </div>
                      <Badge className="bg-green-100 text-green-700">{currentContent.hero.healthy}</Badge>
                    </div>
                    <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                      <div className={`flex items-center ${isRTL ? "space-x-reverse space-x-3" : "space-x-3"}`}>
                        <Monitor className="h-5 w-5 text-green-600" />
                        <span className="text-sm font-medium">{currentContent.hero.monitoring}</span>
                      </div>
                      <Badge className="bg-green-100 text-green-700">{currentContent.hero.online}</Badge>
                    </div>
                  </div>
                </div>
              </div>
              <div className="absolute -top-4 -right-4 w-72 h-72 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
              <div className="absolute -bottom-8 -left-4 w-72 h-72 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-purple-100 text-purple-700">{currentContent.services.badge}</Badge>
            <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-6">{currentContent.services.title}</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">{currentContent.services.description}</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {currentContent.services.items.map((service, index) => {
              const icons = [Cloud, Code, Monitor, Shield, Database, Zap]
              const colors = [
                "from-blue-500 to-blue-600",
                "from-purple-500 to-purple-600",
                "from-green-500 to-green-600",
                "from-orange-500 to-orange-600",
                "from-red-500 to-red-600",
                "from-indigo-500 to-indigo-600",
              ]
              const Icon = icons[index]

              return (
                <Card key={index} className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg">
                  <CardHeader>
                    <div
                      className={`w-12 h-12 bg-gradient-to-r ${colors[index]} rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <Icon className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle className="text-xl">{service.title}</CardTitle>
                    <CardDescription>{service.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {service.features.map((feature, featureIndex) => (
                        <li key={featureIndex} className="flex items-center text-sm">
                          <Check className={`h-4 w-4 text-green-500 ${isRTL ? "ml-2" : "mr-2"}`} />
                          {feature}
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Smart Store & AI Assistant Section */}
      <section id="smart-store" className="py-24 bg-gradient-to-br from-blue-50 via-white to-purple-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-blue-100 text-blue-700">{currentContent.smartStore.badge}</Badge>
            <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-2">{currentContent.smartStore.title}</h2>
            <p className="text-lg text-blue-600 font-semibold mb-4">{currentContent.smartStore.subtitle}</p>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">{currentContent.smartStore.description}</p>
          </div>

          {/* Features Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
            {[
              {
                title: currentContent.smartStore.features.inChat.title,
                icon: ShoppingCart,
                items: currentContent.smartStore.features.inChat.items,
                color: "from-blue-500 to-blue-600",
              },
              {
                title: currentContent.smartStore.features.ai.title,
                icon: Bot,
                items: currentContent.smartStore.features.ai.items,
                color: "from-purple-500 to-purple-600",
              },
              {
                title: currentContent.smartStore.features.automation.title,
                icon: Zap,
                items: currentContent.smartStore.features.automation.items,
                color: "from-pink-500 to-pink-600",
              },
              {
                title: currentContent.smartStore.features.useCases.title,
                icon: TrendingUp,
                items: currentContent.smartStore.features.useCases.items,
                color: "from-green-500 to-green-600",
              },
            ].map((feature, index) => {
              const Icon = feature.icon
              return (
                <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                  <CardHeader>
                    <div
                      className={`w-12 h-12 bg-gradient-to-r ${feature.color} rounded-lg flex items-center justify-center mb-4`}
                    >
                      <Icon className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle className="text-lg">{feature.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {feature.items.map((item, itemIndex) => (
                        <li key={itemIndex} className="flex items-start">
                          <Check className={`h-4 w-4 text-green-500 flex-shrink-0 ${isRTL ? "ml-2" : "mr-2"}`} />
                          <span className="text-sm text-gray-700">{item}</span>
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              )
            })}
          </div>

          {/* Pricing Section */}
          <div className="mt-20">
            <div className="text-center mb-12">
              <Badge className="mb-4 bg-purple-100 text-purple-700">{currentContent.smartStore.pricingBadge}</Badge>
              <h3 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">
                {currentContent.smartStore.pricingTitle}
              </h3>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
              {currentContent.smartStore.pricing.map((plan, index) => (
                <Card
                  key={index}
                  className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 ${
                    plan.highlight ? "ring-2 ring-blue-500 relative md:scale-105" : ""
                  }`}
                >
                  {plan.highlight && (
                    <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                      <Badge className="bg-blue-500 text-white px-4 py-1">
                        {currentContent.smartStore.pricingBadge}
                      </Badge>
                    </div>
                  )}
                  <CardHeader className={`text-center ${plan.highlight ? "pt-8" : ""}`}>
                    <CardTitle className="text-2xl">{plan.name}</CardTitle>
                    <p className="text-sm text-gray-500 mt-2">{plan.duration}</p>
                    <div className="mt-4">
                      <span className="text-4xl font-bold text-gray-900">{plan.price}</span>
                    </div>
                    <CardDescription className="mt-4">{plan.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3 mb-6">
                      {plan.features.map((feature, featureIndex) => (
                        <li key={featureIndex} className="flex items-center">
                          <Check className={`h-5 w-5 text-green-500 flex-shrink-0 ${isRTL ? "ml-3" : "mr-3"}`} />
                          <span className="text-sm text-gray-700">{feature}</span>
                        </li>
                      ))}
                    </ul>
                    <Button
                      onClick={openWhatsApp}
                      className={`w-full ${plan.highlight ? "bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700" : "bg-gray-200 text-gray-900 hover:bg-gray-300"}`}
                    >
                      {plan.cta}
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>

            {/* CTA Banner - Add onClick handler */}
            <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 md:p-12 text-white text-center">
              <h3 className="text-2xl md:text-3xl font-bold mb-4">{currentContent.smartStore.cta}</h3>
              <p className="text-lg mb-6 max-w-2xl mx-auto">{currentContent.smartStore.ctaDesc}</p>
              <Button onClick={goToSubscribe} className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-2">
                {currentContent.nav.getStarted}
                <ArrowRight className={`h-4 w-4 ${isRTL ? "mr-2 rotate-180" : "ml-2"}`} />
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Solutions Section */}
      <section id="solutions" className="py-24 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-green-100 text-green-700">{currentContent.solutions.badge}</Badge>
            <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-6">{currentContent.solutions.title}</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">{currentContent.solutions.description}</p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {currentContent.solutions.items.map((solution, index) => {
              const icons = [Globe, Users, BarChart3]
              const colors = [
                "from-blue-500 to-purple-500",
                "from-purple-500 to-pink-500",
                "from-green-500 to-teal-500",
              ]
              const Icon = icons[index]
              const isPopular = index === 1

              return (
                <Card
                  key={index}
                  className={`border-0 shadow-xl hover:shadow-2xl transition-all duration-300 ${
                    isPopular ? "ring-2 ring-purple-500" : ""
                  }`}
                >
                  <CardHeader className="text-center">
                    {isPopular && (
                      <Badge className="mb-4 bg-purple-100 text-purple-700">
                        {currentContent.solutions.mostPopular}
                      </Badge>
                    )}
                    <div
                      className={`w-16 h-16 bg-gradient-to-r ${colors[index]} rounded-2xl flex items-center justify-center mx-auto mb-4`}
                    >
                      <Icon className="h-8 w-8 text-white" />
                    </div>
                    <CardTitle className="text-2xl">{solution.title}</CardTitle>
                    <CardDescription className="text-base">{solution.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {solution.features.map((feature, featureIndex) => (
                        <div key={featureIndex} className="flex items-center">
                          <Check className={`h-5 w-5 text-green-500 ${isRTL ? "ml-3" : "mr-3"}`} />
                          <span>{feature}</span>
                        </div>
                      ))}
                    </div>
                    <Button
                      className={`w-full mt-6 bg-gradient-to-r ${colors[index]} hover:from-blue-600 hover:to-purple-600`}
                    >
                      {currentContent.solutions.getStarted}
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Pricing Section - Arabic Simplified */}
      {language === "ar" && (
        <section id="pricing" className="py-24 bg-gradient-to-br from-blue-50 to-purple-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <Badge className="mb-4 bg-blue-100 text-blue-700">{currentContent.pricing.badge}</Badge>
              <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-6">{currentContent.pricing.title}</h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">{currentContent.pricing.description}</p>

              <Button
                onClick={() => (window.location.href = currentContent.pricing.ctaLink)}
                size="lg"
                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-6 text-lg"
              >
                {currentContent.pricing.ctaText}
                <ArrowRight className="mr-2 h-5 w-5" />
              </Button>
            </div>
          </div>
        </section>
      )}

      {/* Pricing Section - English (unchanged) */}
      {language === "en" && (
        <section id="pricing" className="py-24 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <Badge className="mb-4 bg-blue-100 text-blue-700">{currentContent.pricing.badge}</Badge>
              <h2 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-6">{currentContent.pricing.title}</h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">{currentContent.pricing.description}</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
              {currentContent.pricing.plans.map((plan, index) => (
                <Card
                  key={index}
                  className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 ${
                    plan.popular ? "ring-2 ring-blue-500 relative scale-105" : ""
                  }`}
                >
                  {plan.popular && (
                    <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                      <Badge className="bg-blue-500 text-white px-4 py-1">{currentContent.pricing.mostPopular}</Badge>
                    </div>
                  )}
                  <CardHeader className={`text-center ${plan.popular ? "pt-8" : ""}`}>
                    <CardTitle className="text-2xl">{plan.name}</CardTitle>
                    <div className="mt-4">
                      <span className="text-4xl font-bold">{plan.price}</span>
                      <span className="text-gray-500">{plan.period}</span>
                    </div>
                    <CardDescription className="mt-4">{plan.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-3">
                      {plan.features.map((feature, featureIndex) => (
                        <li key={featureIndex} className="flex items-center">
                          <Check className={`h-5 w-5 text-green-500 ${isRTL ? "ml-3" : "mr-3"} flex-shrink-0`} />
                          <span className="text-sm">{feature}</span>
                        </li>
                      ))}
                    </ul>
                    <Button
                      onClick={() => (window.location.href = "/subscribe")}
                      variant={plan.variant as "default" | "outline"}
                      className={`w-full mt-6 ${plan.variant === "default" ? "bg-blue-600 hover:bg-blue-700" : ""}`}
                    >
                      {plan.cta}
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Contact Section - Add form submission handler */}
      <section id="contact" className="py-24 bg-gradient-to-br from-blue-600 to-purple-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="text-white">
              <Badge className="mb-4 bg-white/20 text-white">{currentContent.contact.badge}</Badge>
              <h2 className="text-3xl lg:text-5xl font-bold mb-6">{currentContent.contact.title}</h2>
              <p className="text-xl text-blue-100 mb-8">{currentContent.contact.description}</p>

              <div className="space-y-6">
                <button
                  onClick={() => openWhatsApp("Hello Tekamul, I'm interested in your services.")}
                  className="flex items-center w-full text-left hover:opacity-80 transition-opacity"
                >
                  <div
                    className={`w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center ${isRTL ? "ml-4" : "mr-4"}`}
                  >
                    <MessageCircle className="h-6 w-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold">{currentContent.contact.whatsapp}</h3>
                    <p className="text-blue-100">+964 770 702 8327</p>
                  </div>
                </button>

                <button
                  onClick={() => window.open("mailto:ghassan@tekamul.link", "_blank")}
                  className="flex items-center w-full text-left hover:opacity-80 transition-opacity"
                >
                  <div
                    className={`w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center ${isRTL ? "ml-4" : "mr-4"}`}
                  >
                    <Mail className="h-6 w-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold">{currentContent.contact.email}</h3>
                    <p className="text-blue-100">ghassan@tekamul.link</p>
                  </div>
                </button>

                <div className="flex items-center">
                  <div
                    className={`w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center ${isRTL ? "ml-4" : "mr-4"}`}
                  >
                    <Headphones className="h-6 w-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold">{currentContent.contact.support}</h3>
                    <p className="text-blue-100">{currentContent.contact.supportDesc}</p>
                  </div>
                </div>
              </div>
            </div>

            <Card className="border-0 shadow-2xl">
              <CardHeader>
                <CardTitle className="text-2xl">{currentContent.contact.formTitle}</CardTitle>
                <CardDescription>{currentContent.contact.formDescription}</CardDescription>
              </CardHeader>
              <CardContent>
                <form className="space-y-4" onSubmit={handleContactSubmit}>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="firstName">{currentContent.contact.firstName}</Label>
                      <Input id="firstName" name="firstName" placeholder="John" required />
                    </div>
                    <div>
                      <Label htmlFor="lastName">{currentContent.contact.lastName}</Label>
                      <Input id="lastName" name="lastName" placeholder="Doe" required />
                    </div>
                  </div>
                  <div>
                    <Label htmlFor="email">{currentContent.contact.email}</Label>
                    <Input id="email" name="email" type="email" placeholder="john@example.com" required />
                  </div>
                  <div>
                    <Label htmlFor="phone">{currentContent.contact.phone}</Label>
                    <Input id="phone" name="phone" placeholder="+1 (555) 123-4567" />
                  </div>
                  <div>
                    <Label htmlFor="project">{currentContent.contact.projectDesc}</Label>
                    <Textarea
                      id="project"
                      name="project"
                      placeholder={currentContent.contact.projectPlaceholder}
                      rows={4}
                    />
                  </div>
                  <Button
                    type="submit"
                    className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
                  >
                    {currentContent.contact.sendMessage}
                    <ArrowRight className={`h-4 w-4 ${isRTL ? "mr-2 rotate-180" : "ml-2"}`} />
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Footer - Fix footer links */}
      <footer className="bg-gray-900 text-gray-300 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <button
                onClick={() => scrollToSection("home")}
                className={`flex items-center ${isRTL ? "space-x-reverse space-x-2" : "space-x-2"} mb-4`}
              >
                <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                  <Cloud className="h-5 w-5 text-white" />
                </div>
                <span className="text-xl font-bold text-white">Tekamul</span>
              </button>
              <p className="text-sm leading-relaxed">{currentContent.footer.description}</p>
            </div>

            <div>
              <h3 className="text-white font-semibold mb-4">{currentContent.footer.services}</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <button onClick={() => scrollToSection("services")} className="hover:text-white transition-colors">
                    {currentContent.hero.cloudInfra}
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection("services")} className="hover:text-white transition-colors">
                    {currentContent.services.items[1].title}
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection("services")} className="hover:text-white transition-colors">
                    {currentContent.services.items[3].title}
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection("services")} className="hover:text-white transition-colors">
                    {currentContent.services.items[2].title}
                  </button>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="text-white font-semibold mb-4">{currentContent.footer.company}</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <button onClick={() => scrollToSection("home")} className="hover:text-white transition-colors">
                    {currentContent.footer.aboutUs}
                  </button>
                </li>
                <li>
                  <button onClick={() => scrollToSection("solutions")} className="hover:text-white transition-colors">
                    {currentContent.footer.careers}
                  </button>
                </li>
                <li>
  <button onClick={() => scrollToSection("contact")} className="hover:text-white transition-colors">
  {currentContent.footer.blog}
  </button>
</li>
<li>
  <a href="/privacy" className="hover:text-white transition-colors">
  {currentContent.footer.privacyPolicy}
  </a>
</li>
                <li>
                  <button onClick={() => scrollToSection("contact")} className="hover:text-white transition-colors">
                    {currentContent.footer.contact}
                  </button>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="text-white font-semibold mb-4">{currentContent.footer.connect}</h3>
              <div className={`flex ${isRTL ? "space-x-reverse space-x-4" : "space-x-4"}`}>
                <button
                  onClick={() => openWhatsApp()}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
                >
                  <MessageCircle className="h-5 w-5" />
                </button>
                <button
                  onClick={() => window.open("mailto:ghassan@tekamul.link", "_blank")}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
                >
                  <Mail className="h-5 w-5" />
                </button>
                <button
                  onClick={() => window.open("https://github.com/tekamul", "_blank")}
                  className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
                >
                  <Globe className="h-5 w-5" />
                </button>
              </div>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-12 pt-8 text-sm text-center">
            <p>{currentContent.footer.copyright}</p>
            <p className="text-gray-500 mt-2">غسان عبد الواحد عبد الله — البصرة, Iraq</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Menu, X } from "lucide-react"

export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4 sticky top-0 z-50">
      <div className="max-w-6xl mx-auto flex items-center justify-between">
        <div className="flex items-center">
          <Link href="/" className="text-xl font-bold text-gray-900">
            InfraOps Solutions
          </Link>
        </div>

        {/* Desktop Navigation */}
        <div className="hidden md:flex items-center space-x-8 space-x-reverse">
          <Link href="/" className="text-gray-600 hover:text-gray-900">
            الرئيسية
          </Link>
          <Link href="/services" className="text-gray-600 hover:text-gray-900">
            خدماتنا
          </Link>
          <Link href="/subscribe" className="text-gray-600 hover:text-gray-900">
            الاشتراك
          </Link>
          <Link href="/contact" className="text-gray-600 hover:text-gray-900">
            اتصل بنا
          </Link>
        </div>

        {/* Mobile Menu Button */}
        <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
          {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </button>
      </div>

      {/* Mobile Navigation */}
      {isMenuOpen && (
        <div className="md:hidden mt-4 pb-4 border-t border-gray-200">
          <div className="flex flex-col space-y-2 pt-4">
            <Link href="/" className="text-gray-600 hover:text-gray-900 py-2">
              الرئيسية
            </Link>
            <Link href="/services" className="text-gray-600 hover:text-gray-900 py-2">
              خدماتنا
            </Link>
            <Link href="/subscribe" className="text-gray-600 hover:text-gray-900 py-2">
              الاشتراك
            </Link>
            <Link href="/contact" className="text-gray-600 hover:text-gray-900 py-2">
              اتصل بنا
            </Link>
          </div>
        </div>
      )}
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/pricing-plans.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Check,
  MessageCircle,
  Smartphone,
  Globe,
  Settings,
  ArrowLeft,
  CreditCard,
  Phone,
  Building2,
  User,
  X,
  Mail,
} from "lucide-react"
import SubscriptionDetails from "./subscription-details"

export default function PricingPlans() {
  const [selectedPackage, setSelectedPackage] = useState<string | null>(null)
  const [showDetails, setShowDetails] = useState(false)

  const handlePackageSelect = (packageName: string) => {
    setSelectedPackage(packageName)
    setShowDetails(true)
  }

  const handleCloseDetails = () => {
    setShowDetails(false)
    setSelectedPackage(null)
  }

  const handleReceiptWhatsApp = () => {
    const message = "مرحبا، لقد قمت بتحويل مبلغ الاشتراك، هذا هو الإيصال."
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message)}`, "_blank")
  }

  return (
    <div dir="rtl" className="min-h-screen font-arabic bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-gray-900">InfraOps Solutions</h1>
          </div>
          <Button variant="outline" onClick={() => window.history.back()} className="flex items-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            العودة
          </Button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-gray-900">اشترك الآن</h1>
          <p className="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed mb-8">
            ابدأ مشروعك الرقمي اليوم مع نسخة معاينة مجانية، ثم ادفع فقط عند النشر.
          </p>
          <div className="flex justify-center">
            <Badge className="bg-green-100 text-green-700 px-6 py-3 text-lg font-semibold">
              ✨ معاينة مجانية لجميع الباقات
            </Badge>
          </div>
        </div>
      </section>

      {/* Subscription Details Modal */}
      {showDetails && selectedPackage && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center p-6 border-b">
              <h3 className="text-2xl font-bold">تفاصيل الاشتراك - {selectedPackage}</h3>
              <Button variant="ghost" size="icon" onClick={handleCloseDetails}>
                <X className="h-6 w-6" />
              </Button>
            </div>
            <div className="p-6">
              <SubscriptionDetails packageName={selectedPackage} onClose={handleCloseDetails} />
            </div>
          </div>
        </div>
      )}

      {/* Pricing Plans */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900">اختر الباقة المناسبة لك</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">جميع الباقات تشمل معاينة مجانية كاملة قبل الدفع</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Basic Plan */}
            <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader className="text-center pb-6">
                <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Smartphone className="h-10 w-10 text-blue-600" />
                </div>
                <CardTitle className="text-2xl mb-4">الباقة الأساسية</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">150,000 دينار</div>
                  <div className="text-sm text-gray-500 mb-3">للتنفيذ لمرة واحدة</div>
                  <div className="text-xl font-semibold text-blue-600">+ 50,000 دينار شهريًا</div>
                  <div className="text-sm text-gray-500">للدعم والاستضافة</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">
                  مثالية للمشاريع البسيطة والمواقع الشخصية
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>موقع بسيط أو تطبيق صفحة واحدة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تصميم متجاوب مع الهواتف</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني أساسي</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>استضافة شهر مجاني</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>نطاق مجاني (.com)</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  className="w-full bg-blue-600 hover:bg-blue-700 py-4 text-lg"
                  onClick={() => handlePackageSelect("الباقة الأساسية")}
                >
                  اختر هذه الباقة
                </Button>
              </CardFooter>
            </Card>

            {/* Advanced Plan */}
            <Card className="border-0 shadow-2xl ring-4 ring-purple-500 relative transform scale-105">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                <Badge className="bg-purple-500 text-white px-6 py-2 text-lg">الأكثر شيوعًا</Badge>
              </div>
              <CardHeader className="text-center pb-6 pt-8">
                <div className="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Globe className="h-10 w-10 text-purple-600" />
                </div>
                <CardTitle className="text-2xl mb-4">الباقة المتقدمة</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">250,000 دينار</div>
                  <div className="text-sm text-gray-500 mb-3">للتنفيذ لمرة واحدة</div>
                  <div className="text-xl font-semibold text-purple-600">+ 75,000 دينار شهريًا</div>
                  <div className="text-sm text-gray-500">للدعم والاستضافة</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">الأفضل للشركات الصغيرة والمتوسطة</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تطبيق متعدد الصفحات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تصميم مخصص حسب الطلب</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>لوحة تحكم إدارية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني متقدم</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تحليلات وإحصائيات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>نسخ احتياطية أسبوعية</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700 py-4 text-lg"
                  onClick={() => handlePackageSelect("الباقة المتقدمة")}
                >
                  اختر هذه الباقة
                </Button>
              </CardFooter>
            </Card>

            {/* Custom Plan */}
            <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader className="text-center pb-6">
                <div className="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Settings className="h-10 w-10 text-orange-600" />
                </div>
                <CardTitle className="text-2xl mb-4">باقة مخصصة</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">يبدأ من 400,000</div>
                  <div className="text-sm text-gray-500 mb-3">دينار للتنفيذ</div>
                  <div className="text-xl font-semibold text-orange-600">حسب المتطلبات</div>
                  <div className="text-sm text-gray-500">للدعم الشهري</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">
                  للمشاريع الكبيرة والمتطلبات الخاصة
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تطوير حسب الطلب</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>ميزات إضافية متقدمة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تكامل مع أنظمة خارجية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني مخصص 24/7</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>استشارة تقنية مستمرة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>أولوية في التطوير</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  variant="outline"
                  className="w-full border-2 border-orange-500 text-orange-600 hover:bg-orange-50 py-4 text-lg"
                  onClick={() => handlePackageSelect("الباقة المخصصة")}
                >
                  طلب استشارة
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* Payment Instructions */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-gray-50 to-blue-50">
        <div className="max-w-4xl mx-auto">
          <Card className="border-0 shadow-2xl bg-white">
            <CardHeader className="text-center bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-t-lg py-8">
              <div className="flex items-center justify-center mb-6">
                <CreditCard className="h-10 w-10 ml-3" />
                <CardTitle className="text-3xl">معلومات الدفع البنكي</CardTitle>
              </div>
              <CardDescription className="text-blue-100 text-lg">يرجى تحويل المبلغ على الحساب التالي:</CardDescription>
            </CardHeader>
            <CardContent className="p-10">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="flex items-center p-6 bg-gray-50 rounded-xl">
                    <User className="h-8 w-8 text-blue-600 ml-4" />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">اسم الحساب</div>
                      <div className="font-bold text-xl">غسان عبد الله</div>
                    </div>
                  </div>

                  <div className="flex items-center p-6 bg-gray-50 rounded-xl">
                    <Building2 className="h-8 w-8 text-blue-600 ml-4" />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">المصرف</div>
                      <div className="font-bold text-xl">مصرف الرافدين</div>
                    </div>
                  </div>
                </div>

                <div className="space-y-6">
                  <div className="flex items-center p-6 bg-blue-50 rounded-xl border-4 border-blue-200">
                    <CreditCard className="h-8 w-8 text-blue-600 ml-4" />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">رقم الحساب</div>
                      <div className="font-bold text-3xl text-blue-600 tracking-wider">8534699650</div>
                    </div>
                  </div>

                  <div className="flex items-center p-6 bg-green-50 rounded-xl border-4 border-green-200">
                    <Phone className="h-8 w-8 text-green-600 ml-4" />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">واتساب للإيصال</div>
                      <div className="font-bold text-xl text-green-600">+9647707028327</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="p-4 border rounded-lg bg-blue-50">
                <div className="font-bold mb-2 flex items-center">
                  <Mail className="ml-2 text-blue-600" />
                  <span>التواصل عبر الإيميل</span>
                </div>
                <p className="text-sm mb-2">
                  يمكنك أيضًا التواصل معنا عبر الإيميل لأي استفسارات أو لإرسال تفاصيل المشروع
                </p>
                <div className="flex items-center p-3 bg-white rounded-lg border border-blue-200">
                  <Mail className="h-5 w-5 text-blue-600 ml-2" />
                  <a href="mailto:ghassan@tekamul.link" className="font-bold text-blue-600 hover:underline">
                    ghassan@tekamul.link
                  </a>
                </div>
              </div>

              <div className="mt-10 p-8 bg-yellow-50 border-2 border-yellow-200 rounded-xl">
                <div className="flex items-start">
                  <MessageCircle className="h-8 w-8 text-yellow-600 ml-4 mt-1 flex-shrink-0" />
                  <div>
                    <h4 className="font-bold text-yellow-800 mb-4 text-lg">خطوات مهمة بعد التحويل:</h4>
                    <ol className="list-decimal list-inside space-y-2 text-yellow-700">
                      <li>التقط صورة واضحة لإيصال التحويل</li>
                      <li>أرسل الصورة عبر واتساب على الرقم أعلاه</li>
                      <li>اذكر اسم الباقة التي اخترتها</li>
                      <li>سنبدأ العمل خلال 24 ساعة من استلام الإيصال</li>
                    </ol>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Call-to-Action */}
      <section className="py-20 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-green-500 to-green-600">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-3xl md:text-4xl font-bold text-white mb-8">هل قمت بالتحويل؟</h3>
          <p className="text-xl text-green-100 mb-12 max-w-2xl mx-auto">
            أرسل صورة الإيصال الآن وسنبدأ العمل على مشروعك فورًا
          </p>
          <Button
            size="lg"
            className="bg-white text-green-600 hover:bg-green-50 px-12 py-8 text-xl rounded-xl shadow-2xl transform hover:scale-105 transition-all duration-200"
            onClick={handleReceiptWhatsApp}
          >
            <MessageCircle className="h-8 w-8 ml-3" />
            أرسل صورة الإيصال الآن
          </Button>

          <div className="mt-10 text-center">
            <p className="text-green-100 text-lg mb-4">أو تواصل معنا للاستفسار:</p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
              <a
                href="https://wa.me/9647707028327"
                className="text-white font-bold hover:underline text-xl flex items-center"
                target="_blank"
                rel="noopener noreferrer"
              >
                <MessageCircle className="h-5 w-5 ml-2" />
                +9647707028327
              </a>
              <span className="text-green-200 hidden sm:inline">|</span>
              <a
                href="mailto:ghassan@tekamul.link"
                className="text-white font-bold hover:underline text-xl flex items-center"
              >
                <Mail className="h-5 w-5 ml-2" />
                ghassan@tekamul.link
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto text-center">
          <div className="mb-6">
            <h3 className="text-2xl font-bold mb-3">InfraOps Solutions</h3>
            <p className="text-gray-400">حلول تقنية متكاملة لنجاح مشروعك الرقمي</p>
          </div>
          <div className="border-t border-gray-700 pt-6">
            <p className="text-gray-400">© {new Date().getFullYear()} InfraOps Solutions. جميع الحقوق محفوظة.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/privacy-policy.tsx"
"use client"

import Link from "next/link"
import { Cloud, ArrowLeft, Mail, MessageCircle, Globe, Shield, Database, Eye, Lock, UserCheck, RefreshCw, Phone, ChevronRight } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

const sections = [
  { id: "information-we-collect", label: "Information We Collect", icon: Database },
  { id: "how-we-use-information", label: "How We Use Information", icon: Eye },
  { id: "data-sharing", label: "Data Sharing", icon: Globe },
  { id: "data-security", label: "Data Security", icon: Lock },
  { id: "your-rights", label: "Your Rights", icon: UserCheck },
  { id: "external-services", label: "External Services", icon: Shield },
  { id: "policy-updates", label: "Policy Updates", icon: RefreshCw },
  { id: "contact-information", label: "Contact Information", icon: Phone },
]

function scrollToSection(id: string) {
  const el = document.getElementById(id)
  if (el) {
    const offset = 100
    const y = el.getBoundingClientRect().top + window.scrollY - offset
    window.scrollTo({ top: y, behavior: "smooth" })
  }
}

export default function PrivacyPolicy() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                <Cloud className="h-5 w-5 text-white" />
              </div>
              <span className="text-xl font-bold text-gray-900">Tekamul</span>
            </Link>
            <Link href="/">
              <Button variant="ghost" className="text-gray-600 hover:text-gray-900">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Home
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-600 to-purple-700 text-white py-16 lg:py-24">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-2xl mb-6">
            <Shield className="h-8 w-8 text-white" />
          </div>
          <h1 className="text-4xl lg:text-5xl font-bold mb-4 text-balance">Privacy Policy</h1>
          <p className="text-lg lg:text-xl text-blue-100 mb-6 max-w-2xl mx-auto leading-relaxed">
            Privacy Policy for Tekamul AI Mobile App and automation services.
          </p>
          <Badge className="bg-white/20 text-white hover:bg-white/30 text-sm px-4 py-1.5">
            Last updated: March 2026
          </Badge>
        </div>
      </section>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-10">

          {/* Sidebar Navigation */}
          <aside className="lg:col-span-1">
            <div className="sticky top-24">
              <Card className="border-gray-200 shadow-sm">
                <CardContent className="p-4">
                  <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">On this page</h3>
                  <nav className="space-y-1">
                    {sections.map((section) => {
                      const Icon = section.icon
                      return (
                        <button
                          key={section.id}
                          onClick={() => scrollToSection(section.id)}
                          className="flex items-center gap-2.5 w-full text-left px-3 py-2 rounded-lg text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-colors"
                        >
                          <Icon className="h-4 w-4 flex-shrink-0" />
                          <span>{section.label}</span>
                        </button>
                      )
                    })}
                  </nav>
                </CardContent>
              </Card>
            </div>
          </aside>

          {/* Content Area */}
          <main className="lg:col-span-3">
            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 lg:p-12">

              {/* Intro */}
              <div className="mb-12 pb-8 border-b border-gray-100">
                <p className="text-lg text-gray-700 leading-relaxed">
                  Tekamul AI Automation (“we”, “our”, or “us”) operates the Tekamul AI mobile
                  application (the “App”). This Privacy Policy explains how we collect, use, and protect
                  information when you use our mobile application and related automation services.
                </p>
              </div>

              {/* Section 1 */}
              <section id="information-we-collect" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-blue-100 text-blue-600">
                    <span className="text-lg font-bold">1</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Information We Collect</h2>
                </div>

                <div className="space-y-6">
                  <div className="rounded-xl bg-gray-50 p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                      <UserCheck className="h-5 w-5 text-blue-600" />
                      Personal Information
                    </h3>
                    <ul className="space-y-2 text-gray-600">
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-blue-500 mt-1 flex-shrink-0" />
                        <span>Name, phone number, or contact details entered in forms</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-blue-500 mt-1 flex-shrink-0" />
                        <span>Messages or requests sent through the app</span>
                      </li>
                    </ul>
                  </div>

                  <div className="rounded-xl bg-gray-50 p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                      <Database className="h-5 w-5 text-purple-600" />
                      Usage Data
                    </h3>
                    <ul className="space-y-2 text-gray-600">
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-purple-500 mt-1 flex-shrink-0" />
                        <span>Device type, OS version, and app usage activity</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-purple-500 mt-1 flex-shrink-0" />
                        <span>Error logs and diagnostic data</span>
                      </li>
                    </ul>
                  </div>

                  <div className="rounded-xl bg-gray-50 p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                      <Eye className="h-5 w-5 text-teal-600" />
                      Automation & AI Data
                    </h3>
                    <ul className="space-y-2 text-gray-600">
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-teal-500 mt-1 flex-shrink-0" />
                        <span>Inputs submitted to automation workflows</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-teal-500 mt-1 flex-shrink-0" />
                        <span>Messages processed through AI or chatbot integrations</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-teal-500 mt-1 flex-shrink-0" />
                        <span>Data routed to workflow engines such as n8n</span>
                      </li>
                    </ul>
                  </div>

                  <div className="rounded-xl bg-gray-50 p-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center gap-2">
                      <Globe className="h-5 w-5 text-orange-600" />
                      Third-Party Processing
                    </h3>
                    <p className="text-gray-600 mb-3">Some data may be processed by integrated services such as:</p>
                    <ul className="space-y-2 text-gray-600">
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-orange-500 mt-1 flex-shrink-0" />
                        <span>AI providers</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-orange-500 mt-1 flex-shrink-0" />
                        <span>Cloud workflow engines</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <ChevronRight className="h-4 w-4 text-orange-500 mt-1 flex-shrink-0" />
                        <span>Messaging or notification services</span>
                      </li>
                    </ul>
                    <p className="text-gray-500 text-sm mt-3 italic">
                      These providers process data only to perform the requested automation or response.
                    </p>
                  </div>
                </div>
              </section>

              {/* Section 2 */}
              <section id="how-we-use-information" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-purple-100 text-purple-600">
                    <span className="text-lg font-bold">2</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">How We Use Information</h2>
                </div>
                <p className="text-gray-700 mb-4 leading-relaxed">We use collected data to:</p>
                <ul className="space-y-3 text-gray-600">
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Operate the mobile application</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Execute automation workflows requested by the user</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Improve system performance and reliability</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Provide support and troubleshooting</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-purple-600" />
                    </div>
                    <span>Meet legal or compliance requirements</span>
                  </li>
                </ul>
                <div className="mt-6 rounded-xl bg-blue-50 border border-blue-100 p-4">
                  <p className="text-blue-800 font-medium text-sm">
                    We do not sell personal data to third parties.
                  </p>
                </div>
              </section>

              {/* Section 3 */}
              <section id="data-sharing" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-teal-100 text-teal-600">
                    <span className="text-lg font-bold">3</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Data Sharing</h2>
                </div>
                <p className="text-gray-700 mb-4 leading-relaxed">We may share limited data only when necessary:</p>
                <ul className="space-y-3 text-gray-600">
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-teal-600" />
                    </div>
                    <span>With automation infrastructure used to process requests</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-teal-600" />
                    </div>
                    <span>With AI providers for generating responses</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <ChevronRight className="h-3.5 w-3.5 text-teal-600" />
                    </div>
                    <span>With hosting or analytics services for system stability</span>
                  </li>
                </ul>
                <p className="text-gray-500 text-sm mt-4 italic">
                  All providers are required to handle data securely and only for intended functionality.
                </p>
              </section>

              {/* Section 4 */}
              <section id="data-security" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-green-100 text-green-600">
                    <span className="text-lg font-bold">4</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Data Security</h2>
                </div>
                <div className="rounded-xl bg-green-50 border border-green-100 p-6">
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                      <Lock className="h-5 w-5 text-green-600" />
                    </div>
                    <div>
                      <p className="text-gray-700 leading-relaxed">
                        We implement reasonable security measures to protect information from unauthorized access, loss,
                        or misuse. However, no digital service can guarantee absolute security.
                      </p>
                    </div>
                  </div>
                </div>
              </section>

              {/* Section 5 */}
              <section id="your-rights" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-orange-100 text-orange-600">
                    <span className="text-lg font-bold">5</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Your Rights</h2>
                </div>
                <p className="text-gray-700 mb-4 leading-relaxed">Users may request:</p>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="rounded-xl bg-gray-50 p-5 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-orange-100 flex items-center justify-center flex-shrink-0">
                      <Eye className="h-4 w-4 text-orange-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Access</h4>
                      <p className="text-gray-500 text-sm">Access to stored data</p>
                    </div>
                  </div>
                  <div className="rounded-xl bg-gray-50 p-5 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                      <RefreshCw className="h-4 w-4 text-blue-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Correction</h4>
                      <p className="text-gray-500 text-sm">Correction of inaccurate data</p>
                    </div>
                  </div>
                  <div className="rounded-xl bg-gray-50 p-5 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center flex-shrink-0">
                      <Shield className="h-4 w-4 text-red-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Deletion</h4>
                      <p className="text-gray-500 text-sm">Deletion of data</p>
                    </div>
                  </div>
                  <div className="rounded-xl bg-gray-50 p-5 flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
                      <UserCheck className="h-4 w-4 text-purple-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Withdrawal</h4>
                      <p className="text-gray-500 text-sm">Withdrawal of consent</p>
                    </div>
                  </div>
                </div>
                <div className="mt-6 rounded-xl bg-gray-50 p-4 flex items-center gap-3">
                  <Mail className="h-5 w-5 text-blue-600 flex-shrink-0" />
                  <p className="text-gray-700 text-sm">
                    Contact email: <a href="mailto:info@tekamul.link" className="text-blue-600 font-medium hover:underline">info@tekamul.link</a>
                  </p>
                </div>
              </section>

              {/* Section 6 */}
              <section id="external-services" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-indigo-100 text-indigo-600">
                    <span className="text-lg font-bold">6</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">External Services</h2>
                </div>
                <p className="text-gray-700 leading-relaxed">
                  The App may communicate with external APIs or automation servers to complete tasks requested by the
                  user. We are not responsible for the privacy practices of third-party platforms used through
                  integrations.
                </p>
              </section>

              {/* Section 7 */}
              <section id="policy-updates" className="mb-12">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-cyan-100 text-cyan-600">
                    <span className="text-lg font-bold">7</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Policy Updates</h2>
                </div>
                <p className="text-gray-700 leading-relaxed">
                  We may update this Privacy Policy periodically. The updated version will always be published with a
                  revised date.
                </p>
              </section>

              {/* Section 8 */}
              <section id="contact-information" className="mb-6">
                <div className="flex items-center gap-3 mb-6">
                  <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-rose-100 text-rose-600">
                    <span className="text-lg font-bold">8</span>
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Contact Information</h2>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <a
                    href="mailto:info@tekamul.link"
                    className="rounded-xl bg-gray-50 p-5 flex items-center gap-3 hover:bg-gray-100 transition-colors"
                  >
                    <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                      <Mail className="h-5 w-5 text-blue-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Email</h4>
                      <p className="text-blue-600 text-sm">info@tekamul.link</p>
                    </div>
                  </a>
                  <a
                    href="https://tekamul.link"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="rounded-xl bg-gray-50 p-5 flex items-center gap-3 hover:bg-gray-100 transition-colors"
                  >
                    <div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
                      <Globe className="h-5 w-5 text-purple-600" />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-sm">Website</h4>
                      <p className="text-blue-600 text-sm">https://tekamul.link</p>
                    </div>
                  </a>
                </div>
              </section>
            </div>

            {/* CTA Section */}
            <div className="mt-10 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-700 p-8 lg:p-12 text-center text-white">
              <h3 className="text-2xl lg:text-3xl font-bold mb-3">Have questions about your privacy?</h3>
              <p className="text-blue-100 mb-6 max-w-lg mx-auto leading-relaxed">
                We are committed to protecting your data. If you have any questions or concerns, feel free to reach out.
              </p>
              <Link href="/#contact">
                <Button size="lg" className="bg-white text-blue-700 hover:bg-blue-50 font-semibold px-8">
                  <MessageCircle className="h-5 w-5 mr-2" />
                  Contact Us
                </Button>
              </Link>
            </div>
          </main>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-300 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                <Cloud className="h-5 w-5 text-white" />
              </div>
              <span className="text-xl font-bold text-white">Tekamul</span>
            </Link>
            <div className="flex items-center gap-6 text-sm">
              <Link href="/" className="hover:text-white transition-colors">Home</Link>
              <Link href="/#services" className="hover:text-white transition-colors">Services</Link>
              <Link href="/#contact" className="hover:text-white transition-colors">Contact</Link>
              <Link href="/privacy" className="text-white font-medium">Privacy Policy</Link>
            </div>
            <div className="flex items-center gap-3">
              <a
                href="https://wa.me/9647707028327"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
              >
                <MessageCircle className="h-4 w-4" />
              </a>
              <a
                href="mailto:info@tekamul.link"
                className="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
              >
                <Mail className="h-4 w-4" />
              </a>
              <a
                href="https://tekamul.link"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
              >
                <Globe className="h-4 w-4" />
              </a>
            </div>
          </div>
          <div className="border-t border-gray-800 mt-8 pt-8 text-sm text-center text-gray-500">
            © {new Date().getFullYear()} Tekamul AI Automation. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscribe-form.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Check,
  CreditCard,
  Phone,
  Building2,
  User,
  MessageCircle,
  ArrowLeft,
  Smartphone,
  Globe,
  Settings,
  Send,
  Mail,
} from "lucide-react"

export default function SubscribeForm() {
  const [selectedPackage, setSelectedPackage] = useState<string | null>(null)
  const [showSubscriptionForm, setShowSubscriptionForm] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    projectDescription: "",
  })

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handlePackageSelect = (packageName: string) => {
    setSelectedPackage(packageName)
    setShowSubscriptionForm(true)
    // Scroll to form
    setTimeout(() => {
      const formElement = document.getElementById("subscription-form")
      if (formElement) {
        formElement.scrollIntoView({ behavior: "smooth" })
      }
    }, 100)
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedPackage) return

    // Construct WhatsApp message with form data
    const message = `
مرحباً، أرغب بالاشتراك في ${selectedPackage}
الاسم: ${formData.name}
البريد الإلكتروني: ${formData.email}
رقم الهاتف: ${formData.phone}
تفاصيل المشروع: ${formData.projectDescription}
    `
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message.trim())}`, "_blank")
  }

  const handleReceiptWhatsApp = () => {
    const message = "مرحبا، لقد قمت بتحويل مبلغ الاشتراك، هذا هو الإيصال."
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message)}`, "_blank")
  }

  const getPackageDetails = (packageName: string) => {
    switch (packageName) {
      case "تجربة مجانية":
        return {
          price: "مجاني",
          monthlyFee: "0 دينار",
          color: "blue",
          features: [
            "وصول كامل للميزات لمدة 15 يوم",
            "حتى 100 منتج في المتجر",
            "مساعد ذكي مُفعّل",
            "تحليلات أساسية",
            "دعم فني مجاني",
          ],
        }
      case "خطة المتجر الذكي الجاهزة":
        return {
          price: "$20",
          monthlyFee: "20 دولار",
          color: "purple",
          features: [
            "قوالب متجر جاهزة للاستخدام",
            "إعداد عيادة أو متجر",
            "مساعد ذكي مُعد مسبقاً",
            "دعم فني 24/7",
            "تحليلات متقدمة",
            "تكامل مع واتساب وإنستغرام",
          ],
        }
      case "مساعد ذكاء اصطناعي مخصص":
        return {
          price: "يبدأ من $35",
          monthlyFee: "35-50 دولار",
          color: "orange",
          features: [
            "تصميم سير عمل مخصص بالكامل",
            "منتجات غير محدودة",
            "تخصيص كامل للمساعد الذكي",
            "دعم ذو أولوية",
            "تكاملات متقدمة",
            "استشارة تقنية مستمرة",
          ],
        }
      default:
        return {
          price: "",
          monthlyFee: "",
          color: "gray",
          features: [],
        }
    }
  }

  return (
    <div dir="rtl" className="min-h-screen font-arabic bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-gray-900">InfraOps Solutions</h1>
          </div>
          <Button variant="outline" onClick={() => window.history.back()} className="flex items-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            العودة
          </Button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-gray-900">اشترك الآن</h1>
          <p className="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed mb-8">
            ابدأ بأتمتة متجرك وخدماتك عبر الذكاء الاصطناعي. جرّب مجاناً لمدة 15 يوم!
          </p>
          <div className="flex justify-center">
            <Badge className="bg-green-100 text-green-700 px-6 py-3 text-lg font-semibold">
              تجربة مجانية لمدة 15 يوم
            </Badge>
          </div>
        </div>
      </section>

      {/* Pricing Plans */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900">
              خطط المتجر الذكي ومساعد الذكاء الاصطناعي
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">اختر الخطة المناسبة لاحتياجات عملك</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Free Trial Plan */}
            <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader className="text-center pb-6">
                <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Smartphone className="h-10 w-10 text-blue-600" />
                </div>
                <CardTitle className="text-2xl mb-4">تجربة مجانية</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">مجاني</div>
                  <div className="text-sm text-gray-500 mb-3">لمدة 15 يوم</div>
                  <div className="text-xl font-semibold text-blue-600">وصول كامل للميزات</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">
                  مثالية لتجربة النظام قبل الاشتراك
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>وصول كامل للميزات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>حتى 100 منتج</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>مساعد ذكي مُفعّل</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تحليلات أساسية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني مجاني</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  className="w-full bg-blue-600 hover:bg-blue-700 py-4 text-lg"
                  onClick={() => handlePackageSelect("تجربة مجانية")}
                >
                  ابدأ التجربة المجانية
                </Button>
              </CardFooter>
            </Card>

            {/* Smart Store Ready Plan */}
            <Card className="border-0 shadow-2xl ring-4 ring-purple-500 relative transform scale-105">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                <Badge className="bg-purple-500 text-white px-6 py-2 text-lg">الأكثر شيوعاً</Badge>
              </div>
              <CardHeader className="text-center pb-6 pt-8">
                <div className="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Globe className="h-10 w-10 text-purple-600" />
                </div>
                <CardTitle className="text-2xl mb-4">خطة المتجر الذكي الجاهزة</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">$20</div>
                  <div className="text-sm text-gray-500 mb-3">شهرياً</div>
                  <div className="text-xl font-semibold text-purple-600">قوالب جاهزة للاستخدام</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">الأفضل للمتاجر والعيادات</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>قوالب متجر جاهزة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>إعداد عيادة أو متجر</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>مساعد ذكي مُعد مسبقاً</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم فني 24/7</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تحليلات متقدمة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تكامل مع واتساب وإنستغرام</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700 py-4 text-lg"
                  onClick={() => handlePackageSelect("خطة المتجر الذكي الجاهزة")}
                >
                  اختر هذه الخطة
                </Button>
              </CardFooter>
            </Card>

            {/* Custom AI Assistant Plan */}
            <Card className="border-0 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
              <CardHeader className="text-center pb-6">
                <div className="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Settings className="h-10 w-10 text-orange-600" />
                </div>
                <CardTitle className="text-2xl mb-4">مساعد ذكاء اصطناعي مخصص</CardTitle>
                <div className="text-center">
                  <div className="text-3xl font-bold text-gray-900 mb-2">$35-50</div>
                  <div className="text-sm text-gray-500 mb-3">شهرياً</div>
                  <div className="text-xl font-semibold text-orange-600">تخصيص كامل</div>
                </div>
                <CardDescription className="mt-6 text-center text-lg">للشركات التي تحتاج حلول مخصصة</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-4">
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تصميم سير عمل مخصص</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>منتجات غير محدودة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تخصيص كامل للمساعد</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>دعم ذو أولوية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>تكاملات متقدمة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-6 w-6 text-green-500 ml-3 flex-shrink-0" />
                    <span>استشارة تقنية مستمرة</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter className="pt-6">
                <Button
                  variant="outline"
                  className="w-full border-2 border-orange-500 text-orange-600 hover:bg-orange-50 py-4 text-lg bg-transparent"
                  onClick={() => handlePackageSelect("مساعد ذكاء اصطناعي مخصص")}
                >
                  تواصل معنا
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* Subscription Form */}
      {showSubscriptionForm && selectedPackage && (
        <section
          id="subscription-form"
          className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-gray-50 to-blue-50"
        >
          <div className="max-w-4xl mx-auto">
            <Card className="border-0 shadow-2xl bg-white">
              <CardHeader className="text-center bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-t-lg py-8">
                <div className="flex items-center justify-center mb-6">
                  <CardTitle className="text-3xl">تفاصيل الاشتراك - {selectedPackage}</CardTitle>
                </div>
                <CardDescription className="text-blue-100 text-lg">
                  يرجى إكمال النموذج أدناه للاشتراك في الباقة المختارة
                </CardDescription>
              </CardHeader>
              <CardContent className="p-8">
                {/* Package Details */}
                <div className="mb-8">
                  <h3 className="text-xl font-bold mb-4">تفاصيل الباقة المختارة</h3>
                  <div className="bg-blue-50 p-6 rounded-lg border border-blue-200">
                    <div className="flex justify-between items-center mb-4">
                      <div>
                        <span className="text-2xl font-bold">{getPackageDetails(selectedPackage).price}</span>
                        <span className="text-gray-500 mr-2">للتنفيذ لمرة واحدة</span>
                      </div>
                      <Badge className="bg-green-100 text-green-700 px-3 py-1">معاينة مجانية</Badge>
                    </div>
                    <div className="mb-4">
                      <span className="text-lg font-semibold text-blue-600">
                        + {getPackageDetails(selectedPackage).monthlyFee} دينار شهريًا
                      </span>
                      <span className="text-gray-500 mr-2">للدعم والاستضافة</span>
                    </div>
                    <div className="mt-4">
                      <h4 className="font-semibold mb-2">المميزات المتضمنة:</h4>
                      <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
                        {getPackageDetails(selectedPackage).features.map((feature, index) => (
                          <li key={index} className="flex items-center">
                            <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                            <span className="text-sm">{feature}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>

                {/* Subscription Form */}
                <div className="mb-8">
                  <h3 className="text-xl font-bold mb-4">نموذج الاشتراك</h3>
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">الاسم الكامل</Label>
                      <Input
                        id="name"
                        name="name"
                        placeholder="أدخل اسمك الكامل"
                        value={formData.name}
                        onChange={handleInputChange}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="email">البريد الإلكتروني</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        placeholder="example@domain.com"
                        value={formData.email}
                        onChange={handleInputChange}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="phone">رقم الهاتف</Label>
                      <Input
                        id="phone"
                        name="phone"
                        placeholder="أدخل رقم هاتفك"
                        value={formData.phone}
                        onChange={handleInputChange}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="projectDescription">وصف المشروع (اختياري)</Label>
                      <Textarea
                        id="projectDescription"
                        name="projectDescription"
                        placeholder="اكتب وصفاً مختصراً لمشروعك أو متطلباتك الخاصة"
                        value={formData.projectDescription}
                        onChange={handleInputChange}
                        rows={4}
                      />
                    </div>

                    <Button type="submit" className="w-full py-6 text-lg mt-6">
                      <Send className="ml-2" />
                      إرسال طلب الاشتراك
                    </Button>
                  </form>
                </div>

                {/* Payment Information */}
                <div>
                  <h3 className="text-xl font-bold mb-4">معلومات الدفع</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-4">
                      <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                        <User className="h-6 w-6 text-blue-600 ml-3" />
                        <div>
                          <div className="text-sm text-gray-600">اسم الحساب</div>
                          <div className="font-bold text-lg">غسان عبد الله</div>
                        </div>
                      </div>

                      <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                        <Building2 className="h-6 w-6 text-blue-600 ml-3" />
                        <div>
                          <div className="text-sm text-gray-600">المصرف</div>
                          <div className="font-bold text-lg">مصرف الرافدين</div>
                        </div>
                      </div>
                    </div>

                    <div className="space-y-4">
                      <div className="flex items-center p-4 bg-blue-50 rounded-lg border-2 border-blue-200">
                        <CreditCard className="h-6 w-6 text-blue-600 ml-3" />
                        <div>
                          <div className="text-sm text-gray-600">رقم الحساب</div>
                          <div className="font-bold text-2xl text-blue-600 tracking-wider">8534699650</div>
                        </div>
                      </div>

                      <div className="flex items-center p-4 bg-green-50 rounded-lg border-2 border-green-200">
                        <Phone className="h-6 w-6 text-green-600 ml-3" />
                        <div>
                          <div className="text-sm text-gray-600">واتساب للإيصال</div>
                          <div className="font-bold text-lg text-green-600">+9647707028327</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="p-4 border rounded-lg bg-blue-50">
                    <div className="font-bold mb-2 flex items-center">
                      <Mail className="ml-2 text-blue-600" />
                      <span>التواصل عبر الإيميل</span>
                    </div>
                    <p className="text-sm mb-2">
                      يمكنك أيضًا التواصل معنا عبر الإيميل لأي استفسارات أو لإرسال تفاصيل المشروع
                    </p>
                    <div className="flex items-center p-3 bg-white rounded-lg border border-blue-200">
                      <Mail className="h-5 w-5 text-blue-600 ml-2" />
                      <a href="mailto:ghassan@tekamul.link" className="font-bold text-blue-600 hover:underline">
                        ghassan@tekamul.link
                      </a>
                    </div>
                  </div>

                  <div className="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <div className="flex items-start">
                      <MessageCircle className="h-6 w-6 text-yellow-600 ml-3 mt-1 flex-shrink-0" />
                      <div>
                        <h4 className="font-semibold text-yellow-800 mb-2">خطوات مهمة بعد التحويل:</h4>
                        <ol className="list-decimal list-inside space-y-1 text-yellow-700 text-sm">
                          <li>التقط صورة واضحة لإيصال التحويل</li>
                          <li>أرسل الصورة عبر واتساب على الرقم أعلاه</li>
                          <li>اذكر اسم الباقة التي اخترتها</li>
                          <li>سنبدأ العمل خلال 24 ساعة من استلام الإيصال</li>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>
      )}

      {/* Call-to-Action */}
      <section className="py-20 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-green-500 to-green-600">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-3xl md:text-4xl font-bold text-white mb-8">هل قمت بالتحويل؟</h3>
          <p className="text-xl text-green-100 mb-12 max-w-2xl mx-auto">
            أرسل صورة الإيصال الآن وسنبدأ العمل على مشروعك فورًا
          </p>
          <Button
            size="lg"
            className="bg-white text-green-600 hover:bg-green-50 px-12 py-8 text-xl rounded-xl shadow-2xl transform hover:scale-105 transition-all duration-200"
            onClick={handleReceiptWhatsApp}
          >
            <MessageCircle className="h-8 w-8 ml-3" />
            أرسل صورة الإيصال الآن
          </Button>

          <div className="mt-10 text-center">
            <p className="text-green-100 text-lg mb-4">أو تواصل معنا للاستفسار:</p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
              <a
                href="https://wa.me/9647707028327"
                className="text-white font-bold hover:underline text-xl flex items-center"
                target="_blank"
                rel="noopener noreferrer"
              >
                <MessageCircle className="h-5 w-5 ml-2" />
                +9647707028327
              </a>
              <span className="text-green-200 hidden sm:inline">|</span>
              <a
                href="mailto:ghassan@tekamul.link"
                className="text-white font-bold hover:underline text-xl flex items-center"
              >
                <Mail className="h-5 w-5 ml-2" />
                ghassan@tekamul.link
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto text-center">
          <div className="mb-6">
            <h3 className="text-2xl font-bold mb-3">InfraOps Solutions</h3>
            <p className="text-gray-400">حلول تقنية متكاملة لنجاح مشروعك الرقمي</p>
          </div>
          <div className="border-t border-gray-700 pt-6">
            <p className="text-gray-400">© {new Date().getFullYear()} InfraOps Solutions. جميع الحقوق محفوظة.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscription-details.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Check, CreditCard, Download, MessageCircle, Send } from "lucide-react"

interface SubscriptionDetailsProps {
  packageName: string
  onClose: () => void
}

export default function SubscriptionDetails({ packageName, onClose }: SubscriptionDetailsProps) {
  const [activeTab, setActiveTab] = useState("details")
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    projectDescription: "",
  })

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Construct WhatsApp message with form data
    const message = `
مرحباً، أرغب بالاشتراك في ${packageName}
الاسم: ${formData.name}
البريد الإلكتروني: ${formData.email}
رقم الهاتف: ${formData.phone}
تفاصيل المشروع: ${formData.projectDescription}
    `
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message.trim())}`, "_blank")
    onClose()
  }

  const getPackageDetails = () => {
    switch (packageName) {
      case "الباقة الأساسية":
        return {
          price: "150,000",
          monthlyFee: "50,000",
          color: "blue",
          features: [
            "موقع بسيط أو تطبيق صفحة واحدة",
            "تصميم متجاوب مع الهواتف",
            "دعم فني أساسي",
            "استضافة شهر مجاني",
            "نطاق مجاني (.com)",
            "تعديلات مجانية خلال فترة التطوير",
            "معاينة مجانية قبل الدفع",
          ],
          description:
            "الباقة الأساسية مثالية للأفراد وأصحاب المشاريع الصغيرة الذين يحتاجون إلى تواجد رقمي بسيط وفعال. تشمل هذه الباقة كل ما تحتاجه لبدء مشروعك الرقمي بتكلفة معقولة.",
        }
      case "الباقة المتقدمة":
        return {
          price: "250,000",
          monthlyFee: "75,000",
          color: "purple",
          features: [
            "تطبيق متعدد الصفحات",
            "تصميم مخصص حسب الطلب",
            "لوحة تحكم إدارية",
            "دعم فني متقدم",
            "تحليلات وإحصائيات",
            "نسخ احتياطية أسبوعية",
            "تكامل مع وسائل التواصل الاجتماعي",
            "تحسين محركات البحث (SEO)",
            "معاينة مجانية قبل الدفع",
          ],
          description:
            "الباقة المتقدمة مثالية للشركات الصغيرة والمتوسطة التي تتطلع إلى تواجد رقمي احترافي مع ميزات متقدمة. تشمل هذه الباقة كل ما تحتاجه لتنمية عملك عبر الإنترنت.",
        }
      case "الباقة المخصصة":
        return {
          price: "يبدأ من 400,000",
          monthlyFee: "حسب المتطلبات",
          color: "orange",
          features: [
            "تطوير حسب الطلب",
            "ميزات إضافية متقدمة",
            "تكامل مع أنظمة خارجية",
            "دعم فني مخصص 24/7",
            "استشارة تقنية مستمرة",
            "أولوية في التطوير",
            "تطبيقات الهاتف المحمول",
            "أنظمة إدارة علاقات العملاء",
            "حلول تجارة إلكترونية متكاملة",
            "معاينة مجانية قبل الدفع",
          ],
          description:
            "الباقة المخصصة مصممة للشركات والمؤسسات التي لديها متطلبات خاصة وتحتاج إلى حلول مخصصة تمامًا. نعمل معك لفهم احتياجاتك وتطوير حل يناسب عملك بشكل مثالي.",
        }
      default:
        return {
          price: "",
          monthlyFee: "",
          color: "gray",
          features: [],
          description: "",
        }
    }
  }

  const packageDetails = getPackageDetails()
  const colorClass = `text-${packageDetails.color}-600`
  const bgColorClass = `bg-${packageDetails.color}-100`
  const borderColorClass = `border-${packageDetails.color}-200`

  return (
    <div className="space-y-6">
      <Tabs defaultValue="details" value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="details">تفاصيل الباقة</TabsTrigger>
          <TabsTrigger value="payment">طرق الدفع</TabsTrigger>
          <TabsTrigger value="form">نموذج الاشتراك</TabsTrigger>
        </TabsList>

        <TabsContent value="details" className="space-y-6 pt-4">
          <div className="flex justify-between items-start">
            <div>
              <h3 className="text-2xl font-bold">{packageName}</h3>
              <div className="mt-2">
                <span className="text-3xl font-bold">{packageDetails.price} دينار</span>
                <span className="text-gray-500 mr-2">للتنفيذ لمرة واحدة</span>
              </div>
              <div className="mt-1">
                <span className={`text-xl font-semibold ${colorClass}`}>+ {packageDetails.monthlyFee} دينار شهريًا</span>
                <span className="text-gray-500 mr-2">للدعم والاستضافة</span>
              </div>
            </div>
            <Badge className={`${bgColorClass} ${colorClass} px-4 py-2`}>معاينة مجانية</Badge>
          </div>

          <div className="mt-6">
            <p className="text-gray-700">{packageDetails.description}</p>
          </div>

          <Card className={`${bgColorClass} border ${borderColorClass}`}>
            <CardHeader>
              <CardTitle>المميزات المتضمنة</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {packageDetails.features.map((feature, index) => (
                  <li key={index} className="flex items-center">
                    <Check className={`h-5 w-5 ${colorClass} ml-2 flex-shrink-0`} />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>

          <div className="flex justify-between pt-4">
            <Button variant="outline" onClick={onClose}>
              العودة
            </Button>
            <Button onClick={() => setActiveTab("payment")}>متابعة للدفع</Button>
          </div>
        </TabsContent>

        <TabsContent value="payment" className="space-y-6 pt-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <CreditCard className="ml-2" />
                طرق الدفع المتاحة
              </CardTitle>
              <CardDescription>يمكنك الدفع بإحدى الطرق التالية</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="p-4 border rounded-lg">
                <div className="font-bold mb-2">التحويل البنكي</div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <div className="text-sm text-gray-600">اسم الحساب</div>
                    <div className="font-bold">غسان عبد الله</div>
                  </div>
                  <div>
                    <div className="text-sm text-gray-600">المصرف</div>
                    <div className="font-bold">مصرف الرافدين</div>
                  </div>
                  <div>
                    <div className="text-sm text-gray-600">رقم الحساب</div>
                    <div className="font-bold text-xl text-blue-600">8534699650</div>
                  </div>
                </div>
              </div>

              <div className="p-4 border rounded-lg bg-green-50">
                <div className="font-bold mb-2 flex items-center">
                  <MessageCircle className="ml-2 text-green-600" />
                  <span>الدفع عبر واتساب</span>
                </div>
                <p className="text-sm">
                  يمكنك التواصل معنا عبر واتساب لترتيب عملية الدفع والحصول على المساعدة في كل خطوة
                </p>
                <Button
                  variant="outline"
                  className="mt-4 border-green-500 text-green-600"
                  onClick={() => {
                    window.open(
                      `https://wa.me/9647707028327?text=مرحباً،%20أرغب%20بالاستفسار%20عن%20طرق%20الدفع%20للاشتراك%20في%20${packageName}`,
                      "_blank",
                    )
                  }}
                >
                  <MessageCircle className="ml-2" />
                  تواصل عبر واتساب
                </Button>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>خطوات الدفع</CardTitle>
            </CardHeader>
            <CardContent>
              <ol className="list-decimal list-inside space-y-3">
                <li>قم بتحويل المبلغ إلى الحساب المذكور أعلاه</li>
                <li>التقط صورة واضحة لإيصال التحويل</li>
                <li>أرسل الصورة عبر واتساب على الرقم +9647707028327</li>
                <li>اذكر اسم الباقة التي اخترتها ({packageName})</li>
                <li>سنبدأ العمل على مشروعك خلال 24 ساعة من استلام الإيصال</li>
              </ol>
            </CardContent>
          </Card>

          <div className="flex justify-between pt-4">
            <Button variant="outline" onClick={() => setActiveTab("details")}>
              العودة للتفاصيل
            </Button>
            <Button onClick={() => setActiveTab("form")}>متابعة لنموذج الاشتراك</Button>
          </div>
        </TabsContent>

        <TabsContent value="form" className="space-y-6 pt-4">
          <Card>
            <CardHeader>
              <CardTitle>نموذج الاشتراك</CardTitle>
              <CardDescription>يرجى تعبئة البيانات التالية للاشتراك في {packageName}</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="name">الاسم الكامل</Label>
                  <Input
                    id="name"
                    name="name"
                    placeholder="أدخل اسمك الكامل"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="email">البريد الإلكتروني</Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    placeholder="example@domain.com"
                    value={formData.email}
                    onChange={handleInputChange}
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="phone">رقم الهاتف</Label>
                  <Input
                    id="phone"
                    name="phone"
                    placeholder="أدخل رقم هاتفك"
                    value={formData.phone}
                    onChange={handleInputChange}
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="projectDescription">وصف المشروع (اختياري)</Label>
                  <Textarea
                    id="projectDescription"
                    name="projectDescription"
                    placeholder="اكتب وصفاً مختصراً لمشروعك أو متطلباتك الخاصة"
                    value={formData.projectDescription}
                    onChange={handleInputChange}
                    rows={4}
                  />
                </div>

                <div className="pt-4 flex justify-between">
                  <Button type="button" variant="outline" onClick={() => setActiveTab("payment")}>
                    العودة
                  </Button>
                  <Button
                    type="submit"
                    className={`bg-${packageDetails.color}-600 hover:bg-${packageDetails.color}-700`}
                  >
                    <Send className="ml-2" />
                    إرسال طلب الاشتراك
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>

          <Card className="bg-blue-50 border border-blue-200">
            <CardHeader>
              <CardTitle className="flex items-center">
                <Download className="ml-2 text-blue-600" />
                <span>تنزيل نموذج العقد</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p>يمكنك تنزيل نموذج العقد للاطلاع على كافة الشروط والأحكام قبل الاشتراك</p>
              <Button variant="outline" className="mt-4 border-blue-500 text-blue-600">
                <Download className="ml-2" />
                تنزيل نموذج العقد (PDF)
              </Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscription-page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Check,
  CreditCard,
  Phone,
  Building2,
  User,
  MessageCircle,
  ArrowLeft,
  Smartphone,
  Globe,
  Settings,
  Shield,
  RefreshCw,
  Clock,
  ThumbsUp,
  AlertCircle,
  Mail,
} from "lucide-react"

export default function SubscriptionPage() {
  const handleWhatsAppContact = () => {
    const message = "مرحبا، لقد قمت بتحويل مبلغ الاشتراك، هذا هو الإيصال."
    window.open(`https://wa.me/9647707028327?text=${encodeURIComponent(message)}`, "_blank")
  }

  return (
    <div dir="rtl" className="min-h-screen font-arabic bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200 px-4 md:px-8 lg:px-16 py-4">
        <div className="max-w-6xl mx-auto flex items-center justify-between">
          <div className="flex items-center">
            <h1 className="text-xl font-bold text-gray-900">InfraOps Solutions</h1>
          </div>
          <Button variant="outline" onClick={() => window.history.back()} className="flex items-center gap-2">
            <ArrowLeft className="h-4 w-4" />
            العودة
          </Button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="py-16 px-4 md:px-8 lg:px-16">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-gray-900">اشترك الآن</h1>
          <p className="text-lg md:text-xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
            ابدأ مشروعك الرقمي اليوم مع نسخة معاينة مجانية، ثم ادفع فقط عند النشر.
          </p>
          <div className="mt-8">
            <Badge className="bg-green-100 text-green-700 px-4 py-2 text-sm">✨ معاينة مجانية لجميع الباقات</Badge>
          </div>
        </div>
      </section>

      {/* Pricing Plans */}
      <section className="py-8 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">اختر الباقة المناسبة لك</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">جميع الباقات تشمل معاينة مجانية كاملة قبل الدفع</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Basic Plan */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow relative">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Smartphone className="h-8 w-8 text-blue-600" />
                </div>
                <CardTitle className="text-xl mb-2">الباقة الأساسية</CardTitle>
                <div className="text-center">
                  <div className="text-2xl font-bold text-gray-900 mb-1">150,000 دينار</div>
                  <div className="text-sm text-gray-500 mb-2">للتنفيذ لمرة واحدة</div>
                  <div className="text-lg font-semibold text-blue-600">+ 50,000 دينار شهريًا</div>
                  <div className="text-xs text-gray-500">للدعم والاستضافة</div>
                </div>
                <CardDescription className="mt-4 text-center">مثالية للمشاريع البسيطة والمواقع الشخصية</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">موقع بسيط أو تطبيق صفحة واحدة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تصميم متجاوب مع الهواتف</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">دعم فني أساسي</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">استضافة شهر مجاني</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">نطاق مجاني (.com)</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-blue-600 hover:bg-blue-700"
                  onClick={() =>
                    window.open("https://wa.me/9647707028327?text=أريد%20الاشتراك%20في%20الباقة%20الأساسية", "_blank")
                  }
                >
                  اختر هذه الباقة
                </Button>
              </CardFooter>
            </Card>

            {/* Advanced Plan */}
            <Card className="border-0 shadow-xl ring-2 ring-purple-500 relative">
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                <Badge className="bg-purple-500 text-white px-4 py-1">الأكثر شيوعًا</Badge>
              </div>
              <CardHeader className="text-center pb-4 pt-8">
                <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Globe className="h-8 w-8 text-purple-600" />
                </div>
                <CardTitle className="text-xl mb-2">الباقة المتقدمة</CardTitle>
                <div className="text-center">
                  <div className="text-2xl font-bold text-gray-900 mb-1">250,000 دينار</div>
                  <div className="text-sm text-gray-500 mb-2">للتنفيذ لمرة واحدة</div>
                  <div className="text-lg font-semibold text-purple-600">+ 75,000 دينار شهريًا</div>
                  <div className="text-xs text-gray-500">للدعم والاستضافة</div>
                </div>
                <CardDescription className="mt-4 text-center">الأفضل للشركات الصغيرة والمتوسطة</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تطبيق متعدد الصفحات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تصميم مخصص حسب الطلب</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">لوحة تحكم إدارية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">دعم فني متقدم</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تحليلات وإحصائيات</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">نسخ احتياطية أسبوعية</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className="w-full bg-purple-600 hover:bg-purple-700"
                  onClick={() =>
                    window.open("https://wa.me/9647707028327?text=أريد%20الاشتراك%20في%20الباقة%20المتقدمة", "_blank")
                  }
                >
                  اختر هذه الباقة
                </Button>
              </CardFooter>
            </Card>

            {/* Custom Plan */}
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow relative">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Settings className="h-8 w-8 text-orange-600" />
                </div>
                <CardTitle className="text-xl mb-2">باقة مخصصة</CardTitle>
                <div className="text-center">
                  <div className="text-2xl font-bold text-gray-900 mb-1">يبدأ من 400,000</div>
                  <div className="text-sm text-gray-500 mb-2">دينار للتنفيذ</div>
                  <div className="text-lg font-semibold text-orange-600">حسب المتطلبات</div>
                  <div className="text-xs text-gray-500">للدعم الشهري</div>
                </div>
                <CardDescription className="mt-4 text-center">للمشاريع الكبيرة والمتطلبات الخاصة</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3">
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تطوير حسب الطلب</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">ميزات إضافية متقدمة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">تكامل مع أنظمة خارجية</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">دعم فني مخصص 24/7</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">استشارة تقنية مستمرة</span>
                  </li>
                  <li className="flex items-center">
                    <Check className="h-5 w-5 text-green-500 ml-2 flex-shrink-0" />
                    <span className="text-sm">أولوية في التطوير</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  variant="outline"
                  className="w-full border-orange-500 text-orange-600 hover:bg-orange-50"
                  onClick={() =>
                    window.open("https://wa.me/9647707028327?text=أريد%20استشارة%20حول%20الباقة%20المخصصة", "_blank")
                  }
                >
                  طلب استشارة
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

      {/* Payment Instructions */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-gray-50 to-blue-50">
        <div className="max-w-4xl mx-auto">
          <Card className="border-0 shadow-lg bg-white">
            <CardHeader className="text-center bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-t-lg">
              <div className="flex items-center justify-center mb-4">
                <CreditCard className="h-8 w-8 ml-2" />
                <CardTitle className="text-2xl">معلومات الدفع البنكي</CardTitle>
              </div>
              <CardDescription className="text-blue-100">يرجى تحويل المبلغ على الحساب التالي:</CardDescription>
            </CardHeader>
            <CardContent className="p-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                    <User className="h-6 w-6 text-blue-600 ml-3" />
                    <div>
                      <div className="text-sm text-gray-600">اسم الحساب</div>
                      <div className="font-bold text-lg">غسان عبد الله</div>
                    </div>
                  </div>

                  <div className="flex items-center p-4 bg-gray-50 rounded-lg">
                    <Building2 className="h-6 w-6 text-blue-600 ml-3" />
                    <div>
                      <div className="text-sm text-gray-600">المصرف</div>
                      <div className="font-bold text-lg">مصرف الرافدين</div>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="flex items-center p-4 bg-blue-50 rounded-lg border-2 border-blue-200">
                    <CreditCard className="h-6 w-6 text-blue-600 ml-3" />
                    <div>
                      <div className="text-sm text-gray-600">رقم الحساب</div>
                      <div className="font-bold text-2xl text-blue-600 tracking-wider">8534699650</div>
                    </div>
                  </div>

                  <div className="flex items-center p-4 bg-green-50 rounded-lg border-2 border-green-200">
                    <Phone className="h-6 w-6 text-green-600 ml-3" />
                    <div>
                      <div className="text-sm text-gray-600">واتساب للإيصال</div>
                      <div className="font-bold text-lg text-green-600">+9647707028327</div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="p-4 border rounded-lg bg-blue-50">
                <div className="font-bold mb-2 flex items-center">
                  <Mail className="ml-2 text-blue-600" />
                  <span>التواصل عبر الإيميل</span>
                </div>
                <p className="text-sm mb-2">
                  يمكنك أيضًا التواصل معنا عبر الإيميل لأي استفسارات أو لإرسال تفاصيل المشروع
                </p>
                <div className="flex items-center p-3 bg-white rounded-lg border border-blue-200">
                  <Mail className="h-5 w-5 text-blue-600 ml-2" />
                  <a href="mailto:ghassan@tekamul.link" className="font-bold text-blue-600 hover:underline">
                    ghassan@tekamul.link
                  </a>
                </div>
              </div>

              <div className="mt-8 p-6 bg-yellow-50 border border-yellow-200 rounded-lg">
                <div className="flex items-start">
                  <MessageCircle className="h-6 w-6 text-yellow-600 ml-3 mt-1 flex-shrink-0" />
                  <div>
                    <h4 className="font-semibold text-yellow-800 mb-2">خطوات مهمة بعد التحويل:</h4>
                    <ol className="list-decimal list-inside space-y-1 text-yellow-700 text-sm">
                      <li>التقط صورة واضحة لإيصال التحويل</li>
                      <li>أرسل الصورة عبر واتساب على الرقم أعلاه</li>
                      <li>اذكر اسم الباقة التي اخترتها</li>
                      <li>سنبدأ العمل خلال 24 ساعة من استلام الإيصال</li>
                    </ol>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Guarantees and Refund Policy */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <div className="inline-block p-3 bg-blue-50 rounded-full mb-4">
              <Shield className="h-8 w-8 text-blue-600" />
            </div>
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-900">ضماناتنا وسياسة الاسترداد</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">نحن نؤمن بجودة خدماتنا ونقدم ضمانات واضحة لحماية حقوقك</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            {/* Guarantee Card 1 */}
            <Card className="border-0 shadow-md hover:shadow-lg transition-shadow">
              <CardHeader className="pb-4 border-b">
                <div className="flex items-center">
                  <ThumbsUp className="h-6 w-6 text-green-500 ml-3" />
                  <CardTitle className="text-lg">ضمان الرضا</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="pt-6">
                <p className="text-gray-700 mb-4">
                  نضمن لك الرضا التام عن الخدمة المقدمة. سنعمل معك على التعديلات المطلوبة حتى تكون راضيًا تمامًا عن
                  النتيجة النهائية.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">تعديلات غير محدودة خلال فترة التطوير</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">مراجعة شاملة للتصميم والوظائف قبل الإطلاق</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">دعم فني مستمر لضمان أداء مثالي</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

            {/* Guarantee Card 2 */}
            <Card className="border-0 shadow-md hover:shadow-lg transition-shadow">
              <CardHeader className="pb-4 border-b">
                <div className="flex items-center">
                  <Clock className="h-6 w-6 text-blue-500 ml-3" />
                  <CardTitle className="text-lg">ضمان الوقت</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="pt-6">
                <p className="text-gray-700 mb-4">
                  نلتزم بالجدول الزمني المتفق عليه لتسليم المشروع. في حال التأخير من جانبنا، ستحصل على خصم على الرسوم
                  الشهرية.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">جدول زمني واضح منذ البداية</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">تحديثات منتظمة عن سير العمل</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="h-5 w-5 text-green-500 ml-2 mt-0.5 flex-shrink-0" />
                    <span className="text-sm">تعويض في حال التأخير من جانبنا</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>

          {/* Refund Policy */}
          <Card className="border-0 shadow-lg bg-gradient-to-r from-blue-50 to-purple-50">
            <CardHeader className="pb-4 border-b">
              <div className="flex items-center justify-center">
                <RefreshCw className="h-6 w-6 text-purple-600 ml-3" />
                <CardTitle>سياسة الاسترداد</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="pt-6">
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="bg-white p-2 rounded-full shadow-sm mr-4">
                    <AlertCircle className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">المعاينة المجانية</h4>
                    <p className="text-sm text-gray-700">
                      تبدأ جميع مشاريعنا بمعاينة مجانية قبل الدفع. هذا يعني أنك لن تدفع أي مبلغ حتى ترى نموذجًا أوليًا
                      للمشروع وتوافق عليه.
                    </p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-white p-2 rounded-full shadow-sm mr-4">
                    <AlertCircle className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">قبل بدء التطوير</h4>
                    <p className="text-sm text-gray-700">
                      في حال قررت إلغاء المشروع بعد الدفع وقبل بدء التطوير، يمكنك استرداد 90% من المبلغ المدفوع.
                    </p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-white p-2 rounded-full shadow-sm mr-4">
                    <AlertCircle className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">خلال مرحلة التطوير</h4>
                    <p className="text-sm text-gray-700">
                      في حال إلغاء المشروع خلال مرحلة التطوير، يتم احتساب نسبة الاسترداد بناءً على مقدار العمل المنجز:
                    </p>
                    <ul className="list-disc list-inside mt-2 space-y-1 text-sm text-gray-700">
                      <li>إكمال 25% من المشروع: استرداد 75% من المبلغ</li>
                      <li>إكمال 50% من المشروع: استرداد 50% من المبلغ</li>
                      <li>إكمال 75% من المشروع: استرداد 25% من المبلغ</li>
                    </ul>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="bg-white p-2 rounded-full shadow-sm mr-4">
                    <AlertCircle className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-1">بعد اكتمال المشروع</h4>
                    <p className="text-sm text-gray-700">
                      بعد اكتمال المشروع وتسليمه، لا يمكن استرداد رسوم التطوير. أما بالنسبة للاشتراك الشهري، يمكنك
                      إلغاؤه في أي وقت دون رسوم إضافية.
                    </p>
                  </div>
                </div>
              </div>

              <div className="mt-8 p-4 bg-white rounded-lg border border-purple-200 shadow-sm">
                <p className="text-sm text-center text-gray-700">
                  لمزيد من المعلومات حول سياسة الاسترداد أو الضمانات، يرجى التواصل معنا على
                  <a href="https://wa.me/9647707028327" className="text-purple-600 font-semibold mx-1 hover:underline">
                    واتساب
                  </a>
                  وسنقوم بالرد على استفساراتك في أقرب وقت.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Call-to-Action */}
      <section className="py-16 px-4 md:px-8 lg:px-16 bg-gradient-to-r from-green-500 to-green-600">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-2xl md:text-3xl font-bold text-white mb-6">هل قمت بالتحويل؟</h3>
          <p className="text-lg text-green-100 mb-8 max-w-2xl mx-auto">
            أرسل صورة الإيصال الآن وسنبدأ العمل على مشروعك فورًا
          </p>
          <Button
            size="lg"
            className="bg-white text-green-600 hover:bg-green-50 px-8 py-6 text-lg rounded-lg shadow-lg transform hover:scale-105 transition-all duration-200"
            onClick={handleWhatsAppContact}
          >
            <MessageCircle className="h-6 w-6 ml-2" />
            أرسل صورة الإيصال الآن
          </Button>

          <div className="mt-10 text-center">
            <p className="text-green-100 text-lg mb-4">أو تواصل معنا للاستفسار:</p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
              <a
                href="https://wa.me/9647707028327"
                className="text-white font-bold hover:underline text-xl flex items-center"
                target="_blank"
                rel="noopener noreferrer"
              >
                <MessageCircle className="h-5 w-5 ml-2" />
                +9647707028327
              </a>
              <span className="text-green-200 hidden sm:inline">|</span>
              <a
                href="mailto:ghassan@tekamul.link"
                className="text-white font-bold hover:underline text-xl flex items-center"
              >
                <Mail className="h-5 w-5 ml-2" />
                ghassan@tekamul.link
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-8 px-4 md:px-8 lg:px-16">
        <div className="max-w-6xl mx-auto text-center">
          <div className="mb-4">
            <h3 className="text-lg font-semibold mb-2">InfraOps Solutions</h3>
            <p className="text-gray-400 text-sm">حلول تقنية متكاملة لنجاح مشروعك الرقمي</p>
          </div>
          <div className="border-t border-gray-700 pt-4">
            <p className="text-sm text-gray-400">
              © {new Date().getFullYear()} InfraOps Solutions. جميع الحقوق محفوظة.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'

interface ThemeProviderProps {
  children: React.ReactNode
  attribute?: string
  defaultTheme?: string
  forcedTheme?: string
  disableTransitionOnChange?: boolean
}

export function ThemeProvider({ children }: ThemeProviderProps) {
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
'use client'

import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDown } from 'lucide-react'

import { cn } from '@/lib/utils'

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn('border-b', className)}
    {...props}
  />
))
AccordionItem.displayName = 'AccordionItem'

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
        className,
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn('pb-4 pt-0', className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
'use client'

import * as React from 'react'
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'

import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-2 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
AlertDialogHeader.displayName = 'AlertDialogHeader'

const AlertDialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
AlertDialogFooter.displayName = 'AlertDialogFooter'

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn('text-lg font-semibold', className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: 'outline' }),
      'mt-2 sm:mt-0',
      className,
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const alertVariants = cva(
  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
  {
    variants: {
      variant: {
        default: 'bg-background text-foreground',
        destructive:
          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = 'Alert'

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
    {...props}
  />
))
AlertTitle.displayName = 'AlertTitle'

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('text-sm [&_p]:leading-relaxed', className)}
    {...props}
  />
))
AlertDescription.displayName = 'AlertDescription'

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx"
'use client'

import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
'use client'

import * as React from 'react'
import * as AvatarPrimitive from '@radix-ui/react-avatar'

import { cn } from '@/lib/utils'

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
      className,
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn('aspect-square h-full w-full', className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      'flex h-full w-full items-center justify-center rounded-full bg-muted',
      className,
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { ChevronRight, MoreHorizontal } from 'lucide-react'

import { cn } from '@/lib/utils'

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<'nav'> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = 'Breadcrumb'

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<'ol'>
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
      className,
    )}
    {...props}
  />
))
BreadcrumbList.displayName = 'BreadcrumbList'

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<'li'>
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn('inline-flex items-center gap-1.5', className)}
    {...props}
  />
))
BreadcrumbItem.displayName = 'BreadcrumbItem'

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<'a'> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : 'a'

  return (
    <Comp
      ref={ref}
      className={cn('transition-colors hover:text-foreground', className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = 'BreadcrumbLink'

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<'span'>
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn('font-normal text-foreground', className)}
    {...props}
  />
))
BreadcrumbPage.displayName = 'BreadcrumbPage'

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<'li'>) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<'span'>) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn('flex h-9 w-9 items-center justify-center', className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button-group.tsx"
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

const buttonGroupVariants = cva(
  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
  {
    variants: {
      orientation: {
        horizontal:
          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
        vertical:
          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  },
)

function ButtonGroup({
  className,
  orientation,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<'div'> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : 'div'

  return (
    <Comp
      className={cn(
        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
        className,
      )}
      {...props}
    />
  )
}

function ButtonGroupSeparator({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="button-group-separator"
      orientation={orientation}
      className={cn(
        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
        className,
      )}
      {...props}
    />
  )
}

export {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
  buttonGroupVariants,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
'use client'

import * as React from 'react'
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from 'lucide-react'
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = 'label',
  buttonVariant = 'ghost',
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>['variant']
}) {
  const defaultClassNames = getDefaultClassNames()

  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        'bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className,
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: (date) =>
          date.toLocaleString('default', { month: 'short' }),
        ...formatters,
      }}
      classNames={{
        root: cn('w-fit', defaultClassNames.root),
        months: cn(
          'flex gap-4 flex-col md:flex-row relative',
          defaultClassNames.months,
        ),
        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
        nav: cn(
          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
          defaultClassNames.nav,
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_previous,
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_next,
        ),
        month_caption: cn(
          'flex items-center justify-center h-[--cell-size] w-full px-[--cell-size]',
          defaultClassNames.month_caption,
        ),
        dropdowns: cn(
          'w-full flex items-center text-sm font-medium justify-center h-[--cell-size] gap-1.5',
          defaultClassNames.dropdowns,
        ),
        dropdown_root: cn(
          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
          defaultClassNames.dropdown_root,
        ),
        dropdown: cn(
          'absolute bg-popover inset-0 opacity-0',
          defaultClassNames.dropdown,
        ),
        caption_label: cn(
          'select-none font-medium',
          captionLayout === 'label'
            ? 'text-sm'
            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
          defaultClassNames.caption_label,
        ),
        table: 'w-full border-collapse',
        weekdays: cn('flex', defaultClassNames.weekdays),
        weekday: cn(
          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
          defaultClassNames.weekday,
        ),
        week: cn('flex w-full mt-2', defaultClassNames.week),
        week_number_header: cn(
          'select-none w-[--cell-size]',
          defaultClassNames.week_number_header,
        ),
        week_number: cn(
          'text-[0.8rem] select-none text-muted-foreground',
          defaultClassNames.week_number,
        ),
        day: cn(
          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
          defaultClassNames.day,
        ),
        range_start: cn(
          'rounded-l-md bg-accent',
          defaultClassNames.range_start,
        ),
        range_middle: cn('rounded-none', defaultClassNames.range_middle),
        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
        today: cn(
          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
          defaultClassNames.today,
        ),
        outside: cn(
          'text-muted-foreground aria-selected:text-muted-foreground',
          defaultClassNames.outside,
        ),
        disabled: cn(
          'text-muted-foreground opacity-50',
          defaultClassNames.disabled,
        ),
        hidden: cn('invisible', defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === 'left') {
            return (
              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
            )
          }

          if (orientation === 'right') {
            return (
              <ChevronRightIcon
                className={cn('size-4', className)}
                {...props}
              />
            )
          }

          return (
            <ChevronDownIcon className={cn('size-4', className)} {...props} />
          )
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-[--cell-size] items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

  const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

  return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
        defaultClassNames.day,
        className,
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx"
'use client'

import * as React from 'react'
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from 'embla-carousel-react'
import { ArrowLeft, ArrowRight } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: 'horizontal' | 'vertical'
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

  if (!context) {
    throw new Error('useCarousel must be used within a <Carousel />')
  }

  return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = 'horizontal',
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref,
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === 'horizontal' ? 'x' : 'y',
      },
      plugins,
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

    const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

      setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

    const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

    const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

    const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === 'ArrowLeft') {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === 'ArrowRight') {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext],
    )

    React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

      setApi(api)
    }, [api, setApi])

    React.useEffect(() => {
      if (!api) {
        return
      }

      onSelect(api)
      api.on('reInit', onSelect)
      api.on('select', onSelect)

      return () => {
        api?.off('select', onSelect)
      }
    }, [api, onSelect])

    return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn('relative', className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  },
)
Carousel.displayName = 'Carousel'

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

  return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          'flex',
          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
          className,
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = 'CarouselContent'

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

  return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        'min-w-0 shrink-0 grow-0 basis-full',
        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
        className,
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = 'CarouselItem'

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        'absolute  h-8 w-8 rounded-full',
        orientation === 'horizontal'
          ? '-left-12 top-1/2 -translate-y-1/2'
          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = 'CarouselPrevious'

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        'absolute h-8 w-8 rounded-full',
        orientation === 'horizontal'
          ? '-right-12 top-1/2 -translate-y-1/2'
          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
        className,
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = 'CarouselNext'

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
'use client'

import * as React from 'react'
import * as RechartsPrimitive from 'recharts'

import { cn } from '@/lib/utils'

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error('useChart must be used within a <ChartContainer />')
  }

  return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >['children']
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = 'Chart'

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color,
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join('\n')}
}
`,
          )
          .join('\n'),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<'div'> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: 'line' | 'dot' | 'dashed'
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = 'dot',
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref,
  ) => {
    const { config } = useChart()

    const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

      const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || 'value'}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === 'string'
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

      if (labelFormatter) {
        return (
          <div className={cn('font-medium', labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

      if (!value) {
        return null
      }

      return <div className={cn('font-medium', labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

    if (!active || !payload?.length) {
      return null
    }

    const nestLabel = payload.length === 1 && indicator !== 'dot'

    return (
      <div
        ref={ref}
        className={cn(
          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
          className,
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || 'value'}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
                  indicator === 'dot' && 'items-center',
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
                            {
                              'h-2.5 w-2.5': indicator === 'dot',
                              'w-1': indicator === 'line',
                              'w-0 border-[1.5px] border-dashed bg-transparent':
                                indicator === 'dashed',
                              'my-0.5': nestLabel && indicator === 'dashed',
                            },
                          )}
                          style={
                            {
                              '--color-bg': indicatorColor,
                              '--color-border': indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        'flex flex-1 justify-between leading-none',
                        nestLabel ? 'items-end' : 'items-center',
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  },
)
ChartTooltipContent.displayName = 'ChartTooltip'

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> &
    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
    ref,
  ) => {
    const { config } = useChart()

    if (!payload?.length) {
      return null
    }

    return (
      <div
        ref={ref}
        className={cn(
          'flex items-center justify-center gap-4',
          verticalAlign === 'top' ? 'pb-3' : 'pt-3',
          className,
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || 'value'}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className="flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  },
)
ChartLegendContent.displayName = 'ChartLegend'

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
) {
  if (typeof payload !== 'object' || payload === null) {
    return undefined
  }

  const payloadPayload =
    'payload' in payload &&
    typeof payload.payload === 'object' &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === 'string'
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { Check } from 'lucide-react'

import { cn } from '@/lib/utils'

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
'use client'

import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
'use client'

import * as React from 'react'
import { type DialogProps } from '@radix-ui/react-dialog'
import { Command as CommandPrimitive } from 'cmdk'
import { Search } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Dialog, DialogContent } from '@/components/ui/dialog'

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
      className,
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
      className,
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 h-px bg-border', className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className,
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = 'CommandShortcut'

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx"
'use client'

import * as React from 'react'
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
      inset && 'pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-sm font-semibold text-foreground',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-border', className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = 'ContextMenuShortcut'

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-1.5 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
DialogHeader.displayName = 'DialogHeader'

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
DialogFooter.displayName = 'DialogFooter'

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx"
'use client'

import * as React from 'react'
import { Drawer as DrawerPrimitive } from 'vaul'

import { cn } from '@/lib/utils'

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = 'Drawer'

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn('fixed inset-0 z-50 bg-black/80', className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
        className,
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = 'DrawerContent'

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
    {...props}
  />
)
DrawerHeader.displayName = 'DrawerHeader'

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
    {...props}
  />
)
DrawerFooter.displayName = 'DrawerFooter'

const DrawerTitle = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Title
    ref={ref}
    className={cn(
      'text-lg font-semibold leading-none tracking-tight',
      className,
    )}
    {...props}
  />
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName

const DrawerDescription = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
      inset && 'pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-sm font-semibold',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/empty.tsx"
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

function Empty({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty"
      className={cn(
        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
        className,
      )}
      {...props}
    />
  )
}

function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-header"
      className={cn(
        'flex max-w-sm flex-col items-center gap-2 text-center',
        className,
      )}
      {...props}
    />
  )
}

const emptyMediaVariants = cva(
  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function EmptyMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
  return (
    <div
      data-slot="empty-icon"
      data-variant={variant}
      className={cn(emptyMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-title"
      className={cn('text-lg font-medium tracking-tight', className)}
      {...props}
    />
  )
}

function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <div
      data-slot="empty-description"
      className={cn(
        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="empty-content"
      className={cn(
        'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
        className,
      )}
      {...props}
    />
  )
}

export {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
}
[V0_FILE]typescriptreact:file="components/ui/field.tsx"
'use client'

import { useMemo } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  return (
    <fieldset
      data-slot="field-set"
      className={cn(
        'flex flex-col gap-6',
        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
        className,
      )}
      {...props}
    />
  )
}

function FieldLegend({
  className,
  variant = 'legend',
  ...props
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
  return (
    <legend
      data-slot="field-legend"
      data-variant={variant}
      className={cn(
        'mb-3 font-medium',
        'data-[variant=legend]:text-base',
        'data-[variant=label]:text-sm',
        className,
      )}
      {...props}
    />
  )
}

function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-group"
      className={cn(
        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
        className,
      )}
      {...props}
    />
  )
}

const fieldVariants = cva(
  'group/field data-[invalid=true]:text-destructive flex w-full gap-3',
  {
    variants: {
      orientation: {
        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
        horizontal: [
          'flex-row items-center',
          '[&>[data-slot=field-label]]:flex-auto',
          'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start',
        ],
        responsive: [
          '@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto',
          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
        ],
      },
    },
    defaultVariants: {
      orientation: 'vertical',
    },
  },
)

function Field({
  className,
  orientation = 'vertical',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
  return (
    <div
      role="group"
      data-slot="field"
      data-orientation={orientation}
      className={cn(fieldVariants({ orientation }), className)}
      {...props}
    />
  )
}

function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-content"
      className={cn(
        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
        className,
      )}
      {...props}
    />
  )
}

function FieldLabel({
  className,
  ...props
}: React.ComponentProps<typeof Label>) {
  return (
    <Label
      data-slot="field-label"
      className={cn(
        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4',
        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
        className,
      )}
      {...props}
    />
  )
}

function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-label"
      className={cn(
        'flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="field-description"
      className={cn(
        'text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
        'nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function FieldSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<'div'> & {
  children?: React.ReactNode
}) {
  return (
    <div
      data-slot="field-separator"
      data-content={!!children}
      className={cn(
        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
        className,
      )}
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
      {children && (
        <span
          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
          data-slot="field-separator-content"
        >
          {children}
        </span>
      )}
    </div>
  )
}

function FieldError({
  className,
  children,
  errors,
  ...props
}: React.ComponentProps<'div'> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const content = useMemo(() => {
    if (children) {
      return children
    }

    if (!errors) {
      return null
    }

    if (errors.length === 1 && errors[0]?.message) {
      return errors[0].message
    }

    return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {errors.map(
          (error, index) =>
            error?.message && <li key={index}>{error.message}</li>,
        )}
      </ul>
    )
  }, [children, errors])

  if (!content) {
    return null
  }

  return (
    <div
      role="alert"
      data-slot="field-error"
      className={cn('text-destructive text-sm font-normal', className)}
      {...props}
    >
      {content}
    </div>
  )
}

export {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldContent,
  FieldTitle,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { Slot } from '@radix-ui/react-slot'
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from 'react-hook-form'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue,
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

  const fieldState = getFieldState(fieldContext.name, formState)

  if (!fieldContext) {
    throw new Error('useFormField should be used within <FormField>')
  }

  const { id } = itemContext

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue,
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

  return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn('space-y-2', className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = 'FormItem'

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

  return (
    <Label
      ref={ref}
      className={cn(error && 'text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = 'FormLabel'

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

  return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = 'FormControl'

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

  return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn('text-sm text-muted-foreground', className)}
      {...props}
    />
  )
})
FormDescription.displayName = 'FormDescription'

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

  if (!body) {
    return null
  }

  return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn('text-sm font-medium text-destructive', className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = 'FormMessage'

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx"
'use client'

import * as React from 'react'
import * as HoverCardPrimitive from '@radix-ui/react-hover-card'

import { cn } from '@/lib/utils'

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-group.tsx"
'use client'

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="input-group"
      role="group"
      className={cn(
        'group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]',
        'h-9 has-[>textarea]:h-auto',

        // Variants based on alignment.
        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',

        // Focus state.
        'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1',

        // Error state.
        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',

        className,
      )}
      {...props}
    />
  )
}

const inputGroupAddonVariants = cva(
  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
  {
    variants: {
      align: {
        'inline-start':
          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
        'inline-end':
          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
        'block-start':
          '[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5',
        'block-end':
          '[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5',
      },
    },
    defaultVariants: {
      align: 'inline-start',
    },
  },
)

function InputGroupAddon({
  className,
  align = 'inline-start',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
  return (
    <div
      role="group"
      data-slot="input-group-addon"
      data-align={align}
      className={cn(inputGroupAddonVariants({ align }), className)}
      onClick={(e) => {
        if ((e.target as HTMLElement).closest('button')) {
          return
        }
        e.currentTarget.parentElement?.querySelector('input')?.focus()
      }}
      {...props}
    />
  )
}

const inputGroupButtonVariants = cva(
  'flex items-center gap-2 text-sm shadow-none',
  {
    variants: {
      size: {
        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
        sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
        'icon-xs':
          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
      },
    },
    defaultVariants: {
      size: 'xs',
    },
  },
)

function InputGroupButton({
  className,
  type = 'button',
  variant = 'ghost',
  size = 'xs',
  ...props
}: Omit<React.ComponentProps<typeof Button>, 'size'> &
  VariantProps<typeof inputGroupButtonVariants>) {
  return (
    <Button
      type={type}
      data-size={size}
      variant={variant}
      className={cn(inputGroupButtonVariants({ size }), className)}
      {...props}
    />
  )
}

function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      className={cn(
        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
        className,
      )}
      {...props}
    />
  )
}

function InputGroupInput({
  className,
  ...props
}: React.ComponentProps<'input'>) {
  return (
    <Input
      data-slot="input-group-control"
      className={cn(
        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

function InputGroupTextarea({
  className,
  ...props
}: React.ComponentProps<'textarea'>) {
  return (
    <Textarea
      data-slot="input-group-control"
      className={cn(
        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
        className,
      )}
      {...props}
    />
  )
}

export {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupInput,
  InputGroupTextarea,
}
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx"
'use client'

import * as React from 'react'
import { OTPInput, OTPInputContext } from 'input-otp'
import { Dot } from 'lucide-react'

import { cn } from '@/lib/utils'

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      'flex items-center gap-2 has-[:disabled]:opacity-50',
      containerClassName,
    )}
    className={cn('disabled:cursor-not-allowed', className)}
    {...props}
  />
))
InputOTP.displayName = 'InputOTP'

const InputOTPGroup = React.forwardRef<
  React.ElementRef<'div'>,
  React.ComponentPropsWithoutRef<'div'>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn('flex items-center', className)} {...props} />
))
InputOTPGroup.displayName = 'InputOTPGroup'

const InputOTPSlot = React.forwardRef<
  React.ElementRef<'div'>,
  React.ComponentPropsWithoutRef<'div'> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

  return (
    <div
      ref={ref}
      className={cn(
        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
        isActive && 'z-10 ring-2 ring-ring ring-offset-background',
        className,
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = 'InputOTPSlot'

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<'div'>,
  React.ComponentPropsWithoutRef<'div'>
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = 'InputOTPSeparator'

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/item.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      role="list"
      data-slot="item-group"
      className={cn('group/item-group flex flex-col', className)}
      {...props}
    />
  )
}

function ItemSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="item-separator"
      orientation="horizontal"
      className={cn('my-0', className)}
      {...props}
    />
  )
}

const itemVariants = cva(
  'group/item [a&]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px] [a&]:transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border-border',
        muted: 'bg-muted/50',
      },
      size: {
        default: 'gap-4 p-4 ',
        sm: 'gap-2.5 px-4 py-3',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Item({
  className,
  variant = 'default',
  size = 'default',
  asChild = false,
  ...props
}: React.ComponentProps<'div'> &
  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'div'
  return (
    <Comp
      data-slot="item"
      data-variant={variant}
      data-size={size}
      className={cn(itemVariants({ variant, size, className }))}
      {...props}
    />
  )
}

const itemMediaVariants = cva(
  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
        image:
          'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function ItemMedia({
  className,
  variant = 'default',
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
  return (
    <div
      data-slot="item-media"
      data-variant={variant}
      className={cn(itemMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-content"
      className={cn(
        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
        className,
      )}
      {...props}
    />
  )
}

function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-title"
      className={cn(
        'flex w-fit items-center gap-2 text-sm font-medium leading-snug',
        className,
      )}
      {...props}
    />
  )
}

function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="item-description"
      className={cn(
        'text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal',
        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
        className,
      )}
      {...props}
    />
  )
}

function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-actions"
      className={cn('flex items-center gap-2', className)}
      {...props}
    />
  )
}

function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-header"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="item-footer"
      className={cn(
        'flex basis-full items-center justify-between gap-2',
        className,
      )}
      {...props}
    />
  )
}

export {
  Item,
  ItemMedia,
  ItemContent,
  ItemActions,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
  ItemDescription,
  ItemHeader,
  ItemFooter,
}
[V0_FILE]typescriptreact:file="components/ui/kbd.tsx"
import { cn } from '@/lib/utils'

function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium',
        "[&_svg:not([class*='size-'])]:size-3",
        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
        className,
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn('inline-flex items-center gap-1', className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx"
'use client'

import * as React from 'react'
import * as MenubarPrimitive from '@radix-ui/react-menubar'
import { Check, ChevronRight, Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      'flex h-10 items-center space-x-1 rounded-md border bg-background p-1',
      className,
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
      className,
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    className={cn(
      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
      inset && 'pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },
    ref,
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
          className,
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  ),
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.RadioItem
    ref={ref}
    className={cn(
      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    className={cn(
      'px-2 py-1.5 text-sm font-semibold',
      inset && 'pl-8',
      className,
    )}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        'ml-auto text-xs tracking-widest text-muted-foreground',
        className,
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = 'MenubarShortcut'

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from 'react'
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
import { cva } from 'class-variance-authority'
import { ChevronDown } from 'lucide-react'

import { cn } from '@/lib/utils'

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      'relative z-10 flex max-w-max flex-1 items-center justify-center',
      className,
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      'group flex flex-1 list-none items-center justify-center space-x-1',
      className,
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), 'group', className)}
    {...props}
  >
    {children}{' '}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',
      className,
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className="absolute left-0 top-full flex justify-center">
    <NavigationMenuPrimitive.Viewport
      className={cn(
        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
        className,
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
      className,
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from 'react'
import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'

import { cn } from '@/lib/utils'
import { ButtonProps, buttonVariants } from '@/components/ui/button'

const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn('mx-auto flex w-full justify-center', className)}
    {...props}
  />
)
Pagination.displayName = 'Pagination'

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn('flex flex-row items-center gap-1', className)}
    {...props}
  />
))
PaginationContent.displayName = 'PaginationContent'

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn('', className)} {...props} />
))
PaginationItem.displayName = 'PaginationItem'

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, 'size'> &
  React.ComponentProps<'a'>

const PaginationLink = ({
  className,
  isActive,
  size = 'icon',
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? 'page' : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? 'outline' : 'ghost',
        size,
      }),
      className,
    )}
    {...props}
  />
)
PaginationLink.displayName = 'PaginationLink'

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn('gap-1 pl-2.5', className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = 'PaginationPrevious'

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn('gap-1 pr-2.5', className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = 'PaginationNext'

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<'span'>) => (
  <span
    aria-hidden
    className={cn('flex h-9 w-9 items-center justify-center', className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = 'PaginationEllipsis'

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'

import { cn } from '@/lib/utils'

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
'use client'

import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'

import { cn } from '@/lib/utils'

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
      className,
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
'use client'

import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { Circle } from 'lucide-react'

import { cn } from '@/lib/utils'

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn('grid gap-2', className)}
      {...props}
      ref={ref}
    />
  )
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
'use client'

import { GripVertical } from 'lucide-react'
import * as ResizablePrimitive from 'react-resizable-panels'

import { cn } from '@/lib/utils'

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
      className,
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
      className,
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
'use client'

import * as React from 'react'
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'

import { cn } from '@/lib/utils'

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn('relative overflow-hidden', className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = 'vertical', ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      'flex touch-none select-none transition-colors',
      orientation === 'vertical' &&
        'h-full w-2.5 border-l border-l-transparent p-[1px]',
      orientation === 'horizontal' &&
        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { Check, ChevronDown, ChevronUp } from 'lucide-react'

import { cn } from '@/lib/utils'

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      'flex cursor-default items-center justify-center py-1',
      className,
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      'flex cursor-default items-center justify-center py-1',
      className,
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        position === 'popper' &&
          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          'p-1',
          position === 'popper' &&
            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn('-mx-1 my-1 h-px bg-muted', className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
'use client'

import * as React from 'react'
import * as SeparatorPrimitive from '@radix-ui/react-separator'

import { cn } from '@/lib/utils'

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = 'horizontal', decorative = true, ...props },
    ref,
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'shrink-0 bg-border',
        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
        className,
      )}
      {...props}
    />
  ),
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
      className,
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
  {
    variants: {
      side: {
        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
        bottom:
          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
        right:
          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
      },
    },
    defaultVariants: {
      side: 'right',
    },
  },
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = 'right', className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col space-y-2 text-center sm:text-left',
      className,
    )}
    {...props}
  />
)
SheetHeader.displayName = 'SheetHeader'

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
      className,
    )}
    {...props}
  />
)
SheetFooter.displayName = 'SheetFooter'

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn('text-lg font-semibold text-foreground', className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx"
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { VariantProps, cva } from 'class-variance-authority'
import { PanelLeft } from 'lucide-react'

import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { Sheet, SheetContent } from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'

const SIDEBAR_COOKIE_NAME = 'sidebar:state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContext = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

  return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref,
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

    // This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === 'function' ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

        // This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open],
    )

    // Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

    // Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

      window.addEventListener('keydown', handleKeyDown)
      return () => window.removeEventListener('keydown', handleKeyDown)
    }, [toggleSidebar])

    // We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? 'expanded' : 'collapsed'

    const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      ],
    )

    return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                '--sidebar-width': SIDEBAR_WIDTH,
                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
              className,
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  },
)
SidebarProvider.displayName = 'SidebarProvider'

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    side?: 'left' | 'right'
    variant?: 'sidebar' | 'floating' | 'inset'
    collapsible?: 'offcanvas' | 'icon' | 'none'
  }
>(
  (
    {
      side = 'left',
      variant = 'sidebar',
      collapsible = 'offcanvas',
      className,
      children,
      ...props
    },
    ref,
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

    if (collapsible === 'none') {
      return (
        <div
          className={cn(
            'flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
            className,
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

    if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

    return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === 'collapsed' ? collapsible : ''}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
            'group-data-[collapsible=offcanvas]:w-0',
            'group-data-[side=right]:rotate-180',
            variant === 'floating' || variant === 'inset'
              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
          )}
        />
        <div
          className={cn(
            'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
            side === 'left'
              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
            // Adjust the padding for floating and inset variants.
            variant === 'floating' || variant === 'inset'
              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
            className,
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  },
)
Sidebar.displayName = 'Sidebar'

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

  return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn('h-7 w-7', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = 'SidebarTrigger'

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'>
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

  return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        className,
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = 'SidebarRail'

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'main'>
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        'relative flex min-h-svh flex-1 flex-col bg-background',
        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
        className,
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = 'SidebarInset'

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
        className,
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = 'SidebarInput'

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = 'SidebarHeader'

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = 'SidebarFooter'

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn('mx-2 w-auto bg-sidebar-border', className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = 'SidebarSeparator'

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = 'SidebarContent'

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = 'SidebarGroup'

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'div'

  return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        className,
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = 'SidebarGroupLabel'

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 after:md:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = 'SidebarGroupAction'

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn('w-full text-sm', className)}
    {...props}
  />
))
SidebarGroupContent.displayName = 'SidebarGroupContent'

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
    {...props}
  />
))
SidebarMenu.displayName = 'SidebarMenu'

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn('group/menu-item relative', className)}
    {...props}
  />
))
SidebarMenuItem.displayName = 'SidebarMenuItem'

const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
      },
      size: {
        default: 'h-8 text-sm',
        sm: 'h-7 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = 'default',
      size = 'default',
      tooltip,
      className,
      ...props
    },
    ref,
  ) => {
    const Comp = asChild ? Slot : 'button'
    const { isMobile, state } = useSidebar()

    const button = (
      <Comp
        ref={ref}
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

    if (!tooltip) {
      return button
    }

    if (typeof tooltip === 'string') {
      tooltip = {
        children: tooltip,
      }
    }

    return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent
          side="right"
          align="center"
          hidden={state !== 'collapsed' || isMobile}
          {...tooltip}
        />
      </Tooltip>
    )
  },
)
SidebarMenuButton.displayName = 'SidebarMenuButton'

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
        // Increases the hit area of the button on mobile.
        'after:absolute after:-inset-2 after:md:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
        className,
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = 'SidebarMenuAction'

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
      'peer-data-[size=sm]/menu-button:top-1',
      'peer-data-[size=default]/menu-button:top-1.5',
      'peer-data-[size=lg]/menu-button:top-2.5',
      'group-data-[collapsible=icon]:hidden',
      className,
    )}
    {...props}
  />
))
SidebarMenuBadge.displayName = 'SidebarMenuBadge'

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

  return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn('rounded-md h-8 flex gap-2 px-2 items-center', className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            '--skeleton-width': width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
      'group-data-[collapsible=icon]:hidden',
      className,
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = 'SidebarMenuSub'

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<'li'>
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<'a'> & {
    asChild?: boolean
    size?: 'sm' | 'md'
    isActive?: boolean
  }
>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : 'a'

  return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from '@/lib/utils'

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn('animate-pulse rounded-md bg-muted', className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'

import { cn } from '@/lib/utils'

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      'relative flex w-full touch-none select-none items-center',
      className,
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
'use client'

import { useTheme } from 'next-themes'
import { Toaster as Sonner } from 'sonner'

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
          description: 'group-[.toast]:text-muted-foreground',
          actionButton:
            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
          cancelButton:
            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/spinner.tsx"
import { Loader2Icon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn('size-4 animate-spin', className)}
      {...props}
    />
  )
}

export { Spinner }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
'use client'

import * as React from 'react'
import * as SwitchPrimitives from '@radix-ui/react-switch'

import { cn } from '@/lib/utils'

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn('w-full caption-bottom text-sm', className)}
      {...props}
    />
  </div>
))
Table.displayName = 'Table'

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
))
TableHeader.displayName = 'TableHeader'

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn('[&_tr:last-child]:border-0', className)}
    {...props}
  />
))
TableBody.displayName = 'TableBody'

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
      className,
    )}
    {...props}
  />
))
TableFooter.displayName = 'TableFooter'

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
      className,
    )}
    {...props}
  />
))
TableRow.displayName = 'TableRow'

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
      className,
    )}
    {...props}
  />
))
TableHead.displayName = 'TableHead'

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
    {...props}
  />
))
TableCell.displayName = 'TableCell'

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn('mt-4 text-sm text-muted-foreground', className)}
    {...props}
  />
))
TableCaption.displayName = 'TableCaption'

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
'use client'

import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn('text-sm font-semibold', className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn('text-sm opacity-90', className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
'use client'

import { useToast } from '@/hooks/use-toast'
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from '@/components/ui/toast'

export function Toaster() {
  const { toasts } = useToast()

  return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx"
'use client'

import * as React from 'react'
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
import { type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { toggleVariants } from '@/components/ui/toggle'

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: 'default',
  variant: 'default',
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn('flex items-center justify-center gap-1', className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

  return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className,
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
'use client'

import * as React from 'react'
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const toggleVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline:
          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-10 px-3 min-w-10',
        sm: 'h-9 px-2.5 min-w-9',
        lg: 'h-11 px-5 min-w-11',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'

import { cn } from '@/lib/utils'

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

  return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

  toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

    case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

    case 'DISMISS_TOAST': {
      const { toastId } = action

      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

  const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

  dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

  return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

  React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="hooks/use-mobile.ts"
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener('change', onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener('change', onChange)
  }, [])

  return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

  toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

    case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

    case 'DISMISS_TOAST': {
      const { toastId } = action

      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

  const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

  dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

  return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

  React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="page-editor.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Trash2, Eye, Code, Type, ImageIcon, Square, MousePointer, Layout, Settings, Download } from "lucide-react"

interface Element {
  id: string
  type: "text" | "heading" | "button" | "image" | "container" | "card" | "navbar" | "hero" | "footer"
  content: string
  styles: {
    backgroundColor?: string
    color?: string
    fontSize?: string
    padding?: string
    margin?: string
    borderRadius?: string
    textAlign?: "left" | "center" | "right"
    fontWeight?: string
    width?: string
    height?: string
    display?: string
    flexDirection?: string
    justifyContent?: string
    alignItems?: string
  }
  children?: Element[]
}

export default function PageEditor() {
  const [elements, setElements] = useState<Element[]>([])
  const [selectedElement, setSelectedElement] = useState<Element | null>(null)
  const [mode, setMode] = useState<"design" | "preview">("design")
  const [isLoading, setIsLoading] = useState(false)
  const [pageUrl, setPageUrl] = useState("https://v0-tekamul-link.vercel.app/ar/")

  // تحميل الصفحة الافتراضية عند بدء التشغيل
  useEffect(() => {
    loadTekamulPage()
  }, [])

  // تحميل صفحة تكامل
  const loadTekamulPage = () => {
    setIsLoading(true)

    // إنشاء عناصر الصفحة
    const tekamulElements: Element[] = [
      {
        id: "navbar-1",
        type: "navbar",
        content: "InfraOps Solutions",
        styles: {
          backgroundColor: "#ffffff",
          padding: "16px",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          width: "100%",
        },
        children: [
          {
            id: "nav-links",
            type: "container",
            content: "",
            styles: {
              display: "flex",
              gap: "16px",
            },
            children: [
              {
                id: "nav-link-1",
                type: "button",
                content: "nav.home",
                styles: {
                  color: "#333",
                  backgroundColor: "transparent",
                  padding: "8px",
                },
              },
              {
                id: "nav-link-2",
                type: "button",
                content: "nav.services",
                styles: {
                  color: "#333",
                  backgroundColor: "transparent",
                  padding: "8px",
                },
              },
              {
                id: "nav-link-3",
                type: "button",
                content: "nav.contact",
                styles: {
                  color: "#333",
                  backgroundColor: "transparent",
                  padding: "8px",
                },
              },
            ],
          },
          {
            id: "logo",
            type: "heading",
            content: "InfraOps Solutions",
            styles: {
              fontSize: "1.25rem",
              fontWeight: "bold",
              color: "#000",
            },
          },
        ],
      },
      {
        id: "hero-1",
        type: "hero",
        content: "",
        styles: {
          backgroundColor: "#2563eb",
          color: "white",
          padding: "64px 16px",
          textAlign: "center",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
        },
        children: [
          {
            id: "hero-title",
            type: "heading",
            content: "نحن نبني وندير بنيتك التحتية على السحابة أو في موقعك",
            styles: {
              fontSize: "2rem",
              fontWeight: "bold",
              margin: "0 0 24px 0",
              color: "white",
              textAlign: "center",
            },
          },
          {
            id: "hero-button",
            type: "button",
            content: "احجز استشارة مجانية",
            styles: {
              backgroundColor: "white",
              color: "#2563eb",
              padding: "12px 24px",
              borderRadius: "8px",
              fontWeight: "bold",
              margin: "16px 0 0 0",
            },
          },
        ],
      },
      {
        id: "services-section",
        type: "container",
        content: "",
        styles: {
          padding: "64px 16px",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          width: "100%",
        },
        children: [
          {
            id: "services-title",
            type: "heading",
            content: "خدماتنا",
            styles: {
              fontSize: "1.75rem",
              fontWeight: "bold",
              margin: "0 0 48px 0",
              textAlign: "center",
            },
          },
          {
            id: "services-grid",
            type: "container",
            content: "",
            styles: {
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              flexWrap: "wrap",
              gap: "24px",
              width: "100%",
              maxWidth: "1200px",
            },
            children: [
              {
                id: "service-card-1",
                type: "card",
                content: "",
                styles: {
                  backgroundColor: "white",
                  borderRadius: "8px",
                  padding: "24px",
                  width: "280px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                },
                children: [
                  {
                    id: "service-icon-1",
                    type: "image",
                    content: "/placeholder.svg?height=64&width=64",
                    styles: {
                      width: "64px",
                      height: "64px",
                      margin: "0 0 16px 0",
                      backgroundColor: "#e6f0ff",
                      padding: "12px",
                      borderRadius: "50%",
                    },
                  },
                  {
                    id: "service-title-1",
                    type: "heading",
                    content: "مزودي الخدمات السحابية",
                    styles: {
                      fontSize: "1.25rem",
                      fontWeight: "bold",
                      margin: "0 0 8px 0",
                    },
                  },
                  {
                    id: "service-desc-1",
                    type: "text",
                    content: "نشر البنية التحتية الخاصة بك على AWS و Azure",
                    styles: {
                      fontSize: "0.875rem",
                      color: "#666",
                    },
                  },
                ],
              },
              {
                id: "service-card-2",
                type: "card",
                content: "",
                styles: {
                  backgroundColor: "white",
                  borderRadius: "8px",
                  padding: "24px",
                  width: "280px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                },
                children: [
                  {
                    id: "service-icon-2",
                    type: "image",
                    content: "/placeholder.svg?height=64&width=64",
                    styles: {
                      width: "64px",
                      height: "64px",
                      margin: "0 0 16px 0",
                      backgroundColor: "#e6f0ff",
                      padding: "12px",
                      borderRadius: "50%",
                    },
                  },
                  {
                    id: "service-title-2",
                    type: "heading",
                    content: "المراقبة",
                    styles: {
                      fontSize: "1.25rem",
                      fontWeight: "bold",
                      margin: "0 0 8px 0",
                    },
                  },
                  {
                    id: "service-desc-2",
                    type: "text",
                    content: "نشر البنية التحتية الخاصة بك مع Prometheus و Grafana",
                    styles: {
                      fontSize: "0.875rem",
                      color: "#666",
                    },
                  },
                ],
              },
              {
                id: "service-card-3",
                type: "card",
                content: "",
                styles: {
                  backgroundColor: "white",
                  borderRadius: "8px",
                  padding: "24px",
                  width: "280px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                },
                children: [
                  {
                    id: "service-icon-3",
                    type: "image",
                    content: "/placeholder.svg?height=64&width=64",
                    styles: {
                      width: "64px",
                      height: "64px",
                      margin: "0 0 16px 0",
                      backgroundColor: "#e6f0ff",
                      padding: "12px",
                      borderRadius: "50%",
                    },
                  },
                  {
                    id: "service-title-3",
                    type: "heading",
                    content: "خطوط أنابيب CI/CD",
                    styles: {
                      fontSize: "1.25rem",
                      fontWeight: "bold",
                      margin: "0 0 8px 0",
                    },
                  },
                  {
                    id: "service-desc-3",
                    type: "text",
                    content: "تبسيط سير عمل التطوير الخاص بك مع GitHub Actions و GitLab CI",
                    styles: {
                      fontSize: "0.875rem",
                      color: "#666",
                    },
                  },
                ],
              },
              {
                id: "service-card-4",
                type: "card",
                content: "",
                styles: {
                  backgroundColor: "white",
                  borderRadius: "8px",
                  padding: "24px",
                  width: "280px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  textAlign: "center",
                },
                children: [
                  {
                    id: "service-icon-4",
                    type: "image",
                    content: "/placeholder.svg?height=64&width=64",
                    styles: {
                      width: "64px",
                      height: "64px",
                      margin: "0 0 16px 0",
                      backgroundColor: "#e6f0ff",
                      padding: "12px",
                      borderRadius: "50%",
                    },
                  },
                  {
                    id: "service-title-4",
                    type: "heading",
                    content: "البنية التحتية كرمز",
                    styles: {
                      fontSize: "1.25rem",
                      fontWeight: "bold",
                      margin: "0 0 8px 0",
                    },
                  },
                  {
                    id: "service-desc-4",
                    type: "text",
                    content: "أتمتة نشر البنية التحتية الخاصة بك باستخدام Terraform و Ansible",
                    styles: {
                      fontSize: "0.875rem",
                      color: "#666",
                    },
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        id: "footer-1",
        type: "footer",
        content: "",
        styles: {
          backgroundColor: "#f8fafc",
          padding: "24px",
          textAlign: "center",
          width: "100%",
        },
        children: [
          {
            id: "footer-text",
            type: "text",
            content: "© 2024 إنفراأوبس سوليوشنز. جميع الحقوق محفوظة.",
            styles: {
              fontSize: "0.875rem",
              color: "#666",
            },
          },
        ],
      },
    ]

    setElements(tekamulElements)
    setIsLoading(false)
  }

  const addElement = (type: Element["type"]) => {
    const newElement: Element = {
      id: Date.now().toString(),
      type,
      content: getDefaultContent(type),
      styles: getDefaultStyles(type),
    }
    setElements([...elements, newElement])
  }

  const getDefaultContent = (type: Element["type"]): string => {
    switch (type) {
      case "heading":
        return "عنوان جديد"
      case "text":
        return "نص جديد"
      case "button":
        return "زر جديد"
      case "image":
        return "/placeholder.svg?height=200&width=300"
      case "container":
        return ""
      case "card":
        return ""
      case "navbar":
        return ""
      case "hero":
        return ""
      case "footer":
        return ""
      default:
        return ""
    }
  }

  const getDefaultStyles = (type: Element["type"]) => {
    switch (type) {
      case "heading":
        return {
          fontSize: "1.5rem",
          fontWeight: "bold",
          color: "#1f2937",
          margin: "16px 0",
        }
      case "text":
        return {
          fontSize: "1rem",
          color: "#374151",
          margin: "8px 0",
        }
      case "button":
        return {
          backgroundColor: "#3b82f6",
          color: "white",
          padding: "8px 16px",
          borderRadius: "6px",
          fontSize: "0.875rem",
          margin: "8px 0",
          width: "fit-content",
        }
      case "image":
        return {
          width: "300px",
          height: "200px",
          margin: "8px 0",
        }
      case "container":
        return {
          padding: "16px",
          margin: "8px 0",
          backgroundColor: "#f9fafb",
          borderRadius: "8px",
          display: "flex",
          flexDirection: "column",
        }
      case "card":
        return {
          padding: "16px",
          margin: "8px",
          backgroundColor: "white",
          borderRadius: "8px",
          boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
          display: "flex",
          flexDirection: "column",
        }
      case "navbar":
        return {
          padding: "16px",
          backgroundColor: "white",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          width: "100%",
        }
      case "hero":
        return {
          padding: "64px 16px",
          backgroundColor: "#3b82f6",
          color: "white",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
        }
      case "footer":
        return {
          padding: "24px",
          backgroundColor: "#f8fafc",
          textAlign: "center",
          width: "100%",
        }
      default:
        return {}
    }
  }

  const updateElement = (id: string, updates: Partial<Element>) => {
    const updateElementRecursive = (elements: Element[]): Element[] => {
      return elements.map((el) => {
        if (el.id === id) {
          return { ...el, ...updates }
        }
        if (el.children) {
          return {
            ...el,
            children: updateElementRecursive(el.children),
          }
        }
        return el
      })
    }

    const updatedElements = updateElementRecursive(elements)
    setElements(updatedElements)

    if (selectedElement?.id === id) {
      setSelectedElement({ ...selectedElement, ...updates })
    }
  }

  const deleteElement = (id: string) => {
    const deleteElementRecursive = (elements: Element[]): Element[] => {
      return elements
        .filter((el) => el.id !== id)
        .map((el) => {
          if (el.children) {
            return {
              ...el,
              children: deleteElementRecursive(el.children),
            }
          }
          return el
        })
    }

    const updatedElements = deleteElementRecursive(elements)
    setElements(updatedElements)

    if (selectedElement?.id === id) {
      setSelectedElement(null)
    }
  }

  const renderElement = (element: Element, isSelected = false): React.ReactNode => {
    const commonProps = {
      className: `${mode === "design" ? "cursor-pointer hover:outline hover:outline-2 hover:outline-blue-400" : ""} ${isSelected ? "outline outline-2 outline-blue-500" : ""}`,
      style: element.styles,
      onClick:
        mode === "design"
          ? (e: React.MouseEvent) => {
              e.stopPropagation()
              setSelectedElement(element)
            }
          : undefined,
    }

    const renderChildren = () => {
      return element.children?.map((child) => renderElement(child, selectedElement?.id === child.id))
    }

    switch (element.type) {
      case "heading":
        return (
          <h2 key={element.id} {...commonProps}>
            {element.content}
          </h2>
        )
      case "text":
        return (
          <p key={element.id} {...commonProps}>
            {element.content}
          </p>
        )
      case "button":
        return (
          <button key={element.id} {...commonProps}>
            {element.content}
          </button>
        )
      case "image":
        return <img key={element.id} {...commonProps} src={element.content || "/placeholder.svg"} alt="صورة" />
      case "container":
        return (
          <div key={element.id} {...commonProps}>
            {renderChildren()}
          </div>
        )
      case "card":
        return (
          <div key={element.id} {...commonProps}>
            {renderChildren()}
          </div>
        )
      case "navbar":
        return (
          <nav key={element.id} {...commonProps}>
            {renderChildren()}
          </nav>
        )
      case "hero":
        return (
          <section key={element.id} {...commonProps}>
            {renderChildren()}
          </section>
        )
      case "footer":
        return (
          <footer key={element.id} {...commonProps}>
            {renderChildren()}
          </footer>
        )
      default:
        return null
    }
  }

  const findElementPath = (id: string, elements: Element[], path: string[] = []): string[] | null => {
    for (let i = 0; i < elements.length; i++) {
      const element = elements[i]
      const currentPath = [...path, i.toString()]

      if (element.id === id) {
        return currentPath
      }

      if (element.children) {
        const childPath = findElementPath(id, element.children, currentPath)
        if (childPath) {
          return childPath
        }
      }
    }

    return null
  }

  const getElementByPath = (path: string[], elements: Element[]): Element | null => {
    if (path.length === 0) return null

    const index = Number.parseInt(path[0])
    if (index >= elements.length) return null

    const element = elements[index]
    if (path.length === 1) return element

    if (!element.children) return null

    return getElementByPath(path.slice(1), element.children)
  }

  const addChildElement = (parentId: string, type: Element["type"]) => {
    const newElement: Element = {
      id: Date.now().toString(),
      type,
      content: getDefaultContent(type),
      styles: getDefaultStyles(type),
    }

    const updateElementRecursive = (elements: Element[]): Element[] => {
      return elements.map((el) => {
        if (el.id === parentId) {
          return {
            ...el,
            children: [...(el.children || []), newElement],
          }
        }
        if (el.children) {
          return {
            ...el,
            children: updateElementRecursive(el.children),
          }
        }
        return el
      })
    }

    setElements(updateElementRecursive(elements))
  }

  const exportCode = () => {
    const code = `export default function GeneratedPage() {
  return (
    <div className="min-h-screen">
      ${generateElementsCode(elements)}
    </div>
  )
}`
    navigator.clipboard.writeText(code)
    alert("تم نسخ الكود!")
  }

  const generateElementsCode = (elements: Element[]): string => {
    return elements.map((el) => generateElementCode(el)).join("\n      ")
  }

  const generateElementCode = (element: Element): string => {
    const styleString = Object.entries(element.styles)
      .map(([key, value]) => `${key}: '${value}'`)
      .join(", ")

    const childrenCode = element.children ? generateElementsCode(element.children) : ""

    switch (element.type) {
      case "heading":
        return `<h2 style={{${styleString}}}>${element.content}</h2>`
      case "text":
        return `<p style={{${styleString}}}>${element.content}</p>`
      case "button":
        return `<button style={{${styleString}}}>${element.content}</button>`
      case "image":
        return `<img style={{${styleString}}} src="${element.content}" alt="صورة" />`
      case "container":
        return `<div style={{${styleString}}}>
        ${childrenCode}
      </div>`
      case "card":
        return `<div style={{${styleString}}}>
        ${childrenCode}
      </div>`
      case "navbar":
        return `<nav style={{${styleString}}}>
        ${childrenCode}
      </nav>`
      case "hero":
        return `<section style={{${styleString}}}>
        ${childrenCode}
      </section>`
      case "footer":
        return `<footer style={{${styleString}}}>
        ${childrenCode}
      </footer>`
      default:
        return ""
    }
  }

  const renderElementTree = (elements: Element[], level = 0) => {
    return elements.map((element) => (
      <div key={element.id}>
        <div
          className={`flex items-center justify-between p-2 rounded border ${
            selectedElement?.id === element.id ? "bg-blue-50 border-blue-200" : "hover:bg-gray-50"
          }`}
          style={{ marginLeft: `${level * 16}px` }}
          onClick={() => setSelectedElement(element)}
        >
          <span className="text-sm truncate flex items-center">
            {element.type === "heading" && "📝"}
            {element.type === "text" && "📄"}
            {element.type === "button" && "🔘"}
            {element.type === "image" && "🖼️"}
            {element.type === "container" && "📦"}
            {element.type === "card" && "🃏"}
            {element.type === "navbar" && "🧭"}
            {element.type === "hero" && "🌟"}
            {element.type === "footer" && "🔽"}
            <span className="mr-2">{element.content ? element.content.substring(0, 20) : element.type}</span>
          </span>
          <div className="flex">
            {(element.type === "container" ||
              element.type === "card" ||
              element.type === "navbar" ||
              element.type === "hero" ||
              element.type === "footer") && (
              <Button
                size="sm"
                variant="ghost"
                onClick={(e) => {
                  e.stopPropagation()
                  setSelectedElement(element)
                }}
              >
                <Square className="w-3 h-3" />
              </Button>
            )}
            <Button
              size="sm"
              variant="ghost"
              onClick={(e) => {
                e.stopPropagation()
                deleteElement(element.id)
              }}
            >
              <Trash2 className="w-3 h-3" />
            </Button>
          </div>
        </div>
        {element.children && renderElementTree(element.children, level + 1)}
      </div>
    ))
  }

  return (
    <div className="min-h-screen bg-gray-50" dir="rtl">
      {/* شريط الأدوات العلوي */}
      <div className="bg-white border-b p-4 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <h1 className="text-xl font-bold">محرر الصفحات</h1>
          <Badge variant="secondary">v1.0</Badge>
        </div>

        <div className="flex items-center gap-2">
          <Button variant={mode === "design" ? "default" : "outline"} size="sm" onClick={() => setMode("design")}>
            <Settings className="w-4 h-4 ml-2" />
            تصميم
          </Button>
          <Button variant={mode === "preview" ? "default" : "outline"} size="sm" onClick={() => setMode("preview")}>
            <Eye className="w-4 h-4 ml-2" />
            معاينة
          </Button>
          <Separator orientation="vertical" className="h-6" />
          <Button size="sm" onClick={exportCode}>
            <Code className="w-4 h-4 ml-2" />
            تصدير الكود
          </Button>
          <Button size="sm" onClick={loadTekamulPage}>
            <Download className="w-4 h-4 ml-2" />
            إعادة تحميل الصفحة
          </Button>
        </div>
      </div>

      <div className="flex h-[calc(100vh-80px)]">
        {/* الشريط الجانبي للأدوات */}
        {mode === "design" && (
          <div className="w-80 bg-white border-l p-4 overflow-y-auto">
            <Tabs defaultValue="elements" className="w-full">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="elements">العناصر</TabsTrigger>
                <TabsTrigger value="properties">الخصائص</TabsTrigger>
              </TabsList>

              <TabsContent value="elements" className="space-y-4">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-sm">إضافة عناصر</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("heading")}>
                      <Type className="w-4 h-4 ml-2" />
                      عنوان
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("text")}>
                      <Type className="w-4 h-4 ml-2" />
                      نص
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("button")}>
                      <MousePointer className="w-4 h-4 ml-2" />
                      زر
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("image")}>
                      <ImageIcon className="w-4 h-4 ml-2" />
                      صورة
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("container")}>
                      <Square className="w-4 h-4 ml-2" />
                      حاوية
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("card")}>
                      <Square className="w-4 h-4 ml-2" />
                      بطاقة
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("navbar")}>
                      <Square className="w-4 h-4 ml-2" />
                      شريط تنقل
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("hero")}>
                      <Square className="w-4 h-4 ml-2" />
                      قسم رئيسي
                    </Button>
                    <Button variant="outline" className="w-full justify-start" onClick={() => addElement("footer")}>
                      <Square className="w-4 h-4 ml-2" />
                      تذييل
                    </Button>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle className="text-sm">العناصر الموجودة</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">{renderElementTree(elements)}</CardContent>
                </Card>

                {selectedElement &&
                  (selectedElement.type === "container" ||
                    selectedElement.type === "card" ||
                    selectedElement.type === "navbar" ||
                    selectedElement.type === "hero" ||
                    selectedElement.type === "footer") && (
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-sm">إضافة عناصر فرعية</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-2">
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "heading")}
                        >
                          <Type className="w-4 h-4 ml-2" />
                          عنوان
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "text")}
                        >
                          <Type className="w-4 h-4 ml-2" />
                          نص
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "button")}
                        >
                          <MousePointer className="w-4 h-4 ml-2" />
                          زر
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "image")}
                        >
                          <ImageIcon className="w-4 h-4 ml-2" />
                          صورة
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "container")}
                        >
                          <Square className="w-4 h-4 ml-2" />
                          حاوية
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => addChildElement(selectedElement.id, "card")}
                        >
                          <Square className="w-4 h-4 ml-2" />
                          بطاقة
                        </Button>
                      </CardContent>
                    </Card>
                  )}
              </TabsContent>

              <TabsContent value="properties" className="space-y-4">
                {selectedElement ? (
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-sm">خصائص العنصر المحدد</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      {selectedElement.type !== "container" &&
                        selectedElement.type !== "card" &&
                        selectedElement.type !== "navbar" &&
                        selectedElement.type !== "hero" &&
                        selectedElement.type !== "footer" && (
                          <div>
                            <Label htmlFor="content">المحتوى</Label>
                            {selectedElement.type === "image" ? (
                              <Input
                                id="content"
                                value={selectedElement.content}
                                onChange={(e) => updateElement(selectedElement.id, { content: e.target.value })}
                                placeholder="رابط الصورة"
                              />
                            ) : (
                              <Textarea
                                id="content"
                                value={selectedElement.content}
                                onChange={(e) => updateElement(selectedElement.id, { content: e.target.value })}
                                rows={3}
                              />
                            )}
                          </div>
                        )}

                      <div>
                        <Label htmlFor="backgroundColor">لون الخلفية</Label>
                        <Input
                          id="backgroundColor"
                          type="color"
                          value={selectedElement.styles.backgroundColor || "#ffffff"}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, backgroundColor: e.target.value },
                            })
                          }
                        />
                      </div>

                      {selectedElement.type !== "image" && (
                        <>
                          <div>
                            <Label htmlFor="color">لون النص</Label>
                            <Input
                              id="color"
                              type="color"
                              value={selectedElement.styles.color || "#000000"}
                              onChange={(e) =>
                                updateElement(selectedElement.id, {
                                  styles: { ...selectedElement.styles, color: e.target.value },
                                })
                              }
                            />
                          </div>

                          <div>
                            <Label htmlFor="fontSize">حجم الخط</Label>
                            <Select
                              value={selectedElement.styles.fontSize || "1rem"}
                              onValueChange={(value) =>
                                updateElement(selectedElement.id, {
                                  styles: { ...selectedElement.styles, fontSize: value },
                                })
                              }
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="0.75rem">صغير جداً</SelectItem>
                                <SelectItem value="0.875rem">صغير</SelectItem>
                                <SelectItem value="1rem">عادي</SelectItem>
                                <SelectItem value="1.125rem">متوسط</SelectItem>
                                <SelectItem value="1.25rem">كبير</SelectItem>
                                <SelectItem value="1.5rem">كبير جداً</SelectItem>
                                <SelectItem value="2rem">عملاق</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

                          <div>
                            <Label htmlFor="textAlign">محاذاة النص</Label>
                            <Select
                              value={selectedElement.styles.textAlign || "right"}
                              onValueChange={(value: "left" | "center" | "right") =>
                                updateElement(selectedElement.id, {
                                  styles: { ...selectedElement.styles, textAlign: value },
                                })
                              }
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="right">يمين</SelectItem>
                                <SelectItem value="center">وسط</SelectItem>
                                <SelectItem value="left">يسار</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </>
                      )}

                      <div>
                        <Label htmlFor="padding">المسافة الداخلية</Label>
                        <Input
                          id="padding"
                          value={selectedElement.styles.padding || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, padding: e.target.value },
                            })
                          }
                          placeholder="مثال: 16px"
                        />
                      </div>

                      <div>
                        <Label htmlFor="margin">المسافة الخارجية</Label>
                        <Input
                          id="margin"
                          value={selectedElement.styles.margin || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, margin: e.target.value },
                            })
                          }
                          placeholder="مثال: 16px 0"
                        />
                      </div>

                      <div>
                        <Label htmlFor="borderRadius">استدارة الحواف</Label>
                        <Input
                          id="borderRadius"
                          value={selectedElement.styles.borderRadius || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, borderRadius: e.target.value },
                            })
                          }
                          placeholder="مثال: 8px"
                        />
                      </div>

                      {(selectedElement.type === "container" ||
                        selectedElement.type === "card" ||
                        selectedElement.type === "navbar" ||
                        selectedElement.type === "hero" ||
                        selectedElement.type === "footer") && (
                        <>
                          <div>
                            <Label htmlFor="display">العرض</Label>
                            <Select
                              value={selectedElement.styles.display || "block"}
                              onValueChange={(value) =>
                                updateElement(selectedElement.id, {
                                  styles: { ...selectedElement.styles, display: value },
                                })
                              }
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="block">كتلة</SelectItem>
                                <SelectItem value="flex">مرن</SelectItem>
                                <SelectItem value="grid">شبكة</SelectItem>
                                <SelectItem value="inline-block">كتلة مضمنة</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

                          {selectedElement.styles.display === "flex" && (
                            <>
                              <div>
                                <Label htmlFor="flexDirection">اتجاه المرونة</Label>
                                <Select
                                  value={selectedElement.styles.flexDirection || "row"}
                                  onValueChange={(value) =>
                                    updateElement(selectedElement.id, {
                                      styles: { ...selectedElement.styles, flexDirection: value },
                                    })
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="row">أفقي</SelectItem>
                                    <SelectItem value="column">عمودي</SelectItem>
                                    <SelectItem value="row-reverse">أفقي معكوس</SelectItem>
                                    <SelectItem value="column-reverse">عمودي معكوس</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <div>
                                <Label htmlFor="justifyContent">محاذاة أفقية</Label>
                                <Select
                                  value={selectedElement.styles.justifyContent || "flex-start"}
                                  onValueChange={(value) =>
                                    updateElement(selectedElement.id, {
                                      styles: { ...selectedElement.styles, justifyContent: value },
                                    })
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="flex-start">بداية</SelectItem>
                                    <SelectItem value="center">وسط</SelectItem>
                                    <SelectItem value="flex-end">نهاية</SelectItem>
                                    <SelectItem value="space-between">توزيع متساوي</SelectItem>
                                    <SelectItem value="space-around">توزيع حول</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>

                              <div>
                                <Label htmlFor="alignItems">محاذاة عمودية</Label>
                                <Select
                                  value={selectedElement.styles.alignItems || "stretch"}
                                  onValueChange={(value) =>
                                    updateElement(selectedElement.id, {
                                      styles: { ...selectedElement.styles, alignItems: value },
                                    })
                                  }
                                >
                                  <SelectTrigger>
                                    <SelectValue />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="flex-start">بداية</SelectItem>
                                    <SelectItem value="center">وسط</SelectItem>
                                    <SelectItem value="flex-end">نهاية</SelectItem>
                                    <SelectItem value="stretch">تمدد</SelectItem>
                                    <SelectItem value="baseline">خط القاعدة</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                            </>
                          )}
                        </>
                      )}

                      <div>
                        <Label htmlFor="width">العرض</Label>
                        <Input
                          id="width"
                          value={selectedElement.styles.width || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, width: e.target.value },
                            })
                          }
                          placeholder="مثال: 100% أو 300px"
                        />
                      </div>

                      <div>
                        <Label htmlFor="height">الارتفاع</Label>
                        <Input
                          id="height"
                          value={selectedElement.styles.height || ""}
                          onChange={(e) =>
                            updateElement(selectedElement.id, {
                              styles: { ...selectedElement.styles, height: e.target.value },
                            })
                          }
                          placeholder="مثال: auto أو 200px"
                        />
                      </div>
                    </CardContent>
                  </Card>
                ) : (
                  <Card>
                    <CardContent className="p-6 text-center text-gray-500">اختر عنصراً لتعديل خصائصه</CardContent>
                  </Card>
                )}
              </TabsContent>
            </Tabs>
          </div>
        )}

        {/* منطقة التصميم */}
        <div className="flex-1 p-4 overflow-auto">
          {isLoading ? (
            <div className="flex items-center justify-center h-full">
              <div className="text-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
                <p>جاري التحميل...</p>
              </div>
            </div>
          ) : (
            <div
              className="min-h-full bg-white rounded-lg shadow-sm"
              onClick={() => mode === "design" && setSelectedElement(null)}
            >
              {elements.map((element) => renderElement(element, selectedElement?.id === element.id))}

              {elements.length === 0 && (
                <div className="text-center text-gray-400 py-20">
                  <Layout className="w-12 h-12 mx-auto mb-4 opacity-50" />
                  <p>ابدأ بإضافة عناصر من الشريط الجانبي</p>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]html:file="public/ar00hsecmonyomwak56b0hymksw9ui.html"
<html>
<head><meta charset="utf-8" /></head>
<body>
ar00hsecmonyomwak56b0hymksw9ui
</body>
</html>
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/F61tROFiNveaAIukBzQM3s/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/Vk8oRGy3fKhRE_ftNqUNTL/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/OB2VP-FGShsnkaOPtlG4Vd/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_5ad9tfNp3CjtE3NeRA1h926yvct3/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"fe:["$","$L101",null,{"params":{"chatId":"YQEd3UJbgOR"},"promises":{"attributes":"$@10b","externalMeta":"$@10c","latest":"$@10d","messagesRange":"$@10e","messages":"$@10f","template":"$@110","gitStatus":"$@111"},"children":["$","$L113",null,{"chatId":"YQEd3UJbgOR","children":["$","$L114",null,{"seedOnlyKeys":["@\"chat:state\",\"YQEd3UJbgOR\","],"data":{"block:output:initial":{"id":"b_GwbfcvnQ6uV","result":"$@115"},"@\"block:mappings\",\"YQEd3UJbgOR\",":{"sqlBlockExecutionStates":"$Q116","blocksForkedFrom":"$Q117","blocksTemplateIds":"$Q118","blocksCreatedAt":"$Q119","blocksShared":"$Q11a","blocksDeployed":"$Q11b","blocksSubdomains":"$Q11c","brandedBlocks":"$Q11d","unlistedBlocks":"$Q11e","blockOutputs":"$Q11f"},"@\"chat:state\",\"YQEd3UJbgOR\",":{"messages":[{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"94aFuR3bdJZM8VdpNfBnaxhOjJXSwkKF","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T17:25:00.183Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_uXFz8TR7IG8","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"k21aznEbuuN4QqO5DpS0tkfFkpkPcsyz","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"94aFuR3bdJZM8VdpNfBnaxhOjJXSwkKF","type":"message","createdAt":"$D2025-06-05T17:25:00.184Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"4vVYsayHT8Op2jvr9cepJ0mra7i41ahi","parentId":"k21aznEbuuN4QqO5DpS0tkfFkpkPcsyz","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T17:27:00.569Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_LHl5boUisTE","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"XgpMADCRNDHWKyOp4OrxwOzbXim6nYvn","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"4vVYsayHT8Op2jvr9cepJ0mra7i41ahi","type":"message","createdAt":"$D2025-06-05T17:27:00.570Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"wlqCcZG0OBKjVjp3q0aLokZUYTXHdD3l","parentId":"XgpMADCRNDHWKyOp4OrxwOzbXim6nYvn","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T17:34:40.876Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_51JOifwvkpi","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"GVMwHjhVv2F3rqiMMnEKYJMwMLKQIGlE","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"wlqCcZG0OBKjVjp3q0aLokZUYTXHdD3l","type":"message","createdAt":"$D2025-06-05T17:34:40.877Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"iitidW5u6xNOhYKmUybm4AV7IdeCyhgu","parentId":"GVMwHjhVv2F3rqiMMnEKYJMwMLKQIGlE","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T17:40:14.295Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_BdsAmC6Wy41","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"lCbQgAsxTjtcBvS4d8eeWvE4X3omdcev","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"iitidW5u6xNOhYKmUybm4AV7IdeCyhgu","type":"message","createdAt":"$D2025-06-05T17:40:14.296Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"J67EzRkAOpRCGgrv47wNugQOOKvnerNa","parentId":"lCbQgAsxTjtcBvS4d8eeWvE4X3omdcev","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T18:27:44.268Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_CeZvKC63wbg","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"tTDf90JiEzFB5ChD1Vw9i0FqmgKBdqpS","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"J67EzRkAOpRCGgrv47wNugQOOKvnerNa","type":"message","createdAt":"$D2025-06-05T18:27:44.269Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"8TSSL1dcoOuj9XBIKHpGZlcN5fLPzNnj","parentId":"tTDf90JiEzFB5ChD1Vw9i0FqmgKBdqpS","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T18:41:21.506Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_TFiXzhvzvnD","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"SxRLSLASO2HtGQiINMI7S1pOV9LLJXQW","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"8TSSL1dcoOuj9XBIKHpGZlcN5fLPzNnj","type":"message","createdAt":"$D2025-06-05T18:41:21.507Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Ci2cGfzAJuZe9i2YWOjgirWUzMvsnIiv","parentId":"SxRLSLASO2HtGQiINMI7S1pOV9LLJXQW","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T18:46:39.586Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_YZsaegPpDpB","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"Gy2bLj52j1IYYjmBYGy8FHjUxnuDx4HD","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Ci2cGfzAJuZe9i2YWOjgirWUzMvsnIiv","type":"message","createdAt":"$D2025-06-05T18:46:39.587Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"I6ijDE5q4c4c3dBI0ZOvJpTCkz3KyRo7","parentId":"Gy2bLj52j1IYYjmBYGy8FHjUxnuDx4HD","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T18:51:19.848Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_NcfpWtUJ7C5","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"3CykfKnbSbjz8tYOQC5R4PaJCVk05HtE","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"I6ijDE5q4c4c3dBI0ZOvJpTCkz3KyRo7","type":"message","createdAt":"$D2025-06-05T18:51:19.849Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"X7SOl9P5wnAYoLxhTyQbqT6oKsTjiCFU","parentId":"3CykfKnbSbjz8tYOQC5R4PaJCVk05HtE","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:05:45.947Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_sBmcv4W9gKn","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"QKxmzZCSeeBe88IXKD39qpZhxeOJUvee","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"X7SOl9P5wnAYoLxhTyQbqT6oKsTjiCFU","type":"message","createdAt":"$D2025-06-05T19:05:45.948Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"p12Cgq7ydENYO7OyyphsoXjGLqkdujPY","parentId":"QKxmzZCSeeBe88IXKD39qpZhxeOJUvee","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:09:26.775Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_LTcQBQhJJyH","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"RliOUYqByaxVnJWQ8BjXcFvTAP0OjoNr","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"p12Cgq7ydENYO7OyyphsoXjGLqkdujPY","type":"message","createdAt":"$D2025-06-05T19:09:26.776Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"crSxLZD7D34795BU6LvH1ZJ4L8oHPtS6","parentId":"RliOUYqByaxVnJWQ8BjXcFvTAP0OjoNr","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:11:34.376Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_Si1HbQLyjM6","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"Yy8Fod1DzIT8py5jw1O7VWKqG4j9yxsk","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"crSxLZD7D34795BU6LvH1ZJ4L8oHPtS6","type":"message","createdAt":"$D2025-06-05T19:11:34.377Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"mZKQOp6stf6GNqcmmFzO5sRTlA2fTdFE","parentId":"Yy8Fod1DzIT8py5jw1O7VWKqG4j9yxsk","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:16:34.487Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_ODOxUsZW5vp","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"dBW7lRzGiOiPncnmQ5rQjB3ySyVyd8UL","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"mZKQOp6stf6GNqcmmFzO5sRTlA2fTdFE","type":"message","createdAt":"$D2025-06-05T19:16:34.488Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"EP0tZ0yVhFJyiMdGhpyottQQdn0u1cUc","parentId":"dBW7lRzGiOiPncnmQ5rQjB3ySyVyd8UL","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:19:59.344Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_SlDbnix1rnU","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"dgOWHfVLhnhlkmVN2nRI2vukMge7nmMH","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"EP0tZ0yVhFJyiMdGhpyottQQdn0u1cUc","type":"message","createdAt":"$D2025-06-05T19:19:59.345Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"p7WrzEKYifBRLxo9WnSFueBMpkIf87Xy","parentId":"dgOWHfVLhnhlkmVN2nRI2vukMge7nmMH","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:24:32.718Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_LPSpb3UzJZ8","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"z9NUfaZujD1Yxcpou6Ws9GfWqmTJrZRo","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"p7WrzEKYifBRLxo9WnSFueBMpkIf87Xy","type":"message","createdAt":"$D2025-06-05T19:24:32.719Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"2Z28ZICrf1pSxy9VxZ5haRAbYkfQhvxo","parentId":"z9NUfaZujD1Yxcpou6Ws9GfWqmTJrZRo","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:26:26.848Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_u0VfaQAQ0vt","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"2oG4JlgAoIVpsnMhgYbBsS33fer3qXTD","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"2Z28ZICrf1pSxy9VxZ5haRAbYkfQhvxo","type":"message","createdAt":"$D2025-06-05T19:26:26.849Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"fKsGGodlBarUaWtJXXd81CL94VvcOE2E","parentId":"2oG4JlgAoIVpsnMhgYbBsS33fer3qXTD","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:42:40.082Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_G4oeVkiYCjD","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"I8IDUKci9y5QZAIyVRuTdnuEZ2YQ1KhP","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"fKsGGodlBarUaWtJXXd81CL94VvcOE2E","type":"message","createdAt":"$D2025-06-05T19:42:40.083Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"4lJe1GWFGDcBeWq5WXHEinKYu8304Zan","parentId":"I8IDUKci9y5QZAIyVRuTdnuEZ2YQ1KhP","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:49:17.912Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_E12pMUm2W0L","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"yH3ybgtQsRFlEGAZcyon0FB0bD1LAa6v","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"4lJe1GWFGDcBeWq5WXHEinKYu8304Zan","type":"message","createdAt":"$D2025-06-05T19:49:17.913Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"je7tjc5qSj2Ou6KMuULIjXlj6BOUxbbv","parentId":"yH3ybgtQsRFlEGAZcyon0FB0bD1LAa6v","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T19:55:38.517Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"eN9VIjtaVojjeZo8Bm9sUroFotJBe9eD","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"je7tjc5qSj2Ou6KMuULIjXlj6BOUxbbv","type":"message","createdAt":"$D2025-06-05T19:55:38.518Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"R0wad23ZzjF9g2NGougnMKjwKJWbFYjY","parentId":"eN9VIjtaVojjeZo8Bm9sUroFotJBe9eD","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:00:44.647Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_dxRHVTdfkWt","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"9q6UVJhW0lQUtOyaXFfCF9fCjjkRMkqg","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"R0wad23ZzjF9g2NGougnMKjwKJWbFYjY","type":"message","createdAt":"$D2025-06-05T20:00:44.648Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"n314593hl1DlVjaE9qNNqLS3Bybs2qmr","parentId":"9q6UVJhW0lQUtOyaXFfCF9fCjjkRMkqg","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:06:53.440Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_5YC0pkRuG79","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"zNAV4N8xtlKp5cMK7gsUUA3CLBZ4qLTK","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"n314593hl1DlVjaE9qNNqLS3Bybs2qmr","type":"message","createdAt":"$D2025-06-05T20:06:53.441Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"EJbrK2PTMKK9veimRoF0kbgJTs2qCDnW","parentId":"zNAV4N8xtlKp5cMK7gsUUA3CLBZ4qLTK","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:15:54.686Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_lCUHPTrXHRf","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"nNk4Wv8SCTr4PsO8NEIvdU9ZXvcmczLO","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"EJbrK2PTMKK9veimRoF0kbgJTs2qCDnW","type":"message","createdAt":"$D2025-06-05T20:15:54.687Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"WaFASCGJp7RwbODmtP5SwD0qM1hXSGxr","parentId":"nNk4Wv8SCTr4PsO8NEIvdU9ZXvcmczLO","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:24:34.871Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_uS6uOABRecg","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"u9g697lv3ViRGyDDnJ6J7HuTBHHwvCHI","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"WaFASCGJp7RwbODmtP5SwD0qM1hXSGxr","type":"message","createdAt":"$D2025-06-05T20:24:34.872Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"McC4H575oiyJfJMH5fUZnP6PlhsL2qec","parentId":"u9g697lv3ViRGyDDnJ6J7HuTBHHwvCHI","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:28:11.718Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_EZcjnzmtWNO","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"IrZKqSCyweKhgf8ggrzPNuYkdGSvlyNd","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"McC4H575oiyJfJMH5fUZnP6PlhsL2qec","type":"message","createdAt":"$D2025-06-05T20:28:11.719Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"dIDylwphwUsA2pa1qRV4xWZjdEDNAGaf","parentId":"IrZKqSCyweKhgf8ggrzPNuYkdGSvlyNd","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:32:14.807Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_dHHUbcqw8OH","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"K4lwBGINJlUEGmfJ1vTzs687mRE9Rb6H","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"dIDylwphwUsA2pa1qRV4xWZjdEDNAGaf","type":"message","createdAt":"$D2025-06-05T20:32:14.808Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"G0iO1FjQdzthYjG1t529gn2enIwFkuds","parentId":"K4lwBGINJlUEGmfJ1vTzs687mRE9Rb6H","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:37:51.353Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_9emeElaoqr1","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"8zUWXJlSciFuOpscGN5RB4HJZ13Mdick","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"G0iO1FjQdzthYjG1t529gn2enIwFkuds","type":"message","createdAt":"$D2025-06-05T20:37:51.354Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Ynk5Iup06z8CfkKPg9xfZATX2wLoMGjt","parentId":"8zUWXJlSciFuOpscGN5RB4HJZ13Mdick","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:41:16.302Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_TtSAoWiydCR","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"Lt7KOKK7Y6KwN4o3XT3Wx3W2z5oLggyU","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Ynk5Iup06z8CfkKPg9xfZATX2wLoMGjt","type":"message","createdAt":"$D2025-06-05T20:41:16.303Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"kjjuBZxNyTreWBCJPrj69AkQ6eQQoqcl","parentId":"Lt7KOKK7Y6KwN4o3XT3Wx3W2z5oLggyU","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:46:35.590Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_CYJmshYw6Sf","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"xX11mFif6NjtFhouzR5EBALC3j2VkkcF","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"kjjuBZxNyTreWBCJPrj69AkQ6eQQoqcl","type":"message","createdAt":"$D2025-06-05T20:46:35.591Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"xpHhdSFML9DRFyzBUm49F1dHlHum07x1","parentId":"xX11mFif6NjtFhouzR5EBALC3j2VkkcF","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T20:54:58.596Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_nTwXuiq3c9O","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"u9w50Qv9jF93DttNPzJSBQokDS5ABEuy","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"xpHhdSFML9DRFyzBUm49F1dHlHum07x1","type":"message","createdAt":"$D2025-06-05T20:54:58.597Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"cV4tGPJjfMCEiCNqmq9bXxd9sDt1Px0t","parentId":"u9w50Qv9jF93DttNPzJSBQokDS5ABEuy","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:00:19.661Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_KlpMW8wuR5F","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"2O0p3EDmCkBAzroHI7RVKAeimTCe9txN","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"cV4tGPJjfMCEiCNqmq9bXxd9sDt1Px0t","type":"message","createdAt":"$D2025-06-05T21:00:19.662Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"tIcVD7FENxe1kC539H90VreS75U17T7N","parentId":"2O0p3EDmCkBAzroHI7RVKAeimTCe9txN","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:05:30.309Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_Vq0F39Gnwjl","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"RqWwvzcOkTawonKKQ6FZ23KoTSnl8aV4","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"tIcVD7FENxe1kC539H90VreS75U17T7N","type":"message","createdAt":"$D2025-06-05T21:05:30.310Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"z2NBf6x89LwkIJQJogOKtA28fJsq5whv","parentId":"RqWwvzcOkTawonKKQ6FZ23KoTSnl8aV4","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:08:14.995Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_5JDgK8TOkAO","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"9QLVcDmsKarlXROxsfNZbvwXHTh6jfb5","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"z2NBf6x89LwkIJQJogOKtA28fJsq5whv","type":"message","createdAt":"$D2025-06-05T21:08:14.996Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"3lQQDarABUSRrcw1mpGIyozNmTbOpKRb","parentId":"9QLVcDmsKarlXROxsfNZbvwXHTh6jfb5","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:13:17.443Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_jZt97niiHf2","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"MAcl38yYNFe52pwt6jeoXwT03BfbyzSO","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"3lQQDarABUSRrcw1mpGIyozNmTbOpKRb","type":"message","createdAt":"$D2025-06-05T21:13:17.444Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"GKEenvFAcTfNxC6m4IyoraaQMzeKENHm","parentId":"MAcl38yYNFe52pwt6jeoXwT03BfbyzSO","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:16:36.994Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"ssASPsn5mX9xQcPpziCgx9KgjWch1gHt","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"GKEenvFAcTfNxC6m4IyoraaQMzeKENHm","type":"message","createdAt":"$D2025-06-05T21:16:36.995Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"tVb4d9t9ISvz2SAIPxDRdfNTYPMyUeVg","parentId":"2O0p3EDmCkBAzroHI7RVKAeimTCe9txN","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:19:26.539Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_EWMUBe2Rsbh","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"1NkHiRVHw9EhdPfxiiEAevTVnoRphYn6","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"tVb4d9t9ISvz2SAIPxDRdfNTYPMyUeVg","type":"message","createdAt":"$D2025-06-05T21:19:26.540Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"sYdQ8ZjhmlpoQv5czEsIKd5BUwzRIKP9","parentId":"1NkHiRVHw9EhdPfxiiEAevTVnoRphYn6","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:24:11.615Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_BlxWqe6r0da","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"96nAGs0BFoe5Ee6w955ZJLNetdUyACSX","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"sYdQ8ZjhmlpoQv5czEsIKd5BUwzRIKP9","type":"message","createdAt":"$D2025-06-05T21:24:11.616Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"xs2ttbJSRx2zbqbLigmnCWl5ReUCDe2h","parentId":"96nAGs0BFoe5Ee6w955ZJLNetdUyACSX","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:26:40.021Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_qG1qQBRTgbB","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"x5QXi5AbM5xG5tR3cARiFZPpJ7cjwg2Z","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"xs2ttbJSRx2zbqbLigmnCWl5ReUCDe2h","type":"message","createdAt":"$D2025-06-05T21:26:40.022Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"lbcDERiQOJDyXkuQMVk6R81frRePxvho","parentId":"x5QXi5AbM5xG5tR3cARiFZPpJ7cjwg2Z","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:29:52.053Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_nKAYkqmjNEH","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"PlTLVSSQ9lMpDM7LlDg4ytpJcPD9WTkt","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"lbcDERiQOJDyXkuQMVk6R81frRePxvho","type":"message","createdAt":"$D2025-06-05T21:29:52.054Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"fHETtDHr7UF6Z5VSvLzfE3eNSAJDKZk7","parentId":"PlTLVSSQ9lMpDM7LlDg4ytpJcPD9WTkt","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:36:44.204Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_8x2eQMOEwaB","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"1liuI5rwtyXP45Pkz8vvi4dvtbZ5SsIZ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"fHETtDHr7UF6Z5VSvLzfE3eNSAJDKZk7","type":"message","createdAt":"$D2025-06-05T21:36:44.205Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"JO9fr2s4cWhGRmTwOCrTwTW5SqCoYadg","parentId":"1liuI5rwtyXP45Pkz8vvi4dvtbZ5SsIZ","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:45:11.357Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_h4MIZVK8jns","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"UmfMXKAjQAcY8i3s0DeDMew6wboQ55u8","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"JO9fr2s4cWhGRmTwOCrTwTW5SqCoYadg","type":"message","createdAt":"$D2025-06-05T21:45:11.358Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"xr0NjGPZSGMXhB7b3nqGuPlfIQvJaSRA","parentId":"UmfMXKAjQAcY8i3s0DeDMew6wboQ55u8","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:55:30.770Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_McubBlS1Sdd","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"KT5w85PCqdoBOtBVik1JR4imKVuBCGSL","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"xr0NjGPZSGMXhB7b3nqGuPlfIQvJaSRA","type":"message","createdAt":"$D2025-06-05T21:55:30.771Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"sUzXW59ViQIyPJT98I6DjyFusGXA2soj","parentId":"KT5w85PCqdoBOtBVik1JR4imKVuBCGSL","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T21:58:18.446Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_MKZ5omX9CKg","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"9RA8HgF1rcbFh7njskyyKGG3z8keWYVz","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"sUzXW59ViQIyPJT98I6DjyFusGXA2soj","type":"message","createdAt":"$D2025-06-05T21:58:18.447Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"vP8Nz5l68uuSEjPz1Ic1pCXW0J9TgPxs","parentId":"9RA8HgF1rcbFh7njskyyKGG3z8keWYVz","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:08:38.373Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_69KCMsnSmfw","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"kboytUvf965XTUyl03QHXFTMfCjl3SXM","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"vP8Nz5l68uuSEjPz1Ic1pCXW0J9TgPxs","type":"message","createdAt":"$D2025-06-05T22:08:38.374Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"gIhNQXOb3G0gesB6Y4HIUKj0BBS1OuwQ","parentId":"kboytUvf965XTUyl03QHXFTMfCjl3SXM","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:14:42.086Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_I1YY1GKpAE2","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"Hz7fjWv7l8CVfHjpt70cHWl3iVYXbtKb","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"gIhNQXOb3G0gesB6Y4HIUKj0BBS1OuwQ","type":"message","createdAt":"$D2025-06-05T22:14:42.087Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Veu2oPn4uKiE8vezSWK6iygqsLlxkqKw","parentId":"Hz7fjWv7l8CVfHjpt70cHWl3iVYXbtKb","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:18:51.885Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_PVJY40fQNc3","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"O8uw732XfK4sl0Ngb4D1Dwdq1qY3ZwMQ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Veu2oPn4uKiE8vezSWK6iygqsLlxkqKw","type":"message","createdAt":"$D2025-06-05T22:18:51.886Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"1vqppTYMXRbtA1kHLYg4BhiEdovTdcKB","parentId":"O8uw732XfK4sl0Ngb4D1Dwdq1qY3ZwMQ","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:24:29.523Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_41lJcOxKmnA","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"hrDflEzWikyWTapRmAVQnyDOgSUOu5Qa","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"1vqppTYMXRbtA1kHLYg4BhiEdovTdcKB","type":"message","createdAt":"$D2025-06-05T22:24:29.524Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"wCVUSmRCJ4uf4mvgs8r4A3f0WHn8ejCu","parentId":"hrDflEzWikyWTapRmAVQnyDOgSUOu5Qa","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:27:35.455Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_l4A9lTEd7yo","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"2jggbFjUq8Io6YnuT5EAaHtGnsbue6yk","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"wCVUSmRCJ4uf4mvgs8r4A3f0WHn8ejCu","type":"message","createdAt":"$D2025-06-05T22:27:35.456Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"xBbchN7gg8jLsCDwHCkk8tZcMaA21tbg","parentId":"2jggbFjUq8Io6YnuT5EAaHtGnsbue6yk","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:30:45.176Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"JWMxw9lxazbMr0L4Qv3aK6SlWOyOPG3B","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"xBbchN7gg8jLsCDwHCkk8tZcMaA21tbg","type":"message","createdAt":"$D2025-06-05T22:30:45.177Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"vWQaKhIcsGsPYahjtWBqAgDlkTZQcJXU","parentId":"JWMxw9lxazbMr0L4Qv3aK6SlWOyOPG3B","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:32:23.484Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_dDTWeRHct78","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"5druTsVCxRzRSSol1xEuLvnR3m7S7qnE","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"vWQaKhIcsGsPYahjtWBqAgDlkTZQcJXU","type":"message","createdAt":"$D2025-06-05T22:32:23.485Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Oz4RAOHbY2dEfxHX9JZEPRLEzWsYW6yS","parentId":"5druTsVCxRzRSSol1xEuLvnR3m7S7qnE","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:39:51.278Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_cJcVtX5HTLi","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"7QZiSTHhk0Xa5tOoDa4ixorNMFFyiuvE","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Oz4RAOHbY2dEfxHX9JZEPRLEzWsYW6yS","type":"message","createdAt":"$D2025-06-05T22:39:51.279Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"FRimwpg4OEsroLpXGzWHHl7B7ovY07O3","parentId":"7QZiSTHhk0Xa5tOoDa4ixorNMFFyiuvE","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:43:29.981Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_wcNxetzWsB0","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"rBrDiebtlSU2K4JqdSFriiMuQWBM7WS5","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"FRimwpg4OEsroLpXGzWHHl7B7ovY07O3","type":"message","createdAt":"$D2025-06-05T22:43:29.982Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"3cXifgVIt9CE0ltnED5lFfhPVOQZifVc","parentId":"rBrDiebtlSU2K4JqdSFriiMuQWBM7WS5","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:47:57.118Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_JKy32wG8AaK","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"pVCkmuBR7FC1PdK2TPK4hUOm6O8bT2eZ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"3cXifgVIt9CE0ltnED5lFfhPVOQZifVc","type":"message","createdAt":"$D2025-06-05T22:47:57.119Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"NC6uh0JDFaonapuQKQrwb8MBbJPi4KLX","parentId":"pVCkmuBR7FC1PdK2TPK4hUOm6O8bT2eZ","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:55:10.424Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_gaZxNPI74lY","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"JMRnnxSjBGKUPcM1dzy4k2R4TqbxHuLr","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"NC6uh0JDFaonapuQKQrwb8MBbJPi4KLX","type":"message","createdAt":"$D2025-06-05T22:55:10.425Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"nMLtJdLRzd4JONCloWGF3xqvySUihN0H","parentId":"JMRnnxSjBGKUPcM1dzy4k2R4TqbxHuLr","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:58:01.621Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_i6TmzWlTm3v","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"u7tvkHPtDlGsrsuHAIxOHnFcugQmln6X","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"nMLtJdLRzd4JONCloWGF3xqvySUihN0H","type":"message","createdAt":"$D2025-06-05T22:58:01.622Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"URUcK8fPKa5c9DF2VLPv2eAYFNEvhf1B","parentId":"u7tvkHPtDlGsrsuHAIxOHnFcugQmln6X","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-05T22:59:21.373Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_BPTPkayKdjF","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"s1XntRu3g9caUkboyykABk1zg3Cjrxls","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"URUcK8fPKa5c9DF2VLPv2eAYFNEvhf1B","type":"message","createdAt":"$D2025-06-05T22:59:21.374Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"TFTgzTZJfumk1F1FSeOKR8v7plUWlepU","parentId":"s1XntRu3g9caUkboyykABk1zg3Cjrxls","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T05:17:48.780Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_BHC4mw8712S","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"y7qP2Ob7mIHOTGp0Uzr2Zlo0hd6WkqxK","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"TFTgzTZJfumk1F1FSeOKR8v7plUWlepU","type":"message","createdAt":"$D2025-06-06T05:17:48.781Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"DZ8xUzORJSV5KgesZuJgcNLmD08UvKS0","parentId":"x5QXi5AbM5xG5tR3cARiFZPpJ7cjwg2Z","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T05:23:21.501Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_vOdUGS79fU9","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"4s3Issk2QIRavPh8gVMNtJH5ZVQCLbVc","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"DZ8xUzORJSV5KgesZuJgcNLmD08UvKS0","type":"message","createdAt":"$D2025-06-06T05:23:21.502Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"4fkCBAOCNzYtIyldZpX4nmFvUMD7Di4u","parentId":"4s3Issk2QIRavPh8gVMNtJH5ZVQCLbVc","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T05:38:14.419Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_cW9Z1q0eOIa","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"WO1hpiPIy2Jzhi2fLfFr7Axqww9BX01X","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"4fkCBAOCNzYtIyldZpX4nmFvUMD7Di4u","type":"message","createdAt":"$D2025-06-06T05:38:14.420Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"SNVFXDsyehNiLRhCKUxYgs0TcahUcWoA","parentId":"WO1hpiPIy2Jzhi2fLfFr7Axqww9BX01X","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T05:47:35.632Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_PG7DaSmAkat","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"vzHboHRUA49zVAM7PDwRGnSGMW6o9SFA","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"SNVFXDsyehNiLRhCKUxYgs0TcahUcWoA","type":"message","createdAt":"$D2025-06-06T05:47:35.633Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"aeERWV7dpyXYxlog9gQR2cAqggI3MIQA","parentId":"vzHboHRUA49zVAM7PDwRGnSGMW6o9SFA","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T05:58:19.379Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_oTcV1R0lusi","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"TF4bZWxmKKD0yGZgZTSEacfN8omTApki","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"aeERWV7dpyXYxlog9gQR2cAqggI3MIQA","type":"message","createdAt":"$D2025-06-06T05:58:19.380Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"j1cGpvOfT8PAgTSIHp2D2CiwOpanMvfS","parentId":"TF4bZWxmKKD0yGZgZTSEacfN8omTApki","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T06:03:52.497Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_jHaqUbVsHVx","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"e5wRIAByoAcEEdVAjj8O08yypykrDyKe","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"j1cGpvOfT8PAgTSIHp2D2CiwOpanMvfS","type":"message","createdAt":"$D2025-06-06T06:03:52.498Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"kA6z9fBMDbTbYB0PaSyArCK2KBiC1eU4","parentId":"e5wRIAByoAcEEdVAjj8O08yypykrDyKe","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T06:20:36.008Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_k3XkFl2qtb1","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"PtHREDygRYwWGnXpOmEbEcYnE24HajIE","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"kA6z9fBMDbTbYB0PaSyArCK2KBiC1eU4","type":"message","createdAt":"$D2025-06-06T06:20:36.009Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"CYfZJd0sDU5guchzXboy58ATs0Ycy4Pv","parentId":"PtHREDygRYwWGnXpOmEbEcYnE24HajIE","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T06:23:53.378Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_HVGxrCHAuSS","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"ezO9cAehc2YTyRYkfogHO6Akn3r0xnXZ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"CYfZJd0sDU5guchzXboy58ATs0Ycy4Pv","type":"message","createdAt":"$D2025-06-06T06:23:53.379Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"CJHFqkUzDIYrRRTNLfmLGVqDtuM1VfVj","parentId":"ezO9cAehc2YTyRYkfogHO6Akn3r0xnXZ","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T06:32:27.528Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_lxHXW8SpAdw","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"X4ZTAiuanJ2nHeHruKSJpRxCDyMeHCpg","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"CJHFqkUzDIYrRRTNLfmLGVqDtuM1VfVj","type":"message","createdAt":"$D2025-06-06T06:32:27.529Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"0H4WTK61Jloe3FyyT3usBKWJ7us5dxd4","parentId":"X4ZTAiuanJ2nHeHruKSJpRxCDyMeHCpg","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T06:48:11.586Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_DlV6fSv0s0Q","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"uwwLJFYTbGDImHqHugmeUF61PvhUqwYt","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"0H4WTK61Jloe3FyyT3usBKWJ7us5dxd4","type":"message","createdAt":"$D2025-06-06T06:48:11.587Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"ibFe3IPIWPgL4pSCfisGsnN8JXEJTcOE","parentId":"uwwLJFYTbGDImHqHugmeUF61PvhUqwYt","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T06:54:30.236Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_1gNAvRsSoWP","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"KeKyxH0o7aBjppPZP7yWfbpCfcx8MxBQ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"ibFe3IPIWPgL4pSCfisGsnN8JXEJTcOE","type":"message","createdAt":"$D2025-06-06T06:54:30.237Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"wY38sPewh4yBXVeWDvRLVnbIQOG8uxKk","parentId":"KeKyxH0o7aBjppPZP7yWfbpCfcx8MxBQ","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T06:56:11.803Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_es3zPR7hvgh","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"MwVJ5Bju8vnpFDl5vaMobTatDhU2BdN9","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"wY38sPewh4yBXVeWDvRLVnbIQOG8uxKk","type":"message","createdAt":"$D2025-06-06T06:56:11.804Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"sqFpVfqicOTo6VmXBztmdHVFraG3DfM8","parentId":"MwVJ5Bju8vnpFDl5vaMobTatDhU2BdN9","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T07:02:00.616Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_q6vknZYNmLd","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"vmyKKJiknizs8om6Otr9uBbdGEjzH7UI","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"sqFpVfqicOTo6VmXBztmdHVFraG3DfM8","type":"message","createdAt":"$D2025-06-06T07:02:00.617Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"MBpUxt2rJWaNO2SoEPZcPsP0KbcxG64S","parentId":"vmyKKJiknizs8om6Otr9uBbdGEjzH7UI","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T07:02:29.258Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_EaVE7sJBAsa","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"LkJO321LmGbZ3vrBRmYq3sEvtycsUpvp","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"MBpUxt2rJWaNO2SoEPZcPsP0KbcxG64S","type":"message","createdAt":"$D2025-06-06T07:02:29.259Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"lEAlET2mfTjDoyO1PTkS4bQ7RlGrEmbM","parentId":"LkJO321LmGbZ3vrBRmYq3sEvtycsUpvp","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T07:43:09.917Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"lhdeMuoeEdt0bh03KwFFpIzVUibVcvq5","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"lEAlET2mfTjDoyO1PTkS4bQ7RlGrEmbM","type":"message","createdAt":"$D2025-06-06T07:43:09.918Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"1GgBku3cZFGlArK5Mawu1xBUvvVpB958","parentId":"lhdeMuoeEdt0bh03KwFFpIzVUibVcvq5","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T08:05:27.486Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"TjdFimzKOYy7yfUihlaFnjzm3ho1OKDO","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"1GgBku3cZFGlArK5Mawu1xBUvvVpB958","type":"message","createdAt":"$D2025-06-06T08:05:27.487Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"qpldtg6TyVavlZa12YYzHkJk3FFhHsYj","parentId":"LkJO321LmGbZ3vrBRmYq3sEvtycsUpvp","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T08:44:30.333Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_5HvEtkrTvU0","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"kpqy0j4aCnVnKIyRS3ucoJOcxzSFXu7v","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"qpldtg6TyVavlZa12YYzHkJk3FFhHsYj","type":"message","createdAt":"$D2025-06-06T08:44:30.334Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"x34Cz5WuLkvaslfY5FhomoaKxtnJvW3Z","parentId":"kpqy0j4aCnVnKIyRS3ucoJOcxzSFXu7v","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T09:27:36.976Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_gvEUb6ZEZtb","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"SindFFfLHJxxWgikqZ9oAaza1sT3ErkT","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"x34Cz5WuLkvaslfY5FhomoaKxtnJvW3Z","type":"message","createdAt":"$D2025-06-06T09:27:36.977Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"N6u649KhP9mwY9ASlhNFstoY0Gcc7FJq","parentId":"SindFFfLHJxxWgikqZ9oAaza1sT3ErkT","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T09:44:52.217Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_0HJug1wAoR5","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"LTSJDoLhvIptl92KQfBjnaPFB8MQGFpJ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"N6u649KhP9mwY9ASlhNFstoY0Gcc7FJq","type":"message","createdAt":"$D2025-06-06T09:44:52.218Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"0unTKJiLK7qbdS4R7Rby9QiYednNXW9n","parentId":"LTSJDoLhvIptl92KQfBjnaPFB8MQGFpJ","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T09:49:28.879Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_odeR3WtZqmI","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"oonvza9w5lUMgzGxcYWSzMbpHAUWXg48","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"0unTKJiLK7qbdS4R7Rby9QiYednNXW9n","type":"message","createdAt":"$D2025-06-06T09:49:28.880Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"0hZ4upyPkCAm7lu8dSyodsDbwECNTgSI","parentId":"oonvza9w5lUMgzGxcYWSzMbpHAUWXg48","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T09:53:20.949Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_HFfC8BSOI6W","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"AiERW0BUxzSSWAcZZhAzadvSfw1elHuH","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"0hZ4upyPkCAm7lu8dSyodsDbwECNTgSI","type":"message","createdAt":"$D2025-06-06T09:53:20.950Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"dJnb0RMbePomqqIUxXSOVn4a0yAfITxR","parentId":"AiERW0BUxzSSWAcZZhAzadvSfw1elHuH","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T09:55:45.446Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_NoJsPTGTnly","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"JK1qv7XVBAuWq0tTuOxk9foZ7kzl5kxc","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"dJnb0RMbePomqqIUxXSOVn4a0yAfITxR","type":"message","createdAt":"$D2025-06-06T09:55:45.447Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"D0l2qr745GKZUqAtNWSqOhZyhstaaDbX","parentId":"JK1qv7XVBAuWq0tTuOxk9foZ7kzl5kxc","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T10:06:35.593Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"Wm9DMCaWAgxV97u0p2J7cztdGEhvQ5in","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"D0l2qr745GKZUqAtNWSqOhZyhstaaDbX","type":"message","createdAt":"$D2025-06-06T10:06:35.594Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Poh1j8towF9IlqvXAhntFh72vJXDsVoU","parentId":"Wm9DMCaWAgxV97u0p2J7cztdGEhvQ5in","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T10:08:41.004Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_4VfH1EJ02l1","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"SxyQDezciFJ8EE8k36V9pV6pXV6f4OrM","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Poh1j8towF9IlqvXAhntFh72vJXDsVoU","type":"message","createdAt":"$D2025-06-06T10:08:41.005Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"7LQXrIHoL4UNKQCD6u31j8MfeJWJTNuJ","parentId":"SxyQDezciFJ8EE8k36V9pV6pXV6f4OrM","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T10:12:48.784Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_mOxhBKNHthY","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"qqJBvk5fig3YX5Xkz7rfhTjvKfY8Mg8u","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"7LQXrIHoL4UNKQCD6u31j8MfeJWJTNuJ","type":"message","createdAt":"$D2025-06-06T10:12:48.785Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"tKKNND3rQSh52zKvbfXn1ed8q6dZHfLS","parentId":"qqJBvk5fig3YX5Xkz7rfhTjvKfY8Mg8u","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T10:38:08.696Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_5rbAPZqoMIH","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"R491lTUkXRPsED7J5ONfiqcl6yET5x1M","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"tKKNND3rQSh52zKvbfXn1ed8q6dZHfLS","type":"message","createdAt":"$D2025-06-06T10:38:08.697Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"XYteM3QchnNE4Q1dpicSGwatUd5Xk5Fa","parentId":"R491lTUkXRPsED7J5ONfiqcl6yET5x1M","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T10:49:04.121Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_dB62I2zDOCs","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"8H2hgWMCuf87LsPMPd2nzArTDL14PaXW","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"XYteM3QchnNE4Q1dpicSGwatUd5Xk5Fa","type":"message","createdAt":"$D2025-06-06T10:49:04.122Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"h5FdclwYQ2XpCzH1PxlD9yooYPsxBYGf","parentId":"8H2hgWMCuf87LsPMPd2nzArTDL14PaXW","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T10:56:37.556Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_V1i6MYjKmY9","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"0srYHZ5lZC3X1c3uWFfy2OOtgexcOplf","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"h5FdclwYQ2XpCzH1PxlD9yooYPsxBYGf","type":"message","createdAt":"$D2025-06-06T10:56:37.557Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"KLhY5MFJ0UkfDSivil8cDr6AIqBgTCvj","parentId":"0srYHZ5lZC3X1c3uWFfy2OOtgexcOplf","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-06T11:09:07.351Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_ozcZxjrmaCW","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"jiBOp2Bvf3ISCUCHcLNGlhqyYEYXvcaa","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"KLhY5MFJ0UkfDSivil8cDr6AIqBgTCvj","type":"message","createdAt":"$D2025-06-06T11:09:07.352Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"rMqjdXQe90vdkmzLPX0ZtrLySXRCchrR","parentId":"jiBOp2Bvf3ISCUCHcLNGlhqyYEYXvcaa","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T14:53:59.254Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_7ZElPr73zf1","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"xvjnQAB3JGskSCaKOojW6xw33YC05nmK","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"rMqjdXQe90vdkmzLPX0ZtrLySXRCchrR","type":"message","createdAt":"$D2025-06-09T14:53:59.255Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"tsFbPR7SiHTWpjwhzRvSTiIdjbSnvVwq","parentId":"xvjnQAB3JGskSCaKOojW6xw33YC05nmK","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T15:01:21.305Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_7aDMrtXR7x2","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"f5DMEHcCxul2EppP8UmSv7x8yXNy7Mht","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"tsFbPR7SiHTWpjwhzRvSTiIdjbSnvVwq","type":"message","createdAt":"$D2025-06-09T15:01:21.306Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"MIMFWAjVcxFEKnqlewq8BFRezzIsn4M5","parentId":"f5DMEHcCxul2EppP8UmSv7x8yXNy7Mht","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T15:21:00.045Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_2CIs9waUz3l","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"kh7c1mOpUj0h6XYHtMof5j178yRUSZWs","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"MIMFWAjVcxFEKnqlewq8BFRezzIsn4M5","type":"message","createdAt":"$D2025-06-09T15:21:00.046Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"dw5bULW1zKgjprT2b9ii7jWGGkTytswz","parentId":"kh7c1mOpUj0h6XYHtMof5j178yRUSZWs","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T15:27:18.854Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"McJbKw2Hw4jm5e1XEiyi5xbAb1eMujPe","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"dw5bULW1zKgjprT2b9ii7jWGGkTytswz","type":"message","createdAt":"$D2025-06-09T15:27:18.855Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"1H2pSBaBluhNVncxysXnUZ7j8iAe97MJ","parentId":"McJbKw2Hw4jm5e1XEiyi5xbAb1eMujPe","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T15:29:39.054Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"eHqbYgQy4oSRQ3DPT2sfrqwhBq9wOkpw","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"1H2pSBaBluhNVncxysXnUZ7j8iAe97MJ","type":"message","createdAt":"$D2025-06-09T15:29:39.055Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"S7zvEoKN1CGOxIQmNmVqWs94JLlrq0ah","parentId":"eHqbYgQy4oSRQ3DPT2sfrqwhBq9wOkpw","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T15:34:19.268Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"0hkfYtGFTijz3ROdYF7i8MuZZzthRDRK","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"S7zvEoKN1CGOxIQmNmVqWs94JLlrq0ah","type":"message","createdAt":"$D2025-06-09T15:34:19.269Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"vlvbN0MbAODJpxxqLm7bWibDgIAVjESc","parentId":"0hkfYtGFTijz3ROdYF7i8MuZZzthRDRK","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T15:37:27.625Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_KI2Xxsi91f0","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"pMMslXbOYnxuW5HSCcl3zHcxGb6TeL1q","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"vlvbN0MbAODJpxxqLm7bWibDgIAVjESc","type":"message","createdAt":"$D2025-06-09T15:37:27.626Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"MFEk6p8KLZGUAxzktD0EDCGMLlEVxHaU","parentId":"pMMslXbOYnxuW5HSCcl3zHcxGb6TeL1q","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T15:53:12.186Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"mmMY3pvVwiXMBMC6HqGa1DKePmoVgWzJ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"MFEk6p8KLZGUAxzktD0EDCGMLlEVxHaU","type":"message","createdAt":"$D2025-06-09T15:53:12.187Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"BbhlLlJfdFCZYrM4v2iCMhaJI3TMdH5E","parentId":"mmMY3pvVwiXMBMC6HqGa1DKePmoVgWzJ","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T16:42:44.130Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"bHApkBdpEeqonWzu77DTMQVvreYjjlER","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"BbhlLlJfdFCZYrM4v2iCMhaJI3TMdH5E","type":"message","createdAt":"$D2025-06-09T16:42:44.131Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"b4KqPqTtxpLG3zvVqoq2pIeHCeTyITs3","parentId":"bHApkBdpEeqonWzu77DTMQVvreYjjlER","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T16:53:29.642Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"C5KHAZ3hHo0XyEw1HLzalGgduG9iZeRW","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"b4KqPqTtxpLG3zvVqoq2pIeHCeTyITs3","type":"message","createdAt":"$D2025-06-09T16:53:29.643Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"IYmvJ2BjNpwqQouOUo1ljYryUG62X49p","parentId":"C5KHAZ3hHo0XyEw1HLzalGgduG9iZeRW","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T17:07:05.903Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"nbk3yE3BfuSK2Fh5EnjBNxxWteL1sSEO","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"IYmvJ2BjNpwqQouOUo1ljYryUG62X49p","type":"message","createdAt":"$D2025-06-09T17:07:05.904Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"FKep4Mit8Y4LQnQB2Upp1wGTWBytdRmG","parentId":"nbk3yE3BfuSK2Fh5EnjBNxxWteL1sSEO","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T17:10:46.113Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"X3mFZRe1ZcLT9rUVhICMnL7kUcoj1Aw3","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"FKep4Mit8Y4LQnQB2Upp1wGTWBytdRmG","type":"message","createdAt":"$D2025-06-09T17:10:46.114Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"6R1FeFkVk8agjVsHjScAqHm4nzaKmfLS","parentId":"X3mFZRe1ZcLT9rUVhICMnL7kUcoj1Aw3","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T17:20:15.822Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_zEz0KIgotXJ","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"UBs6DbnWiFV3XTxby5Tli1LuvQ347ttj","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"6R1FeFkVk8agjVsHjScAqHm4nzaKmfLS","type":"message","createdAt":"$D2025-06-09T17:20:15.823Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"eHYRipdH0utb7K7LtQ0t5mvgFDkpNkxS","parentId":"UBs6DbnWiFV3XTxby5Tli1LuvQ347ttj","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T19:58:51.258Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_9SAZxjpdqmH","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"hFIsFMAQbnaIlVa6p1Gw0WpJNEgqx0Dg","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"eHYRipdH0utb7K7LtQ0t5mvgFDkpNkxS","type":"message","createdAt":"$D2025-06-09T19:58:51.259Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"lXSG9S6gFkcQ6oan9TIKbw8Fzb1Ds16i","parentId":"hFIsFMAQbnaIlVa6p1Gw0WpJNEgqx0Dg","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T20:08:59.063Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_QClhNvzQHzj","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"05l4DoPkJ9rafy3jHiDGkgT1YEWKk3aY","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"lXSG9S6gFkcQ6oan9TIKbw8Fzb1Ds16i","type":"message","createdAt":"$D2025-06-09T20:08:59.064Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"zYeFzgnKH6Z1utSsdeXcOLjJUNP52svK","parentId":"05l4DoPkJ9rafy3jHiDGkgT1YEWKk3aY","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T20:27:47.185Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_2eLFji7aUHX","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"bgV7pGX0PqK49Hj9FIDhP7SJKr4OaFkK","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"zYeFzgnKH6Z1utSsdeXcOLjJUNP52svK","type":"message","createdAt":"$D2025-06-09T20:27:47.186Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"zyi5YYRjqI6wDyFP8loyjauF4VrKq7af","parentId":"bgV7pGX0PqK49Hj9FIDhP7SJKr4OaFkK","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T20:49:00.319Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_IDI0DuIi3tY","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"GjDKo67GmgqQCdQzW9MtwUDZecrPfImk","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"zyi5YYRjqI6wDyFP8loyjauF4VrKq7af","type":"message","createdAt":"$D2025-06-09T20:49:00.320Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"WTiUGYYYgzRhJVhb97JCgHujNPQaCVxC","parentId":"GjDKo67GmgqQCdQzW9MtwUDZecrPfImk","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T20:55:43.906Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_jDtlGIQ8r5R","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"ckcBMcYlMLobsZiDKSIeqf7bTARhlPuz","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"WTiUGYYYgzRhJVhb97JCgHujNPQaCVxC","type":"message","createdAt":"$D2025-06-09T20:55:43.907Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"tudTVDx9EO9eD5dKWjv6Dz520gcdlTNk","parentId":"ckcBMcYlMLobsZiDKSIeqf7bTARhlPuz","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T21:06:29.580Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_ZxzTdG9OdCF","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"BNbZmR0P16hcdsVd1CpoecfYS50BoXEN","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"tudTVDx9EO9eD5dKWjv6Dz520gcdlTNk","type":"message","createdAt":"$D2025-06-09T21:06:29.581Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"IMwyORoUOPYpP88YY7y3PJBzhsp2dGXK","parentId":"BNbZmR0P16hcdsVd1CpoecfYS50BoXEN","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T21:10:10.910Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_LwGie76x2r1","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"dA5AWlkyG0OhJtDpsx95NGCILMh3OB4z","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"IMwyORoUOPYpP88YY7y3PJBzhsp2dGXK","type":"message","createdAt":"$D2025-06-09T21:10:10.911Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"InI3OAz7OxoCH8KgwfELZITt07ZolyaO","parentId":"dA5AWlkyG0OhJtDpsx95NGCILMh3OB4z","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T21:15:46.223Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_EaCZpLeMexw","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"3Gexhc6ohrBSQk4nMZoWnBRGW7mrxLoB","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"InI3OAz7OxoCH8KgwfELZITt07ZolyaO","type":"message","createdAt":"$D2025-06-09T21:15:46.224Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"i8NIWWXVM4TVrqO0TFUtT8SS1jojFFig","parentId":"3Gexhc6ohrBSQk4nMZoWnBRGW7mrxLoB","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T21:19:28.573Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_QgfzMTG70B3","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"1gOs4uS8sNRqFYLqgCasRJ9UvvNlEm4y","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"i8NIWWXVM4TVrqO0TFUtT8SS1jojFFig","type":"message","createdAt":"$D2025-06-09T21:19:28.574Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"AZalXZXqCpFDLkyzLVUHD1wMmzmWzaJ9","parentId":"1gOs4uS8sNRqFYLqgCasRJ9UvvNlEm4y","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-09T21:38:35.610Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_Kieawus2pT5","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"BpwhDOzelmj8VY3qy0Ii7RIh7UC4Pbvu","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"AZalXZXqCpFDLkyzLVUHD1wMmzmWzaJ9","type":"message","createdAt":"$D2025-06-09T21:38:35.611Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"CoLV12vY7qC2hBnx52pnCuuOKieUf9p8","parentId":"BpwhDOzelmj8VY3qy0Ii7RIh7UC4Pbvu","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-15T17:37:54.195Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_B0JFpwxxpel","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"IeARwC6Th9wKIuwWtJoHcLRIf8SI1T8f","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"CoLV12vY7qC2hBnx52pnCuuOKieUf9p8","type":"message","createdAt":"$D2025-06-15T17:37:54.196Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"af8JsZ1dqPmaaJDs7jK1CrWr9JvFPqqK","parentId":"IeARwC6Th9wKIuwWtJoHcLRIf8SI1T8f","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-15T18:02:22.700Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_KgDwWUHngnu","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"gjrDH6DJfPNz6WfJKSPsflJtzmew2hHF","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"af8JsZ1dqPmaaJDs7jK1CrWr9JvFPqqK","type":"message","createdAt":"$D2025-06-15T18:02:22.701Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"bZa7fbKukLFVdqPz8hsGq5VHydB1E09v","parentId":"gjrDH6DJfPNz6WfJKSPsflJtzmew2hHF","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-15T18:09:22.378Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"nIZfbReTgVou0wxbesctOPINXM3Nh9HG","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"bZa7fbKukLFVdqPz8hsGq5VHydB1E09v","type":"message","createdAt":"$D2025-06-15T18:09:22.379Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"XffmLA8HOd2pVknQH9wPiq8y6O1gzD1V","parentId":"nIZfbReTgVou0wxbesctOPINXM3Nh9HG","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-15T18:17:10.292Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_jCCYkkT4H64","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"OLqicA0zw1lxp3fGkQ2Ri1ljRvI758ry","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"XffmLA8HOd2pVknQH9wPiq8y6O1gzD1V","type":"message","createdAt":"$D2025-06-15T18:17:10.293Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Pc6ZSjY271UkIwiWtISAIbp7xcXddBaC","parentId":"OLqicA0zw1lxp3fGkQ2Ri1ljRvI758ry","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-15T18:21:19.261Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_BiURmZzjWoO","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"BfHn15FdjEWF8DEGnX9HUc8XPUc20KmW","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Pc6ZSjY271UkIwiWtISAIbp7xcXddBaC","type":"message","createdAt":"$D2025-06-15T18:21:19.262Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"TlOlKzmC1GnXTp4g3weaYinbRUpFEC77","parentId":"BfHn15FdjEWF8DEGnX9HUc8XPUc20KmW","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-15T18:30:19.673Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_Ho73Vr3uNQk","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"vw1u6LFew4WX5JOZOOa9hmDvy6caSD8Z","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"TlOlKzmC1GnXTp4g3weaYinbRUpFEC77","type":"message","createdAt":"$D2025-06-15T18:30:19.674Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"WU14RaEiIEdamfavZ4XkIeUgHz2XtC1y","parentId":"BpwhDOzelmj8VY3qy0Ii7RIh7UC4Pbvu","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-06-15T18:38:26.639Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_ecGxnazy4XG","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"lxS7XO406ZRlz6Usk65SsZzdoAItC81k","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"WU14RaEiIEdamfavZ4XkIeUgHz2XtC1y","type":"message","createdAt":"$D2025-06-15T18:38:26.640Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"l7RaNWc5obITCwVhe53jLxksTqZoG7hl","parentId":"lxS7XO406ZRlz6Usk65SsZzdoAItC81k","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-08-07T07:46:34.370Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_nbXe9vqKPeD","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"BnpIJS5DQ3vuGTfqLi4lZEE12df8eGn3","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"l7RaNWc5obITCwVhe53jLxksTqZoG7hl","type":"message","createdAt":"$D2025-08-07T07:46:34.371Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Xktt9QbcaSwHhByr4rLBuX58rX1yuNnf","parentId":"BnpIJS5DQ3vuGTfqLi4lZEE12df8eGn3","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-12-11T09:59:44.042Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_m1r7Owg40yN","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"p5zlk25FNu6jNxPPE6dLZHqBIlVMSxO0","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"Xktt9QbcaSwHhByr4rLBuX58rX1yuNnf","type":"message","createdAt":"$D2025-12-11T09:59:44.043Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"jpbBqq8kfZ3QSWJ9XcDibnHSLGOrk9Zz","parentId":"p5zlk25FNu6jNxPPE6dLZHqBIlVMSxO0","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-12-11T10:23:40.323Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_8os39tH0sGU","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"ArBgzVcu113MVFA9qeT55qrliCZOJjbA","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"jpbBqq8kfZ3QSWJ9XcDibnHSLGOrk9Zz","type":"message","createdAt":"$D2025-12-11T10:23:40.324Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"9mk8AD3lFKYgAHOPu6LrU4B02rtNiTBf","parentId":"ArBgzVcu113MVFA9qeT55qrliCZOJjbA","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-12-11T10:29:32.353Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_zSuxpNJ93by","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"NAI93E9JGcVLLibZsTAHRW5bbLsRGkhq","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"9mk8AD3lFKYgAHOPu6LrU4B02rtNiTBf","type":"message","createdAt":"$D2025-12-11T10:29:32.354Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"EZhf7yDhnWqdKcubGjtW9usR5BMYTBld","parentId":"NAI93E9JGcVLLibZsTAHRW5bbLsRGkhq","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-12-11T11:03:22.410Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_MTPzmrZQd2T","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"4kv0mSfwasC3D8hCzubNbV0S0Kw8te7e","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"EZhf7yDhnWqdKcubGjtW9usR5BMYTBld","type":"message","createdAt":"$D2025-12-11T11:03:22.411Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"USuGV6ZEqReh9trJt71KJi6W4zOyfZUD","parentId":"4kv0mSfwasC3D8hCzubNbV0S0Kw8te7e","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-12-12T16:53:14.656Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_ikjhmSxMN9n","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"Pz2ZQmmDgBTGK9nM6YeS5cuY9pjoxf5D","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"USuGV6ZEqReh9trJt71KJi6W4zOyfZUD","type":"message","createdAt":"$D2025-12-12T16:53:14.657Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"4t5VT8kr16mwgCNplo6ZoB9GIjbr0n6f","parentId":"Pz2ZQmmDgBTGK9nM6YeS5cuY9pjoxf5D","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-12-12T17:29:16.809Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_YhstR7180VF","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"LVRaEeV4H88VDbcmd47AjrAyoZzC47us","v0ModelId":"v0-pro","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"4t5VT8kr16mwgCNplo6ZoB9GIjbr0n6f","type":"message","createdAt":"$D2025-12-12T17:29:16.810Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"3VgouBlgupSl0r3YriLezSSOGAjjWXJU","parentId":"LVRaEeV4H88VDbcmd47AjrAyoZzC47us","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2025-12-12T19:06:48.969Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_BpGLk3SswSc","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"dIK0GuW9ZmoBoWB97SnoyPRiobx4hwud","v0ModelId":"v0-pro","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"3VgouBlgupSl0r3YriLezSSOGAjjWXJU","type":"message","createdAt":"$D2025-12-12T19:06:48.970Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"h1Sz5GYhUncRSOF4c7Tb72GWgihaMSiz","parentId":"dIK0GuW9ZmoBoWB97SnoyPRiobx4hwud","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-02T06:28:36.961Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_Lob1h282LbS","type":"code-project","isVersioned":false},{"blockId":"b_gDJINVEYZld","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"gk7Vbb4lxAbS3EKjGFqAdGQCcks0pJ0G","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"h1Sz5GYhUncRSOF4c7Tb72GWgihaMSiz","type":"message","createdAt":"$D2026-03-02T06:28:36.962Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"5SD5AQDnCO4Mmi04WhhWNeKbHynJmLzS","parentId":"gk7Vbb4lxAbS3EKjGFqAdGQCcks0pJ0G","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-02T06:32:15.689Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_AIT2BjGlJ3d","type":"code-project","isVersioned":false},{"blockId":"b_4ho5PjCyiai","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"lKrD9b5dCMYT61GtZbmjxplf0phBGCoo","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"5SD5AQDnCO4Mmi04WhhWNeKbHynJmLzS","type":"message","createdAt":"$D2026-03-02T06:32:15.690Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"hEQQqFHUnHuaFLPaSiG8E64NgqxaGLx5","parentId":"lKrD9b5dCMYT61GtZbmjxplf0phBGCoo","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-02T06:42:01.146Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_3YOqGCudfCw","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"H8DjO9OkJNRNUwBodnoAONiNg5toF48C","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"hEQQqFHUnHuaFLPaSiG8E64NgqxaGLx5","type":"message","createdAt":"$D2026-03-02T06:42:01.147Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"SoE3lWoNcCg5ltgfKXc9zf5p6S2kuG7U","parentId":"H8DjO9OkJNRNUwBodnoAONiNg5toF48C","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-02T07:29:21.748Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_DCMFNPXRocG","type":"code-project","isVersioned":false},{"blockId":"b_XKJAzllmeYH","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"TIY7iwK4dfQ3UvuL5I5HZ5Ub5eJWq8yK","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"SoE3lWoNcCg5ltgfKXc9zf5p6S2kuG7U","type":"message","createdAt":"$D2026-03-02T07:29:21.749Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"rNo7TFDuqi5Yz5L50o3aqvX2NVMIIDYC","parentId":"TIY7iwK4dfQ3UvuL5I5HZ5Ub5eJWq8yK","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-02T07:40:11.979Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_oUqYISs9W39","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"5yFSdUQzS7N8mPDERWlh9eVQnwHlUuoa","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"rNo7TFDuqi5Yz5L50o3aqvX2NVMIIDYC","type":"message","createdAt":"$D2026-03-02T07:40:11.980Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"GgRS0MKdQ9MKNvX1VqTbwFsUY20a8Enq","parentId":"5yFSdUQzS7N8mPDERWlh9eVQnwHlUuoa","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-02T07:42:14.563Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_jwebyhwAO1U","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"XQKwdqmEycsPS4Ymyt715zSlOC84amKd","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"GgRS0MKdQ9MKNvX1VqTbwFsUY20a8Enq","type":"message","createdAt":"$D2026-03-02T07:42:14.564Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"uOzl9qYXbRhHX5uiWwKx2NLfNb5xiFrP","parentId":"XQKwdqmEycsPS4Ymyt715zSlOC84amKd","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-13T21:28:31.603Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_Z4BfTsnvPWx","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"5SpYmh6rq7PjVBrA56WdapQ9Hza8v8Af","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"uOzl9qYXbRhHX5uiWwKx2NLfNb5xiFrP","type":"message","createdAt":"$D2026-03-13T21:28:31.604Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"niKusnlqNt5DWCYVMrtwEJd9KIgZIAwa","parentId":"5SpYmh6rq7PjVBrA56WdapQ9Hza8v8Af","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-13T21:30:09.390Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_y8Gk9kziKdv","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"uHPr16U5IDCDgYYF4WhpbKrlWqbrTzAB","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"niKusnlqNt5DWCYVMrtwEJd9KIgZIAwa","type":"message","createdAt":"$D2026-03-13T21:30:09.391Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"poct6rQBoMI6UKobqndHopjcw1UjOHrd","parentId":"uHPr16U5IDCDgYYF4WhpbKrlWqbrTzAB","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-14T07:45:37.217Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_TPumM1ksSoD","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"ACPoXWVpCA8rTSpH8RBXmnZJgB9q14Zb","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"poct6rQBoMI6UKobqndHopjcw1UjOHrd","type":"message","createdAt":"$D2026-03-14T07:45:37.218Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"5ascy2zfYor92H2ZfpRCSr6SfrAVeLCx","parentId":"ACPoXWVpCA8rTSpH8RBXmnZJgB9q14Zb","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-14T07:55:51.553Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_Sc3dF13XGjG","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"kMZPWoIpAjeu6IIqP7pNMRcdrrSyAtvm","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"5ascy2zfYor92H2ZfpRCSr6SfrAVeLCx","type":"message","createdAt":"$D2026-03-14T07:55:51.554Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"b03UDliCBVvDGKITnyDZJJlAylyUWhPr","parentId":"kMZPWoIpAjeu6IIqP7pNMRcdrrSyAtvm","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-03-14T08:14:35.312Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_BeCeBtDlyLy","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"eE6BBUBLg9RCbBkoLKxDeqaFkitAU3gn","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"b03UDliCBVvDGKITnyDZJJlAylyUWhPr","type":"message","createdAt":"$D2026-03-14T08:14:35.313Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"5nDs4IXpsBue0cW7VWwf949300sQl3en","parentId":"eE6BBUBLg9RCbBkoLKxDeqaFkitAU3gn","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-05-19T20:50:31.801Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_gHqbspJznux","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"3tpU13GeEApR515FUgxrGIVjCX42sPhj","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"5nDs4IXpsBue0cW7VWwf949300sQl3en","type":"message","createdAt":"$D2026-05-19T20:50:31.802Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"TJvb7EDpl5U6pa058hxTnfm5I9pm8XfP","parentId":"3tpU13GeEApR515FUgxrGIVjCX42sPhj","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-05-19T20:55:40.765Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_cTRujYnqjRO","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"VgoCrhLfO4J7nMX4ljmz8Q9S8JRJeW5G","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"TJvb7EDpl5U6pa058hxTnfm5I9pm8XfP","type":"message","createdAt":"$D2026-05-19T20:55:40.766Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"5p4XzaLJnkhNQSEV1BItT2jzPrxa0iUg","parentId":"VgoCrhLfO4J7nMX4ljmz8Q9S8JRJeW5G","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-06-06T07:52:01.659Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_qEDVrJ6zFgJ","type":"code-project","isVersioned":false},{"blockId":"b_RcOTd9LwNR5","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"VkwNG1PjrpKvCwsAlltFwfBB1Ykjd2Rn","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"5p4XzaLJnkhNQSEV1BItT2jzPrxa0iUg","type":"message","createdAt":"$D2026-06-06T07:52:01.660Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"XA4zfbFyAG83gYSp0cq2JerPIYJNO6zz","parentId":"VkwNG1PjrpKvCwsAlltFwfBB1Ykjd2Rn","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-06-06T07:55:23.344Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_Uc2amvDFo74","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"X1aEZ9SImRNjb5LtwcZESNBnI9QZB3TK","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"XA4zfbFyAG83gYSp0cq2JerPIYJNO6zz","type":"message","createdAt":"$D2026-06-06T07:55:23.345Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"8qbbY2XcuagK77J60RkoAybgbRttZyq6","parentId":"X1aEZ9SImRNjb5LtwcZESNBnI9QZB3TK","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-06-07T07:21:00.222Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_EuOk3VN7Vfb","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"mvFKs6yJ4Sz5DdZTfOaY65OlPGTXMo8v","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"8qbbY2XcuagK77J60RkoAybgbRttZyq6","type":"message","createdAt":"$D2026-06-07T07:21:00.223Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"hLC5yvnKL0UcLo2XJLd8INKJGk0MSgZf","parentId":"mvFKs6yJ4Sz5DdZTfOaY65OlPGTXMo8v","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-06-07T07:46:46.609Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_vntu5cPws1K","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"kXGv9V4hPVYsdDlbCgGBl3LBMgrD0dz3","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"hLC5yvnKL0UcLo2XJLd8INKJGk0MSgZf","type":"message","createdAt":"$D2026-06-07T07:46:46.610Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"ETdz8II2UjcWDCS9QSIaAI9n79K6EAFw","parentId":"kXGv9V4hPVYsdDlbCgGBl3LBMgrD0dz3","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-07-26T17:14:14.256Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"mGeCuAgNaNbMiUj5x55Tcl9Hy4NrM6ja","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"ETdz8II2UjcWDCS9QSIaAI9n79K6EAFw","type":"message","createdAt":"$D2026-07-26T17:14:14.257Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"QCVYnX3hVuSXDMmXreu95nKxLkgTfNj9","parentId":"mGeCuAgNaNbMiUj5x55Tcl9Hy4NrM6ja","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-07-26T17:18:45.977Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"oTyr99sQqDoadqp6ec5qVl2nS8Gh1hcm","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"QCVYnX3hVuSXDMmXreu95nKxLkgTfNj9","type":"message","createdAt":"$D2026-07-26T17:18:45.978Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"tys3DZjWlO7YpdcwzNb9cXU1TZDK8Wiq","parentId":"oTyr99sQqDoadqp6ec5qVl2nS8Gh1hcm","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-07-26T17:20:45.776Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_rMkJ588Dlvq","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"mPs1aRf7G0MsSN79YBWs7I8rtHdCKmfE","v0ModelId":"v0-max","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"tys3DZjWlO7YpdcwzNb9cXU1TZDK8Wiq","type":"message","createdAt":"$D2026-07-26T17:20:45.777Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"Pulling changes from v0/ghassan8080-b4f12364 in www.tekamul.link-fe."}],"version":1},"role":"user","id":"6oroY55nhqYbw0wnxNjsMReQi4gNjQfd","parentId":"mPs1aRf7G0MsSN79YBWs7I8rtHdCKmfE","type":"pull-changes","authorId":"HNKMLravGSHCXCY627GkHUhe","createdAt":"$D2026-07-26T17:27:12.694Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"I pulled the latest changes from "],["code",{},"v0/ghassan8080-b4f12364"],["text",{}," in "],["code",{},"www.tekamul.link-fe"],["text",{},"."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_BM5hDWlbDlG","parts":[{"type":"code-project","isVersioned":true,"isSourceless":true,"changedFiles":[],"source":"[V0_FILE]tsx:file=\"empty.tsx\"\n...","latestDeploymentInfo":"$11b:0:1","lastDeployedAt":"2026-07-26T17:27:12.821Z","sourceVersionKey":"v_1_qa16o_s3","needsBlockSource":false,"isAllImages":false,"blockId":"b_BM5hDWlbDlG","meta":{"type":"code-project","taskNameActive":"Pulling changes","taskNameComplete":"Pulled changes","project":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Pulling changes","taskNameComplete":"Pulled changes"},"id":"block-b_BM5hDWlbDlG"}]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"qomkCmuFD6uUTWokgjFIulMUiIDmii3U","gitRevision":null,"streaming":false,"finishReason":null,"parentId":"6oroY55nhqYbw0wnxNjsMReQi4gNjQfd","type":"pull-changes","workMetrics":{"diffMap":{}},"createdAt":"$D2026-07-26T17:27:12.695Z","updatedAt":"$D2026-07-26T17:27:12.807Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"Update the footer text to be exactly \"غسان عبد الواحد عبد الله — البصرة, Iraq\". No other styling or layout was changed."}],"version":1},"role":"user","id":"IeFJFd2SeiRCKfnFVWyTxKrTSHjM0wCC","attachments":[],"parentId":"qomkCmuFD6uUTWokgjFIulMUiIDmii3U","type":"message","authorId":"HNKMLravGSHCXCY627GkHUhe","createdAt":"$D2026-07-29T08:24:31.334Z"},{"v0ModelId":"v0-max","content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"createdAt":1785313482425,"finishedAt":1785313483451,"lastPartSentAt":1785313483431,"taskNameActive":"Reading footer text","taskNameComplete":"Read footer text","toolCallId":"toolu_01RweGw63guwmcz5YjgPwdmW","agentTurnId":"turn_W6rEv1LwHSVuB2fK","filePath":null,"id":"X54tZZI9l8TNGdHw","type":"task-read-file-v1","parts":[{"type":"reading-file","filePath":"components/modern-landing.tsx"},{"type":"reading-file","filePath":"components/modern-landing.tsx","offset":1379,"limit":8}]}}],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_UlZZTc00Uij","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"components/modern-landing.tsx","baseName":"modern-landing.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]tsx:file=\"components/modern-landing.tsx\" \nGENERATING","latestDeploymentInfo":"$11b:1:1","lastDeployedAt":"2026-07-29T08:25:55.093Z","sourceVersionKey":"v_1_j0sdi_s3","needsBlockSource":true,"isAllImages":false,"blockId":"b_UlZZTc00Uij","meta":{"taskNameActive":"Updating footer text","taskNameComplete":"Updated footer text","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Updating footer text","taskNameComplete":"Updated footer text"},"id":"block-b_UlZZTc00Uij"}],["p",{},["text",{},"Updated the footer text to read exactly \"غسان عبد الواحد عبد الله — البصرة, Iraq\". No other styling or layout was changed."]],["AssistantMessageContentPart",{"part":{"createdAt":1785313521312,"finishedAt":1785313534614,"lastPartSentAt":1785313534593,"id":"PAGXTyBDq4efetkm","type":"task-diagnostics-v1","blockId":"b_UlZZTc00Uij","parts":[{"type":"fetching-diagnostics"},{"type":"diagnostics-passed"}]}}]]],[1,{"retiredFileTasks":[{"id":"UmjBmRy6WZizsyNG","taskType":"task-edit-file-v1"}]}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"J2grjmp4wcbHuwvcH7M6Kp4E2nyXRxPf","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"IeFJFd2SeiRCKfnFVWyTxKrTSHjM0wCC","type":"message","creditCost":1.868196,"workMetrics":{"diffMap":{"components/modern-landing.tsx":{"addedLines":1,"removedLines":1}},"linesRead":8,"agentActions":2},"createdAt":"$D2026-07-29T08:24:31.335Z","updatedAt":"$D2026-07-29T08:25:34.690Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"Pulling changes from v0/ghassan8080-d3572099 in www.tekamul.link-fe."}],"version":1},"role":"user","id":"FyceO6rYKG318zuiMeq7LWviwiarS5Do","parentId":"J2grjmp4wcbHuwvcH7M6Kp4E2nyXRxPf","type":"pull-changes","authorId":"HNKMLravGSHCXCY627GkHUhe","createdAt":"$D2026-07-29T08:26:34.363Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"I pulled the latest changes from "],["code",{},"v0/ghassan8080-d3572099"],["text",{}," in "],["code",{},"www.tekamul.link-fe"],["text",{},"."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_GwbfcvnQ6uV","parts":[{"type":"code-project","isVersioned":true,"isSourceless":true,"changedFiles":[{"fileName":".github/workflows/deploy.yml","baseName":"deploy.yml","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":".gitignore","baseName":".gitignore","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"README.md","baseName":"README.md","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/globals.css","baseName":"globals.css","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/layout.tsx","baseName":"layout.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/pricing/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/privacy/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/subscribe/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/subscription/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components.json","baseName":"components.json","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/arabic-landing.tsx","baseName":"arabic-landing.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/landing-page.tsx","baseName":"landing-page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/merged-landing.tsx","baseName":"merged-landing.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/modern-landing.tsx","baseName":"modern-landing.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/navbar.tsx","baseName":"navbar.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/pricing-plans.tsx","baseName":"pricing-plans.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/privacy-policy.tsx","baseName":"privacy-policy.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/subscribe-form.tsx","baseName":"subscribe-form.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/subscription-details.tsx","baseName":"subscription-details.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/subscription-page.tsx","baseName":"subscription-page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/theme-provider.tsx","baseName":"theme-provider.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/accordion.tsx","baseName":"accordion.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/alert-dialog.tsx","baseName":"alert-dialog.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/alert.tsx","baseName":"alert.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/aspect-ratio.tsx","baseName":"aspect-ratio.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/avatar.tsx","baseName":"avatar.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/badge.tsx","baseName":"badge.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/breadcrumb.tsx","baseName":"breadcrumb.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/button-group.tsx","baseName":"button-group.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/button.tsx","baseName":"button.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/calendar.tsx","baseName":"calendar.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/card.tsx","baseName":"card.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/carousel.tsx","baseName":"carousel.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/chart.tsx","baseName":"chart.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/checkbox.tsx","baseName":"checkbox.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/collapsible.tsx","baseName":"collapsible.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/command.tsx","baseName":"command.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/context-menu.tsx","baseName":"context-menu.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/dialog.tsx","baseName":"dialog.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/drawer.tsx","baseName":"drawer.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/dropdown-menu.tsx","baseName":"dropdown-menu.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/empty.tsx","baseName":"empty.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/field.tsx","baseName":"field.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/form.tsx","baseName":"form.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/hover-card.tsx","baseName":"hover-card.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/input-group.tsx","baseName":"input-group.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/input-otp.tsx","baseName":"input-otp.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/input.tsx","baseName":"input.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/item.tsx","baseName":"item.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/kbd.tsx","baseName":"kbd.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/label.tsx","baseName":"label.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/menubar.tsx","baseName":"menubar.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/navigation-menu.tsx","baseName":"navigation-menu.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/pagination.tsx","baseName":"pagination.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/popover.tsx","baseName":"popover.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/progress.tsx","baseName":"progress.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/radio-group.tsx","baseName":"radio-group.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/resizable.tsx","baseName":"resizable.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/scroll-area.tsx","baseName":"scroll-area.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/select.tsx","baseName":"select.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/separator.tsx","baseName":"separator.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/sheet.tsx","baseName":"sheet.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/sidebar.tsx","baseName":"sidebar.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/skeleton.tsx","baseName":"skeleton.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/slider.tsx","baseName":"slider.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/sonner.tsx","baseName":"sonner.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/spinner.tsx","baseName":"spinner.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/switch.tsx","baseName":"switch.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/table.tsx","baseName":"table.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/tabs.tsx","baseName":"tabs.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/textarea.tsx","baseName":"textarea.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/toast.tsx","baseName":"toast.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/toaster.tsx","baseName":"toaster.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/toggle-group.tsx","baseName":"toggle-group.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/toggle.tsx","baseName":"toggle.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/tooltip.tsx","baseName":"tooltip.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/use-mobile.tsx","baseName":"use-mobile.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"components/ui/use-toast.ts","baseName":"use-toast.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"hooks/use-mobile.ts","baseName":"use-mobile.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"hooks/use-toast.ts","baseName":"use-toast.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"lib/utils.ts","baseName":"utils.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"next.config.mjs","baseName":"next.config.mjs","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"package.json","baseName":"package.json","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"page-editor.tsx","baseName":"page-editor.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"postcss.config.mjs","baseName":"postcss.config.mjs","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/ar00hsecmonyomwak56b0hymksw9ui.html","baseName":"ar00hsecmonyomwak56b0hymksw9ui.html","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"styles/globals.css","baseName":"globals.css","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"tailwind.config.ts","baseName":"tailwind.config.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"tsconfig.json","baseName":"tsconfig.json","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/apple-icon.png","baseName":"apple-icon.png","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/icon-dark-32x32.png","baseName":"icon-dark-32x32.png","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/icon-light-32x32.png","baseName":"icon-light-32x32.png","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/icon.svg","baseName":"icon.svg","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/placeholder-logo.png","baseName":"placeholder-logo.png","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/placeholder-logo.svg","baseName":"placeholder-logo.svg","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/placeholder-user.jpg","baseName":"placeholder-user.jpg","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/placeholder.jpg","baseName":"placeholder.jpg","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"public/placeholder.svg","baseName":"placeholder.svg","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"$120","latestDeploymentInfo":"$11b:2:1","lastDeployedAt":"2026-07-29T08:26:34.572Z","sourceVersionKey":"v_1_lrqm0_s3","needsBlockSource":false,"isAllImages":false,"blockId":"b_GwbfcvnQ6uV","meta":{"type":"code-project","taskNameActive":"Pulling changes","taskNameComplete":"Pulled changes","project":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Pulling changes","taskNameComplete":"Pulled changes"},"id":"block-b_GwbfcvnQ6uV"}]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"BmS0EToMzb4ol9k3LlBdwwEI7DIBNieN","gitRevision":null,"streaming":false,"finishReason":"git-pull","parentId":"FyceO6rYKG318zuiMeq7LWviwiarS5Do","type":"pull-changes","workMetrics":{"diffMap":{}},"createdAt":"$D2026-07-29T08:26:34.364Z","updatedAt":"$D2026-07-29T08:26:34.563Z"}],"lastSyncedAt":1792845089862,"undo":null,"activeForkKey":["94aFuR3bdJZM8VdpNfBnaxhOjJXSwkKF","k21aznEbuuN4QqO5DpS0tkfFkpkPcsyz","4vVYsayHT8Op2jvr9cepJ0mra7i41ahi","XgpMADCRNDHWKyOp4OrxwOzbXim6nYvn","wlqCcZG0OBKjVjp3q0aLokZUYTXHdD3l","GVMwHjhVv2F3rqiMMnEKYJMwMLKQIGlE","iitidW5u6xNOhYKmUybm4AV7IdeCyhgu","lCbQgAsxTjtcBvS4d8eeWvE4X3omdcev","J67EzRkAOpRCGgrv47wNugQOOKvnerNa","tTDf90JiEzFB5ChD1Vw9i0FqmgKBdqpS","8TSSL1dcoOuj9XBIKHpGZlcN5fLPzNnj","SxRLSLASO2HtGQiINMI7S1pOV9LLJXQW","Ci2cGfzAJuZe9i2YWOjgirWUzMvsnIiv","Gy2bLj52j1IYYjmBYGy8FHjUxnuDx4HD","I6ijDE5q4c4c3dBI0ZOvJpTCkz3KyRo7","3CykfKnbSbjz8tYOQC5R4PaJCVk05HtE","X7SOl9P5wnAYoLxhTyQbqT6oKsTjiCFU","QKxmzZCSeeBe88IXKD39qpZhxeOJUvee","p12Cgq7ydENYO7OyyphsoXjGLqkdujPY","RliOUYqByaxVnJWQ8BjXcFvTAP0OjoNr","crSxLZD7D34795BU6LvH1ZJ4L8oHPtS6","Yy8Fod1DzIT8py5jw1O7VWKqG4j9yxsk","mZKQOp6stf6GNqcmmFzO5sRTlA2fTdFE","dBW7lRzGiOiPncnmQ5rQjB3ySyVyd8UL","EP0tZ0yVhFJyiMdGhpyottQQdn0u1cUc","dgOWHfVLhnhlkmVN2nRI2vukMge7nmMH","p7WrzEKYifBRLxo9WnSFueBMpkIf87Xy","z9NUfaZujD1Yxcpou6Ws9GfWqmTJrZRo","2Z28ZICrf1pSxy9VxZ5haRAbYkfQhvxo","2oG4JlgAoIVpsnMhgYbBsS33fer3qXTD","fKsGGodlBarUaWtJXXd81CL94VvcOE2E","I8IDUKci9y5QZAIyVRuTdnuEZ2YQ1KhP","4lJe1GWFGDcBeWq5WXHEinKYu8304Zan","yH3ybgtQsRFlEGAZcyon0FB0bD1LAa6v","je7tjc5qSj2Ou6KMuULIjXlj6BOUxbbv","eN9VIjtaVojjeZo8Bm9sUroFotJBe9eD","R0wad23ZzjF9g2NGougnMKjwKJWbFYjY","9q6UVJhW0lQUtOyaXFfCF9fCjjkRMkqg","n314593hl1DlVjaE9qNNqLS3Bybs2qmr","zNAV4N8xtlKp5cMK7gsUUA3CLBZ4qLTK","EJbrK2PTMKK9veimRoF0kbgJTs2qCDnW","nNk4Wv8SCTr4PsO8NEIvdU9ZXvcmczLO","WaFASCGJp7RwbODmtP5SwD0qM1hXSGxr","u9g697lv3ViRGyDDnJ6J7HuTBHHwvCHI","McC4H575oiyJfJMH5fUZnP6PlhsL2qec","IrZKqSCyweKhgf8ggrzPNuYkdGSvlyNd","dIDylwphwUsA2pa1qRV4xWZjdEDNAGaf","K4lwBGINJlUEGmfJ1vTzs687mRE9Rb6H","G0iO1FjQdzthYjG1t529gn2enIwFkuds","8zUWXJlSciFuOpscGN5RB4HJZ13Mdick","Ynk5Iup06z8CfkKPg9xfZATX2wLoMGjt","Lt7KOKK7Y6KwN4o3XT3Wx3W2z5oLggyU","kjjuBZxNyTreWBCJPrj69AkQ6eQQoqcl","xX11mFif6NjtFhouzR5EBALC3j2VkkcF","xpHhdSFML9DRFyzBUm49F1dHlHum07x1","u9w50Qv9jF93DttNPzJSBQokDS5ABEuy","cV4tGPJjfMCEiCNqmq9bXxd9sDt1Px0t","2O0p3EDmCkBAzroHI7RVKAeimTCe9txN","tVb4d9t9ISvz2SAIPxDRdfNTYPMyUeVg","1NkHiRVHw9EhdPfxiiEAevTVnoRphYn6","sYdQ8ZjhmlpoQv5czEsIKd5BUwzRIKP9","96nAGs0BFoe5Ee6w955ZJLNetdUyACSX","xs2ttbJSRx2zbqbLigmnCWl5ReUCDe2h","x5QXi5AbM5xG5tR3cARiFZPpJ7cjwg2Z","DZ8xUzORJSV5KgesZuJgcNLmD08UvKS0","4s3Issk2QIRavPh8gVMNtJH5ZVQCLbVc","4fkCBAOCNzYtIyldZpX4nmFvUMD7Di4u","WO1hpiPIy2Jzhi2fLfFr7Axqww9BX01X","SNVFXDsyehNiLRhCKUxYgs0TcahUcWoA","vzHboHRUA49zVAM7PDwRGnSGMW6o9SFA","aeERWV7dpyXYxlog9gQR2cAqggI3MIQA","TF4bZWxmKKD0yGZgZTSEacfN8omTApki","j1cGpvOfT8PAgTSIHp2D2CiwOpanMvfS","e5wRIAByoAcEEdVAjj8O08yypykrDyKe","kA6z9fBMDbTbYB0PaSyArCK2KBiC1eU4","PtHREDygRYwWGnXpOmEbEcYnE24HajIE","CYfZJd0sDU5guchzXboy58ATs0Ycy4Pv","ezO9cAehc2YTyRYkfogHO6Akn3r0xnXZ","CJHFqkUzDIYrRRTNLfmLGVqDtuM1VfVj","X4ZTAiuanJ2nHeHruKSJpRxCDyMeHCpg","0H4WTK61Jloe3FyyT3usBKWJ7us5dxd4","uwwLJFYTbGDImHqHugmeUF61PvhUqwYt","ibFe3IPIWPgL4pSCfisGsnN8JXEJTcOE","KeKyxH0o7aBjppPZP7yWfbpCfcx8MxBQ","wY38sPewh4yBXVeWDvRLVnbIQOG8uxKk","MwVJ5Bju8vnpFDl5vaMobTatDhU2BdN9","sqFpVfqicOTo6VmXBztmdHVFraG3DfM8","vmyKKJiknizs8om6Otr9uBbdGEjzH7UI","MBpUxt2rJWaNO2SoEPZcPsP0KbcxG64S","LkJO321LmGbZ3vrBRmYq3sEvtycsUpvp","qpldtg6TyVavlZa12YYzHkJk3FFhHsYj","kpqy0j4aCnVnKIyRS3ucoJOcxzSFXu7v","x34Cz5WuLkvaslfY5FhomoaKxtnJvW3Z","SindFFfLHJxxWgikqZ9oAaza1sT3ErkT","N6u649KhP9mwY9ASlhNFstoY0Gcc7FJq","LTSJDoLhvIptl92KQfBjnaPFB8MQGFpJ","0unTKJiLK7qbdS4R7Rby9QiYednNXW9n","oonvza9w5lUMgzGxcYWSzMbpHAUWXg48","0hZ4upyPkCAm7lu8dSyodsDbwECNTgSI","AiERW0BUxzSSWAcZZhAzadvSfw1elHuH","dJnb0RMbePomqqIUxXSOVn4a0yAfITxR","JK1qv7XVBAuWq0tTuOxk9foZ7kzl5kxc","D0l2qr745GKZUqAtNWSqOhZyhstaaDbX","Wm9DMCaWAgxV97u0p2J7cztdGEhvQ5in","Poh1j8towF9IlqvXAhntFh72vJXDsVoU","SxyQDezciFJ8EE8k36V9pV6pXV6f4OrM","7LQXrIHoL4UNKQCD6u31j8MfeJWJTNuJ","qqJBvk5fig3YX5Xkz7rfhTjvKfY8Mg8u","tKKNND3rQSh52zKvbfXn1ed8q6dZHfLS","R491lTUkXRPsED7J5ONfiqcl6yET5x1M","XYteM3QchnNE4Q1dpicSGwatUd5Xk5Fa","8H2hgWMCuf87LsPMPd2nzArTDL14PaXW","h5FdclwYQ2XpCzH1PxlD9yooYPsxBYGf","0srYHZ5lZC3X1c3uWFfy2OOtgexcOplf","KLhY5MFJ0UkfDSivil8cDr6AIqBgTCvj","jiBOp2Bvf3ISCUCHcLNGlhqyYEYXvcaa","rMqjdXQe90vdkmzLPX0ZtrLySXRCchrR","xvjnQAB3JGskSCaKOojW6xw33YC05nmK","tsFbPR7SiHTWpjwhzRvSTiIdjbSnvVwq","f5DMEHcCxul2EppP8UmSv7x8yXNy7Mht","MIMFWAjVcxFEKnqlewq8BFRezzIsn4M5","kh7c1mOpUj0h6XYHtMof5j178yRUSZWs","dw5bULW1zKgjprT2b9ii7jWGGkTytswz","McJbKw2Hw4jm5e1XEiyi5xbAb1eMujPe","1H2pSBaBluhNVncxysXnUZ7j8iAe97MJ","eHqbYgQy4oSRQ3DPT2sfrqwhBq9wOkpw","S7zvEoKN1CGOxIQmNmVqWs94JLlrq0ah","0hkfYtGFTijz3ROdYF7i8MuZZzthRDRK","vlvbN0MbAODJpxxqLm7bWibDgIAVjESc","pMMslXbOYnxuW5HSCcl3zHcxGb6TeL1q","MFEk6p8KLZGUAxzktD0EDCGMLlEVxHaU","mmMY3pvVwiXMBMC6HqGa1DKePmoVgWzJ","BbhlLlJfdFCZYrM4v2iCMhaJI3TMdH5E","bHApkBdpEeqonWzu77DTMQVvreYjjlER","b4KqPqTtxpLG3zvVqoq2pIeHCeTyITs3","C5KHAZ3hHo0XyEw1HLzalGgduG9iZeRW","IYmvJ2BjNpwqQouOUo1ljYryUG62X49p","nbk3yE3BfuSK2Fh5EnjBNxxWteL1sSEO","FKep4Mit8Y4LQnQB2Upp1wGTWBytdRmG","X3mFZRe1ZcLT9rUVhICMnL7kUcoj1Aw3","6R1FeFkVk8agjVsHjScAqHm4nzaKmfLS","UBs6DbnWiFV3XTxby5Tli1LuvQ347ttj","eHYRipdH0utb7K7LtQ0t5mvgFDkpNkxS","hFIsFMAQbnaIlVa6p1Gw0WpJNEgqx0Dg","lXSG9S6gFkcQ6oan9TIKbw8Fzb1Ds16i","05l4DoPkJ9rafy3jHiDGkgT1YEWKk3aY","zYeFzgnKH6Z1utSsdeXcOLjJUNP52svK","bgV7pGX0PqK49Hj9FIDhP7SJKr4OaFkK","zyi5YYRjqI6wDyFP8loyjauF4VrKq7af","GjDKo67GmgqQCdQzW9MtwUDZecrPfImk","WTiUGYYYgzRhJVhb97JCgHujNPQaCVxC","ckcBMcYlMLobsZiDKSIeqf7bTARhlPuz","tudTVDx9EO9eD5dKWjv6Dz520gcdlTNk","BNbZmR0P16hcdsVd1CpoecfYS50BoXEN","IMwyORoUOPYpP88YY7y3PJBzhsp2dGXK","dA5AWlkyG0OhJtDpsx95NGCILMh3OB4z","InI3OAz7OxoCH8KgwfELZITt07ZolyaO","3Gexhc6ohrBSQk4nMZoWnBRGW7mrxLoB","i8NIWWXVM4TVrqO0TFUtT8SS1jojFFig","1gOs4uS8sNRqFYLqgCasRJ9UvvNlEm4y","AZalXZXqCpFDLkyzLVUHD1wMmzmWzaJ9","BpwhDOzelmj8VY3qy0Ii7RIh7UC4Pbvu","WU14RaEiIEdamfavZ4XkIeUgHz2XtC1y","lxS7XO406ZRlz6Usk65SsZzdoAItC81k","l7RaNWc5obITCwVhe53jLxksTqZoG7hl","BnpIJS5DQ3vuGTfqLi4lZEE12df8eGn3","Xktt9QbcaSwHhByr4rLBuX58rX1yuNnf","p5zlk25FNu6jNxPPE6dLZHqBIlVMSxO0","jpbBqq8kfZ3QSWJ9XcDibnHSLGOrk9Zz","ArBgzVcu113MVFA9qeT55qrliCZOJjbA","9mk8AD3lFKYgAHOPu6LrU4B02rtNiTBf","NAI93E9JGcVLLibZsTAHRW5bbLsRGkhq","EZhf7yDhnWqdKcubGjtW9usR5BMYTBld","4kv0mSfwasC3D8hCzubNbV0S0Kw8te7e","USuGV6ZEqReh9trJt71KJi6W4zOyfZUD","Pz2ZQmmDgBTGK9nM6YeS5cuY9pjoxf5D","4t5VT8kr16mwgCNplo6ZoB9GIjbr0n6f","LVRaEeV4H88VDbcmd47AjrAyoZzC47us","3VgouBlgupSl0r3YriLezSSOGAjjWXJU","dIK0GuW9ZmoBoWB97SnoyPRiobx4hwud","h1Sz5GYhUncRSOF4c7Tb72GWgihaMSiz","gk7Vbb4lxAbS3EKjGFqAdGQCcks0pJ0G","5SD5AQDnCO4Mmi04WhhWNeKbHynJmLzS","lKrD9b5dCMYT61GtZbmjxplf0phBGCoo","hEQQqFHUnHuaFLPaSiG8E64NgqxaGLx5","H8DjO9OkJNRNUwBodnoAONiNg5toF48C","SoE3lWoNcCg5ltgfKXc9zf5p6S2kuG7U","TIY7iwK4dfQ3UvuL5I5HZ5Ub5eJWq8yK","rNo7TFDuqi5Yz5L50o3aqvX2NVMIIDYC","5yFSdUQzS7N8mPDERWlh9eVQnwHlUuoa","GgRS0MKdQ9MKNvX1VqTbwFsUY20a8Enq","XQKwdqmEycsPS4Ymyt715zSlOC84amKd","uOzl9qYXbRhHX5uiWwKx2NLfNb5xiFrP","5SpYmh6rq7PjVBrA56WdapQ9Hza8v8Af","niKusnlqNt5DWCYVMrtwEJd9KIgZIAwa","uHPr16U5IDCDgYYF4WhpbKrlWqbrTzAB","poct6rQBoMI6UKobqndHopjcw1UjOHrd","ACPoXWVpCA8rTSpH8RBXmnZJgB9q14Zb","5ascy2zfYor92H2ZfpRCSr6SfrAVeLCx","kMZPWoIpAjeu6IIqP7pNMRcdrrSyAtvm","b03UDliCBVvDGKITnyDZJJlAylyUWhPr","eE6BBUBLg9RCbBkoLKxDeqaFkitAU3gn","5nDs4IXpsBue0cW7VWwf949300sQl3en","3tpU13GeEApR515FUgxrGIVjCX42sPhj","TJvb7EDpl5U6pa058hxTnfm5I9pm8XfP","VgoCrhLfO4J7nMX4ljmz8Q9S8JRJeW5G","5p4XzaLJnkhNQSEV1BItT2jzPrxa0iUg","VkwNG1PjrpKvCwsAlltFwfBB1Ykjd2Rn","XA4zfbFyAG83gYSp0cq2JerPIYJNO6zz","X1aEZ9SImRNjb5LtwcZESNBnI9QZB3TK","8qbbY2XcuagK77J60RkoAybgbRttZyq6","mvFKs6yJ4Sz5DdZTfOaY65OlPGTXMo8v","hLC5yvnKL0UcLo2XJLd8INKJGk0MSgZf","kXGv9V4hPVYsdDlbCgGBl3LBMgrD0dz3","ETdz8II2UjcWDCS9QSIaAI9n79K6EAFw","mGeCuAgNaNbMiUj5x55Tcl9Hy4NrM6ja","QCVYnX3hVuSXDMmXreu95nKxLkgTfNj9","oTyr99sQqDoadqp6ec5qVl2nS8Gh1hcm","tys3DZjWlO7YpdcwzNb9cXU1TZDK8Wiq","mPs1aRf7G0MsSN79YBWs7I8rtHdCKmfE","6oroY55nhqYbw0wnxNjsMReQi4gNjQfd","qomkCmuFD6uUTWokgjFIulMUiIDmii3U","IeFJFd2SeiRCKfnFVWyTxKrTSHjM0wCC","J2grjmp4wcbHuwvcH7M6Kp4E2nyXRxPf","FyceO6rYKG318zuiMeq7LWviwiarS5Do","BmS0EToMzb4ol9k3LlBdwwEI7DIBNieN"],"lifecycle":{"phase":"idle","persistence":"persisted"},"isAuthor":false,"isRestoring":false,"hashMessageId":null},"@\"active-block\",\"YQEd3UJbgOR\",":{"id":"b_GwbfcvnQ6uV","meta":{"type":"code-project","taskNameActive":"Pulling changes","taskNameComplete":"Pulled changes","project":"Code"},"initial":true,"type":"code-project","messageId":"BmS0EToMzb4ol9k3LlBdwwEI7DIBNieN","language":"typescriptreact","source":"$121","closed":true,"hasSourceBeenEdited":false,"lastDeployedAt":"2026-07-29T08:26:34.572Z","latestDeploymentInfo":"$11b:2:1","isLoading":false,"needsBlockSource":false},"@\"chat:meta\",\"YQEd3UJbgOR\",":{"title":"Webpage_tekamul","authorId":"HNKMLravGSHCXCY627GkHUhe","ownerId":"team_bOWTo12ak2t3UUhXR7fKxIz3","storageEntityType":null,"storageEntityId":null,"vercelProjectId":"prj_5ad9tfNp3CjtE3NeRA1h926yvct3","canWriteToChat":false},"@\"chat:vm-mode\",\"YQEd3UJbgOR\",":false,"@\"chat:vercel-project\",\"YQEd3UJbgOR\",":"$@122","@\"team:sensitive-environment-variable-policy\",\"YQEd3UJbgOR\",":"$@123","@\"block-view\",\"YQEd3UJbgOR\",":true,"integrations:figma":"$@124"},"children":["$L125","$L126","$L127","$L128","$L129"]}]}]}]
</article></body></html>

حلول ذكية باستخدام الذكاء الاصطناعي

حلولنا الجاهزة

خطط الأسعار

جاهز للبدء؟

{currentContent.hero.title}

{currentContent.whyUs.title}

{reason.title}

{currentContent.solutions.title}

{currentContent.pricing.title}

{currentContent.testimonials.title}

{currentContent.contact.title}

نحن نبني وندير بنيتك التحتية على السحابة أو في موقعك

خدماتنا

حلول الذكاء الاصطناعي الجاهزة

جرب نموذجك مجانًا قبل اتخاذ القرار

خطط الأسعار

جاهز للبدء؟

{currentContent.hero.title} {currentContent.hero.titleHighlight}

{currentContent.services.title}

{currentContent.smartStore.title}

{currentContent.smartStore.pricingTitle}

{currentContent.smartStore.cta}

{currentContent.solutions.title}

{currentContent.pricing.title}

{currentContent.pricing.title}

{currentContent.contact.title}

{currentContent.contact.whatsapp}

{currentContent.contact.email}

{currentContent.contact.support}