[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* AgroBot theme: nature greens, tech purples, premium golds */ --background: oklch(0.99 0.01 120); --foreground: oklch(0.15 0.02 140); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.02 140); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.02 140); --primary: oklch(0.45 0.15 280); --primary-foreground: oklch(0.99 0.01 120); --secondary: oklch(0.35 0.12 140); --secondary-foreground: oklch(0.99 0.01 120); --muted: oklch(0.96 0.01 120); --muted-foreground: oklch(0.5 0.02 140); --accent: oklch(0.65 0.18 80); --accent-foreground: oklch(0.15 0.02 140); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.99 0.01 120); --border: oklch(0.9 0.01 120); --input: oklch(0.9 0.01 120); --ring: oklch(0.45 0.15 280); --chart-1: oklch(0.45 0.15 280); --chart-2: oklch(0.35 0.12 140); --chart-3: oklch(0.65 0.18 80); --chart-4: oklch(0.55 0.14 160); --chart-5: oklch(0.7 0.16 100); --radius: 0.75rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.12 0.02 140); --foreground: oklch(0.98 0.01 120); --card: oklch(0.15 0.02 140); --card-foreground: oklch(0.98 0.01 120); --popover: oklch(0.15 0.02 140); --popover-foreground: oklch(0.98 0.01 120); --primary: oklch(0.55 0.18 280); --primary-foreground: oklch(0.12 0.02 140); --secondary: oklch(0.45 0.14 140); --secondary-foreground: oklch(0.98 0.01 120); --muted: oklch(0.2 0.02 140); --muted-foreground: oklch(0.65 0.02 140); --accent: oklch(0.7 0.2 80); --accent-foreground: oklch(0.12 0.02 140); --destructive: oklch(0.5 0.2 27); --destructive-foreground: oklch(0.98 0.01 120); --border: oklch(0.25 0.02 140); --input: oklch(0.25 0.02 140); --ring: oklch(0.55 0.18 280); --chart-1: oklch(0.55 0.18 280); --chart-2: oklch(0.45 0.14 140); --chart-3: oklch(0.7 0.2 80); --chart-4: oklch(0.6 0.16 160); --chart-5: oklch(0.75 0.18 100); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom animations for AgroBot */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes drift { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(30px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } 50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.6); } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-drift { animation: drift 8s ease-in-out infinite; } .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Playfair_Display, Inter } from "next/font/google" import "./globals.css" const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-serif", display: "swap", }) const inter = Inter({ subsets: ["latin"], variable: "--font-sans", display: "swap", }) export const metadata: Metadata = { title: "AgroBot - Agricultura Inteligente del Futuro", description: "Robots y drones inteligentes para cosecha de uvas y análisis de suelos. Optimiza tu producción con tecnología de vanguardia.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { BotIcon } from "@/components/icons" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" export function Navigation() { const pathname = usePathname() return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Navigation } from "@/components/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowRightIcon, BotIcon, DroneIcon, LeafIcon, TrendingUpIcon, ShieldIcon, ZapIcon } from "@/components/icons" import Link from "next/link" import { Chatbot } from "@/components/chatbot" export default function HomePage() { return (

{/* Hero Section */}

El Futuro de la Agricultura Inteligente

Revoluciona tu producción vitivinícola con robots recolectores y drones de análisis. Precisión, eficiencia y calidad en cada cosecha.

{/* Animated Robot */}

{/* Animated Drone */}

{/* Grape Cluster */}

{/* Stats Card */}

98%

Precisión

{/* Features Section */}

Tecnología de Vanguardia

Nuestros robots y drones trabajan en perfecta sincronía para optimizar cada aspecto de tu producción

{/* Robot Recolector */}

Robot Recolector

• Análisis de pH en tiempo real
• Detección de madurez y calidad
• Recolección automatizada sin daños
• Elimina error humano

{/* Drone de Monitoreo */}

Drone de Análisis

• Escaneo de nivelación del suelo
• Análisis de pH del terreno
• Detección de necesidades de fertilización
• Mapeo térmico y de humedad

{/* Beneficios */}

Resultados Comprobados

• Reducción de costos hasta 40%
• Mejora de calidad del producto
• Optimización de recursos
• Datos precisos para decisiones estratégicas

{/* Benefits Section */}

Eficiencia Máxima

Automatización completa que trabaja 24/7 sin fatiga, maximizando tu producción

Calidad Garantizada

Análisis preciso de cada uva asegura solo el mejor producto en tu cosecha

Sostenibilidad

Uso optimizado de recursos reduce el impacto ambiental de tu producción

{/* CTA Section */}

Transforma Tu Producción Hoy

Únete a los productores que ya están revolucionando la agricultura con AgroBot

{/* Footer */}

) } [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": "15.5.9", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.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": "^0.9.9", "zod": "3.25.76", "ai": "5.0.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Navigation } from "@/components/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BotIcon, DroneIcon, TrendingUpIcon, LeafIcon, AlertCircleIcon } from "@/components/icons" import { Chatbot } from "@/components/chatbot" import { Line, LineChart, Bar, BarChart, Area, AreaChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Legend, } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { useEffect, useState } from "react" // Simulated real-time data const generateRealtimeData = () => { const now = new Date() const data = [] for (let i = 11; i >= 0; i--) { const time = new Date(now.getTime() - i * 5 * 60000) // 5 minute intervals data.push({ time: time.toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }), robotsActive: Math.floor(Math.random() * 3) + 8, dronesActive: Math.floor(Math.random() * 2) + 3, grapesCollected: Math.floor(Math.random() * 50) + 150, soilPH: (Math.random() * 0.5 + 6.5).toFixed(1), efficiency: Math.floor(Math.random() * 5) + 93, }) } return data } const productionData = [ { month: "Ene", uvas: 4200, calidad: 96 }, { month: "Feb", uvas: 4800, calidad: 97 }, { month: "Mar", uvas: 5200, calidad: 95 }, { month: "Abr", uvas: 6100, calidad: 98 }, { month: "May", uvas: 7200, calidad: 97 }, { month: "Jun", uvas: 8500, calidad: 99 }, ] const soilAnalysisData = [ { zone: "Zona A", ph: 6.8, nitrogen: 85, phosphorus: 72, potassium: 90 }, { zone: "Zona B", ph: 6.5, nitrogen: 78, phosphorus: 68, potassium: 85 }, { zone: "Zona C", ph: 7.0, nitrogen: 92, phosphorus: 80, potassium: 88 }, { zone: "Zona D", ph: 6.7, nitrogen: 88, phosphorus: 75, potassium: 92 }, { zone: "Zona E", ph: 6.9, nitrogen: 90, phosphorus: 78, potassium: 87 }, ] const robotPerformanceData = [ { robot: "Robot 1", collected: 1250, accuracy: 98, uptime: 99 }, { robot: "Robot 2", collected: 1180, accuracy: 97, uptime: 98 }, { robot: "Robot 3", collected: 1320, accuracy: 99, uptime: 100 }, { robot: "Robot 4", collected: 1210, accuracy: 98, uptime: 97 }, { robot: "Robot 5", collected: 1290, accuracy: 99, uptime: 99 }, ] export default function DashboardPage() { const [realtimeData, setRealtimeData] = useState(generateRealtimeData()) const [currentStats, setCurrentStats] = useState({ robotsActive: 10, dronesActive: 4, grapesCollected: 12450, efficiency: 97, }) // Simulate real-time updates useEffect(() => { const interval = setInterval(() => { setRealtimeData((prev) => { const newData = [...prev.slice(1)] const now = new Date() newData.push({ time: now.toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }), robotsActive: Math.floor(Math.random() * 3) + 8, dronesActive: Math.floor(Math.random() * 2) + 3, grapesCollected: Math.floor(Math.random() * 50) + 150, soilPH: (Math.random() * 0.5 + 6.5).toFixed(1), efficiency: Math.floor(Math.random() * 5) + 93, }) return newData }) setCurrentStats({ robotsActive: Math.floor(Math.random() * 3) + 8, dronesActive: Math.floor(Math.random() * 2) + 3, grapesCollected: 12450 + Math.floor(Math.random() * 100), efficiency: Math.floor(Math.random() * 3) + 96, }) }, 5000) // Update every 5 seconds return () => clearInterval(interval) }, []) return (

