[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import { ThemeProvider } from '@/components/theme-provider' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Awelle - AI Legal Executive', description: 'AI-powered legal executive that drafts, reviews, and monitors contracts', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@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", "@vercel/analytics": "1.3.1", "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.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.29.2", "@phosphor-icons/react": "2.1.10" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/images/legal-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Dark%20Theme%20Legal%20Contract%20Illustration%201-DSpMjA4j6mPNswReN7WZwOUdNwlaM1.png" isMerged="true" [V0_FILE]png:file="public/images/lexgen-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/LexGen-Logo-DNZqtkeqyRIqEVcTLUojLcVFmvYtVV.png" isMerged="true" [V0_FILE]png:file="public/images/bg-gradient.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/32.png-fJwZGSPXCXHQtneyWxBqgLw5t4KnCM.jpeg" isMerged="true" [V0_FILE]png:file="public/images/legal-contract-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Dark%20Theme%20Legal%20Contract%20Illustration%201-DSpMjA4j6mPNswReN7WZwOUdNwlaM1.png" isMerged="true" [V0_FILE]png:file="public/images/create-account-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1769511638048-GOJKqi7WE5cGxQuvEkq1tkxwKEmhPt.png" isMerged="true" [V0_FILE]png:file="public/images/onboarding-step1-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vertical%20Paper%20Pattern%20Variation%201-gL6MiJnyPq5wzn9kRO5Q4sHlufHILn.png" isMerged="true" [V0_FILE]png:file="public/images/onboarding-step2-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Construction%20Contract%20Paper%20Art-ybdhbjvMm4oVBv4fItomRzyCVIwuze.png" isMerged="true" [V0_FILE]typescriptreact:file="components/contracts/contract-selector.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Scale, Search, ArrowLeft, FileText, Clock, HelpCircle, ChevronRight, Sparkles, FileCheck, Users, Building2, } from "lucide-react" import { ThemeToggle } from "@/components/theme-toggle" interface ContractSelectorProps { onBack: () => void onSelect: (contractId: string) => void } type Category = "all" | "employment" | "commercial" type Complexity = "simple" | "moderate" | "complex" interface ContractTemplate { id: string name: string category: "employment" | "commercial" complexity: Complexity questions: number estimatedTime: string description: string popular?: boolean } const templates: ContractTemplate[] = [ { id: "apprentice-trainee", name: "Apprentice/Trainee Agreement", category: "employment", complexity: "moderate", questions: 15, estimatedTime: "5 min", description: "For apprenticeship and traineeship arrangements", }, { id: "casual-employment", name: "Casual Employment Agreement", category: "employment", complexity: "moderate", questions: 15, estimatedTime: "5 min", description: "For casual employment arrangements", popular: true, }, { id: "commission-agreement", name: "Commission Agreement", category: "employment", complexity: "moderate", questions: 15, estimatedTime: "5 min", description: "For commission-based employment", }, { id: "confidentiality-deed", name: "Confidentiality Deed (Long Form)", category: "employment", complexity: "complex", questions: 20, estimatedTime: "8 min", description: "Comprehensive confidentiality protection", }, { id: "contractor-agreement", name: "Contractor Agreement", category: "employment", complexity: "moderate", questions: 15, estimatedTime: "5 min", description: "For independent contractor engagements", popular: true, }, { id: "employment-fulltime", name: "Employment Agreement (Full-Time)", category: "employment", complexity: "moderate", questions: 15, estimatedTime: "5 min", description: "Standard full-time employment contract", popular: true, }, { id: "employment-fulltime-long", name: "Full-Time Employment (Long Form)", category: "employment", complexity: "complex", questions: 25, estimatedTime: "10 min", description: "Detailed full-time employment contract", }, { id: "employment-management", name: "Full-Time Employment (Management)", category: "employment", complexity: "complex", questions: 20, estimatedTime: "8 min", description: "For management and executive positions", }, { id: "labour-hire", name: "Labour Hire Agreement", category: "employment", complexity: "moderate", questions: 15, estimatedTime: "5 min", description: "For labour hire arrangements", }, { id: "nda-mutual", name: "Non-Disclosure Agreement (Mutual)", category: "commercial", complexity: "simple", questions: 8, estimatedTime: "3 min", description: "Mutual confidentiality between parties", popular: true, }, { id: "part-time-basic", name: "Part-Time Employment (Basic)", category: "employment", complexity: "moderate", questions: 15, estimatedTime: "5 min", description: "Standard part-time employment contract", }, { id: "part-time-management", name: "Part-Time Employment (Management)", category: "employment", complexity: "complex", questions: 18, estimatedTime: "7 min", description: "Part-time management positions", }, { id: "professional-employment", name: "Professional Employment Agreement", category: "employment", complexity: "complex", questions: 20, estimatedTime: "8 min", description: "For professional and specialist roles", }, ] const complexityConfig: Record = { simple: { label: "Simple", className: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20", }, moderate: { label: "Moderate", className: "bg-blue-500/10 text-blue-400 border-blue-500/20", }, complex: { label: "Complex", className: "bg-amber-500/10 text-amber-400 border-amber-500/20", }, } const categoryConfig: Record<"employment" | "commercial", { label: string; icon: typeof Users }> = { employment: { label: "Employment", icon: Users }, commercial: { label: "Commercial", icon: Building2 }, } export function ContractSelector({ onBack, onSelect }: ContractSelectorProps) { const [searchQuery, setSearchQuery] = useState("") const [selectedCategory, setSelectedCategory] = useState("all") const filteredTemplates = templates.filter((template) => { const matchesSearch = template.name.toLowerCase().includes(searchQuery.toLowerCase()) const matchesCategory = selectedCategory === "all" || template.category === selectedCategory return matchesSearch && matchesCategory }) const categories: { id: Category; label: string }[] = [ { id: "all", label: "All" }, { id: "employment", label: "Employment" }, { id: "commercial", label: "Commercial" }, ] return (

{/* Header */}

Select Contract Type

{/* Main Content */}

{/* Search and Filters */}

setSearchQuery(e.target.value)} className="pl-12 h-12 bg-card border-border/50 text-foreground placeholder:text-muted-foreground" />

{categories.map((category) => ( ))}

{/* Templates List */}

{filteredTemplates.map((template) => { const category = categoryConfig[template.category] const CategoryIcon = category.icon return ( ) })}

{/* Empty State */} {filteredTemplates.length === 0 && (

No templates found

Try adjusting your search or filter criteria.

)}

) } [V0_FILE]typescriptreact:file="components/auth/create-account.tsx" isMerged="true" "use client" import React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent } from "@/components/ui/card" import { Eye, EyeOff } from "lucide-react" import { ThemeToggle } from "@/components/theme-toggle" interface CreateAccountProps { onCreateAccount: () => void onSignIn: () => void onAboutUs?: () => void onLogoClick?: () => void } export function CreateAccount({ onCreateAccount, onSignIn, onAboutUs, onLogoClick }: CreateAccountProps) { const [formData, setFormData] = useState({ fullName: "", email: "", password: "", }) const [showPassword, setShowPassword] = useState(false) const [acceptTerms, setAcceptTerms] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (acceptTerms) { onCreateAccount() } } return (

{/* Left Side - Form */}

{/* Theme Toggle - Top Right */}

{/* Form Content */}

{/* Logo and Title Section */}

Create your Awelle account

Start generating professional, AI-assisted contracts in minutes.

{/* Form Card */}

Join Awelle

Build faster with trusted, cited answers.

{/* Full Name */}

Full name setFormData({ ...formData, fullName: e.target.value })} className="bg-muted border-border/50 text-foreground placeholder:text-muted-foreground" required />

{/* Work Email */}

Work email setFormData({ ...formData, email: e.target.value })} className="bg-muted border-border/50 text-foreground placeholder:text-muted-foreground" required />

{/* Password */}

Password

setFormData({ ...formData, password: e.target.value })} className="bg-muted border-border/50 text-foreground placeholder:text-muted-foreground pr-10" required />

{/* Terms and Conditions */}

setAcceptTerms(checked as boolean)} className="mt-0.5 data-[state=checked]:bg-accent data-[state=checked]:border-accent border-solid border-foreground" /> I accept the{" "} Terms and Conditions {" "} and{" "} Privacy Policy

{/* Submit Button */}

{/* Sign In Link */}

Already have an account?{" "}

{/* Right Side - Image */}

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { resolvedTheme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) // useEffect only runs on the client, so now we can safely show the UI useEffect(() => { setMounted(true) }, []) if (!mounted) { return ( ) } const toggleTheme = () => { setTheme(resolvedTheme === "dark" ? "light" : "dark") } return ( ) } [V0_FILE]typescriptreact:file="components/contracts/clause-context-panel.tsx" isMerged="true" "use client" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" interface ClauseContextPanelProps { clauseId: string | null clauseTitle: string recommendation: { title: string description: string alternatives: Array<{ id: string label: string description: string }> } | null onClose: () => void } export function ClauseContextPanel({ clauseId, clauseTitle, recommendation, onClose, }: ClauseContextPanelProps) { if (!clauseId || !recommendation) return null return ( null ) } [V0_FILE]typescriptreact:file="components/contracts/agent-chat-input.tsx" isMerged="true" 'use client' import React from "react" import { useState } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Send, X } from 'lucide-react' interface AgentChatInputProps { onSendMessage: (message: string) => void onClose: () => void context?: 'global' | 'clause' } const defaultSuggestions = [ 'Summarize risks in this contract', 'Review this contract for legal issues', 'Suggest improvements for clarity and balance', 'Explain consequences of risky clauses', ] export function AgentChatInput({ onSendMessage, onClose, context = 'global' }: AgentChatInputProps) { const [message, setMessage] = useState('') const [suggestions, setSuggestions] = useState(defaultSuggestions) const handleSuggestionClick = (suggestion: string) => { setMessage(suggestion) } const handleSendMessage = () => { if (message.trim()) { onSendMessage(message) setMessage('') } } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return (

{/* Header */}

Ask Agent

{context === 'clause' ? 'Clause-specific context' : 'Global contract context'}

{/* Input */}

setMessage(e.target.value)} onKeyPress={handleKeyPress} className="bg-muted" />

{/* Suggestions */}

Suggestions:

{suggestions.map((suggestion, idx) => ( ))}

) } [V0_FILE]typescriptreact:file="components/contracts/agent-button.tsx" isMerged="true" 'use client' import React from 'react' import { ChevronDown, Sparkles } from 'lucide-react' interface AgentButtonProps { onAgentClick: () => void onDropdownClick: () => void dropdownDisabled?: boolean } export function AgentButton({ onAgentClick, onDropdownClick, dropdownDisabled = false }: AgentButtonProps) { return (

{/* Agent Text Button */} {/* Divider */}

{/* Dropdown Arrow Button */}

) } [V0_FILE]xml:file="public/images/lexgen-logo.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/contracts/contract-analysis-dialog.tsx" isMerged="true" 'use client' import React, { useState, useEffect } from 'react' import { Button } from '@/components/ui/button' import { Textarea } from '@/components/ui/textarea' import { Send, X, Plus, Info } from 'lucide-react' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select' interface ContractAnalysisDialogProps { isOpen: boolean onClose: () => void onStartChat: (message: string) => void clauseId?: string recommendation?: any } const suggestionChips = [ 'Summarize key risks in this contract', 'Review confidentiality and liability clauses', 'Suggest improvements for unclear terms', 'Explain payment and termination conditions', 'Identify potential legal issues', ] export function ContractAnalysisDialog({ isOpen, onClose, onStartChat, clauseId, recommendation }: ContractAnalysisDialogProps) { const [message, setMessage] = useState('') const [selectedAgent, setSelectedAgent] = useState('lexy') const handleSuggestionClick = (suggestion: string) => { onStartChat(suggestion) setMessage('') onClose() } const handleSend = () => { if (message.trim()) { onStartChat(message) setMessage('') onClose() } } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault() handleSend() } } // Handle escape key to close useEffect(() => { const handleEscape = (event: KeyboardEvent) => { if (event.key === 'Escape') { onClose() } } if (isOpen) { document.addEventListener('keydown', handleEscape) } return () => { document.removeEventListener('keydown', handleEscape) } }, [isOpen, onClose]) if (!isOpen) return null return (

{/* Backdrop with 70% black opacity */}

{/* Dialog */}

{/* Header */}

Contract Analysis

AI-powered contract review and recommendations

{/* Textarea Input */}

setMessage(e.target.value)}
              onKeyDown={handleKeyPress}
              className="min-h-[100px] bg-transparent border-0 text-white placeholder:text-white/40 resize-none focus-visible:ring-0 text-sm"
              autoFocus
            />
            
            {/* Bottom toolbar */}
            <div className="flex items-center justify-between pt-2 border-t border-white/10">
              <div className="flex items-center gap-2">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 text-white/70 hover:text-white hover:bg-white/10"
                >
                  <Plus className="w-4 h-4" />
                </Button>
                
                {/* Agent Selector */}
                <Select value={selectedAgent} onValueChange={setSelectedAgent}>
                  <SelectTrigger className="w-28 h-8 text-xs bg-white/10 border-white/20 text-white">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="lexy">Lexy</SelectItem>
                    <SelectItem value="info">Info AI</SelectItem>
                    <SelectItem value="review">Review AI</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button
                onClick={handleSend}
                disabled={!message.trim()}
                size="icon"
                className="h-8 w-8 rounded-full bg-white/20 hover:bg-white/30 text-white disabled:opacity-30"
              >
                <Send className="w-4 h-4" />
              </Button>
            </div>
          </div>

{/* Suggestion Pills */}
          <div className="space-y-2">
            {suggestionChips.slice(0, 3).map((chip, idx) => (
              <button
                key={idx}
                onClick={() => handleSuggestionClick(chip)}
                className="w-full px-4 py-2.5 rounded-full text-sm font-medium bg-white/10 hover:bg-white/15 text-white border border-white/10 transition-all flex items-center justify-between group"
              >
                <span>{chip}</span>
                <Plus className="w-4 h-4 text-white/40 group-hover:text-white/60 transition-colors" />
              </button>
            ))}
          </div>

{/* Disclaimer */}
          <div className="flex items-center gap-2 text-white/50 text-xs">
            <Info className="w-3.5 h-3.5 flex-shrink-0" />
            <p>AI outputs can be misleading or wrong</p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/contracts/recommendation-dialog.tsx" isMerged="true"
'use client'

import React, { useState, useRef, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge'
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Send, X, Plus, Zap, AlertTriangle, CheckCircle2 } from 'lucide-react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

interface ChatMessage {
  id: string
  role: 'user' | 'assistant'
  content: string
  timestamp: Date
}

interface RecommendationDialogProps {
  isOpen: boolean
  onClose: () => void
  title: string
  description: string
  severity: "high" | "medium" | "low"
  clause: string
  alternatives?: Array<{
    id: string
    label: string
    description: string
  }>
  onApplyChange?: (alternativeId: string) => void
}