Dashboard en Tiempo Real

Monitoreo completo de tu operación agrícola

{/* Real-time Stats */}

Robots Activos

{currentStats.robotsActive}

↑ 100% operativos

Drones en Vuelo

{currentStats.dronesActive}

↑ 100% operativos

Uvas Recolectadas Hoy

{currentStats.grapesCollected.toLocaleString()}

↑ 12% vs ayer

Eficiencia Global

{currentStats.efficiency}%

↑ 3% este mes

{/* Tabs for different views */} Tiempo Real Producción Análisis de Suelo Robots {/* Real-time Tab */}

Actividad de Robots Últimos 60 minutos } /> Recolección en Tiempo Real Uvas por intervalo de 5 minutos } /> Eficiencia del Sistema Porcentaje de eficiencia operativa } /> Actividad de Drones Drones en operación } />

{/* Production Tab */}

Producción Mensual Kilogramos de uvas recolectadas } /> Calidad del Producto Porcentaje de calidad premium } />

Tendencia de Producción y Calidad Comparativa de los últimos 6 meses } /> {/* Soil Analysis Tab */} Análisis de pH por Zona Niveles de pH detectados por drones } /> Nutrientes del Suelo Niveles de NPK por zona (Nitrógeno, Fósforo, Potasio) } />

Alertas

Zona B - pH Bajo

Considerar aplicación de cal

Zona D - Nitrógeno Óptimo

Condiciones ideales

Promedio General

pH 6.78

Nitrógeno 86.6%

Fósforo 74.6%

Potasio 88.4%

Recomendaciones

✓ Zona C: Condiciones óptimas
⚠ Zona B: Aplicar fertilizante nitrogenado
✓ Zona E: Mantener régimen actual

{/* Robots Tab */} Rendimiento por Robot Uvas recolectadas en las últimas 24 horas } />

Precisión de Recolección Porcentaje de precisión por robot } /> Tiempo de Actividad Uptime operativo por robot } />

Estado de la Flota Resumen del estado de todos los robots

{robotPerformanceData.map((robot, index) => (

{robot.robot}

{robot.collected} kg recolectados

Precisión

{robot.accuracy}%

Uptime

{robot.uptime}%

))}

) } [V0_FILE]typescriptreact:file="app/contacto/page.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { Navigation } from "@/components/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Chatbot } from "@/components/chatbot" import { MessageSquareIcon, PhoneIcon, MailIcon, MapPinIcon, ClockIcon, SendIcon } from "@/components/icons" import { useState } from "react" import { useToast } from "@/hooks/use-toast" export default function ContactoPage() { const { toast } = useToast() const [formData, setFormData] = useState({ name: "", email: "", phone: "", company: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission await new Promise((resolve) => setTimeout(resolve, 1000)) // Create WhatsApp message const whatsappMessage = `Hola! Me gustaría contactarlos. Nombre: ${formData.name} Email: ${formData.email} Teléfono: ${formData.phone} Empresa: ${formData.company} Mensaje: ${formData.message}` const encodedMessage = encodeURIComponent(whatsappMessage) const whatsappUrl = `https://wa.me/2616400233?text=${encodedMessage}` toast({ title: "Redirigiendo a WhatsApp", description: "Te conectaremos con nuestro equipo en WhatsApp.", }) // Open WhatsApp window.open(whatsappUrl, "_blank") // Reset form setFormData({ name: "", email: "", phone: "", company: "", message: "", }) setIsSubmitting(false) } const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleWhatsAppDirect = () => { window.open("https://wa.me/2616400233", "_blank") } return (

{/* Header */}

Contáctanos

Estamos aquí para ayudarte a transformar tu producción agrícola con tecnología de vanguardia

{/* Contact Form */} Envíanos un Mensaje Completa el formulario y te contactaremos por WhatsApp inmediatamente

Nombre Completo *

Email *

Teléfono *

Empresa / Viñedo

Mensaje *

</div>

<Button type="submit" className="w-full bg-primary hover:bg-primary/90" disabled={isSubmitting}>
                    {isSubmitting ? (
                      "Enviando..."
                    ) : (
                      <>
                        <SendIcon className="mr-2 h-4 w-4" size={16} />
                        Enviar por WhatsApp
                      </>
                    )}
                  </Button>

<p className="text-xs text-muted-foreground text-center">
                    Al enviar este formulario, serás redirigido a WhatsApp para continuar la conversación
                  </p>
                </form>
              </CardContent>
            </Card>

{/* Contact Information */}
            <div className="space-y-6">
              {/* WhatsApp Direct */}
              <Card className="bg-gradient-to-br from-primary/10 to-secondary/10 border-primary/20">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-2xl">
                    <MessageSquareIcon className="h-6 w-6 text-primary" />
                    WhatsApp Directo
                  </CardTitle>
                  <CardDescription>La forma más rápida de contactarnos</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-muted-foreground">
                    Chatea con nuestro equipo de expertos en tiempo real. Respuesta inmediata garantizada durante
                    horario laboral.
                  </p>
                  <Button onClick={handleWhatsAppDirect} size="lg" className="w-full bg-primary hover:bg-primary/90">
                    <MessageSquareIcon className="mr-2 h-5 w-5" size={20} />
                    Abrir WhatsApp
                  </Button>
                  <p className="text-center font-semibold text-lg">+54 261 640 0233</p>
                </CardContent>
              </Card>

{/* Contact Details */}
              <Card>
                <CardHeader>
                  <CardTitle>Información de Contacto</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <PhoneIcon className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Teléfono</h3>
                      <p className="text-muted-foreground">+54 261 640 0233</p>
                      <p className="text-sm text-muted-foreground">Lun - Vie: 9:00 - 18:00</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <MailIcon className="h-6 w-6 text-secondary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Email</h3>
                      <p className="text-muted-foreground">contacto@agrobot.com</p>
                      <p className="text-sm text-muted-foreground">Respuesta en 24 horas</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <MapPinIcon className="h-6 w-6 text-accent" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Ubicación</h3>
                      <p className="text-muted-foreground">Mendoza, Argentina</p>
                      <p className="text-sm text-muted-foreground">Zona vitivinícola</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                      <ClockIcon className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold mb-1">Horario de Atención</h3>
                      <p className="text-muted-foreground">Lunes a Viernes</p>
                      <p className="text-sm text-muted-foreground">9:00 - 18:00 (GMT-3)</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Quick Info */}
              <Card className="bg-muted/50">
                <CardContent className="pt-6">
                  <h3 className="font-semibold mb-3">¿Por qué elegirnos?</h3>
                  <ul className="space-y-2 text-sm text-muted-foreground">
                    <li className="flex items-start gap-2">
                      <span className="text-primary mt-0.5">✓</span>
                      <span>Respuesta inmediata por WhatsApp</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary mt-0.5">✓</span>
                      <span>Asesoramiento técnico especializado</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary mt-0.5">✓</span>
                      <span>Demostraciones en vivo disponibles</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary mt-0.5">✓</span>
                      <span>Soporte post-venta garantizado</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>

{/* FAQ Section */}
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl">Preguntas Frecuentes</CardTitle>
              <CardDescription>Respuestas rápidas a las consultas más comunes</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <h3 className="font-semibold mb-2">¿Cuánto tiempo toma la implementación?</h3>
                  <p className="text-sm text-muted-foreground">
                    La implementación completa toma entre 2-4 semanas, dependiendo del tamaño de tu operación. Incluye
                    instalación, capacitación y soporte inicial.
                  </p>
                </div>

<div>
                  <h3 className="font-semibold mb-2">¿Ofrecen financiamiento?</h3>
                  <p className="text-sm text-muted-foreground">
                    Sí, trabajamos con diferentes opciones de financiamiento adaptadas a las necesidades de cada
                    productor. Contáctanos para más detalles.
                  </p>
                </div>

<div>
                  <h3 className="font-semibold mb-2">¿Qué tipo de soporte ofrecen?</h3>
                  <p className="text-sm text-muted-foreground">
                    Ofrecemos soporte técnico 24/7 por WhatsApp, mantenimiento preventivo mensual y actualizaciones de
                    software incluidas.
                  </p>
                </div>

<div>
                  <h3 className="font-semibold mb-2">¿Puedo ver una demostración?</h3>
                  <p className="text-sm text-muted-foreground">
                    Por supuesto. Ofrecemos demostraciones en vivo en nuestras instalaciones o en tu viñedo. Contáctanos
                    para agendar una visita.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

<Chatbot />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/chat/route.ts" isEdit="true" isMerged="true"
import { streamText } from "ai"

export const maxDuration = 30

export async function POST(req: Request) {
  const { messages } = await req.json()

const result = await streamText({
    model: "openai/gpt-4o-mini",
    system: `Eres un asistente experto de AgroBot, una empresa que ofrece robots recolectores y drones de análisis para la agricultura vitivinícola.

Información clave sobre AgroBot:
- Robots recolectores que analizan pH en tiempo real, detectan madurez y calidad, y recolectan uvas sin daños
- Drones de análisis que escanean nivelación del suelo, analizan pH del terreno, detectan necesidades de fertilización, y realizan mapeo térmico
- Beneficios: Reducción de costos hasta 40%, mejora de calidad del producto, optimización de recursos, y datos precisos para decisiones estratégicas
- Eficiencia máxima con automatización 24/7
- Calidad garantizada con análisis preciso de cada uva
- Sostenibilidad con uso optimizado de recursos
- Contacto: WhatsApp +54 261 640 0233

Tu trabajo es:
1. Responder preguntas sobre los productos y servicios de AgroBot
2. Explicar los beneficios de la tecnología agrícola inteligente
3. Ayudar a los usuarios a entender cómo los robots y drones pueden mejorar su producción
4. Proporcionar información técnica cuando sea necesario
5. Ser amable, profesional y entusiasta sobre la tecnología agrícola

Siempre responde en español y mantén un tono profesional pero accesible.`,
    messages,
  })

return result.toDataStreamResponse()
}
[V0_FILE]typescriptreact:file="components/icons.tsx" isMerged="true"
export function BotIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M12 8V4H8" />
      <rect width="16" height="12" x="4" y="8" rx="2" />
      <path d="M2 14h2" />
      <path d="M20 14h2" />
      <path d="M15 13v2" />
      <path d="M9 13v2" />
    </svg>
  )
}