const getSeverityBadgeColor = (severity: string) => {
  switch (severity) {
    case "high":
      return "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/30"
    case "medium":
      return "bg-yellow-500/15 text-yellow-700 dark:text-yellow-400 border-yellow-500/30"
    case "low":
      return "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/30"
    default:
      return "bg-muted text-muted-foreground"
  }
}

const getSeverityLabel = (severity: string) => {
  switch (severity) {
    case "high":
      return "High Risk"
    case "medium":
      return "Medium Risk"
    case "low":
      return "Info"
    default:
      return ""
  }
}

export function RecommendationDialog({ 
  isOpen, 
  onClose, 
  title,
  description,
  severity,
  clause,
  alternatives = [],
  onApplyChange
}: RecommendationDialogProps) {
  const [message, setMessage] = useState('')
  const [selectedAgent, setSelectedAgent] = useState('lexy')
  const [selectedAlternative, setSelectedAlternative] = useState(alternatives[0]?.id || '')
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: '1',
      role: 'assistant',
      content: `I can help you understand and improve this clause. What would you like to know about "${title}"?`,
      timestamp: new Date(),
    }
  ])
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Auto-scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages])

const handleSend = () => {
    if (!message.trim()) return

const newMessage: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: message,
      timestamp: new Date(),
    }

setMessages([...messages, newMessage])
    setMessage('')

// Simulate AI response
    setTimeout(() => {
      const aiResponse: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: `I understand you're asking about: "${message}". Based on my analysis of this clause, I recommend considering the suggested alternatives below for better legal protection.`,
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, aiResponse])
    }, 1000)
  }

const handleSuggestionClick = (suggestion: string) => {
    const newMessage: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: suggestion,
      timestamp: new Date(),
    }

setMessages([...messages, newMessage])

// Simulate AI response
    setTimeout(() => {
      const aiResponse: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: `Great question! Regarding "${suggestion}" - this clause currently lacks specificity which could lead to disputes. I recommend selecting one of the alternatives below to strengthen your position.`,
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, aiResponse])
    }, 1000)
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

const handleApplyChange = () => {
    if (onApplyChange && selectedAlternative) {
      onApplyChange(selectedAlternative)
      onClose()
    }
  }

// Handle escape key to close
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose()
      }
    }

if (isOpen) {
      document.addEventListener('keydown', handleEscape)
    }

return () => {
      document.removeEventListener('keydown', handleEscape)
    }
  }, [isOpen, onClose])

if (!isOpen) return null

const suggestionChips = [
    'Explain the risks of this clause',
    'What changes would you recommend?',
    'How does this compare to industry standard?',
  ]

return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-background/70 backdrop-blur-sm"
        onClick={onClose}
      />
      
      {/* Dialog */}
      <div className="relative z-10 w-[680px] max-w-[95vw] animate-in fade-in zoom-in-95 duration-200">
        <div className="bg-card border border-border rounded-2xl shadow-xl flex flex-col h-[700px] max-h-[90vh]">
          {/* Header with Title and Close Button - Fixed */}
          <div className="flex items-start justify-between gap-3 px-6 py-4 border-b border-border shrink-0">
            <div className="flex-1">
              <h2 className="text-xl font-semibold text-foreground mb-1">{title}</h2>
              <p className="text-sm text-secondary">{description}</p>
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={onClose}
              className="h-8 w-8 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground shrink-0 transition-colors"
            >
              <X className="w-4 h-4" />
            </Button>
          </div>

{/* Scrollable Middle Content */}
          <div className="flex-1 overflow-y-auto">
            {/* Recommended Actions */}
            {alternatives.length > 0 && (
              <div className="px-6 py-4">
                <div className="flex items-center justify-between mb-3">
                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                    Recommended Actions
                  </p>
                  <Button
                    size="sm"
                    onClick={handleApplyChange}
                    disabled={!selectedAlternative}
                    className="h-8 px-3 gap-1.5 bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  >
                    <Zap className="w-3.5 h-3.5" />
                    Apply Change
                  </Button>
                </div>
                <RadioGroup value={selectedAlternative} onValueChange={setSelectedAlternative}>
                  <div className="space-y-2">
                    {alternatives.map((alt) => (
                      <div 
                        key={alt.id} 
                        onClick={() => setSelectedAlternative(alt.id)}
                        className={`flex items-start gap-3 p-3 rounded-lg border transition-all cursor-pointer ${
                          selectedAlternative === alt.id
                            ? 'border-primary/60 bg-primary/10'
                            : 'border-border hover:border-border/60 hover:bg-muted'
                        }`}
                      >
                        <RadioGroupItem
                          value={alt.id}
                          id={`dialog-alt-${alt.id}`}
                          className="mt-0.5 flex-shrink-0"
                        />
                        <Label
                          htmlFor={`dialog-alt-${alt.id}`}
                          className="flex-1 cursor-pointer flex flex-col gap-1 items-start text-left"
                        >
                          <span className="font-semibold text-sm text-foreground leading-tight">{alt.label}</span>
                          <span className="text-xs text-muted-foreground leading-relaxed">
                            {alt.description}
                          </span>
                        </Label>
                      </div>
                    ))}
                  </div>
                </RadioGroup>
              </div>
            )}

{/* Chat Interface */}
            {messages.length > 1 && (
              <div className="px-6 py-4 space-y-3 border-t border-border">
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                  Chat with Lexy
                </p>
                {messages.map((msg) => (
                  <div key={msg.id}>
                    <div className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                      <div
                        className={`max-w-[85%] px-3.5 py-2.5 rounded-xl text-sm ${
                          msg.role === 'user'
                            ? 'bg-primary text-primary-foreground rounded-br-sm shadow-md'
                            : 'bg-muted text-foreground rounded-bl-sm border border-border shadow-sm'
                        }`}
                      >
                        <p className="leading-relaxed whitespace-pre-wrap">{msg.content}</p>
                      </div>
                    </div>
                  </div>
                ))}
                <div ref={messagesEndRef} />
              </div>
            )}
          </div>

{/* Fixed Bottom Section - Input and Suggestions */}
          <div className="border-t border-border shrink-0">
            {/* Suggestion Chips - Horizontal Scrollable */}
            <div className="px-6 pt-3 pb-3">
              <div className="flex gap-2 overflow-x-auto scrollbar-hide">
                {suggestionChips.map((chip, idx) => (
                  <button
                    key={idx}
                    onClick={() => handleSuggestionClick(chip)}
                    className="px-3 py-1.5 rounded-full text-xs font-medium bg-muted hover:bg-accent/20 text-foreground border border-border transition-all whitespace-nowrap flex items-center gap-1.5 shrink-0"
                  >
                    <span>{chip}</span>
                    <Plus className="w-3 h-3" />
                  </button>
                ))}
              </div>
            </div>

{/* Chat Input - Compact */}
            <div className="px-6 pb-3">
              <div className="border border-border rounded-lg bg-muted/30 p-2">
                <Textarea
                  placeholder="Ask about contract clauses, risks, or get recommendations..."
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  onKeyDown={handleKeyPress}
                  className="min-h-[40px] max-h-[80px] bg-transparent border-0 text-foreground text-sm placeholder:text-muted-foreground/60 resize-none focus-visible:ring-0 p-0"
                />
                <div className="flex items-center justify-between pt-1.5 border-t border-border/50 mt-1.5">
                  <div className="flex items-center gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                    >
                      <Plus className="w-3.5 h-3.5" />
                    </Button>
                    <Select value={selectedAgent} onValueChange={setSelectedAgent}>
                      <SelectTrigger className="w-24 h-7 text-xs bg-muted border-border text-foreground hover:bg-muted/80 transition-colors">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent className="bg-card border-border">
                        <SelectItem value="lexy">Lexy</SelectItem>
                        <SelectItem value="info">Info AI</SelectItem>
                        <SelectItem value="review">Review AI</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <Button
                    onClick={handleSend}
                    disabled={!message.trim()}
                    size="icon"
                    className="h-7 w-7 rounded-md bg-primary hover:bg-primary/90 text-primary-foreground disabled:opacity-30 transition-colors"
                  >
                    <Send className="w-3.5 h-3.5" />
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/contracts/recommendation-card.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import {
  AlertTriangle,
  ChevronDown,
  MessageCircle,
  Zap,
  CheckCircle2,
  Info,
} from "lucide-react"
import { RecommendationDialog } from "./recommendation-dialog"

interface RecommendationCardProps {
  id: string
  title: string
  severity: "high" | "medium" | "low"
  description: string
  clause: string
  alternatives?: Array<{
    id: string
    label: string
    description: string
  }>
  onApplyChange?: (alternativeId: string) => void
  onAskAgent?: () => void
  onViewConsequences?: () => void
  onCardClick?: () => void
  clauseId?: string
  onScrollToClause?: (clauseId: string) => void
  isExpanded?: boolean
  isApplied?: boolean
  onUndo?: () => void
}

const getSeverityColor = (severity: string, isExpanded: boolean) => {
  switch (severity) {
    case "high":
      return isExpanded 
        ? "border-red-500/40 shadow-lg shadow-red-500/20" 
        : "border-red-500/30 shadow-sm shadow-red-500/5"
    case "medium":
      return isExpanded 
        ? "border-yellow-500/40 shadow-lg shadow-yellow-500/20" 
        : "border-yellow-500/30 shadow-sm shadow-yellow-500/5"
    case "low":
      return isExpanded 
        ? "border-blue-500/40 shadow-lg shadow-blue-500/20" 
        : "border-blue-500/30 shadow-sm shadow-blue-500/5"
    default:
      return "border-border"
  }
}

const getSeverityIcon = (severity: string) => {
  switch (severity) {
    case "high":
      return <AlertTriangle className="w-4 h-4" />
    case "medium":
      return <AlertTriangle className="w-4 h-4" />
    case "low":
      return <CheckCircle2 className="w-4 h-4" />
    default:
      return null
  }
}

export function RecommendationCard({
  id,
  title,
  severity,
  description,
  clause,
  alternatives = [],
  onApplyChange,
  onAskAgent,
  onViewConsequences,
  onCardClick,
  clauseId,
  onScrollToClause,
  isExpanded: externalIsExpanded,
  isApplied = false,
  onUndo,
}: RecommendationCardProps) {
  const [selectedAlternative, setSelectedAlternative] = useState(
    alternatives[0]?.id || ""
  )
  const [internalIsExpanded, setInternalIsExpanded] = useState(false)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  
  // Use external control if provided, otherwise use internal state
  const isExpanded = externalIsExpanded !== undefined ? externalIsExpanded : internalIsExpanded

const setIsExpanded = setInternalIsExpanded

const handleApplyChange = () => {
    if (onApplyChange) {
      onApplyChange(selectedAlternative)
    }
  }

const handleCardClick = () => {
    // Only update internal state if not externally controlled
    if (externalIsExpanded === undefined) {
      setInternalIsExpanded(!internalIsExpanded)
    }
    onCardClick?.()
    
    // Scroll to clause when card is expanded
    if (!isExpanded && clauseId && onScrollToClause) {
      onScrollToClause(clauseId)
    }
  }

return (
    <Card
      className={`border-2 cursor-pointer transition-all duration-300 ${
        isApplied 
          ? 'bg-muted/30 border-border/40 opacity-75' 
          : `bg-card ${!isExpanded && 'hover:shadow-md'} ${getSeverityColor(severity, isExpanded)}`
      }`}
      onClick={handleCardClick}
    >
      <CardContent className="p-4 py-0">
        {/* Applied Status Label */}
        {isApplied && (
          <div className="flex items-center gap-2 mb-3 pb-3 border-b border-border/40">
            <CheckCircle2 className="w-4 h-4 text-primary/70" />
            <span className="text-sm font-semibold text-muted-foreground">Applied</span>
          </div>
        )}

{/* Header */}
        <div className="flex items-start justify-between gap-3 mb-3">
          <div className="flex items-start gap-3 flex-1 min-w-0">
            <div className="shrink-0 mt-0.5">{getSeverityIcon(severity)}</div>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2 mb-1">
                <h4 className={`font-semibold text-sm leading-snug ${isApplied ? 'text-muted-foreground' : 'text-foreground'}`}>
                  {title}
                </h4>
                {!isApplied && (
                  <Badge variant="outline" className={`text-[10px] font-semibold px-2 py-0.5 ${getSeverityBadgeColor(severity)}`}>
                    {getSeverityLabel(severity)}
                  </Badge>
                )}
              </div>
              <p className="text-xs text-muted-foreground mt-1">{description}</p>
            </div>
          </div>
          <ChevronDown
            className={`w-4 h-4 text-muted-foreground shrink-0 transition-transform ${
              isExpanded ? "rotate-180" : ""
            }`}
          />
        </div>

{/* Expandable Content */}
        {isExpanded && (
          <div className="space-y-4 pt-3 border-t border-border/50 animate-in slide-in-from-top-2 duration-300">
            {/* Current Clause */}
            <div>
              <p className="text-xs font-medium text-muted-foreground mb-2">
                Current clause:
              </p>
              <div className="p-3 bg-muted/50 rounded border border-border/50">
                <p className="text-xs text-foreground italic">"{clause}"</p>
              </div>
            </div>

{/* Alternatives */}
            {alternatives.length > 0 && (
              <div>
                <p className="text-xs font-semibold text-muted-foreground mb-3 uppercase tracking-wide">
                  Suggested Alternatives
                </p>
                <RadioGroup value={selectedAlternative} onValueChange={setSelectedAlternative}>
                  <div className="space-y-3">
                    {alternatives.map((alt) => (
                      <div 
                        key={alt.id} 
                        className="flex items-start gap-3.5 p-3.5 rounded-lg border-2 border-border/60 hover:border-primary/40 hover:bg-primary/5 hover:shadow-sm transition-all cursor-pointer"
                      >
                        <RadioGroupItem
                          value={alt.id}
                          id={`alt-${id}-${alt.id}`}
                          className="mt-0.5 flex-shrink-0"
                        />
                        <Label
                          htmlFor={`alt-${id}-${alt.id}`}
                          className="flex-1 cursor-pointer flex flex-col gap-1.5 items-start text-left"
                        >
                          <span className="font-semibold text-sm text-foreground leading-tight text-left">{alt.label}</span>
                          <span className="text-xs text-muted-foreground leading-relaxed text-left">
                            {alt.description}
                          </span>
                        </Label>
                      </div>
                    ))}
                  </div>
                </RadioGroup>
              </div>
            )}

{/* Actions */}
            <div className="pt-4 border-t border-border/50 space-y-3">
              <div className="grid grid-cols-2 gap-3">
                <Button
                  size="sm"
                  className="h-9 gap-1.5 bg-primary text-primary-foreground hover:bg-primary/90 font-semibold"
                  onClick={(e) => {
                    e.stopPropagation()
                    setIsDialogOpen(true)
                  }}
                >
                  <MessageCircle className="w-3.5 h-3.5" />
                  <span>Ask Lexy</span>
                </Button>
                {isApplied ? (
                  <Button
                    size="sm"
                    variant="outline"
                    className="h-9 gap-1.5 bg-transparent hover:border-border hover:bg-muted/50 text-muted-foreground hover:text-foreground border-border"
                    onClick={(e) => {
                      e.stopPropagation()
                      onUndo?.()
                    }}
                  >
                    <span className="text-foreground">Undo</span>
                  </Button>
                ) : (
                  <Button
                    size="sm"
                    variant="outline"
                    className="h-9 gap-1.5 bg-transparent border-[1.5px] border-white/80 hover:border-white hover:bg-muted/50"
                    onClick={(e) => {
                      e.stopPropagation()
                      onViewConsequences?.()
                    }}
                  >
                    <AlertTriangle className="w-3.5 h-3.5" />
                    <span className="font-normal text-gray-100">View Issues</span>
                  </Button>
                )}
              </div>
              {/* Info text under Apply Change button */}
              {!isApplied && (
                <div className="flex items-center gap-1.5 text-muted-foreground">
                  <Info className="w-3.5 h-3.5 shrink-0" />
                  <span className="text-xs">Click Ask Lexy to discuss and apply changes</span>
                </div>
              )}
            </div>
          </div>
        )}
      </CardContent>

{/* Recommendation Dialog */}
      <RecommendationDialog
        isOpen={isDialogOpen}
        onClose={() => setIsDialogOpen(false)}
        title={title}
        description={description}
        severity={severity}
        clause={clause}
        alternatives={alternatives}
        onApplyChange={(altId) => {
          onApplyChange?.(altId)
          setIsDialogOpen(false)
        }}
      />
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/contracts/floating-chat.tsx" isMerged="true"
'use client'

import React, { useState, useEffect, useRef } from 'react'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Send, X, Plus } from 'lucide-react'
import Image from 'next/image'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

interface ChatMessage {
  id: string
  role: 'user' | 'assistant'
  content: string
  timestamp: Date
}

interface FloatingChatProps {
  isOpen: boolean
  onClose: () => void
  clauseTitle?: string
  recommendation?: any
  context?: 'global' | 'clause'
}

export function FloatingChat({
  isOpen,
  onClose,
  clauseTitle,
  recommendation,
  context = 'clause'
}: FloatingChatProps) {
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const [inputValue, setInputValue] = useState('')
  const [selectedAgent, setSelectedAgent] = useState('lexy')
  const [messages, setMessages] = useState<ChatMessage[]>([])

// Initialize or update messages when recommendation changes
  useEffect(() => {
    console.log('[v0] FloatingChat useEffect - recommendation:', recommendation)
    console.log('[v0] FloatingChat useEffect - clauseTitle:', clauseTitle)
    console.log('[v0] FloatingChat useEffect - isOpen:', isOpen)

if (!isOpen) return

const initialMessages: ChatMessage[] = []

// Add recommendation context as initial message if exists
    if (recommendation) {
      let contextContent = `${recommendation.title}\n\n${recommendation.description}`
      
      if (recommendation.clause) {
        contextContent += `\n\nCurrent clause:\n${recommendation.clause}`
      }
      
      if (recommendation.alternatives && recommendation.alternatives.length > 0) {
        contextContent += '\n\nSuggested alternatives:'
        recommendation.alternatives.forEach((alt: any, index: number) => {
          contextContent += `\n${index + 1}. ${alt.label}\n   ${alt.description}`
        })
      }

console.log('[v0] FloatingChat contextContent:', contextContent)

initialMessages.push({
        id: '0',
        role: 'assistant',
        content: contextContent,
        timestamp: new Date(),
      })
    }

// Add greeting message
    initialMessages.push({
      id: '1',
      role: 'assistant',
      content: 'Hello! I can help you analyze this contract. What would you like to know?',
      timestamp: new Date(),
    })

setMessages(initialMessages)
  }, [recommendation, clauseTitle, isOpen])

// Auto-scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages])

const handleSendMessage = () => {
    if (!inputValue.trim()) return

const newMessage: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: inputValue,
      timestamp: new Date(),
    }

setMessages([...messages, newMessage])
    setInputValue('')

// Simulate AI response
    setTimeout(() => {
      const aiResponse: ChatMessage = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: `I understand you're asking about: "${inputValue}". Let me analyze that for you...`,
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, aiResponse])
    }, 1000)
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-50 pointer-events-none">
      <div className="absolute right-6 top-20 bottom-6 w-[480px] pointer-events-auto bg-card border border-border rounded-2xl shadow-xl flex flex-col overflow-hidden animate-in slide-in-from-right duration-300">
        {/* Header - Fixed */}
        <div className="border-b border-border px-5 py-3 flex items-center justify-between shrink-0 bg-card">
          <div className="flex items-center gap-2.5">
            <Image 
              src="/images/lexgen-logo-transparent-201.png" 
              alt="Lexgen" 
              width={24} 
              height={24}
              className="h-6 w-6 object-contain"
            />
            <h3 className="text-base font-bold text-foreground">Chat with Lexy</h3>
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={onClose}
            className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors"
          >
            <X className="w-4 h-4" />
          </Button>
        </div>