export function DroneIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <circle cx="12" cy="12" r="3" />
      <circle cx="6" cy="6" r="2" />
      <circle cx="18" cy="6" r="2" />
      <circle cx="6" cy="18" r="2" />
      <circle cx="18" cy="18" r="2" />
      <path d="M9 10 6 8" />
      <path d="M15 10l3-2" />
      <path d="M9 14 6 16" />
      <path d="M15 14l3 2" />
    </svg>
  )
}

export function LeafIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" />
      <path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" />
    </svg>
  )
}

export function TrendingUpIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
      <polyline points="16 7 22 7 22 13" />
    </svg>
  )
}

export function ShieldIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
    </svg>
  )
}

export function ZapIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
    </svg>
  )
}

export function ArrowRightIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M5 12h14" />
      <path d="m12 5 7 7-7 7" />
    </svg>
  )
}

export function AlertCircleIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <circle cx="12" cy="12" r="10" />
      <line x1="12" x2="12" y1="8" y2="12" />
      <line x1="12" x2="12.01" y1="16" y2="16" />
    </svg>
  )
}

export function SendIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="m22 2-7 20-4-9-9-4Z" />
      <path d="M22 2 11 13" />
    </svg>
  )
}

export function XIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
  )
}

export function Minimize2Icon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <polyline points="4 14 10 14 10 20" />
      <polyline points="20 10 14 10 14 4" />
      <line x1="14" x2="21" y1="10" y2="3" />
      <line x1="3" x2="10" y1="21" y2="14" />
    </svg>
  )
}

export function Maximize2Icon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <polyline points="15 3 21 3 21 9" />
      <polyline points="9 21 3 21 3 15" />
      <line x1="21" x2="14" y1="3" y2="10" />
      <line x1="3" x2="10" y1="21" y2="14" />
    </svg>
  )
}

export function MessageSquareIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
    </svg>
  )
}

export function PhoneIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>
  )
}

export function MailIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <rect width="20" height="16" x="2" y="4" rx="2" />
      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
    </svg>
  )
}

export function MapPinIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  )
}

export function ClockIcon({ className, size = 24 }: { className?: string; size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <circle cx="12" cy="12" r="10" />
      <polyline points="12 6 12 12 16 14" />
    </svg>
  )
}
[V0_FILE]typescriptreact:file="components/chatbot.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { BotIcon, SendIcon, XIcon, Minimize2Icon, Maximize2Icon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

export function Chatbot() {
  const [isOpen, setIsOpen] = useState(false)
  const [isMinimized, setIsMinimized] = useState(false)
  const [messages, setMessages] = useState<Array<{ id: string; role: string; content: string }>>([])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return

const userMessage = { id: Date.now().toString(), role: "user", content: input }
    setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsLoading(true)

try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          messages: [...messages, userMessage].map((m) => ({ role: m.role, content: m.content })),
        }),
      })