{/* Messages Area - Scrollable */}
        <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3 bg-background">
          {messages.map((msg) => (
            <div key={msg.id}>
              <div className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                <div
                  className={`max-w-[90%] px-4 py-2.5 rounded-xl text-sm ${
                    msg.role === 'user'
                      ? 'bg-primary text-primary-foreground rounded-br-sm shadow-md'
                      : 'bg-card text-foreground rounded-bl-sm border border-border shadow-sm'
                  }`}
                >
                  <p className="leading-relaxed whitespace-pre-wrap">{msg.content}</p>
                </div>
              </div>
            </div>
          ))}
          <div ref={messagesEndRef} />
        </div>

{/* Input Area - Fixed */}
        <div className="border-t border-border px-5 py-3 shrink-0 bg-card">
          <div className="border border-border rounded-lg bg-muted/30 p-2.5">
            <Textarea
              placeholder="Ask about this clause..."
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={handleKeyPress}
              className="min-h-[36px] max-h-[90px] bg-transparent border-0 text-foreground text-sm placeholder:text-muted-foreground/60 resize-none focus-visible:ring-0 p-0"
            />

{/* Bottom toolbar */}
            <div className="flex items-center justify-between pt-2 border-t border-border/50 mt-2">
              <div className="flex items-center gap-2">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                >
                  <Plus className="w-3.5 h-3.5" />
                </Button>

{/* Agent Selector */}
                <Select value={selectedAgent} onValueChange={setSelectedAgent}>
                  <SelectTrigger className="w-24 h-7 text-xs bg-muted border-border text-foreground hover:bg-muted/80 transition-colors">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-card border-border">
                    <SelectItem value="lexy">Lexy</SelectItem>
                    <SelectItem value="info">Info AI</SelectItem>
                    <SelectItem value="review">Review AI</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button
                onClick={handleSendMessage}
                disabled={!inputValue.trim()}
                size="icon"
                className="h-7 w-7 rounded-md bg-primary hover:bg-primary/90 text-primary-foreground disabled:opacity-30 transition-colors"
              >
                <Send className="w-3.5 h-3.5" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/contracts/agent-dropdown-chat.tsx" isMerged="true"
'use client'

import React, { useState, useEffect, useRef } from 'react'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Send, X, Plus, Info } from 'lucide-react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

interface AgentDropdownChatProps {
  isOpen: boolean
  onClose: () => void
  onStartChat: (message: string) => void
}

const suggestionChips = [
  'Summarize key risks in this contract',
  'Review confidentiality and liability clauses',
  'Suggest improvements for unclear terms',
  'Explain payment and termination conditions',
  'Identify potential legal issues',
]

export function AgentDropdownChat({ isOpen, onClose, onStartChat }: AgentDropdownChatProps) {
  const [message, setMessage] = useState('')
  const [selectedAgent, setSelectedAgent] = useState('lexy')
  const dropdownRef = useRef<HTMLDivElement>(null)

const handleSuggestionClick = (suggestion: string) => {
    onStartChat(suggestion)
    setMessage('')
    onClose()
  }

const handleSend = () => {
    if (message.trim()) {
      onStartChat(message)
      setMessage('')
      onClose()
    }
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

// Handle click outside to close
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        onClose()
      }
    }

if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside)
    }

return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [isOpen, onClose])

if (!isOpen) return null

return (
    <div className="absolute top-12 left-1/2 -translate-x-1/2 z-50 w-[680px]" ref={dropdownRef}>
      <div className="bg-card border border-border rounded-2xl shadow-xl p-5 space-y-4">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-xl font-semibold text-foreground">Contract Analysis</h2>
            <p className="text-sm text-secondary mt-0.5">AI-powered contract review and recommendations</p>
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={onClose}
            className="h-8 w-8 rounded-full bg-muted hover:bg-muted/80 text-foreground shrink-0 transition-colors"
          >
            <X className="w-4 h-4" />
          </Button>
        </div>

{/* Textarea Input - Compact */}
        <div className="border border-border rounded-lg bg-muted/30 p-2.5">
          <Textarea
            placeholder="Ask about contract clauses, risks, or get recommendations..."
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            onKeyDown={handleKeyPress}
            className="min-h-[80px] max-h-[120px] bg-transparent border-0 text-foreground text-sm placeholder:text-muted-foreground/60 resize-none focus-visible:ring-0 p-0"
            autoFocus
          />
          
          {/* Bottom toolbar */}
          <div className="flex items-center justify-between pt-2 border-t border-border/50 mt-2">
            <div className="flex items-center gap-2">
              <Button
                variant="ghost"
                size="icon"
                className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
              >
                <Plus className="w-3.5 h-3.5" />
              </Button>
              
              {/* Agent Selector */}
              <Select value={selectedAgent} onValueChange={setSelectedAgent}>
                <SelectTrigger className="w-24 h-7 text-xs bg-muted border-border text-foreground hover:bg-muted/80 transition-colors">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="bg-card border-border">
                  <SelectItem value="lexy">Lexy</SelectItem>
                  <SelectItem value="info">Info AI</SelectItem>
                  <SelectItem value="review">Review AI</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <Button
              onClick={handleSend}
              disabled={!message.trim()}
              size="icon"
              className="h-7 w-7 rounded-md bg-primary hover:bg-primary/90 text-primary-foreground disabled:opacity-30 transition-colors"
            >
              <Send className="w-3.5 h-3.5" />
            </Button>
          </div>
        </div>

{/* Suggestion Pills - Below Input, Wrapped Horizontally */}
        <div className="flex flex-wrap gap-2">
          {suggestionChips.map((chip, idx) => (
            <button
              key={idx}
              onClick={() => handleSuggestionClick(chip)}
              className="px-3 py-1.5 rounded-full text-xs font-medium bg-muted hover:bg-accent/20 text-foreground border border-border transition-all flex items-center gap-1.5"
            >
              <span>{chip}</span>
              <Plus className="w-3 h-3" />
            </button>
          ))}
        </div>

{/* Disclaimer */}
        <div className="flex items-center gap-2 text-muted-foreground text-xs">
          <Info className="w-3.5 h-3.5 flex-shrink-0" />
          <p>AI outputs can be misleading or wrong</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/contracts/agent-chat-panel.tsx" isMerged="true"
'use client'

import React, { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Send, X, RotateCcw, Plus } from 'lucide-react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

interface ChatMessage {
  id: string
  role: 'user' | 'assistant'
  content: string
  timestamp: Date
}

interface AgentChatPanelProps {
  isOpen: boolean
  context?: 'global' | 'clause'
  clauseTitle?: string
  recommendation?: {
    id: string
    title: string
    severity: 'high' | 'medium' | 'low'
    description: string
    clause: string
    alternatives?: Array<{
      id: string
      label: string
      description: string
    }>
  }
  onClose: () => void
  initialMessage?: string | null
}

export function AgentChatPanel({ isOpen, context = 'global', clauseTitle, recommendation, onClose, initialMessage }: AgentChatPanelProps) {
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: '1',
      role: 'assistant',
      content: 'Hello! I\'m your legal contract assistant. How can I help you with this contract today?',
      timestamp: new Date(),
    },
  ])
  const [inputValue, setInputValue] = useState('')
  const [selectedAgent, setSelectedAgent] = useState('lexy')
  const [hasProcessedInitialMessage, setHasProcessedInitialMessage] = useState(false)

// Process initial message from dropdown chat
  React.useEffect(() => {
    if (initialMessage && !hasProcessedInitialMessage && isOpen) {
      const userMessage: ChatMessage = {
        id: Date.now().toString(),
        role: 'user',
        content: initialMessage,
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, userMessage])
      setHasProcessedInitialMessage(true)

// Simulate assistant response
      setTimeout(() => {
        const assistantMessage: ChatMessage = {
          id: (Date.now() + 1).toString(),
          role: 'assistant',
          content: 'I\'m analyzing your question. This would be a detailed response based on the contract content.',
          timestamp: new Date(),
        }
        setMessages((prev) => [...prev, assistantMessage])
      }, 500)
    }
  }, [initialMessage, hasProcessedInitialMessage, isOpen])