if (!response.ok) throw new Error("Failed to get response")

const reader = response.body?.getReader()
      const decoder = new TextDecoder()
      let assistantMessage = ""

const assistantId = (Date.now() + 1).toString()
      setMessages((prev) => [...prev, { id: assistantId, role: "assistant", content: "" }])

if (reader) {
        while (true) {
          const { done, value } = await reader.read()
          if (done) break

const chunk = decoder.decode(value)
          const lines = chunk.split("\n")

for (const line of lines) {
            if (line.startsWith("0:")) {
              const text = line.slice(2).replace(/^"|"$/g, "")
              assistantMessage += text
              setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, content: assistantMessage } : m)))
            }
          }
        }
      }
    } catch (error) {
      console.error("Chat error:", error)
      setMessages((prev) => [
        ...prev,
        {
          id: Date.now().toString(),
          role: "assistant",
          content: "Lo siento, hubo un error. Por favor intenta de nuevo.",
        },
      ])
    } finally {
      setIsLoading(false)
    }
  }

const handleSuggestedQuestion = (question: string) => {
    setInput(question)
    setTimeout(() => {
      const form = document.querySelector("form")
      if (form) {
        form.requestSubmit()
      }
    }, 100)
  }

return (
    <>
      {/* Floating Chat Button */}
      {!isOpen && (
        <Button
          onClick={() => setIsOpen(true)}
          className="fixed bottom-6 right-6 h-14 w-14 rounded-full shadow-lg bg-primary hover:bg-primary/90 z-50"
          size="icon"
        >
          <BotIcon className="h-6 w-6" size={24} />
        </Button>
      )}

{/* Chat Window */}
      {isOpen && (
        <Card
          className={cn(
            "fixed bottom-6 right-6 z-50 shadow-2xl transition-all duration-300",
            isMinimized ? "w-80 h-16" : "w-96 h-[600px]",
          )}
        >
          <CardHeader className="flex flex-row items-center justify-between p-4 border-b bg-primary text-primary-foreground">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary-foreground/20 rounded-full flex items-center justify-center">
                <BotIcon className="h-5 w-5" size={20} />
              </div>
              <CardTitle className="text-lg">AgroBot Copilot</CardTitle>
            </div>
            <div className="flex items-center gap-2">
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-primary-foreground hover:bg-primary-foreground/20"
                onClick={() => setIsMinimized(!isMinimized)}
              >
                {isMinimized ? (
                  <Maximize2Icon className="h-4 w-4" size={16} />
                ) : (
                  <Minimize2Icon className="h-4 w-4" size={16} />
                )}
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-primary-foreground hover:bg-primary-foreground/20"
                onClick={() => setIsOpen(false)}
              >
                <XIcon className="h-4 w-4" size={16} />
              </Button>
            </div>
          </CardHeader>

{!isMinimized && (
            <>
              <CardContent className="flex-1 overflow-y-auto p-4 space-y-4 h-[calc(600px-140px)]">
                {messages.length === 0 && (
                  <div className="flex flex-col items-center justify-center h-full text-center space-y-4">
                    <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
                      <BotIcon className="h-8 w-8 text-primary" size={32} />
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg mb-2">¡Hola! Soy tu Copilot de AgroBot</h3>
                      <p className="text-sm text-muted-foreground">
                        Pregúntame sobre nuestros robots, drones, o cómo podemos ayudar a mejorar tu producción
                        agrícola.
                      </p>
                    </div>
                    <div className="flex flex-wrap gap-2 justify-center">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleSuggestedQuestion("¿Cómo funcionan los robots recolectores?")}
                      >
                        ¿Cómo funcionan los robots?
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleSuggestedQuestion("¿Qué beneficios ofrecen los drones?")}
                      >
                        Beneficios de los drones
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleSuggestedQuestion("¿Cuánto puedo ahorrar con AgroBot?")}
                      >
                        Ahorros y costos
                      </Button>
                    </div>
                  </div>
                )}

{messages.map((message) => (
                  <div
                    key={message.id}
                    className={cn("flex gap-3", message.role === "user" ? "justify-end" : "justify-start")}
                  >
                    {message.role === "assistant" && (
                      <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                        <BotIcon className="h-5 w-5 text-primary" size={20} />
                      </div>
                    )}
                    <div
                      className={cn(
                        "rounded-lg px-4 py-2 max-w-[80%]",
                        message.role === "user" ? "bg-primary text-primary-foreground" : "bg-muted text-foreground",
                      )}
                    >
                      <p className="text-sm whitespace-pre-wrap">{message.content}</p>
                    </div>
                  </div>
                ))}

{isLoading && (
                  <div className="flex gap-3 justify-start">
                    <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                      <BotIcon className="h-5 w-5 text-primary" size={20} />
                    </div>
                    <div className="bg-muted rounded-lg px-4 py-2">
                      <div className="flex gap-1">
                        <div className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce" />
                        <div className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce [animation-delay:0.2s]" />
                        <div className="w-2 h-2 bg-muted-foreground/50 rounded-full animate-bounce [animation-delay:0.4s]" />
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>

<div className="p-4 border-t">
                <form onSubmit={handleSubmit} className="flex gap-2">
                  <Input
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    placeholder="Escribe tu pregunta..."
                    className="flex-1"
                    disabled={isLoading}
                  />
                  <Button type="submit" size="icon" disabled={isLoading || !input.trim()}>
                    <SendIcon className="h-4 w-4" size={16} />
                  </Button>
                </form>
              </div>
            </>
          )}
        </Card>
      )}
    </>
  )
}</article></body></html>