const handleSendMessage = () => {
    if (inputValue.trim()) {
      // Add user message
      const userMessage: ChatMessage = {
        id: Date.now().toString(),
        role: 'user',
        content: inputValue,
        timestamp: new Date(),
      }
      setMessages((prev) => [...prev, userMessage])
      setInputValue('')

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

if (!isOpen) return null

return (
    <div className="w-[420px] border-l border-border bg-card flex flex-col h-full overflow-hidden">
      {/* Header */}
      <div className="border-b border-border px-5 py-3 flex items-center justify-between shrink-0">
        <h3 className="text-base font-semibold text-foreground">Agent</h3>
        <div className="flex items-center gap-2">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setMessages(messages.slice(0, 1))}
            className="text-muted-foreground hover:text-foreground hover:bg-muted gap-1.5 text-sm h-8 transition-colors"
          >
            <RotateCcw className="w-3.5 h-3.5" />
            Clear
          </Button>
          <Button 
            variant="ghost" 
            size="icon" 
            onClick={onClose} 
            className="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
          >
            <X className="w-4 h-4" />
          </Button>
        </div>
      </div>

{/* Conversation History Sidebar (if needed) */}
      {context === 'clause' && clauseTitle && recommendation && (
        <div className="px-5 py-3 border-b border-border bg-muted/30">
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 rounded-full bg-primary" />
              <p className="text-xs font-medium text-muted-foreground">{clauseTitle}</p>
            </div>
            <div className="pl-3.5 space-y-1">
              <p className="text-sm font-medium text-foreground line-clamp-2">{recommendation.title}</p>
              <p className="text-xs text-muted-foreground line-clamp-2">{recommendation.description}</p>
            </div>
          </div>
        </div>
      )}

{/* Messages Area - Scrollable */}
      <div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
        {messages.map((msg, index) => (
          <div key={msg.id} className="space-y-3">
            {/* Show conversation item headers */}
            {index > 0 && msg.role === 'assistant' && (
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <div className="flex items-center gap-1.5">
                  <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
                  <span>Edited cards</span>
                </div>
              </div>
            )}
            
            <div className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
              <div
                className={`max-w-[85%] px-4 py-2.5 rounded-xl text-sm ${
                  msg.role === 'user'
                    ? 'bg-primary text-primary-foreground rounded-br-sm shadow-md'
                    : 'bg-muted text-foreground rounded-bl-sm border border-border shadow-sm'
                }`}
              >
                <p className="leading-relaxed">{msg.content}</p>
              </div>
            </div>

{/* Go back action for assistant messages */}
            {msg.role === 'assistant' && index > 0 && (
              <div className="flex justify-end">
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs text-muted-foreground hover:text-foreground hover:bg-muted gap-1 h-7 transition-colors"
                >
                  <RotateCcw className="w-3 h-3" />
                  Go back
                </Button>
              </div>
            )}
          </div>
        ))}
      </div>

{/* Input - Sticky at bottom - Compact */}
      <div className="border-t border-border px-5 py-3 shrink-0 bg-card">
        <div className="border border-border rounded-lg bg-muted/30 p-2.5">
          <Textarea
            placeholder="Ask about contract clauses, risks, or get recommendations..."
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyDown={handleKeyPress}
            className="min-h-[40px] max-h-[80px] bg-transparent border-0 text-foreground text-sm placeholder:text-muted-foreground/60 resize-none focus-visible:ring-0 p-0"
          />
          
          {/* Bottom toolbar */}
          <div className="flex items-center justify-between pt-1.5 border-t border-border/50 mt-1.5">
            <div className="flex items-center gap-2">
              <Button
                variant="ghost"
                size="icon"
                className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
              >
                <Plus className="w-3.5 h-3.5" />
              </Button>
              
              {/* Agent Selector */}
              <Select value={selectedAgent} onValueChange={setSelectedAgent}>
                <SelectTrigger className="w-24 h-7 text-xs bg-muted border-border text-foreground hover:bg-muted/80 transition-colors">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="bg-card border-border">
                  <SelectItem value="lexy">Lexy</SelectItem>
                  <SelectItem value="info">Info AI</SelectItem>
                  <SelectItem value="review">Review AI</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <Button
              onClick={handleSendMessage}
              disabled={!inputValue.trim()}
              size="icon"
              className="h-7 w-7 rounded-md bg-primary hover:bg-primary/90 text-primary-foreground disabled:opacity-30 transition-colors"
            >
              <Send className="w-3.5 h-3.5" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/contracts/contract-type-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Search } from "lucide-react"

interface ContractType {
  id: string
  name: string
  category: "employment" | "commercial"
  complexity: "low" | "moderate" | "high"
  questions: number
  timeEstimate: string
}

const contractTypes: ContractType[] = [
  {
    id: "apprentice-trainee",
    name: "Apprentice/Trainee Agreement",
    category: "employment",
    complexity: "moderate",
    questions: 15,
    timeEstimate: "5 min"
  },
  {
    id: "casual-employment",
    name: "Casual Employment Agreement",
    category: "employment",
    complexity: "moderate",
    questions: 15,
    timeEstimate: "5 min"
  },
  {
    id: "commission-agreement",
    name: "Commission Agreement",
    category: "employment",
    complexity: "moderate",
    questions: 15,
    timeEstimate: "5 min"
  },
  {
    id: "confidentiality-deed",
    name: "Confidentiality Deed (Long Form)",
    category: "employment",
    complexity: "moderate",
    questions: 15,
    timeEstimate: "5 min"
  },
  {
    id: "contractor-agreement",
    name: "Contractor Agreement",
    category: "employment",
    complexity: "moderate",
    questions: 15,
    timeEstimate: "5 min"
  },
  {
    id: "employment-fulltime",
    name: "Employment Agreement (Full-Time)",
    category: "employment",
    complexity: "moderate",
    questions: 15,
    timeEstimate: "5 min"
  },
  {
    id: "service-agreement",
    name: "Service Agreement",
    category: "commercial",
    complexity: "moderate",
    questions: 12,
    timeEstimate: "4 min"
  },
  {
    id: "nda",
    name: "Non-Disclosure Agreement",
    category: "commercial",
    complexity: "low",
    questions: 10,
    timeEstimate: "3 min"
  },
  {
    id: "vendor-agreement",
    name: "Vendor Agreement",
    category: "commercial",
    complexity: "high",
    questions: 20,
    timeEstimate: "7 min"
  }
]

interface ContractTypeSelectorProps {
  onBack: () => void
  onSelectType: (typeId: string) => void
}

export function ContractTypeSelector({ onBack, onSelectType }: ContractTypeSelectorProps) {
  const [activeFilter, setActiveFilter] = useState<"all" | "employment" | "commercial">("all")
  const [searchQuery, setSearchQuery] = useState("")

const filteredContracts = contractTypes.filter((contract) => {
    const matchesFilter = activeFilter === "all" || contract.category === activeFilter
    const matchesSearch = contract.name.toLowerCase().includes(searchQuery.toLowerCase())
    return matchesFilter && matchesSearch
  })

const getComplexityBadge = (complexity: string) => {
    switch (complexity) {
      case "low":
        return null
      case "moderate":
        return null
      case "high":
        return null
      default:
        return <Badge className="bg-muted text-muted-foreground text-xs">Unknown</Badge>
    }
  }

const getCategoryBadge = (category: string) => {
    switch (category) {
      case "employment":
        return <Badge className="text-xs text-destructive-foreground font-normal opacity-100 bg-[rgba(41,59,55,1)]">Employment</Badge>
      case "commercial":
        return <Badge className="text-xs bg-emerald-900 text-destructive-foreground font-normal">Commercial</Badge>
      default:
        return <Badge className="bg-muted text-muted-foreground text-xs">Other</Badge>
    }
  }

const getCategoryColor = (category: string) => {
    switch (category) {
      case "employment":
        return "bg-purple-500/10 text-purple-500"
      case "commercial":
        return "bg-cyan-500/10 text-cyan-500"
      default:
        return "bg-muted text-muted-foreground"
    }
  }

const getComplexityColor = (complexity: string) => {
    switch (complexity) {
      case "low":
        return "bg-green-500/10 text-green-500"
      case "moderate":
        return "bg-blue-500/10 text-blue-500"
      case "high":
        return "bg-orange-500/10 text-orange-500"
      default:
        return "bg-muted text-muted-foreground"
    }
  }

return (
    <div>
      {/* Header Section */}
      <div className="mb-6">
        <div className="flex items-center gap-4 mb-6">
          <Button
            variant="ghost"
            size="icon"
            onClick={onBack}
            className="h-10 w-10 hover:bg-muted"
          >
            <ArrowLeft className="w-5 h-5" />
          </Button>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
              <svg className="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 24 24">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM8 18v-2h8v2H8zm0-4v-2h8v2H8z"/>
              </svg>
            </div>
            <h1 className="text-2xl font-semibold text-foreground">Select Contract Type</h1>
          </div>
        </div>

{/* Search Bar */}
        <div className="relative mb-4">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input
            placeholder="Search contract types..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10 h-11 bg-muted/50 border-border"
          />
        </div>

{/* Filter Tabs */}
        <div className="flex gap-2">
          <Button
            variant={activeFilter === "all" ? "default" : "ghost"}
            onClick={() => setActiveFilter("all")}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeFilter === "all"
                ? "bg-primary text-primary-foreground"
                : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
            }`}
          >
            All
          </Button>
          <Button
            variant={activeFilter === "employment" ? "default" : "ghost"}
            onClick={() => setActiveFilter("employment")}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeFilter === "employment"
                ? "bg-primary text-primary-foreground"
                : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
            }`}
          >
            Employment
          </Button>
          <Button
            variant={activeFilter === "commercial" ? "default" : "ghost"}
            onClick={() => setActiveFilter("commercial")}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeFilter === "commercial"
                ? "bg-primary text-primary-foreground"
                : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
            }`}
          >
            Commercial
          </Button>
        </div>
      </div>

{/* Contract Type Cards Grid */}
      <div className="grid grid-cols-5 gap-4">
        {filteredContracts.map((contract) => (
          <Card
            key={contract.id}
            onClick={() => onSelectType(contract.id)}
            className="bg-card border-border/50 overflow-hidden hover:border-border transition-colors cursor-pointer group border-2"
          >
            {/* Document preview area */}
            <div className="h-28 bg-muted/50 relative p-3">
              {/* Badges in top right */}
              <div className="absolute top-2 right-2 flex flex-col gap-1">
                {activeFilter === "all" && getCategoryBadge(contract.category)}
              </div>
              {/* Document lines representation */}
              <div className="space-y-[18px]">
                <div className="h-2 w-14 bg-muted-foreground/20 rounded" />
                <div className="space-y-1.5 mt-4">
                  <div className="h-1.5 w-full bg-muted-foreground/10 rounded" />
                  <div className="h-1.5 w-4/5 bg-muted-foreground/10 rounded" />
                  <div className="h-1.5 w-full bg-muted-foreground/10 rounded" />
                  <div className="h-1.5 w-3/5 bg-muted-foreground/10 rounded" />
                </div>
              </div>
            </div>
            {/* Content */}
            <div className="p-3">
              <div className="flex items-start justify-between gap-2">
                <div className="min-w-0 flex-1">
                  <h4 className="font-medium text-foreground text-sm truncate">{contract.name}</h4>
                  <p className="text-xs text-muted-foreground truncate mt-0.5">
                    {contract.category === "employment" ? "Employment Contract" : "Commercial Contract"}
                  </p>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>

{filteredContracts.length === 0 && (
        <div className="text-center py-12 col-span-5">
          <p className="text-muted-foreground">No contract types found matching your search.</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/setup-guide-widget.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import {
  CheckCircle2,
  Circle,
  ChevronDown,
  ChevronUp,
  X,
  Minimize2,
  Maximize2,
} from "lucide-react"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

interface OnboardingData {
  companyName?: string
  legalCompanyName?: string
  abn?: string
  jurisdiction?: string
  usage?: string
  industrySector?: string
}

interface SetupGuideWidgetProps {
  onNavigateToProfile: () => void
  onClose?: () => void
  onboardingData?: OnboardingData
}

// Business details checklist items - dynamically calculated based on onboarding data
const getBusinessDetailsItems = (onboardingData?: OnboardingData) => [
  { id: "business-name", label: "Business name", completed: !!onboardingData?.companyName },
  { id: "company-name", label: "Company name", completed: !!onboardingData?.legalCompanyName },
  { id: "acn-abn", label: "ACN / ABN", completed: !!onboardingData?.abn },
  { id: "jurisdiction", label: "Primary jurisdiction", completed: !!onboardingData?.jurisdiction },
  { id: "usage", label: "Intended usage", completed: !!onboardingData?.usage },
  { id: "industry-sector", label: "Industry sector", completed: !!onboardingData?.industrySector },
  { id: "date-incorporation", label: "Date of incorporation", completed: false },
  { id: "entity-type", label: "Entity type (Pty Ltd, sole trader, partnership, trust)", completed: false },
  { id: "registered-address", label: "Registered office address", completed: false },
  { id: "business-address", label: "Principal place of business address", completed: false },
  { id: "business-email", label: "Primary business email", completed: false },
  { id: "business-phone", label: "Business phone number", completed: false },
]

export function SetupGuideWidget({ onNavigateToProfile, onClose, onboardingData }: SetupGuideWidgetProps) {
  const [isOpen, setIsOpen] = useState(true)
  const [isMinimized, setIsMinimized] = useState(false)
  const [businessDetailsOpen, setBusinessDetailsOpen] = useState(true)
  const businessDetailsItems = getBusinessDetailsItems(onboardingData)

const completedCount = businessDetailsItems.filter(item => item.completed).length
  const totalCount = businessDetailsItems.length
  const progressPercent = (completedCount / totalCount) * 100

const handleItemClick = (item: typeof businessDetailsItems[0]) => {
    if (!item.completed) {
      onNavigateToProfile()
    }
  }

if (!isOpen) return null

return (
    <div className="fixed bottom-6 right-6 z-50">
      <Card className="w-[360px] bg-card border border-border shadow-2xl shadow-black/20 rounded-lg overflow-hidden">
        {/* Header */}
        <CardHeader className="p-3 pb-2 pl-4 pr-4">
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-sm font-semibold text-foreground">Setup guide</h3>
            <div className="flex items-center gap-0.5">
              <Button
                variant="ghost"
                size="icon"
                className="h-6 w-6"
                onClick={() => setIsMinimized(!isMinimized)}
              >
                {isMinimized ? (
                  <Maximize2 className="h-3.5 w-3.5 text-muted-foreground" />
                ) : (
                  <Minimize2 className="h-3.5 w-3.5 text-muted-foreground" />
                )}
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-6 w-6"
                onClick={() => {
                  setIsOpen(false)
                  onClose?.()
                }}
              >
                <X className="h-3.5 w-3.5 text-muted-foreground" />
              </Button>
            </div>
          </div>
          {/* Progress bar */}
          <Progress value={progressPercent} className="h-1.5" />
          <p className="text-xs text-muted-foreground mt-1.5">
            {completedCount} of {totalCount} completed
          </p>
        </CardHeader>

{/* Content */}
        {!isMinimized && (
          <CardContent className="p-3 pt-0 pl-4 pr-4">
            {/* Business Details Section */}
            <Collapsible open={businessDetailsOpen} onOpenChange={setBusinessDetailsOpen}>
              <CollapsibleTrigger asChild>
                <button className="flex items-center justify-between w-full py-2 text-left hover:bg-muted/50 rounded-md px-2 -mx-2 transition-colors">
                  <span className="text-sm font-medium text-foreground">Business Details</span>
                  {businessDetailsOpen ? (
                    <ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
                  ) : (
                    <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
                  )}
                </button>
              </CollapsibleTrigger>
              <CollapsibleContent>
                <div className="space-y-0.5 mt-1">
                  {businessDetailsItems.map((item) => (
                    <button
                      key={item.id}
                      onClick={() => handleItemClick(item)}
                      disabled={item.completed}
                      className={`flex items-center gap-2.5 w-full py-2 px-2 -mx-2 rounded-md text-left transition-colors ${
                        item.completed
                          ? "cursor-default"
                          : "hover:bg-muted/50 cursor-pointer"
                      }`}
                    >
                      {item.completed ? (
                        <CheckCircle2 className="h-4 w-4 text-primary shrink-0" />
                      ) : (
                        <Circle className="h-4 w-4 text-muted-foreground/50 shrink-0" />
                      )}
                      <span
                        className={`text-xs leading-tight ${
                          item.completed
                            ? "text-muted-foreground"
                            : "text-foreground"
                        }`}
                      >
                        {item.label}
                      </span>
                    </button>
                  ))}
                </div>
              </CollapsibleContent>
            </Collapsible>
          </CardContent>
        )}
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pricing/pricing-modal.tsx" isMerged="true"
"use client"

import { X, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"

interface PricingModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function PricingModal({ open, onOpenChange }: PricingModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="!max-w-[1200px] w-full sm:w-[95vw] max-h-[90vh] overflow-y-auto p-6 sm:p-10">
        <DialogHeader className="space-y-3">
          <DialogTitle className="text-xl sm:text-2xl font-semibold text-center leading-tight">
            Upgrade to unlock unlimited contracts, full library access, and priority AI assistance.
          </DialogTitle>
          <div className="text-center">
            <p className="text-xs sm:text-sm text-muted-foreground">
              Signed in as <span className="font-medium">user@example.com</span> — Current tier:{" "}
              <span className="font-medium text-foreground">free</span>{" "}
              <Badge variant="outline" className="text-xs ml-1">
                ACTIVE
              </Badge>
            </p>
          </div>
        </DialogHeader>

{/* Pricing Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 mt-6">
          {/* Free Plan */}
          <Card className="border-border bg-card p-6 flex flex-col h-full">
            <div className="text-center mb-6">
              <h3 className="text-xl font-semibold text-foreground mb-2">Free</h3>
              <div className="mb-2">
                <span className="text-4xl font-bold text-foreground">$0</span>
                <span className="text-sm text-muted-foreground ml-2">forever</span>
              </div>
              <Badge variant="secondary" className="text-xs">
                Current Plan
              </Badge>
            </div>

<div className="space-y-3 mb-6 flex-1">
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">3 contracts per month</span>
              </div>
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">Limited contract types</span>
              </div>
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">Standard support</span>
              </div>
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">Watermarked PDF downloads</span>
              </div>
            </div>

<Button variant="outline" disabled className="w-full bg-transparent text-sm h-10">
              Current Plan
            </Button>
          </Card>

{/* Professional Plan */}
          <Card className="border-primary border-2 bg-card p-6 flex flex-col relative h-full">
            <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground text-xs px-3 py-1">
              Most Popular
            </Badge>

<div className="text-center mb-6">
              <h3 className="text-xl font-semibold text-foreground mb-2">Professional</h3>
              <div className="mb-2">
                <span className="text-4xl font-bold text-foreground">$449</span>
                <span className="text-sm text-muted-foreground ml-2">per month</span>
              </div>
            </div>

<div className="space-y-3 mb-6 flex-1">
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">20 contracts per month</span>
              </div>
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">All 170+ contract types</span>
              </div>
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">Priority support</span>
              </div>
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">PDF & DOCX downloads (no watermark)</span>
              </div>
              <div className="flex items-start gap-2.5">
                <Check className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                <span className="text-sm text-foreground">Advanced AI assistance</span>
              </div>
            </div>

<Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground text-sm h-10">
              Upgrade to Pro
            </Button>
          </Card>

{/* Business Plan */}
          <Card className="border-border bg-card p-6 flex flex-col h-full">
            <div className="text-center mb-6">
              <h3 className="text-xl font-semibold text-foreground mb-2">Business</h3>
              <div className="mb-2">
                <span className="text-4xl font-bold text-foreground">$799</span>
                <span className="text-sm text-muted-foreground ml-2">per month</span>
              </div>
            </div>

<Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground text-sm h-10">
              Upgrade to Business
            </Button>
          </Card>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/billing/billing-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Download } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface BillingPageProps {
  onBack: () => void
}

interface Transaction {
  date: string
  type: string
  amount: string
  status: "Paid" | "Pending" | "Failed"
  invoiceUrl?: string
}

const transactions: Transaction[] = [
  {
    date: "2026-01-26 12:13:00",
    type: "Recharge",
    amount: "10 USD",
    status: "Paid",
  },
  {
    date: "2026-01-12 19:00:00",
    type: "BASIC",
    amount: "32 USD",
    status: "Paid",
    invoiceUrl: "#",
  },
  {
    date: "2026-01-08 16:36:00",
    type: "Recharge",
    amount: "10 USD",
    status: "Paid",
  },
  {
    date: "2025-12-12 17:59:00",
    type: "BASIC",
    amount: "32 USD",
    status: "Paid",
    invoiceUrl: "#",
  },
]

export function BillingPage({ onBack }: BillingPageProps) {
  const [activeTab, setActiveTab] = useState("billing")

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="icon"
              onClick={onBack}
              className="hover:bg-muted"
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
            <h1 className="text-2xl font-semibold text-foreground">Account Settings</h1>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="max-w-7xl mx-auto px-6 py-8">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid w-full max-w-md grid-cols-3 mb-8">
            <TabsTrigger value="account">Manage Account</TabsTrigger>
            <TabsTrigger value="usage">Usage</TabsTrigger>
            <TabsTrigger value="billing">Billing</TabsTrigger>
          </TabsList>

<TabsContent value="account" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Account Information</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">Account management features coming soon.</p>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="usage" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Usage Statistics</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">Usage tracking features coming soon.</p>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="billing" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Billing History</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-border">
                        <th className="text-left py-4 px-4 text-sm font-medium text-muted-foreground">
                          Date
                        </th>
                        <th className="text-left py-4 px-4 text-sm font-medium text-muted-foreground">
                          Type
                        </th>
                        <th className="text-left py-4 px-4 text-sm font-medium text-muted-foreground">
                          Amount
                        </th>
                        <th className="text-left py-4 px-4 text-sm font-medium text-muted-foreground">
                          Status
                        </th>
                        <th className="text-left py-4 px-4 text-sm font-medium text-muted-foreground">
                          Invoice
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {transactions.map((transaction, index) => (
                        <tr key={index} className="border-b border-border">
                          <td className="py-4 px-4 text-sm text-foreground">
                            {transaction.date}
                          </td>
                          <td className="py-4 px-4 text-sm text-foreground">
                            {transaction.type}
                          </td>
                          <td className="py-4 px-4 text-sm text-foreground">
                            {transaction.amount}
                          </td>
                          <td className="py-4 px-4">
                            <Badge
                              variant="secondary"
                              className="bg-muted text-foreground"
                            >
                              {transaction.status}
                            </Badge>
                          </td>
                          <td className="py-4 px-4">
                            {transaction.invoiceUrl ? (
                              <Button
                                variant="link"
                                size="sm"
                                className="text-primary p-0 h-auto"
                              >
                                Download
                              </Button>
                            ) : (
                              <span className="text-muted-foreground text-sm">—</span>
                            )}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                  <div className="text-center py-8">
                    <p className="text-sm text-muted-foreground">No more data</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/profile/profile-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { ArrowLeft, Building2, Save, CheckCircle2, CreditCard, AlertTriangle } from "lucide-react"
import { ThemeToggle } from "@/components/theme-toggle"

interface OnboardingData {
  companyName?: string
  legalCompanyName?: string
  abn?: string
  jurisdiction?: string
  usage?: string
  industrySector?: string
}

interface ProfilePageProps {
  onBack: () => void
  onboardingData?: OnboardingData
}

interface BusinessDetails {
  businessName: string
  companyName: string
  acnAbn: string
  jurisdiction: string
  usage: string
  industrySector: string
  dateOfIncorporation: string
  entityType: string
  registeredAddress: string
  businessAddress: string
  businessEmail: string
  businessPhone: string
}

const entityTypes = [
  { value: "pty-ltd", label: "Pty Ltd" },
  { value: "sole-trader", label: "Sole Trader" },
  { value: "partnership", label: "Partnership" },
  { value: "trust", label: "Trust" },
  { value: "company", label: "Company" },
]

export function ProfilePage({ onBack, onboardingData }: ProfilePageProps) {
  const [isSaving, setIsSaving] = useState(false)
  const [savedMessage, setSavedMessage] = useState(false)
  const [showCancelDialog, setShowCancelDialog] = useState(false)
  const [businessDetails, setBusinessDetails] = useState<BusinessDetails>({
    businessName: onboardingData?.companyName || "",
    companyName: onboardingData?.legalCompanyName || "",
    acnAbn: onboardingData?.abn || "",
    jurisdiction: onboardingData?.jurisdiction || "",
    usage: onboardingData?.usage || "",
    industrySector: onboardingData?.industrySector || "",
    dateOfIncorporation: "",
    entityType: "",
    registeredAddress: "",
    businessAddress: "",
    businessEmail: "",
    businessPhone: "",
  })

const handleSave = async () => {
    setIsSaving(true)
    // Simulate save
    await new Promise(resolve => setTimeout(resolve, 1000))
    setIsSaving(false)
    setSavedMessage(true)
    setTimeout(() => setSavedMessage(false), 3000)
  }

const updateField = (field: keyof BusinessDetails, value: string) => {
    setBusinessDetails(prev => ({ ...prev, [field]: value }))
  }

const handleCancelSubscription = async () => {
    // Simulate cancellation
    await new Promise(resolve => setTimeout(resolve, 1000))
    setShowCancelDialog(false)
    // In real app, this would cancel the subscription and redirect
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border/50 px-6 py-4 sticky top-0 bg-background/95 backdrop-blur-sm z-10">
        <div className="max-w-4xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" onClick={onBack} className="shrink-0">
              <ArrowLeft className="w-5 h-5" />
            </Button>
            <div className="flex items-center gap-3">
              <Avatar className="w-10 h-10">
                <AvatarFallback className="bg-primary/10 text-primary">AT</AvatarFallback>
              </Avatar>
              <div>
                <h1 className="text-lg font-semibold text-foreground">Profile Settings</h1>
                <p className="text-sm text-muted-foreground">Manage your business details</p>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <ThemeToggle />
            {savedMessage && (
              <div className="flex items-center gap-2 text-sm text-emerald-500">
                <CheckCircle2 className="w-4 h-4" />
                Saved
              </div>
            )}
            <Button onClick={handleSave} disabled={isSaving} className="gap-2">
              <Save className="w-4 h-4" />
              {isSaving ? "Saving..." : "Save Changes"}
            </Button>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="max-w-4xl mx-auto px-6 py-8">
        {/* Business Details Section */}
        <Card className="bg-card border-border/50">
          <CardHeader>
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                <Building2 className="w-5 h-5 text-primary" />
              </div>
              <div>
                <CardTitle>Business Details</CardTitle>
                <CardDescription>Your registered business information</CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Business Name and Company Name */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="businessName">Business name</Label>
                <div className="relative">
                  <Input
                    id="businessName"
                    value={businessDetails.businessName}
                    onChange={(e) => updateField("businessName", e.target.value)}
                    placeholder="Enter business name"
                    className="bg-muted"
                  />
                  {businessDetails.businessName && (
                    <CheckCircle2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
                  )}
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="companyName">Company name</Label>
                <div className="relative">
                  <Input
                    id="companyName"
                    value={businessDetails.companyName}
                    onChange={(e) => updateField("companyName", e.target.value)}
                    placeholder="Enter company name"
                    className="bg-muted"
                  />
                  {businessDetails.companyName && (
                    <CheckCircle2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
                  )}
                </div>
              </div>
            </div>

{/* ACN/ABN and Jurisdiction */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="acnAbn">ACN / ABN</Label>
                <div className="relative">
                  <Input
                    id="acnAbn"
                    value={businessDetails.acnAbn}
                    onChange={(e) => updateField("acnAbn", e.target.value)}
                    placeholder="Enter ACN or ABN"
                    className="bg-muted"
                  />
                  {businessDetails.acnAbn && (
                    <CheckCircle2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
                  )}
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="jurisdiction">Primary jurisdiction</Label>
                <div className="relative">
                  <Input
                    id="jurisdiction"
                    value={businessDetails.jurisdiction.toUpperCase()}
                    onChange={(e) => updateField("jurisdiction", e.target.value)}
                    placeholder="e.g., NSW, VIC"
                    className="bg-muted"
                  />
                  {businessDetails.jurisdiction && (
                    <CheckCircle2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
                  )}
                </div>
              </div>
            </div>

{/* Usage and Industry Sector */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="usage">Intended usage</Label>
                <div className="relative">
                  <Input
                    id="usage"
                    value={businessDetails.usage.charAt(0).toUpperCase() + businessDetails.usage.slice(1)}
                    onChange={(e) => updateField("usage", e.target.value)}
                    placeholder="Personal, Business, Legal"
                    className="bg-muted"
                  />
                  {businessDetails.usage && (
                    <CheckCircle2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
                  )}
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="industrySector">Industry sector</Label>
                <div className="relative">
                  <Input
                    id="industrySector"
                    value={businessDetails.industrySector.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
                    onChange={(e) => updateField("industrySector", e.target.value)}
                    placeholder="e.g., Construction, Tech"
                    className="bg-muted"
                  />
                  {businessDetails.industrySector && (
                    <CheckCircle2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary" />
                  )}
                </div>
              </div>
            </div>

{/* Date of Incorporation and Entity Type */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="dateOfIncorporation">Date of incorporation</Label>
                <Input
                  id="dateOfIncorporation"
                  type="date"
                  value={businessDetails.dateOfIncorporation}
                  onChange={(e) => updateField("dateOfIncorporation", e.target.value)}
                  className="bg-muted"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="entityType">Entity type</Label>
                <Select
                  value={businessDetails.entityType}
                  onValueChange={(value) => updateField("entityType", value)}
                >
                  <SelectTrigger className="bg-muted">
                    <SelectValue placeholder="Select entity type" />
                  </SelectTrigger>
                  <SelectContent>
                    {entityTypes.map((type) => (
                      <SelectItem key={type.value} value={type.value}>
                        {type.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

{/* Addresses */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="registeredAddress">Registered office address</Label>
                <Input
                  id="registeredAddress"
                  value={businessDetails.registeredAddress}
                  onChange={(e) => updateField("registeredAddress", e.target.value)}
                  placeholder="Enter registered address"
                  className="bg-muted"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="businessAddress">Principal place of business address</Label>
                <Input
                  id="businessAddress"
                  value={businessDetails.businessAddress}
                  onChange={(e) => updateField("businessAddress", e.target.value)}
                  placeholder="Enter business address"
                  className="bg-muted"
                />
              </div>
            </div>

{/* Contact Details */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="businessEmail">Primary business email</Label>
                <Input
                  id="businessEmail"
                  type="email"
                  value={businessDetails.businessEmail}
                  onChange={(e) => updateField("businessEmail", e.target.value)}
                  placeholder="Enter business email"
                  className="bg-muted"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="businessPhone">Business phone number</Label>
                <Input
                  id="businessPhone"
                  type="tel"
                  value={businessDetails.businessPhone}
                  onChange={(e) => updateField("businessPhone", e.target.value)}
                  placeholder="Enter phone number"
                  className="bg-muted"
                />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Subscription Details Section */}
        <Card className="bg-card border-border/50 mt-6">
          <CardHeader>
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                <CreditCard className="w-5 h-5 text-primary" />
              </div>
              <div>
                <CardTitle>Subscription Details</CardTitle>
                <CardDescription>Manage your subscription and billing</CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Current Plan */}
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <Label className="text-base font-medium">Current Plan</Label>
                  <p className="text-sm text-muted-foreground mt-1">Your active subscription tier</p>
                </div>
                <Badge variant="secondary" className="text-sm">
                  Free Plan
                </Badge>
              </div>
            </div>

{/* Plan Details */}
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label className="text-sm font-medium">Plan Type</Label>
                <p className="text-sm text-gray-400">Free</p>
              </div>
              <div className="space-y-2">
                <Label className="text-sm font-medium">Billing Cycle</Label>
                <p className="text-sm text-gray-400">—</p>
              </div>
            </div>

<div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label className="text-sm font-medium">Monthly Cost</Label>
                <p className="text-sm text-gray-400">$0.00</p>
              </div>
              <div className="space-y-2">
                <Label className="text-sm font-medium">Next Billing Date</Label>
                <p className="text-sm text-gray-400">—</p>
              </div>
            </div>

<div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label className="text-sm font-medium">Contracts Used</Label>
                <p className="text-sm text-gray-400">0 of 3 per month</p>
              </div>
              <div className="space-y-2">
                <Label className="text-sm font-medium">Account Status</Label>
                <Badge variant="outline" className="text-xs">
                  ACTIVE
                </Badge>
              </div>
            </div>

{/* Actions */}
            <div className="flex items-center justify-between pt-2">
              <div className="space-y-1">
                <p className="text-sm font-medium">Need more features?</p>
                <p className="text-xs text-muted-foreground">Upgrade to unlock unlimited contracts and priority support</p>
              </div>
              <Button className="bg-primary hover:bg-primary/90">
                Upgrade Plan
              </Button>
            </div>

<div className="flex items-center justify-between pt-2 pb-2">
              <div className="space-y-1">
                <p className="text-sm font-medium text-destructive">Cancel Subscription</p>
                <p className="text-xs text-muted-foreground">This will downgrade you to the free plan</p>
              </div>
              <Button 
                variant="outline" 
                className="border-destructive/50 text-destructive hover:bg-destructive/10 bg-transparent"
                onClick={() => setShowCancelDialog(true)}
              >
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Cancel Subscription Dialog */}
        <Dialog open={showCancelDialog} onOpenChange={setShowCancelDialog}>
          <DialogContent>
            <DialogHeader>
              <div className="flex items-center gap-3 mb-2">
                <div className="w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center">
                  <AlertTriangle className="w-5 h-5 text-destructive" />
                </div>
                <DialogTitle>Cancel Subscription?</DialogTitle>
              </div>
              <DialogDescription className="pt-2">
                Are you sure you want to cancel your subscription? You will lose access to:
                <ul className="list-disc list-inside mt-3 space-y-1 text-sm">
                  <li>Unlimited contract generation</li>
                  <li>All 170+ contract types</li>
                  <li>Priority support</li>
                  <li>PDF & DOCX downloads without watermark</li>
                  <li>Advanced AI assistance</li>
                </ul>
                <p className="mt-4 text-sm">
                  Your subscription will remain active until the end of your current billing period.
                </p>
              </DialogDescription>
            </DialogHeader>
            <DialogFooter className="gap-2 sm:gap-0">
              <Button
                variant="outline"
                onClick={() => setShowCancelDialog(false)}
                className="bg-transparent"
              >
                Keep Subscription
              </Button>
              <Button
                variant="destructive"
                onClick={handleCancelSubscription}
              >
                Confirm Cancellation
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/contracts/ai-highlighted-clause.tsx" isMerged="true"
"use client"

import React, { useState } from "react"
import { MessageCircle, CheckCircle2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { RecommendationDialog } from "./recommendation-dialog"

interface AIHighlightedClauseProps {
  id: string
  children: React.ReactNode
  hasRecommendation: boolean
  onAskAgent: (clauseId: string) => void
  isActive: boolean
  isFocused?: boolean
  onClauseClick?: (clauseId: string) => void
  severity?: "high" | "medium" | "low"
  appliedChange?: {
    originalText: string
    newText: string
    showConfirmation: boolean
  }
  recommendationData?: {
    title: string
    description: string
    clause: string
    alternatives?: Array<{
      id: string
      label: string
      description: string
    }>
  }
  onApplyChange?: (alternativeId: string) => void
}

const getSeverityColors = (severity: "high" | "medium" | "low", state: "focused" | "hovered" | "default") => {
  const colors = {
    high: {
      focused: "bg-red-500/10 border-2 border-red-500/40 shadow-lg shadow-red-500/10",
      hovered: "bg-red-500/5 border-l-4 border-red-500/50",
      default: "bg-red-500/5 border-l-4 border-red-500/30"
    },
    medium: {
      focused: "bg-yellow-500/10 border-2 border-yellow-500/40 shadow-lg shadow-yellow-500/10",
      hovered: "bg-yellow-500/5 border-l-4 border-yellow-500/50",
      default: "bg-yellow-500/5 border-l-4 border-yellow-500/30"
    },
    low: {
      focused: "bg-blue-500/10 border-2 border-blue-500/40 shadow-lg shadow-blue-500/10",
      hovered: "bg-blue-500/5 border-l-4 border-blue-500/50",
      default: "bg-blue-500/5 border-l-4 border-blue-500/30"
    }
  }
  return colors[severity][state]
}

export function AIHighlightedClause({
  id,
  children,
  hasRecommendation,
  onAskAgent,
  isActive,
  isFocused = false,
  onClauseClick,
  severity = "low",
  appliedChange,
  recommendationData,
  onApplyChange,
}: AIHighlightedClauseProps) {
  const [isHovered, setIsHovered] = useState(false)
  const [isDialogOpen, setIsDialogOpen] = useState(false)

const handleClick = () => {
    if (hasRecommendation && onClauseClick) {
      onClauseClick(id)
    }
  }

return (
    <div
      id={id}
      className={`relative transition-all duration-300 rounded-lg ${
        hasRecommendation
          ? isFocused || isActive
            ? `${getSeverityColors(severity, "focused")} p-4 cursor-pointer`
            : isHovered
              ? `${getSeverityColors(severity, "hovered")} p-4 cursor-pointer`
              : `${getSeverityColors(severity, "default")} p-4 cursor-pointer`
          : "p-4"
      }`}
      onMouseEnter={() => hasRecommendation && setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={handleClick}
    >
      {/* Confirmation Label - Visible when change is applied */}
      {appliedChange?.showConfirmation && (
        <div className="absolute -top-3 left-4 z-10 animate-in fade-in slide-in-from-top-1 duration-300">
          <div className="flex items-center gap-1.5 px-3 py-1.5 bg-primary/90 text-background rounded-full shadow-lg">
            <CheckCircle2 className="w-3.5 h-3.5" />
            <span className="text-xs font-semibold">Change applied</span>
          </div>
        </div>
      )}

{/* Persistent Action Bar - Visible when focused or active (but not when applied change showing) */}
      {hasRecommendation && (isFocused || isActive) && !appliedChange && (
        <div className="absolute -top-3 right-4 z-10">
          <Button
            size="sm"
            className="h-8 gap-1.5 bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg font-semibold px-4 transition-colors"
            onClick={(e) => {
              e.stopPropagation()
              setIsDialogOpen(true)
            }}
          >
            <MessageCircle className="w-3.5 h-3.5" />
            <span className="text-xs">Ask Lexy</span>
          </Button>
        </div>
      )}

{/* Recommendation Dialog - Same as recommendation card */}
      {recommendationData && (
        <RecommendationDialog
          isOpen={isDialogOpen}
          onClose={() => setIsDialogOpen(false)}
          title={recommendationData.title}
          description={recommendationData.description}
          severity={severity}
          clause={recommendationData.clause}
          alternatives={recommendationData.alternatives || []}
          onApplyChange={(altId) => {
            onApplyChange?.(altId)
            setIsDialogOpen(false)
          }}
        />
      )}

<div className="flex items-start gap-3">
        <div className="flex-1">
          {appliedChange ? (
            <div className="space-y-3">
              {/* Original text with strikethrough */}
              <div className="relative">
                <p className="leading-relaxed text-muted-foreground/60 line-through animate-in fade-in duration-500">
                  {appliedChange.originalText}
                </p>
              </div>
              {/* New text highlighted */}
              <div className="relative">
                <p className="leading-relaxed font-medium bg-primary/15 border-l-4 border-primary px-3 py-2 rounded animate-in fade-in slide-in-from-left-2 duration-500 delay-200">
                  {appliedChange.newText}
                </p>
              </div>
            </div>
          ) : (
            children
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/contracts/contract-viewer.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  ArrowLeft,
  Download,
  Sparkles,
  ChevronDown,
  ChevronUp,
  AlertTriangle,
  CheckCircle2,
  FileText,
  MoreHorizontal,
  Share2,
  Printer,
  Copy,
  Bot,
  Wand2,
  MessageSquare,
  Shield,
  Scale,
  Eye,
} from "lucide-react"
import { ThemeToggle } from "@/components/theme-toggle"
import { ContractOutlineBar } from "@/components/contracts/contract-outline-bar"
import { RecommendationCard } from "@/components/contracts/recommendation-card"
import { AIHighlightedClause } from "@/components/contracts/ai-highlighted-clause"
import { ClauseContextPanel } from "@/components/contracts/clause-context-panel"
import { AgentChatInput } from "@/components/contracts/agent-chat-input"
import { AgentChatPanel } from "@/components/contracts/agent-chat-panel"
import { AgentDropdownChat } from "@/components/contracts/agent-dropdown-chat"
import { AgentButton } from "@/components/contracts/agent-button"
import { FloatingChat } from "@/components/contracts/floating-chat"

interface ContractViewerProps {
  contract: {
    id: string
    title: string
    subtitle: string
    status: string
  }
  reviewPerspective?: string
  onReviewPerspectiveChange?: (perspective: string) => void
  onBack: () => void
}

const contractSections = [
  { id: "purpose", title: "1. Purpose", level: 0 },
  { id: "confidentiality", title: "2. Confidentiality Obligations", level: 0 },
  { id: "payment", title: "3. Payment Terms", level: 0 },
  { id: "governing-law", title: "4. Governing Law", level: 0 },
  { id: "intellectual-property", title: "5. Intellectual Property", level: 0 },
  { id: "termination", title: "6. Term and Termination", level: 0 },
]

const contractRecommendations = [
  {
    id: "1",
    title: "Outdated governing law reference",
    severity: "high",
    description: "The governing law clause references outdated legislation. Update to reflect current Australian Consumer Law amendments.",
    clause: "This Agreement shall be governed by the laws of Victoria...",
    alternatives: [
      {
        id: "alt-1-1",
        label: "Updated legislation reference",
        description: "Reference current ACL 2010 and latest amendments"
      },
      {
        id: "alt-1-2",
        label: "Add dispute resolution clause",
        description: "Include alternative dispute resolution before litigation"
      }
    ],
    expanded: false,
    sectionId: "governing-law"
  },
  {
    id: "2",
    title: "Confidentiality clause incomplete",
    severity: "medium",
    description: "The confidentiality obligations do not specify a time period for maintaining confidentiality after termination.",
    clause: "The Receiving Party agrees to maintain the confidentiality of all proprietary information...",
    alternatives: [
      {
        id: "alt-2-1",
        label: "Add 5-year post-termination period",
        description: "Maintain confidentiality for 5 years after agreement termination"
      },
      {
        id: "alt-2-2",
        label: "Add statutory exceptions",
        description: "Include exceptions for legally required disclosures"
      }
    ],
    expanded: false,
    sectionId: "confidentiality"
  },
  {
    id: "3",
    title: "Ambiguous payment term detected",
    severity: "low",
    description: "No fixed timeframe is currently defined for 'promptly' in payment terms.",
    clause: "All invoices shall be paid promptly upon completion of services.",
    alternatives: [
      {
        id: "alt-3-1",
        label: "Specify 14 days",
        description: "Payment due within 14 days of invoice date"
      },
      {
        id: "alt-3-2",
        label: "Specify 30 days",
        description: "Payment due within 30 days of invoice date"
      }
    ],
    expanded: false,
    sectionId: "payment"
  },
  {
    id: "4",
    title: "Termination notice period",
    severity: "medium",
    description: "Consider adding a minimum notice period for termination to protect both parties.",
    clause: "Either party may terminate this agreement...",
    alternatives: [
      {
        id: "alt-4-1",
        label: "Add 30-day notice period",
        description: "Either party must provide 30 days written notice"
      },
      {
        id: "alt-4-2",
        label: "Add cause-based termination",
        description: "Immediate termination for material breach with 5-day cure period"
      }
    ],
    expanded: false,
    sectionId: "termination"
  },
]

const getSeverityBadge = (severity: string) => {
  const colors = {
    high: "bg-red-500/10 text-red-500 border-red-500/20",
    medium: "bg-amber-500/10 text-amber-500 border-amber-500/20",
    low: "bg-blue-500/10 text-blue-500 border-blue-500/20",
  }
  const labels = { high: "High", medium: "Medium", low: "Low" }
  return (
    <Badge className={`${colors[severity as keyof typeof colors]} border text-xs`}>
      {labels[severity as keyof typeof labels]}
    </Badge>
  )
}

const handleAskAgent = (clauseId: string, setActiveClauseId: any, setActiveClauseTitle: any, setActiveRecommendation: any, setChatContext: any, setFloatingChatOpen: any, setExpandedRecommendationId: any) => {
  console.log('[v0] handleAskAgent called with clauseId:', clauseId)
  
  const clauseTitleMap: { [key: string]: string } = {
    "confidentiality-clause-1": "2. Confidentiality Obligations",
    "payment-clause-1": "3. Payment Terms",
    "governing-law-clause-1": "4. Governing Law",
    "termination-clause-1": "6. Term and Termination",
  }
  const recommendation = contractRecommendations.find(r => `${r.sectionId}-clause-1` === clauseId)
  
  console.log('[v0] Found recommendation:', recommendation)
  console.log('[v0] All recommendations:', contractRecommendations)
  
  setActiveClauseId(clauseId)
  setActiveClauseTitle(clauseTitleMap[clauseId] || "Clause")
  setActiveRecommendation(recommendation || null)
  setChatContext('clause')
  setFloatingChatOpen(true)
  
  console.log('[v0] Set activeRecommendation to:', recommendation || null)
  
  // Expand the corresponding recommendation card
  if (recommendation) {
    setExpandedRecommendationId(recommendation.id)
  }
}

export function ContractViewer({ contract, reviewPerspective = "employer", onReviewPerspectiveChange, onBack }: ContractViewerProps) {
  const [recommendations, setRecommendations] = useState(contractRecommendations)
  const documentRef = useRef<HTMLDivElement>(null)
  const recommendationsPanelRef = useRef<HTMLDivElement>(null)
  const recommendationCardRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})
  const [activeSectionId, setActiveSectionId] = useState("purpose")
  const [appliedChanges, setAppliedChanges] = useState<Set<string>>(new Set())
  const [appliedChangesData, setAppliedChangesData] = useState<{
    [key: string]: {
      originalText: string
      newText: string
      alternativeId: string
      showConfirmation: boolean
    }
  }>({})
  const [activeClauseId, setActiveClauseId] = useState<string | null>(null)
  const [focusedClauseId, setFocusedClauseId] = useState<string | null>(null)
  const [chatOpen, setChatOpen] = useState(false)
  const [floatingChatOpen, setFloatingChatOpen] = useState(false)
  const [expandedRecommendationId, setExpandedRecommendationId] = useState<string | null>(null)
  const [agentMode, setAgentMode] = useState<'menu' | 'chat' | null>(null)
  const [chatContext, setChatContext] = useState<'global' | 'clause'>('global')
  const [activeClauseTitle, setActiveClauseTitle] = useState<string | null>(null)
  const [activeRecommendation, setActiveRecommendation] = useState<any>(null)
  const [showDropdownChat, setShowDropdownChat] = useState(false)
  const [initialChatMessage, setInitialChatMessage] = useState<string | null>(null)

const handleSectionClick = (sectionId: string) => {
    const element = document.getElementById(`section-${sectionId}`)
    if (element && documentRef.current) {
      element.scrollIntoView({ behavior: "smooth", block: "start" })
      setActiveSectionId(sectionId)
    }
  }

const handleScrollToClause = (clauseId: string) => {
    const element = document.getElementById(clauseId)
    if (element && documentRef.current) {
      // Scroll with offset for better visibility
      element.scrollIntoView({ behavior: "smooth", block: "center" })
      
      // Set focused state
      setFocusedClauseId(clauseId)
      setActiveClauseId(clauseId)
      
      // Clear focus after a delay
      setTimeout(() => {
        setFocusedClauseId(null)
      }, 5000)
    }
  }

const handleClauseClick = (clauseId: string) => {
    // Find the recommendation that corresponds to this clause
    const recommendation = contractRecommendations.find(r => `${r.sectionId}-clause-1` === clauseId)
    
    if (recommendation) {
      // Set focused and active states
      setFocusedClauseId(clauseId)
      setActiveClauseId(clauseId)
      
      // Expand the corresponding recommendation card
      setExpandedRecommendationId(recommendation.id)
      
      // Scroll to the recommendation card in the right panel
      setTimeout(() => {
        const cardElement = recommendationCardRefs.current[recommendation.id]
        if (cardElement && recommendationsPanelRef.current) {
          cardElement.scrollIntoView({ behavior: "smooth", block: "nearest" })
        }
      }, 100)
      
      // Clear focus after delay (but keep active)
      setTimeout(() => {
        setFocusedClauseId(null)
      }, 3000)
    }
  }

const handleRecommationCardClick = (sectionId: string) => {
    handleSectionClick(sectionId)
  }

const handleApplyChange = (recommendationId: string, alternativeId: string) => {
    // Find the recommendation and alternative
    const recommendation = recommendations.find(r => r.id === recommendationId)
    if (!recommendation) return

const alternative = recommendation.alternatives?.find(alt => alt.id === alternativeId)
    if (!alternative) return

const clauseId = `${recommendation.sectionId}-clause-1`
    
    // Close floating chat to reduce visual noise
    setFloatingChatOpen(false)
    
    // Scroll to the clause and focus it
    setTimeout(() => {
      const element = document.getElementById(clauseId)
      if (element && documentRef.current) {
        element.scrollIntoView({ behavior: "smooth", block: "center" })
        setFocusedClauseId(clauseId)
        setActiveClauseId(clauseId)
      }
    }, 100)

// Store the applied change data for visual diff
    setAppliedChangesData(prev => ({
      ...prev,
      [clauseId]: {
        originalText: recommendation.clause,
        newText: alternative.label,
        alternativeId,
        showConfirmation: true
      }
    }))

// Mark as applied
    setAppliedChanges((prev) => new Set([...prev, recommendationId]))

// Hide confirmation label after 3 seconds
    setTimeout(() => {
      setAppliedChangesData(prev => ({
        ...prev,
        [clauseId]: {
          ...prev[clauseId],
          showConfirmation: false
        }
      }))
    }, 3000)

// Clear focus after 5 seconds
    setTimeout(() => {
      setFocusedClauseId(null)
    }, 5000)
  }

const handleUndoChange = (recommendationId: string, clauseId: string) => {
    // Remove from applied changes
    setAppliedChanges((prev) => {
      const newSet = new Set(prev)
      newSet.delete(recommendationId)
      return newSet
    })

// Remove the applied change data
    setAppliedChangesData(prev => {
      const newData = { ...prev }
      delete newData[clauseId]
      return newData
    })

// Scroll to clause and briefly focus
    setTimeout(() => {
      const element = document.getElementById(clauseId)
      if (element && documentRef.current) {
        element.scrollIntoView({ behavior: "smooth", block: "center" })
        setFocusedClauseId(clauseId)
      }
    }, 100)

setTimeout(() => {
      setFocusedClauseId(null)
    }, 2000)
  }

const handleGlobalAskAgent = () => {
    setChatContext('global')
    setAgentMode('chat')
  }

const handleRecommendationAskAgent = (clauseId: string, clauseTitle: string, recommendation: any) => {
    setActiveClauseId(clauseId)
    setActiveClauseTitle(clauseTitle)
    setActiveRecommendation(recommendation)
    setChatContext('clause')
    setChatOpen(true)
  }

const handleStartChatFromDropdown = (message: string) => {
    // When first message sent from dropdown chat, open full chat panel on right
    setInitialChatMessage(message)
    setChatContext('global')
    setChatOpen(true)
    setAgentMode(null)
  }

const handleCloseChatPanel = () => {
    setChatOpen(false)
    setActiveClauseId(null)
    setActiveClauseTitle(null)
    setActiveRecommendation(null)
    setInitialChatMessage(null)
  }

const getRecommendationByClauseId = (clauseId: string) => {
    return recommendations.find((rec) => rec.sectionId === clauseId)
  }

const clauseRecommendationMap: { [key: string]: boolean } = {
    "section-confidentiality": true,
    "section-payment": true,
    "section-governing-law": true,
    "section-termination": true,
  }

const toggleRecommendation = (id: string) => {
    setRecommendations(prev =>
      prev.map(rec =>
        rec.id === id ? { ...rec, expanded: !rec.expanded } : rec
      )
    )
  }

const highCount = recommendations.filter(r => r.severity === "high").length
  const mediumCount = recommendations.filter(r => r.severity === "medium").length
  const lowCount = recommendations.filter(r => r.severity === "low").length

const handleSendChatMessage = (message: string) => {
    console.log(`Sent message: ${message}`)
  }

const handleViewConsequences = (recommendationId: string) => {
    console.log(`Viewing consequences for recommendation: ${recommendationId}`)
  }

return (
    <div className="h-screen bg-background flex flex-col overflow-hidden">
      {/* Header */}
      <header className="border-b border-border/50 px-4 py-3 bg-background/95 backdrop-blur-sm z-20 flex-shrink-0">
        <div className="flex items-center justify-between">
          {/* Left side */}
          <div className="flex items-center gap-4">
            <Button 
              variant="ghost" 
              size="icon" 
              onClick={onBack}
              className="shrink-0"
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
            
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center">
                <FileText className="w-4 h-4 text-accent" />
              </div>
              <div>
                <h1 className="font-semibold text-foreground text-sm">{contract.title}</h1>
                <p className="text-xs text-muted-foreground">{contract.subtitle}</p>
              </div>
            </div>
            <Badge variant="outline" className="text-xs capitalize">{contract.status}</Badge>
          </div>

{/* Center - Agent Button */}
          <div className="flex items-center gap-3">
            {/* Agent Button (Dual Action) */}
            <AgentButton
              onAgentClick={() => {
                setAgentMode(null) // Close dropdown if open
                setChatOpen(true)
              }}
              onDropdownClick={() => {
                if (agentMode === 'chat') {
                  setAgentMode(null) // Toggle off if already open
                } else {
                  setAgentMode('chat') // Open dropdown
                }
              }}
              dropdownDisabled={chatOpen}
            />

{/* Chat Dropdown - shows below button when dropdown arrow is clicked */}
            {agentMode === 'chat' && !chatOpen && (
              <AgentDropdownChat
                isOpen={true}
                onClose={() => setAgentMode(null)}
                onStartChat={handleStartChatFromDropdown}
              />
            )}
          </div>

{/* Right side */}
          <div className="flex items-center gap-2">
            <ThemeToggle />
            <Button variant="ghost" size="icon">
              <Share2 className="w-4 h-4" />
            </Button>
            <Button variant="ghost" size="icon">
              <Printer className="w-4 h-4" />
            </Button>
            <Button variant="ghost" size="icon">
              <Copy className="w-4 h-4" />
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button className="gap-2 bg-primary hover:bg-primary/90 text-primary-foreground">
                  <Download className="w-4 h-4" />
                  Download
                  <ChevronDown className="w-3.5 h-3.5 ml-1" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuItem 
                  onClick={() => {
                    // Simulate PDF download
                    const link = document.createElement('a')
                    link.href = '#'
                    link.download = 'contract.pdf'
                    link.click()
                  }}
                  className="cursor-pointer"
                >
                  <Download className="w-4 h-4" />
                  Contract (PDF)
                </DropdownMenuItem>
                <DropdownMenuItem 
                  onClick={() => {
                    // Simulate PDF download
                    const link = document.createElement('a')
                    link.href = '#'
                    link.download = 'contract-summary.pdf'
                    link.click()
                  }}
                  className="cursor-pointer"
                >
                  <Download className="w-4 h-4" />
                  Summary (PDF)
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

{/* Main Content - Fixed height with flex */}
      <div className="flex-1 flex overflow-hidden">
        {/* Left Sidebar - Outline (fixed, always visible) */}
        <div className="flex-shrink-0">
          <ContractOutlineBar
            sections={contractSections}
            onSectionClick={handleSectionClick}
          />
        </div>

{/* Document Area - Scrollable center */}
        <div className="flex-1 overflow-y-auto p-8" ref={documentRef}>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
            className="max-w-3xl mx-auto"
          >
            <Card className="bg-white text-gray-900 shadow-xl">
              <CardContent className="p-10">
                {/* Document Header */}
                <div className="mb-8 pb-6 border-b border-gray-200">
                  <p className="text-xs uppercase tracking-widest text-gray-500 mb-2">LEXGEN DRAFT</p>
                  <h2 className="text-2xl font-bold text-gray-900 mb-1">{contract.title}</h2>
                  <p className="text-sm text-gray-500">Generated 29/01/2026</p>
                </div>

{/* Document Content */}
                <div className="space-y-6 text-gray-800">
                  <div>
                    <p className="text-accent font-semibold mb-2">[EMPLOYER NAME PTY LTD]</p>
                    <p><span className="font-semibold">ABN:</span> <span className="text-accent">[ABN XX XXX XXX XXX]</span></p>
                    <p><span className="font-semibold">ABN:</span> 12 345 678 901</p>
                  </div>

<div>
                    <p className="text-accent font-semibold mb-2">[DATE]</p>
                    <p>29 January 2026</p>
                  </div>

<div>
                    <p className="text-accent font-semibold mb-2">[EMPLOYEE FULL NAME]</p>
                    <p>John Smith, Level 5, 123 Tech Street, Sydney, NSW 2000</p>
                  </div>

<div>
                    <p className="text-accent font-semibold mb-2">[EMPLOYEE ADDRESS]</p>
                    <p>Level 5, 123 Tech Street, Sydney, NSW 2000</p>
                  </div>

<div id="section-purpose">
                    <h3 className="font-bold text-lg mb-3">1. Purpose</h3>
                    <p className="leading-relaxed">
                      This Agreement is entered into between Acme Motors Inc. ("Client") and John Adams
                      Consulting LLC ("Service Provider") for the purpose of defining the terms under which
                      consulting and engineering services will be performed. Both parties agree to maintain the
                      confidentiality of proprietary information and ensure mutual protection of intellectual property.
                    </p>
                  </div>

<div id="section-confidentiality">
                    <h3 className="font-bold text-lg mb-3">2. Confidentiality Obligations</h3>
                    <AIHighlightedClause
                      id="confidentiality-clause-1"
                      hasRecommendation={true}
                      onAskAgent={() => handleAskAgent("confidentiality-clause-1", setActiveClauseId, setActiveClauseTitle, setActiveRecommendation, setChatContext, setFloatingChatOpen, setExpandedRecommendationId)}
                      isActive={activeClauseId === "confidentiality-clause-1"}
                      isFocused={focusedClauseId === "confidentiality-clause-1"}
                      onClauseClick={handleClauseClick}
                      severity="medium"
                      appliedChange={appliedChangesData["confidentiality-clause-1"]}
                      recommendationData={{
                        title: "Confidentiality clause incomplete",
                        description: "The confidentiality obligations do not specify a time period for maintaining confidentiality after termination.",
                        clause: "The Receiving Party agrees to maintain the confidentiality of all proprietary information...",
                        alternatives: [
                          {
                            id: "alt-2-1",
                            label: "Add 5-year post-termination period",
                            description: "Maintain confidentiality for 5 years after agreement termination"
                          },
                          {
                            id: "alt-2-2",
                            label: "Add statutory exceptions",
                            description: "Include exceptions for legally required disclosures"
                          }
                        ]
                      }}
                      onApplyChange={(altId) => handleApplyChange("2", altId)}
                    >
                      <p className="leading-relaxed mb-3">
                        The Receiving Party agrees to maintain in strict confidence all proprietary or confidential
                        information disclosed under this Agreement, and shall not disclose such information to any third
                        party without prior written consent of the Disclosing Party.
                      </p>
                    </AIHighlightedClause>
                    <p className="leading-relaxed mb-3 mt-3">
                      Such obligation of confidentiality shall remain in effect for a period of five (5) years following the
                      disclosure thereof.
                    </p>
                    <p className="leading-relaxed">
                      However, this provision does not specify any exception for disclosure required by law or court
                      order.
                    </p>
                  </div>

<div id="section-payment">
                    <h3 className="font-bold text-lg mb-3">3. Payment Terms</h3>
                    <AIHighlightedClause
                      id="payment-clause-1"
                      hasRecommendation={true}
                      onAskAgent={() => handleAskAgent("payment-clause-1", setActiveClauseId, setActiveClauseTitle, setActiveRecommendation, setChatContext, setFloatingChatOpen, setExpandedRecommendationId)}
                      isActive={activeClauseId === "payment-clause-1"}
                      isFocused={focusedClauseId === "payment-clause-1"}
                      onClauseClick={handleClauseClick}
                      severity="low"
                      appliedChange={appliedChangesData["payment-clause-1"]}
                      recommendationData={{
                        title: "Ambiguous payment term detected",
                        description: "No fixed timeframe is currently defined for 'promptly' in payment terms.",
                        clause: "All invoices shall be paid promptly upon completion of services.",
                        alternatives: [
                          {
                            id: "alt-3-1",
                            label: "Specify 14 days",
                            description: "Payment due within 14 days of invoice date"
                          },
                          {
                            id: "alt-3-2",
                            label: "Specify 30 days",
                            description: "Payment due within 30 days of invoice date"
                          }
                        ]
                      }}
                      onApplyChange={(altId) => handleApplyChange("3", altId)}
                    >
                      <p className="leading-relaxed mb-3">
                        Payment for Services shall be due within ninety (90) days from the date of invoice. Late
                        payments will incur interest at a rate of 5% per annum.
                      </p>
                    </AIHighlightedClause>
                  </div>

<div id="section-governing-law">
                    <h3 className="font-bold text-lg mb-3">4. Governing Law</h3>
                    <AIHighlightedClause
                      id="governing-law-clause-1"
                      hasRecommendation={true}
                      onAskAgent={() => handleAskAgent("governing-law-clause-1", setActiveClauseId, setActiveClauseTitle, setActiveRecommendation, setChatContext, setFloatingChatOpen, setExpandedRecommendationId)}
                      isActive={activeClauseId === "governing-law-clause-1"}
                      isFocused={focusedClauseId === "governing-law-clause-1"}
                      onClauseClick={handleClauseClick}
                      severity="high"
                      appliedChange={appliedChangesData["governing-law-clause-1"]}
                      recommendationData={{
                        title: "Outdated governing law reference",
                        description: "The governing law clause references outdated legislation. Update to reflect current Australian Consumer Law amendments.",
                        clause: "This Agreement shall be governed by the laws of Victoria...",
                        alternatives: [
                          {
                            id: "alt-1-1",
                            label: "Updated legislation reference",
                            description: "Reference current ACL 2010 and latest amendments"
                          },
                          {
                            id: "alt-1-2",
                            label: "Add dispute resolution clause",
                            description: "Include alternative dispute resolution before litigation"
                          }
                        ]
                      }}
                      onApplyChange={(altId) => handleApplyChange("1", altId)}
                    >
                      <p className="leading-relaxed mb-3">
                        This Agreement shall be governed by and construed in accordance with the laws of the State of
                        Victoria, without regard to its conflict of law principles.
                      </p>
                    </AIHighlightedClause>
                    <div className="flex items-start gap-2 p-3 bg-amber-50 rounded-lg border border-amber-200 mt-3">
                      <AlertTriangle className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
                      <p className="text-sm text-amber-800">
                        The governing law clause may need to be updated to match the company's current place of
                        incorporation (New South Wales).
                      </p>
                    </div>
                  </div>

<div id="section-intellectual-property">
                    <h3 className="font-bold text-lg mb-3">5. Intellectual Property</h3>
                    <p className="leading-relaxed">
                      All deliverables created under this Agreement shall remain the exclusive property of the Client.
                      The Service Provider retains no rights to reproduce, modify, or distribute such materials outside
                      the scope of this Agreement.
                    </p>
                  </div>

<div id="section-termination">
                    <h3 className="font-bold text-lg mb-3">6. Term and Termination</h3>
                    <AIHighlightedClause
                      id="termination-clause-1"
                      hasRecommendation={true}
                      onAskAgent={() => handleAskAgent("termination-clause-1", setActiveClauseId, setActiveClauseTitle, setActiveRecommendation, setChatContext, setFloatingChatOpen, setExpandedRecommendationId)}
                      onClauseClick={handleClauseClick}
                      severity="medium"
                      appliedChange={appliedChangesData["termination-clause-1"]}
                      isActive={activeClauseId === "termination-clause-1"}
                      isFocused={focusedClauseId === "termination-clause-1"}
                      recommendationData={{
                        title: "Termination notice period",
                        description: "Consider adding a minimum notice period for termination to protect both parties.",
                        clause: "Either party may terminate this agreement...",
                        alternatives: [
                          {
                            id: "alt-4-1",
                            label: "Add 30-day notice period",
                            description: "Either party must provide 30 days written notice"
                          },
                          {
                            id: "alt-4-2",
                            label: "Add cause-based termination",
                            description: "Immediate termination for material breach with 5-day cure period"
                          }
                        ]
                      }}
                      onApplyChange={(altId) => handleApplyChange("4", altId)}
                    >
                      <p className="leading-relaxed">
                        Either party may terminate this agreement by providing written notice to the other party. Upon
                        termination, all ongoing obligations shall be concluded, and parties shall return all proprietary
                        information.
                      </p>
                    </AIHighlightedClause>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>

{/* Right Sidebar - Chat Panel or AI Recommendations (fixed) */}
        <div className="flex-shrink-0">
          {chatOpen ? (
            <AgentChatPanel
              isOpen={chatOpen}
              context={chatContext}
              clauseTitle={activeClauseTitle}
              recommendation={activeRecommendation}
              onClose={handleCloseChatPanel}
              initialMessage={initialChatMessage}
            />
          ) : (
            <div className="w-[420px] h-full border-l border-border/50 bg-card/50 overflow-y-auto">
              <div className="p-6 bg-card">
                {/* Clause Context Panel - appears when clause is active */}
                {activeClauseId && (
                  <div className="mb-6">
                    <ClauseContextPanel
                      clauseId={activeClauseId}
                      clauseTitle={
                        activeClauseId.includes("confidentiality")
                          ? "2. Confidentiality Obligations"
                          : activeClauseId.includes("payment")
                            ? "3. Payment Terms"
                            : activeClauseId.includes("governing-law")
                              ? "4. Governing Law"
                              : "6. Term and Termination"
                      }
                      recommendation={getRecommendationByClauseId(
                        activeClauseId.replace("-clause-1", "").replace("-", "")
                      )}
                      onClose={() => setActiveClauseId(null)}
                    />
                  </div>
                )}

{/* Header */}
                <div className="mb-6">
                  <h3 className="text-lg font-semibold text-foreground mb-2">AI Recommendations</h3>
                  <p className="text-sm text-muted-foreground">
                    Lexy identified {recommendations.length} suggestions to strengthen your contract
                  </p>
                </div>

{/* Summary Stats */}
                <div className="flex items-center gap-3 mb-6 p-3 bg-muted/50 rounded-lg border border-border/50">
                  <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0" />
                  <div>
                    <p className="text-sm font-medium text-foreground">
                      {appliedChanges.size} of {recommendations.length} applied
                    </p>
                    <p className="text-xs text-muted-foreground">
                      {recommendations.length - appliedChanges.size} pending review
                    </p>
                  </div>
                </div>

{/* Recommendation Cards */}
                <div className="space-y-3" ref={recommendationsPanelRef}>
                  {recommendations.map((rec) => {
                    const clauseId = `${rec.sectionId}-clause-1`
                    return (
                      <div key={rec.id} ref={(el) => { recommendationCardRefs.current[rec.id] = el }}>
                        <RecommendationCard
                          id={rec.id}
                          title={rec.title}
                          severity={rec.severity}
                          description={rec.description}
                          clause={rec.clause}
                          alternatives={rec.alternatives}
                          clauseId={clauseId}
                          onScrollToClause={handleScrollToClause}
                          isExpanded={expandedRecommendationId === rec.id}
                          isApplied={appliedChanges.has(rec.id)}
                          onApplyChange={(altId) => handleApplyChange(rec.id, altId)}
                          onUndo={() => handleUndoChange(rec.id, clauseId)}
                          onAskAgent={() => {
                            const clauseTitleMap: { [key: string]: string } = {
                              "confidentiality": "2. Confidentiality Obligations",
                              "payment": "3. Payment Terms",
                              "governing-law": "4. Governing Law",
                              "termination": "6. Term and Termination",
                            }
                            handleRecommendationAskAgent(clauseId, clauseTitleMap[rec.sectionId] || "Clause", rec)
                            handleSectionClick(rec.sectionId)
                          }}
                          onViewConsequences={() => console.log(`View consequences for recommendation: ${rec.id}`)}
                          onCardClick={() => {
                            handleRecommationCardClick(rec.sectionId)
                            setExpandedRecommendationId(expandedRecommendationId === rec.id ? null : rec.id)
                          }}
                        />
                      </div>
                    )
                  })}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

{/* Floating Chat - Appears over the document when "Ask Lexy" is clicked */}
      <FloatingChat
        isOpen={floatingChatOpen}
        onClose={() => {
          setFloatingChatOpen(false)
          // Keep the clause focused and scroll to it
          if (activeClauseId) {
            setFocusedClauseId(activeClauseId)
            setTimeout(() => {
              setFocusedClauseId(null)
            }, 3000)
          }
        }}
        clauseTitle={activeClauseTitle || undefined}
        recommendation={activeRecommendation}
        context={chatContext}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

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

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  )
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  )
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
        className,
      )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  )
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  )
}

function DropdownMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "hover:bg-muted hover:text-foreground group data-[highlighted]:bg-muted data-[highlighted]:text-foreground focus:bg-muted focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-all duration-150",
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  )
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  )
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 transition-colors",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  )
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-muted focus:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  )
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        'bg-popover 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
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 transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-muted',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-muted hover:text-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/contracts/contract-details-screen.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowLeft, FileText, Download, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"

interface ContractDetailsScreenProps {
  contractType: string
  onBack: () => void
  onNext: (tone: string) => void
}

const contractNames: Record<string, string> = {
  "apprentice-trainee": "Apprentice/Trainee Agreement",
  "casual-employment": "Casual Employment Agreement",
  "commission-agreement": "Commission Agreement",
  "confidentiality-deed": "Confidentiality Deed (Long Form)",
  "contractor-agreement": "Contractor Agreement",
  "employment-fulltime": "Employment Agreement (Full-Time)",
  "employment-fulltime-long": "Full-Time Employment Agreement (Long Form)",
  "employment-management": "Full-Time Employment (Management)",
  "labour-hire": "Labour Hire Agreement",
  "nda-mutual": "Non-Disclosure Agreement (Mutual)",
  "part-time-basic": "Part-Time Employment (Basic)",
  "part-time-management": "Part-Time Employment (Management)",
  "professional-employment": "Professional Employment Agreement",
  "service-agreement": "Service Agreement",
  "nda": "Non-Disclosure Agreement",
  "vendor-agreement": "Vendor Agreement",
}

const toneDescriptions: Record<string, string> = {
  formal: "Traditional, technical, complex, impersonal, using jargon, common in traditional legal documents.",
  semiformal: "Balanced, professional yet accessible, clear language with some legal terms.",
  casual: "Simple, conversational, easy to understand, minimal legal jargon.",
}

function getContractName(id: string): string {
  return contractNames[id] || id.split("-").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")
}

export function ContractDetailsScreen({ contractType, onBack, onNext }: ContractDetailsScreenProps) {
  const contractName = getContractName(contractType)
  const [tone, setTone] = useState("formal")
  const [isStarting, setIsStarting] = useState(false)

const handleNext = async () => {
    setIsStarting(true)
    // Simulate loading
    await new Promise(resolve => setTimeout(resolve, 1500))
    onNext(tone)
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card">
        <div className="container mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="icon"
              onClick={onBack}
              className="bg-transparent"
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center">
                <FileText className="w-4 h-4 text-muted-foreground" />
              </div>
              <h1 className="text-lg font-semibold">{contractName}</h1>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="container mx-auto px-6 py-8 max-w-4xl">
        <Card className="bg-card border-border">
          <CardHeader>
            
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <Label className="font-medium text-2xl text-center">
                Contract tone
              </Label>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <button
                  onClick={() => setTone("formal")}
                  className={`p-4 rounded-lg border-2 transition-all text-left ${
                    tone === "formal"
                      ? "border-primary bg-primary/10 shadow-md"
                      : "border-border bg-muted/30 hover:border-primary/50 hover:bg-muted/50"
                  }`}
                >
                  <h3 className="font-semibold text-foreground mb-1">Formal</h3>
                  <p className="text-xs text-muted-foreground">
                    Traditional legal language
                  </p>
                </button>
                
                <button
                  onClick={() => setTone("semiformal")}
                  className={`p-4 rounded-lg border-2 transition-all text-left ${
                    tone === "semiformal"
                      ? "border-primary bg-primary/10 shadow-md"
                      : "border-border bg-muted/30 hover:border-primary/50 hover:bg-muted/50"
                  }`}
                >
                  <h3 className="font-semibold text-foreground mb-1">Semi-formal</h3>
                  <p className="text-xs text-muted-foreground">
                    Balanced and accessible
                  </p>
                </button>
                
                <button
                  onClick={() => setTone("casual")}
                  className={`p-4 rounded-lg border-2 transition-all text-left ${
                    tone === "casual"
                      ? "border-primary bg-primary/10 shadow-md"
                      : "border-border bg-muted/30 hover:border-primary/50 hover:bg-muted/50"
                  }`}
                >
                  <h3 className="font-semibold text-foreground mb-1">Casual</h3>
                  <p className="text-xs text-muted-foreground">
                    Simple and conversational
                  </p>
                </button>
              </div>
            </div>

<div className="flex justify-end pt-4">
              <Button
                onClick={handleNext}
                disabled={isStarting}
                className="min-w-[120px]"
              >
                {isStarting ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Starting Chat...
                  </>
                ) : (
                  "Next"
                )}
              </Button>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]png:file="public/images/awelle-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202026-02-10%20at%2010.14.54%E2%80%AFAM-qBgz9ah9Tv6cbLPAXwMGi9h0FAwZEM.png" isMerged="true"
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

/* Awelle Legal AI - Color Palette */
:root {
  /* Primary Colors */
  --background: #0B1426; /* Deep Navy - Primary Background */
  --foreground: #F9FAFB; /* Snow - Primary Text */

/* Cards with subtle elevation */
  --card: #111827; /* Card Navy - Surface/Cards */
  --card-foreground: #F9FAFB; /* Snow - Primary Text */

--popover: #111827; /* Card Navy */
  --popover-foreground: #F9FAFB; /* Snow */

/* Primary - Sage Green */
  --primary: #4E7F4B;
  --primary-foreground: #F9FAFB;

/* Secondary - Leaf Green for buttons/CTA */
  --secondary: #5B8C5A;
  --secondary-foreground: #F9FAFB;

/* Muted elements */
  --muted: #1F2937; /* Lighter than Card Navy for proper hover contrast */
  --muted-foreground: #9CA3AF; /* Cool Gray - Secondary Text */

/* Accent - Leaf Green for buttons/CTA */
  --accent: #5B8C5A;
  --accent-foreground: #F9FAFB;

/* Destructive */
  --destructive: #FF6B6B;
  --destructive-foreground: #F9FAFB;

/* Borders and inputs */
  --border: #1F2937;
  --input: #111827; /* Card Navy */
  --ring: #4E7F4B; /* Sage Green */

/* Chart colors */
  --chart-1: #4E7F4B; /* Sage Green */
  --chart-2: #7AB178; /* Fern */
  --chart-3: #5B8C5A; /* Leaf Green */
  --chart-4: #3A5E38; /* Forest */
  --chart-5: #9CA3AF; /* Cool Gray */

--radius: 0.5rem;

/* Sidebar */
  --sidebar: #111827; /* Card Navy */
  --sidebar-foreground: #F9FAFB; /* Snow */
  --sidebar-primary: #4E7F4B; /* Sage Green */
  --sidebar-primary-foreground: #F9FAFB; /* Snow */
  --sidebar-accent: #5B8C5A; /* Leaf Green */
  --sidebar-accent-foreground: #F9FAFB; /* Snow */
  --sidebar-border: #1F2937;
  --sidebar-ring: #4E7F4B; /* Sage Green */
}

/* Dark Theme - Same as root for consistent dark theme */
.dark {
  /* Primary Colors */
  --background: #0B1426; /* Deep Navy - Primary Background */
  --foreground: #F9FAFB; /* Snow - Primary Text */