100:"ExplicitChatIdProvider" 101:I[903690,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$7b","$7c","$7d","$79","$76","$7e","$77","$7f","$80","$81","$82","$83","$78"],"$100"] 102:I[838238,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$7b","$7c","$7d","$79","$76","$7e","$77","$7f","$80","$81","$82","$83","$78"],"SWRDataProvider"] 104:[] 105:[["b_J7gS92M19VK",null],["b_VTcHeRxqhlB",null],["b_R9H3VEtCD9n",null]] 106:[["b_J7gS92M19VK",{"templateVersionId":null,"templateCanonId":null}],["b_VTcHeRxqhlB",{"templateVersionId":null,"templateCanonId":null}],["b_R9H3VEtCD9n",{"templateVersionId":null,"templateCanonId":null}]] 107:[["b_yK6ngMWP08e","$D2025-04-23T00:00:25.592Z"],["b_0arPSH46xez","$D2025-04-23T00:04:27.911Z"],["b_0eD82ZzxymW","$D2025-04-23T00:08:00.491Z"],["b_jsSKDWtctRt","$D2025-04-23T00:11:12.960Z"],["b_ntohfXqzpH3","$D2025-04-23T00:19:32.175Z"],["b_9eVatp3AcZg","$D2025-04-23T00:24:24.178Z"],["b_GlV2Ec2eUQq","$D2025-04-23T00:30:57.664Z"],["b_lYrZRsMcqXB","$D2025-04-23T00:37:52.810Z"],["b_l5dmH6iOLWL","$D2025-04-23T00:42:41.308Z"],["b_W1bqS77uaVo","$D2025-04-23T00:50:11.029Z"],["b_h245k7QS5mZ","$D2025-04-23T00:55:47.865Z"],["b_sPTrqJGQWf0","$D2025-04-23T00:58:23.607Z"],["b_anS8DHxklc0","$D2025-04-23T01:02:40.222Z"],["b_aGweThxTS9G","$D2025-04-23T01:07:59.182Z"],["b_6mcygFP2kkX","$D2025-04-23T01:10:13.528Z"],["b_5n5OOZR6nNA","$D2025-04-23T01:17:51.959Z"],["b_AXqYjRHMB4W","$D2025-04-23T01:21:25.318Z"],["b_gHobbuFZKer","$D2025-04-23T01:33:47.126Z"],["b_rx0DOxoemIp","$D2025-04-23T01:36:12.500Z"],["b_LOSdgrDizxc","$D2025-04-23T01:36:15.301Z"],["b_0TUhBZMVPuz","$D2025-04-23T01:36:17.012Z"],["b_mtWSHD4zrfH","$D2025-04-23T01:36:17.830Z"],["b_0zWdEtTVEyE","$D2025-04-23T01:37:56.852Z"],["b_Pxo8YKfS31M","$D2025-04-23T01:41:55.268Z"],["b_e4tOfnZisJM","$D2025-04-23T01:46:09.584Z"],["b_DLXJzCBuBxz","$D2025-04-23T02:21:23.516Z"],["b_2NWSE01veRE","$D2025-04-23T02:22:46.112Z"],["b_HP8YAQl0UPe","$D2025-04-23T02:32:37.134Z"],["b_iueNJbUxwga","$D2025-04-23T02:34:02.320Z"],["b_70400a1doFC","$D2025-04-23T02:37:08.331Z"],["b_cUwpgmlSfgB","$D2025-04-23T02:39:12.154Z"],["b_gy18oz2JEzn","$D2025-04-23T02:54:38.604Z"],["b_Lqf9CUOHmRJ","$D2025-04-23T02:58:44.951Z"],["b_T9KhwFjERxp","$D2025-04-23T03:04:47.033Z"],["b_ZMI2yQ9dFKE","$D2025-04-23T03:13:20.371Z"],["b_e3UXTjW7VbF","$D2025-04-23T03:18:31.967Z"],["b_h65RZdDffOl","$D2025-04-23T03:22:24.125Z"],["b_CBaiFbMs6AQ","$D2025-04-23T03:23:28.800Z"],["b_pAFvcQ0NQpY","$D2025-04-23T03:27:00.238Z"],["b_iCBvd3Hy7No","$D2025-04-23T03:43:36.743Z"],["b_GCX3Zg7Q9Vz","$D2025-04-23T03:55:19.825Z"],["b_GPG1b4Z68Oo","$D2025-04-23T04:01:19.984Z"],["b_AZB01pPFX8r","$D2025-04-23T04:05:11.626Z"],["b_euUwqvLSxcf","$D2025-04-23T04:08:10.126Z"],["b_2l55g1f0quu","$D2025-04-23T04:13:48.101Z"],["b_LXA0T4foqnt","$D2025-04-23T04:16:00.157Z"],["b_iw9lwryOGFj","$D2025-04-23T04:17:26.218Z"],["b_BQQihXkJ6TP","$D2025-04-23T04:19:22.016Z"],["b_J7gS92M19VK","$D2025-04-23T04:21:41.439Z"],["b_VTcHeRxqhlB","$D2025-04-23T04:24:46.016Z"],["b_R9H3VEtCD9n","$D2025-04-23T15:31:41.888Z"]] 108:[["b_J7gS92M19VK",false],["b_VTcHeRxqhlB",false],["b_R9H3VEtCD9n",false]] 109:[["b_J7gS92M19VK",{"aliasUrl":"v0-eos-solar-cash-integration-482k8qpfw.vercel.app","readyState":"ERROR","deploymentId":"dpl_EeKmVjh4EHNFWMJZvd2R1wccoSJs"}],["b_VTcHeRxqhlB","$undefined"],["b_R9H3VEtCD9n",{"aliasUrl":"v0-eos-solar-cash-integration-j94o6o3hh.vercel.app","readyState":"ERROR","deploymentId":"dpl_E6ZfpF4Vrs1yYvy6d24zMAUeigDy"}]] 10a:[["b_J7gS92M19VK",null],["b_VTcHeRxqhlB",null],["b_R9H3VEtCD9n",null]] 10b:[["b_J7gS92M19VK",true],["b_VTcHeRxqhlB",true],["b_R9H3VEtCD9n",true]] 10c:[["b_J7gS92M19VK",true],["b_VTcHeRxqhlB",true],["b_R9H3VEtCD9n",true]] 10d:[] 10e:T1031a3,[V0_FILE]typescriptreact:file="components/enterprise-feature.tsx" isEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle } from "lucide-react" interface EnterpriseFeatureProps { title: string description: string } export function EnterpriseFeature({ title, description }: EnterpriseFeatureProps) { return (

{title}

{description}

) } [V0_FILE]json:file="package.json" isMerged="true" { "dependencies": { "framer-motion": "^10.16.4" } } [V0_FILE]typescriptreact:file="components/solar-segment-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Factory, Home, ShoppingCart, type LucideIcon } from "lucide-react" interface SolarSegmentCardProps { title: string description: string icon: string } export function SolarSegmentCard({ title, description, icon }: SolarSegmentCardProps) { const icons: Record = { Home, Factory, ShoppingCart, } const Icon = icons[icon] || Home return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/control-center-feature.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle } from "lucide-react" interface ControlCenterFeatureProps { title: string description: string } export function ControlCenterFeature({ title, description }: ControlCenterFeatureProps) { return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/omnichannel-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { type LucideIcon, Smartphone, Globe, Store } from "lucide-react" interface OmnichannelCardProps { title: string description: string icon: string } export function OmnichannelCard({ title, description, icon }: OmnichannelCardProps) { const icons: Record = { Smartphone, Globe, Store, } const Icon = icons[icon] || Globe return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/plg-feature-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { type LucideIcon, BarChart, Zap, Globe, TrendingUp, Layers, Users } from "lucide-react" interface PlgFeatureCardProps { title: string description: string icon: string } export function PlgFeatureCard({ title, description, icon }: PlgFeatureCardProps) { const icons: Record = { BarChart, Zap, Globe, TrendingUp, Layers, Users, } const Icon = icons[icon] || Zap return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/roi-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { ArrowUpRight } from "lucide-react" interface RoiCardProps { title: string value: string description: string } export function RoiCard({ title, value, description }: RoiCardProps) { return (

{value}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/routing-step.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" interface RoutingStepProps { number: string title: string description: string } export function RoutingStep({ number, title, description }: RoutingStepProps) { return (

{number}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/routing-algorithm.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle } from "lucide-react" interface RoutingAlgorithmProps { number: string title: string description: string } export function RoutingAlgorithm({ number, title, description }: RoutingAlgorithmProps) { return (

{number}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/parameter-badge.tsx" isMerged="true" interface ParameterBadgeProps { label: string } export function ParameterBadge({ label }: ParameterBadgeProps) { return (

{label}

) } [V0_FILE]typescriptreact:file="components/vault-feature-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { type LucideIcon, Shield, TrendingUp, Zap, Lock, RefreshCw, CreditCard } from "lucide-react" interface VaultFeatureCardProps { title: string description: string icon: string } export function VaultFeatureCard({ title, description, icon }: VaultFeatureCardProps) { const icons: Record = { Shield, TrendingUp, Zap, Lock, RefreshCw, CreditCard, } const Icon = icons[icon] || Shield return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/integration-option.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle } from "lucide-react" interface IntegrationOptionProps { title: string description: string features: string[] } export function IntegrationOption({ title, description, features }: IntegrationOptionProps) { return (

{title}

{description}

{feature}

) } [V0_FILE]typescriptreact:file="components/deployment-option.tsx" isEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { type LucideIcon, Server, Cloud } from "lucide-react" interface DeploymentOptionProps { title: string description: string icon: string } export function DeploymentOption({ title, description, icon }: DeploymentOptionProps) { const icons: Record = { Server, Cloud, } const Icon = icons[icon] || Server return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/checkout-flow.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" interface CheckoutFlowProps { title: string description: string number: string } export function CheckoutFlow({ title, description, number }: CheckoutFlowProps) { return (

{number}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/reconciliation-feature-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { type LucideIcon, BarChart, Clock, Database, FileCheck, Layers, Zap } from "lucide-react" interface ReconciliationFeatureCardProps { title: string description: string icon: string } export function ReconciliationFeatureCard({ title, description, icon }: ReconciliationFeatureCardProps) { const icons: Record = { BarChart, Clock, Database, FileCheck, Layers, Zap, } const Icon = icons[icon] || FileCheck return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/metric-card.tsx" isEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { ArrowUpRight, Percent, Clock, Zap, Server, CreditCard } from "lucide-react" import type { LucideIcon } from "lucide-react" interface MetricCardProps { value: string description: string icon: string color?: string } export function MetricCard({ value, description, icon, color = "emerald" }: MetricCardProps) { const icons: Record = { Percent, Clock, Zap, Server, CreditCard, ArrowUpRight, } const Icon = icons[icon] || ArrowUpRight const colorClasses = { emerald: "text-emerald-500", pink: "text-pink-500", yellow: "text-yellow-500", } const iconColorClass = colorClasses[color as keyof typeof colorClasses] || colorClasses.emerald return (

{value}

{description}

) } [V0_FILE]typescriptreact:file="components/data-source-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { type LucideIcon, Database, Code, Workflow } from "lucide-react" interface DataSourceCardProps { title: string description: string icon: string } export function DataSourceCard({ title, description, icon }: DataSourceCardProps) { const icons: Record = { Database, Code, Workflow, } const Icon = icons[icon] || Database return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/workflow-item.tsx" isMerged="true" import { CheckCircle } from "lucide-react" interface WorkflowItemProps { description: string } export function WorkflowItem({ description }: WorkflowItemProps) { return (

{description}

) } [V0_FILE]typescriptreact:file="components/solution-badge.tsx" isEdit="true" isMerged="true" interface SolutionBadgeProps { label: string } export function SolutionBadge({ label }: SolutionBadgeProps) { return (

{label}

) } [V0_FILE]typescriptreact:file="components/certification-badge.tsx" isEdit="true" isMerged="true" import { Shield, FileCheck, Lock, type LucideIcon } from "lucide-react" interface CertificationBadgeProps { label: string icon: string } export function CertificationBadge({ label, icon }: CertificationBadgeProps) { const icons: Record = { Shield, FileCheck, Lock, } const Icon = icons[icon] || Shield return (

{label}

) } [V0_FILE]typescriptreact:file="components/animated-section.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { useRef, useEffect, useState } from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" type AnimationVariant = "fadeIn" | "fadeInUp" | "fadeInLeft" | "fadeInRight" | "zoomIn" | "scaleUp" | "staggered" interface AnimatedSectionProps { children: React.ReactNode className?: string variant?: AnimationVariant delay?: number duration?: number threshold?: number staggerChildren?: number id?: string } export function AnimatedSection({ children, className, variant = "fadeIn", delay = 0, duration = 0.5, threshold = 0.2, staggerChildren = 0.1, id, }: AnimatedSectionProps) { const [isInView, setIsInView] = useState(false) const ref = useRef(null) const prefersReducedMotion = useRef(false) useEffect(() => { // Check for reduced motion preference prefersReducedMotion.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches if (prefersReducedMotion.current) { setIsInView(true) return } const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsInView(true) // Once the animation has played, we can disconnect the observer if (ref.current) observer.unobserve(ref.current) } }, { threshold, rootMargin: "0px 0px -100px 0px", // Trigger slightly before the element is fully in view }, ) if (ref.current) { observer.observe(ref.current) } return () => { if (ref.current) observer.unobserve(ref.current) } }, [threshold]) // Animation variants const variants = { fadeIn: { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { duration, delay } }, }, fadeInUp: { hidden: { opacity: 0, y: 40 }, visible: { opacity: 1, y: 0, transition: { duration, delay } }, }, fadeInLeft: { hidden: { opacity: 0, x: -60 }, visible: { opacity: 1, x: 0, transition: { duration, delay } }, }, fadeInRight: { hidden: { opacity: 0, x: 60 }, visible: { opacity: 1, x: 0, transition: { duration, delay } }, }, zoomIn: { hidden: { opacity: 0, scale: 0.9 }, visible: { opacity: 1, scale: 1, transition: { duration, delay } }, }, scaleUp: { hidden: { opacity: 0, scale: 0.8 }, visible: { opacity: 1, scale: 1, transition: { duration, delay, type: "spring", stiffness: 100 } }, }, staggered: { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren, delayChildren: delay, }, }, }, } // Child variants for staggered animations const childVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.3 }, }, } // If user prefers reduced motion, don't animate if (prefersReducedMotion.current) { return (

{children}

) } return ( {variant === "staggered" ? ( {React.Children.map(children, (child, index) => ( {child} ))} ) : ( children )} ) } [V0_FILE]typescriptreact:file="components/case-study-card.tsx" isEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ArrowRight, TrendingUp } from "lucide-react" import Image from "next/image" import Link from "next/link" interface CaseStudyCardProps { title: string company: string description: string results: string[] category: string image: string link: string } export function CaseStudyCard({ title, company, description, results, category, image, link }: CaseStudyCardProps) { return (

{category}

{title}

{company}

{description}

Resultados:

{result}

Ver estudo completo ) } [V0_FILE]typescriptreact:file="app/revenue-recovery/page.tsx" isEdit="true" isMerged="true" import { ModeToggle } from "@/components/mode-toggle" import { Button } from "@/components/ui/button" import { ArrowRight, CheckCircle, BarChart3, TrendingUp, Zap, RefreshCw, Shield } from "lucide-react" import Link from "next/link" import Image from "next/image" import { GradientBackground } from "@/components/gradient-background" import { AnimatedSection } from "@/components/animated-section" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { MarqueeLogos } from "@/components/marquee-logos" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CaseStudyCard } from "@/components/case-study-card" import { TestimonialCard } from "@/components/testimonial-card" export default function RevenueRecovery() { return (

Eos Solar Payments

{/* Hero Section */}

RECUPERAÇÃO DE RECEITA Recuperação de receita de{" "} assinaturas {" "} com retentativas inteligentes Assuma o controle da recuperação de pagamentos com um motor de retentativa personalizável. Configure sua própria estratégia inteligente de retentativa com mais de 20 parâmetros para recuperar pagamentos falhos.

{/* Trusted By Section */}

Confiado pelas empresas que mais crescem em todo o mundo

{/* Benefits Section */}

Minimize a perda de clientes usando dados e machine learning

Motor de retentativa baseado em ML minimiza falhas em pagamentos recorrentes.

Redução de Churn Involuntário

Evite a perda de clientes devido a falhas de pagamento com retentativas inteligentes que aumentam a taxa de sucesso.

Aumento da Taxa de Autorização

Melhore significativamente as taxas de autorização de pagamentos com estratégias de retentativa otimizadas por IA.

Recuperação de Pagamentos Falhos

Recupere pagamentos que falharam automaticamente, protegendo sua receita recorrente e melhorando o fluxo de caixa.

{/* How It Works Section */}

Melhore a retenção com estratégias de retentativa configuráveis

Configure estratégias de recuperação de receita de assinatura inteiramente através do dashboard sem escrever nenhum código.

Configuração

Configure processadores de pagamento e plataformas de assinatura para integração perfeita com o sistema de recuperação.

Configuração

Configure o plano de recuperação (orçamento de retentativas, início de retentativas após determinado período, etc.)

Recuperação

Retentativas inteligentes alimentadas por mais de 20 pontos de dados recuperam pagamentos e protegem a receita de assinatura automaticamente.

Motor de retentativa inteligente e robusto que utiliza múltiplos parâmetros

Configure estratégias de recuperação de receita inteiramente através do dashboard sem escrever nenhum código.

Retentativa apenas de erros de categoria 1 Foco inteligente em erros que têm maior probabilidade de serem resolvidos com retentativas, economizando recursos e melhorando a eficiência.

Retentativa focada para assinaturas mensais e semanais Estratégias personalizadas com base na frequência de pagamento, otimizando o timing das retentativas para maximizar o sucesso.

Configuração de retentativa baseada no método de pagamento Estratégias adaptadas para diferentes métodos de pagamento, reconhecendo que cartões, débitos diretos e métodos alternativos têm padrões de falha distintos.

{/* Case Studies Section */}

Casos de Sucesso: Empresas Solares que Transformaram sua Recuperação de Receita

Conheça empresas reais do setor solar que aumentaram significativamente sua recuperação de receita e reduziram o churn involuntário com nossa solução.

SolarResidencial Brasil GC Solar Empreendimentos SolarConnect Marketplace

SolarResidencial Brasil

A SolarResidencial Brasil é uma das maiores empresas de instalação de sistemas fotovoltaicos residenciais do país, com mais de 15.000 clientes ativos em contratos de financiamento solar e assinaturas de manutenção.

O Desafio

A empresa enfrentava uma taxa de falha de pagamento de 12% em suas cobranças recorrentes, resultando em interrupções de serviço, insatisfação dos clientes e perda significativa de receita. A equipe financeira gastava cerca de 30 horas semanais tentando recuperar pagamentos manualmente.

A Solução

Implementaram a solução de Recuperação de Receita da Eos Solar Payments com foco em:

Estratégias personalizadas para diferentes planos de financiamento
Comunicação proativa com clientes antes de novas tentativas
Análise de padrões de falha para otimização contínua

Resultados

42%

Redução no churn involuntário

38%

Taxa de recuperação de pagamentos

70%

Redução em esforço manual

Impacto no Negócio

Com a melhoria na recuperação de pagamentos, a SolarResidencial Brasil conseguiu aumentar seu investimento em expansão, abrindo 3 novas filiais e ampliando sua base de clientes em 22% no ano seguinte à implementação da solução.

Impacto no Negócio

A melhoria na recuperação de receita permitiu que a GC Solar Empreendimentos acelerasse seu plano de expansão internacional, iniciando operações no Chile e Colômbia um ano antes do previsto.

GC Solar Empreendimentos

A GC Solar Empreendimentos é uma desenvolvedora de projetos solares de grande escala, com mais de 50 usinas solares em operação e contratos PPA (Power Purchase Agreements) com grandes empresas e distribuidoras de energia.

O Desafio

A empresa enfrentava problemas com pagamentos corporativos falhos em seus contratos PPA, resultando em fluxo de caixa imprevisível e dificuldades para financiar novos projetos. As falhas de pagamento representavam uma perda anual estimada em R$ 7,5 milhões.

A Solução

Implementaram a solução de Recuperação de Receita da Eos Solar Payments com foco em:

Estratégias específicas para pagamentos B2B e contratos PPA
Suporte multi-moeda para operações em diferentes países
Integração com seu sistema ERP para visibilidade financeira completa

Resultados

R$ 2,4M

Receita anual recuperada

32%

Aumento na taxa de autorização

40%

Melhoria na previsibilidade

SolarConnect Marketplace

A SolarConnect é uma plataforma marketplace que conecta consumidores interessados em energia solar com instaladores qualificados, operando em todo o Brasil com mais de 500 instaladores parceiros.

O Desafio

A empresa enfrentava problemas com pagamentos falhos em seu modelo de marketplace, onde gerencia pagamentos entre consumidores, instaladores e financiadores. As falhas resultavam em perda de comissões e insatisfação dos parceiros instaladores.

A Solução

Implementaram a solução de Recuperação de Receita da Eos Solar Payments com foco em:

Recuperação de pagamentos em transações multi-parte
Proteção de receita de comissões para instaladores parceiros
Análise avançada de padrões de falha para otimização contínua

Resultados

45%

Taxa de recuperação

28%

Aumento na retenção

22%

Crescimento em comissões

Impacto no Negócio

A melhoria na recuperação de pagamentos permitiu que a SolarConnect expandisse sua rede de instaladores parceiros em 35% no ano seguinte, atraindo parceiros de maior qualidade devido à maior confiabilidade nos pagamentos.

{/* Features Section */}

Estratégias inteligentes de retentativa para maximizar taxas de sucesso

Otimize retentativas de pagamento com tratamento categorizado de erros, configurações de retentativa personalizadas para assinaturas e estratégias específicas por método de pagamento para melhorar o sucesso das transações.

{/* Solar Sector Specific */}

Valor Específico para o Setor Solar

A solução de recuperação de receita da Eos Solar Payments foi especialmente projetada para atender aos desafios únicos do setor de energia solar, oferecendo funcionalidades específicas que maximizam o valor para empresas deste segmento.

Geração Distribuída (GD) Geração Centralizada (GC) Marketplace Solar

Geração Distribuída (GD)

Para empresas focadas em instalações residenciais e pequenos negócios, nossa solução oferece:

Recuperação de pagamentos de financiamento solar
Retentativas inteligentes para pagamentos mensais de financiamento solar, reduzindo inadimplência e protegendo o fluxo de caixa.
Otimização para modelos de assinatura solar
Estratégias específicas para modelos de assinatura solar (Solar-as-a-Service), garantindo continuidade de receita e satisfação do cliente.
Comunicação proativa com clientes
Notificações automáticas para clientes antes de novas tentativas, melhorando a experiência e aumentando as chances de sucesso do pagamento.

Geração Centralizada (GC)

Para desenvolvedores e operadores de projetos solares de grande escala, nossa solução oferece:

Recuperação de pagamentos corporativos
Estratégias específicas para pagamentos B2B, considerando ciclos de faturamento corporativo e processos de aprovação mais complexos.
Gestão de contratos PPA (Power Purchase Agreements)
Retentativas inteligentes para pagamentos de contratos PPA, garantindo fluxo de caixa estável para projetos de grande escala.
Suporte multi-moeda e multi-região
Recuperação de pagamentos em diferentes moedas e regiões, ideal para desenvolvedores solares com operações internacionais.

Marketplace Solar

Para plataformas que conectam consumidores, instaladores e financiadores, nossa solução oferece:

Recuperação de pagamentos em marketplace multi-parte
Estratégias de retentativa para transações complexas envolvendo múltiplos participantes no ecossistema solar.
Proteção de receita de comissões
Recuperação eficiente de pagamentos para proteger receitas de comissões de instaladores e parceiros no marketplace.
Análise avançada de falhas de pagamento
Insights detalhados sobre padrões de falha de pagamento, permitindo otimização contínua das estratégias de recuperação.

Impacto no Negócio Solar

Redução de Churn

Redução de até 40% no churn involuntário, aumentando significativamente o valor do tempo de vida do cliente (LTV) em modelos de assinatura solar.

Aumento de Receita

Recuperação de até 25% de receita que seria perdida devido a falhas de pagamento, impactando diretamente o fluxo de caixa e a previsibilidade financeira.

Experiência do Cliente

Melhoria na experiência do cliente com menos interrupções de serviço e comunicações proativas, resultando em aumento de 30% na satisfação do cliente.

Abordagem PLG para Recuperação de Receita

Nossa estratégia de Product-Led Growth para recuperação de receita permite que empresas solares implementem rapidamente, vejam resultados imediatos e expandam o uso conforme comprovam o valor.

Implementação self-service com templates específicos para solar

Dashboard de análise de resultados em tempo real

Modelo de preços baseado em valor recuperado

{/* Value Chain Section */}

Cadeia de Valor Completa

Nossa solução de recuperação de receita se integra perfeitamente à cadeia de valor completa da Eos Solar Payments, oferecendo valor em cada fase do ciclo de vida do cliente.

Fase de Pré-Onboarding

Durante a fase inicial, estabelecemos as bases para uma implementação bem-sucedida:

Avaliação de Necessidades Personalizada
Análise detalhada dos padrões de falha de pagamento existentes e configuração de estratégias de retentativa sob medida.
Calculadora de ROI de Recuperação
Estimativa precisa do potencial de recuperação de receita com base nos dados históricos de pagamentos do cliente.

Fase de Operação Contínua

Durante a operação diária, nossa solução:

Automação de Retentativas
Execução automática de estratégias de retentativa otimizadas por IA, sem necessidade de intervenção manual.
Monitoramento em Tempo Real
Dashboard detalhado mostrando taxas de recuperação, economia gerada e métricas de desempenho em tempo real.

Fase de Valor de Longo Prazo

À medida que a utilização amadurece, desbloqueamos valor estratégico:

Análise Preditiva de Falhas
Algoritmos avançados preveem potenciais falhas de pagamento antes que ocorram, permitindo ações preventivas.
Otimização Contínua de Estratégias
Refinamento constante das estratégias de retentativa com base em dados históricos e padrões emergentes.

{/* CTA Section */}

Transforme sua recuperação de receita com a Eos Solar Payments Descubra como nossa solução de recuperação de receita pode reduzir o churn, aumentar a receita e melhorar a experiência do cliente.

) } [V0_FILE]typescriptreact:file="components/dashboard/metric-card.tsx" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import type { LucideIcon } from "lucide-react" interface MetricCardProps { title: string value: string change: { value: string positive: boolean } icon: LucideIcon description?: string } export function MetricCard({ title, value, change, icon: Icon, description }: MetricCardProps) { return (

{title}

{value}

{change.positive ? "+" : ""} {change.value} vs. mês anterior

{description &&

{description}

}

) } [V0_FILE]typescriptreact:file="components/dashboard/chart-container.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { ReactNode } from "react" interface ChartContainerProps { title: string children: ReactNode description?: string action?: ReactNode } export function ChartContainer({ title, children, description, action }: ChartContainerProps) { return (

{title} {description &&

{description}

}

{action &&

{action}

}

{children} ) } [V0_FILE]typescriptreact:file="components/dashboard/alert-badge.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { Bell } from "lucide-react" interface AlertBadgeProps { count: number variant?: "default" | "warning" | "critical" } export function AlertBadge({ count, variant = "default" }: AlertBadgeProps) { const variantClasses = { default: "bg-blue-500 hover:bg-blue-600", warning: "bg-amber-500 hover:bg-amber-600", critical: "bg-red-500 hover:bg-red-600", } return (

{count > 0 && ( {count} )}

) } [V0_FILE]typescriptreact:file="components/dashboard/alert-notification.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { AlertCircle, AlertTriangle, Info, X } from "lucide-react" import { Button } from "@/components/ui/button" import { cva } from "class-variance-authority" export type AlertSeverity = "info" | "warning" | "critical" export interface AlertNotificationProps { title: string message: string timestamp: string severity: AlertSeverity metric?: string threshold?: string currentValue?: string onDismiss?: () => void onViewDetails?: () => void } const alertVariants = cva("", { variants: { severity: { info: "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/50", warning: "border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/50", critical: "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/50", }, }, defaultVariants: { severity: "info", }, }) const iconVariants = cva("h-5 w-5", { variants: { severity: { info: "text-blue-500", warning: "text-amber-500", critical: "text-red-500", }, }, defaultVariants: { severity: "info", }, }) export function AlertNotification({ title, message, timestamp, severity, metric, threshold, currentValue, onDismiss, onViewDetails, }: AlertNotificationProps) { const AlertIcon = severity === "info" ? Info : severity === "warning" ? AlertTriangle : AlertCircle return (

{title}

{message}

{(metric || threshold || currentValue) && (

{metric && (

Métrica: {metric}

)} {threshold && (

Limite: {threshold}

)} {currentValue && (

Valor atual: {currentValue}

)}

{timestamp} {onViewDetails && ( )}

) } [V0_FILE]typescriptreact:file="components/dashboard/alert-config-form.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Bell, Mail, Smartphone } from "lucide-react" export function AlertConfigForm() { const [emailEnabled, setEmailEnabled] = useState(true) const [smsEnabled, setSmsEnabled] = useState(false) const [pushEnabled, setPushEnabled] = useState(true) return ( Configurar Alertas Defina limites e condições para receber alertas sobre métricas importantes Taxa de Recuperação Tipos de Falha Estratégias

Limite de Alerta (%)

Período de Análise

Comparar com

Mudança Significativa (%)

Alerta quando a taxa de recuperação cair mais do que esta porcentagem

Severidade do Alerta

Tipo de Falha

Limite de Alerta (%)

Período de Análise

Aumento Significativo (%)

Alerta quando o tipo de falha aumentar mais do que esta porcentagem

Severidade do Alerta

Estratégia

Limite de Sucesso (%)

Período de Análise

Mínimo de Tentativas

Número mínimo de tentativas para considerar a estratégia relevante

Severidade do Alerta

Canais de Notificação

SMS

Notificações Push

) } [V0_FILE]typescriptreact:file="app/dashboard/recovery/alerts/page.tsx" isMerged="true" import { ModeToggle } from "@/components/mode-toggle" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" import Link from "next/link" import { AlertConfigForm } from "@/components/dashboard/alert-config-form" import { AlertHistory } from "@/components/dashboard/alert-history" export default function AlertsConfigPage() { return (

Eos Solar Payments

Configuração de Alertas

Configure alertas personalizados para monitorar métricas importantes de recuperação de receita

) } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" const ScrollArea = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "vertical", ...props }, ref) => ( )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="components/dashboard/ai-recommendations.tsx" isMerged="true" import { ChartContainer } from "@/components/dashboard/chart-container" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Sparkles, Lightbulb, ArrowRight, Check, Clock } from "lucide-react" export function AiRecommendations() { const recommendations = [ { id: 1, title: "Otimizar Estratégia C para transações de alto valor", description: "Ajustar os parâmetros de retentativa para transações acima de R$1.000, aumentando o intervalo entre tentativas de 24h para 48h com base em padrões históricos de sucesso.", impact: "Aumento estimado de 12% na taxa de recuperação para este segmento", difficulty: "Média", timeframe: "Implementação em 1-2 dias", status: "pending", }, { id: 2, title: "Implementar comunicação proativa para cartões prestes a expirar", description: "Enviar notificações 15 dias antes da expiração do cartão, permitindo que clientes atualizem informações antes da falha ocorrer.", impact: "Redução potencial de 25% em falhas por cartão expirado", difficulty: "Baixa", timeframe: "Implementação em 3-5 dias", status: "pending", }, { id: 3, title: "Ajustar timing de retentativas para o período de fim de ano", description: "Modificar a estratégia de retentativa durante dezembro, priorizando tentativas no início do mês e após o dia 20, evitando o período de maior concentração de gastos.", impact: "Mitigação da queda sazonal em até 7%", difficulty: "Baixa", timeframe: "Implementar até 15 de novembro", status: "pending", }, { id: 4, title: "Segmentar estratégias por valor de transação", description: "Criar estratégias específicas para diferentes faixas de valor, com abordagens personalizadas para transações pequenas, médias e grandes.", impact: "Aumento estimado de 8% na taxa geral de recuperação", difficulty: "Alta", timeframe: "Implementação em 1-2 semanas", status: "in_progress", }, ] const getDifficultyBadge = (difficulty: string) => { switch (difficulty) { case "Baixa": return ( Baixa ) case "Média": return ( Média ) case "Alta": return ( Alta ) default: return null } } const getStatusBadge = (status: string) => { switch (status) { case "pending": return ( Pendente ) case "in_progress": return ( Em Progresso ) case "completed": return ( Implementado ) default: return null } } return ( Recomendações Inteligentes IA } description="Sugestões baseadas em análise preditiva para melhorar a taxa de recuperação" >

{recommendations.map((recommendation) => (

{recommendation.title}

{getStatusBadge(recommendation.status)}

{recommendation.description}

Impacto Estimado {recommendation.impact}

Dificuldade

{getDifficultyBadge(recommendation.difficulty)}

Prazo {recommendation.timeframe}

))}

) } [V0_FILE]typescriptreact:file="components/dashboard/anomaly-detection.tsx" isMerged="true" import { ChartContainer } from "@/components/dashboard/chart-container" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Sparkles, AlertCircle, ArrowRight, Calendar } from "lucide-react" export function AnomalyDetection() { const anomalies = [ { id: 1, title: "Aumento súbito em falhas de cartão expirado", description: "Detectamos um aumento de 35% em falhas por cartão expirado nas últimas 48 horas, significativamente acima do padrão histórico.", detectedAt: "22/04/2023 08:15", confidence: "Alta (95%)", status: "Não resolvido", severity: "critical", }, { id: 2, title: "Queda na eficácia da Estratégia B", description: "A taxa de sucesso da Estratégia B caiu de 72% para 58% na última semana, sem alterações nos parâmetros de configuração.", detectedAt: "21/04/2023 14:30", confidence: "Média (82%)", status: "Em análise", severity: "warning", }, { id: 3, title: "Padrão atípico em horários de falha", description: "Identificamos uma concentração anormal de falhas de pagamento entre 2h e 4h da manhã, possivelmente indicando um problema de processamento noturno.", detectedAt: "20/04/2023 09:45", confidence: "Alta (91%)", status: "Resolvido", severity: "resolved", }, ] const getSeverityIcon = (severity: string) => { switch (severity) { case "critical": return case "warning": return case "resolved": return default: return } } const getSeverityBadge = (severity: string) => { switch (severity) { case "critical": return ( Crítico ) case "warning": return ( Alerta ) case "resolved": return ( Resolvido ) default: return null } } const getStatusColor = (status: string) => { switch (status) { case "Não resolvido": return "text-red-500" case "Em análise": return "text-amber-500" case "Resolvido": return "text-emerald-500" default: return "text-muted-foreground" } } return ( Detecção de Anomalias IA } description="Padrões anormais detectados automaticamente pela IA" >

{anomalies.map((anomaly) => (

{getSeverityIcon(anomaly.severity)}

{anomaly.title}

{getSeverityBadge(anomaly.severity)}

{anomaly.description}

Detectado: {anomaly.detectedAt}

Confiança: {anomaly.confidence}

Status: {anomaly.status}

))}

) } [V0_FILE]typescriptreact:file="lib/ai-utils.ts" isMerged="true" import { generateText } from "ai" import { openai } from "@ai-sdk/openai" export async function generatePrediction(historicalData: any) { try { const prompt = ` Analyze the following historical payment recovery data and predict future trends: ${JSON.stringify(historicalData)} Please provide: 1. A prediction for the next 6 months 2. Confidence intervals for the prediction 3. Key risk factors that might affect recovery rates 4. Actionable recommendations to improve recovery rates ` const { text } = await generateText({ model: openai("gpt-4o"), prompt, }) return JSON.parse(text) } catch (error) { console.error("Error generating prediction:", error) return { prediction: [], confidenceIntervals: { upper: [], lower: [] }, riskFactors: [], recommendations: [], } } } export async function detectAnomalies(recentData: any, historicalPatterns: any) { try { const prompt = ` Analyze the following recent payment recovery data: ${JSON.stringify(recentData)} Compare it with historical patterns: ${JSON.stringify(historicalPatterns)} Identify any anomalies or unusual patterns that might indicate problems. For each anomaly, provide: 1. A description of the anomaly 2. Confidence level (percentage) 3. Potential impact 4. Recommended actions ` const { text } = await generateText({ model: openai("gpt-4o"), prompt, }) return JSON.parse(text) } catch (error) { console.error("Error detecting anomalies:", error) return { anomalies: [] } } } export async function generateRecommendations(recoveryData: any, strategies: any) { try { const prompt = ` Based on the following recovery data and current strategies: Recovery Data: ${JSON.stringify(recoveryData)} Current Strategies: ${JSON.stringify(strategies)} Generate 3-5 specific, actionable recommendations to improve recovery rates. For each recommendation, include: 1. A clear title 2. Detailed description of the action 3. Expected impact (quantified if possible) 4. Implementation difficulty (Low, Medium, High) 5. Suggested timeframe for implementation ` const { text } = await generateText({ model: openai("gpt-4o"), prompt, }) return JSON.parse(text) } catch (error) { console.error("Error generating recommendations:", error) return { recommendations: [] } } } [V0_FILE]typescriptreact:file="app/api/predictions/route.ts" isMerged="true" import { NextResponse } from "next/server" // Sample historical data - in a real app, this would come from your database const historicalData = { recoveryRates: [62, 65, 68, 64, 60, 58], failureTypes: { expiredCard: [25, 28, 30, 32, 33, 35], insufficientFunds: [35, 32, 30, 28, 27, 25], processingError: [20, 20, 20, 20, 20, 20], blockedCard: [15, 15, 15, 15, 15, 15], other: [5, 5, 5, 5, 5, 5], }, strategies: { strategyA: [65, 67, 68, 68, 68, 68], strategyB: [70, 72, 72, 72, 72, 72], strategyC: [60, 58, 56, 55, 54, 53], strategyD: [72, 73, 74, 75, 75, 75], strategyE: [62, 62, 62, 62, 62, 62], }, } export async function GET() { try { // In a real application, you would fetch this data from your database // and pass it to the AI functions // For demo purposes, we'll return mock data that matches what the AI would generate const mockPrediction = { prediction: [56, 53, 50, 48, 52, 55], confidenceIntervals: { upper: [61, 58, 55, 53, 57, 60], lower: [51, 48, 45, 43, 47, 50], }, riskFactors: [ { id: 1, name: "Aumento em cartões expirados", description: "Previsto aumento de 15% em falhas por cartão expirado nos próximos 30 dias", impact: 85, trend: "increasing", }, { id: 2, name: "Sazonalidade de fim de ano", description: "Padrão histórico mostra queda de 8-12% na recuperação durante dezembro", impact: 70, trend: "stable", }, ], recommendations: [ { id: 1, title: "Otimizar Estratégia C para transações de alto valor", description: "Ajustar os parâmetros de retentativa para transações acima de R$1.000, aumentando o intervalo entre tentativas de 24h para 48h.", impact: "Aumento estimado de 12% na taxa de recuperação para este segmento", difficulty: "Média", timeframe: "Implementação em 1-2 dias", }, { id: 2, title: "Implementar comunicação proativa para cartões prestes a expirar", description: "Enviar notificações 15 dias antes da expiração do cartão, permitindo que clientes atualizem informações antes da falha ocorrer.", impact: "Redução potencial de 25% em falhas por cartão expirado", difficulty: "Baixa", timeframe: "Implementação em 3-5 dias", }, ], anomalies: [ { id: 1, title: "Aumento súbito em falhas de cartão expirado", description: "Detectamos um aumento de 35% em falhas por cartão expirado nas últimas 48 horas, significativamente acima do padrão histórico.", detectedAt: "22/04/2023 08:15", confidence: "Alta (95%)", status: "Não resolvido", severity: "critical", }, { id: 2, title: "Queda na eficácia da Estratégia B", description: "A taxa de sucesso da Estratégia B caiu de 72% para 58% na última semana, sem alterações nos parâmetros de configuração.", detectedAt: "21/04/2023 14:30", confidence: "Média (82%)", status: "Em análise", severity: "warning", }, ], } return NextResponse.json(mockPrediction) } catch (error) { console.error("Error in predictions API:", error) return NextResponse.json({ error: "Failed to generate predictions" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/dashboard/recovery/predictions/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { ModeToggle } from "@/components/mode-toggle" import { Button } from "@/components/ui/button" import { ArrowLeft, Sparkles } from "lucide-react" import Link from "next/link" import { PredictionChart } from "@/components/dashboard/prediction-chart" import { RiskFactors } from "@/components/dashboard/risk-factors" import { AiRecommendations } from "@/components/dashboard/ai-recommendations" import { AnomalyDetection } from "@/components/dashboard/anomaly-detection" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" export default function PredictionsPage() { const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate API loading const timer = setTimeout(() => { setIsLoading(false) }, 1000) return () => clearTimeout(timer) }, []) return (

Eos Solar Payments

Análise Preditiva

Previsões baseadas em IA para antecipar tendências e otimizar a recuperação de receita

Visão Geral Previsões Fatores de Risco Anomalias Recomendações

Como funciona nossa Análise Preditiva

Nosso sistema de IA analisa milhares de transações e padrões históricos para prever tendências futuras e identificar oportunidades de otimização. Combinamos modelos de machine learning com análise estatística avançada para oferecer insights acionáveis.

Previsão de Tendências

Modelos de série temporal preveem taxas de recuperação futuras com intervalos de confiança.

Detecção de Anomalias

Algoritmos identificam padrões incomuns que podem indicar problemas emergentes.

Recomendações Inteligentes

Sugestões personalizadas baseadas em análise de causa-raiz e testes A/B históricos.

) } [V0_FILE]typescriptreact:file="components/dashboard/region-details.tsx" isMerged="true" "use client" import { useState } from "react" import { ChartContainer } from "@/components/dashboard/chart-container" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ArrowUpRight, ArrowDownRight, Minus, TrendingUp, AlertTriangle, CheckCircle } from "lucide-react" // Dados simulados para detalhes da região const regionDetailData = { name: "Sudeste", overview: { recoveryRate: 75, totalValue: 24050000, failureTypes: [ { name: "Cartão Expirado", percentage: 32 }, { name: "Fundos Insuficientes", percentage: 28 }, { name: "Erro de Processamento", percentage: 18 }, { name: "Cartão Bloqueado", percentage: 12 }, { name: "Outros", percentage: 10 }, ], trends: { month: "+2.3%", quarter: "+5.1%", year: "+8.7%", }, }, states: [ { code: "SP", name: "São Paulo", recoveryRate: 78, trend: "+3.2%", status: "positive", value: 12500000, topIssue: "Cartão Expirado", }, { code: "RJ", name: "Rio de Janeiro", recoveryRate: 76, trend: "+2.8%", status: "positive", value: 4850000, topIssue: "Fundos Insuficientes", }, { code: "MG", name: "Minas Gerais", recoveryRate: 73, trend: "-1.5%", status: "negative", value: 5250000, topIssue: "Erro de Processamento", }, { code: "ES", name: "Espírito Santo", recoveryRate: 71, trend: "+0.2%", status: "neutral", value: 1450000, topIssue: "Cartão Bloqueado", }, ], recommendations: [ { title: "Otimizar estratégia para cartões expirados em SP", description: "Implementar notificações proativas 30 dias antes do vencimento", impact: "Alto", effort: "Médio", }, { title: "Revisar fluxo de retry para RJ", description: "Ajustar timing das retentativas para horários de maior aprovação", impact: "Médio", effort: "Baixo", }, { title: "Investigar queda em MG", description: "Analisar causas da recente queda na taxa de recuperação", impact: "Alto", effort: "Alto", }, ], } // Função para renderizar o indicador de tendência const TrendIndicator = ({ trend }: { trend: string }) => { const value = Number.parseFloat(trend.replace("%", "")) if (value > 1) { return (

{trend}

) } else if (value < -1) { return (

{trend}

) } else { return (

{trend}

) } } export function RegionDetails({ regionCode = "sudeste" }: { regionCode?: string }) { const [activeTab, setActiveTab] = useState("overview") // Dados da região (simulados) const region = regionDetailData return ( Visão Geral Estados Recomendações

Taxa de Recuperação Média regional

{region.overview.recoveryRate}%

Mês

Trimestre

Ano

Valor Recuperado Total na região

R$ {(region.overview.totalValue / 1000000).toFixed(1)}M

Distribuído entre {region.states.length} estados

Status Regional Avaliação geral

{region.overview.recoveryRate >= 70 ? ( <> Ótimo ) : region.overview.recoveryRate >= 60 ? ( <> Bom ) : ( <> Atenção Necessária )}

{region.overview.recoveryRate >= 70 ? "Desempenho acima da média nacional" : region.overview.recoveryRate >= 60 ? "Desempenho próximo à média nacional" : "Desempenho abaixo da média nacional"}

Principais Causas de Falha Distribuição percentual por tipo de falha

{region.overview.failureTypes.map((type) => (

{type.name} {type.percentage}%

))}

{region.states.map((state) => (

{state.name} = 75 ? "success" : state.recoveryRate >= 65 ? "default" : state.recoveryRate >= 55 ? "warning" : "destructive" } > {state.recoveryRate}%

Código: {state.code}

Tendência

Valor

R$ {(state.value / 1000000).toFixed(1)}M

Principal Problema

{state.topIssue}

))}

{region.recommendations.map((rec, index) => (

{rec.title}

Impacto: {rec.impact} Esforço: {rec.effort}

{rec.description}

))} ) } [V0_FILE]typescriptreact:file="app/dashboard/recovery/geography/page.tsx" isMerged="true" import { ModeToggle } from "@/components/mode-toggle" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" import Link from "next/link" import { RecoveryHeatmap } from "@/components/dashboard/recovery-heatmap" import { RegionDetails } from "@/components/dashboard/region-details" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function GeographyAnalysisPage() { return (

Eos Solar Payments

Análise Geográfica de Recuperação

Visualize e analise o desempenho de recuperação por região e estado

Comparativo Regional Análise comparativa entre regiões Taxa de Recuperação Valor Recuperado

Sudeste 75%

Sul 72%

Centro-Oeste 68%

Nordeste 61%

Norte 52%

Sudeste R$ 24.05M

Sul R$ 9.25M

Nordeste R$ 12.94M

Centro-Oeste R$ 7.40M

Norte R$ 5.95M

Insights Regionais Principais observações por região

Sudeste: Desempenho Excepcional

A região Sudeste mantém a maior taxa de recuperação, com destaque para São Paulo (78%).

Norte: Oportunidade de Melhoria

A região Norte apresenta a menor taxa de recuperação (52%), indicando necessidade de estratégias específicas.

Tendência Emergente

O Nordeste mostra a maior taxa de crescimento trimestral (+5.8%), indicando eficácia das novas estratégias.

) } [V0_FILE]typescriptreact:file="app/dashboard/security/page.tsx" isMerged="true" import { ModeToggle } from "@/components/mode-toggle" import { Button } from "@/components/ui/button" import { ArrowLeft, Shield, AlertTriangle, CheckCircle, ExternalLink } from "lucide-react" import Link from "next/link" import { VulnerabilityScope } from "@/components/dashboard/vulnerability-scope" import { ReportingGuidelines } from "@/components/dashboard/reporting-guidelines" import { ProgramTerms } from "@/components/dashboard/program-terms" import { SecurityMetrics } from "@/components/dashboard/security-metrics" import { HallOfFame } from "@/components/dashboard/hall-of-fame" export default function SecurityDashboard() { return (

Eos Solar Payments

Programa de Divulgação de Vulnerabilidades

A segurança do sistema é uma prioridade máxima na EOS Solar Payments. Trabalhamos em conjunto com pesquisadores de segurança para identificar e corrigir vulnerabilidades de forma responsável.

Nosso Compromisso

Reconhecer rapidamente o recebimento do relatório de vulnerabilidade e trabalhar em conjunto para entender e corrigir o problema com agilidade.

Validar, responder e corrigir vulnerabilidades de acordo com nosso compromisso com a segurança e privacidade.

Não tomar medidas legais contra pesquisadores que denunciem vulnerabilidades de segurança de acordo com esta política.

Não suspender ou encerrar o acesso aos nossos serviços caso você seja um cliente ou represente um cliente.

Reconhecer publicamente sua divulgação responsável em nossa página de Hall da Fama.

Contato Rápido

E-mail de Segurança

security@eos-solar-payments.com

Repositórios

github.com/eos-solar-payments

Reportar Vulnerabilidade

Formulário de Relatório

) } [V0_FILE]typescriptreact:file="components/dashboard/vulnerability-scope.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ExternalLink, Server, Globe, Code } from "lucide-react" export function VulnerabilityScope() { return ( Escopo do Programa Apenas os domínios listados abaixo estão incluídos no escopo deste programa. API Dashboard Website Repositórios

Endpoint de API (produção)

https://api.eos-solar-payments.com/

Endpoints de API para processamento de pagamentos, autenticação e gerenciamento de transações.

Endpoint do Painel (dashboard)

https://dashboard.eos-solar-payments.com/

Interface de administração para gerenciamento de pagamentos, relatórios e configurações.

Website

https://eos-solar-payments.com/

Site institucional e portal de informações sobre produtos e serviços.


              
                Repositórios de código aberto
                
                  
                    
                      https://github.com/eos-solar-payments/eos-solar-core
                    
                    
                      
                    
                  
                  
                    
                      https://github.com/eos-solar-payments/eos-solar-dashboard
                    
                    
                      
                    
                  
                  
                    
                      https://github.com/eos-solar-payments/eos-solar-web



        
          
            
            Software de terceiros
          
          
            No fornecimento de serviços aos clientes, a EOS Solar Payments utiliza diversas integrações com softwares de
            terceiros. Este Programa não se estende a nenhum software de terceiros, portanto, bugs ou
            vulnerabilidades detectadas em tais softwares não serão consideradas válidas para o Programa.


  )
}

import { AlertTriangle } from "lucide-react"
[V0_FILE]typescriptreact:file="components/dashboard/reporting-guidelines.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, Mail, Shield, XCircle, UserCheck } from "lucide-react"

export function ReportingGuidelines() {
  return (
    
      
        Diretrizes para Divulgação Responsável
        
          Para que a comunicação de vulnerabilidades ocorra de forma responsável e segura
        
      
      
        
          
            
              
            
            
              Notifique-nos imediatamente
              
                Ao encontrar qualquer possível problema de segurança, envie e-mail para:{" "}
                security@eos-solar-payments.com
              
            
          

          
            
              
            
            
              Siga esta política
              
                Não divulgue os detalhes da vulnerabilidade a terceiros.
              
            
          

          
            
              
            
            
              Utilize apenas canais de comunicação oficiais
              
                Não use e-mails pessoais, redes sociais ou meios privados para contatar a equipe de segurança, a menos
                que expressamente instruído a fazê-lo.
              
            
          
        

        
          
            
            Atividades Proibidas
          

          
            
              
              
                Não tente usar engenharia social, phishing ou ataques físicos contra funcionários ou
                usuários.
              
            

            
              
              
                Não obtenha acesso não autorizado ou destrua dados de usuários.
              
            

            
              
              
                Não explore as vulnerabilidades encontradas.
              
            

            
              
              
                Faça todo o possível para evitar violações de privacidade, degradação da experiência do
                usuário, interrupção de sistemas de produção ou destruição de dados durante os testes de segurança.
              
            
          
        

        
          Como Relatar
          
            
              Envie um e-mail para{" "}
              security@eos-solar-payments.com com detalhes
              da vulnerabilidade identificada.
            
            
              Após se registrar, utilize exclusivamente o e-mail registrado para se comunicar com a
              equipe de segurança.
            
            
              Inclua descrição e impacto potencial da vulnerabilidade, informações sobre você, produtos afetados, URL ou
              PoC, detalhes técnicos e passos para reproduzir.
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/program-terms.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CheckCircle, AlertTriangle, Scale, Shield } from "lucide-react"

export function ProgramTerms() {
  return (
    
      
        Termos do Programa
        
          Termos e condições que regem a participação no Programa de Divulgação de Vulnerabilidades
        
      
      
        
          
            Termos de Registro
            Exclusões
            Termos Adicionais
          

          
            
              
                
                
                  Ao submeter uma vulnerabilidade por meio deste Programa, você confirma que{" "}
                  não divulgou e não divulgará o bug ou sua submissão a ninguém,
                  exceto à EOS Solar Payments, sob os termos deste Programa.
                
              

              
                
                
                  Quaisquer informações que você receba ou colete sobre a EOS Solar Payments ao participar do Programa
                  devem ser mantidas em sigilo e usadas somente em conexão com o Programa, com o
                  objetivo de solucionar as vulnerabilidades.
                
              

              
                
                
                  Suas atividades de teste não devem impactar negativamente a EOS Solar Payments, seus
                  negócios ou desempenho.
                
              

              
                
                
                  Você é responsável por manter atualizados seus dados de contato (por exemplo, e-mail)
                  junto à EOS Solar Payments.
                
              

              
                
                
                  Somente os domínios mencionados no tópico "Escopo do Programa" devem ser incluídos na
                  pesquisa e testes de segurança. Qualquer teste fora desses domínios não está
                  contemplado no escopo do Programa.
                
              
            
          

          
            
              
                
                Atividades Excluídas
              
              
                Ao pesquisar vulnerabilidades, abstenha-se das seguintes atividades:
              
            

            
              
                
                Engenharia social (incluindo phishing)
              
              
                
                Ataques físicos contra propriedade
              
              
                
                DDoS (Negação de serviço ou Distribuída)
              
              
                
                Relatórios sobre cabeçalhos de segurança ausentes sem impacto
              
              
                
                Exposição de versão sem PoC de exploit funcional
              
              
                
                Listagem de diretórios contendo conteúdo já público
              
              
                
                Erros de ortografia ou problemas de interface sem impacto
              
              
                
                Exploração de serviços de terceiros fora do escopo
              
              
                
                Uso de bibliotecas vulneráveis sem demonstrar exploração
              
              
                
                Testes que resultem em bloqueio de conta
              
            
          

          
            
              
                
                  
                
                
                  Conformidade Legal
                  
                    Você deve obedecer à lei ao relatar vulnerabilidades.
                  
                
              

              
                
                  
                
                
                  Licença de Uso
                  
                    Ao submeter informações sobre uma vulnerabilidade, você concorda com estes termos e
                    concede à EOS Solar Payments uma{" "}
                    licença mundial, isenta de royalties e não-exclusiva para usar sua submissão com o
                    propósito de corrigir a vulnerabilidade.
                  
                
              

              
                Lei Aplicável e Foro
                
                  Estes termos serão regidos pelas Leis do [País de Sede da EOS Solar Payments] e
                  quaisquer litígios decorrentes deste Programa estarão sujeitos à{" "}
                  jurisdição exclusiva dos tribunais competentes na localidade definida pela sede da
                  empresa.
                
              
            
          
        
      
    
  )
}

import { XCircle } from "lucide-react"
[V0_FILE]typescriptreact:file="components/dashboard/security-metrics.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Shield, Clock, CheckCircle, AlertTriangle } from "lucide-react"
import { useState, useEffect } from "react"

export function SecurityMetrics() {
  const [progressValues, setProgressValues] = useState({
    responseTime: 0,
    resolutionTime: 0,
    severity: 0,
    bountyPaid: 0,
  })

  useEffect(() => {
    const timer = setTimeout(() => {
      setProgressValues({
        responseTime: 92,
        resolutionTime: 87,
        severity: 65,
        bountyPaid: 78,
      })
    }, 500)

    return () => clearTimeout(timer)
  }, [])

  return (
    
      
        Métricas do Programa
        Desempenho do programa de divulgação de vulnerabilidades
      
      
        
          
            
              
              Tempo de Resposta
            
            92%
          
          
          Respondemos a 92% dos relatórios em menos de 24 horas
        

        
          
            
              
              Tempo de Resolução
            
            87%
          
          
          87% das vulnerabilidades são resolvidas em até 30 dias
        

        
          
            
              
              Severidade
            
            65%
          
          
          65% dos relatórios são de severidade média ou alta
        

        
          
            
              
              Recompensas Pagas
            
            78%
          
          
          78% dos relatórios válidos receberam recompensas
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/hall-of-fame.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Medal, ExternalLink, Star } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"

export function HallOfFame() {
  return (
    
      
        
          
            
              
              Hall da Fama
            
            Pesquisadores de destaque
          
          
            Ver todos
            
          
        
      
      
        
          
            
            JP
          
          
            
              João Pedro Silva
              
                
                
                
              
            
            12 vulnerabilidades reportadas
          
          P1
        

        
          
            
            MS
          
          
            
              Maria Santos
              
                
                
              
            
            8 vulnerabilidades reportadas
          
          P2
        

        
          
            
            CA
          
          
            
              Carlos Almeida
              
                
                
              
            
            6 vulnerabilidades reportadas
          
          P2
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/security/report/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Shield, Send } from "lucide-react"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardFooter, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function ReportVulnerabilityPage() {
  return (
    
      
        
          
            
              
                
                  E
                
              
              Eos Solar Payments
            
          
          
            
            
          
        
      

      
        
          
            
            Reportar Vulnerabilidade
          
          
            Preencha o formulário abaixo com todos os detalhes da vulnerabilidade encontrada. Quanto mais informações
            você fornecer, mais rápido poderemos avaliar e corrigir o problema.
          
        

        
          
            
              
                Formulário de Relatório
                Forneça detalhes completos sobre a vulnerabilidade encontrada
              
              
                
                  
                    Nome Completo
                    
                  
                  
                    E-mail de Contato
                    
                  
                

                
                  
                    Severidade Estimada
                    
                  
                  
                    Escopo Afetado
                    
                  
                

                
                  Título da Vulnerabilidade
                  
                

                
                  Descrição Detalhada
                                  </div>

                <div className="space-y-2">
                  <Label htmlFor="steps">Passos para Reproduzir</Label>
                  <Textarea
                    id="steps"
                    placeholder="Descreva passo a passo como reproduzir a vulnerabilidade"
                    className="min-h-[120px]"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="poc">Prova de Conceito (PoC)</Label>
                  <Textarea
                    id="poc"
                    placeholder="Forneça código, URLs, parâmetros ou qualquer outra informação que demonstre a vulnerabilidade"
                    className="min-h-[120px]"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="attachments">Anexos (Capturas de Tela, Vídeos, etc.)</Label>
                  <Input id="attachments" type="file" multiple className="cursor-pointer" />
                  <p className="text-xs text-muted-foreground mt-1">
                    Você pode anexar múltiplos arquivos (máx. 10MB por arquivo)
                  </p>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" asChild>
                  <Link href="/dashboard/security">Cancelar</Link>
                </Button>
                <Button className="bg-emerald-600 hover:bg-emerald-700">
                  <Send className="mr-2 h-4 w-4" />
                  Enviar Relatório
                </Button>
              </CardFooter>
            </Card>
          </div>

          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Dicas para um Bom Relatório</CardTitle>
                <CardDescription>Como aumentar as chances de seu relatório ser aceito</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Seja Claro e Conciso</h3>
                  <p className="text-sm text-muted-foreground">
                    Forneça um título descritivo e uma explicação clara do problema.
                  </p>
                </div>

                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Inclua Passos Detalhados</h3>
                  <p className="text-sm text-muted-foreground">
                    Descreva exatamente como reproduzir a vulnerabilidade, passo a passo.
                  </p>
                </div>

                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Demonstre o Impacto</h3>
                  <p className="text-sm text-muted-foreground">
                    Explique claramente qual é o impacto real da vulnerabilidade e como ela poderia ser explorada.
                  </p>
                </div>

                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Forneça Evidências Visuais</h3>
                  <p className="text-sm text-muted-foreground">
                    Capturas de tela ou vídeos ajudam a equipe a entender e verificar o problema mais rapidamente.
                  </p>
                </div>

                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Sugira Mitigações</h3>
                  <p className="text-sm text-muted-foreground">
                    Se possível, sugira formas de corrigir ou mitigar a vulnerabilidade encontrada.
                  </p>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-amber-600 dark:text-amber-400 flex items-center">
                  <AlertTriangle className="h-4 w-4 mr-2" />
                  Lembrete Importante
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Ao submeter este relatório, você confirma que leu e concorda com os termos do Programa de Divulgação
                  de Vulnerabilidades da EOS Solar Payments.
                </p>
                <p className="text-sm text-muted-foreground mt-2">
                  Lembre-se de que você não deve divulgar esta vulnerabilidade publicamente ou a terceiros até que nossa
                  equipe tenha tido tempo suficiente para resolver o problema.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}

import { AlertTriangle } from "lucide-react"
[V0_FILE]typescriptreact:file="app/value-chain/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/value-chain/reports/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { AutomaticReportConfig } from "@/components/value-chain/automatic-report-config"
import { ReportTemplates } from "@/components/value-chain/report-templates"
import { ReportHistory } from "@/components/value-chain/report-history"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function ReportsPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/value-chain">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Relatórios Automáticos</h1>
          <p className="text-muted-foreground">
            Configure, agende e gerencie relatórios automáticos da cadeia de valor fotovoltaica solar
          </p>
        </div>

        <Tabs defaultValue="config" className="space-y-6">
          <TabsList className="mb-6">
            <TabsTrigger value="config">Configuração</TabsTrigger>
            <TabsTrigger value="templates">Modelos</TabsTrigger>
            <TabsTrigger value="history">Histórico</TabsTrigger>
          </TabsList>

          <TabsContent value="config">
            <AutomaticReportConfig />
          </TabsContent>

          <TabsContent value="templates">
            <ReportTemplates />
          </TabsContent>

          <TabsContent value="history">
            <ReportHistory />
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/automatic-report-config.tsx" isFixed="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar, Clock, FileText, Mail, Plus, Save, Trash2, Users } from "lucide-react"
import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"

export function AutomaticReportConfig() {
  const [selectedSections, setSelectedSections] = useState<string[]>(["overview", "stages", "risks", "suppliers"])

  const handleSectionChange = (section: string) => {
    if (selectedSections.includes(section)) {
      setSelectedSections(selectedSections.filter((s) => s !== section))
    } else {
      setSelectedSections([...selectedSections, section])
    }
  }

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Configuração de Relatório Automático</CardTitle>
              <CardDescription>Configure relatórios automáticos para distribuição periódica</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <Tabs defaultValue="general">
                <TabsList className="mb-4">
                  <TabsTrigger value="general">Geral</TabsTrigger>
                  <TabsTrigger value="content">Conteúdo</TabsTrigger>
                  <TabsTrigger value="schedule">Agendamento</TabsTrigger>
                  <TabsTrigger value="distribution">Distribuição</TabsTrigger>
                </TabsList>

                <TabsContent value="general" className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="report-name">Nome do Relatório</Label>
                    <Input id="report-name" placeholder="Ex: Análise Mensal da Cadeia de Valor Solar" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="report-description">Descrição</Label>
                    <Input
                      id="report-description"
                      placeholder="Ex: Relatório mensal com análise completa da cadeia de valor fotovoltaica"
                    />
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="report-owner">Responsável</Label>
                      <Input id="report-owner" placeholder="Ex: João Silva" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="report-department">Departamento</Label>
                      <Input id="report-department" placeholder="Ex: Operações" />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Formato do Relatório</Label>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="format-pdf" defaultChecked />
                        <Label htmlFor="format-pdf">PDF</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="format-excel" />
                        <Label htmlFor="format-excel">Excel</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="format-ppt" />
                        <Label htmlFor="format-ppt">PowerPoint</Label>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="content" className="space-y-4">
                  <div className="space-y-2">
                    <Label>Seções do Relatório</Label>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="overview"
                          checked={selectedSections.includes("overview")}
                          onCheckedChange={() => handleSectionChange("overview")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="overview"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Visão Geral da Cadeia de Valor
                          </Label>
                          <p className="text-sm text-muted-foreground">Resumo e KPIs principais da cadeia completa</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="stages"
                          checked={selectedSections.includes("stages")}
                          onCheckedChange={() => handleSectionChange("stages")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="stages"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Análise de Estágios
                          </Label>
                          <p className="text-sm text-muted-foreground">
                            Desempenho detalhado de cada estágio da cadeia
                          </p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="risks"
                          checked={selectedSections.includes("risks")}
                          onCheckedChange={() => handleSectionChange("risks")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="risks"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Avaliação de Riscos
                          </Label>
                          <p className="text-sm text-muted-foreground">Riscos identificados e planos de mitigação</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="suppliers"
                          checked={selectedSections.includes("suppliers")}
                          onCheckedChange={() => handleSectionChange("suppliers")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="suppliers"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Análise de Fornecedores
                          </Label>
                          <p className="text-sm text-muted-foreground">Desempenho e avaliação de fornecedores-chave</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="costs"
                          checked={selectedSections.includes("costs")}
                          onCheckedChange={() => handleSectionChange("costs")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="costs"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Análise de Custos
                          </Label>
                          <p className="text-sm text-muted-foreground">
                            Detalhamento de custos em cada estágio da cadeia
                          </p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="sustainability"
                          checked={selectedSections.includes("sustainability")}
                          onCheckedChange={() => handleSectionChange("sustainability")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="sustainability"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Métricas de Sustentabilidade
                          </Label>
                          <p className="text-sm text-muted-foreground">Indicadores ambientais e sociais da cadeia</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Período de Análise</Label>
                    <Select defaultValue="last-month">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o período" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="last-week">Última Semana</SelectItem>
                        <SelectItem value="last-month">Último Mês</SelectItem>
                        <SelectItem value="last-quarter">Último Trimestre</SelectItem>
                        <SelectItem value="last-year">Último Ano</SelectItem>
                        <SelectItem value="custom">Período Personalizado</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label>Comparação</Label>
                    <Select defaultValue="previous-period">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o tipo de comparação" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="previous-period">Período Anterior</SelectItem>
                        <SelectItem value="same-period-last-year">Mesmo Período do Ano Anterior</SelectItem>
                        <SelectItem value="target">Meta Definida</SelectItem>
                        <SelectItem value="industry-average">Média do Setor</SelectItem>
                        <SelectItem value="none">Sem Comparação</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label>Opções de Conteúdo</Label>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="include-executive-summary" defaultChecked />
                        <Label htmlFor="include-executive-summary">Incluir Resumo Executivo</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="include-recommendations" defaultChecked />
                        <Label htmlFor="include-recommendations">Incluir Recomendações</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="include-raw-data" />
                        <Label htmlFor="include-raw-data">Incluir Dados Brutos</Label>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="schedule" className="space-y-4">
                  <div className="space-y-2">
                    <Label>Frequência</Label>
                    <Select defaultValue="monthly">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione a frequência" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="daily">Diário</SelectItem>
                        <SelectItem value="weekly">Semanal</SelectItem>
                        <SelectItem value="monthly">Mensal</SelectItem>
                        <SelectItem value="quarterly">Trimestral</SelectItem>
                        <SelectItem value="yearly">Anual</SelectItem>
                        <SelectItem value="custom">Personalizado</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="start-date">Data de Início</Label>
                      <div className="relative">
                        <Calendar className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                        <Input id="start-date" className="pl-10" placeholder="01/05/2023" />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="time">Horário</Label>
                      <div className="relative">
                        <Clock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                        <Input id="time" className="pl-10" placeholder="08:00" />
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Dia da Semana (para relatórios semanais)</Label>
                    <Select defaultValue="monday">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o dia da semana" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="monday">Segunda-feira</SelectItem>
                        <SelectItem value="tuesday">Terça-feira</SelectItem>
                        <SelectItem value="wednesday">Quarta-feira</SelectItem>
                        <SelectItem value="thursday">Quinta-feira</SelectItem>
                        <SelectItem value="friday">Sexta-feira</SelectItem>
                        <SelectItem value="saturday">Sábado</SelectItem>
                        <SelectItem value="sunday">Domingo</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label>Dia do Mês (para relatórios mensais)</Label>
                    <Select defaultValue="1">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o dia do mês" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="1">1</SelectItem>
                        <SelectItem value="5">5</SelectItem>
                        <SelectItem value="10">10</SelectItem>
                        <SelectItem value="15">15</SelectItem>
                        <SelectItem value="20">20</SelectItem>
                        <SelectItem value="25">25</SelectItem>
                        <SelectItem value="last">Último dia</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="active-schedule">Ativar Agendamento</Label>
                      <Switch id="active-schedule" defaultChecked />
                    </div>
                    <p className="text-sm text-muted-foreground">
                      Quando ativado, o relatório será gerado automaticamente conforme a programação
                    </p>
                  </div>
                </TabsContent>

                <TabsContent value="distribution" className="space-y-4">
                  <div className="space-y-2">
                    <Label>Destinatários por Email</Label>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center gap-2">
                          <Mail className="h-4 w-4 text-muted-foreground" />
                          <span>diretor@empresa.com</span>
                        </div>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Remover</span>
                        </Button>
                      </div>
                      <div className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center gap-2">
                          <Mail className="h-4 w-4 text-muted-foreground" />
                          <span>gerente@empresa.com</span>
                        </div>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Remover</span>
                        </Button>
                      </div>
                      <div className="flex gap-2">
                        <div className="relative flex-1">
                          <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                          <Input placeholder="Adicionar email..." className="pl-10" />
                        </div>
                        <Button>
                          <Plus className="h-4 w-4 mr-2" />
                          Adicionar
                        </Button>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Grupos de Distribuição</Label>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center gap-2">
                          <Users className="h-4 w-4 text-muted-foreground" />
                          <span>Equipe de Operações</span>
                        </div>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Remover</span>
                        </Button>
                      </div>
                      <div className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center gap-2">
                          <Users className="h-4 w-4 text-muted-foreground" />
                          <span>Diretoria</span>
                        </div>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Remover</span>
                        </Button>
                      </div>
                      <Button variant="outline">
                        <Plus className="h-4 w-4 mr-2" />
                        Adicionar Grupo
                      </Button>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Opções de Distribuição</Label>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="save-to-system" defaultChecked />
                        <Label htmlFor="save-to-system">Salvar no Sistema</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="send-empty-report" />
                        <Label htmlFor="send-empty-report">Enviar mesmo se não houver dados novos</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="notify-changes" defaultChecked />
                        <Label htmlFor="notify-changes">Notificar apenas mudanças significativas</Label>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email-subject">Assunto do Email</Label>
                    <Input id="email-subject" placeholder="Ex: Relatório Mensal da Cadeia de Valor Solar - {data}" />
                    <p className="text-xs text-muted-foreground">
                      Use {"{data}"} para incluir a data do relatório automaticamente
                    </p>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email-message">Mensagem do Email</Label>
                    <Input id="email-message" placeholder="Ex: Segue o relatório mensal da cadeia de valor solar." />
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Resumo da Configuração</CardTitle>
              <CardDescription>Visão geral das configurações do relatório</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Nome</h3>
                <p className="font-medium">Análise Mensal da Cadeia de Valor Solar</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Frequência</h3>
                <p className="font-medium">Mensal (Dia 1 às 08:00)</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Seções</h3>
                <p className="font-medium">Visão Geral, Estágios, Riscos, Fornecedores</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Destinatários</h3>
                <p className="font-medium">2 emails, 2 grupos</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Formatos</h3>
                <p className="font-medium">PDF</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Status</h3>
                <div className="flex items-center gap-2">
                  <div className="w-3 h-3 rounded-full bg-emerald-500"></div>
                  <p className="font-medium">Ativo</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <div className="flex flex-col gap-2">
            <Button className="w-full">
              <Save className="h-4 w-4 mr-2" />
              Salvar Configuração
            </Button>
            <Button variant="outline" className="w-full">
              <FileText className="h-4 w-4 mr-2" />
              Gerar Relatório Agora
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/command.tsx" isMerged="true"
"use client"

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

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

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

interface CommandDialogProps extends DialogProps {}

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

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

CommandInput.displayName = CommandPrimitive.Input.displayName

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

CommandList.displayName = CommandPrimitive.List.displayName

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

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

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

CommandGroup.displayName = CommandPrimitive.Group.displayName

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

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

CommandItem.displayName = CommandPrimitive.Item.displayName

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

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

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

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

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

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

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

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

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

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

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

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

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

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

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

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

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

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

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

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

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

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

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

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

export { Label }
[V0_FILE]typescriptreact:file="app/solutions/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { SolutionCard } from "@/components/solution-card"

export default function SolutionsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Our Solutions</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Comprehensive payment solutions designed specifically for the solar industry. Build your payment
                infrastructure with our modular, open-source components.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16 md:py-24">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <SolutionCard
                title="Intelligent Routing"
                description="Optimize payment success rates with smart routing algorithms that adapt to your business needs."
                icon="git-branch-plus"
                href="/solutions/intelligent-routing"
              />
              <SolutionCard
                title="Vault"
                description="Secure storage for sensitive payment information with tokenization and encryption."
                icon="shield-check"
                href="/solutions/vault"
              />
              <SolutionCard
                title="Alternative Payment Methods"
                description="Support for diverse payment options beyond cards, including bank transfers and digital wallets."
                icon="credit-card"
                href="/solutions/alternative-payment-methods"
              />
              <SolutionCard
                title="Cost Observability"
                description="Gain visibility into payment processing costs with detailed analytics and reporting."
                icon="bar-chart-3"
                href="/solutions/cost-observability"
              />
              <SolutionCard
                title="Reconciliation"
                description="Automated matching of transactions across systems to ensure accuracy and reduce manual work."
                icon="check-circle-2"
                href="/solutions/reconciliation"
              />
              <SolutionCard
                title="Revenue Recovery"
                description="Recapture failed payments with intelligent retry strategies and customer communication."
                icon="refresh-cw"
                href="/solutions/revenue-recovery"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/50">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to get started?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how Eos Solar Payments can help optimize your payment infrastructure.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/intelligent-routing/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { RoutingStep } from "@/components/routing-step"
import { RoutingAlgorithm } from "@/components/routing-algorithm"
import { ParameterBadge } from "@/components/parameter-badge"

export default function IntelligentRoutingPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Intelligent Routing</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Optimize payment success rates with smart routing algorithms that adapt to your business needs.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">How It Works</h2>
                <p className="text-muted-foreground mb-6">
                  Our intelligent routing system analyzes multiple factors in real-time to determine the optimal payment
                  processor for each transaction, maximizing success rates and minimizing costs.
                </p>
                <div className="space-y-4">
                  <RoutingStep
                    number={1}
                    title="Transaction Analysis"
                    description="Each payment is analyzed based on card type, amount, currency, and other factors."
                  />
                  <RoutingStep
                    number={2}
                    title="Processor Selection"
                    description="Our algorithm selects the optimal processor based on historical performance data."
                  />
                  <RoutingStep
                    number={3}
                    title="Continuous Learning"
                    description="The system learns from each transaction to improve future routing decisions."
                  />
                  <RoutingStep
                    number={4}
                    title="Performance Monitoring"
                    description="Detailed analytics track success rates and costs across processors."
                  />
                </div>
              </div>
              <div className="bg-muted rounded-lg p-6">
                <RoutingAlgorithm />
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Key Parameters</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              <ParameterBadge title="Card Type" description="Routes based on card network and issuing bank" />
              <ParameterBadge
                title="Transaction Amount"
                description="Optimizes routing for different transaction sizes"
              />
              <ParameterBadge title="Geographic Location" description="Considers customer and processor locations" />
              <ParameterBadge
                title="Historical Performance"
                description="Uses past success rates to inform decisions"
              />
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to optimize your payment routing?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how intelligent routing can improve your payment success rates.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/vault/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { VaultFeatureCard } from "@/components/vault-feature-card"

export default function VaultPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Vault</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Secure storage for sensitive payment information with tokenization and encryption.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Key Features</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <VaultFeatureCard
                title="Tokenization"
                description="Replace sensitive data with non-sensitive tokens to reduce PCI scope"
                icon="key"
              />
              <VaultFeatureCard
                title="End-to-End Encryption"
                description="Protect data in transit and at rest with strong encryption"
                icon="lock"
              />
              <VaultFeatureCard
                title="Secure Storage"
                description="Store payment details in a highly secure environment"
                icon="database"
              />
              <VaultFeatureCard
                title="PCI Compliant"
                description="Designed to meet PCI DSS 4.0 requirements"
                icon="shield"
              />
              <VaultFeatureCard
                title="Easy Integration"
                description="Simple API for storing and retrieving payment information"
                icon="code"
              />
              <VaultFeatureCard
                title="Audit Logging"
                description="Comprehensive logs of all access and operations"
                icon="file-text"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">How It Works</h2>
                <p className="text-muted-foreground mb-6">
                  Our vault securely stores sensitive payment information, allowing you to process payments without
                  handling card data directly. This reduces your PCI compliance burden while maintaining a seamless
                  customer experience.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Collect Payment Information</strong>
                      <p className="text-muted-foreground mt-1">
                        Securely collect card details via our client-side libraries
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Tokenize and Store</strong>
                      <p className="text-muted-foreground mt-1">
                        Data is encrypted and stored in our secure vault, returning a token
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Use Tokens for Transactions</strong>
                      <p className="text-muted-foreground mt-1">
                        Process payments using tokens instead of actual card data
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Recurring Payments</strong>
                      <p className="text-muted-foreground mt-1">
                        Easily set up recurring payments without storing card details
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border p-6 shadow-sm">
                <div className="space-y-4">
                  <div className="rounded bg-muted p-3">
                    <p className="text-sm font-mono">POST /v1/vault/tokens</p>
                    <pre className="mt-2 text-xs text-muted-foreground overflow-x-auto">
                      {`{
  "card": {
    "number": "4242424242424242",
    "exp_month": 12,
    "exp_year": 2025,
    "cvc": "123"
  },
  "customer_id": "cust_12345"
}`}
                    </pre>
                  </div>
                  <div className="rounded bg-muted p-3">
                    <p className="text-sm font-mono">Response</p>
                    <pre className="mt-2 text-xs text-muted-foreground overflow-x-auto">
                      {`{
  "token": "tok_1J4pX2EosPayments",
  "last4": "4242",
  "exp_month": 12,
  "exp_year": 2025,
  "card_type": "visa"
}`}
                    </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to secure your payment data?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how our vault can help you securely manage payment information.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/alternative-payment-methods/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CheckoutFlow } from "@/components/checkout-flow"

export default function AlternativePaymentMethodsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Alternative Payment Methods</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Support for diverse payment options beyond cards, including bank transfers and digital wallets.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Expand Your Payment Options</h2>
                <p className="text-muted-foreground mb-6">
                  Offer your customers more ways to pay for solar installations and services. Our platform supports a
                  wide range of alternative payment methods, helping you increase conversion rates and reach more
                  customers.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Bank Transfers (ACH/SEPA)</strong>
                      <p className="text-muted-foreground mt-1">
                        Support for direct bank transfers at lower processing costs
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Digital Wallets</strong>
                      <p className="text-muted-foreground mt-1">
                        Integration with Apple Pay, Google Pay, and other popular wallets
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Buy Now, Pay Later</strong>
                      <p className="text-muted-foreground mt-1">
                        Support for installment payment options for larger purchases
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Local Payment Methods</strong>
                      <p className="text-muted-foreground mt-1">
                        Support for region-specific payment methods around the world
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border shadow-sm">
                <CheckoutFlow />
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Supported Payment Methods</h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
              {[
                { name: "Bank Transfer", icon: "landmark" },
                { name: "Apple Pay", icon: "credit-card" },
                { name: "Google Pay", icon: "credit-card" },
                { name: "PayPal", icon: "credit-card" },
                { name: "Klarna", icon: "credit-card" },
                { name: "Affirm", icon: "credit-card" },
                { name: "Venmo", icon: "credit-card" },
                { name: "Zelle", icon: "credit-card" },
                { name: "Sofort", icon: "credit-card" },
                { name: "iDEAL", icon: "credit-card" },
                { name: "Bancontact", icon: "credit-card" },
                { name: "Giropay", icon: "credit-card" },
              ].map((method, index) => (
                <div key={index} className="bg-background rounded-lg border p-4 flex flex-col items-center text-center">
                  <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      {method.icon === "landmark" ? (
                        <path d="M3 22h18M5 8v10M19 8v10M21 8H3a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h18a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2ZM9 2v4M15 2v4"></path>
                      ) : (
                        <rect width="20" height="14" x="2" y="5" rx="2"></rect>
                      )}
                    </svg>
                  </div>
                  <h3 className="font-medium">{method.name}</h3>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to expand your payment options?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how alternative payment methods can help you reach more customers.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/cost-observability/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

export default function CostObservabilityPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Cost Observability</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Gain visibility into payment processing costs with detailed analytics and reporting.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Understand Your Payment Costs</h2>
                <p className="text-muted-foreground mb-6">
                  Our cost observability solution provides complete visibility into your payment processing costs,
                  helping you identify opportunities for optimization and savings.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Detailed Cost Breakdown</strong>
                      <p className="text-muted-foreground mt-1">See exactly what you're paying for each transaction</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Cost Comparison</strong>
                      <p className="text-muted-foreground mt-1">Compare costs across different payment processors</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Trend Analysis</strong>
                      <p className="text-muted-foreground mt-1">Track cost trends over time to identify patterns</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Optimization Recommendations</strong>
                      <p className="text-muted-foreground mt-1">Get actionable insights to reduce costs</p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border shadow-sm p-6">
                <div className="space-y-6">
                  <div>
                    <h3 className="font-medium mb-3">Cost Breakdown by Processor</h3>
                    <div className="h-64 bg-muted rounded-lg flex items-center justify-center">
                      <p className="text-muted-foreground">Cost breakdown chart</p>
                    </div>
                  </div>
                  <div>
                    <h3 className="font-medium mb-3">Monthly Cost Trends</h3>
                    <div className="h-64 bg-muted rounded-lg flex items-center justify-center">
                      <p className="text-muted-foreground">Cost trends chart</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Key Features</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {[
                {
                  title: "Real-time Monitoring",
                  description: "Track costs as they occur with real-time dashboards",
                  icon: "activity",
                },
                {
                  title: "Custom Reports",
                  description: "Create and schedule custom cost reports",
                  icon: "file-text",
                },
                {
                  title: "Cost Alerts",
                  description: "Set up alerts for unusual cost patterns",
                  icon: "bell",
                },
                {
                  title: "Processor Comparison",
                  description: "Compare costs across different payment processors",
                  icon: "bar-chart-2",
                },
                {
                  title: "Export Capabilities",
                  description: "Export data for further analysis in your preferred tools",
                  icon: "download",
                },
                {
                  title: "Integration Options",
                  description: "Connect with your accounting and financial systems",
                  icon: "link",
                },
              ].map((feature, index) => (
                <div key={index} className="bg-background rounded-lg border p-6">
                  <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      {feature.icon === "activity" && <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>}
                      {feature.icon === "file-text" && (
                        <>
                          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                          <polyline points="14 2 14 8 20 8"></polyline>
                          <line x1="16" x2="8" y1="13" y2="13"></line>
                          <line x1="16" x2="8" y1="17" y2="17"></line>
                          <line x1="10" x2="8" y1="9" y2="9"></line>
                        </>
                      )}
                      {feature.icon === "bell" && (
                        <>
                          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
                          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
                        </>
                      )}
                      {feature.icon === "bar-chart-2" && (
                        <>
                          <line x1="18" x2="18" y1="20" y2="10"></line>
                          <line x1="12" x2="12" y1="20" y2="4"></line>
                          <line x1="6" x2="6" y1="20" y2="14"></line>
                        </>
                      )}
                      {feature.icon === "download" && (
                        <>
                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                          <polyline points="7 10 12 15 17 10"></polyline>
                          <line x1="12" x2="12" y1="15" y2="3"></line>
                        </>
                      )}
                      {feature.icon === "link" && (
                        <>
                          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                        </>
                      )}
                    </svg>
                  </div>
                  <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
                  <p className="text-muted-foreground">{feature.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to optimize your payment costs?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how cost observability can help you reduce payment processing expenses.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/reconciliation/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { ReconciliationFeatureCard } from "@/components/reconciliation-feature-card"

export default function ReconciliationPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Reconciliation</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Automated matching of transactions across systems to ensure accuracy and reduce manual work.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Key Features</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <ReconciliationFeatureCard
                title="Automated Matching"
                description="Automatically match transactions across payment processors, banks, and accounting systems"
                icon="check-circle"
              />
              <ReconciliationFeatureCard
                title="Exception Handling"
                description="Identify and resolve discrepancies with guided workflows"
                icon="alert-triangle"
              />
              <ReconciliationFeatureCard
                title="Multi-source Integration"
                description="Connect with payment processors, banks, and accounting systems"
                icon="link"
              />
              <ReconciliationFeatureCard
                title="Customizable Rules"
                description="Create custom matching rules for your specific business needs"
                icon="settings"
              />
              <ReconciliationFeatureCard
                title="Audit Trail"
                description="Maintain a complete record of all reconciliation activities"
                icon="file-text"
              />
              <ReconciliationFeatureCard
                title="Reporting"
                description="Generate detailed reconciliation reports for accounting and compliance"
                icon="bar-chart-2"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">How It Works</h2>
                <p className="text-muted-foreground mb-6">
                  Our reconciliation system automates the process of matching transactions across different systems,
                  reducing manual work and ensuring accuracy.
                </p>
                <ol className="space-y-4">
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      1
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Data Collection</h3>
                      <p className="text-muted-foreground mt-1">
                        Automatically collect transaction data from payment processors, banks, and accounting systems
                      </p>
                    </div>
                  </li>
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      2
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Matching Process</h3>
                      <p className="text-muted-foreground mt-1">
                        Apply matching rules to identify corresponding transactions across systems
                      </p>
                    </div>
                  </li>
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      3
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Exception Identification</h3>
                      <p className="text-muted-foreground mt-1">
                        Flag transactions that cannot be automatically matched for review
                      </p>
                    </div>
                  </li>
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      4
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Resolution</h3>
                      <p className="text-muted-foreground mt-1">
                        Resolve exceptions through guided workflows and manual matching
                      </p>
                    </div>
                  </li>
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      5
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Reporting</h3>
                      <p className="text-muted-foreground mt-1">
                        Generate reconciliation reports for accounting and compliance purposes
                      </p>
                    </div>
                  </li>
                </ol>
              </div>
              <div className="bg-background rounded-lg border shadow-sm p-6">
                <div className="space-y-6">
                  <div>
                    <h3 className="font-medium mb-3">Reconciliation Dashboard</h3>
                    <div className="h-64 bg-muted rounded-lg flex items-center justify-center">
                      <p className="text-muted-foreground">Reconciliation dashboard</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <h4 className="text-sm font-medium mb-2">Matched Transactions</h4>
                      <div className="text-3xl font-bold text-green-500">98.5%</div>
                      <p className="text-xs text-muted-foreground mt-1">+0.5% from last month</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium mb-2">Exceptions</h4>
                      <div className="text-3xl font-bold text-amber-500">1.5%</div>
                      <p className="text-xs text-muted-foreground mt-1">-0.5% from last month</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium mb-2">Processing Time</h4>
                      <div className="text-3xl font-bold">2.3h</div>
                      <p className="text-xs text-muted-foreground mt-1">-1.2h from manual process</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium mb-2">Cost Savings</h4>
                      <div className="text-3xl font-bold text-green-500">85%</div>
                      <p className="text-xs text-muted-foreground mt-1">Compared to manual reconciliation</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to automate your reconciliation process?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how our reconciliation solution can save you time and reduce errors.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/revenue-recovery/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { MetricCard } from "@/components/metric-card"

export default function RevenueRecoveryPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Revenue Recovery</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Recapture failed payments with intelligent retry strategies and customer communication.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Recover Lost Revenue</h2>
                <p className="text-muted-foreground mb-6">
                  Our revenue recovery solution helps you recapture failed payments through intelligent retry
                  strategies, reducing revenue leakage and improving customer retention.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Smart Retry Logic</strong>
                      <p className="text-muted-foreground mt-1">Optimize retry timing based on success patterns</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Automated Customer Communication</strong>
                      <p className="text-muted-foreground mt-1">
                        Notify customers of failed payments with actionable next steps
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Failure Analysis</strong>
                      <p className="text-muted-foreground mt-1">
                        Identify patterns in payment failures to address root causes
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Alternative Payment Options</strong>
                      <p className="text-muted-foreground mt-1">
                        Offer alternative payment methods when primary method fails
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="grid grid-cols-2 gap-6">
                <MetricCard title="Average Recovery Rate" value="76%" change="+12%" trend="up" />
                <MetricCard title="Revenue Recovered" value="$1.2M" change="+18%" trend="up" />
                <MetricCard title="Customer Retention" value="94%" change="+5%" trend="up" />
                <MetricCard title="Processing Cost" value="-32%" change="-8%" trend="down" />
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">How It Works</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M2 12h10M9 4v16M22 12h-3M17 8l-2 4 2 4"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Intelligent Detection</h3>
                <p className="text-muted-foreground mb-4">
                  Our system automatically detects failed payments and categorizes them by failure reason.
                </p>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Real-time monitoring
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Failure categorization
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Risk assessment
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                    <path d="m9 12 2 2 4-4"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Smart Recovery</h3>
                <p className="text-muted-foreground mb-4">
                  Our system applies optimized retry strategies based on the failure reason and historical success
                  patterns.
                </p>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Adaptive retry timing
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Multiple retry paths
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Success optimization
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M17 18a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2"></path>
                    <rect width="18" height="18" x="3" y="3" rx="2"></rect>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Customer Engagement</h3>
                <p className="text-muted-foreground mb-4">
                  We engage customers with timely, personalized communications to resolve payment issues.
                </p>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Multi-channel notifications
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Self-service recovery
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Alternative payment options
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to recover lost revenue?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how our revenue recovery solution can help you recapture failed payments.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { ComplianceBadge } from "@/components/compliance-badge"

export default function ConformitiesPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Conformities</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to security, compliance, and industry standards.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-background rounded-lg border p-8">
                <h2 className="text-2xl font-bold mb-4">Security First Approach</h2>
                <p className="text-muted-foreground mb-6">
                  At Eos Solar Payments, security is not an afterthought—it's built into everything we do. Our platform
                  is designed with security as a foundational principle, ensuring that your payment data is protected at
                  every step.
                </p>
                <ul className="space-y-3">
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>End-to-end encryption for all sensitive data</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Regular security audits and penetration testing</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Secure development practices and code reviews</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Comprehensive security monitoring and incident response</span>
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border p-8">
                <h2 className="text-2xl font-bold mb-4">Compliance Commitment</h2>
                <p className="text-muted-foreground mb-6">
                  We maintain compliance with the most stringent industry standards and regulations, ensuring that your
                  payment operations meet all necessary requirements.
                </p>
                <ul className="space-y-3">
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Regular compliance assessments and certifications</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Transparent compliance documentation and reporting</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Continuous monitoring of regulatory changes</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Dedicated compliance team and resources</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Our Certifications</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              <ComplianceBadge
                title="Vulnerability Disclosure"
                description="Transparent security reporting process"
                href="/conformities/vulnerability-disclosure"
              />
              <ComplianceBadge
                title="PCI DSS 4.0"
                description="Payment Card Industry Data Security Standard"
                href="/conformities/pci-dss"
              />
              <ComplianceBadge
                title="ISO 27001:2022"
                description="Information security management"
                href="/conformities/iso-27001"
              />
              <ComplianceBadge
                title="SOC 2 Type 2"
                description="Service Organization Control"
                href="/conformities/soc-2"
              />
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Have questions about our compliance?</h2>
              <p className="mt-4 text-muted-foreground">
                Our team is ready to help you understand our security measures and compliance certifications.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Us</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/vulnerability-disclosure/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

export default function VulnerabilityDisclosurePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Vulnerability Disclosure Program</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to security through transparency and collaboration.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container max-w-4xl">
            <div className="bg-background rounded-lg border p-8">
              <h2 className="text-2xl font-bold mb-6">Program Overview</h2>
              <p className="text-muted-foreground mb-6">
                At Eos Solar Payments, we take security seriously. Our Vulnerability Disclosure Program is designed to
                engage with security researchers and the broader community to identify and address potential security
                vulnerabilities in our systems.
              </p>
              <p className="text-muted-foreground mb-6">
                We believe in the importance of working collaboratively with the security community to ensure the safety
                and integrity of our platform. We welcome responsible disclosure of security vulnerabilities and are
                committed to addressing them promptly.
              </p>
              <div className="mt-8">
                <h3 className="text-xl font-bold mb-4">Program Scope</h3>
                <p className="text-muted-foreground mb-4">
                  The following systems and applications are in scope for our vulnerability disclosure program:
                </p>
                <ul className="list-disc pl-6 space-y-2 text-muted-foreground mb-6">
                  <li>Eos Solar Payments API (api.eossolarpayments.com)</li>
                  <li>Eos Solar Payments Dashboard (dashboard.eossolarpayments.com)</li>
                  <li>Eos Solar Payments Website (www.eossolarpayments.com)</li>
                  <li>Eos Solar Payments Mobile Applications</li>
                </ul>
                <p className="text-muted-foreground">The following are explicitly out of scope:</p>
                <ul className="list-disc pl-6 space-y-2 text-muted-foreground mb-6">
                  <li>Social engineering attacks against our employees</li>
                  <li>Denial of service attacks</li>
                  <li>Physical security attacks on our offices or data centers</li>
                  <li>Third-party services or applications not owned by Eos Solar Payments</li>
                </ul>
              </div>
              <div className="mt-8">
                <h3 className="text-xl font-bold mb-4">Reporting a Vulnerability</h3>
                <p className="text-muted-foreground mb-4">
                  If you believe you've found a security vulnerability in our systems, please submit a report through
                  our secure reporting form. Please include:
                </p>
                <ul className="list-disc pl-6 space-y-2 text-muted-foreground mb-6">
                  <li>A detailed description of the vulnerability</li>
                  <li>Steps to reproduce the issue</li>
                  <li>Any proof-of-concept code, if applicable</li>
                  <li>Impact of the vulnerability</li>
                </ul>
                <div className="mt-6">
                  <Button size="lg">Submit Vulnerability Report</Button>
                </div>
              </div>
              <div className="mt-8">
                <h3 className="text-xl font-bold mb-4">Our Commitment</h3>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Acknowledgment</strong>
                      <p className="text-muted-foreground mt-1">
                        We will acknowledge receipt of your vulnerability report within 24 hours.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Investigation</strong>
                      <p className="text-muted-foreground mt-1">
                        We will investigate all legitimate reports and work to quickly validate and reproduce the issue.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Remediation</strong>
                      <p className="text-muted-foreground mt-1">
                        We will work to address and fix validated vulnerabilities in a timely manner.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Communication</strong>
                      <p className="text-muted-foreground mt-1">
                        We will keep you informed of our progress as we address the issue.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Recognition</strong>
                      <p className="text-muted-foreground mt-1">
                        With your permission, we will publicly acknowledge your contribution to our security.
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Hall of Fame</h2>
              <p className="mt-4 text-muted-foreground">
                We would like to thank the following security researchers for their valuable contributions to our
                security.
              </p>
              <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                {[
                  { name: "Jane Smith", date: "March 2025", finding: "API Authentication Vulnerability" },
                  { name: "John Doe", date: "February 2025", finding: "Cross-Site Scripting (XSS)" },
                  { name: "Alex Johnson", date: "January 2025", finding: "Insecure Direct Object Reference" },
                ].map((researcher, index) => (
                  <div key={index} className="bg-background rounded-lg border p-4">
                    <h3 className="font-bold">{researcher.name}</h3>
                    <p className="text-sm text-muted-foreground">{researcher.date}</p>
                    <p className="mt-2 text-sm">{researcher.finding}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/pci-dss/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CertificationBadge } from "@/components/certification-badge"

export default function PciDssPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">PCI DSS 4.0 Compliance</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to maintaining the highest standards of payment card security.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container max-w-4xl">
            <div className="bg-background rounded-lg border p-8">
              <div className="flex flex-col md:flex-row gap-8 items-center mb-8">
                <div className="flex-shrink-0">
                  <CertificationBadge title="PCI DSS 4.0" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold mb-4">What is PCI DSS?</h2>
                  <p className="text-muted-foreground">
                    The Payment Card Industry Data Security Standard (PCI DSS) is a set of security standards designed
                    to ensure that all companies that accept, process, store, or transmit credit card information
                    maintain a secure environment. PCI DSS 4.0 is the latest version of this standard, with enhanced
                    requirements to address emerging threats and technologies.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Our Compliance</h3>
              <p className="text-muted-foreground mb-6">
                Eos Solar Payments has achieved PCI DSS 4.0 compliance, demonstrating our commitment to maintaining the
                highest standards of payment card security. Our compliance is validated annually through rigorous
                assessments conducted by qualified security assessors.
              </p>

              <h3 className="text-xl font-bold mb-4">Key Compliance Areas</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Network Security</h4>
                  <p className="text-sm text-muted-foreground">
                    We maintain secure network architecture with properly configured firewalls, encryption, and access
                    controls to protect cardholder data.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Data Protection</h4>
                  <p className="text-sm text-muted-foreground">
                    We implement strong encryption for stored and transmitted cardholder data, with strict data
                    retention and disposal policies.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Access Control</h4>
                  <p className="text-sm text-muted-foreground">
                    We enforce strict access control measures, including role-based access, strong authentication, and
                    regular access reviews.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Vulnerability Management</h4>
                  <p className="text-sm text-muted-foreground">
                    We conduct regular security testing, including vulnerability scans and penetration tests, to
                    identify and address potential weaknesses.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Security Monitoring</h4>
                  <p className="text-sm text-muted-foreground">
                    We maintain comprehensive logging and monitoring systems to detect and respond to security
                    incidents.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Security Policy</h4>
                  <p className="text-sm text-muted-foreground">
                    We maintain a comprehensive information security policy that is regularly reviewed and updated.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Benefits for Our Customers</h3>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Reduced Risk</strong>
                    <p className="text-muted-foreground mt-1">
                      Our PCI DSS compliance helps protect your customers' payment card data from breaches and fraud.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Simplified Compliance</strong>
                    <p className="text-muted-foreground mt-1">
                      Using our PCI-compliant services can simplify your own compliance efforts and reduce your PCI
                      scope.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Customer Trust</strong>
                    <p className="text-muted-foreground mt-1">
                      Demonstrate to your customers that you take payment security seriously by partnering with a
                      PCI-compliant provider.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Avoid Penalties</strong>
                    <p className="text-muted-foreground mt-1">
                      Help avoid potential fines and penalties associated with non-compliance and data breaches.
                    </p>
                  </div>
                </li>
              </ul>

              <div className="bg-muted/30 p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">Attestation of Compliance</h3>
                <p className="text-muted-foreground mb-4">
                  Our Attestation of Compliance (AOC) is available to customers and partners upon request. This document
                  verifies our PCI DSS 4.0 compliance status and can be used as part of your own compliance
                  documentation.
                </p>
                <Button>Request AOC Document</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Have questions about our PCI compliance?</h2>
              <p className="mt-4 text-muted-foreground">
                Our security team is ready to help you understand how our PCI DSS 4.0 compliance can benefit your
                business.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Security Team</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/iso-27001/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CertificationBadge } from "@/components/certification-badge"

export default function Iso27001Page() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">ISO 27001:2022 Certification</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to information security management excellence.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container max-w-4xl">
            <div className="bg-background rounded-lg border p-8">
              <div className="flex flex-col md:flex-row gap-8 items-center mb-8">
                <div className="flex-shrink-0">
                  <CertificationBadge title="ISO 27001:2022" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold mb-4">What is ISO 27001?</h2>
                  <p className="text-muted-foreground">
                    ISO 27001 is an internationally recognized standard for information security management systems
                    (ISMS). It provides a framework for establishing, implementing, maintaining, and continually
                    improving an information security management system within the context of the organization.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Our Certification</h3>
              <p className="text-muted-foreground mb-6">
                Eos Solar Payments has achieved ISO 27001:2022 certification, demonstrating our commitment to
                information security best practices. Our certification was awarded following a comprehensive audit by an
                accredited certification body, verifying that our information security management system meets all
                requirements of the standard.
              </p>

              <h3 className="text-xl font-bold mb-4">Key Security Controls</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Information Security Policies</h4>
                  <p className="text-sm text-muted-foreground">
                    Comprehensive policies that define our approach to information security management.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Organization of Information Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Clear roles and responsibilities for information security within our organization.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Human Resource Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Security controls for employees before, during, and after employment.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Asset Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Identification and protection of information assets throughout their lifecycle.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Access Control</h4>
                  <p className="text-sm text-muted-foreground">
                    Strict controls to ensure only authorized access to information and systems.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Cryptography</h4>
                  <p className="text-sm text-muted-foreground">
                    Proper use of encryption to protect sensitive information.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Physical and Environmental Security</h4>
                  <p className="text-sm text-muted-foreground">Protection of physical facilities and equipment.</p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Operations Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Secure operation of information processing facilities.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Communications Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Protection of information in networks and supporting facilities.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">System Acquisition and Development</h4>
                  <p className="text-sm text-muted-foreground">
                    Security requirements integrated into the development lifecycle.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Supplier Relationships</h4>
                  <p className="text-sm text-muted-foreground">
                    Security controls for third-party service providers and suppliers.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Incident Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Processes for detecting, reporting, and responding to security incidents.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Benefits for Our Customers</h3>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Enhanced Data Protection</strong>
                    <p className="text-muted-foreground mt-1">
                      Our ISO 27001 certification ensures that we have robust controls in place to protect your data.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Risk Management</strong>
                    <p className="text-muted-foreground mt-1">
                      We systematically identify and address information security risks that could affect your business.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Compliance Support</strong>
                    <p className="text-muted-foreground mt-1">
                      Our certification can help support your own compliance requirements and due diligence processes.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Continuous Improvement</strong>
                    <p className="text-muted-foreground mt-1">
                      Our ISMS is regularly reviewed and improved to address emerging threats and technologies.
                    </p>
                  </div>
                </li>
              </ul>

              <div className="bg-muted/30 p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">Certification Documentation</h3>
                <p className="text-muted-foreground mb-4">
                  Our ISO 27001:2022 certificate and Statement of Applicability (SoA) are available to customers and
                  partners upon request, subject to appropriate confidentiality agreements.
                </p>
                <Button>Request Certification Documents</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Have questions about our ISO 27001 certification?</h2>
              <p className="mt-4 text-muted-foreground">
                Our security team is ready to help you understand how our information security management system can
                benefit your business.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Security Team</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/soc-2/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CertificationBadge } from "@/components/certification-badge"

export default function Soc2Page() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">SOC 2 Type 2 Compliance</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to security, availability, and confidentiality.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container max-w-4xl">
            <div className="bg-background rounded-lg border p-8">
              <div className="flex flex-col md:flex-row gap-8 items-center mb-8">
                <div className="flex-shrink-0">
                  <CertificationBadge title="SOC 2 Type 2" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold mb-4">What is SOC 2?</h2>
                  <p className="text-muted-foreground">
                    SOC 2 (System and Organization Controls 2) is a framework developed by the American Institute of
                    Certified Public Accountants (AICPA) that defines criteria for managing customer data based on five
                    "trust service principles": security, availability, processing integrity, confidentiality, and
                    privacy.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Our Compliance</h3>
              <p className="text-muted-foreground mb-6">
                Eos Solar Payments has successfully completed a SOC 2 Type 2 audit, demonstrating our ongoing commitment
                to security, availability, and confidentiality. The Type 2 report verifies that our controls have been
                tested over a period of time (typically 6-12 months) and are operating effectively.
              </p>

              <h3 className="text-xl font-bold mb-4">Trust Service Principles</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Our systems are protected against unauthorized access, both physical and logical, through robust
                    security controls.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Availability</h4>
                  <p className="text-sm text-muted-foreground">
                    Our systems are available for operation and use as committed or agreed, with appropriate monitoring
                    and disaster recovery procedures.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Confidentiality</h4>
                  <p className="text-sm text-muted-foreground">
                    Information designated as confidential is protected as committed or agreed, with strict access
                    controls and data handling procedures.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Key Control Areas</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Organization and Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Clear organizational structure with defined roles and responsibilities for security.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Communications</h4>
                  <p className="text-sm text-muted-foreground">
                    Effective communication of system responsibilities to internal and external users.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Risk Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Processes to identify, assess, and mitigate risks to the system.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Monitoring</h4>
                  <p className="text-sm text-muted-foreground">
                    Continuous monitoring of the system to detect potential security events.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Logical and Physical Access</h4>
                  <p className="text-sm text-muted-foreground">
                    Controls to restrict logical and physical access to authorized individuals.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">System Operations</h4>
                  <p className="text-sm text-muted-foreground">
                    Procedures to manage the operation, maintenance, and changes to the system.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Change Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Processes to manage changes to system components and configurations.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Incident Response</h4>
                  <p className="text-sm text-muted-foreground">
                    Procedures to identify, respond to, mitigate, and learn from security incidents.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Benefits for Our Customers</h3>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Third-Party Validation</strong>
                    <p className="text-muted-foreground mt-1">
                      Independent verification of our security controls by qualified auditors.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Vendor Due Diligence</strong>
                    <p className="text-muted-foreground mt-1">
                      Our SOC 2 report can simplify your vendor assessment process.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Transparency</strong>
                    <p className="text-muted-foreground mt-1">
                      Detailed information about our control environment and its effectiveness.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Continuous Improvement</strong>
                    <p className="text-muted-foreground mt-1">
                      Our annual SOC 2 audits drive ongoing enhancement of our security controls.
                    </p>
                  </div>
                </li>
              </ul>

              <div className="bg-muted/30 p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">SOC 2 Report Access</h3>
                <p className="text-muted-foreground mb-4">
                  Our SOC 2 Type 2 report is available to customers and prospects under NDA. The report provides
                  detailed information about our control environment, the tests performed by the auditors, and the
                  results of those tests.
                </p>
                <Button>Request SOC 2 Report</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Have questions about our SOC 2 compliance?</h2>
              <p className="mt-4 text-muted-foreground">
                Our security team is ready to help you understand how our SOC 2 Type 2 compliance can benefit your
                business.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Security Team</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { ResourceCard } from "@/components/resource-card"

export default function ResourcesPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Resources</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Explore our resources to learn more about Eos Solar Payments and how we can help your business.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <ResourceCard
                title="Case Studies"
                description="See how other solar companies are using Eos Solar Payments to optimize their payment operations."
                icon="file-text"
                href="/resources/case-studies"
              />
              <ResourceCard
                title="Community"
                description="Join our community of developers and payment professionals to share knowledge and best practices."
                icon="users"
                href="/resources/community"
              />
              <ResourceCard
                title="Blog"
                description="Stay up-to-date with the latest news, insights, and best practices in solar payments."
                icon="newspaper"
                href="/resources/blog"
              />
              <ResourceCard
                title="Integrations"
                description="Explore our integrations with popular solar software, CRMs, and accounting systems."
                icon="puzzle"
                href="/resources/integrations"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Documentation</h2>
                <p className="text-muted-foreground mb-6">
                  Comprehensive documentation to help you get started with Eos Solar Payments and make the most of our
                  platform.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Getting Started Guides</strong>
                      <p className="text-muted-foreground mt-1">
                        Step-by-step guides to help you set up and configure Eos Solar Payments.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">API Reference</strong>
                      <p className="text-muted-foreground mt-1">
                        Detailed documentation of our API endpoints, parameters, and responses.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">SDKs and Libraries</strong>
                      <p className="text-muted-foreground mt-1">
                        Client libraries and SDKs for popular programming languages.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Tutorials</strong>
                      <p className="text-muted-foreground mt-1">
                        Detailed tutorials for common use cases and integrations.
                      </p>
                    </div>
                  </li>
                </ul>
                <div className="mt-8">
                  <Button>View Documentation</Button>
                </div>
              </div>
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Support</h2>
                <p className="text-muted-foreground mb-6">
                  We're here to help you succeed with Eos Solar Payments. Our support team is available to answer your
                  questions and help you resolve any issues.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Knowledge Base</strong>
                      <p className="text-muted-foreground mt-1">
                        Find answers to common questions and troubleshooting guides.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Community Forum</strong>
                      <p className="text-muted-foreground mt-1">
                        Connect with other users and share knowledge and best practices.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Email Support</strong>
                      <p className="text-muted-foreground mt-1">
                        Contact our support team directly for personalized assistance.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Dedicated Account Management</strong>
                      <p className="text-muted-foreground mt-1">
                        Enterprise customers receive dedicated account management and support.
                      </p>
                    </div>
                  </li>
                </ul>
                <div className="mt-8">
                  <Button>Contact Support</Button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to get started?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how Eos Solar Payments can help optimize your payment infrastructure.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/case-studies/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CaseStudyCard } from "@/components/case-study-card"

export default function CaseStudiesPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Case Studies</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                See how solar companies are using Eos Solar Payments to optimize their payment operations.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <CaseStudyCard
                title="SunPower Innovations"
                description="How SunPower Innovations reduced payment processing costs by 35% while improving success rates."
                category="Cost Optimization"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="GreenSolar Solutions"
                description="GreenSolar Solutions implemented intelligent routing to increase payment success rates by 12%."
                category="Payment Optimization"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="SolarEdge Financial"
                description="SolarEdge Financial recovered $1.2M in failed payments using our revenue recovery solution."
                category="Revenue Recovery"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="BrightPath Energy"
                description="How BrightPath Energy streamlined reconciliation and reduced manual work by 85%."
                category="Operational Efficiency"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="SunFlow Systems"
                description="SunFlow Systems implemented our vault solution to enhance security and reduce PCI scope."
                category="Security & Compliance"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="EcoSolar Finance"
                description="EcoSolar Finance expanded payment options and increased conversion rates by 18%."
                category="Alternative Payments"
                logo="/placeholder.svg?height=80&width=80"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Featured Case Study</h2>
              <p className="mt-4 text-muted-foreground">
                Learn how SolarMax Technologies transformed their payment operations with Eos Solar Payments.
              </p>
              <div className="mt-10 bg-background rounded-lg border p-8 text-left">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <div className="bg-muted rounded-lg h-48 flex items-center justify-center">
                      <p className="text-muted-foreground">Company logo</p>
                    </div>
                    <div className="mt-6 space-y-4">
                      <div>
                        <h4 className="text-sm font-medium text-muted-foreground">Industry</h4>
                        <p>Residential Solar</p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium text-muted-foreground">Company Size</h4>
                        <p>250+ employees</p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium text-muted-foreground">Location</h4>
                        <p>United States</p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium text-muted-foreground">Solutions Used</h4>
                        <ul className="list-disc list-inside">
                          <li>Intelligent Routing</li>
                          <li>Revenue Recovery</li>
                          <li>Cost Observability</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div className="md:w-2/3">
                    <h3 className="text-2xl font-bold mb-4">SolarMax Technologies: Optimizing Payment Operations</h3>
                    <div className="space-y-4">
                      <p>
                        SolarMax Technologies, a leading residential solar provider, was facing challenges with payment
                        failures, high processing costs, and limited visibility into their payment operations.
                      </p>
                      <h4 className="text-lg font-bold">Challenges</h4>
                      <ul className="list-disc list-inside space-y-2">
                        <li>12% payment failure rate impacting cash flow</li>
                        <li>High payment processing costs eating into margins</li>
                        <li>Limited visibility into payment performance</li>
                        <li>Manual reconciliation processes consuming resources</li>
                      </ul>
                      <h4 className="text-lg font-bold">Solution</h4>
                      <p>
                        SolarMax implemented Eos Solar Payments' intelligent routing, revenue recovery, and cost
                        observability solutions to address these challenges.
                      </p>
                      <h4 className="text-lg font-bold">Results</h4>
                      <ul className="list-disc list-inside space-y-2">
                        <li>Reduced payment failure rate from 12% to 3.5%</li>
                        <li>Decreased processing costs by 28%</li>
                        <li>Recovered $850,000 in previously failed payments</li>
                        <li>Reduced reconciliation time by 75%</li>
                        <li>Improved cash flow predictability</li>
                      </ul>
                    </div>
                    <div className="mt-6">
                      <Button>Read Full Case Study</Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to achieve similar results?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how Eos Solar Payments can help optimize your payment infrastructure.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/community/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

export default function CommunityPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Community</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Join our growing community of developers, payment professionals, and solar industry experts.
              </p>
              <div className="mt-10">
                <Button size="lg">Join Our Community</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M17 6.1H3M21 12.1H3M15.1 18H3"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Discussion Forum</h3>
                <p className="text-muted-foreground mb-4">
                  Connect with other users, ask questions, share knowledge, and discuss best practices for payment
                  processing in the solar industry.
                </p>
                <Button variant="outline" className="w-full">
                  Visit Forum
                </Button>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">User Groups</h3>
                <p className="text-muted-foreground mb-4">
                  Join regional and virtual user groups to network with peers, share experiences, and learn from other
                  Eos Solar Payments users.
                </p>
                <Button variant="outline" className="w-full">
                  Find User Groups
                </Button>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" x2="8" y1="13" y2="13"></line>
                    <line x1="16" x2="8" y1="17" y2="17"></line>
                    <line x1="10" x2="8" y1="9" y2="9"></line>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Documentation</h3>
                <p className="text-muted-foreground mb-4">
                  Access comprehensive documentation, including API references, tutorials, and best practices for
                  implementing Eos Solar Payments.
                </p>
                <Button variant="outline" className="w-full">
                  View Documentation
                </Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Upcoming Events</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {[
                {
                  title: "Webinar: Optimizing Payment Routing for Solar Companies",
                  date: "June 15, 2025",
                  time: "11:00 AM - 12:00 PM EDT",
                  type: "Virtual",
                },
                {
                  title: "Workshop: Implementing Revenue Recovery Strategies",
                  date: "July 8, 2025",
                  time: "1:00 PM - 3:00 PM EDT",
                  type: "Virtual",
                },
                {
                  title: "Eos Solar Payments User Conference",
                  date: "September 22-24, 2025",
                  time: "All Day",
                  type: "In-Person (San Francisco, CA)",
                },
                {
                  title: "Developer Office Hours",
                  date: "Every Thursday",
                  time: "2:00 PM - 4:00 PM EDT",
                  type: "Virtual",
                },
                {
                  title: "Regional User Group: Northeast",
                  date: "August 12, 2025",
                  time: "5:30 PM - 7:30 PM EDT",
                  type: "In-Person (Boston, MA)",
                },
                {
                  title: "Webinar: What's New in Eos Solar Payments",
                  date: "July 22, 2025",
                  time: "1:00 PM - 2:00 PM EDT",
                  type: "Virtual",
                },
              ].map((event, index) => (
                <div key={index} className="bg-background rounded-lg border p-6">
                  <div className="flex justify-between items-start mb-4">
                    <h3 className="text-lg font-bold">{event.title}</h3>
                    <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">{event.type}</span>
                  </div>
                  <div className="space-y-2 mb-4">
                    <div className="flex items-center text-sm">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2 text-muted-foreground"
                      >
                        <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
                        <line x1="16" x2="16" y1="2" y2="6"></line>
                        <line x1="8" x2="8" y1="2" y2="6"></line>
                        <line x1="3" x2="21" y1="10" y2="10"></line>
                      </svg>
                      <span>{event.date}</span>
                    </div>
                    <div className="flex items-center text-sm">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2 text-muted-foreground"
                      >
                        <circle cx="12" cy="12" r="10"></circle>
                        <polyline points="12 6 12 12 16 14"></polyline>
                      </svg>
                      <span>{event.time}</span>
                    </div>
                  </div>
                  <Button variant="outline" size="sm" className="w-full">
                    Register
                  </Button>
                </div>
              ))}
            </div>
            <div className="mt-8 text-center">
              <Button>View All Events</Button>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Community Resources</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-background rounded-lg border p-6">
                <h3 className="text-xl font-bold mb-4">Open Source Projects</h3>
                <p className="text-muted-foreground mb-6">
                  Explore and contribute to our open source projects, including client libraries, integrations, and
                  tools.
                </p>
                <ul className="space-y-4 mb-6">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Eos Solar Payments Node.js SDK</strong>
                      <p className="text-muted-foreground mt-1">
                        Official Node.js client library for the Eos Solar Payments API.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Eos Solar Payments Python SDK</strong>
                      <p className="text-muted-foreground mt-1">
                        Official Python client library for the Eos Solar Payments API.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Eos Solar Payments React Components</strong>
                      <p className="text-muted-foreground mt-1">
                        React components for integrating Eos Solar Payments into your web applications.
                      </p>
                    </div>
                  </li>
                </ul>
                <Button variant="outline" className="w-full">
                  View GitHub Repository
                </Button>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <h3 className="text-xl font-bold mb-4">Community Contributions</h3>
                <p className="text-muted-foreground mb-6">
                  Explore integrations, tools, and resources created by the Eos Solar Payments community.
                </p>
                <ul className="space-y-4 mb-6">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                        <path d="m9 12 2 2 4-4"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Salesforce Integration</strong>
                      <p className="text-muted-foreground mt-1">Community-built integration for Salesforce CRM.</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                        <path d="m9 12 2 2 4-4"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">QuickBooks Connector</strong>
                      <p className="text-muted-foreground mt-1">
                        Tool for syncing Eos Solar Payments data with QuickBooks.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                        <path d="m9 12 2 2 4-4"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Payment Analytics Dashboard</strong>
                      <p className="text-muted-foreground mt-1">Custom dashboard for visualizing payment data.</p>
                    </div>
                  </li>
                </ul>
                <Button variant="outline" className="w-full">
                  Explore Community Contributions
                </Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Join Our Community Today</h2>
              <p className="mt-4 text-muted-foreground">
                Connect with other Eos Solar Payments users, share knowledge, and stay up-to-date with the latest
                developments.
              </p>
              <div className="mt-8">
                <Button size="lg">Join Our Community</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/blog/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

export default function BlogPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Blog</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Stay up-to-date with the latest news, insights, and best practices in solar payments.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="md:col-span-2 space-y-12">
                {[
                  {
                    title: "The Future of Payments in the Solar Industry",
                    excerpt:
                      "Explore the emerging trends and technologies that are shaping the future of payments in the solar industry.",
                    date: "May 15, 2025",
                    author: "Sarah Johnson",
                    category: "Industry Trends",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                  {
                    title: "Optimizing Payment Routing for Higher Success Rates",
                    excerpt:
                      "Learn how intelligent payment routing can help solar companies increase payment success rates and reduce processing costs.",
                    date: "May 8, 2025",
                    author: "Michael Chen",
                    category: "Best Practices",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                  {
                    title: "Implementing Effective Revenue Recovery Strategies",
                    excerpt:
                      "Discover proven strategies for recovering failed payments and reducing revenue leakage in your solar business.",
                    date: "April 29, 2025",
                    author: "David Rodriguez",
                    category: "Revenue Recovery",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                  {
                    title: "The Impact of PCI DSS 4.0 on Solar Payment Processing",
                    excerpt:
                      "Understand the implications of PCI DSS 4.0 for solar companies and how to ensure compliance.",
                    date: "April 22, 2025",
                    author: "Jennifer Lee",
                    category: "Compliance",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                  {
                    title: "Streamlining Payment Reconciliation for Solar Companies",
                    excerpt:
                      "Learn how automated reconciliation can save time, reduce errors, and improve financial accuracy for solar businesses.",
                    date: "April 15, 2025",
                    author: "Robert Williams",
                    category: "Operational Efficiency",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                ].map((post, index) => (
                  <div key={index} className="flex flex-col md:flex-row gap-6">
                    <div className="md:w-1/3">
                      <img src={post.image || "/placeholder.svg"} alt={post.title} className="rounded-lg" />
                    </div>
                    <div className="md:w-2/3">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
                          {post.category}
                        </span>
                        <span className="text-xs text-muted-foreground">{post.date}</span>
                      </div>
                      <h2 className="text-2xl font-bold mb-2">{post.title}</h2>
                      <p className="text-muted-foreground mb-4">{post.excerpt}</p>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div className="h-8 w-8 rounded-full bg-muted mr-2"></div>
                          <span className="text-sm">{post.author}</span>
                        </div>
                        <Button variant="outline" size="sm">
                          Read More
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
                <div className="flex justify-center">
                  <Button>Load More Articles</Button>
                </div>
              </div>
              <div className="space-y-8">
                <div className="bg-background rounded-lg border p-6">
                  <h3 className="text-lg font-bold mb-4">Categories</h3>
                  <ul className="space-y-2">
                    {[
                      "Industry Trends",
                      "Best Practices",
                      "Revenue Recovery",
                      "Compliance",
                      "Operational Efficiency",
                      "Security",
                      "Case Studies",
                      "Product Updates",
                    ].map((category, index) => (
                      <li key={index}>
                        <a href="#" className="text-muted-foreground hover:text-foreground">
                          {category}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="bg-background rounded-lg border p-6">
                  <h3 className="text-lg font-bold mb-4">Popular Posts</h3>
                  <ul className="space-y-4">
                    {[
                      {
                        title: "5 Ways to Reduce Payment Processing Costs",
                        date: "April 10, 2025",
                      },
                      {
                        title: "Understanding Payment Failure Reasons in Solar Financing",
                        date: "March 28, 2025",
                      },
                      {
                        title: "The Role of AI in Payment Optimization",
                        date: "March 15, 2025",
                      },
                      {
                        title: "Implementing a Successful Revenue Recovery Program",
                        date: "February 22, 2025",
                      },
                    ].map((post, index) => (
                      <li key={index}>
                        <a href="#" className="hover:text-primary">
                          <h4 className="font-medium">{post.title}</h4>
                          <p className="text-xs text-muted-foreground">{post.date}</p>
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="bg-background rounded-lg border p-6">
                  <h3 className="text-lg font-bold mb-4">Subscribe to Our Newsletter</h3>
                  <p className="text-muted-foreground mb-4">
                    Stay up-to-date with the latest news, insights, and best practices in solar payments.
                  </p>
                  <div className="space-y-4">
                    <div>
                      <input
                        type="email"
                        placeholder="Enter your email"
                        className="w-full px-3 py-2 border rounded-md"
                      />
                    </div>
                    <Button className="w-full">Subscribe</Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/integrations/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { IntegrationOption } from "@/components/integration-option"

export default function IntegrationsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Integrations</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Connect Eos Solar Payments with your favorite tools and platforms to streamline your payment operations.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">CRM & Customer Management</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <IntegrationOption
                title="Salesforce"
                description="Sync payment data with Salesforce CRM for a complete view of your customers."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="HubSpot"
                description="Connect payment information with HubSpot for streamlined customer management."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Zoho CRM"
                description="Integrate payment data with Zoho CRM for enhanced customer insights."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Microsoft Dynamics"
                description="Sync payment information with Microsoft Dynamics for comprehensive customer management."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="SugarCRM"
                description="Connect payment data with SugarCRM for improved customer relationships."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Pipedrive"
                description="Integrate payment information with Pipedrive for streamlined sales processes."
                logo="/placeholder.svg?height=60&width=60"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Accounting & Finance</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <IntegrationOption
                title="QuickBooks"
                description="Sync payment data with QuickBooks for streamlined accounting and financial reporting."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Xero"
                description="Connect payment information with Xero for comprehensive financial management."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Sage"
                description="Integrate payment data with Sage for enhanced financial visibility."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="NetSuite"
                description="Sync payment information with NetSuite for end-to-end financial management."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="FreshBooks"
                description="Connect payment data with FreshBooks for simplified accounting and invoicing."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Wave"
                description="Integrate payment information with Wave for streamlined financial operations."
                logo="/placeholder.svg?height=60&width=60"
              />
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Solar Industry Software</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <IntegrationOption
                title="Aurora Solar"
                description="Connect payment data with Aurora Solar for integrated solar design and sales."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Energy Toolbase"
                description="Integrate payment information with Energy Toolbase for comprehensive project modeling."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="SolarNexus"
                description="Sync payment data with SolarNexus for streamlined solar business operations."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Solargraf"
                description="Connect payment information with Solargraf for enhanced solar proposal generation."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="PVComplete"
                description="Integrate payment data with PVComplete for comprehensive solar design and engineering."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="SolarSuccess"
                description="Sync payment information with SolarSuccess for streamlined solar business management."
                logo="/placeholder.svg?height=60&width=60"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Analytics & Reporting</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <IntegrationOption
                title="Tableau"
                description="Connect payment data with Tableau for powerful visual analytics and reporting."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Power BI"
                description="Integrate payment information with Power BI for comprehensive business intelligence."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Looker"
                description="Sync payment data with Looker for advanced analytics and reporting."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Domo"
                description="Connect payment information with Domo for real-time business insights."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Google Data Studio"
                description="Integrate payment data with Google Data Studio for customizable reporting."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Sisense"
                description="Sync payment information with Sisense for advanced data analytics."
                logo="/placeholder.svg?height=60&width=60"
              />
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl">
              <h2 className="text-3xl font-bold tracking-tight text-center mb-6">Custom Integrations</h2>
              <p className="text-center text-muted-foreground mb-8">
                Need to connect Eos Solar Payments with a system not listed here? Our flexible API and developer tools
                make it easy to build custom integrations.
              </p>
              <div className="bg-background rounded-lg border p-8">
                <h3 className="text-xl font-bold mb-4">Integration Options</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <div>
                    <h4 className="font-bold mb-2">API Integration</h4>
                    <p className="text-sm text-muted-foreground">
                      Use our comprehensive REST API to build custom integrations with any system or platform.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">Webhook Integration</h4>
                    <p className="text-sm text-muted-foreground">
                      Set up webhooks to receive real-time notifications of payment events in your systems.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">SDK Integration</h4>
                    <p className="text-sm text-muted-foreground">
                      Use our SDKs for popular programming languages to simplify integration development.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">Custom Development</h4>
                    <p className="text-sm text-muted-foreground">
                      Work with our professional services team to build custom integrations for your specific needs.
                    </p>
                  </div>
                </div>
                <div className="flex justify-center">
                  <Button>Contact Integration Team</Button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to integrate?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn more about our integration options and how we can help you connect Eos Solar
                Payments with your existing systems.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Integration Team</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
"use client"

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

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

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

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

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

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

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

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

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

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

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

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

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

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ className, ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleContent ref={ref} className={className} {...props} />
))
CollapsibleContent.displayName = "CollapsibleContent"

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

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

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

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

const NavigationMenuItem = NavigationMenuPrimitive.Item

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

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

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

const NavigationMenuLink = NavigationMenuPrimitive.Link

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

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

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/resource-card.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { FileText, Users, Newspaper, Puzzle } from "lucide-react"

interface ResourceCardProps {
  title: string
  description: string
  icon: string
  href: string
  className?: string
}

export function ResourceCard({ title, description, icon, href, className }: ResourceCardProps) {
  // Map de string para componentes de ícone
  const getIcon = () => {
    switch (icon) {
      case "file-text":
        return <FileText className="h-5 w-5 text-accent-foreground" />
      case "users":
        return <Users className="h-5 w-5 text-accent-foreground" />
      case "newspaper":
        return <Newspaper className="h-5 w-5 text-accent-foreground" />
      case "puzzle":
        return <Puzzle className="h-5 w-5 text-accent-foreground" />
      default:
        return <FileText className="h-5 w-5 text-accent-foreground" />
    }
  }

  return (
    <Link href={href} className="block">
      <Card
        className={cn(
          "h-full transition-all duration-200 card-hover",
          "border-border/50 bg-background/50 backdrop-blur-sm",
          "hover:shadow-md dark:hover:shadow-primary/5",
          className,
        )}
      >
        <CardHeader>
          <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-md bg-accent dark:bg-accent/50">
            {getIcon()}
          </div>
          <CardTitle className="text-xl">{title}</CardTitle>
          <CardDescription className="text-muted-foreground">{description}</CardDescription>
        </CardHeader>
        <CardContent></CardContent>
        <CardFooter>
          <div className="flex items-center text-sm text-primary">
            Explore <ArrowRight className="ml-1 h-4 w-4" />
          </div>
        </CardFooter>
      </Card>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/solution-card.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { GitBranchPlus, ShieldCheck, CreditCard, BarChart3, CheckCircle2, RefreshCw } from "lucide-react"

interface SolutionCardProps {
  title: string
  description: string
  icon: string
  href: string
  className?: string
}

export function SolutionCard({ title, description, icon, href, className }: SolutionCardProps) {
  // Map de string para componentes de ícone
  const getIcon = () => {
    switch (icon) {
      case "git-branch-plus":
        return <GitBranchPlus className="h-5 w-5 text-primary" />
      case "shield-check":
        return <ShieldCheck className="h-5 w-5 text-primary" />
      case "credit-card":
        return <CreditCard className="h-5 w-5 text-primary" />
      case "bar-chart-3":
        return <BarChart3 className="h-5 w-5 text-primary" />
      case "check-circle-2":
        return <CheckCircle2 className="h-5 w-5 text-primary" />
      case "refresh-cw":
        return <RefreshCw className="h-5 w-5 text-primary" />
      default:
        return <GitBranchPlus className="h-5 w-5 text-primary" />
    }
  }

  return (
    <Link href={href} className="block">
      <Card
        className={cn(
          "h-full transition-all duration-200 card-hover",
          "border-border/50 bg-background/50 backdrop-blur-sm",
          "hover:shadow-md dark:hover:shadow-primary/5",
          className,
        )}
      >
        <CardHeader>
          <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 dark:bg-primary/20">
            {getIcon()}
          </div>
          <CardTitle className="text-xl">{title}</CardTitle>
          <CardDescription className="text-muted-foreground">{description}</CardDescription>
        </CardHeader>
        <CardContent></CardContent>
        <CardFooter>
          <div className="flex items-center text-sm text-primary">
            Learn more <ArrowRight className="ml-1 h-4 w-4" />
          </div>
        </CardFooter>
      </Card>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/compliance-badge.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Shield } from "lucide-react"
import { cn } from "@/lib/utils"

interface ComplianceBadgeProps {
  title: string
  href: string
  className?: string
}

export function ComplianceBadge({ title, href, className }: ComplianceBadgeProps) {
  return (
    <Link href={href}>
      <Badge
        variant="outline"
        className={cn(
          "flex items-center gap-1 px-3 py-1 text-xs transition-all",
          "border-border/50 bg-background/50 backdrop-blur-sm",
          "hover:bg-accent/50 hover:text-accent-foreground",
          "dark:hover:bg-accent/30",
          className,
        )}
      >
        <Shield className="h-3 w-3" />
        {title}
      </Badge>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isEdit="true" isMerged="true"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ModeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/supplier-analysis.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

// Dados de exemplo para fornecedores
const supplierData = [
  {
    id: 1,
    name: "SolarTech Industries",
    category: "Painéis Solares",
    reliability: 92,
    costIndex: 85,
    sustainability: 88,
    riskScore: "Baixo",
    location: "Brasil",
  },
  {
    id: 2,
    name: "PowerInverter Co.",
    category: "Inversores",
    reliability: 95,
    costIndex: 78,
    sustainability: 82,
    riskScore: "Baixo",
    location: "Alemanha",
  },
  {
    id: 3,
    name: "MountingSystems Ltd.",
    category: "Estruturas de Montagem",
    reliability: 88,
    costIndex: 92,
    sustainability: 75,
    riskScore: "Médio",
    location: "China",
  },
  {
    id: 4,
    name: "CableWorks Inc.",
    category: "Cabeamento",
    reliability: 90,
    costIndex: 95,
    sustainability: 70,
    riskScore: "Baixo",
    location: "EUA",
  },
  {
    id: 5,
    name: "BatteryStorage Systems",
    category: "Baterias",
    reliability: 87,
    costIndex: 75,
    sustainability: 80,
    riskScore: "Médio",
    location: "Coreia do Sul",
  },
]

// Dados para o gráfico de desempenho de fornecedores
const supplierPerformanceData = supplierData.map((supplier) => ({
  name: supplier.name,
  reliability: supplier.reliability,
  costEfficiency: supplier.costIndex,
  sustainability: supplier.sustainability,
}))

// Componente para análise de fornecedores
export function SupplierAnalysis() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Análise de Fornecedores</CardTitle>
          <CardDescription>
            Avaliação de desempenho e risco dos principais fornecedores na cadeia de valor fotovoltaica
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-6">
            <h3 className="text-lg font-medium mb-2">Desempenho de Fornecedores</h3>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={supplierPerformanceData} margin={{ top: 20, right: 30, left: 20, bottom: 70 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" angle={-45} textAnchor="end" height={70} />
                  <YAxis domain={[0, 100]} />
                  <Tooltip />
                  <Bar dataKey="reliability" name="Confiabilidade" fill="#4f46e5" />
                  <Bar dataKey="costEfficiency" name="Eficiência de Custo" fill="#10b981" />
                  <Bar dataKey="sustainability" name="Sustentabilidade" fill="#f59e0b" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

          <div>
            <h3 className="text-lg font-medium mb-2">Lista de Fornecedores</h3>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Fornecedor</TableHead>
                    <TableHead>Categoria</TableHead>
                    <TableHead>Localização</TableHead>
                    <TableHead>Risco</TableHead>
                    <TableHead>Confiabilidade</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {supplierData.map((supplier) => (
                    <TableRow key={supplier.id}>
                      <TableCell className="font-medium">{supplier.name}</TableCell>
                      <TableCell>{supplier.category}</TableCell>
                      <TableCell>{supplier.location}</TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            supplier.riskScore === "Baixo"
                              ? "success"
                              : supplier.riskScore === "Médio"
                                ? "warning"
                                : "destructive"
                          }
                        >
                          {supplier.riskScore}
                        </Badge>
                      </TableCell>
                      <TableCell>{supplier.reliability}%</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/cost-breakdown.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Dados de exemplo para o breakdown de custos
const costBreakdownData = [
  { name: "Painéis Solares", value: 45, color: "#4f46e5" },
  { name: "Inversores", value: 20, color: "#10b981" },
  { name: "Estruturas de Montagem", value: 15, color: "#f59e0b" },
  { name: "Instalação", value: 10, color: "#ef4444" },
  { name: "Outros Componentes", value: 10, color: "#8b5cf6" },
]

// Dados de exemplo para custos por estágio da cadeia de valor
const valueChainCostData = [
  { stage: "Extração de Matéria-Prima", percentage: 12, cost: "R$ 0,15/W" },
  { stage: "Fabricação de Células", percentage: 25, cost: "R$ 0,32/W" },
  { stage: "Montagem de Módulos", percentage: 18, cost: "R$ 0,23/W" },
  { stage: "Transporte e Logística", percentage: 8, cost: "R$ 0,10/W" },
  { stage: "Distribuição", percentage: 7, cost: "R$ 0,09/W" },
  { stage: "Instalação", percentage: 22, cost: "R$ 0,28/W" },
  { stage: "Operação e Manutenção", percentage: 8, cost: "R$ 0,10/W" },
]

// Dados de tendências de custo ao longo do tempo
const costTrendData = [
  { year: 2018, cost: 2.8 },
  { year: 2019, cost: 2.5 },
  { year: 2020, cost: 2.2 },
  { year: 2021, cost: 1.9 },
  { year: 2022, cost: 1.7 },
  { year: 2023, cost: 1.55 },
  { year: 2024, cost: 1.45 },
]

// Componente para análise de breakdown de custos
export function CostBreakdown() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Análise de Custos</CardTitle>
          <CardDescription>Breakdown detalhado dos custos ao longo da cadeia de valor fotovoltaica</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="components">
            <TabsList className="mb-4">
              <TabsTrigger value="components">Componentes</TabsTrigger>
              <TabsTrigger value="valuechain">Cadeia de Valor</TabsTrigger>
              <TabsTrigger value="trends">Tendências</TabsTrigger>
            </TabsList>

            <TabsContent value="components">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={costBreakdownData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      >
                        {costBreakdownData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip formatter={(value) => `${value}%`} />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                </div>

                <div>
                  <h3 className="text-lg font-medium mb-2">Detalhamento de Custos por Componente</h3>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Componente</TableHead>
                          <TableHead>Percentual</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {costBreakdownData.map((item, index) => (
                          <TableRow key={index}>
                            <TableCell className="font-medium">{item.name}</TableCell>
                            <TableCell>{item.value}%</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="valuechain">
              <div>
                <h3 className="text-lg font-medium mb-2">Custos por Estágio da Cadeia de Valor</h3>
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Estágio</TableHead>
                        <TableHead>Percentual</TableHead>
                        <TableHead>Custo Unitário</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {valueChainCostData.map((item, index) => (
                        <TableRow key={index}>
                          <TableCell className="font-medium">{item.stage}</TableCell>
                          <TableCell>{item.percentage}%</TableCell>
                          <TableCell>{item.cost}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="trends">
              <div>
                <h3 className="text-lg font-medium mb-2">Tendência de Custos (R$/W)</h3>
                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={costBreakdownData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      >
                        {costBreakdownData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip formatter={(value) => `${value}%`} />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4">
                  <p className="text-sm text-muted-foreground">
                    Os custos de sistemas fotovoltaicos têm diminuído consistentemente nos últimos anos, com uma redução
                    média de 10% ao ano. Esta tendência é impulsionada por avanços tecnológicos, economias de escala e
                    melhorias na cadeia de suprimentos.
                  </p>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/sustainability-metrics.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Cell,
  LineChart,
  Line,
} from "recharts"

// Dados de exemplo para métricas de sustentabilidade
const carbonFootprintData = [
  { stage: "Extração de Matéria-Prima", value: 38, unit: "gCO2eq/kWh" },
  { stage: "Fabricação", value: 25, unit: "gCO2eq/kWh" },
  { stage: "Transporte", value: 8, unit: "gCO2eq/kWh" },
  { stage: "Instalação", value: 5, unit: "gCO2eq/kWh" },
  { stage: "Operação", value: 2, unit: "gCO2eq/kWh" },
  { stage: "Fim de Vida", value: 7, unit: "gCO2eq/kWh" },
]

// Dados de exemplo para uso de recursos
const resourceUseData = [
  { resource: "Água", value: 65, benchmark: 80, unit: "L/MWh" },
  { resource: "Alumínio", value: 78, benchmark: 85, unit: "kg/MW" },
  { resource: "Silício", value: 82, benchmark: 80, unit: "kg/MW" },
  { resource: "Vidro", value: 45, benchmark: 60, unit: "kg/MW" },
  { resource: "Cobre", value: 55, benchmark: 70, unit: "kg/MW" },
  { resource: "Plásticos", value: 40, benchmark: 50, unit: "kg/MW" },
]

// Dados de exemplo para reciclabilidade
const recyclabilityData = [
  { component: "Estrutura de Alumínio", percentage: 95 },
  { component: "Vidro", percentage: 90 },
  { component: "Células de Silício", percentage: 70 },
  { component: "Componentes Eletrônicos", percentage: 60 },
  { component: "Plásticos", percentage: 40 },
  { component: "Materiais Compostos", percentage: 25 },
]

// Dados de exemplo para tendências de sustentabilidade
const sustainabilityTrendData = [
  { year: 2018, carbonIntensity: 85, waterUse: 90, recycledContent: 40 },
  { year: 2019, carbonIntensity: 80, waterUse: 85, recycledContent: 45 },
  { year: 2020, carbonIntensity: 75, waterUse: 80, recycledContent: 50 },
  { year: 2021, carbonIntensity: 70, waterUse: 75, recycledContent: 55 },
  { year: 2022, carbonIntensity: 65, waterUse: 70, recycledContent: 60 },
  { year: 2023, carbonIntensity: 60, waterUse: 65, recycledContent: 65 },
  { year: 2024, carbonIntensity: 55, waterUse: 60, recycledContent: 70 },
]

// Componente para métricas de sustentabilidade
export function SustainabilityMetrics() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Métricas de Sustentabilidade</CardTitle>
          <CardDescription>
            Análise de impacto ambiental e social ao longo da cadeia de valor fotovoltaica
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="carbon">
            <TabsList className="mb-4">
              <TabsTrigger value="carbon">Pegada de Carbono</TabsTrigger>
              <TabsTrigger value="resources">Uso de Recursos</TabsTrigger>
              <TabsTrigger value="recyclability">Reciclabilidade</TabsTrigger>
              <TabsTrigger value="trends">Tendências</TabsTrigger>
            </TabsList>

            <TabsContent value="carbon">
              <div>
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-medium">Pegada de Carbono por Estágio</h3>
                  <Badge variant="outline" className="ml-2">
                    Total: 85 gCO2eq/kWh
                  </Badge>
                </div>

                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={carbonFootprintData} margin={{ top: 20, right: 30, left: 20, bottom: 70 }}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="stage" angle={-45} textAnchor="end" height={70} />
                      <YAxis />
                      <Tooltip formatter={(value) => [`${value} gCO2eq/kWh`, "Pegada de Carbono"]} />
                      <Bar dataKey="value" fill="#10b981">
                        {carbonFootprintData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={index % 2 === 0 ? "#10b981" : "#059669"} />
                        ))}
                      </Bar>
                    </BarChart>
                  </ResponsiveContainer>
                </div>

                <div className="mt-4">
                  <p className="text-sm text-muted-foreground">
                    A pegada de carbono total de 85 gCO2eq/kWh é significativamente menor que fontes convencionais de
                    energia (carvão: ~1000 gCO2eq/kWh, gás natural: ~450 gCO2eq/kWh). A maior parte das emissões ocorre
                    nas fases iniciais da cadeia de valor.
                  </p>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="resources">
              <div>
                <h3 className="text-lg font-medium mb-4">Uso de Recursos vs. Benchmark do Setor</h3>

                <div className="space-y-6">
                  {resourceUseData.map((item, index) => (
                    <div key={index}>
                      <div className="flex items-center justify-between mb-1">
                        <span className="text-sm font-medium">{item.resource}</span>
                        <span className="text-sm text-muted-foreground">
                          {item.value}% do benchmark ({item.unit})
                        </span>
                      </div>
                      <div className="flex items-center space-x-4">
                        <div className="w-full">
                          <Progress value={item.value} className="h-2" />
                        </div>
                        <div className="w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center">
                          <div
                            className="w-2 h-2 rounded-full"
                            style={{ backgroundColor: item.value < item.benchmark ? "#10b981" : "#ef4444" }}
                          />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-6">
                  <p className="text-sm text-muted-foreground">
                    Nosso uso de recursos está abaixo do benchmark do setor em todas as categorias principais,
                    refletindo nosso compromisso com a eficiência de recursos e processos de fabricação otimizados.
                  </p>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="recyclability">
              <div>
                <h3 className="text-lg font-medium mb-4">Reciclabilidade por Componente</h3>

                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={recyclabilityData}
                      margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
                      layout="vertical"
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis type="number" domain={[0, 100]} />
                      <YAxis dataKey="component" type="category" width={150} />
                      <Tooltip formatter={(value) => [`${value}%`, "Reciclabilidade"]} />
                      <Bar dataKey="percentage" fill="#8b5cf6">
                        {recyclabilityData.map((entry, index) => (
                          <Cell
                            key={`cell-${index}`}
                            fill={entry.percentage >= 80 ? "#10b981" : entry.percentage >= 50 ? "#f59e0b" : "#ef4444"}
                          />
                        ))}
                      </Bar>
                    </BarChart>
                  </ResponsiveContainer>
                </div>

                <div className="mt-4">
                  <p className="text-sm text-muted-foreground">
                    A reciclabilidade média dos componentes é de 63%. Estamos trabalhando em iniciativas para melhorar a
                    reciclabilidade dos plásticos e materiais compostos, que atualmente representam nossos maiores
                    desafios de fim de vida.
                  </p>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="trends">
              <div>
                <h3 className="text-lg font-medium mb-4">Tendências de Sustentabilidade (2018-2024)</h3>

                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={sustainabilityTrendData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="year" />
                      <YAxis domain={[0, 100]} />
                      <Tooltip />
                      <Line
                        type="monotone"
                        dataKey="carbonIntensity"
                        name="Intensidade de Carbono"
                        stroke="#ef4444"
                        strokeWidth={2}
                      />
                      <Line type="monotone" dataKey="waterUse" name="Uso de Água" stroke="#3b82f6" strokeWidth={2} />
                      <Line
                        type="monotone"
                        dataKey="recycledContent"
                        name="Conteúdo Reciclado"
                        stroke="#10b981"
                        strokeWidth={2}
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </div>

                <div className="mt-4">
                  <p className="text-sm text-muted-foreground">
                    Temos observado melhorias consistentes em todos os indicadores-chave de sustentabilidade desde 2018.
                    A intensidade de carbono e o uso de água diminuíram em aproximadamente 35%, enquanto o conteúdo
                    reciclado em nossos produtos aumentou em 75%.
                  </p>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/report-templates.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { FileText, BarChart2, PieChart, TrendingUp, Download, Copy, Eye } from "lucide-react"

// Tipos para os templates de relatório
interface ReportTemplate {
  id: string
  name: string
  description: string
  type: "dashboard" | "detailed" | "summary" | "custom"
  format: "pdf" | "excel" | "html" | "json"
  sections: string[]
  lastUpdated: string
  popularity: number
}

// Dados de exemplo para templates de relatório
const reportTemplatesData: ReportTemplate[] = [
  {
    id: "template-001",
    name: "Visão Geral da Cadeia de Valor",
    description: "Relatório completo com análise de todos os estágios da cadeia de valor fotovoltaica",
    type: "dashboard",
    format: "pdf",
    sections: ["Visão Geral", "Análise de Fornecedores", "Custos", "Riscos", "Sustentabilidade"],
    lastUpdated: "2024-04-15",
    popularity: 85,
  },
  {
    id: "template-002",
    name: "Análise Detalhada de Fornecedores",
    description: "Relatório detalhado sobre desempenho, riscos e custos de fornecedores",
    type: "detailed",
    format: "excel",
    sections: [
      "Perfil de Fornecedores",
      "Métricas de Desempenho",
      "Análise de Riscos",
      "Comparativo de Custos",
      "Recomendações",
    ],
    lastUpdated: "2024-04-10",
    popularity: 72,
  },
  {
    id: "template-003",
    name: "Resumo Executivo Mensal",
    description: "Resumo de alto nível para executivos com principais KPIs e insights",
    type: "summary",
    format: "pdf",
    sections: ["Resumo Executivo", "KPIs Principais", "Tendências", "Riscos Críticos", "Próximos Passos"],
    lastUpdated: "2024-04-18",
    popularity: 95,
  },
  {
    id: "template-004",
    name: "Análise de Custos e Eficiência",
    description: "Relatório focado em custos, margens e oportunidades de otimização",
    type: "detailed",
    format: "excel",
    sections: ["Breakdown de Custos", "Análise de Margens", "Benchmarks", "Oportunidades de Otimização", "Projeções"],
    lastUpdated: "2024-04-05",
    popularity: 68,
  },
  {
    id: "template-005",
    name: "Relatório de Sustentabilidade",
    description: "Análise de métricas ambientais, sociais e de governança na cadeia de valor",
    type: "custom",
    format: "html",
    sections: ["Pegada de Carbono", "Uso de Recursos", "Conformidade", "Metas ESG", "Iniciativas"],
    lastUpdated: "2024-04-12",
    popularity: 76,
  },
  {
    id: "template-006",
    name: "Análise de Riscos da Cadeia de Suprimentos",
    description: "Identificação e avaliação de riscos em toda a cadeia de suprimentos",
    type: "detailed",
    format: "pdf",
    sections: ["Mapa de Riscos", "Avaliação de Impacto", "Planos de Mitigação", "Monitoramento", "Contingências"],
    lastUpdated: "2024-04-08",
    popularity: 82,
  },
]

// Componente para templates de relatório
export function ReportTemplates() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Templates de Relatório</CardTitle>
          <CardDescription>Modelos pré-configurados para geração de relatórios da cadeia de valor</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Nome do Template</TableHead>
                  <TableHead>Tipo</TableHead>
                  <TableHead>Formato</TableHead>
                  <TableHead>Atualizado</TableHead>
                  <TableHead>Popularidade</TableHead>
                  <TableHead className="text-right">Ações</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {reportTemplatesData.map((template) => (
                  <TableRow key={template.id}>
                    <TableCell>
                      <div className="flex items-center">
                        {template.type === "dashboard" ? (
                          <BarChart2 className="h-4 w-4 mr-2 text-blue-500" />
                        ) : template.type === "detailed" ? (
                          <FileText className="h-4 w-4 mr-2 text-purple-500" />
                        ) : template.type === "summary" ? (
                          <PieChart className="h-4 w-4 mr-2 text-green-500" />
                        ) : (
                          <TrendingUp className="h-4 w-4 mr-2 text-amber-500" />
                        )}
                        <div>
                          <div className="font-medium">{template.name}</div>
                          <div className="text-xs text-muted-foreground">{template.description}</div>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant="outline"
                        className={
                          template.type === "dashboard"
                            ? "bg-blue-50 text-blue-700 dark:bg-blue-900 dark:text-blue-200"
                            : template.type === "detailed"
                              ? "bg-purple-50 text-purple-700 dark:bg-purple-900 dark:text-purple-200"
                              : template.type === "summary"
                                ? "bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-200"
                                : "bg-amber-50 text-amber-700 dark:bg-amber-900 dark:text-amber-200"
                        }
                      >
                        {template.type === "dashboard"
                          ? "Dashboard"
                          : template.type === "detailed"
                            ? "Detalhado"
                            : template.type === "summary"
                              ? "Resumo"
                              : "Personalizado"}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{template.format.toUpperCase()}</Badge>
                    </TableCell>
                    <TableCell>{new Date(template.lastUpdated).toLocaleDateString("pt-BR")}</TableCell>
                    <TableCell>
                      <div className="flex items-center">
                        <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mr-2">
                          <div
                            className="bg-blue-600 h-2.5 rounded-full dark:bg-blue-500"
                            style={{ width: `${template.popularity}%` }}
                          ></div>
                        </div>
                        <span className="text-xs">{template.popularity}%</span>
                      </div>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button variant="ghost" size="icon" title="Visualizar">
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" title="Duplicar">
                          <Copy className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" title="Baixar">
                          <Download className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Criar Novo Template</Button>
          <Button variant="outline">Importar Template</Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/report-history.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Download, Eye, RotateCcw, Share2, FileText, BarChart2, PieChart } from "lucide-react"

// Tipos para o histórico de relatórios
interface ReportHistoryItem {
  id: string
  name: string
  template: string
  templateType: "dashboard" | "detailed" | "summary" | "custom"
  format: "pdf" | "excel" | "html" | "json"
  generatedAt: string
  generatedBy: string
  size: string
  status: "completed" | "failed" | "processing"
}

// Dados de exemplo para histórico de relatórios
const reportHistoryData: ReportHistoryItem[] = [
  {
    id: "report-001",
    name: "Análise Mensal da Cadeia de Valor - Abril 2024",
    template: "Visão Geral da Cadeia de Valor",
    templateType: "dashboard",
    format: "pdf",
    generatedAt: "2024-04-20T14:30:00",
    generatedBy: "Sistema (Agendado)",
    size: "4.2 MB",
    status: "completed",
  },
  {
    id: "report-002",
    name: "Relatório de Fornecedores Q1 2024",
    template: "Análise Detalhada de Fornecedores",
    templateType: "detailed",
    format: "excel",
    generatedAt: "2024-04-15T09:45:00",
    generatedBy: "Maria Silva",
    size: "8.7 MB",
    status: "completed",
  },
  {
    id: "report-003",
    name: "Resumo Executivo - Semana 16",
    template: "Resumo Executivo Mensal",
    templateType: "summary",
    format: "pdf",
    generatedAt: "2024-04-19T17:20:00",
    generatedBy: "João Oliveira",
    size: "1.5 MB",
    status: "completed",
  },
  {
    id: "report-004",
    name: "Análise de Custos - Março 2024",
    template: "Análise de Custos e Eficiência",
    templateType: "detailed",
    format: "excel",
    generatedAt: "2024-04-10T11:15:00",
    generatedBy: "Sistema (Agendado)",
    size: "6.3 MB",
    status: "completed",
  },
  {
    id: "report-005",
    name: "Relatório de Sustentabilidade Q1 2024",
    template: "Relatório de Sustentabilidade",
    templateType: "custom",
    format: "html",
    generatedAt: "2024-04-18T10:30:00",
    generatedBy: "Ana Souza",
    size: "3.8 MB",
    status: "processing",
  },
  {
    id: "report-006",
    name: "Análise de Riscos - Abril 2024",
    template: "Análise de Riscos da Cadeia de Suprimentos",
    templateType: "detailed",
    format: "pdf",
    generatedAt: "2024-04-17T16:45:00",
    generatedBy: "Carlos Mendes",
    size: "5.1 MB",
    status: "failed",
  },
  {
    id: "report-007",
    name: "Dashboard Semanal - Semana 15",
    template: "Visão Geral da Cadeia de Valor",
    templateType: "dashboard",
    format: "pdf",
    generatedAt: "2024-04-12T09:00:00",
    generatedBy: "Sistema (Agendado)",
    size: "3.9 MB",
    status: "completed",
  },
]

// Componente para histórico de relatórios
export function ReportHistory() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Histórico de Relatórios</CardTitle>
        <CardDescription>Relatórios gerados recentemente e seu status</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Relatório</TableHead>
                <TableHead>Gerado em</TableHead>
                <TableHead>Gerado por</TableHead>
                <TableHead>Formato</TableHead>
                <TableHead>Tamanho</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {reportHistoryData.map((report) => (
                <TableRow key={report.id}>
                  <TableCell>
                    <div className="flex items-center">
                      {report.templateType === "dashboard" ? (
                        <BarChart2 className="h-4 w-4 mr-2 text-blue-500" />
                      ) : report.templateType === "detailed" ? (
                        <FileText className="h-4 w-4 mr-2 text-purple-500" />
                      ) : report.templateType === "summary" ? (
                        <PieChart className="h-4 w-4 mr-2 text-green-500" />
                      ) : (
                        <FileText className="h-4 w-4 mr-2 text-amber-500" />
                      )}
                      <div>
                        <div className="font-medium">{report.name}</div>
                        <div className="text-xs text-muted-foreground">Template: {report.template}</div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>{new Date(report.generatedAt).toLocaleString("pt-BR")}</TableCell>
                  <TableCell>{report.generatedBy}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{report.format.toUpperCase()}</Badge>
                  </TableCell>
                  <TableCell>{report.size}</TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        report.status === "completed"
                          ? "success"
                          : report.status === "processing"
                            ? "warning"
                            : "destructive"
                      }
                    >
                      {report.status === "completed"
                        ? "Concluído"
                        : report.status === "processing"
                          ? "Processando"
                          : "Falhou"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end space-x-2">
                      {report.status === "completed" ? (
                        <>
                          <Button variant="ghost" size="icon" title="Visualizar">
                            <Eye className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" title="Baixar">
                            <Download className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" title="Compartilhar">
                            <Share2 className="h-4 w-4" />
                          </Button>
                        </>
                      ) : report.status === "failed" ? (
                        <Button variant="ghost" size="icon" title="Tentar novamente">
                          <RotateCcw className="h-4 w-4" />
                        </Button>
                      ) : null}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>

        <div className="mt-4 text-sm text-muted-foreground">
          <p>
            Mostrando os últimos 7 relatórios gerados. Para ver o histórico completo, acesse a página de arquivos de
            relatórios.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescriptreact:file="components/agent-card.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Brain, MessageSquare, Code, Lock, Activity, Zap } from "lucide-react"

interface AgentCardProps {
  name: string
  description: string
  type: "llm" | "vision" | "voice" | "multimodal"
  status: "active" | "inactive" | "training"
  capabilities: string[]
  complianceLevel: "lgpd" | "gdpr" | "both" | "none"
  onDeploy: () => void
  onConfigure: () => void
}

export function AgentCard({
  name,
  description,
  type,
  status,
  capabilities,
  complianceLevel,
  onDeploy,
  onConfigure,
}: AgentCardProps) {
  return (
    <Card className="overflow-hidden">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl">{name}</CardTitle>
          <Badge
            variant={status === "active" ? "success" : status === "training" ? "warning" : "secondary"}
            className="capitalize"
          >
            {status}
          </Badge>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center mb-4">
          {type === "llm" && <Brain className="h-8 w-8 text-blue-500 mr-2" />}
          {type === "vision" && <Activity className="h-8 w-8 text-purple-500 mr-2" />}
          {type === "voice" && <MessageSquare className="h-8 w-8 text-green-500 mr-2" />}
          {type === "multimodal" && <Zap className="h-8 w-8 text-amber-500 mr-2" />}
          <div>
            <p className="font-medium capitalize">{type} Agent</p>
            <p className="text-sm text-muted-foreground">
              {type === "llm" && "Natural language processing"}
              {type === "vision" && "Computer vision capabilities"}
              {type === "voice" && "Speech recognition and synthesis"}
              {type === "multimodal" && "Multiple input/output modalities"}
            </p>
          </div>
        </div>

        <div className="space-y-2">
          <div className="flex items-start gap-2">
            <Code className="h-4 w-4 mt-0.5 text-muted-foreground" />
            <div>
              <p className="text-sm font-medium">Capabilities</p>
              <div className="flex flex-wrap gap-1 mt-1">
                {capabilities.map((capability, index) => (
                  <Badge key={index} variant="outline" className="text-xs">
                    {capability}
                  </Badge>
                ))}
              </div>
            </div>
          </div>

          <div className="flex items-start gap-2">
            <Lock className="h-4 w-4 mt-0.5 text-muted-foreground" />
            <div>
              <p className="text-sm font-medium">Compliance</p>
              <p className="text-xs text-muted-foreground">
                {complianceLevel === "lgpd" && "LGPD Compliant"}
                {complianceLevel === "gdpr" && "GDPR Compliant"}
                {complianceLevel === "both" && "LGPD & GDPR Compliant"}
                {complianceLevel === "none" && "No compliance certifications"}
              </p>
            </div>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={onConfigure}>
          Configure
        </Button>
        <Button onClick={onDeploy}>Deploy Agent</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/mcp-server-list.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Server, Activity, Clock, RefreshCw } from "lucide-react"

interface MCPServer {
  id: string
  name: string
  status: "online" | "offline" | "degraded"
  type: "llm" | "vision" | "voice" | "orchestration"
  location: "cloud" | "on-premise"
  lastPing: string
  load: number
}

interface MCPServerListProps {
  servers: MCPServer[]
  onRefresh: () => void
  onServerClick: (serverId: string) => void
}

export function MCPServerList({ servers, onRefresh, onServerClick }: MCPServerListProps) {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-xl">MCP Servers</CardTitle>
            <CardDescription>Most Critical Path servers for model communication</CardDescription>
          </div>
          <Button variant="outline" size="sm" onClick={onRefresh}>
            <RefreshCw className="h-4 w-4 mr-2" />
            Refresh
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {servers.map((server) => (
            <div
              key={server.id}
              className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent/50 cursor-pointer transition-colors"
              onClick={() => onServerClick(server.id)}
            >
              <div className="flex items-center gap-3">
                <div
                  className={`p-2 rounded-md ${
                    server.type === "llm"
                      ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"
                      : server.type === "vision"
                        ? "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300"
                        : server.type === "voice"
                          ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
                          : "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300"
                  }`}
                >
                  <Server className="h-5 w-5" />
                </div>
                <div>
                  <p className="font-medium">{server.name}</p>
                  <div className="flex items-center text-xs text-muted-foreground">
                    <Badge variant="outline" className="mr-2 capitalize">
                      {server.type}
                    </Badge>
                    <span className="capitalize">{server.location}</span>
                  </div>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <div className="flex flex-col items-end">
                  <div className="flex items-center">
                    <Clock className="h-3 w-3 mr-1 text-muted-foreground" />
                    <span className="text-xs text-muted-foreground">{server.lastPing}</span>
                  </div>
                  <div className="flex items-center mt-1">
                    <Activity className="h-3 w-3 mr-1 text-muted-foreground" />
                    <span className="text-xs text-muted-foreground">Load: {server.load}%</span>
                  </div>
                </div>
                <Badge
                  variant={
                    server.status === "online" ? "success" : server.status === "degraded" ? "warning" : "destructive"
                  }
                  className="capitalize"
                >
                  {server.status}
                </Badge>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/compliance-dashboard.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Shield, AlertTriangle, CheckCircle, XCircle, Info } from "lucide-react"
import { Progress } from "@/components/ui/progress"

interface ComplianceItem {
  id: string
  name: string
  category: "data-privacy" | "security" | "governance" | "documentation"
  status: "compliant" | "non-compliant" | "partial" | "not-applicable"
  regulation: "lgpd" | "gdpr" | "both"
  lastChecked: string
  description: string
}

interface ComplianceDashboardProps {
  items: ComplianceItem[]
  lgpdScore: number
  gdprScore: number
  onRefreshCompliance: () => void
  onItemClick: (itemId: string) => void
}

export function ComplianceDashboard({
  items,
  lgpdScore,
  gdprScore,
  onRefreshCompliance,
  onItemClick,
}: ComplianceDashboardProps) {
  const categoryIcons = {
    "data-privacy": <Shield className="h-5 w-5 text-blue-500" />,
    security: <Shield className="h-5 w-5 text-green-500" />,
    governance: <Shield className="h-5 w-5 text-purple-500" />,
    documentation: <Shield className="h-5 w-5 text-amber-500" />,
  }

  const statusIcons = {
    compliant: <CheckCircle className="h-4 w-4 text-green-500" />,
    "non-compliant": <XCircle className="h-4 w-4 text-red-500" />,
    partial: <AlertTriangle className="h-4 w-4 text-yellow-500" />,
    "not-applicable": <Info className="h-4 w-4 text-gray-500" />,
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Compliance Dashboard</CardTitle>
              <CardDescription>LGPD and GDPR compliance status</CardDescription>
            </div>
            <Button variant="outline" size="sm" onClick={onRefreshCompliance}>
              Refresh Status
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium">LGPD Compliance</h3>
                <span className="text-sm font-medium">{lgpdScore}%</span>
              </div>
              <Progress value={lgpdScore} className="h-2" />
              <p className="text-xs text-muted-foreground">
                {lgpdScore >= 90
                  ? "Excellent compliance level"
                  : lgpdScore >= 70
                    ? "Good compliance level, some improvements needed"
                    : "Significant compliance gaps need to be addressed"}
              </p>
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium">GDPR Compliance</h3>
                <span className="text-sm font-medium">{gdprScore}%</span>
              </div>
              <Progress value={gdprScore} className="h-2" />
              <p className="text-xs text-muted-foreground">
                {gdprScore >= 90
                  ? "Excellent compliance level"
                  : gdprScore >= 70
                    ? "Good compliance level, some improvements needed"
                    : "Significant compliance gaps need to be addressed"}
              </p>
            </div>
          </div>

          <div className="space-y-4">
            <h3 className="text-sm font-medium">Compliance Items</h3>
            {items.map((item) => (
              <div
                key={item.id}
                className="flex items-start justify-between p-3 border rounded-lg hover:bg-accent/50 cursor-pointer transition-colors"
                onClick={() => onItemClick(item.id)}
              >
                <div className="flex items-start gap-3">
                  <div className="mt-0.5">{categoryIcons[item.category]}</div>
                  <div>
                    <p className="font-medium">{item.name}</p>
                    <p className="text-xs text-muted-foreground mt-1">{item.description}</p>
                    <div className="flex items-center mt-2">
                      <Badge
                        variant={
                          item.regulation === "lgpd" ? "default" : item.regulation === "gdpr" ? "secondary" : "outline"
                        }
                        className="mr-2 text-xs"
                      >
                        {item.regulation === "lgpd" ? "LGPD" : item.regulation === "gdpr" ? "GDPR" : "LGPD & GDPR"}
                      </Badge>
                      <span className="text-xs text-muted-foreground">Last checked: {item.lastChecked}</span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center">
                  {statusIcons[item.status]}
                  <span className="ml-1 text-xs capitalize">{item.status.replace("-", " ")}</span>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isEdit="true" isMerged="true"
import * as React from "react"

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

const Progress = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    value?: number
    max?: number
  }
>(({ className, value, max = 100, ...props }, ref) => (
  <div ref={ref} className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...props}>
    <div
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </div>
))
Progress.displayName = "Progress"

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

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

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

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

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

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

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

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

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

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

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

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

export { Alert, AlertTitle, AlertDescription, alertVariants }
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
    --success: 142.1 76.2% 36.3%;
    --success-foreground: 355.7 100% 97.3%;
    --warning: 38 92% 50%;
    --warning-foreground: 48 96% 89%;
    --info: 221.2 83.2% 53.3%;
    --info-foreground: 210 40% 98%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --success: 142.1 70.6% 45.3%;
    --success-foreground: 144.9 80.4% 10%;
    --warning: 48 96% 89%;
    --warning-foreground: 38 92% 50%;
    --info: 217.2 91.2% 59.8%;
    --info-foreground: 222.2 47.4% 11.2%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        success: {
          DEFAULT: "hsl(var(--success))",
          foreground: "hsl(var(--success-foreground))",
        },
        warning: {
          DEFAULT: "hsl(var(--warning))",
          foreground: "hsl(var(--warning-foreground))",
        },
        info: {
          DEFAULT: "hsl(var(--info))",
          foreground: "hsl(var(--info-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isEdit="true" isMerged="true"
"use client"

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

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

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

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

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

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

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

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

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

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

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/notifications/notification-center.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Bell, BellOff, Check, Filter, Settings, Trash2, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { ScrollArea } from "@/components/ui/scroll-area"
import { NotificationItem } from "@/components/notifications/notification-item"
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import type { Notification } from "@/types/notifications"

// Mock data for notifications
const mockNotifications: Notification[] = [
  {
    id: "notif-001",
    title: "Agent Offline",
    message: "Credit Analysis Agent has been offline for more than 5 minutes",
    timestamp: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
    type: "error",
    source: "agent",
    sourceId: "agent-001",
    read: false,
    actionUrl: "/agents/agent-001",
    category: "availability",
  },
  {
    id: "notif-002",
    title: "High Latency Detected",
    message: "Customer Support Agent is experiencing response times above threshold (3.5s)",
    timestamp: new Date(Date.now() - 15 * 60 * 1000).toISOString(),
    type: "warning",
    source: "agent",
    sourceId: "agent-002",
    read: false,
    actionUrl: "/agents/agent-002",
    category: "performance",
  },
  {
    id: "notif-003",
    title: "Compliance Check Failed",
    message: "LGPD compliance check failed for Document Processing Agent",
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
    type: "error",
    source: "agent",
    sourceId: "agent-003",
    read: false,
    actionUrl: "/agents/agent-003/compliance",
    category: "compliance",
  },
  {
    id: "notif-004",
    title: "Resource Usage Alert",
    message: "Voice Recognition Agent is using 95% of allocated memory",
    timestamp: new Date(Date.now() - 45 * 60 * 1000).toISOString(),
    type: "warning",
    source: "agent",
    sourceId: "agent-004",
    read: true,
    actionUrl: "/agents/agent-004",
    category: "resources",
  },
  {
    id: "notif-005",
    title: "New Agent Version Available",
    message: "A new version of the LLaMA model is available for your agents",
    timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
    type: "info",
    source: "system",
    sourceId: "model-llama",
    read: true,
    actionUrl: "/models",
    category: "updates",
  },
  {
    id: "notif-006",
    title: "Agent Created Successfully",
    message: "New ESG Analysis Agent has been created and is ready to use",
    timestamp: new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString(),
    type: "success",
    source: "agent",
    sourceId: "agent-005",
    read: true,
    actionUrl: "/agents/agent-005",
    category: "lifecycle",
  },
  {
    id: "notif-007",
    title: "MCP Server Connection Issue",
    message: "Primary MCP server is experiencing connectivity issues",
    timestamp: new Date(Date.now() - 10 * 60 * 1000).toISOString(),
    type: "error",
    source: "system",
    sourceId: "mcp-001",
    read: false,
    actionUrl: "/mcp/servers",
    category: "infrastructure",
  },
  {
    id: "notif-008",
    title: "High Error Rate",
    message: "Government Programs Agent has a 15% error rate in the last hour",
    timestamp: new Date(Date.now() - 55 * 60 * 1000).toISOString(),
    type: "warning",
    source: "agent",
    sourceId: "agent-006",
    read: false,
    actionUrl: "/agents/agent-006",
    category: "performance",
  },
  {
    id: "notif-009",
    title: "Scheduled Maintenance",
    message: "System maintenance scheduled for tomorrow at 02:00 AM",
    timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(),
    type: "info",
    source: "system",
    sourceId: "system",
    read: true,
    actionUrl: "/system/maintenance",
    category: "maintenance",
  },
  {
    id: "notif-010",
    title: "Agent Training Complete",
    message: "Custom model training for Financial Advisor Agent completed successfully",
    timestamp: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
    type: "success",
    source: "agent",
    sourceId: "agent-007",
    read: false,
    actionUrl: "/agents/agent-007",
    category: "training",
  },
]

export function NotificationCenter() {
  const [notifications, setNotifications] = useState<Notification[]>(mockNotifications)
  const [activeFilters, setActiveFilters] = useState<string[]>([])

  const unreadCount = notifications.filter((notif) => !notif.read).length

  const errorCount = notifications.filter((notif) => notif.type === "error" && !notif.read).length
  const warningCount = notifications.filter((notif) => notif.type === "warning" && !notif.read).length
  const infoCount = notifications.filter(
    (notif) => (notif.type === "info" || notif.type === "success") && !notif.read,
  ).length

  const markAsRead = (id: string) => {
    setNotifications(notifications.map((notif) => (notif.id === id ? { ...notif, read: true } : notif)))
  }

  const markAllAsRead = () => {
    setNotifications(notifications.map((notif) => ({ ...notif, read: true })))
  }

  const clearAllNotifications = () => {
    setNotifications([])
  }

  const removeNotification = (id: string) => {
    setNotifications(notifications.filter((notif) => notif.id !== id))
  }

  const toggleFilter = (filter: string) => {
    if (activeFilters.includes(filter)) {
      setActiveFilters(activeFilters.filter((f) => f !== filter))
    } else {
      setActiveFilters([...activeFilters, filter])
    }
  }

  const filteredNotifications = notifications.filter((notif) => {
    if (activeFilters.length === 0) return true
    return activeFilters.includes(notif.type) || activeFilters.includes(notif.category)
  })

  // Group notifications by date
  const today = new Date().toDateString()
  const yesterday = new Date(Date.now() - 86400000).toDateString()

  const groupedNotifications = {
    today: filteredNotifications.filter((notif) => new Date(notif.timestamp).toDateString() === today),
    yesterday: filteredNotifications.filter((notif) => new Date(notif.timestamp).toDateString() === yesterday),
    older: filteredNotifications.filter(
      (notif) =>
        new Date(notif.timestamp).toDateString() !== today && new Date(notif.timestamp).toDateString() !== yesterday,
    ),
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="icon" className="relative">
          {unreadCount > 0 ? (
            <>
              <Bell className="h-5 w-5" />
              <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-xs text-destructive-foreground">
                {unreadCount}
              </span>
            </>
          ) : (
            <Bell className="h-5 w-5" />
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[380px] p-0" align="end">
        <div className="flex items-center justify-between p-4 border-b">
          <h3 className="font-semibold">Notifications</h3>
          <div className="flex items-center gap-2">
            {unreadCount > 0 && (
              <Button variant="ghost" size="sm" onClick={markAllAsRead}>
                <Check className="h-4 w-4 mr-1" />
                Mark all read
              </Button>
            )}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <div className="p-2">
                  <div className="font-medium text-sm mb-2">Filter by Type</div>
                  <div className="flex flex-wrap gap-1 mb-3">
                    <Badge
                      variant={activeFilters.includes("error") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("error")}
                    >
                      Errors
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("warning") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("warning")}
                    >
                      Warnings
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("info") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("info")}
                    >
                      Info
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("success") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("success")}
                    >
                      Success
                    </Badge>
                  </div>

                  <div className="font-medium text-sm mb-2">Filter by Category</div>
                  <div className="flex flex-wrap gap-1">
                    <Badge
                      variant={activeFilters.includes("performance") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("performance")}
                    >
                      Performance
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("availability") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("availability")}
                    >
                      Availability
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("compliance") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("compliance")}
                    >
                      Compliance
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("resources") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("resources")}
                    >
                      Resources
                    </Badge>
                  </div>
                </div>
                {activeFilters.length > 0 && (
                  <div className="border-t px-2 py-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="w-full justify-start text-xs"
                      onClick={() => setActiveFilters([])}
                    >
                      <X className="h-3 w-3 mr-1" />
                      Clear filters
                    </Button>
                  </div>
                )}
              </DropdownMenuContent>
            </DropdownMenu>
            <Button variant="ghost" size="icon" onClick={clearAllNotifications}>
              <Trash2 className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="/settings/notifications">
                <Settings className="h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>

        <Tabs defaultValue="all">
          <TabsList className="grid grid-cols-4 w-full rounded-none border-b">
            <TabsTrigger value="all" className="text-xs">
              All
              {unreadCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {unreadCount}
                </Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="errors" className="text-xs">
              Errors
              {errorCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {errorCount}
                </Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="warnings" className="text-xs">
              Warnings
              {warningCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {warningCount}
                </Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="info" className="text-xs">
              Info
              {infoCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {infoCount}
                </Badge>
              )}
            </TabsTrigger>
          </TabsList>

          <ScrollArea className="h-[400px]">
            <TabsContent value="all" className="m-0">
              {filteredNotifications.length > 0 ? (
                <div>
                  {groupedNotifications.today.length > 0 && (
                    <div>
                      <div className="px-4 py-2 text-xs font-medium text-muted-foreground bg-muted/50">Today</div>
                      {groupedNotifications.today.map((notification) => (
                        <NotificationItem
                          key={notification.id}
                          notification={notification}
                          onMarkAsRead={markAsRead}
                          onRemove={removeNotification}
                        />
                      ))}
                    </div>
                  )}

                  {groupedNotifications.yesterday.length > 0 && (
                    <div>
                      <div className="px-4 py-2 text-xs font-medium text-muted-foreground bg-muted/50">Yesterday</div>
                      {groupedNotifications.yesterday.map((notification) => (
                        <NotificationItem
                          key={notification.id}
                          notification={notification}
                          onMarkAsRead={markAsRead}
                          onRemove={removeNotification}
                        />
                      ))}
                    </div>
                  )}

                  {groupedNotifications.older.length > 0 && (
                    <div>
                      <div className="px-4 py-2 text-xs font-medium text-muted-foreground bg-muted/50">Older</div>
                      {groupedNotifications.older.map((notification) => (
                        <NotificationItem
                          key={notification.id}
                          notification={notification}
                          onMarkAsRead={markAsRead}
                          onRemove={removeNotification}
                        />
                      ))}
                    </div>
                  )}
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center h-[300px] text-center p-4">
                  <BellOff className="h-8 w-8 text-muted-foreground mb-2" />
                  <h4 className="font-medium">No notifications</h4>
                  <p className="text-sm text-muted-foreground mt-1">
                    {activeFilters.length > 0 ? "No notifications match your current filters" : "You're all caught up!"}
                  </p>
                </div>
              )}
            </TabsContent>

            <TabsContent value="errors" className="m-0">
              {filteredNotifications.filter((n) => n.type === "error").length > 0 ? (
                filteredNotifications
                  .filter((n) => n.type === "error")
                  .map((notification) => (
                    <NotificationItem
                      key={notification.id}
                      notification={notification}
                      onMarkAsRead={markAsRead}
                      onRemove={removeNotification}
                    />
                  ))
              ) : (
                <div className="flex flex-col items-center justify-center h-[300px] text-center p-4">
                  <BellOff className="h-8 w-8 text-muted-foreground mb-2" />
                  <h4 className="font-medium">No error notifications</h4>
                  <p className="text-sm text-muted-foreground mt-1">Everything seems to be working correctly</p>
                </div>
              )}
            </TabsContent>

            <TabsContent value="warnings" className="m-0">
              {filteredNotifications.filter((n) => n.type === "warning").length > 0 ? (
                filteredNotifications
                  .filter((n) => n.type === "warning")
                  .map((notification) => (
                    <NotificationItem
                      key={notification.id}
                      notification={notification}
                      onMarkAsRead={markAsRead}
                      onRemove={removeNotification}
                    />
                  ))
              ) : (
                <div className="flex flex-col items-center justify-center h-[300px] text-center p-4">
                  <BellOff className="h-8 w-8 text-muted-foreground mb-2" />
                  <h4 className="font-medium">No warning notifications</h4>
                  <p className="text-sm text-muted-foreground mt-1">No warnings have been detected</p>
                </div>
              )}
            </TabsContent>

            <TabsContent value="info" className="m-0">
              {filteredNotifications.filter((n) => n.type === "info" || n.type === "success").length > 0 ? (
                filteredNotifications
                  .filter((n) => n.type === "info" || n.type === "success")
                  .map((notification) => (
                    <NotificationItem
                      key={notification.id}
                      notification={notification}
                      onMarkAsRead={markAsRead}
                      onRemove={removeNotification}
                    />
                  ))
              ) : (
                <div className="flex flex-col items-center justify-center h-[300px] text-center p-4">
                  <BellOff className="h-8 w-8 text-muted-foreground mb-2" />
                  <h4 className="font-medium">No info notifications</h4>
                  <p className="text-sm text-muted-foreground mt-1">You have no informational notifications</p>
                </div>
              )}
            </TabsContent>
          </ScrollArea>
        </Tabs>

        <div className="p-2 border-t">
          <Button variant="outline" size="sm" className="w-full" asChild>
            <a href="/notifications">View all notifications</a>
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="components/notifications/notification-item.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { AlertCircle, AlertTriangle, Check, CheckCircle, ChevronDown, ChevronUp, Info, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { cn } from "@/lib/utils"
import type { Notification } from "@/types/notifications"

interface NotificationItemProps {
  notification: Notification
  onMarkAsRead: (id: string) => void
  onRemove: (id: string) => void
}

export function NotificationItem({ notification, onMarkAsRead, onRemove }: NotificationItemProps) {
  const [isOpen, setIsOpen] = useState(false)

  const getIcon = () => {
    switch (notification.type) {
      case "error":
        return <AlertCircle className="h-5 w-5 text-destructive" />
      case "warning":
        return <AlertTriangle className="h-5 w-5 text-warning" />
      case "success":
        return <CheckCircle className="h-5 w-5 text-success" />
      case "info":
      default:
        return <Info className="h-5 w-5 text-primary" />
    }
  }

  const getTimeAgo = (timestamp: string) => {
    const now = new Date()
    const notifTime = new Date(timestamp)
    const diffMs = now.getTime() - notifTime.getTime()
    const diffSecs = Math.floor(diffMs / 1000)
    const diffMins = Math.floor(diffSecs / 60)
    const diffHours = Math.floor(diffMins / 60)
    const diffDays = Math.floor(diffHours / 24)

    if (diffSecs < 60) return `${diffSecs}s ago`
    if (diffMins < 60) return `${diffMins}m ago`
    if (diffHours < 24) return `${diffHours}h ago`
    if (diffDays === 1) return `Yesterday`
    return `${diffDays}d ago`
  }

  const getCategoryLabel = (category: string) => {
    return category.charAt(0).toUpperCase() + category.slice(1).replace(/-/g, " ")
  }

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className={cn("border-b transition-colors", !notification.read ? "bg-muted/30" : "", isOpen ? "bg-muted/50" : "")}
    >
      <div className="flex items-start p-4">
        <div className="flex-shrink-0 mr-3 mt-0.5">{getIcon()}</div>
        <div className="flex-grow min-w-0">
          <div className="flex items-start justify-between gap-2">
            <div>
              <h4 className="font-medium text-sm">{notification.title}</h4>
              <p className="text-sm text-muted-foreground line-clamp-2 mt-0.5">{notification.message}</p>
            </div>
            <div className="flex-shrink-0 flex items-center">
              <Button
                variant="ghost"
                size="icon"
                className="h-7 w-7"
                onClick={(e) => {
                  e.stopPropagation()
                  onRemove(notification.id)
                }}
              >
                <Trash2 className="h-4 w-4" />
                <span className="sr-only">Remove</span>
              </Button>
            </div>
          </div>

          <div className="flex items-center justify-between mt-2">
            <div className="flex items-center gap-2">
              <span className="text-xs text-muted-foreground">{getTimeAgo(notification.timestamp)}</span>
              <Badge variant="outline" className="text-xs">
                {getCategoryLabel(notification.category)}
              </Badge>
            </div>

            <div className="flex items-center gap-1">
              {!notification.read && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-7 px-2 text-xs"
                  onClick={(e) => {
                    e.stopPropagation()
                    onMarkAsRead(notification.id)
                  }}
                >
                  <Check className="h-3 w-3 mr-1" />
                  Mark read
                </Button>
              )}

              <CollapsibleTrigger asChild>
                <Button variant="ghost" size="icon" className="h-7 w-7">
                  {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                </Button>
              </CollapsibleTrigger>
            </div>
          </div>
        </div>
      </div>

      <CollapsibleContent>
        <div className="px-4 pb-4 pt-0">
          <div className="bg-background rounded-md p-3 text-sm">
            <div className="grid grid-cols-2 gap-2 mb-3">
              <div>
                <p className="text-xs text-muted-foreground">Source</p>
                <p className="font-medium">{notification.source === "agent" ? "Agent" : "System"}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">ID</p>
                <p className="font-medium font-mono text-xs">{notification.sourceId}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Time</p>
                <p className="font-medium">{new Date(notification.timestamp).toLocaleString()}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Status</p>
                <p className="font-medium">{notification.read ? "Read" : "Unread"}</p>
              </div>
            </div>

            <Button asChild className="w-full">
              <Link href={notification.actionUrl}>View Details</Link>
            </Button>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}
[V0_FILE]typescriptreact:file="app/settings/notifications/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { NotificationRulesList } from "@/components/notifications/notification-rules-list"

export default function NotificationSettingsPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/dashboard">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Dashboard
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Notification Settings</h1>
          <p className="text-muted-foreground">
            Configure how and when you receive notifications about your agents and system events
          </p>
        </div>

        <Tabs defaultValue="channels">
          <TabsList className="mb-6">
            <TabsTrigger value="channels">Notification Channels</TabsTrigger>
            <TabsTrigger value="rules">Notification Rules</TabsTrigger>
            <TabsTrigger value="preferences">Preferences</TabsTrigger>
          </TabsList>

          <TabsContent value="channels">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>In-App Notifications</CardTitle>
                  <CardDescription>Configure notifications within the application</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="in-app-enabled">Enable In-App Notifications</Label>
                      <p className="text-sm text-muted-foreground">Receive notifications in the notification center</p>
                    </div>
                    <Switch id="in-app-enabled" defaultChecked />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="in-app-max">Maximum Notifications</Label>
                    <Select defaultValue="100">
                      <SelectTrigger id="in-app-max">
                        <SelectValue placeholder="Select maximum number" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="50">50 notifications</SelectItem>
                        <SelectItem value="100">100 notifications</SelectItem>
                        <SelectItem value="200">200 notifications</SelectItem>
                        <SelectItem value="500">500 notifications</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      Older notifications will be automatically removed when this limit is reached
                    </p>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="in-app-retention">Retention Period</Label>
                    <Select defaultValue="30">
                      <SelectTrigger id="in-app-retention">
                        <SelectValue placeholder="Select retention period" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="7">7 days</SelectItem>
                        <SelectItem value="14">14 days</SelectItem>
                        <SelectItem value="30">30 days</SelectItem>
                        <SelectItem value="90">90 days</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      Notifications older than this will be automatically removed
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Email Notifications</CardTitle>
                  <CardDescription>Configure email delivery of important notifications</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="email-enabled">Enable Email Notifications</Label>
                      <p className="text-sm text-muted-foreground">Receive important notifications via email</p>
                    </div>
                    <Switch id="email-enabled" defaultChecked />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email-address">Email Address</Label>
                    <Input id="email-address" type="email" placeholder="your@email.com" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email-frequency">Delivery Frequency</Label>
                    <Select defaultValue="immediate">
                      <SelectTrigger id="email-frequency">
                        <SelectValue placeholder="Select frequency" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="immediate">Immediate (as they occur)</SelectItem>
                        <SelectItem value="hourly">Hourly digest</SelectItem>
                        <SelectItem value="daily">Daily digest</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      How frequently you want to receive email notifications
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>SMS Notifications</CardTitle>
                  <CardDescription>Configure SMS alerts for critical notifications</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="sms-enabled">Enable SMS Notifications</Label>
                      <p className="text-sm text-muted-foreground">Receive critical alerts via SMS</p>
                    </div>
                    <Switch id="sms-enabled" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="phone-number">Phone Number</Label>
                    <Input id="phone-number" type="tel" placeholder="+1 (555) 123-4567" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="sms-level">Notification Level</Label>
                    <Select defaultValue="critical">
                      <SelectTrigger id="sms-level">
                        <SelectValue placeholder="Select level" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="critical">Critical only</SelectItem>
                        <SelectItem value="high">High and Critical</SelectItem>
                        <SelectItem value="all">All notifications</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      Which severity levels should trigger SMS notifications
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Webhook Notifications</CardTitle>
                  <CardDescription>Send notifications to external systems via webhooks</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="webhook-enabled">Enable Webhook Notifications</Label>
                      <p className="text-sm text-muted-foreground">Send notifications to external systems</p>
                    </div>
                    <Switch id="webhook-enabled" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="webhook-url">Webhook URL</Label>
                    <Input id="webhook-url" type="url" placeholder="https://example.com/webhook" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="webhook-secret">Webhook Secret</Label>
                    <Input id="webhook-secret" type="password" />
                    <p className="text-xs text-muted-foreground">Used to sign the webhook payload for verification</p>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="webhook-format">Payload Format</Label>
                    <Select defaultValue="json">
                      <SelectTrigger id="webhook-format">
                        <SelectValue placeholder="Select format" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="json">JSON</SelectItem>
                        <SelectItem value="xml">XML</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="rules">
            <Card>
              <CardHeader>
                <CardTitle>Notification Rules</CardTitle>
                <CardDescription>Configure which events trigger notifications</CardDescription>
              </CardHeader>
              <CardContent>
                <NotificationRulesList />
              </CardContent>
              <CardFooter>
                <Button className="ml-auto">Add New Rule</Button>
              </CardFooter>
            </Card>
          </TabsContent>

          <TabsContent value="preferences">
            <Card>
              <CardHeader>
                <CardTitle>General Preferences</CardTitle>
                <CardDescription>Configure your notification preferences</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-4">
                  <h3 className="text-sm font-medium">Notification Types</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="flex items-center space-x-2">
                      <Switch id="error-notifications" defaultChecked />
                      <Label htmlFor="error-notifications">Error Notifications</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="warning-notifications" defaultChecked />
                      <Label htmlFor="warning-notifications">Warning Notifications</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="info-notifications" defaultChecked />
                      <Label htmlFor="info-notifications">Info Notifications</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="success-notifications" defaultChecked />
                      <Label htmlFor="success-notifications">Success Notifications</Label>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h3 className="text-sm font-medium">Notification Categories</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="flex items-center space-x-2">
                      <Switch id="performance-notifications" defaultChecked />
                      <Label htmlFor="performance-notifications">Performance</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="availability-notifications" defaultChecked />
                      <Label htmlFor="availability-notifications">Availability</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="compliance-notifications" defaultChecked />
                      <Label htmlFor="compliance-notifications">Compliance</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="resources-notifications" defaultChecked />
                      <Label htmlFor="resources-notifications">Resources</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="security-notifications" defaultChecked />
                      <Label htmlFor="security-notifications">Security</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="updates-notifications" defaultChecked />
                      <Label htmlFor="updates-notifications">Updates</Label>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h3 className="text-sm font-medium">Quiet Hours</h3>
                  <p className="text-sm text-muted-foreground">
                    During quiet hours, only critical notifications will be sent via email or SMS
                  </p>
                  <div className="flex items-center space-x-2">
                    <Switch id="quiet-hours-enabled" />
                    <Label htmlFor="quiet-hours-enabled">Enable Quiet Hours</Label>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="quiet-hours-start">Start Time</Label>
                      <Input id="quiet-hours-start" type="time" defaultValue="22:00" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="quiet-hours-end">End Time</Label>
                      <Input id="quiet-hours-end" type="time" defaultValue="07:00" />
                    </div>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline">Reset to Defaults</Button>
                <Button>Save Preferences</Button>
              </CardFooter>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/notifications/notification-rules-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Pencil, Trash2 } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Mock data for notification rules
const initialRules = [
  {
    id: "rule-001",
    name: "Agent Offline Alert",
    description: "Alert when any agent is offline for more than 5 minutes",
    event: "agent.status.offline",
    condition: "duration > 5 minutes",
    channels: ["in-app", "email"],
    severity: "critical",
    enabled: true,
  },
  {
    id: "rule-002",
    name: "High Latency Warning",
    description: "Warning when agent response time exceeds threshold",
    event: "agent.performance.latency",
    condition: "value > 3 seconds",
    channels: ["in-app"],
    severity: "warning",
    enabled: true,
  },
  {
    id: "rule-003",
    name: "Compliance Check Failure",
    description: "Alert when a compliance check fails",
    event: "agent.compliance.check.failed",
    condition: "any",
    channels: ["in-app", "email", "webhook"],
    severity: "critical",
    enabled: true,
  },
  {
    id: "rule-004",
    name: "Resource Usage Alert",
    description: "Alert when agent resource usage is high",
    event: "agent.resources.usage",
    condition: "value > 90%",
    channels: ["in-app"],
    severity: "warning",
    enabled: true,
  },
  {
    id: "rule-005",
    name: "New Model Version",
    description: "Notification when new model versions are available",
    event: "system.model.new_version",
    condition: "any",
    channels: ["in-app"],
    severity: "info",
    enabled: true,
  },
  {
    id: "rule-006",
    name: "Agent Creation Success",
    description: "Notification when a new agent is created",
    event: "agent.lifecycle.created",
    condition: "any",
    channels: ["in-app"],
    severity: "success",
    enabled: false,
  },
  {
    id: "rule-007",
    name: "MCP Server Alert",
    description: "Alert when MCP server has connectivity issues",
    event: "system.mcp.connectivity",
    condition: "status = error",
    channels: ["in-app", "email", "sms"],
    severity: "critical",
    enabled: true,
  },
]

export function NotificationRulesList() {
  const [rules, setRules] = useState(initialRules)

  const toggleRuleStatus = (id: string) => {
    setRules(rules.map((rule) => (rule.id === id ? { ...rule, enabled: !rule.enabled } : rule)))
  }

  const getSeverityBadge = (severity: string) => {
    switch (severity) {
      case "critical":
        return <Badge variant="destructive">Critical</Badge>
      case "warning":
        return <Badge variant="warning">Warning</Badge>
      case "success":
        return <Badge variant="success">Success</Badge>
      case "info":
      default:
        return <Badge variant="secondary">Info</Badge>
    }
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Select defaultValue="all">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by severity" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Severities</SelectItem>
              <SelectItem value="critical">Critical</SelectItem>
              <SelectItem value="warning">Warning</SelectItem>
              <SelectItem value="info">Info</SelectItem>
              <SelectItem value="success">Success</SelectItem>
            </SelectContent>
          </Select>

          <Select defaultValue="all">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by channel" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Channels</SelectItem>
              <SelectItem value="in-app">In-App</SelectItem>
              <SelectItem value="email">Email</SelectItem>
              <SelectItem value="sms">SMS</SelectItem>
              <SelectItem value="webhook">Webhook</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm">
            Import Rules
          </Button>
          <Button variant="outline" size="sm">
            Export Rules
          </Button>
        </div>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[50px]">Status</TableHead>
            <TableHead>Rule</TableHead>
            <TableHead>Event</TableHead>
            <TableHead>Severity</TableHead>
            <TableHead>Channels</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rules.map((rule) => (
            <TableRow key={rule.id}>
              <TableCell>
                <Switch checked={rule.enabled} onCheckedChange={() => toggleRuleStatus(rule.id)} />
              </TableCell>
              <TableCell>
                <div>
                  <div className="font-medium">{rule.name}</div>
                  <div className="text-sm text-muted-foreground">{rule.description}</div>
                </div>
              </TableCell>
              <TableCell>
                <div>
                  <div className="font-mono text-xs">{rule.event}</div>
                  <div className="text-xs text-muted-foreground mt-1">Condition: {rule.condition}</div>
                </div>
              </TableCell>
              <TableCell>{getSeverityBadge(rule.severity)}</TableCell>
              <TableCell>
                <div className="flex flex-wrap gap-1">
                  {rule.channels.map((channel) => (
                    <Badge key={channel} variant="outline" className="capitalize">
                      {channel}
                    </Badge>
                  ))}
                </div>
              </TableCell>
              <TableCell className="text-right">
                <div className="flex justify-end gap-2">
                  <Button variant="ghost" size="icon">
                    <Pencil className="h-4 w-4" />
                    <span className="sr-only">Edit</span>
                  </Button>
                  <Button variant="ghost" size="icon">
                    <Trash2 className="h-4 w-4" />
                    <span className="sr-only">Delete</span>
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="types/notifications.ts" isMerged="true"
export interface Notification {
  id: string
  title: string
  message: string
  timestamp: string
  type: "error" | "warning" | "info" | "success"
  source: "agent" | "system"
  sourceId: string
  read: boolean
  actionUrl: string
  category: string
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import { Inter } from "next/font/google"
import type { Metadata } from "next"
import { Toaster } from "@/components/ui/toaster"
import { ThemeProvider } from "@/components/theme-provider"
import { MainNav } from "@/components/main-nav"
import { MobileMenu } from "@/components/mobile-menu"
import { NotificationCenter } from "@/components/notifications/notification-center"
import { ThemeToggle } from "@/components/theme-toggle"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "EOS Solar Payments - Plataforma de Agentic Swarms",
  description: "Plataforma completa para gerenciamento de agentes autônomos com foco em conformidade LGPD/GDPR",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <div className="flex min-h-screen flex-col">
            <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
              <div className="container flex h-16 items-center justify-between">
                <MainNav />
                <div className="flex items-center gap-4">
                  <NotificationCenter />
                  <ThemeToggle />
                  <MobileMenu />
                </div>
              </div>
            </header>
            <main className="flex-1">{children}</main>
            <footer className="border-t py-6 md:py-0">
              <div className="container flex flex-col items-center justify-between gap-4 md:h-16 md:flex-row">
                <p className="text-sm text-muted-foreground">
                  © {new Date().getFullYear()} EOS Solar Payments. Todos os direitos reservados.
                </p>
                <div className="flex items-center gap-4">
                  <a href="/terms" className="text-sm text-muted-foreground hover:underline">
                    Termos
                  </a>
                  <a href="/privacy" className="text-sm text-muted-foreground hover:underline">
                    Privacidade
                  </a>
                </div>
              </div>
            </footer>
          </div>
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { GradientBackground } from "@/components/gradient-background"
import { MarqueeLogos } from "@/components/marquee-logos"
import { FeatureCard } from "@/components/feature-card"
import { StatsCard } from "@/components/stats-card"
import { FeatureHighlight } from "@/components/feature-highlight"
import { TestimonialCard } from "@/components/testimonial-card"
import { FaqItem } from "@/components/faq-item"
import { ContactForm } from "@/components/contact-form"
import { ArrowRight, Bot, Shield, Zap, BarChart3, Globe, Users } from "lucide-react"

export default function HomePage() {
  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative overflow-hidden py-20 md:py-32">
        <GradientBackground />
        <div className="container relative z-10 mx-auto px-4 text-center">
          <h1 className="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
            Plataforma de <span className="text-primary">Agentic Swarms</span> para Energia Solar
          </h1>
          <p className="mx-auto mb-10 max-w-2xl text-xl text-muted-foreground">
            Gerencie agentes autônomos inteligentes para otimizar operações de pagamentos em energia solar com total
            conformidade LGPD/GDPR.
          </p>
          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Button asChild size="lg">
              <Link href="/agents">
                Explorar Plataforma <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
            <Button variant="outline" size="lg" asChild>
              <Link href="/demo">Agendar Demonstração</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Logos Section */}
      <section className="py-12 md:py-16">
        <div className="container">
          <h2 className="mb-8 text-center text-xl font-medium text-muted-foreground">
            Utilizado por empresas líderes em energia solar
          </h2>
          <MarqueeLogos />
        </div>
      </section>

      {/* Features Section */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Recursos Principais</h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              Nossa plataforma oferece ferramentas avançadas para gerenciamento completo de agentes autônomos.
            </p>
          </div>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            <FeatureCard
              icon={<Bot className="h-10 w-10" />}
              title="Gerenciamento de Agentes"
              description="Crie, configure e monitore agentes inteligentes com interface intuitiva."
            />
            <FeatureCard
              icon={<Shield className="h-10 w-10" />}
              title="Conformidade LGPD/GDPR"
              description="Garanta que todos os agentes operem dentro das regulamentações de privacidade."
            />
            <FeatureCard
              icon={<Zap className="h-10 w-10" />}
              title="Orquestração de Swarms"
              description="Coordene múltiplos agentes trabalhando juntos em tarefas complexas."
            />
            <FeatureCard
              icon={<BarChart3 className="h-10 w-10" />}
              title="Análise de Desempenho"
              description="Monitore métricas detalhadas e otimize o desempenho dos agentes."
            />
            <FeatureCard
              icon={<Globe className="h-10 w-10" />}
              title="Integração com APIs"
              description="Conecte-se facilmente com sistemas externos e fontes de dados."
            />
            <FeatureCard
              icon={<Users className="h-10 w-10" />}
              title="Controle de Acesso"
              description="Gerencie permissões granulares para diferentes usuários e equipes."
            />
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="bg-muted py-16">
        <div className="container">
          <div className="grid gap-8 md:grid-cols-3">
            <StatsCard value="99.9%" label="Uptime" description="Disponibilidade garantida para seus agentes" />
            <StatsCard value="45%" label="Economia" description="Redução média de custos operacionais" />
            <StatsCard value="10x" label="Mais rápido" description="Processamento de transações otimizado" />
          </div>
        </div>
      </section>

      {/* Feature Highlight */}
      <section className="py-16 md:py-24">
        <div className="container">
          <FeatureHighlight
            title="Assistente de Criação de Agentes"
            description="Nosso assistente guiado facilita a criação de agentes personalizados para suas necessidades específicas, sem necessidade de conhecimento técnico profundo."
            imageSrc="/placeholder.svg?height=400&width=600"
            imageAlt="Assistente de Criação de Agentes"
          />
        </div>
      </section>

      {/* Testimonials */}
      <section className="bg-muted py-16 md:py-24">
        <div className="container">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">O que Nossos Clientes Dizem</h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              Empresas de energia solar em todo o Brasil confiam em nossa plataforma.
            </p>
          </div>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            <TestimonialCard
              quote="A plataforma revolucionou nossa operação de pagamentos, reduzindo erros em 95% e melhorando a satisfação dos clientes."
              author="Maria Silva"
              role="Diretora de Operações, SolarTech Brasil"
              avatarSrc="/placeholder.svg?height=80&width=80"
            />
            <TestimonialCard
              quote="Os agentes inteligentes nos permitiram escalar operações sem aumentar nossa equipe, com total conformidade regulatória."
              author="João Pereira"
              role="CEO, Energia Solar Sustentável"
              avatarSrc="/placeholder.svg?height=80&width=80"
            />
            <TestimonialCard
              quote="A facilidade de configuração e o dashboard de métricas nos deram visibilidade sem precedentes sobre nossas operações."
              author="Ana Costa"
              role="CTO, GreenPower Solutions"
              avatarSrc="/placeholder.svg?height=80&width=80"
            />
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Perguntas Frequentes</h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              Respostas para as dúvidas mais comuns sobre nossa plataforma.
            </p>
          </div>
          <div className="mx-auto max-w-3xl space-y-4">
            <FaqItem
              question="O que são Agentic Swarms?"
              answer="Agentic Swarms são grupos de agentes de IA autônomos que trabalham juntos para realizar tarefas complexas. Cada agente tem uma especialidade e, juntos, podem resolver problemas que seriam difíceis para um único agente."
            />
            <FaqItem
              question="Como a plataforma garante conformidade com LGPD/GDPR?"
              answer="Nossa plataforma implementa princípios de privacidade por design, com controles granulares de acesso a dados, registro de auditoria completo, mecanismos de consentimento e ferramentas de anonimização e exclusão de dados."
            />
            <FaqItem
              question="Quais integrações são suportadas?"
              answer="Suportamos integrações com principais sistemas de pagamento, ERPs, CRMs, e APIs específicas do setor de energia solar. Também oferecemos uma API aberta para integrações personalizadas."
            />
            <FaqItem
              question="Quanto tempo leva para implementar a plataforma?"
              answer="A implementação básica pode ser concluída em 2-4 semanas, dependendo da complexidade das integrações necessárias. Oferecemos suporte completo durante todo o processo."
            />
            <FaqItem
              question="A plataforma funciona para pequenas empresas?"
              answer="Sim, oferecemos planos escaláveis adequados para empresas de todos os tamanhos, desde pequenas instaladoras até grandes distribuidoras de energia solar."
            />
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="bg-muted py-16 md:py-24">
        <div className="container">
          <div className="grid gap-12 md:grid-cols-2">
            <div>
              <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Entre em Contato</h2>
              <p className="mb-8 text-muted-foreground">
                Estamos prontos para ajudar sua empresa a otimizar operações de pagamentos em energia solar com nossa
                plataforma de agentes inteligentes.
              </p>
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      strokeWidth={1.5}
                      stroke="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
                      />
                    </svg>
                  </div>
                  <span>contato@eossolarpayments.com.br</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      strokeWidth={1.5}
                      stroke="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
                      />
                    </svg>
                  </div>
                  <span>+55 (11) 4321-1234</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      strokeWidth={1.5}
                      stroke="currentColor"
                      className="h-5 w-5"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
                      />
                    </svg>
                  </div>
                  <span>Av. Paulista, 1000, São Paulo - SP</span>
                </div>
              </div>
            </div>
            <ContactForm />
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="rounded-lg bg-primary px-6 py-12 text-center text-primary-foreground md:px-12">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
              Pronto para transformar suas operações?
            </h2>
            <p className="mx-auto mb-8 max-w-2xl text-primary-foreground/90">
              Comece hoje mesmo a otimizar seus processos de pagamento em energia solar com nossa plataforma de agentes
              inteligentes.
            </p>
            <Button size="lg" variant="secondary" asChild>
              <Link href="/agents/new">
                Criar Seu Primeiro Agente <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/main-nav.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

export function MainNav() {
  return (
    <div className="flex items-center gap-6 md:gap-10">
      <Link href="/" className="flex items-center space-x-2">
        <span className="hidden font-bold sm:inline-block">EOS Solar Payments</span>
      </Link>
      <NavigationMenu className="hidden md:block">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Plataforma</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-2">
                <li className="row-span-3">
                  <NavigationMenuLink asChild>
                    <a
                      className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                      href="/agents"
                    >
                      <div className="mb-2 mt-4 text-lg font-medium">Agentic Swarms</div>
                      <p className="text-sm leading-tight text-muted-foreground">
                        Plataforma completa para gerenciamento de agentes autônomos com foco em conformidade LGPD/GDPR.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/agents"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Gerenciamento de Agentes</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Crie e gerencie agentes inteligentes para suas necessidades.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/dashboard/recovery"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Dashboard de Recuperação</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Monitore e otimize a recuperação de pagamentos.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/value-chain"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Análise de Cadeia de Valor</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Visualize e otimize toda sua cadeia de valor.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Soluções</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/solutions/intelligent-routing"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Roteamento Inteligente</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Otimize o roteamento de pagamentos para maior taxa de sucesso.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/solutions/vault"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Vault Seguro</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Armazenamento seguro de dados sensíveis com criptografia avançada.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/solutions/alternative-payment-methods"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Métodos Alternativos de Pagamento</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Suporte a múltiplos métodos de pagamento para maior flexibilidade.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/solutions/cost-observability"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Observabilidade de Custos</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Visibilidade completa sobre custos de processamento de pagamentos.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Recursos</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-2">
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/resources/case-studies"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Casos de Estudo</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Histórias de sucesso de clientes que utilizam nossa plataforma.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/resources/blog"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Blog</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Artigos e insights sobre pagamentos em energia solar.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/resources/community"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Comunidade</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Participe de nossa comunidade de usuários e desenvolvedores.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/resources/integrations"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Integrações</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Conecte nossa plataforma com seus sistemas existentes.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <Link href="/about" legacyBehavior passHref>
              <NavigationMenuLink className={navigationMenuTriggerStyle()}>Sobre</NavigationMenuLink>
            </Link>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-menu.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Menu, ChevronDown } from "lucide-react"

export function MobileMenu() {
  const [open, setOpen] = useState(false)
  const [platformOpen, setPlatformOpen] = useState(false)
  const [solutionsOpen, setSolutionsOpen] = useState(false)
  const [resourcesOpen, setResourcesOpen] = useState(false)

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild className="md:hidden">
        <Button variant="ghost" size="icon">
          <Menu className="h-5 w-5" />
          <span className="sr-only">Abrir menu</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="w-[300px] sm:w-[350px]">
        <SheetHeader>
          <SheetTitle>EOS Solar Payments</SheetTitle>
        </SheetHeader>
        <div className="mt-6 flex flex-col space-y-3">
          <Collapsible open={platformOpen} onOpenChange={setPlatformOpen} className="w-full">
            <CollapsibleTrigger asChild>
              <Button variant="ghost" className="flex w-full justify-between">
                <span>Plataforma</span>
                <ChevronDown className={`h-4 w-4 transition-transform ${platformOpen ? "rotate-180" : ""}`} />
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent className="space-y-2 pl-4 pt-2">
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/agents">Gerenciamento de Agentes</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/dashboard/recovery">Dashboard de Recuperação</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/value-chain">Análise de Cadeia de Valor</Link>
              </Button>
            </CollapsibleContent>
          </Collapsible>

          <Collapsible open={solutionsOpen} onOpenChange={setSolutionsOpen} className="w-full">
            <CollapsibleTrigger asChild>
              <Button variant="ghost" className="flex w-full justify-between">
                <span>Soluções</span>
                <ChevronDown className={`h-4 w-4 transition-transform ${solutionsOpen ? "rotate-180" : ""}`} />
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent className="space-y-2 pl-4 pt-2">
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/solutions/intelligent-routing">Roteamento Inteligente</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/solutions/vault">Vault Seguro</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/solutions/alternative-payment-methods">Métodos Alternativos de Pagamento</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/solutions/cost-observability">Observabilidade de Custos</Link>
              </Button>
            </CollapsibleContent>
          </Collapsible>

          <Collapsible open={resourcesOpen} onOpenChange={setResourcesOpen} className="w-full">
            <CollapsibleTrigger asChild>
              <Button variant="ghost" className="flex w-full justify-between">
                <span>Recursos</span>
                <ChevronDown className={`h-4 w-4 transition-transform ${resourcesOpen ? "rotate-180" : ""}`} />
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent className="space-y-2 pl-4 pt-2">
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/resources/case-studies">Casos de Estudo</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/resources/blog">Blog</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/resources/community">Comunidade</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/resources/integrations">Integrações</Link>
              </Button>
            </CollapsibleContent>
          </Collapsible>

          <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
            <Link href="/about">Sobre</Link>
          </Button>

          <div className="pt-4">
            <Button className="w-full" asChild onClick={() => setOpen(false)}>
              <Link href="/agents/new">Criar Agente</Link>
            </Button>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isMerged="true"
"use client"

import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Moon, Sun } from "lucide-react"

export function ThemeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Alternar tema</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Claro</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Escuro</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>Sistema</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/gradient-background.tsx" isFixed="true" isEdit="true" isMerged="true"
export function GradientBackground() {
  return (
    <div className="absolute inset-0 -z-10 overflow-hidden">
      <div
        className="absolute left-1/2 top-0 -z-10 h-[1000px] w-[1000px] -translate-x-1/2 -translate-y-1/4 rounded-full bg-gradient-to-r from-primary/20 to-primary-foreground/20 blur-3xl"
        aria-hidden="true"
      />
      <div
        className="absolute right-0 top-1/4 -z-10 h-[800px] w-[800px] translate-x-1/3 rounded-full bg-gradient-to-l from-primary/10 to-primary-foreground/10 blur-3xl"
        aria-hidden="true"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/feature-card.tsx" isEdit="true" isMerged="true"
import type React from "react"
import { cn } from "@/lib/utils"

interface FeatureCardProps {
  icon: React.ReactNode
  title: string
  description: string
  className?: string
}

export function FeatureCard({ icon, title, description, className }: FeatureCardProps) {
  return (
    <div
      className={cn(
        "flex flex-col rounded-lg border bg-card p-6 text-card-foreground shadow transition-all hover:shadow-md",
        className,
      )}
    >
      <div className="mb-4 text-primary">{icon}</div>
      <h3 className="mb-2 text-xl font-medium">{title}</h3>
      <p className="text-muted-foreground">{description}</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/stats-card.tsx" isEdit="true" isMerged="true"
interface StatsCardProps {
  value: string
  label: string
  description: string
}

export function StatsCard({ value, label, description }: StatsCardProps) {
  return (
    <div className="flex flex-col items-center rounded-lg bg-background p-6 text-center shadow">
      <div className="text-4xl font-bold text-primary">{value}</div>
      <div className="mb-2 text-xl font-medium">{label}</div>
      <p className="text-muted-foreground">{description}</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/feature-highlight.tsx" isEdit="true" isMerged="true"
import Image from "next/image"

interface FeatureHighlightProps {
  title: string
  description: string
  imageSrc: string
  imageAlt: string
  reversed?: boolean
}

export function FeatureHighlight({ title, description, imageSrc, imageAlt, reversed = false }: FeatureHighlightProps) {
  return (
    <div className={`flex flex-col gap-8 ${reversed ? "md:flex-row-reverse" : "md:flex-row"}`}>
      <div className="flex flex-1 flex-col justify-center">
        <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
        <p className="text-muted-foreground">{description}</p>
      </div>
      <div className="flex-1">
        <div className="overflow-hidden rounded-lg shadow-lg">
          <Image
            src={imageSrc || "/placeholder.svg"}
            alt={imageAlt}
            width={600}
            height={400}
            className="h-auto w-full object-cover"
          />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/testimonial-card.tsx" isEdit="true" isMerged="true"
import Image from "next/image"

interface TestimonialCardProps {
  quote: string
  author: string
  role: string
  avatarSrc: string
}

export function TestimonialCard({ quote, author, role, avatarSrc }: TestimonialCardProps) {
  return (
    <div className="flex flex-col rounded-lg border bg-card p-6 text-card-foreground shadow">
      <div className="mb-4 text-lg italic text-muted-foreground">"{quote}"</div>
      <div className="mt-auto flex items-center">
        <div className="mr-4 overflow-hidden rounded-full">
          <Image
            src={avatarSrc || "/placeholder.svg"}
            alt={author}
            width={40}
            height={40}
            className="h-10 w-10 object-cover"
          />
        </div>
        <div>
          <div className="font-medium">{author}</div>
          <div className="text-sm text-muted-foreground">{role}</div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/faq-item.tsx" isEdit="true" isMerged="true"
"use client"

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

interface FaqItemProps {
  question: string
  answer: string
}

export function FaqItem({ question, answer }: FaqItemProps) {
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger className="text-left font-medium">{question}</AccordionTrigger>
        <AccordionContent className="text-muted-foreground">{answer}</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
[V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isMerged="true"
"use client"

import type 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 { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/hooks/use-toast"

export function ContactForm() {
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    company: "",
    message: "",
  })

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

    try {
      // Simulação de envio de formulário
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Mensagem enviada",
        description: "Entraremos em contato em breve.",
      })

      // Limpar formulário
      setFormData({
        name: "",
        email: "",
        company: "",
        message: "",
      })
    } catch (error) {
      toast({
        title: "Erro ao enviar mensagem",
        description: "Por favor, tente novamente mais tarde.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="space-y-2">
        <Label htmlFor="name">Nome</Label>
        <Input id="name" name="name" value={formData.name} onChange={handleChange} required />
      </div>
      <div className="space-y-2">
        <Label htmlFor="email">Email</Label>
        <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} required />
      </div>
      <div className="space-y-2">
        <Label htmlFor="company">Empresa</Label>
        <Input id="company" name="company" value={formData.company} onChange={handleChange} required />
      </div>
      <div className="space-y-2">
        <Label htmlFor="message">Mensagem</Label>
        <Textarea id="message" name="message" rows={4} value={formData.message} onChange={handleChange} required />
      </div>
      <Button type="submit" className="w-full" disabled={isSubmitting}>
        {isSubmitting ? "Enviando..." : "Enviar Mensagem"}
      </Button>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/marquee-logos.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import Image from "next/image"

export function MarqueeLogos() {
  const marqueeRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const marquee = marqueeRef.current
    if (!marquee) return

    const scrollWidth = marquee.scrollWidth
    const clientWidth = marquee.clientWidth

    if (scrollWidth <= clientWidth) return

    let position = 0
    const speed = 0.5

    const scroll = () => {
      position -= speed
      if (position <= -scrollWidth / 2) {
        position = 0
      }
      if (marquee) {
        marquee.style.transform = `translateX(${position}px)`
      }
      requestAnimationFrame(scroll)
    }

    const animation = requestAnimationFrame(scroll)

    return () => {
      cancelAnimationFrame(animation)
    }
  }, [])

  // Logos de exemplo
  const logos = [
    { src: "/placeholder.svg?height=40&width=120", alt: "Logo 1" },
    { src: "/placeholder.svg?height=40&width=120", alt: "Logo 2" },
    { src: "/placeholder.svg?height=40&width=120", alt: "Logo 3" },
    { src: "/placeholder.svg?height=40&width=120", alt: "Logo 4" },
    { src: "/placeholder.svg?height=40&width=120", alt: "Logo 5" },
    { src: "/placeholder.svg?height=40&width=120", alt: "Logo 6" },
    { src: "/placeholder.svg?height=40&width=120", alt: "Logo 7" },
    { src: "/placeholder.svg?height=40&width=120", alt: "Logo 8" },
  ]

  return (
    <div className="relative overflow-hidden">
      <div ref={marqueeRef} className="flex items-center gap-8 py-4" style={{ width: "fit-content" }}>
        {/* Primeira cópia dos logos */}
        {logos.map((logo, index) => (
          <div
            key={`logo-1-${index}`}
            className="flex h-12 w-32 items-center justify-center grayscale transition-all hover:grayscale-0"
          >
            <Image
              src={logo.src || "/placeholder.svg"}
              alt={logo.alt}
              width={120}
              height={40}
              className="h-auto max-h-10 w-auto"
            />
          </div>
        ))}
        {/* Segunda cópia dos logos para criar efeito contínuo */}
        {logos.map((logo, index) => (
          <div
            key={`logo-2-${index}`}
            className="flex h-12 w-32 items-center justify-center grayscale transition-all hover:grayscale-0"
          >
            <Image
              src={logo.src || "/placeholder.svg"}
              alt={logo.alt}
              width={120}
              height={40}
              className="h-auto max-h-10 w-auto"
            />
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/agents/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { AgentsHeader } from "@/components/agents/agents-header"
import { AgentsStats } from "@/components/agents/agents-stats"
import { AgentsFilters } from "@/components/agents/agents-filters"
import { AgentsList } from "@/components/agents/agents-list"
import { Plus } from "lucide-react"

export default function AgentsPage() {
  return (
    <div className="container py-8">
      <div className="mb-8 flex items-center justify-between">
        <AgentsHeader />
        <Button asChild>
          <Link href="/agents/new">
            <Plus className="mr-2 h-4 w-4" /> Novo Agente
          </Link>
        </Button>
      </div>

      <AgentsStats />

      <div className="mt-8">
        <AgentsFilters />
      </div>

      <div className="mt-6">
        <AgentsList />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agents-header.tsx" isFixed="true" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { PlusCircle, Download, Upload, RefreshCw, Settings } from "lucide-react"
import { useRouter } from "next/navigation"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function AgentsHeader() {
  const router = useRouter()

  return (
    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Agentes</h1>
        <p className="mt-1 text-muted-foreground">Gerencie seus agentes autônomos e monitore seu desempenho.</p>
      </div>
      <div className="flex items-center gap-2 self-end sm:self-auto">
        <Button variant="outline" size="sm" className="h-9">
          <RefreshCw className="h-4 w-4 mr-2" />
          Atualizar
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="sm" className="h-9">
              <Settings className="h-4 w-4 mr-2" />
              Ações
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Ações em Lote</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <Download className="h-4 w-4 mr-2" />
              Exportar Agentes
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Upload className="h-4 w-4 mr-2" />
              Importar Agentes
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <Button onClick={() => router.push("/agents/new")}>
          <PlusCircle className="h-4 w-4 mr-2" />
          Novo Agente
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agents-stats.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Bot, Zap, BarChart3, AlertCircle } from "lucide-react"

export function AgentsStats() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total de Agentes</CardTitle>
          <Bot className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">12</div>
          <p className="text-xs text-muted-foreground">+2 no último mês</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Agentes Ativos</CardTitle>
          <Zap className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">10</div>
          <p className="text-xs text-muted-foreground">83% do total</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Taxa de Sucesso</CardTitle>
          <BarChart3 className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">94.2%</div>
          <p className="text-xs text-muted-foreground">+2.1% em relação ao mês anterior</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Alertas</CardTitle>
          <AlertCircle className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">2</div>
          <p className="text-xs text-muted-foreground">Requer atenção</p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agents-filters.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Search, X } from "lucide-react"

export function AgentsFilters() {
  const [searchTerm, setSearchTerm] = useState("")
  const [status, setStatus] = useState<string | undefined>(undefined)
  const [type, setType] = useState<string | undefined>(undefined)

  const clearFilters = () => {
    setSearchTerm("")
    setStatus(undefined)
    setType(undefined)
  }

  const hasFilters = searchTerm || status || type

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-4 md:flex-row">
        <div className="relative flex-1">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar agentes..."
            className="pl-8"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
        <Select value={status} onValueChange={setStatus}>
          <SelectTrigger className="w-full md:w-[180px]">
            <SelectValue placeholder="Status" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="active">Ativo</SelectItem>
            <SelectItem value="inactive">Inativo</SelectItem>
            <SelectItem value="error">Com Erro</SelectItem>
          </SelectContent>
        </Select>
        <Select value={type} onValueChange={setType}>
          <SelectTrigger className="w-full md:w-[180px]">
            <SelectValue placeholder="Tipo" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="payment">Pagamento</SelectItem>
            <SelectItem value="support">Suporte</SelectItem>
            <SelectItem value="analytics">Análise</SelectItem>
            <SelectItem value="recovery">Recuperação</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {hasFilters && (
        <div className="flex items-center gap-2">
          <div className="text-sm text-muted-foreground">Filtros:</div>
          <div className="flex flex-wrap gap-2">
            {searchTerm && (
              <Badge variant="outline" className="flex items-center gap-1">
                Busca: {searchTerm}
                <X className="h-3 w-3 cursor-pointer" onClick={() => setSearchTerm("")} />
              </Badge>
            )}
            {status && (
              <Badge variant="outline" className="flex items-center gap-1">
                Status: {status === "active" ? "Ativo" : status === "inactive" ? "Inativo" : "Com Erro"}
                <X className="h-3 w-3 cursor-pointer" onClick={() => setStatus(undefined)} />
              </Badge>
            )}
            {type && (
              <Badge variant="outline" className="flex items-center gap-1">
                Tipo:{" "}
                {type === "payment"
                  ? "Pagamento"
                  : type === "support"
                    ? "Suporte"
                    : type === "analytics"
                      ? "Análise"
                      : "Recuperação"}
                <X className="h-3 w-3 cursor-pointer" onClick={() => setType(undefined)} />
              </Badge>
            )}
          </div>
          <Button variant="ghost" size="sm" className="ml-auto h-8 px-2 text-xs" onClick={clearFilters}>
            Limpar Filtros
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agents-list.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { MoreHorizontal, Play, Pause, RefreshCw, Settings, Trash2, Copy, ExternalLink } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

// Dados de exemplo para agentes
const agentsData = [
  {
    id: "1",
    name: "Agente de Processamento de Pagamentos",
    type: "payment",
    status: "active",
    model: "GPT-4",
    lastActive: "2023-04-15T10:30:00Z",
    successRate: 96.5,
  },
  {
    id: "2",
    name: "Agente de Suporte ao Cliente",
    type: "support",
    status: "active",
    model: "Claude 2",
    lastActive: "2023-04-15T09:45:00Z",
    successRate: 92.8,
  },
  {
    id: "3",
    name: "Agente de Análise de Dados",
    type: "analytics",
    status: "inactive",
    model: "GPT-4",
    lastActive: "2023-04-14T16:20:00Z",
    successRate: 98.1,
  },
  {
    id: "4",
    name: "Agente de Recuperação de Pagamentos",
    type: "recovery",
    status: "error",
    model: "GPT-3.5",
    lastActive: "2023-04-15T08:15:00Z",
    successRate: 89.3,
  },
  {
    id: "5",
    name: "Agente de Processamento de Reembolsos",
    type: "payment",
    status: "active",
    model: "Claude 2",
    lastActive: "2023-04-15T11:10:00Z",
    successRate: 95.7,
  },
]

export function AgentsList() {
  const { toast } = useToast()
  const [agents, setAgents] = useState(agentsData)

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date)
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-500">Ativo</Badge>
      case "inactive":
        return <Badge variant="outline">Inativo</Badge>
      case "error":
        return <Badge variant="destructive">Erro</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

  const getTypeBadge = (type: string) => {
    switch (type) {
      case "payment":
        return <Badge variant="secondary">Pagamento</Badge>
      case "support":
        return <Badge variant="secondary">Suporte</Badge>
      case "analytics":
        return <Badge variant="secondary">Análise</Badge>
      case "recovery":
        return <Badge variant="secondary">Recuperação</Badge>
      default:
        return <Badge variant="secondary">{type}</Badge>
    }
  }

  const toggleAgentStatus = (id: string) => {
    setAgents((prev) =>
      prev.map((agent) => {
        if (agent.id === id) {
          const newStatus = agent.status === "active" ? "inactive" : "active"

          toast({
            title: `Agente ${newStatus === "active" ? "ativado" : "desativado"}`,
            description: `O agente "${agent.name}" foi ${
              newStatus === "active" ? "ativado" : "desativado"
            } com sucesso.`,
          })

          return { ...agent, status: newStatus }
        }
        return agent
      }),
    )
  }

  const restartAgent = (id: string, name: string) => {
    toast({
      title: "Agente reiniciado",
      description: `O agente "${name}" está sendo reiniciado.`,
    })
  }

  const duplicateAgent = (id: string, name: string) => {
    toast({
      title: "Agente duplicado",
      description: `Uma cópia do agente "${name}" foi criada.`,
    })
  }

  const deleteAgent = (id: string, name: string) => {
    setAgents((prev) => prev.filter((agent) => agent.id !== id))

    toast({
      title: "Agente excluído",
      description: `O agente "${name}" foi excluído com sucesso.`,
    })
  }

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Nome</TableHead>
            <TableHead>Tipo</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Modelo</TableHead>
            <TableHead>Última Atividade</TableHead>
            <TableHead>Taxa de Sucesso</TableHead>
            <TableHead className="w-[80px]"></TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {agents.map((agent) => (
            <TableRow key={agent.id}>
              <TableCell className="font-medium">
                <Link href={`/agents/${agent.id}`} className="hover:underline">
                  {agent.name}
                </Link>
              </TableCell>
              <TableCell>{getTypeBadge(agent.type)}</TableCell>
              <TableCell>{getStatusBadge(agent.status)}</TableCell>
              <TableCell>{agent.model}</TableCell>
              <TableCell>{formatDate(agent.lastActive)}</TableCell>
              <TableCell>
                <div className="flex items-center">
                  <span
                    className={`mr-2 ${
                      agent.successRate >= 95
                        ? "text-green-500"
                        : agent.successRate >= 90
                          ? "text-yellow-500"
                          : "text-red-500"
                    }`}
                  >
                    {agent.successRate}%
                  </span>
                </div>
              </TableCell>
              <TableCell>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" className="h-8 w-8 p-0">
                      <span className="sr-only">Abrir menu</span>
                      <MoreHorizontal className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuLabel>Ações</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem asChild>
                      <Link href={`/agents/${agent.id}`}>
                        <ExternalLink className="mr-2 h-4 w-4" />
                        Ver Detalhes
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => toggleAgentStatus(agent.id)}>
                      {agent.status === "active" ? (
                        <>
                          <Pause className="mr-2 h-4 w-4" />
                          Desativar
                        </>
                      ) : (
                        <>
                          <Play className="mr-2 h-4 w-4" />
                          Ativar
                        </>
                      )}
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => restartAgent(agent.id, agent.name)}>
                      <RefreshCw className="mr-2 h-4 w-4" />
                      Reiniciar
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href={`/agents/${agent.id}/settings`}>
                        <Settings className="mr-2 h-4 w-4" />
                        Configurações
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={() => duplicateAgent(agent.id, agent.name)}>
                      <Copy className="mr-2 h-4 w-4" />
                      Duplicar
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={() => deleteAgent(agent.id, agent.name)}
                      className="text-red-600 focus:text-red-600"
                    >
                      <Trash2 className="mr-2 h-4 w-4" />
                      Excluir
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-header.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Play, Pause, RefreshCw, MoreHorizontal, Copy, Trash2, ArrowLeft } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface AgentHeaderProps {
  agent: any // Em uma aplicação real, isso seria tipado adequadamente
}

export function AgentHeader({ agent }: AgentHeaderProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [isActive, setIsActive] = useState(agent.status === "active")
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)

  const toggleStatus = () => {
    setIsActive(!isActive)
    toast({
      title: `Agente ${!isActive ? "ativado" : "desativado"}`,
      description: `O agente "${agent.name}" foi ${!isActive ? "ativado" : "desativado"} com sucesso.`,
    })
  }

  const restartAgent = () => {
    toast({
      title: "Agente reiniciado",
      description: `O agente "${agent.name}" está sendo reiniciado.`,
    })
  }

  const duplicateAgent = () => {
    toast({
      title: "Agente duplicado",
      description: `Uma cópia do agente "${agent.name}" foi criada.`,
    })
  }

  const deleteAgent = () => {
    setShowDeleteDialog(false)
    toast({
      title: "Agente excluído",
      description: `O agente "${agent.name}" foi excluído com sucesso.`,
    })
    router.push("/agents")
  }

  const getStatusBadge = () => {
    const status = isActive ? "active" : "inactive"
    switch (status) {
      case "active":
        return <Badge className="bg-green-500">Ativo</Badge>
      case "inactive":
        return <Badge variant="outline">Inativo</Badge>
      case "error":
        return <Badge variant="destructive">Erro</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    }).format(date)
  }

  return (
    <div>
      <Button variant="ghost" size="sm" className="mb-4" onClick={() => router.push("/agents")}>
        <ArrowLeft className="mr-2 h-4 w-4" />
        Voltar para Agentes
      </Button>

      <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
        <div>
          <div className="flex items-center gap-2">
            <h1 className="text-3xl font-bold tracking-tight">{agent.name}</h1>
            {getStatusBadge()}
          </div>
          <p className="mt-1 text-muted-foreground">{agent.description}</p>
          <div className="mt-2 flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground">
            <div>
              <span className="font-medium">ID:</span> {agent.id}
            </div>
            <div>
              <span className="font-medium">Modelo:</span> {agent.model}
            </div>
            <div>
              <span className="font-medium">Criado em:</span> {formatDate(agent.createdAt)}
            </div>
            <div>
              <span className="font-medium">Última atividade:</span> {formatDate(agent.lastActive)}
            </div>
          </div>
        </div>

        <div className="flex gap-2">
          <Button variant={isActive ? "outline" : "default"} size="sm" onClick={toggleStatus}>
            {isActive ? (
              <>
                <Pause className="mr-2 h-4 w-4" /> Desativar
              </>
            ) : (
              <>
                <Play className="mr-2 h-4 w-4" /> Ativar
              </>
            )}
          </Button>
          <Button variant="outline" size="sm" onClick={restartAgent}>
            <RefreshCw className="mr-2 h-4 w-4" /> Reiniciar
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="icon">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>Ações</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={duplicateAgent}>
                <Copy className="mr-2 h-4 w-4" /> Duplicar
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setShowDeleteDialog(true)} className="text-red-600 focus:text-red-600">
                <Trash2 className="mr-2 h-4 w-4" /> Excluir
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Tem certeza?</AlertDialogTitle>
            <AlertDialogDescription>
              Esta ação não pode ser desfeita. Isso excluirá permanentemente o agente "{agent.name}" e todos os seus
              dados associados.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction onClick={deleteAgent} className="bg-red-600 hover:bg-red-700">
              Excluir
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-performance.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
} from "recharts"

interface AgentPerformanceProps {
  agent: any // Em uma aplicação real, isso seria tipado adequadamente
}

// Dados de exemplo para os gráficos
const successRateData = [
  { name: "Jan", rate: 92 },
  { name: "Fev", rate: 93 },
  { name: "Mar", rate: 94 },
  { name: "Abr", rate: 96 },
  { name: "Mai", rate: 95 },
  { name: "Jun", rate: 97 },
  { name: "Jul", rate: 96 },
]

const responseTimeData = [
  { name: "Jan", time: 1.5 },
  { name: "Fev", time: 1.4 },
  { name: "Mar", time: 1.3 },
  { name: "Abr", time: 1.2 },
  { name: "Mai", time: 1.3 },
  { name: "Jun", time: 1.1 },
  { name: "Jul", time: 1.2 },
]

const transactionsData = [
  { name: "Jan", count: 1500 },
  { name: "Fev", count: 1700 },
  { name: "Mar", count: 1800 },
  { name: "Abr", count: 2000 },
  { name: "Mai", count: 1900 },
  { name: "Jun", count: 2100 },
  { name: "Jul", count: 2200 },
]

const errorTypesData = [
  { name: "Conexão", value: 45 },
  { name: "Validação", value: 30 },
  { name: "Timeout", value: 15 },
  { name: "Outros", value: 10 },
]

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"]

export function AgentPerformance({ agent }: AgentPerformanceProps) {
  const [timeRange, setTimeRange] = useState("7d")

  return (
    <div className="space-y-6">
      <div className="flex justify-between">
        <h2 className="text-2xl font-bold tracking-tight">Desempenho do Agente</h2>
        <Select value={timeRange} onValueChange={setTimeRange}>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Período" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="24h">Últimas 24 horas</SelectItem>
            <SelectItem value="7d">Últimos 7 dias</SelectItem>
            <SelectItem value="30d">Últimos 30 dias</SelectItem>
            <SelectItem value="90d">Últimos 90 dias</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Taxa de Sucesso</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{agent.successRate}%</div>
            <p className="text-xs text-muted-foreground">+2.1% em relação ao mês anterior</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Tempo de Resposta</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{agent.averageResponseTime}s</div>
            <p className="text-xs text-muted-foreground">-0.1s em relação ao mês anterior</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total de Transações</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{agent.totalTransactions.toLocaleString("pt-BR")}</div>
            <p className="text-xs text-muted-foreground">+8.2% em relação ao mês anterior</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Uso de Recursos</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">68%</div>
            <p className="text-xs text-muted-foreground">-5% em relação ao mês anterior</p>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="success-rate" className="w-full">
        <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
          <TabsTrigger value="success-rate">Taxa de Sucesso</TabsTrigger>
          <TabsTrigger value="response-time">Tempo de Resposta</TabsTrigger>
          <TabsTrigger value="transactions">Transações</TabsTrigger>
          <TabsTrigger value="errors">Erros</TabsTrigger>
        </TabsList>

        <TabsContent value="success-rate" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Taxa de Sucesso ao Longo do Tempo</CardTitle>
            </CardHeader>
            <CardContent className="pt-4">
              <div className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                    data={successRateData}
                    margin={{
                      top: 5,
                      right: 30,
                      left: 20,
                      bottom: 5,
                    }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="name" />
                    <YAxis domain={[90, 100]} />
                    <Tooltip />
                    <Line type="monotone" dataKey="rate" stroke="#8884d8" activeDot={{ r: 8 }} />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="response-time" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Tempo de Resposta ao Longo do Tempo</CardTitle>
            </CardHeader>
            <CardContent className="pt-4">
              <div className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                    data={responseTimeData}
                    margin={{
                      top: 5,
                      right: 30,
                      left: 20,
                      bottom: 5,
                    }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Line type="monotone" dataKey="time" stroke="#82ca9d" activeDot={{ r: 8 }} />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="transactions" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Transações por Mês</CardTitle>
            </CardHeader>
            <CardContent className="pt-4">
              <div className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart
                    data={transactionsData}
                    margin={{
                      top: 5,
                      right: 30,
                      left: 20,
                      bottom: 5,
                    }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="count" fill="#8884d8" />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="errors" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Distribuição de Erros por Tipo</CardTitle>
            </CardHeader>
            <CardContent className="pt-4">
              <div className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie
                      data={errorTypesData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {errorTypesData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-settings.tsx" isEdit="true" isMerged="true"
"use client"

import type 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 { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"

interface AgentSettingsProps {
  agent: any // Em uma aplicação real, isso seria tipado adequadamente
}

export function AgentSettings({ agent }: AgentSettingsProps) {
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [settings, setSettings] = useState({
    name: agent.name,
    description: agent.description,
    model: agent.model,
    temperature: 0.7,
    maxTokens: 2048,
    enableLogging: true,
    enableAnalytics: true,
    enableCompliance: true,
    retryAttempts: 3,
    timeout: 30,
  })

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

  const handleSelectChange = (name: string, value: string) => {
    setSettings((prev) => ({ ...prev, [name]: value }))
  }

  const handleSliderChange = (name: string, value: number[]) => {
    setSettings((prev) => ({ ...prev, [name]: value[0] }))
  }

  const handleSwitchChange = (name: string, checked: boolean) => {
    setSettings((prev) => ({ ...prev, [name]: checked }))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

    try {
      // Simulação de envio de configurações
      await new Promise((resolve) => setTimeout(resolve, 1500))

      toast({
        title: "Configurações salvas",
        description: "As configurações do agente foram atualizadas com sucesso.",
      })
    } catch (error) {
      toast({
        title: "Erro ao salvar configurações",
        description: "Ocorreu um erro ao salvar as configurações do agente.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold tracking-tight">Configurações do Agente</h2>
        <p className="text-muted-foreground">
          Personalize as configurações do seu agente para otimizar seu desempenho.
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-8">
        <Card>
          <CardHeader>
            <CardTitle>Informações Básicas</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Nome do Agente</Label>
              <Input id="name" name="name" value={settings.name} onChange={handleChange} required />
            </div>
            <div className="space-y-2">
              <Label htmlFor="description">Descrição</Label>
              <Textarea
                id="description"
                name="description"
                value={settings.description}
                onChange={handleChange}
                rows={3}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="model">Modelo</Label>
              <Select value={settings.model} onValueChange={(value) => handleSelectChange("model", value)}>
                <SelectTrigger id="model">
                  <SelectValue placeholder="Selecione um modelo" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="GPT-4">GPT-4</SelectItem>
                  <SelectItem value="GPT-3.5">GPT-3.5</SelectItem>
                  <SelectItem value="Claude 2">Claude 2</SelectItem>
                  <SelectItem value="Llama 2">Llama 2</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Configurações do Modelo</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <Label htmlFor="temperature">Temperatura: {settings.temperature}</Label>
                <span className="w-12 text-right text-sm text-muted-foreground">{settings.temperature}</span>
              </div>
              <Slider
                id="temperature"
                min={0}
                max={1}
                step={0.1}
                value={[settings.temperature]}
                onValueChange={(value) => handleSliderChange("temperature", value)}
              />
              <p className="text-xs text-muted-foreground">
                Controla a aleatoriedade das respostas. Valores mais baixos resultam em respostas mais determinísticas.
              </p>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <Label htmlFor="maxTokens">Máximo de Tokens</Label>
                <span className="w-12 text-right text-sm text-muted-foreground">{settings.maxTokens}</span>
              </div>
              <Slider
                id="maxTokens"
                min={256}
                max={4096}
                step={256}
                value={[settings.maxTokens]}
                onValueChange={(value) => handleSliderChange("maxTokens", value)}
              />
              <p className="text-xs text-muted-foreground">Limite máximo de tokens para as respostas do modelo.</p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="retryAttempts">Tentativas de Retry</Label>
              <Input
                id="retryAttempts"
                name="retryAttempts"
                type="number"
                min={0}
                max={10}
                value={settings.retryAttempts}
                onChange={handleChange}
              />
              <p className="text-xs text-muted-foreground">Número de tentativas em caso de falha.</p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="timeout">Timeout (segundos)</Label>
              <Input
                id="timeout"
                name="timeout"
                type="number"
                min={5}
                max={120}
                value={settings.timeout}
                onChange={handleChange}
              />
              <p className="text-xs text-muted-foreground">Tempo máximo de espera para respostas do modelo.</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Recursos Adicionais</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="enableLogging">Habilitar Logging</Label>
                <p className="text-sm text-muted-foreground">Registra todas as interações do agente para auditoria.</p>
              </div>
              <Switch
                id="enableLogging"
                checked={settings.enableLogging}
                onCheckedChange={(checked) => handleSwitchChange("enableLogging", checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="enableAnalytics">Habilitar Analytics</Label>
                <p className="text-sm text-muted-foreground">Coleta métricas de desempenho para análise.</p>
              </div>
              <Switch
                id="enableAnalytics"
                checked={settings.enableAnalytics}
                onCheckedChange={(checked) => handleSwitchChange("enableAnalytics", checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="enableCompliance">Verificação de Conformidade</Label>
                <p className="text-sm text-muted-foreground">Verifica conformidade com LGPD/GDPR automaticamente.</p>
              </div>
              <Switch
                id="enableCompliance"
                checked={settings.enableCompliance}
                onCheckedChange={(checked) => handleSwitchChange("enableCompliance", checked)}
              />
            </div>
          </CardContent>
        </Card>

        <div className="flex justify-end">
          <Button type="submit" disabled={isSubmitting}>
            {isSubmitting ? "Salvando..." : "Salvar Configurações"}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-tools.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Plus, Trash2, Settings, RefreshCw } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface AgentToolsProps {
  agent: any // Em uma aplicação real, isso seria tipado adequadamente
}

export function AgentTools({ agent }: AgentToolsProps) {
  const { toast } = useToast()
  const [tools, setTools] = useState(agent.tools || [])
  const [isAddingTool, setIsAddingTool] = useState(false)
  const [newTool, setNewTool] = useState({
    name: "",
    type: "api",
    endpoint: "",
    authType: "none",
    apiKey: "",
    username: "",
    password: "",
  })

  const handleAddTool = () => {
    if (!newTool.name) {
      toast({
        title: "Nome obrigatório",
        description: "Por favor, forneça um nome para a ferramenta.",
        variant: "destructive",
      })
      return
    }

    const id = `t${tools.length + 1}`
    setTools([...tools, { id, ...newTool, status: "connected" }])
    setIsAddingTool(false)
    setNewTool({
      name: "",
      type: "api",
      endpoint: "",
      authType: "none",
      apiKey: "",
      username: "",
      password: "",
    })

    toast({
      title: "Ferramenta adicionada",
      description: `A ferramenta "${newTool.name}" foi adicionada com sucesso.`,
    })
  }

  const handleDeleteTool = (id: string, name: string) => {
    setTools(tools.filter((tool: any) => tool.id !== id))
    toast({
      title: "Ferramenta removida",
      description: `A ferramenta "${name}" foi removida com sucesso.`,
    })
  }

  const handleReconnectTool = (id: string, name: string) => {
    toast({
      title: "Reconectando ferramenta",
      description: `Reconectando à ferramenta "${name}"...`,
    })

    // Simulação de reconexão
    setTimeout(() => {
      toast({
        title: "Ferramenta reconectada",
        description: `A ferramenta "${name}" foi reconectada com sucesso.`,
      })
    }, 1500)
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "connected":
        return <Badge className="bg-green-500">Conectado</Badge>
      case "disconnected":
        return <Badge variant="outline">Desconectado</Badge>
      case "error":
        return <Badge variant="destructive">Erro</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

  const getToolTypeLabel = (type: string) => {
    switch (type) {
      case "api":
        return "API"
      case "database":
        return "Banco de Dados"
      case "service":
        return "Serviço"
      case "custom":
        return "Personalizado"
      default:
        return type
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Ferramentas do Agente</h2>
          <p className="text-muted-foreground">Gerencie as ferramentas e integrações disponíveis para este agente.</p>
        </div>
        <Dialog open={isAddingTool} onOpenChange={setIsAddingTool}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" /> Adicionar Ferramenta
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>Adicionar Nova Ferramenta</DialogTitle>
              <DialogDescription>Configure uma nova ferramenta para o agente utilizar.</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="name">Nome da Ferramenta</Label>
                <Input
                  id="name"
                  value={newTool.name}
                  onChange={(e) => setNewTool({ ...newTool, name: e.target.value })}
                  placeholder="Ex: API de Pagamentos"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="type">Tipo</Label>
                <Select value={newTool.type} onValueChange={(value) => setNewTool({ ...newTool, type: value })}>
                  <SelectTrigger id="type">
                    <SelectValue placeholder="Selecione o tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="api">API</SelectItem>
                    <SelectItem value="database">Banco de Dados</SelectItem>
                    <SelectItem value="service">Serviço</SelectItem>
                    <SelectItem value="custom">Personalizado</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="endpoint">Endpoint</Label>
                <Input
                  id="endpoint"
                  value={newTool.endpoint}
                  onChange={(e) => setNewTool({ ...newTool, endpoint: e.target.value })}
                  placeholder="https://api.exemplo.com/v1"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="authType">Tipo de Autenticação</Label>
                <Select value={newTool.authType} onValueChange={(value) => setNewTool({ ...newTool, authType: value })}>
                  <SelectTrigger id="authType">
                    <SelectValue placeholder="Selecione o tipo de autenticação" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">Nenhuma</SelectItem>
                    <SelectItem value="apiKey">API Key</SelectItem>
                    <SelectItem value="basic">Basic Auth</SelectItem>
                    <SelectItem value="oauth">OAuth</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              {newTool.authType === "apiKey" && (
                <div className="space-y-2">
                  <Label htmlFor="apiKey">API Key</Label>
                  <Input
                    id="apiKey"
                    type="password"
                    value={newTool.apiKey}
                    onChange={(e) => setNewTool({ ...newTool, apiKey: e.target.value })}
                    placeholder="Sua API Key"
                  />
                </div>
              )}
              {newTool.authType === "basic" && (
                <>
                  <div className="space-y-2">
                    <Label htmlFor="username">Usuário</Label>
                    <Input
                      id="username"
                      value={newTool.username}
                      onChange={(e) => setNewTool({ ...newTool, username: e.target.value })}
                      placeholder="Usuário"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="password">Senha</Label>
                    <Input
                      id="password"
                      type="password"
                      value={newTool.password}
                      onChange={(e) => setNewTool({ ...newTool, password: e.target.value })}
                      placeholder="Senha"
                    />
                  </div>
                </>
              )}
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddingTool(false)}>
                Cancelar
              </Button>
              <Button onClick={handleAddTool}>Adicionar</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {tools.map((tool: any) => (
          <Card key={tool.id}>
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <CardTitle>{tool.name}</CardTitle>
                {getStatusBadge(tool.status)}
              </div>
              <CardDescription>{getToolTypeLabel(tool.type)}</CardDescription>
            </CardHeader>
            <CardContent>
              {tool.endpoint && (
                <div className="mb-2 text-sm">
                  <span className="font-medium">Endpoint:</span>{" "}
                  <span className="text-muted-foreground">{tool.endpoint}</span>
                </div>
              )}
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium">Habilitado</span>
                <Switch defaultChecked />
              </div>
            </CardContent>
            <CardFooter className="flex justify-end gap-2">
              <Button variant="outline" size="sm" onClick={() => handleReconnectTool(tool.id, tool.name)}>
                <RefreshCw className="mr-2 h-4 w-4" /> Reconectar
              </Button>
              <Button variant="outline" size="sm">
                <Settings className="mr-2 h-4 w-4" /> Configurar
              </Button>
              <Button
                variant="outline"
                size="sm"
                className="text-red-600 hover:bg-red-100 hover:text-red-700 dark:hover:bg-red-900 dark:hover:text-red-400"
                onClick={() => handleDeleteTool(tool.id, tool.name)}
              >
                <Trash2 className="mr-2 h-4 w-4" /> Remover
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

      {tools.length === 0 && (
        <div className="flex h-[200px] flex-col items-center justify-center rounded-lg border border-dashed">
          <p className="mb-2 text-sm text-muted-foreground">Nenhuma ferramenta configurada</p>
          <Button variant="outline" size="sm" onClick={() => setIsAddingTool(true)}>
            <Plus className="mr-2 h-4 w-4" /> Adicionar Ferramenta
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-integrations.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Plus, Trash2, Settings, ExternalLink } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface AgentIntegrationsProps {
  agent: any // Em uma aplicação real, isso seria tipado adequadamente
}

export function AgentIntegrations({ agent }: AgentIntegrationsProps) {
  const { toast } = useToast()
  const [integrations, setIntegrations] = useState(agent.integrations || [])
  const [isAddingIntegration, setIsAddingIntegration] = useState(false)
  const [newIntegration, setNewIntegration] = useState({
    name: "",
    type: "erp",
    description: "",
    apiKey: "",
    webhookUrl: "",
  })

  const handleAddIntegration = () => {
    if (!newIntegration.name) {
      toast({
        title: "Nome obrigatório",
        description: "Por favor, forneça um nome para a integração.",
        variant: "destructive",
      })
      return
    }

    const id = `i${integrations.length + 1}`
    setIntegrations([...integrations, { id, ...newIntegration, status: "active" }])
    setIsAddingIntegration(false)
    setNewIntegration({
      name: "",
      type: "erp",
      description: "",
      apiKey: "",
      webhookUrl: "",
    })

    toast({
      title: "Integração adicionada",
      description: `A integração "${newIntegration.name}" foi adicionada com sucesso.`,
    })
  }

  const handleDeleteIntegration = (id: string, name: string) => {
    setIntegrations(integrations.filter((integration: any) => integration.id !== id))
    toast({
      title: "Integração removida",
      description: `A integração "${name}" foi removida com sucesso.`,
    })
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-500">Ativo</Badge>
      case "inactive":
        return <Badge variant="outline">Inativo</Badge>
      case "error":
        return <Badge variant="destructive">Erro</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

  const getIntegrationTypeLabel = (type: string) => {
    switch (type) {
      case "erp":
        return "ERP"
      case "crm":
        return "CRM"
      case "payment":
        return "Pagamento"
      case "analytics":
        return "Analytics"
      default:
        return type
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Integrações do Agente</h2>
          <p className="text-muted-foreground">Gerencie as integrações com sistemas externos.</p>
        </div>
        <Dialog open={isAddingIntegration} onOpenChange={setIsAddingIntegration}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" /> Adicionar Integração
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>Adicionar Nova Integração</DialogTitle>
              <DialogDescription>Configure uma nova integração com sistemas externos.</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="name">Nome da Integração</Label>
                <Input
                  id="name"
                  value={newIntegration.name}
                  onChange={(e) => setNewIntegration({ ...newIntegration, name: e.target.value })}
                  placeholder="Ex: ERP Solar"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="type">Tipo</Label>
                <Select
                  value={newIntegration.type}
                  onValueChange={(value) => setNewIntegration({ ...newIntegration, type: value })}
                >
                  <SelectTrigger id="type">
                    <SelectValue placeholder="Selecione o tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="erp">ERP</SelectItem>
                    <SelectItem value="crm">CRM</SelectItem>
                    <SelectItem value="payment">Pagamento</SelectItem>
                    <SelectItem value="analytics">Analytics</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="description">Descrição</Label>
                <Textarea
                  id="description"
                  value={newIntegration.description}
                  onChange={(e) => setNewIntegration({ ...newIntegration, description: e.target.value })}
                  placeholder="Descreva a finalidade desta integração"
                  rows={3}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="apiKey">API Key</Label>
                <Input
                  id="apiKey"
                  type="password"
                  value={newIntegration.apiKey}
                  onChange={(e) => setNewIntegration({ ...newIntegration, apiKey: e.target.value })}
                  placeholder="Sua API Key"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="webhookUrl">URL de Webhook (opcional)</Label>
                <Input
                  id="webhookUrl"
                  value={newIntegration.webhookUrl}
                  onChange={(e) => setNewIntegration({ ...newIntegration, webhookUrl: e.target.value })}
                  placeholder="https://seu-sistema.com/webhook"
                />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddingIntegration(false)}>
                Cancelar
              </Button>
              <Button onClick={handleAddIntegration}>Adicionar</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {integrations.map((integration: any) => (
          <Card key={integration.id}>
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <CardTitle>{integration.name}</CardTitle>
                {getStatusBadge(integration.status)}
              </div>
              <CardDescription>{getIntegrationTypeLabel(integration.type)}</CardDescription>
            </CardHeader>
            <CardContent>
              {integration.description && (
                <p className="mb-4 text-sm text-muted-foreground">{integration.description}</p>
              )}
              {integration.webhookUrl && (
                <div className="mb-2 text-sm">
                  <span className="font-medium">Webhook:</span>{" "}
                  <span className="text-muted-foreground">{integration.webhookUrl}</span>
                </div>
              )}
            </CardContent>
            <CardFooter className="flex justify-end gap-2">
              <Button variant="outline" size="sm">
                <ExternalLink className="mr-2 h-4 w-4" /> Abrir
              </Button>
              <Button variant="outline" size="sm">
                <Settings className="mr-2 h-4 w-4" /> Configurar
              </Button>
              <Button
                variant="outline"
                size="sm"
                className="text-red-600 hover:bg-red-100 hover:text-red-700 dark:hover:bg-red-900 dark:hover:text-red-400"
                onClick={() => handleDeleteIntegration(integration.id, integration.name)}
              >
                <Trash2 className="mr-2 h-4 w-4" /> Remover
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

      {integrations.length === 0 && (
        <div className="flex h-[200px] flex-col items-center justify-center rounded-lg border border-dashed">
          <p className="mb-2 text-sm text-muted-foreground">Nenhuma integração configurada</p>
          <Button variant="outline" size="sm" onClick={() => setIsAddingIntegration(true)}>
            <Plus className="mr-2 h-4 w-4" /> Adicionar Integração
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-prompts.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Plus, Trash2, Edit, Copy } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface AgentPromptsProps {
  agent: any // Em uma aplicação real, isso seria tipado adequadamente
}

export function AgentPrompts({ agent }: AgentPromptsProps) {
  const { toast } = useToast()
  const [prompts, setPrompts] = useState(agent.prompts || [])
  const [isAddingPrompt, setIsAddingPrompt] = useState(false)
  const [isEditingPrompt, setIsEditingPrompt] = useState(false)
  const [currentPrompt, setCurrentPrompt] = useState<any>(null)
  const [newPrompt, setNewPrompt] = useState({
    name: "",
    content: "",
  })

  const handleAddPrompt = () => {
    if (!newPrompt.name || !newPrompt.content) {
      toast({
        title: "Campos obrigatórios",
        description: "Por favor, preencha todos os campos.",
        variant: "destructive",
      })
      return
    }

    const id = `p${prompts.length + 1}`
    setPrompts([...prompts, { id, ...newPrompt }])
    setIsAddingPrompt(false)
    setNewPrompt({
      name: "",
      content: "",
    })

    toast({
      title: "Prompt adicionado",
      description: `O prompt "${newPrompt.name}" foi adicionado com sucesso.`,
    })
  }

  const handleEditPrompt = () => {
    if (!currentPrompt.name || !currentPrompt.content) {
      toast({
        title: "Campos obrigatórios",
        description: "Por favor, preencha todos os campos.",
        variant: "destructive",
      })
      return
    }

    setPrompts(prompts.map((prompt: any) => (prompt.id === currentPrompt.id ? currentPrompt : prompt)))
    setIsEditingPrompt(false)
    setCurrentPrompt(null)

    toast({
      title: "Prompt atualizado",
      description: `O prompt "${currentPrompt.name}" foi atualizado com sucesso.`,
    })
  }

  const handleDeletePrompt = (id: string, name: string) => {
    setPrompts(prompts.filter((prompt: any) => prompt.id !== id))
    toast({
      title: "Prompt removido",
      description: `O prompt "${name}" foi removido com sucesso.`,
    })
  }

  const handleCopyPrompt = (content: string) => {
    navigator.clipboard.writeText(content)
    toast({
      title: "Prompt copiado",
      description: "O conteúdo do prompt foi copiado para a área de transferência.",
    })
  }

  const startEditPrompt = (prompt: any) => {
    setCurrentPrompt(prompt)
    setIsEditingPrompt(true)
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Prompts do Agente</h2>
          <p className="text-muted-foreground">Gerencie os prompts utilizados pelo agente para diferentes tarefas.</p>
        </div>
        <Dialog open={isAddingPrompt} onOpenChange={setIsAddingPrompt}>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" /> Adicionar Prompt
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>Adicionar Novo Prompt</DialogTitle>
              <DialogDescription>Crie um novo prompt para o agente utilizar em tarefas específicas.</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="name">Nome do Prompt</Label>
                <Input
                  id="name"
                  value={newPrompt.name}
                  onChange={(e) => setNewPrompt({ ...newPrompt, name: e.target.value })}
                  placeholder="Ex: Processamento de Pagamento"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="content">Conteúdo do Prompt</Label>
                <Textarea
                  id="content"
                  value={newPrompt.content}
                  onChange={(e) => setNewPrompt({ ...newPrompt, content: e.target.value })}
                  placeholder="Escreva o conteúdo do prompt aqui. Use {variáveis} para valores dinâmicos."
                  rows={8}
                  className="font-mono text-sm"
                />
              </div>
              <div className="text-sm text-muted-foreground">
                <p>Dicas:</p>
                <ul className="ml-6 list-disc">
                  <li>Use {"{variáveis}"} para valores que serão substituídos dinamicamente.</li>
                  <li>Seja específico sobre o que o agente deve fazer.</li>
                  <li>Inclua exemplos quando possível.</li>
                </ul>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsAddingPrompt(false)}>
                Cancelar
              </Button>
              <Button onClick={handleAddPrompt}>Adicionar</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <Dialog open={isEditingPrompt} onOpenChange={setIsEditingPrompt}>
        {currentPrompt && (
          <DialogContent className="sm:max-w-[600px]">
            <DialogHeader>
              <DialogTitle>Editar Prompt</DialogTitle>
              <DialogDescription>Modifique o prompt existente.</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="edit-name">Nome do Prompt</Label>
                <Input
                  id="edit-name"
                  value={currentPrompt.name}
                  onChange={(e) => setCurrentPrompt({ ...currentPrompt, name: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-content">Conteúdo do Prompt</Label>
                <Textarea
                  id="edit-content"
                  value={currentPrompt.content}
                  onChange={(e) => setCurrentPrompt({ ...currentPrompt, content: e.target.value })}
                  rows={8}
                  className="font-mono text-sm"
                />
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsEditingPrompt(false)}>
                Cancelar
              </Button>
              <Button onClick={handleEditPrompt}>Salvar Alterações</Button>
            </DialogFooter>
          </DialogContent>
        )}
      </Dialog>

      <div className="grid gap-6 md:grid-cols-2">
        {prompts.map((prompt: any) => (
          <Card key={prompt.id}>
            <CardHeader className="pb-2">
              <CardTitle>{prompt.name}</CardTitle>
              <CardDescription>Prompt ID: {prompt.id}</CardDescription>
            </CardHeader>
            <CardContent>
              <pre className="max-h-[150px] overflow-auto rounded-md bg-muted p-4 font-mono text-sm">
                {prompt.content}
              </pre>
            </CardContent>
            <CardFooter className="flex justify-end gap-2">
              <Button variant="outline" size="sm" onClick={() => handleCopyPrompt(prompt.content)}>
                <Copy className="mr-2 h-4 w-4" /> Copiar
              </Button>
              <Button variant="outline" size="sm" onClick={() => startEditPrompt(prompt)}>
                <Edit className="mr-2 h-4 w-4" /> Editar
              </Button>
              <Button
                variant="outline"
                size="sm"
                className="text-red-600 hover:bg-red-100 hover:text-red-700 dark:hover:bg-red-900 dark:hover:text-red-400"
                onClick={() => handleDeletePrompt(prompt.id, prompt.name)}
              >
                <Trash2 className="mr-2 h-4 w-4" /> Remover
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

      {prompts.length === 0 && (
        <div className="flex h-[200px] flex-col items-center justify-center rounded-lg border border-dashed">
          <p className="mb-2 text-sm text-muted-foreground">Nenhum prompt configurado</p>
          <Button variant="outline" size="sm" onClick={() => setIsAddingPrompt(true)}>
            <Plus className="mr-2 h-4 w-4" /> Adicionar Prompt
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-logs.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Search, Download, RefreshCw, AlertTriangle, Info, AlertCircle } from "lucide-react"

interface AgentLogsProps {
  agent: any // Em uma aplicação real, isso seria tipado adequadamente
}

export function AgentLogs({ agent }: AgentLogsProps) {
  const [logs, setLogs] = useState(agent.logs || [])
  const [searchTerm, setSearchTerm] = useState("")
  const [logLevel, setLogLevel] = useState<string | undefined>(undefined)
  const [isRefreshing, setIsRefreshing] = useState(false)

  const filteredLogs = logs.filter((log: any) => {
    const matchesSearch = searchTerm ? log.message.toLowerCase().includes(searchTerm.toLowerCase()) : true
    const matchesLevel = logLevel ? log.level === logLevel : true
    return matchesSearch && matchesLevel
  })

  const refreshLogs = () => {
    setIsRefreshing(true)
    // Simulação de atualização de logs
    setTimeout(() => {
      setIsRefreshing(false)
    }, 1000)
  }

  const downloadLogs = () => {
    const logsText = logs
      .map((log: any) => `[${new Date(log.timestamp).toISOString()}] [${log.level.toUpperCase()}] ${log.message}`)
      .join("\n")
    const blob = new Blob([logsText], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `agent-${agent.id}-logs.txt`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

  const formatTimestamp = (timestamp: string) => {
    const date = new Date(timestamp)
    return new Intl.DateTimeFormat("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    }).format(date)
  }

  const getLevelBadge = (level: string) => {
    switch (level) {
      case "info":
        return (
          <Badge variant="outline" className="bg-blue-500 text-white">
            <Info className="mr-1 h-3 w-3" /> Info
          </Badge>
        )
      case "warning":
        return (
          <Badge variant="outline" className="bg-yellow-500 text-white">
            <AlertTriangle className="mr-1 h-3 w-3" /> Aviso
          </Badge>
        )
      case "error":
        return (
          <Badge variant="destructive">
            <AlertCircle className="mr-1 h-3 w-3" /> Erro
          </Badge>
        )
      default:
        return <Badge variant="secondary">{level}</Badge>
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Logs do Agente</h2>
          <p className="text-muted-foreground">Visualize e analise os logs de atividade do agente.</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={refreshLogs} disabled={isRefreshing}>
            <RefreshCw className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
            Atualizar
          </Button>
          <Button variant="outline" size="sm" onClick={downloadLogs}>
            <Download className="mr-2 h-4 w-4" /> Baixar Logs
          </Button>
        </div>
      </div>

      <div className="flex flex-col gap-4 md:flex-row">
        <div className="relative flex-1">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar nos logs..."
            className="pl-8"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
        <Select value={logLevel} onValueChange={setLogLevel}>
          <SelectTrigger className="w-full md:w-[180px]">
            <SelectValue placeholder="Nível de Log" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="info">Info</SelectItem>
            <SelectItem value="warning">Aviso</SelectItem>
            <SelectItem value="error">Erro</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="rounded-md border">
        <ScrollArea className="h-[500px] w-full">
          <div className="p-4">
            {filteredLogs.length > 0 ? (
              <div className="space-y-4">
                {filteredLogs.map((log: any) => (
                  <div key={log.id} className="rounded-md border p-3">
                    <div className="mb-2 flex items-center justify-between">
                      <div>{getLevelBadge(log.level)}</div>
                      <div className="text-sm text-muted-foreground">{formatTimestamp(log.timestamp)}</div>
                    </div>
                    <p className="text-sm">{log.message}</p>
                  </div>
                ))}
              </div>
            ) : (
              <div className="flex h-[400px] flex-col items-center justify-center">
                <p className="text-muted-foreground">Nenhum log encontrado com os filtros atuais.</p>
              </div>
            )}
          </div>
        </ScrollArea>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-compliance.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { CheckCircle2, AlertTriangle, RefreshCw, Shield, FileText } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface AgentComplianceProps {
  agent: any // Em uma aplicação real, isso seria tipado adequadamente
}

export function AgentCompliance({ agent }: AgentComplianceProps) {
  const { toast } = useToast()
  const [isScanning, setIsScanning] = useState(false)

  const runComplianceScan = () => {
    setIsScanning(true)
    toast({
      title: "Verificação iniciada",
      description: "A verificação de conformidade está em andamento.",
    })

    // Simulação de verificação
    setTimeout(() => {
      setIsScanning(false)
      toast({
        title: "Verificação concluída",
        description: "A verificação de conformidade foi concluída com sucesso.",
      })
    }, 3000)
  }

  const downloadReport = (type: string) => {
    toast({
      title: "Relatório baixado",
      description: `O relatório de conformidade ${type} foi baixado com sucesso.`,
    })
  }

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date)
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "compliant":
        return (
          <Badge className="bg-green-500">
            <CheckCircle2 className="mr-1 h-3 w-3" /> Conforme
          </Badge>
        )
      case "partial":
        return (
          <Badge variant="outline" className="bg-yellow-500 text-white">
            <AlertTriangle className="mr-1 h-3 w-3" /> Parcial
          </Badge>
        )
      case "non-compliant":
        return (
          <Badge variant="destructive">
            <AlertTriangle className="mr-1 h-3 w-3" /> Não Conforme
          </Badge>
        )
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Conformidade do Agente</h2>
          <p className="text-muted-foreground">Monitore e gerencie a conformidade do agente com regulamentações.</p>
        </div>
        <Button onClick={runComplianceScan} disabled={isScanning}>
          <RefreshCw className={`mr-2 h-4 w-4 ${isScanning ? "animate-spin" : ""}`} />
          {isScanning ? "Verificando..." : "Verificar Conformidade"}
        </Button>
      </div>

      <div className="grid gap-6 md:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">LGPD</CardTitle>
              {getStatusBadge(agent.compliance.lgpd.status)}
            </div>
          </CardHeader>
          <CardContent>
            <div className="mt-2">
              <div className="mb-1 flex items-center justify-between text-sm">
                <span>Conformidade</span>
                <span className="font-medium">100%</span>
              </div>
              <Progress value={100} className="h-2" />
            </div>
            <p className="mt-2 text-xs text-muted-foreground">
              Última verificação: {formatDate(agent.compliance.lgpd.lastCheck)}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">GDPR</CardTitle>
              {getStatusBadge(agent.compliance.gdpr.status)}
            </div>
          </CardHeader>
          <CardContent>
            <div className="mt-2">
              <div className="mb-1 flex items-center justify-between text-sm">
                <span>Conformidade</span>
                <span className="font-medium">100%</span>
              </div>
              <Progress value={100} className="h-2" />
            </div>
            <p className="mt-2 text-xs text-muted-foreground">
              Última verificação: {formatDate(agent.compliance.gdpr.lastCheck)}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">PCI DSS</CardTitle>
              {getStatusBadge(agent.compliance.pci.status)}
            </div>
          </CardHeader>
          <CardContent>
            <div className="mt-2">
              <div className="mb-1 flex items-center justify-between text-sm">
                <span>Conformidade</span>
                <span className="font-medium">100%</span>
              </div>
              <Progress value={100} className="h-2" />
            </div>
            <p className="mt-2 text-xs text-muted-foreground">
              Última verificação: {formatDate(agent.compliance.pci.lastCheck)}
            </p>
          </CardContent>
        </Card>
      </div>

      <Alert>
        <Shield className="h-4 w-4" />
        <AlertTitle>Conformidade Verificada</AlertTitle>
        <AlertDescription>
          Este agente está em conformidade com todas as regulamentações aplicáveis. A próxima verificação automática
          está agendada para 10/05/2023.
        </AlertDescription>
      </Alert>

      <Tabs defaultValue="lgpd" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="lgpd">LGPD</TabsTrigger>
          <TabsTrigger value="gdpr">GDPR</TabsTrigger>
          <TabsTrigger value="pci">PCI DSS</TabsTrigger>
        </TabsList>

        <TabsContent value="lgpd" className="mt-6 space-y-4">
          <div className="rounded-md border p-4">
            <h3 className="mb-2 text-lg font-medium">Lei Geral de Proteção de Dados</h3>
            <p className="mb-4 text-muted-foreground">
              A LGPD estabelece regras sobre coleta, armazenamento, tratamento e compartilhamento de dados pessoais.
            </p>

            <div className="mb-4 space-y-2">
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Consentimento explícito para coleta de dados</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Minimização de dados</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Mecanismos de exclusão de dados</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Registro de operações de tratamento</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Medidas de segurança adequadas</span>
              </div>
            </div>

            <Button variant="outline" size="sm" onClick={() => downloadReport("LGPD")}>
              <FileText className="mr-2 h-4 w-4" /> Relatório Detalhado
            </Button>
          </div>
        </TabsContent>

        <TabsContent value="gdpr" className="mt-6 space-y-4">
          <div className="rounded-md border p-4">
            <h3 className="mb-2 text-lg font-medium">General Data Protection Regulation</h3>
            <p className="mb-4 text-muted-foreground">
              O GDPR é um regulamento da União Europeia sobre privacidade e proteção de dados pessoais.
            </p>

            <div className="mb-4 space-y-2">
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Base legal para processamento de dados</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Direito ao esquecimento</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Portabilidade de dados</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Notificação de violações de dados</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Avaliação de impacto na proteção de dados</span>
              </div>
            </div>

            <Button variant="outline" size="sm" onClick={() => downloadReport("GDPR")}>
              <FileText className="mr-2 h-4 w-4" /> Relatório Detalhado
            </Button>
          </div>
        </TabsContent>

        <TabsContent value="pci" className="mt-6 space-y-4">
          <div className="rounded-md border p-4">
            <h3 className="mb-2 text-lg font-medium">Payment Card Industry Data Security Standard</h3>
            <p className="mb-4 text-muted-foreground">
              O PCI DSS é um padrão de segurança para organizações que lidam com cartões de crédito.
            </p>

            <div className="mb-4 space-y-2">
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Ambiente de rede seguro</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Proteção de dados do titular do cartão</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Programa de gerenciamento de vulnerabilidades</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Medidas fortes de controle de acesso</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-green-500" />
                <span>Monitoramento e teste regulares</span>
              </div>
            </div>

            <Button variant="outline" size="sm" onClick={() => downloadReport("PCI DSS")}>
              <FileText className="mr-2 h-4 w-4" /> Relatório Detalhado
            </Button>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/agents/new/page.tsx" isEdit="true" isMerged="true"
import { AgentCreationWizard } from "@/components/agents/agent-creation-wizard"

export default function NewAgentPage() {
  return (
    <div className="container py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold tracking-tight">Criar Novo Agente</h1>
        <p className="mt-1 text-muted-foreground">Configure um novo agente autônomo para sua plataforma.</p>
      </div>

      <AgentCreationWizard />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-creation-wizard.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { BasicInfoStep } from "@/components/agents/wizard-steps/basic-info-step"
import { ModelSelectionStep } from "@/components/agents/wizard-steps/model-selection-step"
import { PromptsStep } from "@/components/agents/wizard-steps/prompts-step"
import { useToast } from "@/hooks/use-toast"
import { CheckCircle, ArrowLeft, ArrowRight } from "lucide-react"

export function AgentCreationWizard() {
  const router = useRouter()
  const { toast } = useToast()
  const [currentStep, setCurrentStep] = useState(0)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [agentData, setAgentData] = useState({
    name: "",
    description: "",
    type: "payment",
    model: "GPT-4",
    temperature: 0.7,
    maxTokens: 2048,
    prompts: [
      {
        id: "p1",
        name: "Processamento de Pagamento",
        content: "Processe o pagamento para o cliente {customer_name} no valor de {amount}.",
      },
    ],
  })

  const steps = [
    { id: "basic-info", title: "Informações Básicas" },
    { id: "model-selection", title: "Seleção de Modelo" },
    { id: "prompts", title: "Prompts" },
    { id: "review", title: "Revisão" },
  ]

  const updateAgentData = (data: Partial<typeof agentData>) => {
    setAgentData((prev) => ({ ...prev, ...data }))
  }

  const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep(currentStep + 1)
    }
  }

  const handleBack = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

  const handleSubmit = async () => {
    setIsSubmitting(true)

    try {
      // Simulação de criação de agente
      await new Promise((resolve) => setTimeout(resolve, 2000))

      toast({
        title: "Agente criado com sucesso",
        description: `O agente "${agentData.name}" foi criado e está pronto para uso.`,
      })

      router.push("/agents")
    } catch (error) {
      toast({
        title: "Erro ao criar agente",
        description: "Ocorreu um erro ao criar o agente. Por favor, tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  const renderStepContent = () => {
    switch (currentStep) {
      case 0:
        return <BasicInfoStep data={agentData} updateData={updateAgentData} />
      case 1:
        return <ModelSelectionStep data={agentData} updateData={updateAgentData} />
      case 2:
        return <PromptsStep data={agentData} updateData={updateAgentData} />
      case 3:
        return (
          <div className="space-y-6">
            <div>
              <h2 className="text-xl font-semibold">Revisão</h2>
              <p className="text-muted-foreground">Revise as informações do seu agente antes de criar.</p>
            </div>

            <div className="rounded-md border p-4">
              <div className="mb-4 grid gap-2 md:grid-cols-2">
                <div>
                  <h3 className="font-medium">Nome</h3>
                  <p>{agentData.name}</p>
                </div>
                <div>
                  <h3 className="font-medium">Tipo</h3>
                  <p>
                    {agentData.type === "payment"
                      ? "Pagamento"
                      : agentData.type === "support"
                        ? "Suporte"
                        : agentData.type === "analytics"
                          ? "Análise"
                          : "Recuperação"}
                  </p>
                </div>
                <div>
                  <h3 className="font-medium">Modelo</h3>
                  <p>{agentData.model}</p>
                </div>
                <div>
                  <h3 className="font-medium">Temperatura</h3>
                  <p>{agentData.temperature}</p>
                </div>
              </div>

              <div className="mb-4">
                <h3 className="font-medium">Descrição</h3>
                <p>{agentData.description}</p>
              </div>

              <div>
                <h3 className="font-medium">Prompts ({agentData.prompts.length})</h3>
                <ul className="mt-2 space-y-2">
                  {agentData.prompts.map((prompt) => (
                    <li key={prompt.id} className="rounded-md bg-muted p-2">
                      <div className="font-medium">{prompt.name}</div>
                      <div className="text-sm text-muted-foreground">
                        {prompt.content.length > 100 ? `${prompt.content.substring(0, 100)}...` : prompt.content}
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        )
      default:
        return null
    }
  }

  return (
    <div className="mx-auto max-w-3xl">
      <div className="mb-8">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            {steps.map((step, index) => (
              <div key={step.id} className="flex items-center">
                <div
                  className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${
                    index < currentStep
                      ? "bg-primary text-primary-foreground"
                      : index === currentStep
                        ? "border-2 border-primary bg-background text-foreground"
                        : "border border-input bg-background text-muted-foreground"
                  }`}
                >
                  {index < currentStep ? <CheckCircle className="h-4 w-4" /> : index + 1}
                </div>
                {index < steps.length - 1 && (
                  <div className={`h-1 w-10 ${index < currentStep ? "bg-primary" : "bg-border"}`} />
                )}
              </div>
            ))}
          </div>
          <div className="text-sm font-medium">
            Passo {currentStep + 1} de {steps.length}
          </div>
        </div>
        <div className="mt-2 text-center text-lg font-medium">{steps[currentStep].title}</div>
      </div>

      <Card className="p-6">
        {renderStepContent()}

        <div className="mt-8 flex justify-between">
          <Button variant="outline" onClick={handleBack} disabled={currentStep === 0}>
            <ArrowLeft className="mr-2 h-4 w-4" /> Voltar
          </Button>
          {currentStep < steps.length - 1 ? (
            <Button onClick={handleNext}>
              Próximo <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          ) : (
            <Button onClick={handleSubmit} disabled={isSubmitting}>
              {isSubmitting ? "Criando..." : "Criar Agente"}
            </Button>
          )}
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/wizard-steps/basic-info-step.tsx" isEdit="true" isMerged="true"
"use client"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface BasicInfoStepProps {
  data: any
  updateData: (data: any) => void
}

export function BasicInfoStep({ data, updateData }: BasicInfoStepProps) {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold">Informações Básicas</h2>
        <p className="text-muted-foreground">Forneça as informações básicas para o seu novo agente.</p>
      </div>

      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Nome do Agente *</Label>
          <Input
            id="name"
            value={data.name}
            onChange={(e) => updateData({ name: e.target.value })}
            placeholder="Ex: Agente de Processamento de Pagamentos"
            required
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="description">Descrição</Label>
          <Textarea
            id="description"
            value={data.description}
            onChange={(e) => updateData({ description: e.target.value })}
            placeholder="Descreva a finalidade e as capacidades deste agente"
            rows={4}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="type">Tipo de Agente *</Label>
          <Select value={data.type} onValueChange={(value) => updateData({ type: value })}>
            <SelectTrigger id="type">
              <SelectValue placeholder="Selecione o tipo de agente" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="payment">Pagamento</SelectItem>
              <SelectItem value="support">Suporte</SelectItem>
              <SelectItem value="analytics">Análise</SelectItem>
              <SelectItem value="recovery">Recuperação</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="rounded-md bg-muted p-4">
        <h3 className="mb-2 font-medium">Dicas:</h3>
        <ul className="ml-6 list-disc space-y-1 text-sm text-muted-foreground">
          <li>Escolha um nome descritivo que indique claramente a função do agente.</li>
          <li>Na descrição, inclua detalhes sobre o que o agente faz e como ele deve ser usado.</li>
          <li>O tipo de agente ajuda a categorizar e aplicar configurações padrão adequadas.</li>
        </ul>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/wizard-steps/model-selection-step.tsx" isEdit="true" isMerged="true"
"use client"

import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

interface ModelSelectionStepProps {
  data: any
  updateData: (data: any) => void
}

export function ModelSelectionStep({ data, updateData }: ModelSelectionStepProps) {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold">Seleção de Modelo</h2>
        <p className="text-muted-foreground">Escolha o modelo de IA e configure seus parâmetros.</p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">GPT-4</CardTitle>
            <CardDescription>Modelo mais avançado, ideal para tarefas complexas.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <div className="text-sm font-medium">Capacidades:</div>
                <ul className="text-xs text-muted-foreground">
                  <li>• Raciocínio complexo</li>
                  <li>• Compreensão contextual avançada</li>
                  <li>• Processamento de instruções detalhadas</li>
                </ul>
              </div>
              <div>
                <button
                  type="button"
                  className={`rounded-full p-2 ${
                    data.model === "GPT-4" ? "bg-primary text-primary-foreground" : "border border-input"
                  }`}
                  onClick={() => updateData({ model: "GPT-4" })}
                >
                  <span
                    className={`block h-3 w-3 rounded-full ${
                      data.model === "GPT-4" ? "bg-primary-foreground" : "bg-transparent"
                    }`}
                  ></span>
                </button>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">GPT-3.5</CardTitle>
            <CardDescription>Modelo balanceado, bom para a maioria das tarefas.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <div className="text-sm font-medium">Capacidades:</div>
                <ul className="text-xs text-muted-foreground">
                  <li>• Boa compreensão de contexto</li>
                  <li>• Respostas rápidas</li>
                  <li>• Custo-benefício</li>
                </ul>
              </div>
              <div>
                <button
                  type="button"
                  className={`rounded-full p-2 ${
                    data.model === "GPT-3.5" ? "bg-primary text-primary-foreground" : "border border-input"
                  }`}
                  onClick={() => updateData({ model: "GPT-3.5" })}
                >
                  <span
                    className={`block h-3 w-3 rounded-full ${
                      data.model === "GPT-3.5" ? "bg-primary-foreground" : "bg-transparent"
                    }`}
                  ></span>
                </button>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Claude 2</CardTitle>
            <CardDescription>Modelo da Anthropic, excelente para tarefas conversacionais.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <div className="text-sm font-medium">Capacidades:</div>
                <ul className="text-xs text-muted-foreground">
                  <li>• Conversas naturais</li>
                  <li>• Respostas detalhadas</li>
                  <li>• Boa compreensão de nuances</li>
                </ul>
              </div>
              <div>
                <button
                  type="button"
                  className={`rounded-full p-2 ${
                    data.model === "Claude 2" ? "bg-primary text-primary-foreground" : "border border-input"
                  }`}
                  onClick={() => updateData({ model: "Claude 2" })}
                >
                  <span
                    className={`block h-3 w-3 rounded-full ${
                      data.model === "Claude 2" ? "bg-primary-foreground" : "bg-transparent"
                    }`}
                  ></span>
                </button>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Llama 2</CardTitle>
            <CardDescription>Modelo open-source da Meta, bom para implantação local.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <div className="text-sm font-medium">Capacidades:</div>
                <ul className="text-xs text-muted-foreground">
                  <li>• Implantação on-premise</li>
                  <li>• Controle total</li>
                  <li>• Sem dependência de API externa</li>
                </ul>
              </div>
              <div>
                <button
                  type="button"
                  className={`rounded-full p-2 ${
                    data.model === "Llama 2" ? "bg-primary text-primary-foreground" : "border border-input"
                  }`}
                  onClick={() => updateData({ model: "Llama 2" })}
                >
                  <span
                    className={`block h-3 w-3 rounded-full ${
                      data.model === "Llama 2" ? "bg-primary-foreground" : "bg-transparent"
                    }`}
                  ></span>
                </button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="space-y-6">
        <div className="space-y-4">
          <div>
            <div className="mb-2 flex items-center justify-between">
              <Label htmlFor="temperature">Temperatura: {data.temperature}</Label>
              <span className="w-12 text-right text-sm text-muted-foreground">{data.temperature}</span>
            </div>
            <Slider
              id="temperature"
              min={0}
              max={1}
              step={0.1}
              value={[data.temperature]}
              onValueChange={(value) => updateData({ temperature: value[0] })}
            />
            <p className="mt-1 text-xs text-muted-foreground">
              Controla a aleatoriedade das respostas. Valores mais baixos resultam em respostas mais determinísticas.
            </p>
          </div>

          <div>
            <div className="mb-2 flex items-center justify-between">
              <Label htmlFor="maxTokens">Máximo de Tokens</Label>
              <span className="w-12 text-right text-sm text-muted-foreground">{data.maxTokens}</span>
            </div>
            <Slider
              id="maxTokens"
              min={256}
              max={4096}
              step={256}
              value={[data.maxTokens]}
              onValueChange={(value) => updateData({ maxTokens: value[0] })}
            />
            <p className="mt-1 text-xs text-muted-foreground">Limite máximo de tokens para as respostas do modelo.</p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/wizard-steps/prompts-step.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, Trash2, Edit } from "lucide-react"
import { Input } from "@/components/ui/input"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"

interface PromptsStepProps {
  data: any
  updateData: (data: any) => void
}

// Template prompts based on agent type
const promptTemplates = {
  llm: {
    system: `Você é um assistente especializado em análise de crédito e pagamentos solares. Sua função é ajudar os usuários a entender suas opções de financiamento, avaliar solicitações de crédito e responder dúvidas sobre pagamentos relacionados a energia solar.

Diretrizes:
1. Mantenha um tom profissional e amigável
2. Forneça informações precisas sobre produtos financeiros
3. Ao analisar solicitações de crédito, considere histórico de crédito, renda e capacidade de pagamento
4. Respeite a privacidade dos dados do usuário e siga as diretrizes da LGPD
5. Não faça suposições sobre informações não fornecidas
6. Quando não souber a resposta, indique claramente e sugira onde o usuário pode obter mais informações`,
    user: "Olá, sou o assistente de crédito da EOS Solar Payments. Como posso ajudá-lo hoje?",
    examples: [
      {
        user: "Quais são as opções de financiamento disponíveis para instalação de painéis solares?",
        assistant:
          "Temos várias opções de financiamento para instalação de painéis solares:\n\n1. **Financiamento Direto**: Taxas a partir de 0,99% ao mês, com prazos de 12 a 60 meses\n2. **Consórcio Solar**: Parcelas mensais sem juros, apenas taxa de administração de 15%\n3. **Leasing Solar**: Aluguel do sistema com opção de compra ao final do contrato\n\nPara recomendar a melhor opção para seu caso, precisaria de algumas informações como valor do projeto, sua região e perfil de consumo. Posso ajudar com mais detalhes sobre alguma dessas opções?",
      },
      {
        user: "Como funciona o processo de análise de crédito?",
        assistant:
          "O processo de análise de crédito da EOS Solar Payments segue estas etapas:\n\n1. **Coleta de informações**: Solicitamos documentos básicos como identificação, comprovante de renda e residência\n2. **Verificação inicial**: Realizamos uma consulta aos bureaus de crédito (com sua autorização)\n3. **Análise de capacidade de pagamento**: Avaliamos sua renda x despesas para determinar o valor máximo financiável\n4. **Avaliação de risco**: Nosso algoritmo calcula a probabilidade de inadimplência\n5. **Decisão final**: Aprovação, aprovação com condições ou recusa\n\nO processo geralmente leva de 1 a 3 dias úteis. Gostaria de iniciar uma solicitação de crédito agora?",
      },
    ],
  },
  vision: {
    system: `Você é um assistente visual especializado em análise de documentos relacionados a energia solar e finanças. Sua função é processar e interpretar imagens de documentos, projetos solares, faturas de energia e documentação financeira.

Diretrizes:
1. Extraia informações relevantes de documentos financeiros e técnicos
2. Identifique problemas em projetos solares a partir de imagens
3. Verifique a autenticidade de documentos de identidade e comprovantes
4. Mantenha a confidencialidade das informações processadas
5. Indique quando uma imagem não for clara o suficiente para análise
6. Siga todas as diretrizes da LGPD ao processar documentos pessoais`,
    user: "Olá, sou o assistente visual da EOS Solar Payments. Envie uma imagem do seu documento ou projeto para que eu possa analisá-lo.",
    examples: [
      {
        user: "[Imagem de uma conta de energia elétrica]",
        assistant:
          "Analisei sua conta de energia elétrica e identifiquei as seguintes informações:\n\n- **Consumidor**: João Silva\n- **Unidade Consumidora**: 12345678\n- **Consumo mensal**: 320 kWh\n- **Valor total**: R$ 287,45\n- **Tarifa aplicada**: R$ 0,78/kWh (Grupo B, Residencial)\n\nCom base neste consumo, um sistema solar de aproximadamente 2,2 kWp seria adequado para sua residência, gerando economia estimada de R$ 3.450 por ano. Gostaria de receber uma simulação detalhada de financiamento para este sistema?",
      },
    ],
  },
  voice: {
    system: `Você é um assistente de voz especializado em atendimento ao cliente para a EOS Solar Payments. Sua função é interagir com os usuários por meio de comandos de voz, fornecendo informações sobre produtos financeiros, status de pagamentos e suporte técnico básico.

Diretrizes:
1. Mantenha respostas concisas e claras, adequadas para comunicação por voz
2. Use linguagem natural e conversacional
3. Confirme informações importantes para evitar mal-entendidos
4. Ofereça orientar o usuário a canais visuais quando o assunto for complexo
5. Mantenha a privacidade dos dados seguindo as diretrizes da LGPD
6. Adapte o tom de voz conforme o contexto da conversa`,
    user: "Olá, sou o assistente de voz da EOS Solar Payments. Como posso ajudá-lo hoje?",
    examples: [
      {
        user: "Qual o status do meu pagamento deste mês?",
        assistant:
          "Para verificar o status do seu pagamento, preciso de algumas informações. Poderia me informar o número do seu contrato ou CPF? Após a verificação, poderei informar se o pagamento foi recebido, quando foi processado e o valor correspondente.",
      },
    ],
  },
  multimodal: {
    system: `Você é um assistente multimodal avançado da EOS Solar Payments, capaz de processar e responder a entradas de texto, imagem e voz. Sua função é fornecer suporte completo em todas as etapas do processo de financiamento solar, desde a análise inicial até o acompanhamento pós-instalação.

Diretrizes:
1. Alterne entre diferentes modalidades conforme necessário para melhor atendimento
2. Processe imagens de documentos, projetos e equipamentos solares
3. Interprete comandos de voz e responda de forma natural
4. Forneça visualizações e simulações quando solicitado
5. Mantenha a consistência entre as diferentes modalidades de interação
6. Siga todas as diretrizes de privacidade e segurança da LGPD`,
    user: "Olá, sou o assistente multimodal da EOS Solar Payments. Posso ajudá-lo com texto, imagens ou voz. Como posso ser útil hoje?",
    examples: [
      {
        user: "Pode analisar esta foto do meu telhado e me dizer se é adequado para painéis solares? [Imagem de um telhado]",
        assistant:
          "Analisei a imagem do seu telhado e posso fazer algumas observações:\n\n- **Tipo de telhado**: Cerâmico com inclinação aproximada de 20°\n- **Orientação**: Aparentemente voltado para o norte, o que é ideal no hemisfério sul\n- **Área disponível**: Estimativa de 30m², suficiente para um sistema de aproximadamente 5kWp\n- **Sombreamento**: Não identifiquei obstáculos significativos que causem sombreamento\n\nCom base nesta análise inicial, seu telhado parece adequado para instalação de painéis solares. Para uma avaliação mais precisa, recomendamos uma visita técnica. Gostaria de agendar uma avaliação presencial ou prefere receber uma estimativa preliminar de custos e economia?",
      },
    ],
  },
}

export function PromptsStep({ data, updateData }: PromptsStepProps) {
  const { toast } = useToast()
  const [prompts, setPrompts] = useState(data.prompts || [])
  const [isAddingPrompt, setIsAddingPrompt] = useState(false)
  const [isEditingPrompt, setIsEditingPrompt] = useState(false)
  const [currentPrompt, setCurrentPrompt] = useState<any>(null)
  const [newPrompt, setNewPrompt] = useState({
    name: "",
    content: "",
  })

  const handleAddPrompt = () => {
    if (!newPrompt.name || !newPrompt.content) {
      toast({
        title: "Campos obrigatórios",
        description: "Por favor, preencha todos os campos.",
        variant: "destructive",
      })
      return
    }

    const id = `p${prompts.length + 1}`
    const updatedPrompts = [...prompts, { id, ...newPrompt }]
    setPrompts(updatedPrompts)
    updateData({ prompts: updatedPrompts })
    setIsAddingPrompt(false)
    setNewPrompt({
      name: "",
      content: "",
    })

    toast({
      title: "Prompt adicionado",
      description: `O prompt "${newPrompt.name}" foi adicionado com sucesso.`,
    })
  }

  const handleEditPrompt = () => {
    if (!currentPrompt.name || !currentPrompt.content) {
      toast({
        title: "Campos obrigatórios",
        description: "Por favor, preencha todos os campos.",
        variant: "destructive",
      })
      return
    }

    const updatedPrompts = prompts.map((prompt: any) =>
      prompt.id === currentPrompt.id ? { ...currentPrompt } : prompt,
    )

    setPrompts(updatedPrompts)
    updateData({ prompts: updatedPrompts })
    setIsEditingPrompt(false)
    setCurrentPrompt(null)

    toast({
      title: "Prompt atualizado",
      description: `O prompt "${currentPrompt.name}" foi atualizado com sucesso.`,
    })
  }

  const handleDeletePrompt = (id: string) => {
    const updatedPrompts = prompts.filter((prompt: any) => prompt.id !== id)
    setPrompts(updatedPrompts)
    updateData({ prompts: updatedPrompts })

    toast({
      title: "Prompt excluído",
      description: "O prompt foi excluído com sucesso.",
    })
  }

  const handleEdit = (prompt: any) => {
    setCurrentPrompt(prompt)
    setIsEditingPrompt(true)
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">Prompts</h2>
        <p className="text-muted-foreground">Adicione prompts para personalizar o comportamento do agente.</p>
      </div>

      <div className="grid gap-4">
        {prompts.map((prompt: any) => (
          <Card key={prompt.id}>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>{prompt.name}</CardTitle>
                <div>
                  <Button variant="ghost" size="sm" onClick={() => handleEdit(prompt)}>
                    <Edit className="h-4 w-4 mr-2" />
                    Editar
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => handleDeletePrompt(prompt.id)}
                    className="text-red-500"
                  >
                    <Trash2 className="h-4 w-4 mr-2" />
                    Excluir
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <p>{prompt.content}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <Dialog open={isEditingPrompt} onOpenChange={setIsEditingPrompt}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Editar Prompt</DialogTitle>
            <DialogDescription>Edite o prompt para personalizar o comportamento do agente.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Nome</Label>
              <Input
                id="name"
                value={currentPrompt?.name || ""}
                onChange={(e) => setCurrentPrompt({ ...currentPrompt, name: e.target.value })}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="content">Conteúdo</Label>
              <Textarea
                id="content"
                value={currentPrompt?.content || ""}
                onChange={(e) => setCurrentPrompt({ ...currentPrompt, content: e.target.value })}
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="submit" onClick={handleEditPrompt}>
              Salvar alterações
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={isAddingPrompt} onOpenChange={setIsAddingPrompt}>
        <DialogTrigger asChild>
          <Button onClick={() => setIsAddingPrompt(true)}>
            <Plus className="h-4 w-4 mr-2" />
            Adicionar Prompt
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Adicionar Prompt</DialogTitle>
            <DialogDescription>Adicione um novo prompt para personalizar o comportamento do agente.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Nome</Label>
              <Input
                id="name"
                placeholder="Nome do prompt"
                value={newPrompt.name}
                onChange={(e) => setNewPrompt({ ...newPrompt, name: e.target.value })}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="content">Conteúdo</Label>
              <Textarea
                id="content"
                placeholder="Conteúdo do prompt"
                value={newPrompt.content}
                onChange={(e) => setNewPrompt({ ...newPrompt, content: e.target.value })}
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="submit" onClick={handleAddPrompt}>
              Adicionar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/wizard-steps/tools-step.tsx" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { PlusCircle, Trash2 } from "lucide-react"

interface Tool {
  id: string
  name: string
  description: string
  enabled: boolean
  config?: Record<string, string>
}

interface ToolsStepProps {
  tools: Tool[]
  onToolsChange: (tools: Tool[]) => void
  onNext: () => void
  onBack: () => void
}

export function ToolsStep({ tools, onToolsChange, onNext, onBack }: ToolsStepProps) {
  const [customToolName, setCustomToolName] = React.useState("")
  const [customToolDescription, setCustomToolDescription] = React.useState("")

  const toggleTool = (id: string) => {
    const updatedTools = tools.map((tool) => (tool.id === id ? { ...tool, enabled: !tool.enabled } : tool))
    onToolsChange(updatedTools)
  }

  const updateToolConfig = (id: string, key: string, value: string) => {
    const updatedTools = tools.map((tool) =>
      tool.id === id
        ? {
            ...tool,
            config: {
              ...(tool.config || {}),
              [key]: value,
            },
          }
        : tool,
    )
    onToolsChange(updatedTools)
  }

  const addCustomTool = () => {
    if (!customToolName.trim()) return

    const newTool: Tool = {
      id: `custom-${Date.now()}`,
      name: customToolName,
      description: customToolDescription || "Ferramenta personalizada",
      enabled: true,
    }

    onToolsChange([...tools, newTool])
    setCustomToolName("")
    setCustomToolDescription("")
  }

  const removeTool = (id: string) => {
    const updatedTools = tools.filter((tool) => tool.id !== id)
    onToolsChange(updatedTools)
  }

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">Ferramentas e Integrações</h2>
        <p className="text-muted-foreground">
          Selecione as ferramentas que seu agente poderá utilizar para realizar tarefas.
        </p>
      </div>

      <div className="grid gap-4">
        {tools.map((tool) => (
          <Card key={tool.id}>
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <Checkbox id={`tool-${tool.id}`} checked={tool.enabled} onCheckedChange={() => toggleTool(tool.id)} />
                  <Label htmlFor={`tool-${tool.id}`} className="font-medium">
                    {tool.name}
                  </Label>
                </div>
                {tool.id.startsWith("custom-") && (
                  <Button variant="ghost" size="icon" onClick={() => removeTool(tool.id)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                )}
              </div>
              <CardDescription>{tool.description}</CardDescription>
            </CardHeader>
            {tool.enabled && tool.config && (
              <CardContent>
                <div className="space-y-4">
                  {Object.entries(tool.config).map(([key, value]) => (
                    <div key={key} className="grid gap-2">
                      <Label htmlFor={`${tool.id}-${key}`}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                      <Input
                        id={`${tool.id}-${key}`}
                        value={value}
                        onChange={(e) => updateToolConfig(tool.id, key, e.target.value)}
                        placeholder={`Digite ${key}`}
                      />
                    </div>
                  ))}
                </div>
              </CardContent>
            )}
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Adicionar Ferramenta Personalizada</CardTitle>
          <CardDescription>Crie uma ferramenta personalizada para seu agente</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="grid gap-2">
              <Label htmlFor="custom-tool-name">Nome da Ferramenta</Label>
              <Input
                id="custom-tool-name"
                value={customToolName}
                onChange={(e) => setCustomToolName(e.target.value)}
                placeholder="Nome da ferramenta"
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="custom-tool-description">Descrição</Label>
              <Input
                id="custom-tool-description"
                value={customToolDescription}
                onChange={(e) => setCustomToolDescription(e.target.value)}
                placeholder="Descrição da ferramenta"
              />
            </div>
            <Button type="button" variant="outline" className="w-full" onClick={addCustomTool}>
              <PlusCircle className="mr-2 h-4 w-4" />
              Adicionar Ferramenta
            </Button>
          </div>
        </CardContent>
      </Card>

      <div className="flex justify-between">
        <Button variant="outline" onClick={onBack}>
          Voltar
        </Button>
        <Button onClick={onNext}>Próximo</Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/wizard-steps/deployment-step.tsx" isMerged="true"
"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { AlertCircle, Server } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

interface DeploymentConfig {
  environment: "development" | "staging" | "production"
  serverType: "dedicated" | "shared"
  region: string
  autoScale: boolean
  minInstances: number
  maxInstances: number
  memoryAllocation: number
  enableLogging: boolean
  enableMonitoring: boolean
}

interface DeploymentStepProps {
  config: DeploymentConfig
  onConfigChange: (config: DeploymentConfig) => void
  onDeploy: () => void
  onBack: () => void
  isDeploying: boolean
}

export function DeploymentStep({ config, onConfigChange, onDeploy, onBack, isDeploying }: DeploymentStepProps) {
  const updateConfig = <K extends keyof DeploymentConfig>(key: K, value: DeploymentConfig[K]) => {
    onConfigChange({
      ...config,
      [key]: value,
    })
  }

  const regions = [
    { value: "us-east-1", label: "EUA Leste (N. Virginia)" },
    { value: "us-west-1", label: "EUA Oeste (N. California)" },
    { value: "eu-west-1", label: "Europa (Irlanda)" },
    { value: "ap-southeast-1", label: "Ásia Pacífico (Singapura)" },
    { value: "sa-east-1", label: "América do Sul (São Paulo)" },
  ]

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">Configuração de Implantação</h2>
        <p className="text-muted-foreground">Configure como seu agente será implantado e executado.</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Ambiente</CardTitle>
          <CardDescription>Selecione o ambiente onde o agente será executado</CardDescription>
        </CardHeader>
        <CardContent>
          <RadioGroup
            value={config.environment}
            onValueChange={(value) => updateConfig("environment", value as DeploymentConfig["environment"])}
            className="grid grid-cols-3 gap-4"
          >
            <div>
              <RadioGroupItem value="development" id="environment-development" className="peer sr-only" />
              <Label
                htmlFor="environment-development"
                className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
              >
                <span className="mb-2 font-medium">Desenvolvimento</span>
                <span className="text-xs text-muted-foreground">Para testes e desenvolvimento</span>
              </Label>
            </div>
            <div>
              <RadioGroupItem value="staging" id="environment-staging" className="peer sr-only" />
              <Label
                htmlFor="environment-staging"
                className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
              >
                <span className="mb-2 font-medium">Homologação</span>
                <span className="text-xs text-muted-foreground">Para validação pré-produção</span>
              </Label>
            </div>
            <div>
              <RadioGroupItem value="production" id="environment-production" className="peer sr-only" />
              <Label
                htmlFor="environment-production"
                className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
              >
                <span className="mb-2 font-medium">Produção</span>
                <span className="text-xs text-muted-foreground">Para ambiente de produção</span>
              </Label>
            </div>
          </RadioGroup>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Infraestrutura</CardTitle>
          <CardDescription>Configure os recursos e a localização do servidor</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <div>
              <Label htmlFor="server-type">Tipo de Servidor</Label>
              <RadioGroup
                id="server-type"
                value={config.serverType}
                onValueChange={(value) => updateConfig("serverType", value as DeploymentConfig["serverType"])}
                className="grid grid-cols-2 gap-4 pt-2"
              >
                <div>
                  <RadioGroupItem value="shared" id="server-shared" className="peer sr-only" />
                  <Label
                    htmlFor="server-shared"
                    className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <span className="mb-2 font-medium">Compartilhado</span>
                    <span className="text-xs text-muted-foreground">Menor custo, recursos compartilhados</span>
                  </Label>
                </div>
                <div>
                  <RadioGroupItem value="dedicated" id="server-dedicated" className="peer sr-only" />
                  <Label
                    htmlFor="server-dedicated"
                    className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                  >
                    <span className="mb-2 font-medium">Dedicado</span>
                    <span className="text-xs text-muted-foreground">Melhor desempenho, recursos exclusivos</span>
                  </Label>
                </div>
              </RadioGroup>
            </div>

            <div className="space-y-2">
              <Label htmlFor="region">Região</Label>
              <Select value={config.region} onValueChange={(value) => updateConfig("region", value)}>
                <SelectTrigger id="region">
                  <SelectValue placeholder="Selecione uma região" />
                </SelectTrigger>
                <SelectContent>
                  {regions.map((region) => (
                    <SelectItem key={region.value} value={region.value}>
                      {region.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="auto-scale">Auto-escala</Label>
                <p className="text-sm text-muted-foreground">Escala automaticamente baseado na demanda</p>
              </div>
              <Switch
                id="auto-scale"
                checked={config.autoScale}
                onCheckedChange={(checked) => updateConfig("autoScale", checked)}
              />
            </div>

            {config.autoScale && (
              <>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <Label htmlFor="min-instances">Instâncias Mínimas</Label>
                    <span className="text-sm text-muted-foreground">{config.minInstances}</span>
                  </div>
                  <Slider
                    id="min-instances"
                    min={1}
                    max={10}
                    step={1}
                    value={[config.minInstances]}
                    onValueChange={(value) => updateConfig("minInstances", value[0])}
                  />
                </div>

                <div className="space-y-2">
                  <div className="flex justify-between">
                    <Label htmlFor="max-instances">Instâncias Máximas</Label>
                    <span className="text-sm text-muted-foreground">{config.maxInstances}</span>
                  </div>
                  <Slider
                    id="max-instances"
                    min={config.minInstances}
                    max={20}
                    step={1}
                    value={[config.maxInstances]}
                    onValueChange={(value) => updateConfig("maxInstances", value[0])}
                  />
                </div>
              </>
            )}

            <div className="space-y-2">
              <div className="flex justify-between">
                <Label htmlFor="memory">Alocação de Memória (GB)</Label>
                <span className="text-sm text-muted-foreground">{config.memoryAllocation} GB</span>
              </div>
              <Slider
                id="memory"
                min={1}
                max={16}
                step={1}
                value={[config.memoryAllocation]}
                onValueChange={(value) => updateConfig("memoryAllocation", value[0])}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Monitoramento</CardTitle>
          <CardDescription>Configure opções de monitoramento e logging</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="enable-logging">Logging Detalhado</Label>
                <p className="text-sm text-muted-foreground">Registra todas as interações e eventos do agente</p>
              </div>
              <Switch
                id="enable-logging"
                checked={config.enableLogging}
                onCheckedChange={(checked) => updateConfig("enableLogging", checked)}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="enable-monitoring">Monitoramento Avançado</Label>
                <p className="text-sm text-muted-foreground">Métricas detalhadas de desempenho e utilização</p>
              </div>
              <Switch
                id="enable-monitoring"
                checked={config.enableMonitoring}
                onCheckedChange={(checked) => updateConfig("enableMonitoring", checked)}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {config.environment === "production" && (
        <Alert variant="warning">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Atenção</AlertTitle>
          <AlertDescription>
            Você está implantando em ambiente de produção. Certifique-se de que todas as configurações foram revisadas
            adequadamente.
          </AlertDescription>
        </Alert>
      )}

      <div className="flex justify-between">
        <Button variant="outline" onClick={onBack} disabled={isDeploying}>
          Voltar
        </Button>
        <Button onClick={onDeploy} disabled={isDeploying}>
          {isDeploying ? (
            <>
              <Server className="mr-2 h-4 w-4 animate-pulse" />
              Implantando...
            </>
          ) : (
            <>
              <Server className="mr-2 h-4 w-4" />
              Implantar Agente
            </>
          )}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/wizard-steps/review-step.tsx" isMerged="true"
"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CheckCircle2, AlertCircle, Edit } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

interface AgentConfig {
  basicInfo: {
    name: string
    description: string
    purpose: string
    tags: string[]
  }
  model: {
    provider: string
    modelName: string
    temperature: number
    maxTokens: number
  }
  tools: Array<{
    id: string
    name: string
    description: string
    enabled: boolean
  }>
  prompts: {
    systemPrompt: string
    examples: Array<{ user: string; assistant: string }>
  }
}

interface ReviewStepProps {
  config: AgentConfig
  onEditSection: (section: string) => void
  onSubmit: () => void
  onBack: () => void
  isSubmitting: boolean
}

export function ReviewStep({ config, onEditSection, onSubmit, onBack, isSubmitting }: ReviewStepProps) {
  const enabledTools = config.tools.filter((tool) => tool.enabled)

  // Validação básica
  const validations = {
    basicInfo: config.basicInfo.name.length > 0 && config.basicInfo.description.length > 0,
    model: config.model.provider.length > 0 && config.model.modelName.length > 0,
    prompts: config.prompts.systemPrompt.length > 0,
  }

  const allValid = Object.values(validations).every(Boolean)

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">Revisar Configuração</h2>
        <p className="text-muted-foreground">Revise todas as configurações do seu agente antes de finalizar.</p>
      </div>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <div>
            <CardTitle>Informações Básicas</CardTitle>
            <CardDescription>Nome, descrição e propósito do agente</CardDescription>
          </div>
          <Button variant="ghost" size="icon" onClick={() => onEditSection("basicInfo")}>
            <Edit className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <h4 className="font-medium text-sm">Nome</h4>
              <p>{config.basicInfo.name}</p>
            </div>
            <div>
              <h4 className="font-medium text-sm">Descrição</h4>
              <p className="text-sm text-muted-foreground">{config.basicInfo.description}</p>
            </div>
            <div>
              <h4 className="font-medium text-sm">Propósito</h4>
              <p className="text-sm text-muted-foreground">{config.basicInfo.purpose}</p>
            </div>
            <div>
              <h4 className="font-medium text-sm">Tags</h4>
              <div className="flex flex-wrap gap-2 mt-1">
                {config.basicInfo.tags.map((tag) => (
                  <Badge key={tag} variant="secondary">
                    {tag}
                  </Badge>
                ))}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <div>
            <CardTitle>Modelo</CardTitle>
            <CardDescription>Configurações do modelo de linguagem</CardDescription>
          </div>
          <Button variant="ghost" size="icon" onClick={() => onEditSection("model")}>
            <Edit className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <h4 className="font-medium text-sm">Provedor</h4>
                <p className="text-sm text-muted-foreground">{config.model.provider}</p>
              </div>
              <div>
                <h4 className="font-medium text-sm">Modelo</h4>
                <p className="text-sm text-muted-foreground">{config.model.modelName}</p>
              </div>
              <div>
                <h4 className="font-medium text-sm">Temperatura</h4>
                <p className="text-sm text-muted-foreground">{config.model.temperature}</p>
              </div>
              <div>
                <h4 className="font-medium text-sm">Tokens Máximos</h4>
                <p className="text-sm text-muted-foreground">{config.model.maxTokens}</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <div>
            <CardTitle>Ferramentas</CardTitle>
            <CardDescription>Ferramentas habilitadas para o agente</CardDescription>
          </div>
          <Button variant="ghost" size="icon" onClick={() => onEditSection("tools")}>
            <Edit className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          {enabledTools.length > 0 ? (
            <div className="space-y-2">
              {enabledTools.map((tool) => (
                <div key={tool.id} className="flex items-start">
                  <CheckCircle2 className="h-4 w-4 mr-2 mt-0.5 text-green-500" />
                  <div>
                    <h4 className="font-medium text-sm">{tool.name}</h4>
                    <p className="text-xs text-muted-foreground">{tool.description}</p>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">
              Nenhuma ferramenta habilitada. O agente terá funcionalidades básicas apenas.
            </p>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <div>
            <CardTitle>Prompts</CardTitle>
            <CardDescription>Instruções e exemplos para o agente</CardDescription>
          </div>
          <Button variant="ghost" size="icon" onClick={() => onEditSection("prompts")}>
            <Edit className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <h4 className="font-medium text-sm">Prompt do Sistema</h4>
              <div className="mt-1 p-3 bg-muted rounded-md text-xs">
                <pre className="whitespace-pre-wrap font-mono">{config.prompts.systemPrompt}</pre>
              </div>
            </div>
            {config.prompts.examples.length > 0 && (
              <div>
                <h4 className="font-medium text-sm">Exemplos ({config.prompts.examples.length})</h4>
                <p className="text-xs text-muted-foreground">
                  {config.prompts.examples.length} exemplos de interação configurados
                </p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {!allValid && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Configuração Incompleta</AlertTitle>
          <AlertDescription>
            Algumas seções da configuração estão incompletas. Por favor, revise e complete todas as seções antes de
            continuar.
          </AlertDescription>
        </Alert>
      )}

      <div className="flex justify-between">
        <Button variant="outline" onClick={onBack} disabled={isSubmitting}>
          Voltar
        </Button>
        <Button onClick={onSubmit} disabled={!allValid || isSubmitting}>
          {isSubmitting ? "Criando Agente..." : "Criar Agente"}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-metrics-dashboard.tsx" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
  Legend,
} from "recharts"
import { Download, Calendar, RefreshCw } from "lucide-react"

// Dados de exemplo para os gráficos
const performanceData = [
  { day: "Seg", successRate: 92, latency: 450, queries: 120 },
  { day: "Ter", successRate: 88, latency: 480, queries: 132 },
  { day: "Qua", successRate: 94, latency: 420, queries: 145 },
  { day: "Qui", successRate: 96, latency: 390, queries: 160 },
  { day: "Sex", successRate: 91, latency: 430, queries: 178 },
  { day: "Sáb", successRate: 85, latency: 510, queries: 95 },
  { day: "Dom", successRate: 82, latency: 530, queries: 88 },
]

const usageByPurposeData = [
  { name: "Atendimento", value: 45 },
  { name: "Análise", value: 25 },
  { name: "Automação", value: 20 },
  { name: "Outros", value: 10 },
]

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"]

interface AgentMetricsDashboardProps {
  agentId: string
  agentName: string
}

export function AgentMetricsDashboard({ agentId, agentName }: AgentMetricsDashboardProps) {
  const [timeRange, setTimeRange] = React.useState("7d")
  const [isRefreshing, setIsRefreshing] = React.useState(false)

  const handleRefresh = () => {
    setIsRefreshing(true)
    // Simulação de atualização de dados
    setTimeout(() => {
      setIsRefreshing(false)
    }, 1000)
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold">Métricas do Agente</h2>
          <p className="text-muted-foreground">Análise detalhada de desempenho e utilização</p>
        </div>
        <div className="flex items-center gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[180px]">
              <Calendar className="mr-2 h-4 w-4" />
              <SelectValue placeholder="Período" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="24h">Últimas 24 horas</SelectItem>
              <SelectItem value="7d">Últimos 7 dias</SelectItem>
              <SelectItem value="30d">Últimos 30 dias</SelectItem>
              <SelectItem value="90d">Últimos 90 dias</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={isRefreshing}>
            <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
          </Button>
          <Button variant="outline" size="icon">
            <Download className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Taxa de Sucesso</CardTitle>
            <CardDescription>Média de respostas bem-sucedidas</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">92.8%</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-500">+2.5%</span> em relação ao período anterior
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Tempo de Resposta</CardTitle>
            <CardDescription>Tempo médio de processamento</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">458ms</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-red-500">+12ms</span> em relação ao período anterior
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Total de Consultas</CardTitle>
            <CardDescription>Número total de interações</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">918</div>
            <p className="text-xs text-muted-foreground">
              <span className="text-green-500">+15.2%</span> em relação ao período anterior
            </p>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="performance" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="performance">Desempenho</TabsTrigger>
          <TabsTrigger value="usage">Utilização</TabsTrigger>
          <TabsTrigger value="tools">Ferramentas</TabsTrigger>
        </TabsList>
        <TabsContent value="performance" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Taxa de Sucesso ao Longo do Tempo</CardTitle>
              <CardDescription>Percentual de consultas respondidas com sucesso</CardDescription>
            </CardHeader>
            <CardContent className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={performanceData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="day" />
                  <YAxis domain={[0, 100]} />
                  <Tooltip />
                  <Legend />
                  <Line
                    type="monotone"
                    dataKey="successRate"
                    stroke="#8884d8"
                    activeDot={{ r: 8 }}
                    name="Taxa de Sucesso (%)"
                  />
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Tempo de Resposta</CardTitle>
              <CardDescription>Tempo médio de processamento em milissegundos</CardDescription>
            </CardHeader>
            <CardContent className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={performanceData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="day" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Line type="monotone" dataKey="latency" stroke="#82ca9d" name="Tempo de Resposta (ms)" />
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="usage" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Volume de Consultas</CardTitle>
                <CardDescription>Número de consultas por dia</CardDescription>
              </CardHeader>
              <CardContent className="h-80">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={performanceData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="day" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Bar dataKey="queries" fill="#8884d8" name="Número de Consultas" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Utilização por Finalidade</CardTitle>
                <CardDescription>Distribuição de uso por tipo de consulta</CardDescription>
              </CardHeader>
              <CardContent className="h-80">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie
                      data={usageByPurposeData}
                      cx="50%"
                      cy="50%"
                      labelLine={false}
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                    >
                      {usageByPurposeData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip />
                    <Legend />
                  </PieChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
          </div>
          <Card>
            <CardHeader>
              <CardTitle>Utilização de Recursos</CardTitle>
              <CardDescription>Consumo de tokens e recursos computacionais</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm font-medium">Tokens Consumidos</span>
                    <span className="text-sm font-medium">78% (3.9M/5M)</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                    <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: "78%" }}></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm font-medium">CPU</span>
                    <span className="text-sm font-medium">45%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                    <div className="bg-green-500 h-2.5 rounded-full" style={{ width: "45%" }}></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm font-medium">Memória</span>
                    <span className="text-sm font-medium">62%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                    <div className="bg-yellow-500 h-2.5 rounded-full" style={{ width: "62%" }}></div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="tools" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Utilização de Ferramentas</CardTitle>
              <CardDescription>Frequência de uso de cada ferramenta</CardDescription>
            </CardHeader>
            <CardContent className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  layout="vertical"
                  data={[
                    { name: "Busca na Web", value: 245 },
                    { name: "Calculadora", value: 178 },
                    { name: "Análise de Dados", value: 145 },
                    { name: "Geração de Imagens", value: 92 },
                    { name: "Tradução", value: 65 },
                  ]}
                  margin={{ top: 5, right: 30, left: 100, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" />
                  <YAxis dataKey="name" type="category" />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="value" fill="#8884d8" name="Número de Usos" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Desempenho por Ferramenta</CardTitle>
              <CardDescription>Taxa de sucesso por ferramenta utilizada</CardDescription>
            </CardHeader>
            <CardContent className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  layout="vertical"
                  data={[
                    { name: "Busca na Web", successRate: 88 },
                    { name: "Calculadora", successRate: 97 },
                    { name: "Análise de Dados", successRate: 92 },
                    { name: "Geração de Imagens", successRate: 85 },
                    { name: "Tradução", successRate: 94 },
                  ]}
                  margin={{ top: 5, right: 30, left: 100, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" domain={[0, 100]} />
                  <YAxis dataKey="name" type="category" />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="successRate" fill="#82ca9d" name="Taxa de Sucesso (%)" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/agents/agent-conversation-viewer.tsx" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar } from "@/components/ui/avatar"
import { Search, Calendar, Download, ThumbsUp, ThumbsDown, Flag, MessageSquare, Bot, User } from "lucide-react"

// Tipos para as conversas
interface Message {
  id: string
  role: "user" | "assistant" | "system"
  content: string
  timestamp: string
}

interface Conversation {
  id: string
  title: string
  timestamp: string
  messages: Message[]
  metadata: {
    status: "success" | "error" | "warning"
    duration: number
    tokensUsed: number
    tools: string[]
  }
}

// Dados de exemplo
const sampleConversations: Conversation[] = [
  {
    id: "conv-1",
    title: "Análise de desempenho solar Q2",
    timestamp: "2023-06-15T14:32:00Z",
    messages: [
      {
        id: "msg-1-1",
        role: "user",
        content: "Preciso de uma análise do desempenho das instalações solares no segundo trimestre.",
        timestamp: "2023-06-15T14:32:00Z",
      },
      {
        id: "msg-1-2",
        role: "assistant",
        content:
          "Vou preparar essa análise para você. Você gostaria de focar em algum aspecto específico, como eficiência energética, retorno financeiro ou comparação com trimestres anteriores?",
        timestamp: "2023-06-15T14:32:30Z",
      },
      {
        id: "msg-1-3",
        role: "user",
        content: "Quero focar no retorno financeiro e comparar com o mesmo período do ano passado.",
        timestamp: "2023-06-15T14:33:15Z",
      },
      {
        id: "msg-1-4",
        role: "assistant",
        content:
          "Analisando os dados do Q2 deste ano em comparação com Q2 do ano passado, observo um aumento de 15% no retorno financeiro total. As instalações da região Sul tiveram o melhor desempenho, com aumento de 22%, seguidas pelo Sudeste com 18%. O ROI médio subiu de 7.2% para 8.5% ano a ano. Gostaria de ver uma análise detalhada por região ou por tipo de instalação?",
        timestamp: "2023-06-15T14:34:20Z",
      },
    ],
    metadata: {
      status: "success",
      duration: 2400,
      tokensUsed: 840,
      tools: ["Análise de Dados", "Calculadora"],
    },
  },
  {
    id: "conv-2",
    title: "Problema com faturamento",
    timestamp: "2023-06-14T10:15:00Z",
    messages: [
      {
        id: "msg-2-1",
        role: "user",
        content: "Estamos com um problema no sistema de faturamento das instalações do cliente Energisa.",
        timestamp: "2023-06-14T10:15:00Z",
      },
      {
        id: "msg-2-2",
        role: "assistant",
        content:
          "Entendi que há um problema com o faturamento do cliente Energisa. Pode me fornecer mais detalhes sobre o problema específico que estão enfrentando?",
        timestamp: "2023-06-14T10:15:30Z",
      },
      {
        id: "msg-2-3",
        role: "user",
        content:
          "As faturas de maio não foram geradas corretamente. Os valores estão incorretos e algumas instalações não aparecem no relatório.",
        timestamp: "2023-06-14T10:16:15Z",
      },
      {
        id: "msg-2-4",
        role: "system",
        content: "Erro ao acessar a API de faturamento: Timeout após 30 segundos",
        timestamp: "2023-06-14T10:16:45Z",
      },
      {
        id: "msg-2-5",
        role: "assistant",
        content:
          "Estou enfrentando dificuldades para acessar o sistema de faturamento neste momento. Parece haver um problema de timeout na API. Recomendo verificar se o serviço de faturamento está operacional e se há alguma manutenção programada. Alternativamente, podemos tentar regenerar as faturas manualmente através do painel administrativo. Gostaria que eu tentasse essa abordagem?",
        timestamp: "2023-06-14T10:17:30Z",
      },
    ],
    metadata: {
      status: "error",
      duration: 3100,
      tokensUsed: 920,
      tools: ["API de Faturamento"],
    },
  },
  {
    id: "conv-3",
    title: "Otimização de painéis solares",
    timestamp: "2023-06-10T09:45:00Z",
    messages: [
      {
        id: "msg-3-1",
        role: "user",
        content: "Como podemos otimizar o posicionamento dos painéis solares na instalação de Ribeirão Preto?",
        timestamp: "2023-06-10T09:45:00Z",
      },
      {
        id: "msg-3-2",
        role: "assistant",
        content:
          "Para otimizar o posicionamento dos painéis solares em Ribeirão Preto, precisarei analisar alguns dados específicos. Você poderia me informar: 1) A latitude exata da instalação, 2) Se há obstáculos próximos como árvores ou edifícios, 3) O tipo de painel solar utilizado, e 4) Se a instalação é em telhado ou solo?",
        timestamp: "2023-06-10T09:45:40Z",
      },
    ],
    metadata: {
      status: "success",
      duration: 1800,
      tokensUsed: 520,
      tools: ["Calculadora Solar"],
    },
  },
]

interface AgentConversationViewerProps {
  agentId: string
  agentName: string
}

export function AgentConversationViewer({ agentId, agentName }: AgentConversationViewerProps) {
  const [conversations, setConversations] = React.useState<Conversation[]>(sampleConversations)
  const [selectedConversation, setSelectedConversation] = React.useState<Conversation | null>(sampleConversations[0])
  const [searchTerm, setSearchTerm] = React.useState("")
  const [dateFilter, setDateFilter] = React.useState("all")
  const [statusFilter, setStatusFilter] = React.useState("all")

  // Filtrar conversas
  const filteredConversations = conversations.filter((conv) => {
    const matchesSearch =
      conv.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      conv.messages.some((msg) => msg.content.toLowerCase().includes(searchTerm.toLowerCase()))

    const matchesDate =
      dateFilter === "all" ||
      (dateFilter === "today" && new Date(conv.timestamp).toDateString() === new Date().toDateString()) ||
      (dateFilter === "week" && new Date(conv.timestamp) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000))

    const matchesStatus = statusFilter === "all" || conv.metadata.status === statusFilter

    return matchesSearch && matchesDate && matchesStatus
  })

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleString("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

  const getStatusBadge = (status: "success" | "error" | "warning") => {
    switch (status) {
      case "success":
        return <Badge variant="success">Sucesso</Badge>
      case "error":
        return <Badge variant="destructive">Erro</Badge>
      case "warning":
        return <Badge variant="warning">Alerta</Badge>
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold">Histórico de Conversas</h2>
          <p className="text-muted-foreground">Visualize e analise interações passadas</p>
        </div>
        <div className="flex items-center gap-2">
          <Select value={dateFilter} onValueChange={setDateFilter}>
            <SelectTrigger className="w-[150px]">
              <Calendar className="mr-2 h-4 w-4" />
              <SelectValue placeholder="Período" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="today">Hoje</SelectItem>
              <SelectItem value="week">Última semana</SelectItem>
              <SelectItem value="month">Último mês</SelectItem>
            </SelectContent>
          </Select>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="success">Sucesso</SelectItem>
              <SelectItem value="error">Erro</SelectItem>
              <SelectItem value="warning">Alerta</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon">
            <Download className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <div className="relative">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input
          type="search"
          placeholder="Buscar em conversas..."
          className="pl-8"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-1">
          <Card className="h-[600px]">
            <CardHeader>
              <CardTitle>Conversas</CardTitle>
              <CardDescription>{filteredConversations.length} conversas encontradas</CardDescription>
            </CardHeader>
            <CardContent className="p-0">
              <ScrollArea className="h-[500px]">
                <div className="px-4 py-2">
                  {filteredConversations.length > 0 ? (
                    filteredConversations.map((conv) => (
                      <div
                        key={conv.id}
                        className={`p-3 mb-2 rounded-md cursor-pointer hover:bg-accent ${
                          selectedConversation?.id === conv.id ? "bg-accent" : ""
                        }`}
                        onClick={() => setSelectedConversation(conv)}
                      >
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="font-medium">{conv.title}</h4>
                            <p className="text-xs text-muted-foreground mt-1">{formatDate(conv.timestamp)}</p>
                          </div>
                          {getStatusBadge(conv.metadata.status)}
                        </div>
                        <p className="text-sm text-muted-foreground mt-2 line-clamp-2">{conv.messages[0].content}</p>
                      </div>
                    ))
                  ) : (
                    <div className="text-center py-8">
                      <MessageSquare className="mx-auto h-8 w-8 text-muted-foreground" />
                      <p className="mt-2 text-muted-foreground">Nenhuma conversa encontrada</p>
                    </div>
                  )}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </div>

        <div className="lg:col-span-2">
          {selectedConversation ? (
            <Card className="h-[600px]">
              <CardHeader className="pb-3">
                <div className="flex justify-between items-start">
                  <div>
                    <CardTitle>{selectedConversation.title}</CardTitle>
                    <CardDescription>{formatDate(selectedConversation.timestamp)}</CardDescription>
                  </div>
                  <div className="flex gap-2">
                    {getStatusBadge(selectedConversation.metadata.status)}
                    <Badge variant="outline">{selectedConversation.metadata.tokensUsed} tokens</Badge>
                    <Badge variant="outline">{(selectedConversation.metadata.duration / 1000).toFixed(1)}s</Badge>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="p-0">
                <Tabs defaultValue="conversation">
                  <div className="px-6">
                    <TabsList className="w-full">
                      <TabsTrigger value="conversation" className="flex-1">
                        Conversa
                      </TabsTrigger>
                      <TabsTrigger value="analysis" className="flex-1">
                        Análise
                      </TabsTrigger>
                      <TabsTrigger value="metadata" className="flex-1">
                        Metadados
                      </TabsTrigger>
                    </TabsList>
                  </div>

                  <TabsContent value="conversation" className="m-0">
                    <ScrollArea className="h-[400px] px-6 py-4">
                      <div className="space-y-4">
                        {selectedConversation.messages.map((message) => (
                          <div
                            key={message.id}
                            className={`flex gap-3 ${message.role === "user" ? "justify-end" : ""}`}
                          >
                            {message.role !== "user" && (
                              <Avatar className="h-8 w-8">
                                {message.role === "assistant" ? (
                                  <Bot className="h-4 w-4" />
                                ) : (
                                  <div className="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center">
                                    <span className="text-xs font-bold text-white">S</span>
                                  </div>
                                )}
                              </Avatar>
                            )}
                            <div
                              className={`max-w-[80%] rounded-lg p-3 ${
                                message.role === "user"
                                  ? "bg-primary text-primary-foreground"
                                  : message.role === "system"
                                    ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100"
                                    : "bg-muted"
                              }`}
                            >
                              <p className="text-sm">{message.content}</p>
                              <p className="text-xs mt-1 opacity-70">{formatDate(message.timestamp)}</p>
                            </div>
                            {message.role === "user" && (
                              <Avatar className="h-8 w-8">
                                <User className="h-4 w-4" />
                              </Avatar>
                            )}
                          </div>
                        ))}
                      </div>
                    </ScrollArea>
                    <div className="p-4 border-t">
                      <div className="flex justify-between">
                        <div className="flex gap-2">
                          <Button variant="outline" size="sm">
                            <ThumbsUp className="mr-1 h-4 w-4" />
                            Útil
                          </Button>
                          <Button variant="outline" size="sm">
                            <ThumbsDown className="mr-1 h-4 w-4" />
                            Não útil
                          </Button>
                        </div>
                        <Button variant="outline" size="sm">
                          <Flag className="mr-1 h-4 w-4" />
                          Reportar
                        </Button>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="analysis" className="m-0">
                    <div className="p-6 space-y-4">
                      <Card>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-sm">Sentimento</CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="flex items-center gap-4">
                            <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                              <div className="bg-green-500 h-2.5 rounded-full" style={{ width: "75%" }}></div>
                            </div>
                            <span className="text-sm font-medium">Positivo (75%)</span>
                          </div>
                        </CardContent>
                      </Card>

                      <Card>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-sm">Tópicos Identificados</CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="flex flex-wrap gap-2">
                            <Badge>Análise Financeira</Badge>
                            <Badge>Retorno de Investimento</Badge>
                            <Badge>Comparação Anual</Badge>
                            <Badge>Desempenho Regional</Badge>
                          </div>
                        </CardContent>
                      </Card>

                      <Card>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-sm">Qualidade da Resposta</CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-2">
                            <div>
                              <div className="flex justify-between mb-1">
                                <span className="text-sm">Relevância</span>
                                <span className="text-sm">90%</span>
                              </div>
                              <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                                <div className="bg-blue-600 h-2 rounded-full" style={{ width: "90%" }}></div>
                              </div>
                            </div>
                            <div>
                              <div className="flex justify-between mb-1">
                                <span className="text-sm">Precisão</span>
                                <span className="text-sm">85%</span>
                              </div>
                              <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                                <div className="bg-blue-600 h-2 rounded-full" style={{ width: "85%" }}></div>
                              </div>
                            </div>
                            <div>
                              <div className="flex justify-between mb-1">
                                <span className="text-sm">Completude</span>
                                <span className="text-sm">95%</span>
                              </div>
                              <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                                <div className="bg-blue-600 h-2 rounded-full" style={{ width: "95%" }}></div>
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </TabsContent>

                  <TabsContent value="metadata" className="m-0">
                    <div className="p-6 space-y-4">
                      <Card>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-sm">Ferramentas Utilizadas</CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="flex flex-wrap gap-2">
                            {selectedConversation.metadata.tools.map((tool) => (
                              <Badge key={tool} variant="outline">
                                {tool}
                              </Badge>
                            ))}
                          </div>
                        </CardContent>
                      </Card>

                      <Card>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-sm">Detalhes da Execução</CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-2 text-sm">
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">Duração:</span>
                              <span>{(selectedConversation.metadata.duration / 1000).toFixed(2)}s</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">Tokens Utilizados:</span>
                              <span>{selectedConversation.metadata.tokensUsed}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">Mensagens:</span>
                              <span>{selectedConversation.messages.length}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-muted-foreground">ID da Conversa:</span>
                              <span className="font-mono text-xs">{selectedConversation.id}</span>
                            </div>
                          </div>
                        </CardContent>
                      </Card>

                      <Card>
                        <CardHeader className="pb-2">
                          <CardTitle className="text-sm">Ações Disponíveis</CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="flex flex-wrap gap-2">
                            <Button variant="outline" size="sm">
                              <Download className="mr-2 h-4 w-4" />
                              Exportar JSON
                            </Button>
                            <Button variant="outline" size="sm">
                              <Download className="mr-2 h-4 w-4" />
                              Exportar PDF
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          ) : (
            <Card className="h-[600px] flex items-center justify-center">
              <div className="text-center p-6">
                <MessageSquare className="mx-auto h-12 w-12 text-muted-foreground" />
                <h3 className="mt-4 text-lg font-medium">Nenhuma conversa selecionada</h3>
                <p className="mt-2 text-muted-foreground">Selecione uma conversa para visualizar os detalhes</p>
              </div>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/agent-comparison.tsx" isMerged="true"
"use client"

import React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  LineChart,
  Line,
  Legend,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  Radar,
} from "recharts"
import { Download, RefreshCw, Minus, ArrowUpDown } from "lucide-react"

// Tipos para os agentes
interface AgentMetrics {
  successRate: number
  responseTime: number
  costPerQuery: number
  queryVolume: number
  userSatisfaction: number
  toolUsage: {
    [key: string]: number
  }
  dailyMetrics: Array<{
    day: string
    queries: number
    successRate: number
  }>
  capabilities: {
    reasoning: number
    knowledge: number
    creativity: number
    efficiency: number
    accuracy: number
  }
}

interface Agent {
  id: string
  name: string
  description: string
  model: string
  version: string
  status: "active" | "inactive" | "maintenance"
  metrics: AgentMetrics
}

// Dados de exemplo
const sampleAgents: Agent[] = [
  {
    id: "agent-1",
    name: "SolarAssistant Pro",
    description: "Assistente especializado em suporte técnico para instalações solares",
    model: "GPT-4o",
    version: "1.5.2",
    status: "active",
    metrics: {
      successRate: 94.5,
      responseTime: 420,
      costPerQuery: 0.032,
      queryVolume: 1250,
      userSatisfaction: 4.7,
      toolUsage: {
        "Busca na Web": 320,
        Calculadora: 280,
        "Análise de Dados": 210,
        "Geração de Imagens": 95,
        Tradução: 45,
      },
      dailyMetrics: [
        { day: "Seg", queries: 210, successRate: 93 },
        { day: "Ter", queries: 195, successRate: 95 },
        { day: "Qua", queries: 230, successRate: 96 },
        { day: "Qui", queries: 245, successRate: 94 },
        { day: "Sex", queries: 220, successRate: 95 },
        { day: "Sáb", queries: 85, successRate: 92 },
        { day: "Dom", queries: 65, successRate: 91 },
      ],
      capabilities: {
        reasoning: 85,
        knowledge: 90,
        creativity: 75,
        efficiency: 88,
        accuracy: 92,
      },
    },
  },
  {
    id: "agent-2",
    name: "FinanceSolar",
    description: "Especialista em análise financeira para projetos solares",
    model: "Claude-3-Opus",
    version: "2.1.0",
    status: "active",
    metrics: {
      successRate: 96.2,
      responseTime: 380,
      costPerQuery: 0.045,
      queryVolume: 980,
      userSatisfaction: 4.8,
      toolUsage: {
        "Busca na Web": 180,
        Calculadora: 420,
        "Análise de Dados": 350,
        "Geração de Imagens": 30,
        Tradução: 20,
      },
      dailyMetrics: [
        { day: "Seg", queries: 160, successRate: 95 },
        { day: "Ter", queries: 175, successRate: 97 },
        { day: "Qua", queries: 190, successRate: 98 },
        { day: "Qui", queries: 165, successRate: 96 },
        { day: "Sex", queries: 180, successRate: 97 },
        { day: "Sáb", queries: 60, successRate: 94 },
        { day: "Dom", queries: 50, successRate: 93 },
      ],
      capabilities: {
        reasoning: 92,
        knowledge: 95,
        creativity: 70,
        efficiency: 90,
        accuracy: 96,
      },
    },
  },
  {
    id: "agent-3",
    name: "SolarInstallHelper",
    description: "Assistente para instalação e manutenção de sistemas solares",
    model: "GPT-4o",
    version: "1.2.8",
    status: "maintenance",
    metrics: {
      successRate: 91.8,
      responseTime: 450,
      costPerQuery: 0.028,
      queryVolume: 1450,
      userSatisfaction: 4.5,
      toolUsage: {
        "Busca na Web": 380,
        Calculadora: 310,
        "Análise de Dados": 180,
        "Geração de Imagens": 120,
        Tradução: 60,
      },
      dailyMetrics: [
        { day: "Seg", queries: 240, successRate: 90 },
        { day: "Ter", queries: 235, successRate: 92 },
        { day: "Qua", queries: 250, successRate: 93 },
        { day: "Qui", queries: 260, successRate: 91 },
        { day: "Sex", queries: 245, successRate: 92 },
        { day: "Sáb", queries: 120, successRate: 90 },
        { day: "Dom", queries: 100, successRate: 89 },
      ],
      capabilities: {
        reasoning: 80,
        knowledge: 85,
        creativity: 65,
        efficiency: 82,
        accuracy: 88,
      },
    },
  },
]

interface AgentComparisonProps {
  initialAgentIds?: string[]
}

export function AgentComparison({ initialAgentIds }: AgentComparisonProps) {
  const [selectedAgentIds, setSelectedAgentIds] = React.useState<string[]>(
    initialAgentIds || [sampleAgents[0].id, sampleAgents[1].id],
  )
  const [isRefreshing, setIsRefreshing] = React.useState(false)
  const [sortMetric, setSortMetric] = React.useState<keyof AgentMetrics>("successRate")
  const [sortDirection, setSortDirection] = React.useState<"asc" | "desc">("desc")

  const selectedAgents = sampleAgents.filter((agent) => selectedAgentIds.includes(agent.id))

  const availableAgents = sampleAgents.filter((agent) => !selectedAgentIds.includes(agent.id))

  const handleAddAgent = (agentId: string) => {
    if (selectedAgentIds.length < 3) {
      setSelectedAgentIds([...selectedAgentIds, agentId])
    }
  }

  const handleRemoveAgent = (agentId: string) => {
    if (selectedAgentIds.length > 1) {
      setSelectedAgentIds(selectedAgentIds.filter((id) => id !== agentId))
    }
  }

  const handleRefresh = () => {
    setIsRefreshing(true)
    // Simulação de atualização de dados
    setTimeout(() => {
      setIsRefreshing(false)
    }, 1000)
  }

  const toggleSortDirection = () => {
    setSortDirection(sortDirection === "asc" ? "desc" : "asc")
  }

  // Ordenar agentes com base na métrica selecionada
  const sortedAgents = [...selectedAgents].sort((a, b) => {
    const valueA = a.metrics[sortMetric] as number
    const valueB = b.metrics[sortMetric] as number
    return sortDirection === "asc" ? valueA - valueB : valueB - valueA
  })

  // Preparar dados para gráficos comparativos
  const prepareBarChartData = (metric: keyof AgentMetrics) => {
    return selectedAgents.map((agent) => ({
      name: agent.name,
      value: agent.metrics[metric],
    }))
  }

  // Dados para o gráfico de radar
  const radarData = selectedAgents.map((agent) => ({
    subject: agent.name,
    reasoning: agent.metrics.capabilities.reasoning,
    knowledge: agent.metrics.capabilities.knowledge,
    creativity: agent.metrics.capabilities.creativity,
    efficiency: agent.metrics.capabilities.efficiency,
    accuracy: agent.metrics.capabilities.accuracy,
  }))

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h2 className="text-2xl font-bold">Comparação de Agentes</h2>
          <p className="text-muted-foreground">Compare o desempenho e características de diferentes agentes</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={isRefreshing}>
            <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
          </Button>
          <Button variant="outline" size="icon">
            <Download className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <div className="flex flex-wrap gap-2 items-center">
        <span className="text-sm font-medium">Agentes selecionados:</span>
        {selectedAgents.map((agent) => (
          <Badge key={agent.id} variant="outline" className="flex items-center gap-1">
            {agent.name}
            <Button variant="ghost" size="icon" className="h-4 w-4 ml-1" onClick={() => handleRemoveAgent(agent.id)}>
              <Minus className="h-3 w-3" />
            </Button>
          </Badge>
        ))}
        {availableAgents.length > 0 && selectedAgents.length < 3 && (
          <Select onValueChange={(value) => handleAddAgent(value)} value="">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Adicionar agente" />
            </SelectTrigger>
            <SelectContent>
              {availableAgents.map((agent) => (
                <SelectItem key={agent.id} value={agent.id}>
                  {agent.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}
      </div>

      <Card>
        <CardHeader>
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>Métricas Principais</CardTitle>
              <CardDescription>Comparação das métricas de desempenho chave</CardDescription>
            </div>
            <div className="flex items-center gap-2">
              <Select value={sortMetric} onValueChange={(value) => setSortMetric(value as keyof AgentMetrics)}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="Ordenar por" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="successRate">Taxa de Sucesso</SelectItem>
                  <SelectItem value="responseTime">Tempo de Resposta</SelectItem>
                  <SelectItem value="costPerQuery">Custo por Consulta</SelectItem>
                  <SelectItem value="queryVolume">Volume de Consultas</SelectItem>
                  <SelectItem value="userSatisfaction">Satisfação do Usuário</SelectItem>
                </SelectContent>
              </Select>
              <Button variant="ghost" size="icon" onClick={toggleSortDirection}>
                <ArrowUpDown className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            {sortedAgents.map((agent) => (
              <React.Fragment key={agent.id}>
                <Card className="col-span-1 md:col-span-2 lg:col-span-1">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Taxa de Sucesso</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">{agent.metrics.successRate}%</div>
                    <p className="text-xs text-muted-foreground">{agent.name}</p>
                  </CardContent>
                </Card>
                <Card className="col-span-1 md:col-span-2 lg:col-span-1">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Tempo de Resposta</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">{agent.metrics.responseTime}ms</div>
                    <p className="text-xs text-muted-foreground">{agent.name}</p>
                  </CardContent>
                </Card>
                <Card className="col-span-1 md:col-span-2 lg:col-span-1">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Custo por Consulta</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">${agent.metrics.costPerQuery.toFixed(3)}</div>
                    <p className="text-xs text-muted-foreground">{agent.name}</p>
                  </CardContent>
                </Card>
                <Card className="col-span-1 md:col-span-2 lg:col-span-1">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Volume de Consultas</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">{agent.metrics.queryVolume}</div>
                    <p className="text-xs text-muted-foreground">{agent.name}</p>
                  </CardContent>
                </Card>
                <Card className="col-span-1 md:col-span-2 lg:col-span-1">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Satisfação do Usuário</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">{agent.metrics.userSatisfaction}/5</div>
                    <p className="text-xs text-muted-foreground">{agent.name}</p>
                  </CardContent>
                </Card>
              </React.Fragment>
            ))}
          </div>
        </CardContent>
      </Card>

      <Tabs defaultValue="performance" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="performance">Desempenho</TabsTrigger>
          <TabsTrigger value="capabilities">Capacidades</TabsTrigger>
          <TabsTrigger value="tools">Uso de Ferramentas</TabsTrigger>
        </TabsList>
        <TabsContent value="performance" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Taxa de Sucesso Diária</CardTitle>
              <CardDescription>Comparação da taxa de sucesso ao longo da semana</CardDescription>
            </CardHeader>
            <CardContent className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="day" allowDuplicatedCategory={false} />
                  <YAxis domain={[80, 100]} />
                  <Tooltip />
                  <Legend />
                  {selectedAgents.map((agent, index) => (
                    <Line
                      key={agent.id}
                      type="monotone"
                      data={agent.metrics.dailyMetrics}
                      dataKey="successRate"
                      name={agent.name}
                      stroke={`hsl(${index * 120}, 70%, 50%)`}
                      activeDot={{ r: 8 }}
                    />
                  ))}
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Volume de Consultas Diário</CardTitle>
              <CardDescription>Comparação do volume de consultas ao longo da semana</CardDescription>
            </CardHeader>
            <CardContent className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="day" allowDuplicatedCategory={false} />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  {selectedAgents.map((agent, index) => (
                    <Line
                      key={agent.id}
                      type="monotone"
                      data={agent.metrics.dailyMetrics}
                      dataKey="queries"
                      name={agent.name}
                      stroke={`hsl(${index * 120}, 70%, 50%)`}
                    />
                  ))}
                </LineChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="capabilities" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Perfil de Capacidades</CardTitle>
              <CardDescription>Comparação das capacidades dos agentes em diferentes dimensões</CardDescription>
            </CardHeader>
            <CardContent className="h-96">
              <ResponsiveContainer width="100%" height="100%">
                <RadarChart cx="50%" cy="50%" outerRadius="80%" data={radarData}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey="subject" />
                  <PolarRadiusAxis angle={30} domain={[0, 100]} />
                  {selectedAgents.map((agent, index) => (
                    <Radar
                      key={agent.id}
                      name={agent.name}
                      dataKey={agent.name}
                      stroke={`hsl(${index * 120}, 70%, 50%)`}
                      fill={`hsl(${index * 120}, 70%, 50%)`}
                      fillOpacity={0.2}
                    />
                  ))}
                  <Legend />
                  <Tooltip />
                </RadarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            {["reasoning", "knowledge", "creativity", "efficiency", "accuracy"].map((capability) => (
              <Card key={capability}>
                <CardHeader className="pb-2">
                  <CardTitle className="text-sm font-medium capitalize">{capability}</CardTitle>
                </CardHeader>
                <CardContent className="h-60">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={selectedAgents.map((agent) => ({
                        name: agent.name,
                        value: agent.metrics.capabilities[capability as keyof typeof agent.metrics.capabilities],
                      }))}
                      layout="vertical"
                      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis type="number" domain={[0, 100]} />
                      <YAxis dataKey="name" type="category" width={100} />
                      <Tooltip />
                      <Bar dataKey="value" fill="#8884d8" />
                    </BarChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>
        <TabsContent value="tools" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Utilização de Ferramentas</CardTitle>
              <CardDescription>Comparação do uso de diferentes ferramentas pelos agentes</CardDescription>
            </CardHeader>
            <CardContent className="h-96">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={[
                    { name: "Busca na Web" },
                    { name: "Calculadora" },
                    { name: "Análise de Dados" },
                    { name: "Geração de Imagens" },
                    { name: "Tradução" },
                  ].map((item) => {
                    const result: any = { name: item.name }
                    selectedAgents.forEach((agent) => {
                      result[agent.name] = agent.metrics.toolUsage[item.name]
                    })
                    return result
                  })}
                  margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  {selectedAgents.map((agent, index) => (
                    <Bar key={agent.id} dataKey={agent.name} fill={`hsl(${index * 120}, 70%, 50%)`} />
                  ))}
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {selectedAgents.map((agent) => (
              <Card key={agent.id}>
                <CardHeader>
                  <CardTitle>{agent.name}</CardTitle>
                  <CardDescription>Distribuição de uso de ferramentas</CardDescription>
                </CardHeader>
                <CardContent className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={Object.entries(agent.metrics.toolUsage).map(([name, value]) => ({
                        name,
                        value,
                      }))}
                      layout="vertical"
                      margin={{ top: 5, right: 30, left: 100, bottom: 5 }}
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis type="number" />
                      <YAxis dataKey="name" type="category" width={100} />
                      <Tooltip />
                      <Bar dataKey="value" fill="#8884d8" />
                    </BarChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Detalhes dos Agentes</CardTitle>
          <CardDescription>Informações detalhadas sobre os agentes comparados</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {selectedAgents.map((agent) => (
              <div key={agent.id} className="space-y-4">
                <div>
                  <h3 className="text-lg font-bold">{agent.name}</h3>
                  <p className="text-sm text-muted-foreground">{agent.description}</p>
                </div>
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div>
                    <span className="text-muted-foreground">Modelo:</span>
                    <p>{agent.model}</p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Versão:</span>
                    <p>{agent.version}</p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Status:</span>
                    <p>
                      <Badge
                        variant={
                          agent.status === "active"
                            ? "success"
                            : agent.status === "maintenance"
                              ? "warning"
                              : "secondary"
                        }
                      >
                        {agent.status === "active"
                          ? "Ativo"
                          : agent.status === "maintenance"
                            ? "Em Manutenção"
                            : "Inativo"}
                      </Badge>
                    </p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">ID:</span>
                    <p className="font-mono text-xs">{agent.id}</p>
                  </div>
                </div>
                <Button variant="outline" size="sm" className="w-full">
                  Ver Detalhes Completos
                </Button>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/data-export.tsx" isMerged="true"
"use client"

import React from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Download, FileJson, FileSpreadsheet, FileIcon as FilePdf, FileText, Calendar, Check } from "lucide-react"

export type ExportFormat = "csv" | "json" | "pdf" | "xlsx"

export interface DataExportProps {
  title?: string
  description?: string
  formats?: ExportFormat[]
  defaultFormat?: ExportFormat
  fields?: string[]
  dateRange?: boolean
  onExport?: (format: ExportFormat, options: ExportOptions) => void
  isExporting?: boolean
}

export interface ExportOptions {
  format: ExportFormat
  fields: string[]
  dateRange?: {
    start: string
    end: string
  }
  includeHeaders?: boolean
  compression?: boolean
}

export function DataExport({
  title = "Exportar Dados",
  description = "Selecione o formato e as opções para exportar os dados",
  formats = ["csv", "json", "pdf", "xlsx"],
  defaultFormat = "csv",
  fields = [],
  dateRange = true,
  onExport,
  isExporting = false,
}: DataExportProps) {
  const [format, setFormat] = React.useState<ExportFormat>(defaultFormat)
  const [selectedFields, setSelectedFields] = React.useState<string[]>(fields)
  const [includeHeaders, setIncludeHeaders] = React.useState(true)
  const [compression, setCompression] = React.useState(false)
  const [dateStart, setDateStart] = React.useState("")
  const [dateEnd, setDateEnd] = React.useState("")
  const [exportSuccess, setExportSuccess] = React.useState(false)

  const handleExport = () => {
    if (onExport) {
      const options: ExportOptions = {
        format,
        fields: selectedFields,
        includeHeaders,
        compression,
      }

      if (dateRange && dateStart && dateEnd) {
        options.dateRange = {
          start: dateStart,
          end: dateEnd,
        }
      }

      onExport(format, options)

      // Simulação de sucesso após exportação
      setTimeout(() => {
        setExportSuccess(true)
        setTimeout(() => setExportSuccess(false), 3000)
      }, 1500)
    }
  }

  const toggleField = (field: string) => {
    if (selectedFields.includes(field)) {
      setSelectedFields(selectedFields.filter((f) => f !== field))
    } else {
      setSelectedFields([...selectedFields, field])
    }
  }

  const selectAllFields = () => {
    setSelectedFields([...fields])
  }

  const deselectAllFields = () => {
    setSelectedFields([])
  }

  const getFormatIcon = (format: ExportFormat) => {
    switch (format) {
      case "csv":
        return <FileSpreadsheet className="h-4 w-4" />
      case "json":
        return <FileJson className="h-4 w-4" />
      case "pdf":
        return <FilePdf className="h-4 w-4" />
      case "xlsx":
        return <FileSpreadsheet className="h-4 w-4" />
      default:
        return <FileText className="h-4 w-4" />
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div>
          <h3 className="text-sm font-medium mb-3">Formato</h3>
          <RadioGroup
            value={format}
            onValueChange={(value) => setFormat(value as ExportFormat)}
            className="grid grid-cols-2 sm:grid-cols-4 gap-2"
          >
            {formats.map((fmt) => (
              <div key={fmt}>
                <RadioGroupItem value={fmt} id={`format-${fmt}`} className="peer sr-only" />
                <Label
                  htmlFor={`format-${fmt}`}
                  className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
                >
                  {getFormatIcon(fmt)}
                  <span className="mt-2 font-medium uppercase">{fmt}</span>
                </Label>
              </div>
            ))}
          </RadioGroup>
        </div>

        <Tabs defaultValue="fields" className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="fields">Campos</TabsTrigger>
            <TabsTrigger value="options">Opções</TabsTrigger>
          </TabsList>
          <TabsContent value="fields" className="space-y-4">
            <div className="flex justify-between items-center">
              <h3 className="text-sm font-medium">Selecionar Campos</h3>
              <div className="space-x-2">
                <Button variant="outline" size="sm" onClick={selectAllFields}>
                  Selecionar Todos
                </Button>
                <Button variant="outline" size="sm" onClick={deselectAllFields}>
                  Limpar
                </Button>
              </div>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              {fields.map((field) => (
                <div key={field} className="flex items-center space-x-2">
                  <Checkbox
                    id={`field-${field}`}
                    checked={selectedFields.includes(field)}
                    onCheckedChange={() => toggleField(field)}
                  />
                  <Label htmlFor={`field-${field}`}>{field}</Label>
                </div>
              ))}
            </div>
          </TabsContent>
          <TabsContent value="options" className="space-y-4">
            {dateRange && (
              <div className="space-y-2">
                <h3 className="text-sm font-medium">Período</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="date-start">Data Inicial</Label>
                    <div className="relative">
                      <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                      <input
                        type="date"
                        id="date-start"
                        className="flex h-10 w-full rounded-md border border-input bg-background pl-8 pr-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        value={dateStart}
                        onChange={(e) => setDateStart(e.target.value)}
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="date-end">Data Final</Label>
                    <div className="relative">
                      <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                      <input
                        type="date"
                        id="date-end"
                        className="flex h-10 w-full rounded-md border border-input bg-background pl-8 pr-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        value={dateEnd}
                        onChange={(e) => setDateEnd(e.target.value)}
                      />
                    </div>
                  </div>
                </div>
              </div>
            )}

            <div className="space-y-2">
              <h3 className="text-sm font-medium">Opções Adicionais</h3>
              <div className="space-y-2">
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="include-headers"
                    checked={includeHeaders}
                    onCheckedChange={(checked) => setIncludeHeaders(!!checked)}
                  />
                  <Label htmlFor="include-headers">Incluir cabeçalhos</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Checkbox
                    id="compression"
                    checked={compression}
                    onCheckedChange={(checked) => setCompression(!!checked)}
                  />
                  <Label htmlFor="compression">Comprimir arquivo</Label>
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="flex justify-between">
        <div>
          {selectedFields.length > 0 ? (
            <p className="text-sm text-muted-foreground">{selectedFields.length} campo(s) selecionado(s)</p>
          ) : (
            <p className="text-sm text-destructive">Selecione pelo menos um campo</p>
          )}
        </div>
        <Button
          onClick={handleExport}
          disabled={isExporting || selectedFields.length === 0 || (dateRange && (!dateStart || !dateEnd))}
        >
          {exportSuccess ? (
            <>
              <Check className="mr-2 h-4 w-4" />
              Exportado
            </>
          ) : isExporting ? (
            <>
              <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
              Exportando...
            </>
          ) : (
            <>
              <Download className="mr-2 h-4 w-4" />
              Exportar
            </>
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/api/agent-orchestration.ts" isMerged="true"
/**
 * Sistema de orquestração de agentes para o EOS Solar Payments
 *
 * Este módulo fornece funcionalidades para orquestrar múltiplos agentes,
 * permitindo que eles colaborem em tarefas complexas, delegando subtarefas
 * e agregando resultados.
 */

import { v4 as uuidv4 } from "uuid"

// Tipos
export interface AgentTask {
  id: string
  agentId: string
  type: string
  status: "pending" | "in-progress" | "completed" | "failed"
  input: Record<string, any>
  output?: Record<string, any>
  error?: string
  parentTaskId?: string
  childTaskIds: string[]
  createdAt: Date
  updatedAt: Date
  completedAt?: Date
}

export interface TaskResult {
  success: boolean
  data?: Record<string, any>
  error?: string
}

export interface AgentCapability {
  type: string
  description: string
  parameters: Record<string, any>
}

export interface AgentDefinition {
  id: string
  name: string
  capabilities: AgentCapability[]
}

// Classe principal de orquestração
export class AgentOrchestrator {
  private agents: Map<string, AgentDefinition> = new Map()
  private tasks: Map<string, AgentTask> = new Map()
  private taskQueue: string[] = []
  private isProcessing = false
  private maxConcurrentTasks = 5
  private activeTasks = 0

  constructor(maxConcurrentTasks = 5) {
    this.maxConcurrentTasks = maxConcurrentTasks
  }

  /**
   * Registra um agente no orquestrador
   */
  registerAgent(agent: AgentDefinition): void {
    this.agents.set(agent.id, agent)
    console.log(`Agente registrado: ${agent.name} (${agent.id})`)
  }

  /**
   * Remove um agente do orquestrador
   */
  unregisterAgent(agentId: string): boolean {
    return this.agents.delete(agentId)
  }

  /**
   * Verifica se um agente possui uma capacidade específica
   */
  hasCapability(agentId: string, capabilityType: string): boolean {
    const agent = this.agents.get(agentId)
    if (!agent) return false

    return agent.capabilities.some((cap) => cap.type === capabilityType)
  }

  /**
   * Cria uma nova tarefa para um agente
   */
  createTask(agentId: string, type: string, input: Record<string, any>, parentTaskId?: string): string {
    // Verificar se o agente existe
    if (!this.agents.has(agentId)) {
      throw new Error(`Agente não encontrado: ${agentId}`)
    }

    // Verificar se o agente tem a capacidade necessária
    if (!this.hasCapability(agentId, type)) {
      throw new Error(`Agente ${agentId} não possui a capacidade: ${type}`)
    }

    const taskId = uuidv4()
    const task: AgentTask = {
      id: taskId,
      agentId,
      type,
      status: "pending",
      input,
      childTaskIds: [],
      parentTaskId,
      createdAt: new Date(),
      updatedAt: new Date(),
    }

    this.tasks.set(taskId, task)
    this.taskQueue.push(taskId)

    // Se houver uma tarefa pai, adicionar esta como filha
    if (parentTaskId) {
      const parentTask = this.tasks.get(parentTaskId)
      if (parentTask) {
        parentTask.childTaskIds.push(taskId)
        this.tasks.set(parentTaskId, parentTask)
      }
    }

    // Iniciar processamento se não estiver em andamento
    if (!this.isProcessing) {
      this.processTasks()
    }

    return taskId
  }

  /**
   * Processa tarefas na fila
   */
  private async processTasks(): Promise<void> {
    if (this.isProcessing) return

    this.isProcessing = true

    try {
      while (this.taskQueue.length > 0 && this.activeTasks < this.maxConcurrentTasks) {
        const taskId = this.taskQueue.shift()
        if (!taskId) continue

        const task = this.tasks.get(taskId)
        if (!task) continue

        this.activeTasks++

        // Atualizar status da tarefa
        task.status = "in-progress"
        task.updatedAt = new Date()
        this.tasks.set(taskId, task)

        // Executar tarefa de forma assíncrona
        this.executeTask(taskId).finally(() => {
          this.activeTasks--
          // Continuar processando se houver mais tarefas
          if (this.taskQueue.length > 0) {
            this.processTasks()
          } else if (this.activeTasks === 0) {
            this.isProcessing = false
          }
        })
      }

      if (this.activeTasks === 0) {
        this.isProcessing = false
      }
    } catch (error) {
      console.error("Erro ao processar tarefas:", error)
      this.isProcessing = false
    }
  }

  /**
   * Executa uma tarefa específica
   */
  private async executeTask(taskId: string): Promise<void> {
    const task = this.tasks.get(taskId)
    if (!task) return

    try {
      console.log(`Executando tarefa ${taskId} (${task.type}) para agente ${task.agentId}`)

      // Aqui seria a chamada real para o agente executar a tarefa
      // Simulando uma execução assíncrona
      const result = await this.simulateAgentExecution(task)

      // Atualizar tarefa com resultado
      task.status = result.success ? "completed" : "failed"
      task.output = result.data
      task.error = result.error
      task.completedAt = new Date()
      task.updatedAt = new Date()

      this.tasks.set(taskId, task)

      // Se a tarefa foi bem-sucedida e tem uma tarefa pai, verificar se todas as tarefas filhas estão completas
      if (result.success && task.parentTaskId) {
        this.checkParentTaskCompletion(task.parentTaskId)
      }

      console.log(`Tarefa ${taskId} concluída com status: ${task.status}`)
    } catch (error) {
      console.error(`Erro ao executar tarefa ${taskId}:`, error)

      // Atualizar tarefa com erro
      task.status = "failed"
      task.error = error instanceof Error ? error.message : "Erro desconhecido"
      task.updatedAt = new Date()

      this.tasks.set(taskId, task)
    }
  }

  /**
   * Verifica se todas as tarefas filhas de uma tarefa pai estão completas
   */
  private checkParentTaskCompletion(parentTaskId: string): void {
    const parentTask = this.tasks.get(parentTaskId)
    if (!parentTask) return

    // Verificar se todas as tarefas filhas estão completas
    const allChildrenComplete = parentTask.childTaskIds.every((childId) => {
      const childTask = this.tasks.get(childId)
      return childTask && childTask.status === "completed"
    })

    if (allChildrenComplete) {
      // Agregar resultados das tarefas filhas
      const aggregatedResults: Record<string, any> = {}

      parentTask.childTaskIds.forEach((childId) => {
        const childTask = this.tasks.get(childId)
        if (childTask && childTask.output) {
          // Usar o tipo da tarefa como chave para o resultado
          aggregatedResults[childTask.type] = childTask.output
        }
      })

      // Atualizar tarefa pai
      parentTask.status = "completed"
      parentTask.output = aggregatedResults
      parentTask.completedAt = new Date()
      parentTask.updatedAt = new Date()

      this.tasks.set(parentTaskId, parentTask)

      console.log(`Tarefa pai ${parentTaskId} concluída com resultados agregados`)

      // Se esta tarefa pai também tem um pai, verificar recursivamente
      if (parentTask.parentTaskId) {
        this.checkParentTaskCompletion(parentTask.parentTaskId)
      }
    }
  }

  /**
   * Simula a execução de uma tarefa por um agente
   * Em um ambiente real, isso chamaria a API do agente
   */
  private async simulateAgentExecution(task: AgentTask): Promise<TaskResult> {
    // Simulação de processamento assíncrono
    return new Promise((resolve) => {
      const processingTime = Math.random() * 2000 + 1000 // 1-3 segundos

      setTimeout(() => {
        // Simular 90% de chance de sucesso
        const success = Math.random() < 0.9

        if (success) {
          resolve({
            success: true,
            data: {
              result: `Resultado processado para ${task.type}`,
              timestamp: new Date().toISOString(),
              processingTime,
              ...task.input,
            },
          })
        } else {
          resolve({
            success: false,
            error: `Falha simulada ao processar tarefa ${task.type}`,
          })
        }
      }, processingTime)
    })
  }

  /**
   * Obtém o status de uma tarefa
   */
  getTaskStatus(taskId: string): AgentTask | null {
    return this.tasks.get(taskId) || null
  }

  /**
   * Obtém todas as tarefas relacionadas a um workflow (tarefa pai e filhas)
   */
  getWorkflowTasks(rootTaskId: string): AgentTask[] {
    const result: AgentTask[] = []
    const rootTask = this.tasks.get(rootTaskId)

    if (!rootTask) return result

    // Função recursiva para coletar todas as tarefas
    const collectTasks = (taskId: string) => {
      const task = this.tasks.get(taskId)
      if (!task) return

      result.push(task)

      // Coletar tarefas filhas recursivamente
      task.childTaskIds.forEach((childId) => collectTasks(childId))
    }

    collectTasks(rootTaskId)
    return result
  }

  /**
   * Cria um workflow complexo com múltiplos agentes
   */
  createWorkflow(workflowType: string, input: Record<string, any>, agentMap: Record<string, string>): string {
    // Criar tarefa raiz para o workflow
    const rootTaskId = this.createTask(agentMap.coordinator || Object.values(agentMap)[0], workflowType, input)

    // Aqui seria implementada a lógica para criar subtarefas com base no tipo de workflow
    // Por exemplo, para um workflow de análise financeira:
    if (workflowType === "financial-analysis") {
      if (agentMap.dataCollector) {
        this.createTask(
          agentMap.dataCollector,
          "collect-financial-data",
          { source: input.source, period: input.period },
          rootTaskId,
        )
      }

      if (agentMap.analyst) {
        this.createTask(agentMap.analyst, "analyze-financial-data", { metrics: input.metrics }, rootTaskId)
      }

      if (agentMap.reporter) {
        this.createTask(
          agentMap.reporter,
          "generate-financial-report",
          { format: input.format, includeCharts: input.includeCharts },
          rootTaskId,
        )
      }
    }

    return rootTaskId
  }
}

// Exportar uma instância singleton
export const orchestrator = new AgentOrchestrator()

// Funções auxiliares para uso em componentes
export async function createAgentTask(agentId: string, type: string, input: Record<string, any>): Promise<string> {
  try {
    return orchestrator.createTask(agentId, type, input)
  } catch (error) {
    console.error("Erro ao criar tarefa:", error)
    throw error
  }
}

export async function getTaskResult(taskId: string): Promise<AgentTask | null> {
  return orchestrator.getTaskStatus(taskId)
}

export async function createMultiAgentWorkflow(
  workflowType: string,
  input: Record<string, any>,
  agentMap: Record<string, string>,
): Promise<string> {
  return orchestrator.createWorkflow(workflowType, input, agentMap)
}
[V0_FILE]typescriptreact:file="app/api/agents/[id]/metrics/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Tipos para métricas de agentes
interface AgentMetric {
  timestamp: string
  successRate: number
  responseTime: number
  queryCount: number
  tokenUsage: number
  costEstimate: number
}

interface ToolUsage {
  toolName: string
  usageCount: number
  successRate: number
}

interface AgentMetricsResponse {
  agentId: string
  timeRange: {
    start: string
    end: string
  }
  summary: {
    totalQueries: number
    averageSuccessRate: number
    averageResponseTime: number
    totalTokenUsage: number
    totalCost: number
    userSatisfactionScore: number
  }
  metrics: AgentMetric[]
  toolUsage: ToolUsage[]
  topQueries: {
    query: string
    count: number
  }[]
}

// Função para gerar dados de métricas simulados
function generateMockMetrics(agentId: string, days = 7): AgentMetricsResponse {
  const metrics: AgentMetric[] = []
  const now = new Date()
  let totalQueries = 0
  let totalSuccessRate = 0
  let totalResponseTime = 0
  let totalTokens = 0
  let totalCost = 0

  // Gerar métricas diárias
  for (let i = 0; i < days; i++) {
    const date = new Date(now)
    date.setDate(date.getDate() - i)

    // Gerar entre 3-8 pontos de dados por dia
    const pointsPerDay = Math.floor(Math.random() * 6) + 3

    for (let j = 0; j < pointsPerDay; j++) {
      const hour = Math.floor(Math.random() * 24)
      date.setHours(hour)

      const successRate = Math.random() * 15 + 85 // 85-100%
      const responseTime = Math.random() * 500 + 200 // 200-700ms
      const queryCount = Math.floor(Math.random() * 50) + 10 // 10-60 queries
      const tokenUsage = queryCount * (Math.floor(Math.random() * 200) + 100) // 100-300 tokens per query
      const costEstimate = tokenUsage * 0.000002 // $0.000002 per token

      totalQueries += queryCount
      totalSuccessRate += successRate
      totalResponseTime += responseTime
      totalTokens += tokenUsage
      totalCost += costEstimate

      metrics.push({
        timestamp: date.toISOString(),
        successRate,
        responseTime,
        queryCount,
        tokenUsage,
        costEstimate,
      })
    }
  }

  // Ordenar métricas por timestamp
  metrics.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())

  // Calcular médias
  const totalDataPoints = metrics.length
  const averageSuccessRate = totalSuccessRate / totalDataPoints
  const averageResponseTime = totalResponseTime / totalDataPoints

  // Gerar uso de ferramentas
  const tools = ["Busca na Web", "Calculadora", "Análise de Dados", "Geração de Imagens", "Tradução"]
  const toolUsage: ToolUsage[] = tools.map((tool) => ({
    toolName: tool,
    usageCount: Math.floor(Math.random() * 300) + 50,
    successRate: Math.random() * 15 + 85,
  }))

  // Gerar consultas mais frequentes
  const topQueries = [
    { query: "Análise de desempenho solar", count: Math.floor(Math.random() * 50) + 30 },
    { query: "Cálculo de ROI para instalação", count: Math.floor(Math.random() * 40) + 25 },
    { query: "Problema com faturamento", count: Math.floor(Math.random() * 35) + 20 },
    { query: "Otimização de painéis solares", count: Math.floor(Math.random() * 30) + 15 },
    { query: "Comparação de fornecedores", count: Math.floor(Math.random() * 25) + 10 },
  ]

  // Calcular datas de início e fim
  const startDate = new Date(now)
  startDate.setDate(startDate.getDate() - days)

  return {
    agentId,
    timeRange: {
      start: startDate.toISOString(),
      end: now.toISOString(),
    },
    summary: {
      totalQueries,
      averageSuccessRate,
      averageResponseTime,
      totalTokenUsage: totalTokens,
      totalCost,
      userSatisfactionScore: Math.random() * 1 + 4, // 4.0-5.0
    },
    metrics,
    toolUsage,
    topQueries,
  }
}

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params
    const { searchParams } = new URL(request.url)

    // Parâmetros opcionais
    const days = Number.parseInt(searchParams.get("days") || "7", 10)
    const detailed = searchParams.get("detailed") === "true"

    // Validar parâmetros
    if (isNaN(days) || days < 1 || days > 90) {
      return NextResponse.json({ error: "O parâmetro 'days' deve ser um número entre 1 e 90" }, { status: 400 })
    }

    // Em um ambiente real, buscaríamos as métricas do banco de dados
    // Para este exemplo, geramos dados simulados
    const metricsData = generateMockMetrics(id, days)

    // Se não for detalhado, reduzir a quantidade de pontos de dados
    if (!detailed && metricsData.metrics.length > 24) {
      // Agrupar por dia para reduzir o volume de dados
      const dailyMetrics: Record<string, AgentMetric> = {}

      metricsData.metrics.forEach((metric) => {
        const date = new Date(metric.timestamp).toISOString().split("T")[0]

        if (!dailyMetrics[date]) {
          dailyMetrics[date] = {
            timestamp: `${date}T12:00:00Z`, // Meio-dia como representativo
            successRate: 0,
            responseTime: 0,
            queryCount: 0,
            tokenUsage: 0,
            costEstimate: 0,
          }
        }

        dailyMetrics[date].successRate += metric.successRate
        dailyMetrics[date].responseTime += metric.responseTime
        dailyMetrics[date].queryCount += metric.queryCount
        dailyMetrics[date].tokenUsage += metric.tokenUsage
        dailyMetrics[date].costEstimate += metric.costEstimate
      })

      // Calcular médias para métricas percentuais
      Object.keys(dailyMetrics).forEach((date) => {
        const metricsForDay = metricsData.metrics.filter(
          (m) => new Date(m.timestamp).toISOString().split("T")[0] === date,
        )

        if (metricsForDay.length > 0) {
          dailyMetrics[date].successRate /= metricsForDay.length
          dailyMetrics[date].responseTime /= metricsForDay.length
        }
      })

      // Substituir métricas detalhadas por métricas diárias
      metricsData.metrics = Object.values(dailyMetrics).sort(
        (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
      )
    }

    return NextResponse.json(metricsData)
  } catch (error) {
    console.error("Erro ao buscar métricas do agente:", error)
    return NextResponse.json({ error: "Erro ao processar a solicitação" }, { status: 500 })
  }
}

// Endpoint para registrar novas métricas (em um ambiente real)
export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params
    const body = await request.json()

    // Validar corpo da requisição
    if (!body || typeof body !== "object") {
      return NextResponse.json({ error: "Corpo da requisição inválido" }, { status: 400 })
    }

    // Validar campos obrigatórios
    const requiredFields = ["successRate", "responseTime", "queryCount"]
    for (const field of requiredFields) {
      if (!(field in body)) {
        return NextResponse.json({ error: `Campo obrigatório ausente: ${field}` }, { status: 400 })
      }
    }

    // Em um ambiente real, salvaríamos as métricas no banco de dados
    // Para este exemplo, apenas simulamos uma resposta de sucesso

    return NextResponse.json({
      success: true,
      message: `Métricas registradas com sucesso para o agente ${id}`,
      timestamp: new Date().toISOString(),
    })
  } catch (error) {
    console.error("Erro ao registrar métricas do agente:", error)
    return NextResponse.json({ error: "Erro ao processar a solicitação" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/agents/[id]/versions/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Tipos para versionamento de agentes
interface AgentVersion {
  versionId: string
  agentId: string
  version: string
  createdAt: string
  createdBy: string
  status: "active" | "inactive" | "deprecated"
  changes: {
    type: "added" | "modified" | "removed"
    component: string
    description: string
  }[]
  config: {
    model: string
    temperature: number
    maxTokens: number
    systemPrompt: string
    tools: {
      id: string
      name: string
      enabled: boolean
    }[]
    [key: string]: any
  }
  metrics?: {
    successRate: number
    responseTime: number
    queryCount: number
  }
}

// Dados simulados de versões
const mockVersions: Record<string, AgentVersion[]> = {
  "agent-1": [
    {
      versionId: "v-1-3",
      agentId: "agent-1",
      version: "1.3.0",
      createdAt: "2023-06-10T14:30:00Z",
      createdBy: "user@example.com",
      status: "active",
      changes: [
        {
          type: "added",
          component: "tools",
          description: "Adicionada ferramenta de análise de dados",
        },
        {
          type: "modified",
          component: "prompt",
          description: "Melhorado prompt do sistema para maior precisão",
        },
      ],
      config: {
        model: "gpt-4o",
        temperature: 0.7,
        maxTokens: 2048,
        systemPrompt: "Você é um assistente especializado em energia solar...",
        tools: [
          { id: "web-search", name: "Busca na Web", enabled: true },
          { id: "calculator", name: "Calculadora", enabled: true },
          { id: "data-analysis", name: "Análise de Dados", enabled: true },
        ],
      },
      metrics: {
        successRate: 94.5,
        responseTime: 420,
        queryCount: 1250,
      },
    },
    {
      versionId: "v-1-2",
      agentId: "agent-1",
      version: "1.2.0",
      createdAt: "2023-05-15T10:20:00Z",
      createdBy: "user@example.com",
      status: "inactive",
      changes: [
        {
          type: "added",
          component: "tools",
          description: "Adicionada ferramenta de calculadora",
        },
        {
          type: "modified",
          component: "model",
          description: "Atualizado para GPT-4",
        },
      ],
      config: {
        model: "gpt-4",
        temperature: 0.7,
        maxTokens: 2048,
        systemPrompt: "Você é um assistente para questões de energia solar...",
        tools: [
          { id: "web-search", name: "Busca na Web", enabled: true },
          { id: "calculator", name: "Calculadora", enabled: true },
        ],
      },
      metrics: {
        successRate: 92.1,
        responseTime: 450,
        queryCount: 980,
      },
    },
    {
      versionId: "v-1-1",
      agentId: "agent-1",
      version: "1.1.0",
      createdAt: "2023-04-20T09:15:00Z",
      createdBy: "user@example.com",
      status: "deprecated",
      changes: [
        {
          type: "added",
          component: "tools",
          description: "Adicionada ferramenta de busca na web",
        },
      ],
      config: {
        model: "gpt-3.5-turbo",
        temperature: 0.8,
        maxTokens: 1024,
        systemPrompt: "Você é um assistente para questões de energia solar.",
        tools: [{ id: "web-search", name: "Busca na Web", enabled: true }],
      },
      metrics: {
        successRate: 88.5,
        responseTime: 380,
        queryCount: 750,
      },
    },
  ],
  "agent-2": [
    {
      versionId: "v-2-2",
      agentId: "agent-2",
      version: "2.1.0",
      createdAt: "2023-06-05T11:45:00Z",
      createdBy: "admin@example.com",
      status: "active",
      changes: [
        {
          type: "modified",
          component: "model",
          description: "Atualizado para Claude-3-Opus",
        },
        {
          type: "added",
          component: "tools",
          description: "Adicionada ferramenta de análise financeira",
        },
      ],
      config: {
        model: "claude-3-opus",
        temperature: 0.5,
        maxTokens: 4096,
        systemPrompt: "Você é um especialista em análise financeira para projetos solares...",
        tools: [
          { id: "calculator", name: "Calculadora", enabled: true },
          { id: "data-analysis", name: "Análise de Dados", enabled: true },
          { id: "financial-analysis", name: "Análise Financeira", enabled: true },
        ],
      },
      metrics: {
        successRate: 96.2,
        responseTime: 380,
        queryCount: 980,
      },
    },
    {
      versionId: "v-2-1",
      agentId: "agent-2",
      version: "2.0.0",
      createdAt: "2023-05-01T13:20:00Z",
      createdBy: "admin@example.com",
      status: "inactive",
      changes: [
        {
          type: "added",
          component: "initial",
          description: "Versão inicial do agente financeiro",
        },
      ],
      config: {
        model: "claude-2",
        temperature: 0.6,
        maxTokens: 2048,
        systemPrompt: "Você é um especialista em análise financeira para projetos solares.",
        tools: [
          { id: "calculator", name: "Calculadora", enabled: true },
          { id: "data-analysis", name: "Análise de Dados", enabled: true },
        ],
      },
      metrics: {
        successRate: 93.8,
        responseTime: 410,
        queryCount: 720,
      },
    },
  ],
}

// Obter todas as versões de um agente
export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params
    const { searchParams } = new URL(request.url)

    // Parâmetros opcionais
    const version = searchParams.get("version")
    const status = searchParams.get("status")

    // Verificar se o agente existe
    if (!mockVersions[id]) {
      return NextResponse.json({ error: `Agente com ID ${id} não encontrado` }, { status: 404 })
    }

    let versions = [...mockVersions[id]]

    // Filtrar por versão específica
    if (version) {
      versions = versions.filter((v) => v.version === version)

      if (versions.length === 0) {
        return NextResponse.json({ error: `Versão ${version} não encontrada para o agente ${id}` }, { status: 404 })
      }
    }

    // Filtrar por status
    if (status) {
      versions = versions.filter((v) => v.status === status)
    }

    // Ordenar por data de criação (mais recente primeiro)
    versions.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())

    return NextResponse.json({
      agentId: id,
      versions,
      count: versions.length,
    })
  } catch (error) {
    console.error("Erro ao buscar versões do agente:", error)
    return NextResponse.json({ error: "Erro ao processar a solicitação" }, { status: 500 })
  }
}

// Criar uma nova versão
export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params
    const body = await request.json()

    // Validar corpo da requisição
    if (!body || typeof body !== "object") {
      return NextResponse.json({ error: "Corpo da requisição inválido" }, { status: 400 })
    }

    // Validar campos obrigatórios
    const requiredFields = ["version", "changes", "config"]
    for (const field of requiredFields) {
      if (!(field in body)) {
        return NextResponse.json({ error: `Campo obrigatório ausente: ${field}` }, { status: 400 })
      }
    }

    // Verificar se o agente existe
    if (!mockVersions[id]) {
      mockVersions[id] = []
    }

    // Verificar se a versão já existe
    const versionExists = mockVersions[id].some((v) => v.version === body.version)
    if (versionExists) {
      return NextResponse.json({ error: `Versão ${body.version} já existe para o agente ${id}` }, { status: 409 })
    }

    // Criar nova versão
    const newVersion: AgentVersion = {
      versionId: `v-${id}-${Date.now()}`,
      agentId: id,
      version: body.version,
      createdAt: new Date().toISOString(),
      createdBy: body.createdBy || "system",
      status: body.status || "inactive",
      changes: body.changes,
      config: body.config,
    }

    // Em um ambiente real, salvaríamos no banco de dados
    // Para este exemplo, adicionamos ao mock
    mockVersions[id].push(newVersion)

    return NextResponse.json({
      success: true,
      message: `Versão ${body.version} criada com sucesso para o agente ${id}`,
      version: newVersion,
    })
  } catch (error) {
    console.error("Erro ao criar versão do agente:", error)
    return NextResponse.json({ error: "Erro ao processar a solicitação" }, { status: 500 })
  }
}

// Atualizar status de uma versão
export async function PATCH(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params
    const { searchParams } = new URL(request.url)
    const version = searchParams.get("version")

    if (!version) {
      return NextResponse.json({ error: "Parâmetro 'version' é obrigatório" }, { status: 400 })
    }

    const body = await request.json()

    // Validar corpo da requisição
    if (!body || typeof body !== "object" || !body.status) {
      return NextResponse.json({ error: "Campo 'status' é obrigatório" }, { status: 400 })
    }

    // Verificar se o status é válido
    if (!["active", "inactive", "deprecated"].includes(body.status)) {
      return NextResponse.json(
        { error: "Status inválido. Valores permitidos: active, inactive, deprecated" },
        { status: 400 },
      )
    }

    // Verificar se o agente existe
    if (!mockVersions[id]) {
      return NextResponse.json({ error: `Agente com ID ${id} não encontrado` }, { status: 404 })
    }

    // Encontrar a versão
    const versionIndex = mockVersions[id].findIndex((v) => v.version === version)
    if (versionIndex === -1) {
      return NextResponse.json({ error: `Versão ${version} não encontrada para o agente ${id}` }, { status: 404 })
    }

    // Se estamos ativando uma versão, desativar todas as outras
    if (body.status === "active") {
      mockVersions[id].forEach((v, i) => {
        if (i !== versionIndex && v.status === "active") {
          v.status = "inactive"
        }
      })
    }

    // Atualizar status
    mockVersions[id][versionIndex].status = body.status

    return NextResponse.json({
      success: true,
      message: `Status da versão ${version} atualizado para ${body.status}`,
      version: mockVersions[id][versionIndex],
    })
  } catch (error) {
    console.error("Erro ao atualizar status da versão:", error)
    return NextResponse.json({ error: "Erro ao processar a solicitação" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="lib/agents/validation.ts" isMerged="true"
/**
 * Biblioteca de validação para configurações de agentes
 *
 * Este módulo fornece funções para validar configurações de agentes
 * antes da persistência, prevenindo estados inválidos e comportamentos inesperados.
 */

// Tipos para configurações de agentes
export interface AgentBasicInfo {
  name: string
  description: string
  purpose: string
  tags: string[]
}

export interface AgentModelConfig {
  provider: string
  modelName: string
  temperature: number
  maxTokens: number
  topP?: number
  frequencyPenalty?: number
  presencePenalty?: number
}

export interface AgentTool {
  id: string
  name: string
  description: string
  enabled: boolean
  config?: Record<string, any>
}

export interface AgentPromptConfig {
  systemPrompt: string
  examples: Array<{
    user: string
    assistant: string
  }>
}

export interface AgentDeploymentConfig {
  environment: "development" | "staging" | "production"
  serverType: "dedicated" | "shared"
  region: string
  autoScale: boolean
  minInstances: number
  maxInstances: number
  memoryAllocation: number
  enableLogging: boolean
  enableMonitoring: boolean
}

export interface AgentConfig {
  basicInfo: AgentBasicInfo
  model: AgentModelConfig
  tools: AgentTool[]
  prompts: AgentPromptConfig
  deployment?: AgentDeploymentConfig
}

// Tipos para resultados de validação
export interface ValidationError {
  field: string
  message: string
}

export interface ValidationResult {
  valid: boolean
  errors: ValidationError[]
}

// Constantes para validação
const MAX_NAME_LENGTH = 100
const MAX_DESCRIPTION_LENGTH = 500
const MAX_PURPOSE_LENGTH = 1000
const MAX_TAGS = 10
const MAX_TAG_LENGTH = 30
const MIN_SYSTEM_PROMPT_LENGTH = 10
const MAX_SYSTEM_PROMPT_LENGTH = 4000
const MAX_EXAMPLES = 10
const MIN_TEMPERATURE = 0
const MAX_TEMPERATURE = 2
const MIN_MAX_TOKENS = 100
const MAX_MAX_TOKENS = 32000

// Validadores individuais

/**
 * Valida informações básicas do agente
 */
export function validateBasicInfo(info: AgentBasicInfo): ValidationResult {
  const errors: ValidationError[] = []

  // Validar nome
  if (!info.name || info.name.trim() === "") {
    errors.push({
      field: "basicInfo.name",
      message: "O nome do agente é obrigatório",
    })
  } else if (info.name.length > MAX_NAME_LENGTH) {
    errors.push({
      field: "basicInfo.name",
      message: `O nome do agente não pode exceder ${MAX_NAME_LENGTH} caracteres`,
    })
  }

  // Validar descrição
  if (!info.description || info.description.trim() === "") {
    errors.push({
      field: "basicInfo.description",
      message: "A descrição do agente é obrigatória",
    })
  } else if (info.description.length > MAX_DESCRIPTION_LENGTH) {
    errors.push({
      field: "basicInfo.description",
      message: `A descrição do agente não pode exceder ${MAX_DESCRIPTION_LENGTH} caracteres`,
    })
  }

  // Validar propósito
  if (info.purpose && info.purpose.length > MAX_PURPOSE_LENGTH) {
    errors.push({
      field: "basicInfo.purpose",
      message: `O propósito do agente não pode exceder ${MAX_PURPOSE_LENGTH} caracteres`,
    })
  }

  // Validar tags
  if (info.tags && Array.isArray(info.tags)) {
    if (info.tags.length > MAX_TAGS) {
      errors.push({
        field: "basicInfo.tags",
        message: `O número máximo de tags é ${MAX_TAGS}`,
      })
    }

    info.tags.forEach((tag, index) => {
      if (typeof tag !== "string") {
        errors.push({
          field: `basicInfo.tags[${index}]`,
          message: "A tag deve ser uma string",
        })
      } else if (tag.length > MAX_TAG_LENGTH) {
        errors.push({
          field: `basicInfo.tags[${index}]`,
          message: `A tag não pode exceder ${MAX_TAG_LENGTH} caracteres`,
        })
      }
    })
  } else if (info.tags) {
    errors.push({
      field: "basicInfo.tags",
      message: "Tags deve ser um array",
    })
  }

  return {
    valid: errors.length === 0,
    errors,
  }
}

/**
 * Valida configuração do modelo
 */
export function validateModelConfig(config: AgentModelConfig): ValidationResult {
  const errors: ValidationError[] = []

  // Validar provedor
  if (!config.provider || config.provider.trim() === "") {
    errors.push({
      field: "model.provider",
      message: "O provedor do modelo é obrigatório",
    })
  }

  // Validar nome do modelo
  if (!config.modelName || config.modelName.trim() === "") {
    errors.push({
      field: "model.modelName",
      message: "O nome do modelo é obrigatório",
    })
  }

  // Validar temperatura
  if (config.temperature === undefined || config.temperature === null) {
    errors.push({
      field: "model.temperature",
      message: "A temperatura é obrigatória",
    })
  } else if (
    typeof config.temperature !== "number" ||
    config.temperature < MIN_TEMPERATURE ||
    config.temperature > MAX_TEMPERATURE
  ) {
    errors.push({
      field: "model.temperature",
      message: `A temperatura deve ser um número entre ${MIN_TEMPERATURE} e ${MAX_TEMPERATURE}`,
    })
  }

  // Validar maxTokens
  if (config.maxTokens === undefined || config.maxTokens === null) {
    errors.push({
      field: "model.maxTokens",
      message: "O número máximo de tokens é obrigatório",
    })
  } else if (
    typeof config.maxTokens !== "number" ||
    config.maxTokens < MIN_MAX_TOKENS ||
    config.maxTokens > MAX_MAX_TOKENS
  ) {
    errors.push({
      field: "model.maxTokens",
      message: `O número máximo de tokens deve ser um número entre ${MIN_MAX_TOKENS} e ${MAX_MAX_TOKENS}`,
    })
  }

  // Validar parâmetros opcionais
  if (config.topP !== undefined && (typeof config.topP !== "number" || config.topP < 0 || config.topP > 1)) {
    errors.push({
      field: "model.topP",
      message: "O valor de topP deve ser um número entre 0 e 1",
    })
  }

  if (
    config.frequencyPenalty !== undefined &&
    (typeof config.frequencyPenalty !== "number" || config.frequencyPenalty < -2 || config.frequencyPenalty > 2)
  ) {
    errors.push({
      field: "model.frequencyPenalty",
      message: "O valor de frequencyPenalty deve ser um número entre -2 e 2",
    })
  }

  if (
    config.presencePenalty !== undefined &&
    (typeof config.presencePenalty !== "number" || config.presencePenalty < -2 || config.presencePenalty > 2)
  ) {
    errors.push({
      field: "model.presencePenalty",
      message: "O valor de presencePenalty deve ser um número entre -2 e 2",
    })
  }

  return {
    valid: errors.length === 0,
    errors,
  }
}

/**
 * Valida ferramentas do agente
 */
export function validateTools(tools: AgentTool[]): ValidationResult {
  const errors: ValidationError[] = []

  if (!Array.isArray(tools)) {
    return {
      valid: false,
      errors: [
        {
          field: "tools",
          message: "Ferramentas deve ser um array",
        },
      ],
    }
  }

  // Verificar IDs duplicados
  const toolIds = new Set<string>()
  tools.forEach((tool, index) => {
    // Validar ID
    if (!tool.id || tool.id.trim() === "") {
      errors.push({
        field: `tools[${index}].id`,
        message: "O ID da ferramenta é obrigatório",
      })
    } else if (toolIds.has(tool.id)) {
      errors.push({
        field: `tools[${index}].id`,
        message: `ID duplicado: ${tool.id}`,
      })
    } else {
      toolIds.add(tool.id)
    }

    // Validar nome
    if (!tool.name || tool.name.trim() === "") {
      errors.push({
        field: `tools[${index}].name`,
        message: "O nome da ferramenta é obrigatório",
      })
    }

    // Validar enabled
    if (typeof tool.enabled !== "boolean") {
      errors.push({
        field: `tools[${index}].enabled`,
        message: "O campo 'enabled' deve ser um booleano",
      })
    }

    // Validar config se presente
    if (tool.config && typeof tool.config !== "object") {
      errors.push({
        field: `tools[${index}].config`,
        message: "A configuração da ferramenta deve ser um objeto",
      })
    }
  })

  return {
    valid: errors.length === 0,
    errors,
  }
}

/**
 * Valida configuração de prompts
 */
export function validatePromptConfig(config: AgentPromptConfig): ValidationResult {
  const errors: ValidationError[] = []

  // Validar systemPrompt
  if (!config.systemPrompt || config.systemPrompt.trim() === "") {
    errors.push({
      field: "prompts.systemPrompt",
      message: "O prompt do sistema é obrigatório",
    })
  } else if (config.systemPrompt.length < MIN_SYSTEM_PROMPT_LENGTH) {
    errors.push({
      field: "prompts.systemPrompt",
      message: `O prompt do sistema deve ter pelo menos ${MIN_SYSTEM_PROMPT_LENGTH} caracteres`,
    })
  } else if (config.systemPrompt.length > MAX_SYSTEM_PROMPT_LENGTH) {
    errors.push({
      field: "prompts.systemPrompt",
      message: `O prompt do sistema não pode exceder ${MAX_SYSTEM_PROMPT_LENGTH} caracteres`,
    })
  }

  // Validar exemplos
  if (config.examples) {
    if (!Array.isArray(config.examples)) {
      errors.push({
        field: "prompts.examples",
        message: "Exemplos deve ser um array",
      })
    } else if (config.examples.length > MAX_EXAMPLES) {
      errors.push({
        field: "prompts.examples",
        message: `O número máximo de exemplos é ${MAX_EXAMPLES}`,
      })
    } else {
      config.examples.forEach((example, index) => {
        if (!example.user || example.user.trim() === "") {
          errors.push({
            field: `prompts.examples[${index}].user`,
            message: "A mensagem do usuário é obrigatória",
          })
        }
        if (!example.assistant || example.assistant.trim() === "") {
          errors.push({
            field: `prompts.examples[${index}].assistant`,
            message: "A resposta do assistente é obrigatória",
          })
        }
      })
    }
  }

  return {
    valid: errors.length === 0,
    errors,
  }
}

/**
 * Valida configuração de implantação
 */
export function validateDeploymentConfig(config?: AgentDeploymentConfig): ValidationResult {
  if (!config) {
    return { valid: true, errors: [] }
  }

  const errors: ValidationError[] = []

  // Validar ambiente
  if (!["development", "staging", "production"].includes(config.environment)) {
    errors.push({
      field: "deployment.environment",
      message: "O ambiente deve ser 'development', 'staging' ou 'production'",
    })
  }

  // Validar tipo de servidor
  if (!["dedicated", "shared"].includes(config.serverType)) {
    errors.push({
      field: "deployment.serverType",
      message: "O tipo de servidor deve ser 'dedicated' ou 'shared'",
    })
  }

  // Validar região
  if (!config.region || config.region.trim() === "") {
    errors.push({
      field: "deployment.region",
      message: "A região é obrigatória",
    })
  }

  // Validar autoScale
  if (typeof config.autoScale !== "boolean") {
    errors.push({
      field: "deployment.autoScale",
      message: "O campo 'autoScale' deve ser um booleano",
    })
  }

  // Validar instâncias
  if (config.autoScale) {
    if (typeof config.minInstances !== "number" || config.minInstances < 1) {
      errors.push({
        field: "deployment.minInstances",
        message: "O número mínimo de instâncias deve ser pelo menos 1",
      })
    }

    if (typeof config.maxInstances !== "number" || config.maxInstances < config.minInstances) {
      errors.push({
        field: "deployment.maxInstances",
        message: "O número máximo de instâncias deve ser maior ou igual ao mínimo",
      })
    }
  }

  // Validar alocação de memória
  if (typeof config.memoryAllocation !== "number" || config.memoryAllocation < 1) {
    errors.push({
      field: "deployment.memoryAllocation",
      message: "A alocação de memória deve ser pelo menos 1GB",
    })
  }

  // Validar logging e monitoramento
  if (typeof config.enableLogging !== "boolean") {
    errors.push({
      field: "deployment.enableLogging",
      message: "O campo 'enableLogging' deve ser um booleano",
    })
  }

  if (typeof config.enableMonitoring !== "boolean") {
    errors.push({
      field: "deployment.enableMonitoring",
      message: "O campo 'enableMonitoring' deve ser um booleano",
    })
  }

  return {
    valid: errors.length === 0,
    errors,
  }
}

/**
 * Valida a configuração completa do agente
 */
export function validateAgentConfig(config: AgentConfig): ValidationResult {
  // Validar cada seção
  const basicInfoResult = validateBasicInfo(config.basicInfo)
  const modelResult = validateModelConfig(config.model)
  const toolsResult = validateTools(config.tools)
  const promptsResult = validatePromptConfig(config.prompts)
  const deploymentResult = validateDeploymentConfig(config.deployment)

  // Combinar resultados
  const errors = [
    ...basicInfoResult.errors,
    ...modelResult.errors,
    ...toolsResult.errors,
    ...promptsResult.errors,
    ...deploymentResult.errors,
  ]

  return {
    valid: errors.length === 0,
    errors,
  }
}

/**
 * Formata erros de validação para exibição amigável
 */
export function formatValidationErrors(result: ValidationResult): string[] {
  return result.errors.map((error) => `${error.field}: ${error.message}`)
}

/**
 * Verifica se uma configuração de agente é válida e lança erro se não for
 */
export function assertValidAgentConfig(config: AgentConfig): void {
  const result = validateAgentConfig(config)
  if (!result.valid) {
    throw new Error(`Configuração de agente inválida: ${formatValidationErrors(result).join("; ")}`)
  }
}
[V0_FILE]typescriptreact:file="lib/db/connection-pool.ts" isMerged="true"
/**
 * Gerenciador de pool de conexões com o banco de dados
 *
 * Este módulo fornece um pool de conexões configurado para
 * otimizar a utilização de recursos e garantir resiliência.
 */

import { Pool, type PoolClient } from "pg"

// Configuração do pool de conexões
interface PoolConfig {
  host: string
  port: number
  database: string
  user: string
  password: string
  max: number
  idleTimeoutMillis: number
  connectionTimeoutMillis: number
  ssl?: boolean | { rejectUnauthorized: boolean }
}

// Classe para gerenciar o pool de conexões
export class DatabaseConnectionPool {
  private static instance: DatabaseConnectionPool
  private pool: Pool
  private isConnected = false

  private constructor() {
    // Obter configuração do ambiente
    const config: PoolConfig = {
      host: process.env.DB_HOST || "localhost",
      port: Number.parseInt(process.env.DB_PORT || "5432", 10),
      database: process.env.DB_NAME || "eos_solar",
      user: process.env.DB_USER || "postgres",
      password: process.env.DB_PASSWORD || "postgres",
      max: Number.parseInt(process.env.DB_POOL_MAX || "20", 10),
      idleTimeoutMillis: Number.parseInt(process.env.DB_IDLE_TIMEOUT || "30000", 10),
      connectionTimeoutMillis: Number.parseInt(process.env.DB_CONNECTION_TIMEOUT || "5000", 10),
      ssl: process.env.DB_SSL === "true" ? { rejectUnauthorized: false } : false,
    }

    // Criar pool
    this.pool = new Pool(config)

    // Configurar listeners de eventos
    this.setupEventListeners()
  }

  /**
   * Obtém a instância singleton do pool de conexões
   */
  public static getInstance(): DatabaseConnectionPool {
    if (!DatabaseConnectionPool.instance) {
      DatabaseConnectionPool.instance = new DatabaseConnectionPool()
    }
    return DatabaseConnectionPool.instance
  }

  /**
   * Configura listeners de eventos para o pool
   */
  private setupEventListeners(): void {
    // Evento de erro no pool
    this.pool.on("error", (err: Error, client: PoolClient) => {
      console.error("Erro inesperado no pool de conexões:", err)
      // Não encerrar o cliente aqui, o pool gerenciará isso
    })

    // Evento de conexão
    this.pool.on("connect", (client: PoolClient) => {
      this.isConnected = true
      console.log("Nova conexão estabelecida com o banco de dados")
    })

    // Evento de remoção de cliente
    this.pool.on("remove", () => {
      console.log("Cliente removido do pool")
    })
  }

  /**
   * Obtém uma conexão do pool
   */
  public async getConnection(): Promise<PoolClient> {
    try {
      const client = await this.pool.connect()
      return client
    } catch (error) {
      console.error("Erro ao obter conexão do pool:", error)
      throw error
    }
  }

  /**
   * Executa uma consulta usando uma conexão do pool
   */
  public async query<T>(text: string, params: any[] = []): Promise<T[]> {
    const client = await this.getConnection()
    try {
      const result = await client.query(text, params)
      return result.rows as T[]
    } finally {
      client.release()
    }
  }

  /**
   * Executa uma transação
   */
  public async transaction<T>(callback: (client: PoolClient) => Promise<T>): Promise<T> {
    const client = await this.getConnection()
    try {
      await client.query("BEGIN")
      const result = await callback(client)
      await client.query("COMMIT")
      return result
    } catch (error) {
      await client.query("ROLLBACK")
      throw error
    } finally {
      client.release()
    }
  }

  /**
   * Verifica o status do pool
   */
  public getStatus(): { totalCount: number; idleCount: number; waitingCount: number } {
    return {
      totalCount: this.pool.totalCount,
      idleCount: this.pool.idleCount,
      waitingCount: this.pool.waitingCount,
    }
  }

  /**
   * Verifica se o pool está conectado
   */
  public isPoolConnected(): boolean {
    return this.isConnected
  }

  /**
   * Encerra o pool de conexões
   */
  public async end(): Promise<void> {
    try {
      await this.pool.end()
      this.isConnected = false
      console.log("Pool de conexões encerrado")
    } catch (error) {
      console.error("Erro ao encerrar pool de conexões:", error)
      throw error
    }
  }
}

// Exportar instância singleton
export const dbPool = DatabaseConnectionPool.getInstance()

// Função auxiliar para executar consultas
export async function executeQuery<T>(text: string, params: any[] = []): Promise<T[]> {
  return dbPool.query<T>(text, params)
}

// Função auxiliar para executar transações
export async function executeTransaction<T>(callback: (client: PoolClient) => Promise<T>): Promise<T> {
  return dbPool.transaction<T>(callback)
}
[V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function AboutPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">About Us</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Learn more about Eos Solar Payments and our mission to transform payment processing for the solar
                industry.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Our Mission</h2>
                <p className="text-muted-foreground mb-6">
                  At Eos Solar Payments, our mission is to empower solar companies with flexible, reliable, and secure
                  payment infrastructure that helps them grow their business and focus on what matters most:
                  accelerating the transition to renewable energy.
                </p>
                <p className="text-muted-foreground mb-6">
                  We believe that payment processing should be a strategic advantage, not a bottleneck. That's why we've
                  built a modular, open-source platform that gives solar companies complete control over their payment
                  stack, with the flexibility to adapt to their unique needs.
                </p>
                <div className="mt-8">
                  <Link href="/about/company">
                    <Button>Learn More About Eos Solar Payments</Button>
                  </Link>
                </div>
              </div>
              <div className="bg-muted rounded-lg h-80 flex items-center justify-center">
                <div className="text-center">
                  <div className="w-24 h-24 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="32"
                      height="32"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <circle cx="12" cy="12" r="5" />
                      <path d="M12 1v2" />
                      <path d="M12 21v2" />
                      <path d="M4.2 4.2l1.4 1.4" />
                      <path d="M18.4 18.4l1.4 1.4" />
                      <path d="M1 12h2" />
                      <path d="M21 12h2" />
                      <path d="M4.2 19.8l1.4-1.4" />
                      <path d="M18.4 5.6l1.4-1.4" />
                    </svg>
                  </div>
                  <h3 className="text-xl font-medium">Powering the Solar Revolution</h3>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Since 2018, we've been dedicated to making solar energy more accessible through innovative payment
                    solutions.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight mb-12 text-center">Our Values</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-background rounded-lg p-8 shadow-sm">
                <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
                    <path d="m7 10 3 3 7-7" />
                  </svg>
                </div>
                <h3 className="text-xl font-medium mb-2">Transparency</h3>
                <p className="text-muted-foreground">
                  We believe in complete transparency in pricing, operations, and communication. No hidden fees, no
                  surprises.
                </p>
              </div>
              <div className="bg-background rounded-lg p-8 shadow-sm">
                <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                  </svg>
                </div>
                <h3 className="text-xl font-medium mb-2">Security</h3>
                <p className="text-muted-foreground">
                  We prioritize the security of your data and transactions with industry-leading security practices and
                  regular audits.
                </p>
              </div>
              <div className="bg-background rounded-lg p-8 shadow-sm">
                <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                    <circle cx="9" cy="7" r="4" />
                    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                  </svg>
                </div>
                <h3 className="text-xl font-medium mb-2">Community</h3>
                <p className="text-muted-foreground">
                  We're building a community of solar companies and developers to share knowledge and drive innovation
                  in the industry.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight mb-6">Our Team</h2>
              <p className="text-muted-foreground mb-12">
                We're a diverse team of engineers, designers, and industry experts passionate about renewable energy and
                financial technology.
              </p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="text-center">
                  <div className="w-32 h-32 rounded-full bg-muted mx-auto mb-4"></div>
                  <h3 className="font-medium">Team Member {i}</h3>
                  <p className="text-sm text-muted-foreground">Position</p>
                </div>
              ))}
            </div>
            <div className="mt-12 text-center">
              <Link href="/about/team">
                <Button variant="outline">View Full Team</Button>
              </Link>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight mb-6">Join Our Mission</h2>
              <p className="text-muted-foreground mb-8">
                We're always looking for talented individuals who share our passion for renewable energy and financial
                technology.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link href="/careers">
                  <Button>View Open Positions</Button>
                </Link>
                <Link href="/contact">
                  <Button variant="outline">Contact Us</Button>
                </Link>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/db/models/agent-model.ts" isEdit="true" isMerged="true"
/**
 * Modelo de dados para agentes
 *
 * Este módulo define a estrutura de dados para agentes,
 * incluindo validações, relacionamentos e métodos de acesso.
 */

import { v4 as uuidv4 } from "uuid"
import { executeQuery, executeTransaction } from "../connection-pool"
import type { PoolClient } from "pg"
import { validateAgentConfig, type AgentConfig } from "../../agents/validation"

// Tipos para o modelo de agente
export interface Agent {
  id: string
  name: string
  description: string
  purpose: string
  tags: string[]
  config: AgentConfig
  status: "active" | "inactive" | "maintenance"
  createdAt: Date
  updatedAt: Date
  createdBy: string
  currentVersionId?: string
}

export interface AgentVersion {
  id: string
  agentId: string
  version: string
  config: AgentConfig
  status: "active" | "inactive" | "deprecated"
  createdAt: Date
  createdBy: string
  changes: {
    type: "added" | "modified" | "removed"
    component: string
    description: string
  }[]
}

export interface AgentMetric {
  id: string
  agentId: string
  timestamp: Date
  successRate: number
  responseTime: number
  queryCount: number
  tokenUsage: number
  costEstimate: number
}

export interface AgentToolUsage {
  id: string
  agentId: string
  toolId: string
  toolName: string
  usageCount: number
  successRate: number
  timestamp: Date
}

// Classe para o modelo de agente
export class AgentModel {
  /**
   * Cria um novo agente
   */
  public static async create(
    name: string,
    description: string,
    purpose: string,
    tags: string[],
    config: AgentConfig,
    createdBy: string,
  ): Promise<Agent> {
    // Validar configuração
    const validationResult = validateAgentConfig(config)
    if (!validationResult.valid) {
      throw new Error(`Configuração inválida: ${validationResult.errors.map((e) => e.message).join(", ")}`)
    }

    const id = uuidv4()
    const now = new Date()

    return executeTransaction(async (client: PoolClient) => {
      // Inserir agente
      const agentResult = await client.query(
        `INSERT INTO agents (
          id, name, description, purpose, tags, config, status, created_at, updated_at, created_by
        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10) RETURNING *`,
        [id, name, description, purpose, JSON.stringify(tags), JSON.stringify(config), "inactive", now, now, createdBy],
      )

      // Criar versão inicial
      const versionId = uuidv4()
      await client.query(
        `INSERT INTO agent_versions (
          id, agent_id, version, config, status, created_at, created_by, changes
        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
        [
          versionId,
          id,
          "1.0.0",
          JSON.stringify(config),
          "inactive",
          now,
          createdBy,
          JSON.stringify([{ type: "added", component: "initial", description: "Versão inicial" }]),
        ],
      )

      // Atualizar agente com a versão atual
      await client.query(`UPDATE agents SET current_version_id = $1 WHERE id = $2`, [versionId, id])

      const agent = agentResult.rows[0]
      return {
        ...agent,
        tags: JSON.parse(agent.tags),
        config: JSON.parse(agent.config),
        createdAt: new Date(agent.created_at),
        updatedAt: new Date(agent.updated_at),
        createdBy: agent.created_by,
        currentVersionId: versionId,
      }
    })
  }

  /**
   * Busca um agente pelo ID
   */
  public static async findById(id: string): Promise<Agent | null> {
    const result = await executeQuery<any>("SELECT * FROM agents WHERE id = $1", [id])

    if (result.length === 0) {
      return null
    }

    const agent = result[0]
    return {
      id: agent.id,
      name: agent.name,
      description: agent.description,
      purpose: agent.purpose,
      tags: JSON.parse(agent.tags),
      config: JSON.parse(agent.config),
      status: agent.status,
      createdAt: new Date(agent.created_at),
      updatedAt: new Date(agent.updated_at),
      createdBy: agent.created_by,
      currentVersionId: agent.current_version_id,
    }
  }

  /**
   * Busca todos os agentes com opções de filtro
   */
  public static async findAll(
    options: {
      status?: "active" | "inactive" | "maintenance"
      tags?: string[]
      search?: string
      limit?: number
      offset?: number
    } = {},
  ): Promise<{ agents: Agent[]; total: number }> {
    const { status, tags, search, limit = 20, offset = 0 } = options

    // Construir consulta base
    let query = "SELECT * FROM agents"
    const countQuery = "SELECT COUNT(*) FROM agents"
    const params: any[] = []
    const conditions: string[] = []

    // Adicionar condições
    if (status) {
      conditions.push(`status = $${params.length + 1}`)
      params.push(status)
    }

    if (tags && tags.length > 0) {
      conditions.push(`tags @> $${params.length + 1}`)
      params.push(JSON.stringify(tags))
    }

    if (search) {
      conditions.push(`(name ILIKE $${params.length + 1} OR description ILIKE $${params.length + 1})`)
      params.push(`%${search}%`)
      params.push(`%${search}%`)
    }

    // Finalizar consulta
    if (conditions.length > 0) {
      query += " WHERE " + conditions.join(" AND ")
    }

    // Adicionar ordenação, limite e offset
    query += ` ORDER BY updated_at DESC LIMIT $${params.length + 1} OFFSET $${params.length + 2}`
    params.push(limit, offset)

    // Executar consultas
    const [agentsResult, countResult] = await Promise.all([
      executeQuery<any>(query, params),
      executeQuery<{ count: string }>(
        conditions.length > 0 ? countQuery + " WHERE " + conditions.join(" AND ") : countQuery,
        conditions.length > 0 ? params.slice(0, -2) : [],
      ),
    ])

    // Transformar resultados
    const agents = agentsResult.map((agent) => ({
      id: agent.id,
      name: agent.name,
      description: agent.description,
      purpose: agent.purpose,
      tags: JSON.parse(agent.tags),
      config: JSON.parse(agent.config),
      status: agent.status,
      createdAt: new Date(agent.created_at),
      updatedAt: new Date(agent.updated_at),
      createdBy: agent.created_by,
      currentVersionId: agent.current_version_id,
    }))

    return {
      agents,
      total: Number.parseInt(countResult[0].count, 10),
    }
  }

  /**
   * Atualiza um agente
   */
  public static async update(
    id: string,
    updates: Partial<Omit<Agent, "id" | "createdAt" | "createdBy" | "currentVersionId">>,
  ): Promise<Agent | null> {
    const agent = await this.findById(id)
    if (!agent) {
      return null
    }

    // Preparar campos para atualização
    const updateFields: string[] = []
    const values: any[] = []
    let paramIndex = 1

    if (updates.name !== undefined) {
      updateFields.push(`name = $${paramIndex++}`)
      values.push(updates.name)
    }

    if (updates.description !== undefined) {
      updateFields.push(`description = $${paramIndex++}`)
      values.push(updates.description)
    }

    if (updates.purpose !== undefined) {
      updateFields.push(`purpose = $${paramIndex++}`)
      values.push(updates.purpose)
    }

    if (updates.tags !== undefined) {
      updateFields.push(`tags = $${paramIndex++}`)
      values.push(JSON.stringify(updates.tags))
    }

    if (updates.config !== undefined) {
      // Validar configuração
      const validationResult = validateAgentConfig(updates.config)
      if (!validationResult.valid) {
        throw new Error(`Configuração inválida: ${validationResult.errors.map((e) => e.message).join(", ")}`)
      }

      updateFields.push(`config = $${paramIndex++}`)
      values.push(JSON.stringify(updates.config))
    }

    if (updates.status !== undefined) {
      updateFields.push(`status = $${paramIndex++}`)
      values.push(updates.status)
    }

    // Adicionar updated_at
    const now = new Date()
    updateFields.push(`updated_at = $${paramIndex++}`)
    values.push(now)

    // Adicionar ID como último parâmetro
    values.push(id)

    // Executar atualização
    const result = await executeQuery<any>(
      `UPDATE agents SET ${updateFields.join(", ")} WHERE id = $${paramIndex} RETURNING *`,
      values,
    )

    if (result.length === 0) {
      return null
    }

    const updatedAgent = result[0]
    return {
      id: updatedAgent.id,
      name: updatedAgent.name,
      description: updatedAgent.description,
      purpose: updatedAgent.purpose,
      tags: JSON.parse(updatedAgent.tags),
      config: JSON.parse(updatedAgent.config),
      status: updatedAgent.status,
      createdAt: new Date(updatedAgent.created_at),
      updatedAt: new Date(updatedAgent.updated_at),
      createdBy: updatedAgent.created_by,
      currentVersionId: updatedAgent.current_version_id,
    }
  }

  /**
   * Cria uma nova versão para um agente
   */
  public static async createVersion(
    agentId: string,
    version: string,
    config: AgentConfig,
    changes: AgentVersion["changes"],
    createdBy: string,
    status: AgentVersion["status"] = "inactive",
  ): Promise<AgentVersion> {
    // Validar configuração
    const validationResult = validateAgentConfig(config)
    if (!validationResult.valid) {
      throw new Error(`Configuração inválida: ${validationResult.errors.map((e) => e.message).join(", ")}`)
    }

    // Verificar se o agente existe
    const agent = await this.findById(agentId)
    if (!agent) {
      throw new Error(`Agente com ID ${agentId} não encontrado`)
    }

    // Verificar se a versão já existe
    const existingVersions = await this.getVersions(agentId)
    if (existingVersions.some((v) => v.version === version)) {
      throw new Error(`Versão ${version} já existe para o agente ${agentId}`)
    }

    const versionId = uuidv4()
    const now = new Date()

    // Inserir nova versão
    await executeQuery(
      `INSERT INTO agent_versions (
        id, agent_id, version, config, status, created_at, created_by, changes
      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
      [versionId, agentId, version, JSON.stringify(config), status, now, createdBy, JSON.stringify(changes)],
    )

    // Se a versão for ativa, atualizar o agente
    if (status === "active") {
      await executeQuery(`UPDATE agents SET current_version_id = $1, config = $2, updated_at = $3 WHERE id = $4`, [
        versionId,
        JSON.stringify(config),
        now,
        agentId,
      ])
    }

    return {
      id: versionId,
      agentId,
      version,
      config,
      status,
      createdAt: now,
      createdBy,
      changes,
    }
  }

  /**
   * Obtém todas as versões de um agente
   */
  public static async getVersions(agentId: string): Promise<AgentVersion[]> {
    const result = await executeQuery<any>(
      "SELECT * FROM agent_versions WHERE agent_id = $1 ORDER BY created_at DESC",
      [agentId],
    )

    return result.map((version) => ({
      id: version.id,
      agentId: version.agent_id,
      version: version.version,
      config: JSON.parse(version.config),
      status: version.status,
      createdAt: new Date(version.created_at),
      createdBy: version.created_by,
      changes: JSON.parse(version.changes),
    }))
  }

  /**
   * Ativa uma versão específica de um agente
   */
  public static async activateVersion(versionId: string): Promise<Agent | null> {
    return executeTransaction(async (client: PoolClient) => {
      // Buscar a versão
      const versionResult = await client.query("SELECT * FROM agent_versions WHERE id = $1", [versionId])

      if (versionResult.rows.length === 0) {
        return null
      }

      const version = versionResult.rows[0]
      const agentId = version.agent_id
      const now = new Date()

      // Desativar todas as versões do agente
      await client.query("UPDATE agent_versions SET status = $1 WHERE agent_id = $2 AND status = $3", [
        "inactive",
        agentId,
        "active",
      ])

      // Ativar a versão selecionada
      await client.query("UPDATE agent_versions SET status = $1 WHERE id = $2", ["active", versionId])

      // Atualizar o agente com a nova versão
      await client.query("UPDATE agents SET current_version_id = $1, config = $2, updated_at = $3 WHERE id = $4", [
        versionId,
        version.config,
        now,
        agentId,
      ])

      // Buscar o agente atualizado
      const agentResult = await client.query("SELECT * FROM agents WHERE id = $1", [agentId])

      if (agentResult.rows.length === 0) {
        return null
      }

      const agent = agentResult.rows[0]
      return {
        id: agent.id,
        name: agent.name,
        description: agent.description,
        purpose: agent.purpose,
        tags: JSON.parse(agent.tags),
        config: JSON.parse(agent.config),
        status: agent.status,
        createdAt: new Date(agent.created_at),
        updatedAt: new Date(agent.updated_at),
        createdBy: agent.created_by,
        currentVersionId: agent.current_version_id,
      }
    })
  }

  /**
   * Registra métricas para um agente
   */
  public static async recordMetrics(
    agentId: string,
    metrics: Omit<AgentMetric, "id" | "agentId" | "timestamp">,
  ): Promise<AgentMetric> {
    const id = uuidv4()
    const now = new Date()

    await executeQuery(
      `INSERT INTO agent_metrics (
        id, agent_id, timestamp, success_rate, response_time, query_count, token_usage, cost_estimate
      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
      [
        id,
        agentId,
        now,
        metrics.successRate,
        metrics.responseTime,
        metrics.queryCount,
        metrics.tokenUsage,
        metrics.costEstimate,
      ],
    )

    return {
      id,
      agentId,
      timestamp: now,
      ...metrics,
    }
  }

  /**
   * Obtém métricas de um agente em um período
   */
  public static async getMetrics(agentId: string, startDate: Date, endDate: Date): Promise<AgentMetric[]> {
    const result = await executeQuery<any>(
      `SELECT * FROM agent_metrics 
       WHERE agent_id = $1 AND timestamp >= $2 AND timestamp <= $3
       ORDER BY timestamp ASC`,
      [agentId, startDate, endDate],
    )

    return result.map((metric) => ({
      id: metric.id,
      agentId: metric.agent_id,
      timestamp: new Date(metric.timestamp),
      successRate: metric.success_rate,
      responseTime: metric.response_time,
      queryCount: metric.query_count,
      tokenUsage: metric.token_usage,
      costEstimate: metric.cost_estimate,
    }))
  }

  /**
   * Registra uso de ferramenta por um agente
   */
  public static async recordToolUsage(
    agentId: string,
    toolId: string,
    toolName: string,
    successRate: number,
  ): Promise<AgentToolUsage> {
    const id = uuidv4()
    const now = new Date()

    // Verificar se já existe um registro para esta ferramenta hoje
    const existingResult = await executeQuery<any>(
      `SELECT * FROM agent_tool_usage 
       WHERE agent_id = $1 AND tool_id = $2 
       AND DATE(timestamp) = DATE($3)`,
      [agentId, toolId, now],
    )

    if (existingResult.length > 0) {
      // Atualizar registro existente
      const existing = existingResult[0]
      const newUsageCount = existing.usage_count + 1
      const newSuccessRate = (existing.success_rate * existing.usage_count + successRate) / newUsageCount

      await executeQuery(
        `UPDATE agent_tool_usage 
         SET usage_count = $1, success_rate = $2, timestamp = $3
         WHERE id = $4`,
        [newUsageCount, newSuccessRate, now, existing.id],
      )

      return {
        id: existing.id,
        agentId,
        toolId,
        toolName,
        usageCount: newUsageCount,
        successRate: newSuccessRate,
        timestamp: now,
      }
    } else {
      // Criar novo registro
      await executeQuery(
        `INSERT INTO agent_tool_usage (
          id, agent_id, tool_id, tool_name, usage_count, success_rate, timestamp
        ) VALUES ($1, $2, $3, $4, $5, $6, $7)`,
        [id, agentId, toolId, toolName, 1, successRate, now],
      )

      return {
        id,
        agentId,
        toolId,
        toolName,
        usageCount: 1,
        successRate,
        timestamp: now,
      }
    }
  }

  /**
   * Obtém estatísticas de uso de ferramentas para um agente
   */
  public static async getToolUsageStats(agentId: string, startDate: Date, endDate: Date): Promise<AgentToolUsage[]> {
    const result = await executeQuery<any>(
      `SELECT * FROM agent_tool_usage 
       WHERE agent_id = $1 AND timestamp >= $2 AND timestamp <= $3
       ORDER BY usage_count DESC`,
      [agentId, startDate, endDate],
    )

    return result.map((usage) => ({
      id: usage.id,
      agentId: usage.agent_id,
      toolId: usage.tool_id,
      toolName: usage.tool_name,
      usageCount: usage.usage_count,
      successRate: usage.success_rate,
      timestamp: new Date(usage.timestamp),
    }))
  }

  /**
   * Exclui um agente e todos os dados relacionados
   */
  public static async delete(id: string): Promise<boolean> {
    return executeTransaction(async (client: PoolClient) => {
      // Excluir métricas
      await client.query("DELETE FROM agent_metrics WHERE agent_id = $1", [id])

      // Excluir uso de ferramentas
      await client.query("DELETE FROM agent_tool_usage WHERE agent_id = $1", [id])

      // Excluir versões
      await client.query("DELETE FROM agent_versions WHERE agent_id = $1", [id])

      // Excluir agente
      const result = await client.query("DELETE FROM agents WHERE id = $1", [id])

      return result.rowCount > 0
    })
  }
}
[V0_FILE]typescriptreact:file="components/dashboard/benchmark-comparison-chart.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"

const monthlyData = [
  {
    name: "Jan",
    "Sua Empresa": 65,
    "Média do Setor": 55,
    "Top Performers": 75,
  },
  {
    name: "Fev",
    "Sua Empresa": 59,
    "Média do Setor": 54,
    "Top Performers": 76,
  },
  {
    name: "Mar",
    "Sua Empresa": 62,
    "Média do Setor": 53,
    "Top Performers": 74,
  },
  {
    name: "Abr",
    "Sua Empresa": 58,
    "Média do Setor": 52,
    "Top Performers": 73,
  },
  {
    name: "Mai",
    "Sua Empresa": 65,
    "Média do Setor": 54,
    "Top Performers": 75,
  },
  {
    name: "Jun",
    "Sua Empresa": 61,
    "Média do Setor": 53,
    "Top Performers": 74,
  },
]

const quarterlyData = [
  {
    name: "Q1",
    "Sua Empresa": 62,
    "Média do Setor": 54,
    "Top Performers": 75,
  },
  {
    name: "Q2",
    "Sua Empresa": 61,
    "Média do Setor": 53,
    "Top Performers": 74,
  },
  {
    name: "Q3",
    "Sua Empresa": 59,
    "Média do Setor": 52,
    "Top Performers": 73,
  },
  {
    name: "Q4",
    "Sua Empresa": 58,
    "Média do Setor": 52,
    "Top Performers": 72,
  },
]

const yearlyData = [
  {
    name: "2020",
    "Sua Empresa": 55,
    "Média do Setor": 50,
    "Top Performers": 70,
  },
  {
    name: "2021",
    "Sua Empresa": 58,
    "Média do Setor": 51,
    "Top Performers": 71,
  },
  {
    name: "2022",
    "Sua Empresa": 60,
    "Média do Setor": 52,
    "Top Performers": 72,
  },
  {
    name: "2023",
    "Sua Empresa": 58,
    "Média do Setor": 52,
    "Top Performers": 72,
  },
]

export function BenchmarkComparisonChart() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const isDark = theme === "dark"
  const textColor = isDark ? "#f8fafc" : "#0f172a"
  const gridColor = isDark ? "#334155" : "#e2e8f0"

  return (
    <Card>
      <CardHeader>
        <CardTitle>Comparativo de Benchmarks</CardTitle>
        <CardDescription>Comparação da taxa de recuperação com a média do setor e top performers</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="monthly">
          <div className="flex justify-between items-center mb-4">
            <TabsList>
              <TabsTrigger value="monthly">Mensal</TabsTrigger>
              <TabsTrigger value="quarterly">Trimestral</TabsTrigger>
              <TabsTrigger value="yearly">Anual</TabsTrigger>
            </TabsList>
          </div>
          <TabsContent value="monthly" className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={monthlyData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
                <XAxis dataKey="name" stroke={textColor} />
                <YAxis stroke={textColor} />
                <Tooltip
                  contentStyle={{
                    backgroundColor: isDark ? "#1e293b" : "#ffffff",
                    color: textColor,
                    border: `1px solid ${gridColor}`,
                  }}
                />
                <Legend />
                <Bar dataKey="Sua Empresa" fill="#8884d8" />
                <Bar dataKey="Média do Setor" fill="#82ca9d" />
                <Bar dataKey="Top Performers" fill="#ffc658" />
              </BarChart>
            </ResponsiveContainer>
          </TabsContent>
          <TabsContent value="quarterly" className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={quarterlyData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
                <XAxis dataKey="name" stroke={textColor} />
                <YAxis stroke={textColor} />
                <Tooltip
                  contentStyle={{
                    backgroundColor: isDark ? "#1e293b" : "#ffffff",
                    color: textColor,
                    border: `1px solid ${gridColor}`,
                  }}
                />
                <Legend />
                <Bar dataKey="Sua Empresa" fill="#8884d8" />
                <Bar dataKey="Média do Setor" fill="#82ca9d" />
                <Bar dataKey="Top Performers" fill="#ffc658" />
              </BarChart>
            </ResponsiveContainer>
          </TabsContent>
          <TabsContent value="yearly" className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={yearlyData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
                <XAxis dataKey="name" stroke={textColor} />
                <YAxis stroke={textColor} />
                <Tooltip
                  contentStyle={{
                    backgroundColor: isDark ? "#1e293b" : "#ffffff",
                    color: textColor,
                    border: `1px solid ${gridColor}`,
                  }}
                />
                <Legend />
                <Bar dataKey="Sua Empresa" fill="#8884d8" />
                <Bar dataKey="Média do Setor" fill="#82ca9d" />
                <Bar dataKey="Top Performers" fill="#ffc658" />
              </BarChart>
            </ResponsiveContainer>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/industry-benchmark-card.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowDownIcon, ArrowUpIcon } from "lucide-react"

interface IndustryBenchmarkCardProps {
  title: string
  yourValue: string
  industryAvg: string
  topPerformers: string
  comparison: string
  positive: boolean
}

export function IndustryBenchmarkCard({
  title,
  yourValue,
  industryAvg,
  topPerformers,
  comparison,
  positive,
}: IndustryBenchmarkCardProps) {
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col space-y-6">
          <div className="flex items-center justify-between">
            <div className="text-sm text-muted-foreground">Seu Valor</div>
            <div className="text-2xl font-bold">{yourValue}</div>
          </div>
          <div className="flex items-center justify-between">
            <div className="text-sm text-muted-foreground">Média do Setor</div>
            <div className="text-lg">{industryAvg}</div>
          </div>
          <div className="flex items-center justify-between">
            <div className="text-sm text-muted-foreground">Top Performers</div>
            <div className="text-lg">{topPerformers}</div>
          </div>
          <div className="flex items-center justify-between pt-2 border-t">
            <div className="text-sm font-medium">Comparação</div>
            <div className={`flex items-center ${positive ? "text-green-500" : "text-red-500"}`}>
              {positive ? <ArrowUpIcon className="w-4 h-4 mr-1" /> : <ArrowDownIcon className="w-4 h-4 mr-1" />}
              <span>{comparison}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/benchmark-insights.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, AlertTriangle, TrendingUp, TrendingDown } from "lucide-react"

export function BenchmarkInsights() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Insights de Benchmark</CardTitle>
        <CardDescription>Análise comparativa do seu desempenho em relação ao setor</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-4">
            <h3 className="text-lg font-medium flex items-center">
              <CheckCircle className="w-5 h-5 mr-2 text-green-500" />
              Pontos Fortes
            </h3>
            <ul className="space-y-3">
              <li className="flex items-start">
                <TrendingUp className="w-4 h-4 mr-2 text-green-500 mt-0.5" />
                <div>
                  <p className="font-medium">Tempo de Recuperação</p>
                  <p className="text-sm text-muted-foreground">
                    28% mais rápido que a média do setor, resultando em melhor fluxo de caixa
                  </p>
                </div>
              </li>
              <li className="flex items-start">
                <TrendingUp className="w-4 h-4 mr-2 text-green-500 mt-0.5" />
                <div>
                  <p className="font-medium">Custo por Recuperação</p>
                  <p className="text-sm text-muted-foreground">
                    21% abaixo da média, indicando processos mais eficientes
                  </p>
                </div>
              </li>
              <li className="flex items-start">
                <TrendingUp className="w-4 h-4 mr-2 text-green-500 mt-0.5" />
                <div>
                  <p className="font-medium">ROI da Recuperação</p>
                  <p className="text-sm text-muted-foreground">45% acima da média, demonstrando estratégias eficazes</p>
                </div>
              </li>
            </ul>
          </div>
          <div className="space-y-4">
            <h3 className="text-lg font-medium flex items-center">
              <AlertTriangle className="w-5 h-5 mr-2 text-amber-500" />
              Oportunidades de Melhoria
            </h3>
            <ul className="space-y-3">
              <li className="flex items-start">
                <TrendingDown className="w-4 h-4 mr-2 text-amber-500 mt-0.5" />
                <div>
                  <p className="font-medium">Taxa de Recuperação em Cartões</p>
                  <p className="text-sm text-muted-foreground">
                    5% abaixo dos top performers, indicando oportunidade de otimização
                  </p>
                </div>
              </li>
              <li className="flex items-start">
                <TrendingDown className="w-4 h-4 mr-2 text-amber-500 mt-0.5" />
                <div>
                  <p className="font-medium">Recuperação Internacional</p>
                  <p className="text-sm text-muted-foreground">12% abaixo da média para transações internacionais</p>
                </div>
              </li>
              <li className="flex items-start">
                <TrendingDown className="w-4 h-4 mr-2 text-amber-500 mt-0.5" />
                <div>
                  <p className="font-medium">Tempo de Detecção</p>
                  <p className="text-sm text-muted-foreground">
                    Detecção de falhas 8% mais lenta que os top performers
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div className="mt-6 pt-4 border-t">
          <h3 className="text-lg font-medium mb-3">Recomendações Baseadas em Benchmarks</h3>
          <ul className="space-y-2">
            <li className="flex items-start">
              <div className="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-300 w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">
                1
              </div>
              <p className="text-sm">Implementar detecção precoce de falhas com base em padrões dos top performers</p>
            </li>
            <li className="flex items-start">
              <div className="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-300 w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">
                2
              </div>
              <p className="text-sm">
                Otimizar estratégias de retentativa para transações com cartão, focando em horários de maior sucesso
              </p>
            </li>
            <li className="flex items-start">
              <div className="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-300 w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">
                3
              </div>
              <p className="text-sm">
                Revisar processos de recuperação internacional, considerando parceiros locais nos mercados-chave
              </p>
            </li>
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/recovery-chart.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"

const dailyData = [
  { name: "Seg", taxa: 65, valor: 12500 },
  { name: "Ter", taxa: 59, valor: 10800 },
  { name: "Qua", taxa: 80, valor: 15200 },
  { name: "Qui", taxa: 81, valor: 15600 },
  { name: "Sex", taxa: 56, valor: 9800 },
  { name: "Sáb", taxa: 55, valor: 9500 },
  { name: "Dom", taxa: 40, valor: 7200 },
]

const weeklyData = [
  { name: "Semana 1", taxa: 65, valor: 42500 },
  { name: "Semana 2", taxa: 59, valor: 38800 },
  { name: "Semana 3", taxa: 80, valor: 55200 },
  { name: "Semana 4", taxa: 56, valor: 39800 },
]

const monthlyData = [
  { name: "Jan", taxa: 65, valor: 152500 },
  { name: "Fev", taxa: 59, valor: 138800 },
  { name: "Mar", taxa: 80, valor: 195200 },
  { name: "Abr", taxa: 81, valor: 205600 },
  { name: "Mai", taxa: 56, valor: 129800 },
  { name: "Jun", taxa: 55, valor: 125500 },
]

export function RecoveryChart() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const [chartType, setChartType] = useState<"line" | "area" | "bar">("line")

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const isDark = theme === "dark"
  const textColor = isDark ? "#f8fafc" : "#0f172a"
  const gridColor = isDark ? "#334155" : "#e2e8f0"

  const renderChart = (data: any[]) => {
    if (chartType === "line") {
      return (
        <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
          <XAxis dataKey="name" stroke={textColor} />
          <YAxis yAxisId="left" stroke="#8884d8" />
          <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
          <Tooltip
            contentStyle={{
              backgroundColor: isDark ? "#1e293b" : "#ffffff",
              color: textColor,
              border: `1px solid ${gridColor}`,
            }}
          />
          <Legend />
          <Line yAxisId="left" type="monotone" dataKey="taxa" stroke="#8884d8" name="Taxa de Recuperação (%)" />
          <Line yAxisId="right" type="monotone" dataKey="valor" stroke="#82ca9d" name="Valor Recuperado (R$)" />
        </LineChart>
      )
    } else if (chartType === "area") {
      return (
        <AreaChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
          <XAxis dataKey="name" stroke={textColor} />
          <YAxis yAxisId="left" stroke="#8884d8" />
          <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
          <Tooltip
            contentStyle={{
              backgroundColor: isDark ? "#1e293b" : "#ffffff",
              color: textColor,
              border: `1px solid ${gridColor}`,
            }}
          />
          <Legend />
          <Area
            yAxisId="left"
            type="monotone"
            dataKey="taxa"
            stroke="#8884d8"
            fill="#8884d8"
            fillOpacity={0.3}
            name="Taxa de Recuperação (%)"
          />
          <Area
            yAxisId="right"
            type="monotone"
            dataKey="valor"
            stroke="#82ca9d"
            fill="#82ca9d"
            fillOpacity={0.3}
            name="Valor Recuperado (R$)"
          />
        </AreaChart>
      )
    } else {
      return (
        <BarChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
          <XAxis dataKey="name" stroke={textColor} />
          <YAxis yAxisId="left" stroke="#8884d8" />
          <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
          <Tooltip
            contentStyle={{
              backgroundColor: isDark ? "#1e293b" : "#ffffff",
              color: textColor,
              border: `1px solid ${gridColor}`,
            }}
          />
          <Legend />
          <Bar yAxisId="left" dataKey="taxa" fill="#8884d8" name="Taxa de Recuperação (%)" />
          <Bar yAxisId="right" dataKey="valor" fill="#82ca9d" name="Valor Recuperado (R$)" />
        </BarChart>
      )
    }
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>Desempenho de Recuperação</CardTitle>
            <CardDescription>Taxa de recuperação e valor recuperado ao longo do tempo</CardDescription>
          </div>
          <div className="flex space-x-2">
            <button
              onClick={() => setChartType("line")}
              className={`p-1 rounded ${
                chartType === "line" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
              }`}
            >
              Linha
            </button>
            <button
              onClick={() => setChartType("area")}
              className={`p-1 rounded ${
                chartType === "area" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
              }`}
            >
              Área
            </button>
            <button
              onClick={() => setChartType("bar")}
              className={`p-1 rounded ${
                chartType === "bar" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
              }`}
            >
              Barra
            </button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="daily">
          <TabsList className="mb-4">
            <TabsTrigger value="daily">Diário</TabsTrigger>
            <TabsTrigger value="weekly">Semanal</TabsTrigger>
            <TabsTrigger value="monthly">Mensal</TabsTrigger>
          </TabsList>
          <TabsContent value="daily" className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              {renderChart(dailyData)}
            </ResponsiveContainer>
          </TabsContent>
          <TabsContent value="weekly" className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              {renderChart(weeklyData)}
            </ResponsiveContainer>
          </TabsContent>
          <TabsContent value="monthly" className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              {renderChart(monthlyData)}
            </ResponsiveContainer>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/prediction-chart.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import {
  Area,
  AreaChart,
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"

const predictionData = [
  { name: "Jan", atual: 65, previsao: null },
  { name: "Fev", atual: 59, previsao: null },
  { name: "Mar", atual: 80, previsao: null },
  { name: "Abr", atual: 58, previsao: null },
  { name: "Mai", atual: 56, previsao: null },
  { name: "Jun", atual: 61, previsao: null },
  { name: "Jul", atual: null, previsao: 63 },
  { name: "Ago", atual: null, previsao: 67 },
  { name: "Set", atual: null, previsao: 70 },
  { name: "Out", atual: null, previsao: 72 },
  { name: "Nov", atual: null, previsao: 68 },
  { name: "Dez", atual: null, previsao: 65 },
]

export function PredictionChart() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const [chartType, setChartType] = useState<"line" | "area">("line")

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const isDark = theme === "dark"
  const textColor = isDark ? "#f8fafc" : "#0f172a"
  const gridColor = isDark ? "#334155" : "#e2e8f0"

  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>Previsões de Recuperação</CardTitle>
            <CardDescription>Previsão de taxa de recuperação para os próximos 6 meses</CardDescription>
          </div>
          <div className="flex space-x-2">
            <button
              onClick={() => setChartType("line")}
              className={`p-1 rounded ${
                chartType === "line" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
              }`}
            >
              Linha
            </button>
            <button
              onClick={() => setChartType("area")}
              className={`p-1 rounded ${
                chartType === "area" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
              }`}
            >
              Área
            </button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            {chartType === "line" ? (
              <LineChart data={predictionData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
                <XAxis dataKey="name" stroke={textColor} />
                <YAxis stroke={textColor} />
                <Tooltip
                  contentStyle={{
                    backgroundColor: isDark ? "#1e293b" : "#ffffff",
                    color: textColor,
                    border: `1px solid ${gridColor}`,
                  }}
                />
                <Legend />
                <Line
                  type="monotone"
                  dataKey="atual"
                  stroke="#8884d8"
                  name="Taxa Atual (%)"
                  strokeWidth={2}
                  dot={{ r: 4 }}
                  activeDot={{ r: 6 }}
                />
                <Line
                  type="monotone"
                  dataKey="previsao"
                  stroke="#82ca9d"
                  name="Previsão (%)"
                  strokeWidth={2}
                  strokeDasharray="5 5"
                  dot={{ r: 4 }}
                  activeDot={{ r: 6 }}
                />
              </LineChart>
            ) : (
              <AreaChart data={predictionData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
                <XAxis dataKey="name" stroke={textColor} />
                <YAxis stroke={textColor} />
                <Tooltip
                  contentStyle={{
                    backgroundColor: isDark ? "#1e293b" : "#ffffff",
                    color: textColor,
                    border: `1px solid ${gridColor}`,
                  }}
                />
                <Legend />
                <Area
                  type="monotone"
                  dataKey="atual"
                  stroke="#8884d8"
                  fill="#8884d8"
                  fillOpacity={0.3}
                  name="Taxa Atual (%)"
                  strokeWidth={2}
                  dot={{ r: 4 }}
                  activeDot={{ r: 6 }}
                />
                <Area
                  type="monotone"
                  dataKey="previsao"
                  stroke="#82ca9d"
                  fill="#82ca9d"
                  fillOpacity={0.3}
                  name="Previsão (%)"
                  strokeWidth={2}
                  strokeDasharray="5 5"
                  dot={{ r: 4 }}
                  activeDot={{ r: 6 }}
                />
              </AreaChart>
            )}
          </ResponsiveContainer>
        </div>
        <div className="mt-4 p-3 bg-muted rounded-md">
          <h4 className="text-sm font-medium mb-2">Insights da IA:</h4>
          <p className="text-sm text-muted-foreground">
            Prevemos um aumento gradual na taxa de recuperação nos próximos 3 meses, atingindo um pico em outubro (72%),
            seguido por uma leve queda no final do ano devido à sazonalidade. Recomendamos reforçar estratégias de
            recuperação em novembro e dezembro.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/recovery-by-category.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"

const data = [
  { name: "Cartão de Crédito", value: 45, color: "#8884d8" },
  { name: "Débito Direto", value: 25, color: "#82ca9d" },
  { name: "Boleto", value: 15, color: "#ffc658" },
  { name: "Transferência", value: 10, color: "#ff8042" },
  { name: "Carteira Digital", value: 5, color: "#0088fe" },
]

export function RecoveryByCategory() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const isDark = theme === "dark"
  const textColor = isDark ? "#f8fafc" : "#0f172a"

  return (
    <Card>
      <CardHeader>
        <CardTitle>Recuperação por Categoria</CardTitle>
        <CardDescription>Distribuição de recuperações por método de pagamento</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                labelLine={false}
                outerRadius={80}
                fill="#8884d8"
                dataKey="value"
                label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
              >
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip
                formatter={(value) => [`${value}%`, "Percentual"]}
                contentStyle={{
                  backgroundColor: isDark ? "#1e293b" : "#ffffff",
                  color: textColor,
                  border: isDark ? "1px solid #334155" : "1px solid #e2e8f0",
                }}
              />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-3 bg-muted rounded-md">
            <h4 className="text-sm font-medium mb-1">Maior Taxa de Sucesso</h4>
            <p className="text-sm text-muted-foreground">
              Cartão de Crédito (92%) e Débito Direto (96%) apresentam as maiores taxas de recuperação bem-sucedida.
            </p>
          </div>
          <div className="p-3 bg-muted rounded-md">
            <h4 className="text-sm font-medium mb-1">Maior Oportunidade</h4>
            <p className="text-sm text-muted-foreground">
              Boletos (88%) apresentam a maior oportunidade de melhoria comparado aos benchmarks do setor (90%).
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/retry-strategy-performance.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"

const data = [
  {
    name: "Inteligente",
    "Taxa de Sucesso": 78,
    "Tempo Médio": 1.2,
    "Custo Relativo": 1.0,
  },
  {
    name: "Exponencial",
    "Taxa de Sucesso": 65,
    "Tempo Médio": 1.8,
    "Custo Relativo": 1.2,
  },
  {
    name: "Fixo",
    "Taxa de Sucesso": 58,
    "Tempo Médio": 2.5,
    "Custo Relativo": 1.5,
  },
  {
    name: "Imediato",
    "Taxa de Sucesso": 45,
    "Tempo Médio": 3.2,
    "Custo Relativo": 2.0,
  },
]

export function RetryStrategyPerformance() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const [metric, setMetric] = useState<"Taxa de Sucesso" | "Tempo Médio" | "Custo Relativo">("Taxa de Sucesso")

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const isDark = theme === "dark"
  const textColor = isDark ? "#f8fafc" : "#0f172a"
  const gridColor = isDark ? "#334155" : "#e2e8f0"

  const getBarColor = () => {
    switch (metric) {
      case "Taxa de Sucesso":
        return "#8884d8"
      case "Tempo Médio":
        return "#82ca9d"
      case "Custo Relativo":
        return "#ffc658"
      default:
        return "#8884d8"
    }
  }

  const getYAxisLabel = () => {
    switch (metric) {
      case "Taxa de Sucesso":
        return "Taxa (%)"
      case "Tempo Médio":
        return "Dias"
      case "Custo Relativo":
        return "Índice"
      default:
        return ""
    }
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>Desempenho de Estratégias de Retentativa</CardTitle>
            <CardDescription>Comparação entre diferentes estratégias de retentativa</CardDescription>
          </div>
          <div>
            <select
              value={metric}
              onChange={(e) => setMetric(e.target.value as any)}
              className="p-2 rounded border bg-background"
            >
              <option value="Taxa de Sucesso">Taxa de Sucesso</option>
              <option value="Tempo Médio">Tempo Médio</option>
              <option value="Custo Relativo">Custo Relativo</option>
            </select>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
              <XAxis dataKey="name" stroke={textColor} />
              <YAxis stroke={textColor} label={{ value: getYAxisLabel(), angle: -90, position: "insideLeft" }} />
              <Tooltip
                formatter={(value) => {
                  if (metric === "Taxa de Sucesso") return [`${value}%`, metric]
                  if (metric === "Tempo Médio") return [`${value} dias`, metric]
                  return [`${value}x`, metric]
                }}
                contentStyle={{
                  backgroundColor: isDark ? "#1e293b" : "#ffffff",
                  color: textColor,
                  border: `1px solid ${gridColor}`,
                }}
              />
              <Legend />
              <Bar dataKey={metric} fill={getBarColor()} />
            </BarChart>
          </ResponsiveContainer>
        </div>
        <div className="mt-4 p-3 bg-muted rounded-md">
          <h4 className="text-sm font-medium mb-2">Análise de Estratégias:</h4>
          <p className="text-sm text-muted-foreground">
            A estratégia de retentativa inteligente, que utiliza machine learning para determinar o melhor momento para
            novas tentativas, apresenta a melhor combinação de taxa de sucesso (78%), tempo médio de resolução (1.2
            dias) e custo relativo (1.0x).
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/recovery-table.tsx" isEdit="true" isMerged="true"
"use client"

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { CheckCircle, Clock, AlertTriangle, XCircle, ArrowUpDown, ChevronDown } from "lucide-react"
import { useState } from "react"

interface Transaction {
  id: string
  customer: string
  amount: string
  method: string
  status: "recovered" | "in-progress" | "at-risk" | "failed"
  attempts: number
  lastAttempt: string
}

const transactions: Transaction[] = [
  {
    id: "TX-7829",
    customer: "Solar Energia Ltda",
    amount: "R$ 12.450,00",
    method: "Cartão de Crédito",
    status: "recovered",
    attempts: 2,
    lastAttempt: "2 dias atrás",
  },
  {
    id: "TX-7830",
    customer: "Eco Painéis S.A.",
    amount: "R$ 8.320,00",
    method: "Boleto",
    status: "in-progress",
    attempts: 1,
    lastAttempt: "1 dia atrás",
  },
  {
    id: "TX-7831",
    customer: "Sol Pleno Energia",
    amount: "R$ 15.780,00",
    method: "Transferência",
    status: "at-risk",
    attempts: 3,
    lastAttempt: "5 horas atrás",
  },
  {
    id: "TX-7832",
    customer: "Luz Solar Instalações",
    amount: "R$ 5.430,00",
    method: "Débito Direto",
    status: "recovered",
    attempts: 1,
    lastAttempt: "3 dias atrás",
  },
  {
    id: "TX-7833",
    customer: "Energia Renovável SA",
    amount: "R$ 22.150,00",
    method: "Cartão de Crédito",
    status: "failed",
    attempts: 5,
    lastAttempt: "1 dia atrás",
  },
]

export function RecoveryTable() {
  const [sortColumn, setSortColumn] = useState<keyof Transaction | null>(null)
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc")

  const handleSort = (column: keyof Transaction) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortColumn(column)
      setSortDirection("asc")
    }
  }

  const sortedTransactions = [...transactions].sort((a, b) => {
    if (!sortColumn) return 0

    const aValue = a[sortColumn]
    const bValue = b[sortColumn]

    if (typeof aValue === "string" && typeof bValue === "string") {
      return sortDirection === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
    }

    if (typeof aValue === "number" && typeof bValue === "number") {
      return sortDirection === "asc" ? aValue - bValue : bValue - aValue
    }

    return 0
  })

  const getStatusIcon = (status: Transaction["status"]) => {
    switch (status) {
      case "recovered":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "in-progress":
        return <Clock className="h-4 w-4 text-blue-500" />
      case "at-risk":
        return <AlertTriangle className="h-4 w-4 text-amber-500" />
      case "failed":
        return <XCircle className="h-4 w-4 text-red-500" />
    }
  }

  const getStatusText = (status: Transaction["status"]) => {
    switch (status) {
      case "recovered":
        return "Recuperado"
      case "in-progress":
        return "Em Andamento"
      case "at-risk":
        return "Em Risco"
      case "failed":
        return "Falhou"
    }
  }

  const getStatusBadgeVariant = (status: Transaction["status"]) => {
    switch (status) {
      case "recovered":
        return "success"
      case "in-progress":
        return "default"
      case "at-risk":
        return "warning"
      case "failed":
        return "destructive"
    }
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>Transações Recentes</CardTitle>
            <CardDescription>Últimas transações processadas pelo sistema de recuperação</CardDescription>
          </div>
          <Button variant="outline" size="sm">
            Ver Todas
            <ChevronDown className="ml-2 h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead onClick={() => handleSort("id")} className="cursor-pointer">
                  ID
                  {sortColumn === "id" && (
                    <ArrowUpDown className={`ml-2 h-4 w-4 inline ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </TableHead>
                <TableHead onClick={() => handleSort("customer")} className="cursor-pointer">
                  Cliente
                  {sortColumn === "customer" && (
                    <ArrowUpDown className={`ml-2 h-4 w-4 inline ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </TableHead>
                <TableHead onClick={() => handleSort("amount")} className="cursor-pointer">
                  Valor
                  {sortColumn === "amount" && (
                    <ArrowUpDown className={`ml-2 h-4 w-4 inline ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </TableHead>
                <TableHead onClick={() => handleSort("method")} className="cursor-pointer">
                  Método
                  {sortColumn === "method" && (
                    <ArrowUpDown className={`ml-2 h-4 w-4 inline ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </TableHead>
                <TableHead onClick={() => handleSort("status")} className="cursor-pointer">
                  Status
                  {sortColumn === "status" && (
                    <ArrowUpDown className={`ml-2 h-4 w-4 inline ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </TableHead>
                <TableHead onClick={() => handleSort("attempts")} className="cursor-pointer">
                  Tentativas
                  {sortColumn === "attempts" && (
                    <ArrowUpDown className={`ml-2 h-4 w-4 inline ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </TableHead>
                <TableHead onClick={() => handleSort("lastAttempt")} className="cursor-pointer">
                  Última Tentativa
                  {sortColumn === "lastAttempt" && (
                    <ArrowUpDown className={`ml-2 h-4 w-4 inline ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </TableHead>
                <TableHead>Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {sortedTransactions.map((transaction) => (
                <TableRow key={transaction.id}>
                  <TableCell className="font-medium">{transaction.id}</TableCell>
                  <TableCell>{transaction.customer}</TableCell>
                  <TableCell>{transaction.amount}</TableCell>
                  <TableCell>{transaction.method}</TableCell>
                  <TableCell>
                    <Badge variant={getStatusBadgeVariant(transaction.status)} className="flex items-center gap-1">
                      {getStatusIcon(transaction.status)}
                      {getStatusText(transaction.status)}
                    </Badge>
                  </TableCell>
                  <TableCell>{transaction.attempts}</TableCell>
                  <TableCell>{transaction.lastAttempt}</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      Detalhes
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  )
}

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
[V0_FILE]typescriptreact:file="components/dashboard/risk-factors.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"

const data = [
  {
    name: "Expiração do Cartão",
    risco: 85,
  },
  {
    name: "Fundos Insuficientes",
    risco: 75,
  },
  {
    name: "Problemas Técnicos",
    risco: 60,
  },
  {
    name: "Fraude Suspeita",
    risco: 45,
  },
  {
    name: "Dados Incorretos",
    risco: 40,
  },
  {
    name: "Cancelamento",
    risco: 30,
  },
]

export function RiskFactors() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const isDark = theme === "dark"
  const textColor = isDark ? "#f8fafc" : "#0f172a"
  const gridColor = isDark ? "#334155" : "#e2e8f0"

  return (
    <Card>
      <CardHeader>
        <CardTitle>Fatores de Risco</CardTitle>
        <CardDescription>Principais fatores que afetam a recuperação de pagamentos</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              data={data}
              layout="vertical"
              margin={{
                top: 5,
                right: 30,
                left: 100,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
              <XAxis type="number" domain={[0, 100]} stroke={textColor} />
              <YAxis dataKey="name" type="category" stroke={textColor} />
              <Tooltip
                formatter={(value) => [`${value}%`, "Índice de Risco"]}
                contentStyle={{
                  backgroundColor: isDark ? "#1e293b" : "#ffffff",
                  color: textColor,
                  border: `1px solid ${gridColor}`,
                }}
              />
              <Legend />
              <Bar
                dataKey="risco"
                name="Índice de Risco"
                fill="#ff8042"
                radius={[0, 4, 4, 0]}
                label={{ position: "right", fill: textColor }}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
        <div className="mt-4 p-3 bg-muted rounded-md">
          <h4 className="text-sm font-medium mb-2">Insights:</h4>
          <p className="text-sm text-muted-foreground">
            Expiração de cartão e fundos insuficientes são os principais fatores de risco. Recomendamos implementar
            alertas proativos para expiração de cartão e opções de pagamento flexíveis para casos de fundos
            insuficientes.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/recovery-heatmap.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { ResponsiveContainer, Tooltip, XAxis, YAxis, ScatterChart, Scatter, ZAxis } from "recharts"

const data = [
  { x: 0, y: 0, z: 45 }, // Domingo, 00:00
  { x: 0, y: 6, z: 30 }, // Domingo, 06:00
  { x: 0, y: 12, z: 25 }, // Domingo, 12:00
  { x: 0, y: 18, z: 35 }, // Domingo, 18:00
  { x: 1, y: 0, z: 40 }, // Segunda, 00:00
  { x: 1, y: 6, z: 65 }, // Segunda, 06:00
  { x: 1, y: 12, z: 80 }, // Segunda, 12:00
  { x: 1, y: 18, z: 70 }, // Segunda, 18:00
  { x: 2, y: 0, z: 45 }, // Terça, 00:00
  { x: 2, y: 6, z: 70 }, // Terça, 06:00
  { x: 2, y: 12, z: 85 }, // Terça, 12:00
  { x: 2, y: 18, z: 75 }, // Terça, 18:00
  { x: 3, y: 0, z: 50 }, // Quarta, 00:00
  { x: 3, y: 6, z: 75 }, // Quarta, 06:00
  { x: 3, y: 12, z: 90 }, // Quarta, 12:00
  { x: 3, y: 18, z: 80 }, // Quarta, 18:00
  { x: 4, y: 0, z: 55 }, // Quinta, 00:00
  { x: 4, y: 6, z: 70 }, // Quinta, 06:00
  { x: 4, y: 12, z: 85 }, // Quinta, 12:00
  { x: 4, y: 18, z: 75 }, // Quinta, 18:00
  { x: 5, y: 0, z: 50 }, // Sexta, 00:00
  { x: 5, y: 6, z: 65 }, // Sexta, 06:00
  { x: 5, y: 12, z: 75 }, // Sexta, 12:00
  { x: 5, y: 18, z: 65 }, // Sexta, 18:00
  { x: 6, y: 0, z: 40 }, // Sábado, 00:00
  { x: 6, y: 6, z: 35 }, // Sábado, 06:00
  { x: 6, y: 12, z: 30 }, // Sábado, 12:00
  { x: 6, y: 18, z: 35 }, // Sábado, 18:00
]

const days = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"]
const hours = ["00:00", "06:00", "12:00", "18:00"]

export function RecoveryHeatmap() {
  const { theme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const isDark = theme === "dark"
  const textColor = isDark ? "#f8fafc" : "#0f172a"
  const gridColor = isDark ? "#334155" : "#e2e8f0"

  return (
    <Card>
      <CardHeader>
        <CardTitle>Mapa de Calor de Recuperação</CardTitle>
        <CardDescription>Taxa de sucesso de recuperação por dia da semana e hora do dia</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <ScatterChart
              margin={{
                top: 20,
                right: 20,
                bottom: 20,
                left: 20,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
              <XAxis
                dataKey="x"
                name="Dia"
                type="number"
                domain={[0, 6]}
                tickCount={7}
                tickFormatter={(value) => days[value]}
                stroke={textColor}
              />
              <YAxis
                dataKey="y"
                name="Hora"
                type="number"
                domain={[0, 18]}
                tickCount={4}
                tickFormatter={(value) => hours[value / 6]}
                stroke={textColor}
              />
              <ZAxis dataKey="z" range={[100, 500]} name="Taxa de Sucesso" unit="%" />
              <Tooltip
                cursor={{ strokeDasharray: "3 3" }}
                formatter={(value, name) => [
                  `${value}%`,
                  name === "Dia" ? days[value] : name === "Hora" ? hours[value / 6] : name,
                ]}
                contentStyle={{
                  backgroundColor: isDark ? "#1e293b" : "#ffffff",
                  color: textColor,
                  border: `1px solid ${gridColor}`,
                }}
              />
              <Scatter
                name="Taxa de Sucesso"
                data={data}
                fill="#8884d8"
                shape="circle"
                fillOpacity={0.6}
                stroke="#8884d8"
              />
            </ScatterChart>
          </ResponsiveContainer>
        </div>
        <div className="mt-4 p-3 bg-muted rounded-md">
          <h4 className="text-sm font-medium mb-2">Insights:</h4>
          <p className="text-sm text-muted-foreground">
            As maiores taxas de sucesso ocorrem nas quartas-feiras ao meio-dia (90%) e terças-feiras ao meio-dia (85%).
            Os horários menos eficazes são domingos e sábados, especialmente ao meio-dia. Recomendamos priorizar
            tentativas de recuperação nos dias úteis entre 10h e 14h.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}

import { CartesianGrid } from "recharts"
[V0_FILE]typescriptreact:file="components/dashboard/filter-bar.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { addDays, format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { CalendarIcon, Check, ChevronDown, Filter, Search, X } from "lucide-react"
import { useState } from "react"

export function FilterBar() {
  const [date, setDate] = useState<{ from: Date; to: Date }>({
    from: addDays(new Date(), -30),
    to: new Date(),
  })
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedPaymentMethods, setSelectedPaymentMethods] = useState<string[]>([
    "Cartão de Crédito",
    "Débito Direto",
    "Boleto",
    "Transferência",
    "Carteira Digital",
  ])
  const [selectedStatuses, setSelectedStatuses] = useState<string[]>([
    "Recuperado",
    "Em Andamento",
    "Em Risco",
    "Falhou",
  ])

  const togglePaymentMethod = (value: string) => {
    setSelectedPaymentMethods((prev) =>
      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value],
    )
  }

  const toggleStatus = (value: string) => {
    setSelectedStatuses((prev) => (prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]))
  }

  const clearFilters = () => {
    setDate({
      from: addDays(new Date(), -30),
      to: new Date(),
    })
    setSearchTerm("")
    setSelectedPaymentMethods(["Cartão de Crédito", "Débito Direto", "Boleto", "Transferência", "Carteira Digital"])
    setSelectedStatuses(["Recuperado", "Em Andamento", "Em Risco", "Falhou"])
  }

  return (
    <div className="flex flex-wrap items-center gap-2">
      <div className="relative">
        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input
          type="search"
          placeholder="Buscar transação ou cliente..."
          className="pl-8 w-[250px]"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline" className="justify-start text-left font-normal">
            <CalendarIcon className="mr-2 h-4 w-4" />
            {date?.from ? (
              date.to ? (
                <>
                  {format(date.from, "dd/MM/yyyy", { locale: ptBR })} -{" "}
                  {format(date.to, "dd/MM/yyyy", { locale: ptBR })}
                </>
              ) : (
                format(date.from, "dd/MM/yyyy", { locale: ptBR })
              )
            ) : (
              <span>Selecione um período</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            initialFocus
            mode="range"
            defaultMonth={date?.from}
            selected={date}
            onSelect={(range) => range && setDate(range as { from: Date; to: Date })}
            numberOfMonths={2}
            locale={ptBR}
          />
        </PopoverContent>
      </Popover>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline">
            Método de Pagamento
            <ChevronDown className="ml-2 h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>Métodos de Pagamento</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuCheckboxItem
            checked={selectedPaymentMethods.includes("Cartão de Crédito")}
            onCheckedChange={() => togglePaymentMethod("Cartão de Crédito")}
          >
            Cartão de Crédito
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={selectedPaymentMethods.includes("Débito Direto")}
            onCheckedChange={() => togglePaymentMethod("Débito Direto")}
          >
            Débito Direto
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={selectedPaymentMethods.includes("Boleto")}
            onCheckedChange={() => togglePaymentMethod("Boleto")}
          >
            Boleto
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={selectedPaymentMethods.includes("Transferência")}
            onCheckedChange={() => togglePaymentMethod("Transferência")}
          >
            Transferência
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={selectedPaymentMethods.includes("Carteira Digital")}
            onCheckedChange={() => togglePaymentMethod("Carteira Digital")}
          >
            Carteira Digital
          </DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline">
            Status
            <ChevronDown className="ml-2 h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>Status</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuCheckboxItem
            checked={selectedStatuses.includes("Recuperado")}
            onCheckedChange={() => toggleStatus("Recuperado")}
          >
            <div className="flex items-center">
              <Check className="mr-2 h-4 w-4 text-green-500" />
              Recuperado
            </div>
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={selectedStatuses.includes("Em Andamento")}
            onCheckedChange={() => toggleStatus("Em Andamento")}
          >
            <div className="flex items-center">
              <div className="mr-2 h-4 w-4 text-blue-500">⏳</div>
              Em Andamento
            </div>
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={selectedStatuses.includes("Em Risco")}
            onCheckedChange={() => toggleStatus("Em Risco")}
          >
            <div className="flex items-center">
              <div className="mr-2 h-4 w-4 text-amber-500">⚠️</div>
              Em Risco
            </div>
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={selectedStatuses.includes("Falhou")}
            onCheckedChange={() => toggleStatus("Falhou")}
          >
            <div className="flex items-center">
              <X className="mr-2 h-4 w-4 text-red-500" />
              Falhou
            </div>
          </DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <Button variant="outline" onClick={clearFilters}>
        <Filter className="mr-2 h-4 w-4" />
        Limpar Filtros
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/alert-center.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Bell } from "lucide-react"
import { useState } from "react"

interface Alert {
  id: string
  title: string
  message: string
  type: "warning" | "error" | "info"
  time: string
  read: boolean
}

const alerts: Alert[] = [
  {
    id: "1",
    title: "Taxa de recuperação abaixo do limite",
    message: "A taxa de recuperação caiu para 58%, abaixo do limite configurado de 65%.",
    type: "warning",
    time: "10 minutos atrás",
    read: false,
  },
  {
    id: "2",
    title: "Falha em integração de pagamento",
    message: "A integração com o gateway de pagamento XYZ está apresentando falhas intermitentes.",
    type: "error",
    time: "1 hora atrás",
    read: false,
  },
  {
    id: "3",
    title: "Novo relatório disponível",
    message: "O relatório mensal de recuperação de junho está disponível para visualização.",
    type: "info",
    time: "3 horas atrás",
    read: true,
  },
  {
    id: "4",
    title: "Aumento em transações rejeitadas",
    message: "Detectamos um aumento de 15% em transações rejeitadas nas últimas 24 horas.",
    type: "warning",
    time: "5 horas atrás",
    read: true,
  },
]

export function AlertCenter() {
  const [userAlerts, setUserAlerts] = useState<Alert[]>(alerts)

  const unreadCount = userAlerts.filter((alert) => !alert.read).length

  const markAsRead = (id: string) => {
    setUserAlerts((prev) => prev.map((alert) => (alert.id === id ? { ...alert, read: true } : alert)))
  }

  const markAllAsRead = () => {
    setUserAlerts((prev) => prev.map((alert) => ({ ...alert, read: true })))
  }

  const getAlertIcon = (type: Alert["type"]) => {
    switch (type) {
      case "warning":
        return "⚠️"
      case "error":
        return "🔴"
      case "info":
        return "ℹ️"
      default:
        return "📌"
    }
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="relative">
          <Bell className="h-5 w-5" />
          {unreadCount > 0 && (
            <span className="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-medium text-white">
              {unreadCount}
            </span>
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-80">
        <DropdownMenuLabel className="flex items-center justify-between">
          <span>Notificações</span>
          {unreadCount > 0 && (
            <Button variant="ghost" size="sm" onClick={markAllAsRead} className="h-auto py-1 px-2 text-xs">
              Marcar todas como lidas
            </Button>
          )}
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
          {userAlerts.length > 0 ? (
            userAlerts.map((alert) => (
              <DropdownMenuItem
                key={alert.id}
                className={`flex flex-col items-start p-3 ${!alert.read ? "bg-muted/50" : ""}`}
                onClick={() => markAsRead(alert.id)}
              >
                <div className="flex w-full items-start gap-2">
                  <span className="mt-0.5">{getAlertIcon(alert.type)}</span>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <p className="font-medium">{alert.title}</p>
                      {!alert.read && <span className="h-2 w-2 rounded-full bg-blue-600"></span>}
                    </div>
                    <p className="text-sm text-muted-foreground">{alert.message}</p>
                    <p className="mt-1 text-xs text-muted-foreground">{alert.time}</p>
                  </div>
                </div>
              </DropdownMenuItem>
            ))
          ) : (
            <div className="p-4 text-center text-muted-foreground">Nenhuma notificação</div>
          )}
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem className="justify-center" asChild>
          <a href="/dashboard/recovery/alerts">Ver todas as notificações</a>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/alert-banner.tsx" isEdit="true" isMerged="true"
"use client"

import { AlertTriangle } from "lucide-react"
import { Button } from "@/components/ui/button"

interface AlertBannerProps {
  title: string
  message: string
  actionLabel?: string
  onAction?: () => void
}

export function AlertBanner({ title, message, actionLabel, onAction }: AlertBannerProps) {
  return (
    <div className="mb-6 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950">
      <div className="flex items-start">
        <AlertTriangle className="mr-3 h-5 w-5 text-amber-600 dark:text-amber-500" />
        <div className="flex-1">
          <h3 className="font-medium text-amber-800 dark:text-amber-300">{title}</h3>
          <p className="mt-1 text-sm text-amber-700 dark:text-amber-400">{message}</p>
        </div>
        {actionLabel && onAction && (
          <Button
            variant="outline"
            size="sm"
            onClick={onAction}
            className="ml-4 border-amber-300 bg-amber-100 text-amber-800 hover:bg-amber-200 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300 dark:hover:bg-amber-800"
          >
            {actionLabel}
          </Button>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/alert-history.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { AlertTriangle, AlertCircle, Info, CheckCircle2 } from "lucide-react"
import { useState } from "react"

interface AlertItem {
  id: string
  title: string
  message: string
  type: "warning" | "error" | "info" | "success"
  timestamp: string
  resolved: boolean
}

const alertHistory: AlertItem[] = [
  {
    id: "1",
    title: "Taxa de recuperação abaixo do limite",
    message: "A taxa de recuperação caiu para 58%, abaixo do limite configurado de 65%.",
    type: "warning",
    timestamp: "2023-06-15 10:23:45",
    resolved: false,
  },
  {
    id: "2",
    title: "Falha em integração de pagamento",
    message: "A integração com o gateway de pagamento XYZ está apresentando falhas intermitentes.",
    type: "error",
    timestamp: "2023-06-15 09:12:30",
    resolved: false,
  },
  {
    id: "3",
    title: "Novo relatório disponível",
    message: "O relatório mensal de recuperação de junho está disponível para visualização.",
    type: "info",
    timestamp: "2023-06-15 08:45:12",
    resolved: true,
  },
  {
    id: "4",
    title: "Aumento em transações rejeitadas",
    message: "Detectamos um aumento de 15% em transações rejeitadas nas últimas 24 horas.",
    type: "warning",
    timestamp: "2023-06-14 22:10:05",
    resolved: true,
  },
  {
    id: "5",
    title: "Manutenção concluída",
    message: "A manutenção programada do sistema de pagamentos foi concluída com sucesso.",
    type: "success",
    timestamp: "2023-06-14 18:30:00",
    resolved: true,
  },
]

export function AlertHistory() {
  const [filter, setFilter] = useState<"all" | "active" | "resolved">("all")

  const filteredAlerts = alertHistory.filter((alert) => {
    if (filter === "all") return true
    if (filter === "active") return !alert.resolved
    if (filter === "resolved") return alert.resolved
    return true
  })

  const getAlertIcon = (type: AlertItem["type"]) => {
    switch (type) {
      case "warning":
        return <AlertTriangle className="h-5 w-5 text-amber-500" />
      case "error":
        return <AlertCircle className="h-5 w-5 text-red-500" />
      case "info":
        return <Info className="h-5 w-5 text-blue-500" />
      case "success":
        return <CheckCircle2 className="h-5 w-5 text-green-500" />
    }
  }

  const getAlertTypeText = (type: AlertItem["type"]) => {
    switch (type) {
      case "warning":
        return "Aviso"
      case "error":
        return "Erro"
      case "info":
        return "Informação"
      case "success":
        return "Sucesso"
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Histórico de Alertas</CardTitle>
        <CardDescription>Alertas recentes do sistema de recuperação</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="all" value={filter} onValueChange={(value) => setFilter(value as any)}>
          <TabsList className="mb-4">
            <TabsTrigger value="all">Todos</TabsTrigger>
            <TabsTrigger value="active">Ativos</TabsTrigger>
            <TabsTrigger value="resolved">Resolvidos</TabsTrigger>
          </TabsList>
          <div className="space-y-4">
            {filteredAlerts.length > 0 ? (
              filteredAlerts.map((alert) => (
                <div
                  key={alert.id}
                  className={`rounded-lg border p-4 ${
                    alert.resolved ? "border-muted bg-muted/30" : "border-muted bg-muted/50"
                  }`}
                >
                  <div className="flex items-start">
                    <div className="mr-3 mt-0.5">{getAlertIcon(alert.type)}</div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between">
                        <h3 className="font-medium">{alert.title}</h3>
                        <span
                          className={`rounded-full px-2 py-0.5 text-xs ${
                            alert.resolved
                              ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
                              : "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300"
                          }`}
                        >
                          {alert.resolved ? "Resolvido" : "Ativo"}
                        </span>
                      </div>
                      <p className="mt-1 text-sm text-muted-foreground">{alert.message}</p>
                      <div className="mt-2 flex items-center justify-between text-xs text-muted-foreground">
                        <span>{alert.timestamp}</span>
                        <span className="rounded bg-muted px-1.5 py-0.5">{getAlertTypeText(alert.type)}</span>
                      </div>
                    </div>
                  </div>
                </div>
              ))
            ) : (
              <div className="flex h-32 items-center justify-center rounded-lg border border-dashed">
                <p className="text-muted-foreground">Nenhum alerta encontrado</p>
              </div>
            )}
          </div>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
"use client"

import type * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

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

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[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 { Check, ChevronRight, Circle } from "lucide-react"

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

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

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

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

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

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

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

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

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

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

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

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isEdit="true" isMerged="true"
"use client"

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

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

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

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

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isEdit="true" isMerged="true"
import * as React from "react"

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

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

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

export { Input }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isEdit="true" isMerged="true"
"use client"

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

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

const Tabs = TabsPrimitive.Root

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

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

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

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isEdit="true" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

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

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

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

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isEdit="true" isMerged="true"
import * as React from "react"

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

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

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

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

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot ref={ref} className={cn("bg-primary font-medium text-primary-foreground", className)} {...props} />
  ),
)
TableFooter.displayName = "TableFooter"

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

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

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

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

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" 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 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

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

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

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="app/dashboard/recovery/page.tsx" isEdit="true" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  ArrowLeft,
  TrendingUp,
  Sparkles,
  MapPin,
  Shield,
  BarChart3,
  FlaskConical,
  AlertTriangle,
  Search,
  Filter,
  Bell,
} from "lucide-react"
import Link from "next/link"

export default function RecoveryDashboard() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <Link
              href="/dashboard/security"
              className="text-sm text-muted-foreground hover:text-foreground flex items-center"
            >
              <Shield className="h-4 w-4 mr-1" />
              Segurança
            </Link>
            <Button variant="ghost" size="icon">
              <Bell className="h-5 w-5" />
            </Button>
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/revenue-recovery">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Dashboard de Recuperação de Receita</h1>
          <p className="text-muted-foreground">
            Monitore e analise o desempenho da recuperação de pagamentos em tempo real
          </p>
        </div>

        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6 dark:bg-amber-950/20 dark:border-amber-800/30">
          <div className="flex items-start">
            <AlertTriangle className="h-5 w-5 text-amber-600 mr-3 mt-0.5 dark:text-amber-500" />
            <div className="flex-1">
              <h3 className="font-medium text-amber-800 dark:text-amber-300">Alerta: Queda na taxa de recuperação</h3>
              <p className="mt-1 text-sm text-amber-700 dark:text-amber-400">
                A taxa de recuperação caiu para 58%, abaixo do limite configurado de 65%. Recomendamos revisar as
                estratégias de retentativa.
              </p>
            </div>
            <Button
              variant="outline"
              size="sm"
              className="ml-4 border-amber-300 bg-amber-100 text-amber-800 hover:bg-amber-200 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300 dark:hover:bg-amber-800"
              asChild
            >
              <Link href="/dashboard/recovery/alerts">Ver detalhes</Link>
            </Button>
          </div>
        </div>

        <div className="flex flex-wrap justify-between items-center gap-4 mb-6">
          <div className="flex flex-wrap gap-2">
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <input
                type="search"
                placeholder="Buscar transação ou cliente..."
                className="pl-8 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              />
            </div>
            <Button variant="outline">
              <Filter className="mr-2 h-4 w-4" />
              Filtros
            </Button>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" className="bg-background/50" asChild>
              <Link href="/dashboard/recovery/geography">
                <MapPin className="mr-2 h-4 w-4" />
                Análise Geográfica
              </Link>
            </Button>
            <Button variant="outline" className="bg-background/50" asChild>
              <Link href="/dashboard/recovery/benchmarks">
                <BarChart3 className="mr-2 h-4 w-4" />
                Benchmarks
              </Link>
            </Button>
            <Button variant="outline" className="bg-background/50" asChild>
              <Link href="/dashboard/recovery/simulator">
                <FlaskConical className="mr-2 h-4 w-4" />
                Simulador
              </Link>
            </Button>
            <Button className="bg-purple-500 hover:bg-purple-600" asChild>
              <Link href="/dashboard/recovery/predictions">
                <Sparkles className="mr-2 h-4 w-4" />
                Previsões IA
              </Link>
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base font-medium">Taxa de Recuperação</CardTitle>
              <CardDescription>Percentual de pagamentos recuperados com sucesso</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-baseline justify-between">
                <div className="text-3xl font-bold">58%</div>
                <div className="text-sm text-red-500 flex items-center">
                  <TrendingUp className="h-4 w-4 mr-1 rotate-180" />
                  -7%
                </div>
              </div>
              <div className="mt-4 h-2 bg-muted rounded-full overflow-hidden">
                <div className="h-full bg-primary rounded-full" style={{ width: "58%" }}></div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base font-medium">Valor Recuperado</CardTitle>
              <CardDescription>Valor total recuperado no período</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-baseline justify-between">
                <div className="text-3xl font-bold">R$ 125.450</div>
                <div className="text-sm text-green-500 flex items-center">
                  <TrendingUp className="h-4 w-4 mr-1" />
                  +18%
                </div>
              </div>
              <div className="mt-4 h-2 bg-muted rounded-full overflow-hidden">
                <div className="h-full bg-green-500 rounded-full" style={{ width: "75%" }}></div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base font-medium">Tempo Médio de Recuperação</CardTitle>
              <CardDescription>Tempo médio para recuperação bem-sucedida</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-baseline justify-between">
                <div className="text-3xl font-bold">1.8 dias</div>
                <div className="text-sm text-green-500 flex items-center">
                  <TrendingUp className="h-4 w-4 mr-1 rotate-180" />
                  -0.5 dias
                </div>
              </div>
              <div className="mt-4 h-2 bg-muted rounded-full overflow-hidden">
                <div className="h-full bg-blue-500 rounded-full" style={{ width: "65%" }}></div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base font-medium">ROI da Recuperação</CardTitle>
              <CardDescription>Retorno sobre investimento em recuperação</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-baseline justify-between">
                <div className="text-3xl font-bold">320%</div>
                <div className="text-sm text-green-500 flex items-center">
                  <TrendingUp className="h-4 w-4 mr-1" />
                  +45%
                </div>
              </div>
              <div className="mt-4 h-2 bg-muted rounded-full overflow-hidden">
                <div className="h-full bg-purple-500 rounded-full" style={{ width: "85%" }}></div>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <Card>
            <CardHeader>
              <CardTitle>Desempenho de Recuperação</CardTitle>
              <CardDescription>Taxa de recuperação e valor recuperado ao longo do tempo</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px] flex items-center justify-center border border-dashed rounded-md">
                <p className="text-muted-foreground">Gráfico de desempenho de recuperação</p>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Previsões de Recuperação</CardTitle>
              <CardDescription>Previsão de taxa de recuperação para os próximos 6 meses</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px] flex items-center justify-center border border-dashed rounded-md">
                <p className="text-muted-foreground">Gráfico de previsões de recuperação</p>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="mb-6">
          <Card>
            <CardHeader>
              <CardTitle>Comparativo de Benchmarks</CardTitle>
              <CardDescription>Comparação da taxa de recuperação com a média do setor e top performers</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px] flex items-center justify-center border border-dashed rounded-md">
                <p className="text-muted-foreground">Gráfico de comparativo de benchmarks</p>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base font-medium">Taxa de Recuperação</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col space-y-6">
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Seu Valor</div>
                  <div className="text-2xl font-bold">58%</div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Média do Setor</div>
                  <div className="text-lg">52%</div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Top Performers</div>
                  <div className="text-lg">68%</div>
                </div>
                <div className="flex items-center justify-between pt-2 border-t">
                  <div className="text-sm font-medium">Comparação</div>
                  <div className="flex items-center text-green-500">
                    <TrendingUp className="w-4 h-4 mr-1" />
                    <span>Acima da média</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base font-medium">Tempo de Recuperação</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col space-y-6">
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Seu Valor</div>
                  <div className="text-2xl font-bold">1.8 dias</div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Média do Setor</div>
                  <div className="text-lg">2.5 dias</div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Top Performers</div>
                  <div className="text-lg">1.2 dias</div>
                </div>
                <div className="flex items-center justify-between pt-2 border-t">
                  <div className="text-sm font-medium">Comparação</div>
                  <div className="flex items-center text-green-500">
                    <TrendingUp className="w-4 h-4 mr-1" />
                    <span>Melhor que a média</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base font-medium">Custo por Recuperação</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col space-y-6">
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Seu Valor</div>
                  <div className="text-2xl font-bold">R$ 12,50</div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Média do Setor</div>
                  <div className="text-lg">R$ 15,80</div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">Top Performers</div>
                  <div className="text-lg">R$ 8,90</div>
                </div>
                <div className="flex items-center justify-between pt-2 border-t">
                  <div className="text-sm font-medium">Comparação</div>
                  <div className="flex items-center text-green-500">
                    <TrendingUp className="w-4 h-4 mr-1" />
                    <span>21% abaixo da média</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="mb-6">
          <Card>
            <CardHeader>
              <CardTitle>Insights de Benchmark</CardTitle>
              <CardDescription>Análise comparativa do seu desempenho em relação ao setor</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px] flex items-center justify-center border border-dashed rounded-md">
                <p className="text-muted-foreground">Insights de benchmark</p>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="flex flex-wrap justify-end gap-4 mt-8">
          <Button variant="outline" asChild>
            <Link href="/dashboard/recovery/alerts">Configurar Alertas</Link>
          </Button>
          <Button variant="outline" asChild>
            <Link href="/dashboard/recovery/geography">
              <MapPin className="mr-2 h-4 w-4" />
              Análise Geográfica
            </Link>
          </Button>
          <Button variant="outline" asChild>
            <Link href="/dashboard/recovery/benchmarks">
              <BarChart3 className="mr-2 h-4 w-4" />
              Benchmarks Detalhados
            </Link>
          </Button>
          <Button variant="outline" className="border-amber-500 text-amber-500 hover:bg-amber-500/10" asChild>
            <Link href="/dashboard/recovery/simulator">
              <FlaskConical className="mr-2 h-4 w-4" />
              Simulador de Estratégias
            </Link>
          </Button>
          <Button className="bg-purple-500 hover:bg-purple-600" asChild>
            <Link href="/dashboard/recovery/predictions">
              <Sparkles className="mr-2 h-4 w-4" />
              Previsões IA
            </Link>
          </Button>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/recovery/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/value-chain/stage-performance.tsx" isEdit="true" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function StagePerformance() {
  return (
    <div className="space-y-6">
      <Tabs defaultValue="extraction">
        <TabsList className="grid grid-cols-6 mb-6">
          <TabsTrigger value="extraction">Extração</TabsTrigger>
          <TabsTrigger value="manufacturing">Fabricação</TabsTrigger>
          <TabsTrigger value="distribution">Distribuição</TabsTrigger>
          <TabsTrigger value="installation">Instalação</TabsTrigger>
          <TabsTrigger value="operation">Operação</TabsTrigger>
          <TabsTrigger value="end-of-life">Fim de Vida</TabsTrigger>
        </TabsList>

        <TabsContent value="extraction" className="space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Extração de Matéria-Prima</CardTitle>
                  <CardDescription>Análise detalhada do estágio de extração de matéria-prima</CardDescription>
                </div>
                <Badge className="bg-emerald-500">87% Eficiência</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <p>Conteúdo do estágio de Extração de Matéria-Prima</p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="manufacturing" className="space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Fabricação</CardTitle>
                  <CardDescription>Análise detalhada do estágio de fabricação</CardDescription>
                </div>
                <Badge className="bg-emerald-500">92% Eficiência</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <p>Conteúdo do estágio de Fabricação</p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="distribution" className="space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Distribuição</CardTitle>
                  <CardDescription>Análise detalhada do estágio de distribuição</CardDescription>
                </div>
                <Badge className="bg-amber-500">78% Eficiência</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <p>Conteúdo do estágio de Distribuição</p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="installation" className="space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Instalação</CardTitle>
                  <CardDescription>Análise detalhada do estágio de instalação</CardDescription>
                </div>
                <Badge className="bg-emerald-500">85% Eficiência</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <p>Conteúdo do estágio de Instalação</p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="operation" className="space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Operação</CardTitle>
                  <CardDescription>Análise detalhada do estágio de operação</CardDescription>
                </div>
                <Badge className="bg-emerald-500">94% Eficiência</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <p>Conteúdo do estágio de Operação</p>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="end-of-life" className="space-y-6">
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Fim de Vida</CardTitle>
                  <CardDescription>Análise detalhada do estágio de fim de vida</CardDescription>
                </div>
                <Badge className="bg-red-500">72% Eficiência</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <p>Conteúdo do estágio de Fim de Vida</p>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/value-chain/page.tsx" isEdit="true" isMerged="true"
"use client"

import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Download, Filter, Search, Share2 } from "lucide-react"
import Link from "next/link"
import { ValueChainFilter } from "@/components/value-chain/value-chain-filter"
import { MCPServerList } from "@/components/value-chain/mcp-server-list"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ReportGenerator } from "@/components/value-chain/report-generator"

const ValueChainPage = () => {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
            <nav className="hidden md:flex gap-6">
              <Link
                href="#overview"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Visão Geral
              </Link>
              <Link
                href="#stages"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Estágios
              </Link>
              <Link
                href="#risks"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Riscos
              </Link>
              <Link
                href="#suppliers"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Fornecedores
              </Link>
              <Link
                href="#costs"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Custos
              </Link>
              <Link
                href="#sustainability"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Sustentabilidade
              </Link>
            </nav>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Análise 360° da Cadeia de Valor Fotovoltaica Solar</h1>
          <p className="text-muted-foreground">
            Análise abrangente de toda a cadeia de valor fotovoltaica solar, desde a extração de matéria-prima até o fim
            de vida útil
          </p>
        </div>

        <div className="flex flex-wrap justify-between items-center gap-4 mb-6">
          <div className="flex-1 flex gap-2">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <input
                type="text"
                placeholder="Buscar por componente, fornecedor, região..."
                className="w-full pl-9 h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              />
            </div>
            <ValueChainFilter />
          </div>
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" className="bg-background/50">
              <Filter className="mr-2 h-4 w-4" />
              Filtros Avançados
            </Button>
            <Button variant="outline" className="bg-background/50">
              <Download className="mr-2 h-4 w-4" />
              Exportar
            </Button>
            <Button variant="outline" className="bg-background/50">
              <Share2 className="mr-2 h-4 w-4" />
              Compartilhar
            </Button>
            <Button className="bg-emerald-600 hover:bg-emerald-700">
              <Link href="/value-chain/reports">Gerar Relatório</Link>
            </Button>
          </div>
        </div>

        <Tabs defaultValue="overview" className="mb-8">
          <TabsList className="grid grid-cols-7 mb-6">
            <TabsTrigger value="overview">Visão Geral</TabsTrigger>
            <TabsTrigger value="stages">Estágios</TabsTrigger>
            <TabsTrigger value="risks">Riscos</TabsTrigger>
            <TabsTrigger value="suppliers">Fornecedores</TabsTrigger>
            <TabsTrigger value="costs">Custos</TabsTrigger>
            <TabsTrigger value="sustainability">Sustentabilidade</TabsTrigger>
            <TabsTrigger value="mcp">Servidores MCP</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="mt-0">
            <div>Visão Geral</div>
          </TabsContent>

          <TabsContent value="stages" className="mt-0">
            <div>Estágios</div>
          </TabsContent>

          <TabsContent value="risks" className="mt-0">
            <div>Riscos</div>
          </TabsContent>

          <TabsContent value="suppliers" className="mt-0">
            <div>Fornecedores</div>
          </TabsContent>

          <TabsContent value="costs" className="mt-0">
            <div>Custos</div>
          </TabsContent>

          <TabsContent value="sustainability" className="mt-0">
            <div>Sustentabilidade</div>
          </TabsContent>

          <TabsContent value="mcp" className="mt-0">
            <MCPServerList />
          </TabsContent>
        </Tabs>

        <div className="mt-12">
          <ReportGenerator />
        </div>
      </main>
    </div>
  )
}

export default ValueChainPage
[V0_FILE]typescriptreact:file="components/value-chain/value-chain-overview.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Info } from "lucide-react"

const ValueChainOverview = () => {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Pontuação Geral da Cadeia</CardTitle>
            <CardDescription>Avaliação global da cadeia de valor</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="text-4xl font-bold">84.7%</div>
              <Badge className="bg-emerald-500">Bom</Badge>
            </div>
            <p className="text-sm text-muted-foreground mt-2">Aumento de 2.3% em relação ao trimestre anterior</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Estágio Mais Crítico</CardTitle>
            <CardDescription>Área que requer mais atenção</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="text-xl font-bold">Fim de Vida</div>
              <Badge variant="outline" className="bg-red-100 text-red-800 border-red-200">
                Crítico
              </Badge>
            </div>
            <p className="text-sm text-muted-foreground mt-2">4 problemas identificados, pontuação de 72%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Estágio Mais Eficiente</CardTitle>
            <CardDescription>Área com melhor desempenho</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <div className="text-xl font-bold">Operação</div>
              <Badge variant="outline" className="bg-emerald-100 text-emerald-800 border-emerald-200">
                Excelente
              </Badge>
            </div>
            <p className="text-sm text-muted-foreground mt-2">Sem problemas identificados, pontuação de 94%</p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Visão Geral da Cadeia de Valor</CardTitle>
          <CardDescription>Visualização completa da cadeia de valor fotovoltaica solar e seus estágios</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="w-full h-[400px] relative">
            <div className="w-full h-full bg-muted rounded-md flex items-center justify-center">
              <p className="text-muted-foreground">Gráfico da Cadeia de Valor</p>
            </div>
            <div className="absolute top-2 right-2">
              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                <Info className="h-4 w-4" />
                <span className="sr-only">Informações</span>
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Principais Insights</CardTitle>
            <CardDescription>Descobertas importantes da análise da cadeia de valor</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="space-y-4">
              <li className="flex items-start gap-3">
                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
                  <span className="text-emerald-600 text-sm font-bold">1</span>
                </div>
                <div>
                  <span className="font-medium block mb-1">Operação é o estágio mais eficiente</span>
                  <span className="text-sm text-muted-foreground">
                    Sistemas de monitoramento e manutenção estão funcionando de forma ideal
                  </span>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
                  <span className="text-emerald-600 text-sm font-bold">2</span>
                </div>
                <div>
                  <span className="font-medium block mb-1">Fabricação apresenta alta eficiência</span>
                  <span className="text-sm text-muted-foreground">
                    Processos de controle de qualidade e automação contribuem para o bom desempenho
                  </span>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center">
                  <span className="text-amber-600 text-sm font-bold">3</span>
                </div>
                <div>
                  <span className="font-medium block mb-1">Distribuição apresenta gargalos</span>
                  <span className="text-sm text-muted-foreground">
                    Problemas logísticos e atrasos na entrega afetam o desempenho deste estágio
                  </span>
                </div>
              </li>
              <li className="flex gap-3 items-start">
                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-red-100 flex items-center justify-center">
                  <span className="text-red-600 text-sm font-bold">4</span>
                </div>
                <div>
                  <span className="font-medium block mb-1">Fim de vida requer atenção imediata</span>
                  <span className="text-sm text-muted-foreground">
                    Processos de reciclagem e descarte precisam ser aprimorados para atender às regulamentações
                  </span>
                </div>
              </li>
            </ul>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Recomendações</CardTitle>
            <CardDescription>Ações sugeridas para melhorar a cadeia de valor</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="space-y-4">
              <li className="flex gap-3 items-start">
                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-red-100 flex items-center justify-center">
                  <span className="text-red-600 text-sm font-bold">!</span>
                </div>
                <div>
                  <span className="font-medium block mb-1">Implementar programa de reciclagem de painéis</span>
                  <span className="text-sm text-muted-foreground">
                    Desenvolver parcerias com empresas especializadas em reciclagem de componentes fotovoltaicos
                  </span>
                </div>
              </li>
              <li className="flex gap-3 items-start">
                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center">
                  <span className="text-amber-600 text-sm font-bold">!</span>
                </div>
                <div>
                  <span className="font-medium block mb-1">Otimizar rotas de distribuição</span>
                  <span className="text-sm text-muted-foreground">
                    Utilizar software de otimização de rotas para reduzir tempos de entrega e custos logísticos
                  </span>
                </div>
              </li>
              <li className="flex gap-3 items-start">
                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center">
                  <span className="text-amber-600 text-sm font-bold">!</span>
                </div>
                <div>
                  <span className="font-medium block mb-1">Melhorar rastreabilidade de componentes</span>
                  <span className="text-sm text-muted-foreground">
                    Implementar sistema de rastreamento baseado em blockchain para aumentar a transparência
                  </span>
                </div>
              </li>
              <li className="flex gap-3 items-start">
                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center">
                  <span className="text-emerald-600 text-sm font-bold">!</span>
                </div>
                <div>
                  <span className="font-medium block mb-1">Expandir práticas de operação para outros estágios</span>
                  <span className="text-sm text-muted-foreground">
                    Aplicar as melhores práticas do estágio de operação em outras áreas da cadeia de valor
                  </span>
                </div>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export default ValueChainOverview
[V0_FILE]typescriptreact:file="components/value-chain/risk-assessment.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

const RiskAssessment = () => {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Análise de Riscos</CardTitle>
          <CardDescription>
            Avaliação de desempenho e risco dos principais fornecedores na cadeia de valor fotovoltaica
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p>Conteúdo da Análise de Riscos</p>
        </CardContent>
      </Card>
    </div>
  )
}

export default RiskAssessment
[V0_FILE]typescriptreact:file="app/agents/[id]/page.tsx" isEdit="true" isMerged="true"
import { notFound } from "next/navigation"
import { AgentHeader } from "@/components/agents/agent-header"
import { AgentPerformance } from "@/components/agents/agent-performance"
import { AgentSettings } from "@/components/agents/agent-settings"
import { AgentTools } from "@/components/agents/agent-tools"
import { AgentIntegrations } from "@/components/agents/agent-integrations"
import { AgentPrompts } from "@/components/agents/agent-prompts"
import { AgentLogs } from "@/components/agents/agent-logs"
import { AgentCompliance } from "@/components/agents/agent-compliance"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Dados de exemplo para um agente específico
const agentsData = [
  {
    id: "1",
    name: "Agente de Processamento de Pagamentos",
    description: "Processa pagamentos de energia solar e gerencia transações.",
    type: "payment",
    status: "active",
    model: "GPT-4",
    createdAt: "2023-03-10T14:30:00Z",
    lastActive: "2023-04-15T10:30:00Z",
    successRate: 96.5,
    totalTransactions: 12450,
    averageResponseTime: 1.2,
    tools: [
      { id: "t1", name: "API de Pagamentos", type: "api", status: "connected" },
      { id: "t2", name: "Banco de Dados de Clientes", type: "database", status: "connected" },
      { id: "t3", name: "Serviço de Notificações", type: "service", status: "connected" },
    ],
    integrations: [
      { id: "i1", name: "ERP Solar", type: "erp", status: "active" },
      { id: "i2", name: "CRM de Clientes", type: "crm", status: "active" },
    ],
    prompts: [
      {
        id: "p1",
        name: "Processamento de Pagamento",
        content: "Processe o pagamento para o cliente {customer_name} no valor de {amount}.",
      },
      {
        id: "p2",
        name: "Verificação de Fraude",
        content: "Verifique se a transação {transaction_id} apresenta sinais de fraude.",
      },
    ],
    logs: [
      {
        id: "l1",
        timestamp: "2023-04-15T10:30:00Z",
        level: "info",
        message: "Pagamento processado com sucesso para cliente #12345",
      },
      {
        id: "l2",
        timestamp: "2023-04-15T10:29:45Z",
        level: "info",
        message: "Iniciando processamento de pagamento para cliente #12345",
      },
      {
        id: "l3",
        timestamp: "2023-04-15T09:15:22Z",
        level: "warning",
        message: "Tentativa de pagamento com cartão expirado para cliente #12346",
      },
      {
        id: "l4",
        timestamp: "2023-04-15T08:45:10Z",
        level: "error",
        message: "Falha na conexão com gateway de pagamento",
      },
      {
        id: "l5",
        timestamp: "2023-04-15T08:45:15Z",
        level: "info",
        message: "Reconexão com gateway de pagamento bem-sucedida",
      },
    ],
    compliance: {
      lgpd: { status: "compliant", lastCheck: "2023-04-10T08:00:00Z" },
      gdpr: { status: "compliant", lastCheck: "2023-04-10T08:00:00Z" },
      pci: { status: "compliant", lastCheck: "2023-04-10T08:00:00Z" },
    },
  },
  {
    id: "4",
    name: "Agente de Recuperação de Pagamentos",
    description: "Recupera pagamentos de energia solar e gerencia transações.",
    type: "payment",
    status: "active",
    model: "GPT-4",
    createdAt: "2023-03-10T14:30:00Z",
    lastActive: "2023-04-15T10:30:00Z",
    successRate: 96.5,
    totalTransactions: 12450,
    averageResponseTime: 1.2,
    tools: [
      { id: "t1", name: "API de Pagamentos", type: "api", status: "connected" },
      { id: "t2", name: "Banco de Dados de Clientes", type: "database", status: "connected" },
      { id: "t3", name: "Serviço de Notificações", type: "service", status: "connected" },
    ],
    integrations: [
      { id: "i1", name: "ERP Solar", type: "erp", status: "active" },
      { id: "i2", name: "CRM de Clientes", type: "crm", status: "active" },
    ],
    prompts: [
      {
        id: "p1",
        name: "Processamento de Pagamento",
        content: "Processe o pagamento para o cliente {customer_name} no valor de {amount}.",
      },
      {
        id: "p2",
        name: "Verificação de Fraude",
        content: "Verifique se a transação {transaction_id} apresenta sinais de fraude.",
      },
    ],
    logs: [
      {
        id: "l1",
        timestamp: "2023-04-15T10:30:00Z",
        level: "info",
        message: "Pagamento processado com sucesso para cliente #12345",
      },
      {
        id: "l2",
        timestamp: "2023-04-15T10:29:45Z",
        level: "info",
        message: "Iniciando processamento de pagamento para cliente #12345",
      },
      {
        id: "l3",
        timestamp: "2023-04-15T09:15:22Z",
        level: "warning",
        message: "Tentativa de pagamento com cartão expirado para cliente #12346",
      },
      {
        id: "l4",
        timestamp: "2023-04-15T08:45:10Z",
        level: "error",
        message: "Falha na conexão com gateway de pagamento",
      },
      {
        id: "l5",
        timestamp: "2023-04-15T08:45:15Z",
        level: "info",
        message: "Reconexão com gateway de pagamento bem-sucedida",
      },
    ],
    compliance: {
      lgpd: { status: "compliant", lastCheck: "2023-04-10T08:00:00Z" },
      gdpr: { status: "compliant", lastCheck: "2023-04-10T08:00:00Z" },
      pci: { status: "compliant", lastCheck: "2023-04-10T08:00:00Z" },
    },
  },
]

const getAgentData = (id: string) => {
  return agentsData.find((agent) => agent.id === id)
}

export default function AgentPage({ params }: { params: { id: string } }) {
  const agent = getAgentData(params.id)

  if (!agent) {
    notFound()
  }

  return (
    <div className="container py-8">
      <AgentHeader agent={agent} />

      <Tabs defaultValue="performance" className="mt-8">
        <TabsList className="grid w-full grid-cols-2 md:grid-cols-4 lg:grid-cols-8">
          <TabsTrigger value="performance">Desempenho</TabsTrigger>
          <TabsTrigger value="settings">Configurações</TabsTrigger>
          <TabsTrigger value="tools">Ferramentas</TabsTrigger>
          <TabsTrigger value="integrations">Integrações</TabsTrigger>
          <TabsTrigger value="prompts">Prompts</TabsTrigger>
          <TabsTrigger value="logs">Logs</TabsTrigger>
          <TabsTrigger value="compliance">Conformidade</TabsTrigger>
          <TabsTrigger value="analytics">Análises</TabsTrigger>
        </TabsList>

        <TabsContent value="performance" className="mt-6">
          <AgentPerformance agent={agent} />
        </TabsContent>

        <TabsContent value="settings" className="mt-6">
          <AgentSettings agent={agent} />
        </TabsContent>

        <TabsContent value="tools" className="mt-6">
          <AgentTools agent={agent} />
        </TabsContent>

        <TabsContent value="integrations" className="mt-6">
          <AgentIntegrations agent={agent} />
        </TabsContent>

        <TabsContent value="prompts" className="mt-6">
          <AgentPrompts agent={agent} />
        </TabsContent>

        <TabsContent value="logs" className="mt-6">
          <AgentLogs agent={agent} />
        </TabsContent>

        <TabsContent value="compliance" className="mt-6">
          <AgentCompliance agent={agent} />
        </TabsContent>

        <TabsContent value="analytics" className="mt-6">
          <div className="rounded-lg border p-6">
            <h3 className="mb-4 text-lg font-medium">Análises Avançadas</h3>
            <p className="text-muted-foreground">Análises avançadas estarão disponíveis em breve.</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isEdit="true" isMerged="true"
import * as React from "react"
import { cn } from "@/lib/utils"

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

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

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

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

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

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

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/value-chain/value-chain-filter.tsx" isEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Check, ChevronsUpDown } from "lucide-react"
import { useState } from "react"

const regions = [
  { value: "global", label: "Global" },
  { value: "north-america", label: "América do Norte" },
  { value: "south-america", label: "América do Sul" },
  { value: "europe", label: "Europa" },
  { value: "asia", label: "Ásia" },
  { value: "africa", label: "África" },
  { value: "oceania", label: "Oceania" },
]

export const ValueChainFilter = () => {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState("global")

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline" role="combobox" aria-expanded={open} className="w-[200px] justify-between">
          {value ? regions.find((region) => region.value === value)?.label : "Selecionar região..."}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Buscar região..." />
          <CommandList>
            <CommandEmpty>Nenhuma região encontrada.</CommandEmpty>
            <CommandGroup>
              {regions.map((region) => (
                <CommandItem
                  key={region.value}
                  value={region.value}
                  onSelect={(currentValue) => {
                    setValue(currentValue === value ? "" : currentValue)
                    setOpen(false)
                  }}
                >
                  <Check className={`mr-2 h-4 w-4 ${value === region.value ? "opacity-100" : "opacity-0"}`} />
                  {region.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

export default ValueChainFilter
[V0_FILE]typescriptreact:file="components/value-chain/mcp-server-list.tsx" isEdit="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { AlertCircle, CheckCircle, Clock, Plus, RefreshCw, Server } from "lucide-react"
import { useState } from "react"

interface MCPServer {
  id: string
  name: string
  ip: string
  location: string
  status: "online" | "offline" | "maintenance"
  lastUpdated: string
  role: string
  load: number
}

export const MCPServerList = () => {
  const [servers, setServers] = useState<MCPServer[]>([
    {
      id: "srv-001",
      name: "MCP-PROD-01",
      ip: "192.168.1.101",
      location: "São Paulo",
      status: "online",
      lastUpdated: "2023-04-22 14:30",
      role: "Produção",
      load: 78,
    },
    {
      id: "srv-002",
      name: "MCP-PROD-02",
      ip: "192.168.1.102",
      location: "São Paulo",
      status: "online",
      lastUpdated: "2023-04-22 14:30",
      role: "Backup",
      load: 65,
    },
    {
      id: "srv-003",
      name: "MCP-BACKUP-01",
      ip: "192.168.1.103",
      location: "Rio de Janeiro",
      status: "online",
      lastUpdated: "2023-04-22 14:30",
      role: "Desenvolvimento",
      load: 12,
    },
    {
      id: "srv-004",
      name: "MCP-DEV-01",
      ip: "192.168.1.104",
      location: "São Paulo",
      status: "maintenance",
      lastUpdated: "2023-04-22 10:15",
      role: "Produção",
      load: 0,
    },
    {
      id: "srv-005",
      name: "MCP-PROD-03",
      ip: "192.168.1.105",
      location: "Belo Horizonte",
      status: "offline",
      lastUpdated: "2023-04-21 18:45",
      role: "Produção",
      load: 0,
    },
  ])

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "online":
        return (
          <Badge variant="outline" className="bg-emerald-100 text-emerald-800 border-emerald-200">
            <CheckCircle className="h-3 w-3 mr-1" />
            Online
          </Badge>
        )
      case "offline":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 border-red-200">
            <AlertCircle className="h-3 w-3 mr-1" />
            Offline
          </Badge>
        )
      case "maintenance":
        return (
          <Badge variant="outline" className="bg-amber-100 text-amber-800 border-amber-200">
            <Clock className="h-3 w-3 mr-1" />
            Manutenção
          </Badge>
        )
      default:
        return <Badge>{status}</Badge>
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">Servidores MCP</h2>
          <p className="text-muted-foreground">Gerenciamento de servidores do Caminho Crítico Mais Importante (MCP)</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline">
            <RefreshCw className="h-4 w-4 mr-2" />
            Atualizar
          </Button>
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Adicionar Servidor
          </Button>
        </div>
      </div>

      <div className="flex flex-col md:flex-row gap-6">
        <Card className="md:w-1/3">
          <CardHeader>
            <CardTitle>Status dos Servidores</CardTitle>
            <CardDescription>Visão geral do estado atual dos servidores MCP</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="w-3 h-3 rounded-full bg-emerald-500"></div>
                  <span>Online</span>
                </div>
                <span className="font-medium">3</span>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="w-3 h-3 rounded-full bg-amber-500"></div>
                  <span>Manutenção</span>
                </div>
                <span className="font-medium">1</span>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
                  <span>Offline</span>
                </div>
                <span className="font-medium">1</span>
              </div>
              <div className="pt-4 border-t">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium">Carga Média</span>
                  <span className="text-sm font-medium">51.7%</span>
                </div>
                <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div className="h-full bg-emerald-500 rounded-full" style={{ width: "51.7%" }}></div>
                </div>
              </div>
              <div className="pt-4">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium">Disponibilidade</span>
                  <span className="text-sm font-medium">80%</span>
                </div>
                <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div className="h-full bg-blue-500 rounded-full" style={{ width: "80%" }}></div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="md:w-2/3">
          <CardHeader>
            <CardTitle>Distribuição Geográfica</CardTitle>
            <CardDescription>Localização dos servidores MCP</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[300px] flex items-center justify-center bg-muted rounded-md">
              <div className="text-center">
                <Server className="h-10 w-10 mx-auto mb-2 text-muted-foreground" />
                <p className="text-muted-foreground">Mapa de distribuição dos servidores</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export default MCPServerList
[V0_FILE]typescriptreact:file="components/value-chain/report-generator.tsx" isEdit="true"
"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export const ReportGenerator = () => {
  const [selectedSections, setSelectedSections] = useState<string[]>(["overview", "stages", "risks", "suppliers"])

  const handleSectionChange = (section: string) => {
    if (selectedSections.includes(section)) {
      setSelectedSections(selectedSections.filter((s) => s !== section))
    } else {
      setSelectedSections([...selectedSections, section])
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Gerador de Relatórios Automáticos</CardTitle>
        <CardDescription>
          Configure e agende relatórios automáticos da cadeia de valor fotovoltaica solar
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="create">
          <TabsList className="mb-6">
            <TabsTrigger value="create">Criar Relatório</TabsTrigger>
            <TabsTrigger value="schedule">Agendar Relatórios</TabsTrigger>
            <TabsTrigger value="history">Histórico</TabsTrigger>
          </TabsList>

          <TabsContent value="create" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="md:col-span-2 space-y-6">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="report-name">Nome do Relatório</Label>
                    <Input id="report-name" placeholder="Ex: Análise Mensal da Cadeia de Valor - Abril 2023" />
                  </div>

                  <div className="space-y-2">
                    <Label>Seções do Relatório</Label>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="overview"
                          checked={selectedSections.includes("overview")}
                          onCheckedChange={() => handleSectionChange("overview")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="overview"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Visão Geral da Cadeia de Valor
                          </Label>
                          <p className="text-sm text-muted-foreground">Resumo e KPIs principais da cadeia completa</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="stages"
                          checked={selectedSections.includes("stages")}
                          onCheckedChange={() => handleSectionChange("stages")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="stages"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Análise de Estágios
                          </Label>
                          <p className="text-sm text-muted-foreground">
                            Desempenho detalhado de cada estágio da cadeia
                          </p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="risks"
                          checked={selectedSections.includes("risks")}
                          onCheckedChange={() => handleSectionChange("risks")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="risks"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Avaliação de Riscos
                          </Label>
                          <p className="text-sm text-muted-foreground">Riscos identificados e planos de mitigação</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="suppliers"
                          checked={selectedSections.includes("suppliers")}
                          onCheckedChange={() => handleSectionChange("suppliers")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="suppliers"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Análise de Fornecedores
                          </Label>
                          <p className="text-sm text-muted-foreground">Desempenho e avaliação de fornecedores-chave</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="schedule" className="space-y-6">
            <div>Schedule</div>
          </TabsContent>

          <TabsContent value="history" className="space-y-6">
            <div>History</div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}

export default ReportGenerator10f:T1031a3,[V0_FILE]typescriptreact:file="components/enterprise-feature.tsx" isEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { CheckCircle } from "lucide-react"

interface EnterpriseFeatureProps {
  title: string
  description: string
}

export function EnterpriseFeature({ title, description }: EnterpriseFeatureProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-transparent to-emerald-500/20 p-2 mt-1 flex-shrink-0">
            <CheckCircle className="h-5 w-5 text-emerald-500" />
          </div>
          <div>
            <h3 className="font-semibold mb-2">{title}</h3>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "dependencies": {
    "framer-motion": "^10.16.4"
  }
}
[V0_FILE]typescriptreact:file="components/solar-segment-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Factory, Home, ShoppingCart, type LucideIcon } from "lucide-react"

interface SolarSegmentCardProps {
  title: string
  description: string
  icon: string
}

export function SolarSegmentCard({ title, description, icon }: SolarSegmentCardProps) {
  const icons: Record<string, LucideIcon> = {
    Home,
    Factory,
    ShoppingCart,
  }

  const Icon = icons[icon] || Home

  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
      <CardContent className="p-6 flex flex-col h-full">
        <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-pink-500/10 to-yellow-500/10 p-3 w-12 h-12 flex items-center justify-center mb-4">
          <Icon className="h-6 w-6 text-foreground" />
        </div>
        <h3 className="font-semibold text-lg mb-2">{title}</h3>
        <p className="text-muted-foreground text-sm">{description}</p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/control-center-feature.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { CheckCircle } from "lucide-react"

interface ControlCenterFeatureProps {
  title: string
  description: string
}

export function ControlCenterFeature({ title, description }: ControlCenterFeatureProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-transparent to-emerald-500/20 p-2 mt-1 flex-shrink-0">
            <CheckCircle className="h-5 w-5 text-emerald-500" />
          </div>
          <div>
            <h3 className="font-semibold mb-2">{title}</h3>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/omnichannel-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { type LucideIcon, Smartphone, Globe, Store } from "lucide-react"

interface OmnichannelCardProps {
  title: string
  description: string
  icon: string
}

export function OmnichannelCard({ title, description, icon }: OmnichannelCardProps) {
  const icons: Record<string, LucideIcon> = {
    Smartphone,
    Globe,
    Store,
  }

  const Icon = icons[icon] || Globe

  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
      <CardContent className="p-6 flex flex-col h-full">
        <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-pink-500/10 to-yellow-500/10 p-3 w-12 h-12 flex items-center justify-center mb-4">
          <Icon className="h-6 w-6 text-foreground" />
        </div>
        <h3 className="font-semibold text-lg mb-2">{title}</h3>
        <p className="text-muted-foreground text-sm">{description}</p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/plg-feature-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { type LucideIcon, BarChart, Zap, Globe, TrendingUp, Layers, Users } from "lucide-react"

interface PlgFeatureCardProps {
  title: string
  description: string
  icon: string
}

export function PlgFeatureCard({ title, description, icon }: PlgFeatureCardProps) {
  const icons: Record<string, LucideIcon> = {
    BarChart,
    Zap,
    Globe,
    TrendingUp,
    Layers,
    Users,
  }

  const Icon = icons[icon] || Zap

  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
      <CardContent className="p-6 flex flex-col h-full">
        <div className="rounded-full bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-3 w-12 h-12 flex items-center justify-center mb-4">
          <Icon className="h-6 w-6 text-foreground" />
        </div>
        <h3 className="font-semibold text-lg mb-2">{title}</h3>
        <p className="text-muted-foreground text-sm">{description}</p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/roi-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowUpRight } from "lucide-react"

interface RoiCardProps {
  title: string
  value: string
  description: string
}

export function RoiCard({ title, value, description }: RoiCardProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6 flex flex-col items-center text-center">
        <div className="rounded-full bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-3 mb-4">
          <ArrowUpRight className="h-6 w-6 text-indigo-500" />
        </div>
        <h3 className="text-2xl md:text-3xl font-bold mb-1 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
          {value}
        </h3>
        <p className="font-medium mb-2">{title}</p>
        <p className="text-sm text-muted-foreground">{description}</p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/routing-step.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"

interface RoutingStepProps {
  number: string
  title: string
  description: string
}

export function RoutingStep({ number, title, description }: RoutingStepProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 w-8 h-8 flex items-center justify-center text-white font-bold flex-shrink-0">
            {number}
          </div>
          <div>
            <h3 className="font-semibold mb-2">{title}</h3>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/routing-algorithm.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { CheckCircle } from "lucide-react"

interface RoutingAlgorithmProps {
  number: string
  title: string
  description: string
}

export function RoutingAlgorithm({ number, title, description }: RoutingAlgorithmProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-gradient-to-br from-indigo-500/10 via-transparent to-indigo-500/20 p-2 mt-1 flex-shrink-0">
            <CheckCircle className="h-5 w-5 text-indigo-500" />
          </div>
          <div>
            <div className="flex items-center gap-2 mb-2">
              <div className="rounded-full bg-indigo-100 dark:bg-indigo-900/30 w-6 h-6 flex items-center justify-center text-indigo-700 dark:text-indigo-300 text-xs font-bold">
                {number}
              </div>
              <h3 className="font-semibold">{title}</h3>
            </div>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/parameter-badge.tsx" isMerged="true"
interface ParameterBadgeProps {
  label: string
}

export function ParameterBadge({ label }: ParameterBadgeProps) {
  return (
    <div className="inline-block px-3 py-1 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 text-xs font-medium mr-2 mb-2">
      {label}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/vault-feature-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { type LucideIcon, Shield, TrendingUp, Zap, Lock, RefreshCw, CreditCard } from "lucide-react"

interface VaultFeatureCardProps {
  title: string
  description: string
  icon: string
}

export function VaultFeatureCard({ title, description, icon }: VaultFeatureCardProps) {
  const icons: Record<string, LucideIcon> = {
    Shield,
    TrendingUp,
    Zap,
    Lock,
    RefreshCw,
    CreditCard,
  }

  const Icon = icons[icon] || Shield

  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
      <CardContent className="p-6 flex flex-col h-full">
        <div className="rounded-full bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-3 w-12 h-12 flex items-center justify-center mb-4">
          <Icon className="h-6 w-6 text-foreground" />
        </div>
        <h3 className="font-semibold text-lg mb-2">{title}</h3>
        <p className="text-muted-foreground text-sm">{description}</p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/integration-option.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { CheckCircle } from "lucide-react"

interface IntegrationOptionProps {
  title: string
  description: string
  features: string[]
}

export function IntegrationOption({ title, description, features }: IntegrationOptionProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <h3 className="text-xl font-bold mb-2">{title}</h3>
        <p className="text-muted-foreground mb-6">{description}</p>
        <ul className="space-y-3">
          {features.map((feature, index) => (
            <li key={index} className="flex items-start gap-2">
              <CheckCircle className="h-5 w-5 text-indigo-500 flex-shrink-0 mt-0.5" />
              <span className="text-sm">{feature}</span>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/deployment-option.tsx" isEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { type LucideIcon, Server, Cloud } from "lucide-react"

interface DeploymentOptionProps {
  title: string
  description: string
  icon: string
}

export function DeploymentOption({ title, description, icon }: DeploymentOptionProps) {
  const icons: Record<string, LucideIcon> = {
    Server,
    Cloud,
  }

  const Icon = icons[icon] || Server

  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-3 flex-shrink-0">
            <Icon className="h-6 w-6 text-indigo-500" />
          </div>
          <div>
            <h3 className="font-semibold mb-2">{title}</h3>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/checkout-flow.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"

interface CheckoutFlowProps {
  title: string
  description: string
  number: string
}

export function CheckoutFlow({ title, description, number }: CheckoutFlowProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 w-8 h-8 flex items-center justify-center text-white font-bold flex-shrink-0">
            {number}
          </div>
          <div>
            <h3 className="font-semibold mb-2">{title}</h3>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/reconciliation-feature-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { type LucideIcon, BarChart, Clock, Database, FileCheck, Layers, Zap } from "lucide-react"

interface ReconciliationFeatureCardProps {
  title: string
  description: string
  icon: string
}

export function ReconciliationFeatureCard({ title, description, icon }: ReconciliationFeatureCardProps) {
  const icons: Record<string, LucideIcon> = {
    BarChart,
    Clock,
    Database,
    FileCheck,
    Layers,
    Zap,
  }

  const Icon = icons[icon] || FileCheck

  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
      <CardContent className="p-6 flex flex-col h-full">
        <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-pink-500/10 to-yellow-500/10 p-3 w-12 h-12 flex items-center justify-center mb-4">
          <Icon className="h-6 w-6 text-foreground" />
        </div>
        <h3 className="font-semibold text-lg mb-2">{title}</h3>
        <p className="text-muted-foreground text-sm">{description}</p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/metric-card.tsx" isEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowUpRight, Percent, Clock, Zap, Server, CreditCard } from "lucide-react"
import type { LucideIcon } from "lucide-react"

interface MetricCardProps {
  value: string
  description: string
  icon: string
  color?: string
}

export function MetricCard({ value, description, icon, color = "emerald" }: MetricCardProps) {
  const icons: Record<string, LucideIcon> = {
    Percent,
    Clock,
    Zap,
    Server,
    CreditCard,
    ArrowUpRight,
  }

  const Icon = icons[icon] || ArrowUpRight

  const colorClasses = {
    emerald: "text-emerald-500",
    pink: "text-pink-500",
    yellow: "text-yellow-500",
  }

  const iconColorClass = colorClasses[color as keyof typeof colorClasses] || colorClasses.emerald

  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6 flex flex-col items-center text-center">
        <div className={`rounded-full bg-${color}-100 dark:bg-${color}-900/30 p-3 mb-4`}>
          <Icon className={`h-6 w-6 ${iconColorClass}`} />
        </div>
        <h3 className="text-2xl md:text-3xl font-bold mb-1 bg-clip-text text-transparent bg-gradient-to-r from-emerald-500 via-pink-500 to-yellow-500">
          {value}
        </h3>
        <p className="text-sm text-muted-foreground">{description}</p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/data-source-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { type LucideIcon, Database, Code, Workflow } from "lucide-react"

interface DataSourceCardProps {
  title: string
  description: string
  icon: string
}

export function DataSourceCard({ title, description, icon }: DataSourceCardProps) {
  const icons: Record<string, LucideIcon> = {
    Database,
    Code,
    Workflow,
  }

  const Icon = icons[icon] || Database

  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <div className="flex items-start gap-4">
          <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-pink-500/10 to-yellow-500/10 p-3 flex-shrink-0">
            <Icon className="h-6 w-6 text-emerald-500" />
          </div>
          <div>
            <h3 className="font-semibold mb-2">{title}</h3>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/workflow-item.tsx" isMerged="true"
import { CheckCircle } from "lucide-react"

interface WorkflowItemProps {
  description: string
}

export function WorkflowItem({ description }: WorkflowItemProps) {
  return (
    <div className="flex items-start gap-3 p-4 rounded-lg bg-background/50 backdrop-blur-sm border border-border/20">
      <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
        <CheckCircle className="h-5 w-5 text-emerald-500" />
      </div>
      <div>
        <span className="text-sm">{description}</span>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/solution-badge.tsx" isEdit="true" isMerged="true"
interface SolutionBadgeProps {
  label: string
}

export function SolutionBadge({ label }: SolutionBadgeProps) {
  return (
    <div className="inline-block px-4 py-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-sm font-medium mr-3 mb-3">
      {label}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/certification-badge.tsx" isEdit="true" isMerged="true"
import { Shield, FileCheck, Lock, type LucideIcon } from "lucide-react"

interface CertificationBadgeProps {
  label: string
  icon: string
}

export function CertificationBadge({ label, icon }: CertificationBadgeProps) {
  const icons: Record<string, LucideIcon> = {
    Shield,
    FileCheck,
    Lock,
  }

  const Icon = icons[icon] || Shield

  return (
    <div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-sm font-medium mr-3 mb-3">
      <Icon className="h-4 w-4" />
      <span>{label}</span>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/animated-section.tsx" isEdit="true" isMerged="true"
"use client"

import React from "react"

import { useRef, useEffect, useState } from "react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

type AnimationVariant = "fadeIn" | "fadeInUp" | "fadeInLeft" | "fadeInRight" | "zoomIn" | "scaleUp" | "staggered"

interface AnimatedSectionProps {
  children: React.ReactNode
  className?: string
  variant?: AnimationVariant
  delay?: number
  duration?: number
  threshold?: number
  staggerChildren?: number
  id?: string
}

export function AnimatedSection({
  children,
  className,
  variant = "fadeIn",
  delay = 0,
  duration = 0.5,
  threshold = 0.2,
  staggerChildren = 0.1,
  id,
}: AnimatedSectionProps) {
  const [isInView, setIsInView] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
  const prefersReducedMotion = useRef(false)

  useEffect(() => {
    // Check for reduced motion preference
    prefersReducedMotion.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches

    if (prefersReducedMotion.current) {
      setIsInView(true)
      return
    }

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true)
          // Once the animation has played, we can disconnect the observer
          if (ref.current) observer.unobserve(ref.current)
        }
      },
      {
        threshold,
        rootMargin: "0px 0px -100px 0px", // Trigger slightly before the element is fully in view
      },
    )

    if (ref.current) {
      observer.observe(ref.current)
    }

    return () => {
      if (ref.current) observer.unobserve(ref.current)
    }
  }, [threshold])

  // Animation variants
  const variants = {
    fadeIn: {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration, delay } },
    },
    fadeInUp: {
      hidden: { opacity: 0, y: 40 },
      visible: { opacity: 1, y: 0, transition: { duration, delay } },
    },
    fadeInLeft: {
      hidden: { opacity: 0, x: -60 },
      visible: { opacity: 1, x: 0, transition: { duration, delay } },
    },
    fadeInRight: {
      hidden: { opacity: 0, x: 60 },
      visible: { opacity: 1, x: 0, transition: { duration, delay } },
    },
    zoomIn: {
      hidden: { opacity: 0, scale: 0.9 },
      visible: { opacity: 1, scale: 1, transition: { duration, delay } },
    },
    scaleUp: {
      hidden: { opacity: 0, scale: 0.8 },
      visible: { opacity: 1, scale: 1, transition: { duration, delay, type: "spring", stiffness: 100 } },
    },
    staggered: {
      hidden: { opacity: 0 },
      visible: {
        opacity: 1,
        transition: {
          staggerChildren,
          delayChildren: delay,
        },
      },
    },
  }

  // Child variants for staggered animations
  const childVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.3 },
    },
  }

  // If user prefers reduced motion, don't animate
  if (prefersReducedMotion.current) {
    return (
      <div className={className} id={id}>
        {children}
      </div>
    )
  }

  return (
    <motion.div
      ref={ref}
      className={cn(className)}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      variants={variants[variant]}
      id={id}
    >
      {variant === "staggered" ? (
        <motion.div variants={variants.staggered}>
          {React.Children.map(children, (child, index) => (
            <motion.div key={index} variants={childVariants}>
              {child}
            </motion.div>
          ))}
        </motion.div>
      ) : (
        children
      )}
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/case-study-card.tsx" isEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, TrendingUp } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

interface CaseStudyCardProps {
  title: string
  company: string
  description: string
  results: string[]
  category: string
  image: string
  link: string
}

export function CaseStudyCard({ title, company, description, results, category, image, link }: CaseStudyCardProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
      <div className="relative h-48 w-full">
        <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-pink-500/10 opacity-30"></div>
        <Image
          src={image || "/placeholder.svg"}
          alt={`${company} case study`}
          fill
          className="object-cover relative z-10"
        />
        <Badge className="absolute top-3 right-3 z-20 bg-emerald-500 hover:bg-emerald-600">{category}</Badge>
      </div>
      <CardContent className="p-6">
        <div className="mb-3">
          <h3 className="font-semibold text-lg mb-2">{title}</h3>
          <p className="text-sm font-medium text-muted-foreground">{company}</p>
        </div>
        <p className="text-sm text-muted-foreground mb-4">{description}</p>
        <div className="mb-4">
          <p className="text-sm font-medium mb-2">Resultados:</p>
          <ul className="space-y-2">
            {results.map((result, index) => (
              <li key={index} className="flex items-start gap-2 text-sm">
                <TrendingUp className="h-4 w-4 text-emerald-500 mt-0.5 flex-shrink-0" />
                <span>{result}</span>
              </li>
            ))}
          </ul>
        </div>
        <Link
          href={link}
          className="inline-flex items-center text-sm font-medium text-emerald-500 hover:text-emerald-600 transition-colors"
        >
          Ver estudo completo <ArrowRight className="ml-1 h-4 w-4" />
        </Link>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/revenue-recovery/page.tsx" isEdit="true" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowRight, CheckCircle, BarChart3, TrendingUp, Zap, RefreshCw, Shield } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { GradientBackground } from "@/components/gradient-background"
import { AnimatedSection } from "@/components/animated-section"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { MarqueeLogos } from "@/components/marquee-logos"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CaseStudyCard } from "@/components/case-study-card"
import { TestimonialCard } from "@/components/testimonial-card"

export default function RevenueRecovery() {
  return (
    <div className="flex min-h-screen flex-col relative">
      <GradientBackground />

      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
            <nav className="hidden md:flex gap-6">
              <Link
                href="#features"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Recursos
              </Link>
              <Link
                href="#how-it-works"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Como Funciona
              </Link>
              <Link
                href="#benefits"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Benefícios
              </Link>
              <Link
                href="#case-studies"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Casos de Sucesso
              </Link>
              <Link
                href="#solar-specific"
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                Setor Solar
              </Link>
            </nav>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              className="bg-gradient-to-r from-emerald-500 to-emerald-400 hover:from-emerald-600 hover:to-emerald-500 text-white border-0"
            >
              <Link href="#comece-agora">Comece Agora</Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="flex-1 relative z-10">
        {/* Hero Section */}
        <AnimatedSection variant="fadeInUp" className="py-20 md:py-32 relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-pink-500/5 to-yellow-500/10 dark:from-emerald-500/5 dark:via-pink-500/5 dark:to-yellow-500/5"></div>
          <div className="container px-4 md:px-6 relative">
            <div className="flex flex-col items-center text-center space-y-6 max-w-4xl mx-auto">
              <AnimatedSection
                variant="fadeIn"
                delay={0.2}
                className="inline-block px-4 py-1.5 rounded-full bg-gradient-to-r from-emerald-500/10 to-emerald-500/20 backdrop-blur-sm border border-emerald-500/20 text-sm font-medium mb-2"
              >
                RECUPERAÇÃO DE RECEITA
              </AnimatedSection>
              <AnimatedSection
                variant="fadeInUp"
                delay={0.3}
                className="text-4xl md:text-6xl font-bold tracking-tighter leading-tight md:leading-tight"
              >
                Recuperação de receita de{" "}
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-emerald-500 via-pink-500 to-yellow-500">
                  assinaturas
                </span>{" "}
                com retentativas inteligentes
              </AnimatedSection>
              <AnimatedSection
                variant="fadeInUp"
                delay={0.4}
                className="max-w-[700px] text-muted-foreground text-lg md:text-xl"
              >
                Assuma o controle da recuperação de pagamentos com um motor de retentativa personalizável. Configure sua
                própria estratégia inteligente de retentativa com mais de 20 parâmetros para recuperar pagamentos
                falhos.
              </AnimatedSection>
              <AnimatedSection variant="fadeInUp" delay={0.5} className="flex flex-col sm:flex-row gap-4 mt-8">
                <Button
                  size="lg"
                  className="bg-gradient-to-r from-emerald-500 to-emerald-400 hover:from-emerald-600 hover:to-emerald-500 text-white border-0 h-12 px-6"
                  asChild
                >
                  <Link href="#comece-agora">
                    Comece Agora <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </AnimatedSection>
            </div>
          </div>
        </AnimatedSection>

        {/* Trusted By Section */}
        <section className="py-12 border-y border-border/10 bg-background/60 backdrop-blur-sm">
          <div className="container px-4 md:px-6">
            <AnimatedSection variant="fadeIn" className="text-center text-lg font-medium text-muted-foreground mb-8">
              Confiado pelas empresas que mais crescem em todo o mundo
            </AnimatedSection>
            <MarqueeLogos />
          </div>
        </section>

        {/* Benefits Section */}
        <AnimatedSection id="benefits" variant="fadeIn" className="py-20 relative">
          <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/5 via-pink-500/5 to-yellow-500/5"></div>
          <div className="container px-4 md:px-6 relative">
            <AnimatedSection variant="fadeInUp" className="text-center mb-16">
              <h2 className="text-3xl font-bold tracking-tighter mb-4">
                Minimize a perda de clientes usando dados e machine learning
              </h2>
              <p className="text-muted-foreground max-w-[700px] mx-auto">
                Motor de retentativa baseado em ML minimiza falhas em pagamentos recorrentes.
              </p>
            </AnimatedSection>

            <div className="grid md:grid-cols-3 gap-8">
              <AnimatedSection variant="fadeInUp" delay={0.1}>
                <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
                  <CardContent className="p-6 flex flex-col items-center text-center h-full">
                    <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-pink-500/10 to-yellow-500/10 p-3 mb-4">
                      <RefreshCw className="h-6 w-6 text-emerald-500" />
                    </div>
                    <h3 className="text-xl font-bold mb-2">Redução de Churn Involuntário</h3>
                    <p className="text-muted-foreground">
                      Evite a perda de clientes devido a falhas de pagamento com retentativas inteligentes que aumentam
                      a taxa de sucesso.
                    </p>
                  </CardContent>
                </Card>
              </AnimatedSection>

              <AnimatedSection variant="fadeInUp" delay={0.2}>
                <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
                  <CardContent className="p-6 flex flex-col items-center text-center h-full">
                    <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-pink-500/10 to-yellow-500/10 p-3 mb-4">
                      <TrendingUp className="h-6 w-6 text-pink-500" />
                    </div>
                    <h3 className="text-xl font-bold mb-2">Aumento da Taxa de Autorização</h3>
                    <p className="text-muted-foreground">
                      Melhore significativamente as taxas de autorização de pagamentos com estratégias de retentativa
                      otimizadas por IA.
                    </p>
                  </CardContent>
                </Card>
              </AnimatedSection>

              <AnimatedSection variant="fadeInUp" delay={0.3}>
                <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
                  <CardContent className="p-6 flex flex-col items-center text-center h-full">
                    <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-pink-500/10 to-yellow-500/10 p-3 mb-4">
                      <Zap className="h-6 w-6 text-yellow-500" />
                    </div>
                    <h3 className="text-xl font-bold mb-2">Recuperação de Pagamentos Falhos</h3>
                    <p className="text-muted-foreground">
                      Recupere pagamentos que falharam automaticamente, protegendo sua receita recorrente e melhorando o
                      fluxo de caixa.
                    </p>
                  </CardContent>
                </Card>
              </AnimatedSection>
            </div>
          </div>
        </AnimatedSection>

        {/* How It Works Section */}
        <AnimatedSection id="how-it-works" variant="fadeIn" className="py-20 bg-muted/30 backdrop-blur-sm relative">
          <div className="absolute inset-0 bg-gradient-to-tr from-pink-500/5 via-transparent to-emerald-500/5"></div>
          <div className="container px-4 md:px-6 relative">
            <AnimatedSection variant="fadeInUp" className="text-center mb-16">
              <h2 className="text-3xl font-bold tracking-tighter mb-4">
                Melhore a retenção com estratégias de retentativa configuráveis
              </h2>
              <p className="text-muted-foreground max-w-[700px] mx-auto">
                Configure estratégias de recuperação de receita de assinatura inteiramente através do dashboard sem
                escrever nenhum código.
              </p>
            </AnimatedSection>

            <div className="grid md:grid-cols-3 gap-8 mb-16">
              <AnimatedSection variant="fadeInUp" delay={0.1}>
                <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
                  <CardContent className="p-6 flex flex-col h-full">
                    <div className="rounded-full bg-emerald-500 w-8 h-8 flex items-center justify-center text-white font-bold mb-4">
                      1
                    </div>
                    <h3 className="text-xl font-bold mb-2">Configuração</h3>
                    <p className="text-muted-foreground">
                      Configure processadores de pagamento e plataformas de assinatura para integração perfeita com o
                      sistema de recuperação.
                    </p>
                  </CardContent>
                </Card>
              </AnimatedSection>

              <AnimatedSection variant="fadeInUp" delay={0.2}>
                <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
                  <CardContent className="p-6 flex flex-col h-full">
                    <div className="rounded-full bg-emerald-500 w-8 h-8 flex items-center justify-center text-white font-bold mb-4">
                      2
                    </div>
                    <h3 className="text-xl font-bold mb-2">Configuração</h3>
                    <p className="text-muted-foreground">
                      Configure o plano de recuperação (orçamento de retentativas, início de retentativas após
                      determinado período, etc.)
                    </p>
                  </CardContent>
                </Card>
              </AnimatedSection>

              <AnimatedSection variant="fadeInUp" delay={0.3}>
                <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70 h-full">
                  <CardContent className="p-6 flex flex-col h-full">
                    <div className="rounded-full bg-emerald-500 w-8 h-8 flex items-center justify-center text-white font-bold mb-4">
                      3
                    </div>
                    <h3 className="text-xl font-bold mb-2">Recuperação</h3>
                    <p className="text-muted-foreground">
                      Retentativas inteligentes alimentadas por mais de 20 pontos de dados recuperam pagamentos e
                      protegem a receita de assinatura automaticamente.
                    </p>
                  </CardContent>
                </Card>
              </AnimatedSection>
            </div>

            <div className="flex justify-center mb-16">
              <Button
                size="lg"
                className="bg-gradient-to-r from-emerald-500 to-emerald-400 hover:from-emerald-600 hover:to-emerald-500 text-white border-0 h-12 px-6"
                asChild
              >
                <Link href="#comece-agora">
                  Comece Agora <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>

            <div className="grid md:grid-cols-2 gap-12 items-center">
              <AnimatedSection variant="fadeInLeft">
                <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                  <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-pink-500/10 opacity-30"></div>
                  <Image
                    src="/placeholder.svg?height=400&width=500&text=Retry+Engine+Dashboard"
                    alt="Retry Engine Dashboard"
                    width={500}
                    height={400}
                    className="relative z-10"
                  />
                </div>
              </AnimatedSection>

              <AnimatedSection variant="fadeInRight" className="space-y-6">
                <h3 className="text-2xl font-bold">
                  Motor de retentativa inteligente e robusto que utiliza múltiplos parâmetros
                </h3>
                <p className="text-muted-foreground mb-6">
                  Configure estratégias de recuperação de receita inteiramente através do dashboard sem escrever nenhum
                  código.
                </p>
                <div className="space-y-4">
                  <div className="flex items-start gap-3 p-4 rounded-lg bg-background/50 backdrop-blur-sm border border-border/20">
                    <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                      <CheckCircle className="h-5 w-5 text-emerald-500" />
                    </div>
                    <div>
                      <span className="font-medium block mb-1">Retentativa apenas de erros de categoria 1</span>
                      <span className="text-sm text-muted-foreground">
                        Foco inteligente em erros que têm maior probabilidade de serem resolvidos com retentativas,
                        economizando recursos e melhorando a eficiência.
                      </span>
                    </div>
                  </div>

                  <div className="flex items-start gap-3 p-4 rounded-lg bg-background/50 backdrop-blur-sm border border-border/20">
                    <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                      <CheckCircle className="h-5 w-5 text-emerald-500" />
                    </div>
                    <div>
                      <span className="font-medium block mb-1">
                        Retentativa focada para assinaturas mensais e semanais
                      </span>
                      <span className="text-sm text-muted-foreground">
                        Estratégias personalizadas com base na frequência de pagamento, otimizando o timing das
                        retentativas para maximizar o sucesso.
                      </span>
                    </div>
                  </div>

                  <div className="flex items-start gap-3 p-4 rounded-lg bg-background/50 backdrop-blur-sm border border-border/20">
                    <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                      <CheckCircle className="h-5 w-5 text-emerald-500" />
                    </div>
                    <div>
                      <span className="font-medium block mb-1">
                        Configuração de retentativa baseada no método de pagamento
                      </span>
                      <span className="text-sm text-muted-foreground">
                        Estratégias adaptadas para diferentes métodos de pagamento, reconhecendo que cartões, débitos
                        diretos e métodos alternativos têm padrões de falha distintos.
                      </span>
                    </div>
                  </div>
                </div>
              </AnimatedSection>
            </div>
          </div>
        </AnimatedSection>

        {/* Case Studies Section */}
        <AnimatedSection id="case-studies" variant="fadeIn" className="py-20 relative">
          <div className="absolute inset-0 bg-gradient-to-bl from-yellow-500/5 via-transparent to-emerald-500/5"></div>
          <div className="container px-4 md:px-6 relative">
            <AnimatedSection variant="fadeInUp" className="text-center mb-16">
              <h2 className="text-3xl font-bold tracking-tighter mb-4">
                Casos de Sucesso: Empresas Solares que Transformaram sua Recuperação de Receita
              </h2>
              <p className="text-muted-foreground max-w-[700px] mx-auto">
                Conheça empresas reais do setor solar que aumentaram significativamente sua recuperação de receita e
                reduziram o churn involuntário com nossa solução.
              </p>
            </AnimatedSection>

            <div className="grid md:grid-cols-3 gap-8 mb-16">
              <AnimatedSection variant="fadeInUp" delay={0.1}>
                <CaseStudyCard
                  title="Redução de 42% no Churn Involuntário"
                  company="SolarResidencial Brasil"
                  description="Empresa líder em instalações residenciais enfrentava altas taxas de falha em pagamentos recorrentes de financiamento solar."
                  results={[
                    "Recuperação de 38% dos pagamentos que falhavam anteriormente",
                    "Aumento de 15% na receita mensal recorrente",
                    "Redução de 70% no tempo dedicado à gestão manual de falhas",
                  ]}
                  category="Geração Distribuída"
                  image="/placeholder.svg?height=200&width=400&text=SolarResidencial"
                  link="#solarresidencial"
                />
              </AnimatedSection>

              <AnimatedSection variant="fadeInUp" delay={0.2}>
                <CaseStudyCard
                  title="Recuperação de R$ 2,4 milhões em Receita Anual"
                  company="GC Solar Empreendimentos"
                  description="Desenvolvedora de projetos solares de grande escala com operações em 5 estados brasileiros e problemas de fluxo de caixa devido a falhas de pagamento."
                  results={[
                    "Aumento de 32% na taxa de autorização de pagamentos",
                    "Recuperação de R$ 2,4 milhões em receita anual",
                    "Melhoria de 40% na previsibilidade do fluxo de caixa",
                  ]}
                  category="Geração Centralizada"
                  image="/placeholder.svg?height=200&width=400&text=GC+Solar"
                  link="#gcsolar"
                />
              </AnimatedSection>

              <AnimatedSection variant="fadeInUp" delay={0.3}>
                <CaseStudyCard
                  title="Aumento de 28% na Retenção de Clientes"
                  company="SolarConnect Marketplace"
                  description="Plataforma que conecta consumidores a instaladores solares enfrentava problemas com pagamentos falhos e perda de comissões."
                  results={[
                    "Recuperação de 45% das transações que falhavam anteriormente",
                    "Aumento de 28% na taxa de retenção de clientes",
                    "Crescimento de 22% na receita de comissões",
                  ]}
                  category="Marketplace Solar"
                  image="/placeholder.svg?height=200&width=400&text=SolarConnect"
                  link="#solarconnect"
                />
              </AnimatedSection>
            </div>

            <div className="mb-16">
              <Tabs defaultValue="solarresidencial" className="w-full">
                <TabsList className="grid grid-cols-3 mb-8">
                  <TabsTrigger value="solarresidencial">SolarResidencial Brasil</TabsTrigger>
                  <TabsTrigger value="gcsolar">GC Solar Empreendimentos</TabsTrigger>
                  <TabsTrigger value="solarconnect">SolarConnect Marketplace</TabsTrigger>
                </TabsList>

                <TabsContent value="solarresidencial" className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                      <h3 className="text-2xl font-bold mb-4">SolarResidencial Brasil</h3>
                      <p className="text-muted-foreground mb-6">
                        A SolarResidencial Brasil é uma das maiores empresas de instalação de sistemas fotovoltaicos
                        residenciais do país, com mais de 15.000 clientes ativos em contratos de financiamento solar e
                        assinaturas de manutenção.
                      </p>

                      <div className="space-y-6">
                        <div>
                          <h4 className="text-lg font-semibold mb-2">O Desafio</h4>
                          <p className="text-muted-foreground">
                            A empresa enfrentava uma taxa de falha de pagamento de 12% em suas cobranças recorrentes,
                            resultando em interrupções de serviço, insatisfação dos clientes e perda significativa de
                            receita. A equipe financeira gastava cerca de 30 horas semanais tentando recuperar
                            pagamentos manualmente.
                          </p>
                        </div>

                        <div>
                          <h4 className="text-lg font-semibold mb-2">A Solução</h4>
                          <p className="text-muted-foreground">
                            Implementaram a solução de Recuperação de Receita da Eos Solar Payments com foco em:
                          </p>
                          <ul className="space-y-2 mt-2">
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Estratégias personalizadas para diferentes planos de financiamento</span>
                            </li>
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Comunicação proativa com clientes antes de novas tentativas</span>
                            </li>
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Análise de padrões de falha para otimização contínua</span>
                            </li>
                          </ul>
                        </div>

                        <div>
                          <h4 className="text-lg font-semibold mb-2">Resultados</h4>
                          <div className="grid grid-cols-3 gap-4">
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">42%</p>
                                <p className="text-sm text-muted-foreground">Redução no churn involuntário</p>
                              </CardContent>
                            </Card>
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">38%</p>
                                <p className="text-sm text-muted-foreground">Taxa de recuperação de pagamentos</p>
                              </CardContent>
                            </Card>
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">70%</p>
                                <p className="text-sm text-muted-foreground">Redução em esforço manual</p>
                              </CardContent>
                            </Card>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="space-y-6">
                      <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                        <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-pink-500/10 opacity-30"></div>
                        <Image
                          src="/placeholder.svg?height=300&width=500&text=SolarResidencial+Dashboard"
                          alt="SolarResidencial Dashboard"
                          width={500}
                          height={300}
                          className="relative z-10"
                        />
                      </div>

                      <TestimonialCard
                        quote="A solução de Recuperação de Receita da Eos Solar Payments transformou nossa operação financeira. Conseguimos recuperar pagamentos que antes considerávamos perdidos e reduzimos drasticamente o tempo que nossa equipe gastava com processos manuais. O impacto no nosso fluxo de caixa foi imediato e significativo."
                        name="Mariana Oliveira"
                        title="Diretora Financeira"
                        company="SolarResidencial Brasil"
                      />

                      <div className="p-6 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800/30">
                        <h4 className="font-bold text-lg mb-2 text-emerald-700 dark:text-emerald-300">
                          Impacto no Negócio
                        </h4>
                        <p className="text-sm text-emerald-700/80 dark:text-emerald-300/80">
                          Com a melhoria na recuperação de pagamentos, a SolarResidencial Brasil conseguiu aumentar seu
                          investimento em expansão, abrindo 3 novas filiais e ampliando sua base de clientes em 22% no
                          ano seguinte à implementação da solução.
                        </p>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="gcsolar" className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div className="order-2 md:order-1">
                      <div className="space-y-6">
                        <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                          <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-pink-500/10 opacity-30"></div>
                          <Image
                            src="/placeholder.svg?height=300&width=500&text=GC+Solar+Dashboard"
                            alt="GC Solar Dashboard"
                            width={500}
                            height={300}
                            className="relative z-10"
                          />
                        </div>

                        <TestimonialCard
                          quote="Nossos projetos de grande escala dependem de fluxos de pagamento previsíveis. A solução da Eos Solar Payments nos permitiu recuperar milhões em receita que antes era perdida devido a falhas de pagamento. A capacidade de configurar estratégias específicas para diferentes tipos de contrato foi um diferencial importante."
                          name="Ricardo Mendes"
                          title="CEO"
                          company="GC Solar Empreendimentos"
                        />

                        <div className="p-6 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800/30">
                          <h4 className="font-bold text-lg mb-2 text-emerald-700 dark:text-emerald-300">
                            Impacto no Negócio
                          </h4>
                          <p className="text-sm text-emerald-700/80 dark:text-emerald-300/80">
                            A melhoria na recuperação de receita permitiu que a GC Solar Empreendimentos acelerasse seu
                            plano de expansão internacional, iniciando operações no Chile e Colômbia um ano antes do
                            previsto.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="order-1 md:order-2">
                      <h3 className="text-2xl font-bold mb-4">GC Solar Empreendimentos</h3>
                      <p className="text-muted-foreground mb-6">
                        A GC Solar Empreendimentos é uma desenvolvedora de projetos solares de grande escala, com mais
                        de 50 usinas solares em operação e contratos PPA (Power Purchase Agreements) com grandes
                        empresas e distribuidoras de energia.
                      </p>

                      <div className="space-y-6">
                        <div>
                          <h4 className="text-lg font-semibold mb-2">O Desafio</h4>
                          <p className="text-muted-foreground">
                            A empresa enfrentava problemas com pagamentos corporativos falhos em seus contratos PPA,
                            resultando em fluxo de caixa imprevisível e dificuldades para financiar novos projetos. As
                            falhas de pagamento representavam uma perda anual estimada em R$ 7,5 milhões.
                          </p>
                        </div>

                        <div>
                          <h4 className="text-lg font-semibold mb-2">A Solução</h4>
                          <p className="text-muted-foreground">
                            Implementaram a solução de Recuperação de Receita da Eos Solar Payments com foco em:
                          </p>
                          <ul className="space-y-2 mt-2">
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Estratégias específicas para pagamentos B2B e contratos PPA</span>
                            </li>
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Suporte multi-moeda para operações em diferentes países</span>
                            </li>
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Integração com seu sistema ERP para visibilidade financeira completa</span>
                            </li>
                          </ul>
                        </div>

                        <div>
                          <h4 className="text-lg font-semibold mb-2">Resultados</h4>
                          <div className="grid grid-cols-3 gap-4">
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">R$ 2,4M</p>
                                <p className="text-sm text-muted-foreground">Receita anual recuperada</p>
                              </CardContent>
                            </Card>
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">32%</p>
                                <p className="text-sm text-muted-foreground">Aumento na taxa de autorização</p>
                              </CardContent>
                            </Card>
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">40%</p>
                                <p className="text-sm text-muted-foreground">Melhoria na previsibilidade</p>
                              </CardContent>
                            </Card>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="solarconnect" className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                      <h3 className="text-2xl font-bold mb-4">SolarConnect Marketplace</h3>
                      <p className="text-muted-foreground mb-6">
                        A SolarConnect é uma plataforma marketplace que conecta consumidores interessados em energia
                        solar com instaladores qualificados, operando em todo o Brasil com mais de 500 instaladores
                        parceiros.
                      </p>

                      <div className="space-y-6">
                        <div>
                          <h4 className="text-lg font-semibold mb-2">O Desafio</h4>
                          <p className="text-muted-foreground">
                            A empresa enfrentava problemas com pagamentos falhos em seu modelo de marketplace, onde
                            gerencia pagamentos entre consumidores, instaladores e financiadores. As falhas resultavam
                            em perda de comissões e insatisfação dos parceiros instaladores.
                          </p>
                        </div>

                        <div>
                          <h4 className="text-lg font-semibold mb-2">A Solução</h4>
                          <p className="text-muted-foreground">
                            Implementaram a solução de Recuperação de Receita da Eos Solar Payments com foco em:
                          </p>
                          <ul className="space-y-2 mt-2">
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Recuperação de pagamentos em transações multi-parte</span>
                            </li>
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Proteção de receita de comissões para instaladores parceiros</span>
                            </li>
                            <li className="flex items-start gap-2">
                              <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                              <span>Análise avançada de padrões de falha para otimização contínua</span>
                            </li>
                          </ul>
                        </div>

                        <div>
                          <h4 className="text-lg font-semibold mb-2">Resultados</h4>
                          <div className="grid grid-cols-3 gap-4">
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">45%</p>
                                <p className="text-sm text-muted-foreground">Taxa de recuperação</p>
                              </CardContent>
                            </Card>
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">28%</p>
                                <p className="text-sm text-muted-foreground">Aumento na retenção</p>
                              </CardContent>
                            </Card>
                            <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                              <CardContent className="p-4 text-center">
                                <p className="text-3xl font-bold text-emerald-500">22%</p>
                                <p className="text-sm text-muted-foreground">Crescimento em comissões</p>
                              </CardContent>
                            </Card>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="space-y-6">
                      <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                        <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-pink-500/10 opacity-30"></div>
                        <Image
                          src="/placeholder.svg?height=300&width=500&text=SolarConnect+Dashboard"
                          alt="SolarConnect Dashboard"
                          width={500}
                          height={300}
                          className="relative z-10"
                        />
                      </div>

                      <TestimonialCard
                        quote="Como marketplace, gerenciamos um ecossistema complexo de pagamentos entre consumidores, instaladores e financiadores. A solução da Eos Solar Payments nos permitiu recuperar transações que antes considerávamos perdidas, melhorando significativamente nossa relação com os instaladores parceiros e aumentando nossa receita de comissões."
                        name="Fernanda Costa"
                        title="COO"
                        company="SolarConnect Marketplace"
                      />

                      <div className="p-6 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800/30">
                        <h4 className="font-bold text-lg mb-2 text-emerald-700 dark:text-emerald-300">
                          Impacto no Negócio
                        </h4>
                        <p className="text-sm text-emerald-700/80 dark:text-emerald-300/80">
                          A melhoria na recuperação de pagamentos permitiu que a SolarConnect expandisse sua rede de
                          instaladores parceiros em 35% no ano seguinte, atraindo parceiros de maior qualidade devido à
                          maior confiabilidade nos pagamentos.
                        </p>
                      </div>
                    </div>
                  </div>
                </TabsContent>
              </Tabs>
            </div>

            <div className="text-center">
              <Button
                className="bg-gradient-to-r from-emerald-500 to-emerald-400 hover:from-emerald-600 hover:to-emerald-500 text-white border-0"
                asChild
              >
                <Link href="#comece-agora">
                  Transforme sua Recuperação de Receita <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </AnimatedSection>

        {/* Features Section */}
        <AnimatedSection id="features" variant="fadeIn" className="py-20 bg-muted/30 backdrop-blur-sm relative">
          <div className="absolute inset-0 bg-gradient-to-tr from-pink-500/5 via-transparent to-emerald-500/5"></div>
          <div className="container px-4 md:px-6 relative">
            <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
              <AnimatedSection variant="fadeInRight" className="order-2 md:order-1">
                <h3 className="text-2xl font-bold mb-4">
                  Estratégias inteligentes de retentativa para maximizar taxas de sucesso
                </h3>
                <p className="text-muted-foreground mb-6">
                  Otimize retentativas de pagamento com tratamento categorizado de erros, configurações de retentativa
                  personalizadas para assinaturas e estratégias específicas por método de pagamento para melhorar o
                  sucesso das transações.
                </p>
                <Button
                  className="bg-gradient-to-r from-emerald-500 to-emerald-400 hover:from-emerald-600 hover:to-emerald-500 text-white border-0"
                  asChild
                >
                  <Link href="#comece-agora">
                    Comece Agora <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </AnimatedSection>

              <AnimatedSection variant="fadeInLeft" className="order-1 md:order-2">
                <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                  <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-pink-500/10 opacity-30"></div>
                  <Image
                    src="/placeholder.svg?height=400&width=500&text=Smart+Retry+Strategies"
                    alt="Smart Retry Strategies"
                    width={500}
                    height={400}
                    className="relative z-10"
                  />
                </div>
              </AnimatedSection>
            </div>
          </div>
        </AnimatedSection>

        {/* Solar Sector Specific */}
        <AnimatedSection id="solar-specific" variant="fadeIn" className="py-20 relative">
          <div className="absolute inset-0 bg-gradient-to-bl from-pink-500/5 via-transparent to-emerald-500/5"></div>
          <div className="container px-4 md:px-6 relative">
            <AnimatedSection variant="fadeInUp" className="mb-12">
              <h2 className="text-3xl font-bold tracking-tighter mb-4">Valor Específico para o Setor Solar</h2>
              <p className="text-muted-foreground max-w-[800px]">
                A solução de recuperação de receita da Eos Solar Payments foi especialmente projetada para atender aos
                desafios únicos do setor de energia solar, oferecendo funcionalidades específicas que maximizam o valor
                para empresas deste segmento.
              </p>
            </AnimatedSection>

            <div className="mb-12">
              <Tabs defaultValue="residential" className="w-full">
                <TabsList className="grid grid-cols-3 mb-8">
                  <TabsTrigger value="residential">Geração Distribuída (GD)</TabsTrigger>
                  <TabsTrigger value="commercial">Geração Centralizada (GC)</TabsTrigger>
                  <TabsTrigger value="marketplace">Marketplace Solar</TabsTrigger>
                </TabsList>
                <TabsContent value="residential" className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                      <h3 className="text-2xl font-bold mb-4">Geração Distribuída (GD)</h3>
                      <p className="text-muted-foreground mb-6">
                        Para empresas focadas em instalações residenciais e pequenos negócios, nossa solução oferece:
                      </p>
                      <ul className="space-y-4">
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Recuperação de pagamentos de financiamento solar</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Retentativas inteligentes para pagamentos mensais de financiamento solar, reduzindo
                              inadimplência e protegendo o fluxo de caixa.
                            </p>
                          </div>
                        </li>
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Otimização para modelos de assinatura solar</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Estratégias específicas para modelos de assinatura solar (Solar-as-a-Service), garantindo
                              continuidade de receita e satisfação do cliente.
                            </p>
                          </div>
                        </li>
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Comunicação proativa com clientes</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Notificações automáticas para clientes antes de novas tentativas, melhorando a experiência
                              e aumentando as chances de sucesso do pagamento.
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                      <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-yellow-500/10 opacity-30"></div>
                      <Image
                        src="/placeholder.svg?height=400&width=500&text=Residential+Solar+Payments"
                        alt="Residential Solar Payments"
                        width={500}
                        height={400}
                        className="relative z-10"
                      />
                    </div>
                  </div>
                </TabsContent>
                <TabsContent value="commercial" className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div className="order-2 md:order-1">
                      <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                        <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-yellow-500/10 opacity-30"></div>
                        <Image
                          src="/placeholder.svg?height=400&width=500&text=Commercial+Solar+Payments"
                          alt="Commercial Solar Payments"
                          width={500}
                          height={400}
                          className="relative z-10"
                        />
                      </div>
                    </div>
                    <div className="order-1 md:order-2">
                      <h3 className="text-2xl font-bold mb-4">Geração Centralizada (GC)</h3>
                      <p className="text-muted-foreground mb-6">
                        Para desenvolvedores e operadores de projetos solares de grande escala, nossa solução oferece:
                      </p>
                      <ul className="space-y-4">
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Recuperação de pagamentos corporativos</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Estratégias específicas para pagamentos B2B, considerando ciclos de faturamento
                              corporativo e processos de aprovação mais complexos.
                            </p>
                          </div>
                        </li>
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Gestão de contratos PPA (Power Purchase Agreements)</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Retentativas inteligentes para pagamentos de contratos PPA, garantindo fluxo de caixa
                              estável para projetos de grande escala.
                            </p>
                          </div>
                        </li>
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Suporte multi-moeda e multi-região</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Recuperação de pagamentos em diferentes moedas e regiões, ideal para desenvolvedores
                              solares com operações internacionais.
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </TabsContent>
                <TabsContent value="marketplace" className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                      <h3 className="text-2xl font-bold mb-4">Marketplace Solar</h3>
                      <p className="text-muted-foreground mb-6">
                        Para plataformas que conectam consumidores, instaladores e financiadores, nossa solução oferece:
                      </p>
                      <ul className="space-y-4">
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Recuperação de pagamentos em marketplace multi-parte</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Estratégias de retentativa para transações complexas envolvendo múltiplos participantes no
                              ecossistema solar.
                            </p>
                          </div>
                        </li>
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Proteção de receita de comissões</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Recuperação eficiente de pagamentos para proteger receitas de comissões de instaladores e
                              parceiros no marketplace.
                            </p>
                          </div>
                        </li>
                        <li className="flex items-start gap-3">
                          <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                            <CheckCircle className="h-5 w-5 text-emerald-500" />
                          </div>
                          <div>
                            <span className="font-medium">Análise avançada de falhas de pagamento</span>
                            <p className="text-sm text-muted-foreground mt-1">
                              Insights detalhados sobre padrões de falha de pagamento, permitindo otimização contínua
                              das estratégias de recuperação.
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                      <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-yellow-500/10 opacity-30"></div>
                      <Image
                        src="/placeholder.svg?height=400&width=500&text=Solar+Marketplace+Payments"
                        alt="Solar Marketplace Payments"
                        width={500}
                        height={400}
                        className="relative z-10"
                      />
                    </div>
                  </div>
                </TabsContent>
              </Tabs>
            </div>

            <AnimatedSection variant="fadeInUp" className="mb-8">
              <h3 className="text-2xl font-bold mb-6">Impacto no Negócio Solar</h3>
              <div className="grid md:grid-cols-3 gap-8">
                <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                  <CardHeader>
                    <div className="rounded-full bg-emerald-100 dark:bg-emerald-900/30 p-2 w-10 h-10 flex items-center justify-center mb-2">
                      <BarChart3 className="h-5 w-5 text-emerald-500" />
                    </div>
                    <CardTitle>Redução de Churn</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground">
                      Redução de até 40% no churn involuntário, aumentando significativamente o valor do tempo de vida
                      do cliente (LTV) em modelos de assinatura solar.
                    </p>
                  </CardContent>
                </Card>

                <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                  <CardHeader>
                    <div className="rounded-full bg-pink-100 dark:bg-pink-900/30 p-2 w-10 h-10 flex items-center justify-center mb-2">
                      <TrendingUp className="h-5 w-5 text-pink-500" />
                    </div>
                    <CardTitle>Aumento de Receita</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground">
                      Recuperação de até 25% de receita que seria perdida devido a falhas de pagamento, impactando
                      diretamente o fluxo de caixa e a previsibilidade financeira.
                    </p>
                  </CardContent>
                </Card>

                <Card className="bg-background/50 backdrop-blur-sm border-border/20">
                  <CardHeader>
                    <div className="rounded-full bg-yellow-100 dark:bg-yellow-900/30 p-2 w-10 h-10 flex items-center justify-center mb-2">
                      <Shield className="h-5 w-5 text-yellow-500" />
                    </div>
                    <CardTitle>Experiência do Cliente</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground">
                      Melhoria na experiência do cliente com menos interrupções de serviço e comunicações proativas,
                      resultando em aumento de 30% na satisfação do cliente.
                    </p>
                  </CardContent>
                </Card>
              </div>
            </AnimatedSection>

            <AnimatedSection variant="fadeInUp">
              <div className="p-6 rounded-lg bg-gradient-to-r from-emerald-50 to-yellow-50 dark:from-emerald-900/20 dark:to-yellow-900/20 border border-emerald-200 dark:border-emerald-800/30">
                <h4 className="font-bold text-lg mb-2 text-emerald-700 dark:text-emerald-300">
                  Abordagem PLG para Recuperação de Receita
                </h4>
                <p className="text-sm text-emerald-700/80 dark:text-emerald-300/80 mb-4">
                  Nossa estratégia de Product-Led Growth para recuperação de receita permite que empresas solares
                  implementem rapidamente, vejam resultados imediatos e expandam o uso conforme comprovam o valor.
                </p>
                <div className="grid md:grid-cols-3 gap-4 mt-4">
                  <div className="flex items-start gap-2">
                    <div className="rounded-full bg-emerald-200 dark:bg-emerald-800 p-1 mt-0.5 flex-shrink-0">
                      <CheckCircle className="h-3 w-3 text-emerald-700 dark:text-emerald-300" />
                    </div>
                    <span className="text-xs text-emerald-700/80 dark:text-emerald-300/80">
                      Implementação self-service com templates específicos para solar
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <div className="rounded-full bg-emerald-200 dark:bg-emerald-800 p-1 mt-0.5 flex-shrink-0">
                      <CheckCircle className="h-3 w-3 text-emerald-700 dark:text-emerald-300" />
                    </div>
                    <span className="text-xs text-emerald-700/80 dark:text-emerald-300/80">
                      Dashboard de análise de resultados em tempo real
                    </span>
                  </div>
                  <div className="flex items-start gap-2">
                    <div className="rounded-full bg-emerald-200 dark:bg-emerald-800 p-1 mt-0.5 flex-shrink-0">
                      <CheckCircle className="h-3 w-3 text-emerald-700 dark:text-emerald-300" />
                    </div>
                    <span className="text-xs text-emerald-700/80 dark:text-emerald-300/80">
                      Modelo de preços baseado em valor recuperado
                    </span>
                  </div>
                </div>
              </div>
            </AnimatedSection>
          </div>
        </AnimatedSection>

        {/* Value Chain Section */}
        <AnimatedSection variant="fadeIn" className="py-20 bg-muted/30 backdrop-blur-sm relative">
          <div className="absolute inset-0 bg-gradient-to-bl from-pink-500/5 via-transparent to-emerald-500/5"></div>
          <div className="container px-4 md:px-6 relative">
            <AnimatedSection variant="fadeInUp" className="mb-12">
              <h2 className="text-3xl font-bold tracking-tighter mb-4">Cadeia de Valor Completa</h2>
              <p className="text-muted-foreground max-w-[800px]">
                Nossa solução de recuperação de receita se integra perfeitamente à cadeia de valor completa da Eos Solar
                Payments, oferecendo valor em cada fase do ciclo de vida do cliente.
              </p>
            </AnimatedSection>

            <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
              <AnimatedSection variant="fadeInLeft">
                <div className="space-y-6">
                  <h3 className="text-2xl font-bold">Fase de Pré-Onboarding</h3>
                  <p className="text-muted-foreground mb-4">
                    Durante a fase inicial, estabelecemos as bases para uma implementação bem-sucedida:
                  </p>
                  <ul className="space-y-4">
                    <li className="flex items-start gap-3">
                      <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                        <CheckCircle className="h-5 w-5 text-emerald-500" />
                      </div>
                      <div>
                        <span className="font-medium">Avaliação de Necessidades Personalizada</span>
                        <p className="text-sm text-muted-foreground mt-1">
                          Análise detalhada dos padrões de falha de pagamento existentes e configuração de estratégias
                          de retentativa sob medida.
                        </p>
                      </div>
                    </li>
                    <li className="flex items-start gap-3">
                      <div className="rounded-full bg-emerald-500/10 p-2 mt-1 flex-shrink-0">
                        <CheckCircle className="h-5 w-5 text-emerald-500" />
                      </div>
                      <div>
                        <span className="font-medium">Calculadora de ROI de Recuperação</span>
                        <p className="text-sm text-muted-foreground mt-1">
                          Estimativa precisa do potencial de recuperação de receita com base nos dados históricos de
                          pagamentos do cliente.
                        </p>
                      </div>
                    </li>
                  </ul>
                </div>
              </AnimatedSection>

              <AnimatedSection variant="fadeInRight">
                <div className="space-y-6">
                  <h3 className="text-2xl font-bold">Fase de Operação Contínua</h3>
                  <p className="text-muted-foreground mb-4">Durante a operação diária, nossa solução:</p>
                  <ul className="space-y-4">
                    <li className="flex items-start gap-3">
                      <div className="rounded-full bg-pink-500/10 p-2 mt-1 flex-shrink-0">
                        <CheckCircle className="h-5 w-5 text-pink-500" />
                      </div>
                      <div>
                        <span className="font-medium">Automação de Retentativas</span>
                        <p className="text-sm text-muted-foreground mt-1">
                          Execução automática de estratégias de retentativa otimizadas por IA, sem necessidade de
                          intervenção manual.
                        </p>
                      </div>
                    </li>
                    <li className="flex items-start gap-3">
                      <div className="rounded-full bg-pink-500/10 p-2 mt-1 flex-shrink-0">
                        <CheckCircle className="h-5 w-5 text-pink-500" />
                      </div>
                      <div>
                        <span className="font-medium">Monitoramento em Tempo Real</span>
                        <p className="text-sm text-muted-foreground mt-1">
                          Dashboard detalhado mostrando taxas de recuperação, economia gerada e métricas de desempenho
                          em tempo real.
                        </p>
                      </div>
                    </li>
                  </ul>
                </div>
              </AnimatedSection>
            </div>

            <div className="grid md:grid-cols-2 gap-12 items-center">
              <AnimatedSection variant="fadeInLeft" className="order-2 md:order-1">
                <div className="space-y-6">
                  <h3 className="text-2xl font-bold">Fase de Valor de Longo Prazo</h3>
                  <p className="text-muted-foreground mb-4">
                    À medida que a utilização amadurece, desbloqueamos valor estratégico:
                  </p>
                  <ul className="space-y-4">
                    <li className="flex items-start gap-3">
                      <div className="rounded-full bg-yellow-500/10 p-2 mt-1 flex-shrink-0">
                        <CheckCircle className="h-5 w-5 text-yellow-500" />
                      </div>
                      <div>
                        <span className="font-medium">Análise Preditiva de Falhas</span>
                        <p className="text-sm text-muted-foreground mt-1">
                          Algoritmos avançados preveem potenciais falhas de pagamento antes que ocorram, permitindo
                          ações preventivas.
                        </p>
                      </div>
                    </li>
                    <li className="flex items-start gap-3">
                      <div className="rounded-full bg-yellow-500/10 p-2 mt-1 flex-shrink-0">
                        <CheckCircle className="h-5 w-5 text-yellow-500" />
                      </div>
                      <div>
                        <span className="font-medium">Otimização Contínua de Estratégias</span>
                        <p className="text-sm text-muted-foreground mt-1">
                          Refinamento constante das estratégias de retentativa com base em dados históricos e padrões
                          emergentes.
                        </p>
                      </div>
                    </li>
                  </ul>
                </div>
              </AnimatedSection>

              <AnimatedSection variant="fadeInRight" className="order-1 md:order-2">
                <div className="relative rounded-2xl overflow-hidden border border-border/20 bg-background/40 backdrop-blur-sm shadow-xl">
                  <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-yellow-500/10 opacity-30"></div>
                  <Image
                    src="/placeholder.svg?height=400&width=500&text=Value+Chain+Optimization"
                    alt="Value Chain Optimization"
                    width={500}
                    height={400}
                    className="relative z-10"
                  />
                </div>
              </AnimatedSection>
            </div>
          </div>
        </AnimatedSection>

        {/* CTA Section */}
        <AnimatedSection variant="fadeIn" className="py-16 relative">
          <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/10 via-pink-500/10 to-yellow-500/10"></div>
          <div className="container px-4 md:px-6 text-center relative">
            <div className="max-w-3xl mx-auto">
              <AnimatedSection variant="fadeInUp" className="text-3xl md:text-4xl font-bold tracking-tighter mb-4">
                Transforme sua recuperação de receita com a Eos Solar Payments
              </AnimatedSection>
              <AnimatedSection
                variant="fadeInUp"
                delay={0.1}
                className="text-muted-foreground text-lg max-w-[700px] mx-auto mb-8"
              >
                Descubra como nossa solução de recuperação de receita pode reduzir o churn, aumentar a receita e
                melhorar a experiência do cliente.
              </AnimatedSection>
              <AnimatedSection
                variant="fadeInUp"
                delay={0.2}
                className="flex flex-col sm:flex-row gap-4 justify-center mt-8"
              >
                <Button
                  size="lg"
                  className="bg-gradient-to-r from-emerald-500 to-emerald-400 hover:from-emerald-600 hover:to-emerald-500 text-white border-0 h-12 px-6"
                  asChild
                >
                  <Link href="#comece-agora" id="comece-agora">
                    Comece Agora <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-border/50 bg-background/50 backdrop-blur-sm h-12 px-6 hover:bg-background/80"
                  asChild
                >
                  <Link href="#agende-demo">Agende uma Demo</Link>
                </Button>
              </AnimatedSection>
            </div>
          </div>
        </AnimatedSection>
      </main>

      <footer className="border-t border-border/10 bg-muted/30 backdrop-blur-sm py-12 relative z-10">
        <div className="container px-4 md:px-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
            <div className="md:col-span-1">
              <h3 className="font-semibold mb-4">Soluções</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Intelligent Routing
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Vault
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Alternative Payment Methods
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Cost Observability
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Reconciliation
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Revenue Recovery
                  </Link>
                </li>
              </ul>
            </div>
            <div className="md:col-span-1">
              <h3 className="font-semibold mb-4">Conformidades</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Vulnerability Disclosure
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    PCI DSS 4.0
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    ISO 27001:2022
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    SOC 2 Type 2
                  </Link>
                </li>
              </ul>
            </div>
            <div className="md:col-span-1">
              <h3 className="font-semibold mb-4">Recursos</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Case Studies
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Community
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Blogs
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Integrações
                  </Link>
                </li>
              </ul>
            </div>
            <div className="md:col-span-1">
              <h3 className="font-semibold mb-4">Sobre Nós</h3>
              <ul className="space-y-2">
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Sobre Eos Solar Payments
                  </Link>
                </li>
                <li>
                  <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                    Carreiras
                  </Link>
                </li>
              </ul>
              <h3 className="font-semibold mt-6 mb-4">Encontre-nos em</h3>
              <div className="flex gap-4">
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <span className="sr-only">LinkedIn</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                    <rect width="4" height="12" x="2" y="9"></rect>
                    <circle cx="4" cy="4" r="2"></circle>
                  </svg>
                </Link>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <span className="sr-only">Twitter</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                  </svg>
                </Link>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <span className="sr-only">YouTube</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path>
                    <path d="m10 15 5-3-5-3z"></path>
                  </svg>
                </Link>
              </div>
            </div>
          </div>
          <div className="pt-8 border-t border-border/10 flex flex-col md:flex-row justify-between items-center">
            <p className="text-sm text-muted-foreground mb-4 md:mb-0">
              © {new Date().getFullYear()} Eos Solar Technologies. Todos os direitos reservados.
            </p>
            <div className="flex gap-6">
              <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Política de Privacidade
              </Link>
              <Link href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Termos de Uso
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/metric-card.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import type { LucideIcon } from "lucide-react"

interface MetricCardProps {
  title: string
  value: string
  change: {
    value: string
    positive: boolean
  }
  icon: LucideIcon
  description?: string
}

export function MetricCard({ title, value, change, icon: Icon, description }: MetricCardProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardContent className="p-6">
        <div className="flex justify-between items-start">
          <div>
            <p className="text-sm font-medium text-muted-foreground">{title}</p>
            <h3 className="text-2xl md:text-3xl font-bold mt-2 mb-1">{value}</h3>
            <div className="flex items-center gap-1">
              <span className={`text-xs font-medium ${change.positive ? "text-emerald-500" : "text-red-500"}`}>
                {change.positive ? "+" : ""}
                {change.value}
              </span>
              <span className="text-xs text-muted-foreground">vs. mês anterior</span>
            </div>
            {description && <p className="text-xs text-muted-foreground mt-2">{description}</p>}
          </div>
          <div className="rounded-full bg-gradient-to-br from-emerald-500/10 via-pink-500/10 to-yellow-500/10 p-3">
            <Icon className="h-5 w-5 text-emerald-500" />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/chart-container.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import type { ReactNode } from "react"

interface ChartContainerProps {
  title: string
  children: ReactNode
  description?: string
  action?: ReactNode
}

export function ChartContainer({ title, children, description, action }: ChartContainerProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md border-border/20 bg-background/50 backdrop-blur-sm hover:bg-background/70">
      <CardHeader className="p-6 pb-0">
        <div className="flex justify-between items-center">
          <div>
            <CardTitle className="text-lg font-semibold">{title}</CardTitle>
            {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
          </div>
          {action && <div>{action}</div>}
        </div>
      </CardHeader>
      <CardContent className="p-6">{children}</CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/alert-badge.tsx" isMerged="true"
import { Badge } from "@/components/ui/badge"
import { Bell } from "lucide-react"

interface AlertBadgeProps {
  count: number
  variant?: "default" | "warning" | "critical"
}

export function AlertBadge({ count, variant = "default" }: AlertBadgeProps) {
  const variantClasses = {
    default: "bg-blue-500 hover:bg-blue-600",
    warning: "bg-amber-500 hover:bg-amber-600",
    critical: "bg-red-500 hover:bg-red-600",
  }

  return (
    <div className="relative">
      <Bell className="h-5 w-5" />
      {count > 0 && (
        <Badge
          className={`absolute -top-2 -right-2 h-5 min-w-[20px] px-1 text-xs flex items-center justify-center ${variantClasses[variant]}`}
        >
          {count}
        </Badge>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/alert-notification.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { AlertCircle, AlertTriangle, Info, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cva } from "class-variance-authority"

export type AlertSeverity = "info" | "warning" | "critical"

export interface AlertNotificationProps {
  title: string
  message: string
  timestamp: string
  severity: AlertSeverity
  metric?: string
  threshold?: string
  currentValue?: string
  onDismiss?: () => void
  onViewDetails?: () => void
}

const alertVariants = cva("", {
  variants: {
    severity: {
      info: "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/50",
      warning: "border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/50",
      critical: "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/50",
    },
  },
  defaultVariants: {
    severity: "info",
  },
})

const iconVariants = cva("h-5 w-5", {
  variants: {
    severity: {
      info: "text-blue-500",
      warning: "text-amber-500",
      critical: "text-red-500",
    },
  },
  defaultVariants: {
    severity: "info",
  },
})

export function AlertNotification({
  title,
  message,
  timestamp,
  severity,
  metric,
  threshold,
  currentValue,
  onDismiss,
  onViewDetails,
}: AlertNotificationProps) {
  const AlertIcon = severity === "info" ? Info : severity === "warning" ? AlertTriangle : AlertCircle

  return (
    <Card className={`mb-3 border ${alertVariants({ severity })}`}>
      <CardContent className="p-4">
        <div className="flex items-start gap-3">
          <div className="flex-shrink-0 mt-1">
            <AlertIcon className={iconVariants({ severity })} />
          </div>
          <div className="flex-grow">
            <div className="flex justify-between items-start">
              <h4 className="font-semibold text-sm">{title}</h4>
              <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={onDismiss}>
                <X className="h-4 w-4" />
                <span className="sr-only">Fechar</span>
              </Button>
            </div>
            <p className="text-sm text-muted-foreground mt-1">{message}</p>

            {(metric || threshold || currentValue) && (
              <div className="mt-2 p-2 bg-background/80 rounded-md text-xs">
                {metric && (
                  <div>
                    <span className="font-medium">Métrica:</span> {metric}
                  </div>
                )}
                {threshold && (
                  <div>
                    <span className="font-medium">Limite:</span> {threshold}
                  </div>
                )}
                {currentValue && (
                  <div>
                    <span className="font-medium">Valor atual:</span> {currentValue}
                  </div>
                )}
              </div>
            )}

            <div className="flex justify-between items-center mt-2">
              <span className="text-xs text-muted-foreground">{timestamp}</span>
              {onViewDetails && (
                <Button variant="link" size="sm" className="h-6 p-0" onClick={onViewDetails}>
                  Ver detalhes
                </Button>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/alert-config-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Bell, Mail, Smartphone } from "lucide-react"

export function AlertConfigForm() {
  const [emailEnabled, setEmailEnabled] = useState(true)
  const [smsEnabled, setSmsEnabled] = useState(false)
  const [pushEnabled, setPushEnabled] = useState(true)

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-xl">Configurar Alertas</CardTitle>
        <CardDescription>Defina limites e condições para receber alertas sobre métricas importantes</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="recovery-rate">
          <TabsList className="grid grid-cols-3 mb-6">
            <TabsTrigger value="recovery-rate">Taxa de Recuperação</TabsTrigger>
            <TabsTrigger value="failure-types">Tipos de Falha</TabsTrigger>
            <TabsTrigger value="strategies">Estratégias</TabsTrigger>
          </TabsList>

          <TabsContent value="recovery-rate" className="space-y-6">
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="recovery-threshold">Limite de Alerta (%)</Label>
                  <Input id="recovery-threshold" type="number" placeholder="65" min="0" max="100" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="recovery-period">Período de Análise</Label>
                  <Select defaultValue="day">
                    <SelectTrigger id="recovery-period">
                      <SelectValue placeholder="Selecione um período" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="hour">Última hora</SelectItem>
                      <SelectItem value="day">Último dia</SelectItem>
                      <SelectItem value="week">Última semana</SelectItem>
                      <SelectItem value="month">Último mês</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="recovery-comparison">Comparar com</Label>
                <Select defaultValue="previous">
                  <SelectTrigger id="recovery-comparison">
                    <SelectValue placeholder="Selecione uma base de comparação" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="previous">Período anterior</SelectItem>
                    <SelectItem value="average">Média histórica</SelectItem>
                    <SelectItem value="target">Meta definida</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="recovery-change">Mudança Significativa (%)</Label>
                <Input id="recovery-change" type="number" placeholder="10" min="0" max="100" />
                <p className="text-xs text-muted-foreground mt-1">
                  Alerta quando a taxa de recuperação cair mais do que esta porcentagem
                </p>
              </div>

              <div className="space-y-2">
                <Label htmlFor="recovery-severity">Severidade do Alerta</Label>
                <Select defaultValue="warning">
                  <SelectTrigger id="recovery-severity">
                    <SelectValue placeholder="Selecione a severidade" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="info">Informativo</SelectItem>
                    <SelectItem value="warning">Aviso</SelectItem>
                    <SelectItem value="critical">Crítico</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="failure-types" className="space-y-6">
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="failure-type">Tipo de Falha</Label>
                  <Select defaultValue="expired">
                    <SelectTrigger id="failure-type">
                      <SelectValue placeholder="Selecione o tipo de falha" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="expired">Cartão Expirado</SelectItem>
                      <SelectItem value="insufficient">Fundos Insuficientes</SelectItem>
                      <SelectItem value="processing">Erro de Processamento</SelectItem>
                      <SelectItem value="blocked">Cartão Bloqueado</SelectItem>
                      <SelectItem value="other">Outros</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="failure-threshold">Limite de Alerta (%)</Label>
                  <Input id="failure-threshold" type="number" placeholder="25" min="0" max="100" />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="failure-period">Período de Análise</Label>
                <Select defaultValue="day">
                  <SelectTrigger id="failure-period">
                    <SelectValue placeholder="Selecione um período" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="hour">Última hora</SelectItem>
                    <SelectItem value="day">Último dia</SelectItem>
                    <SelectItem value="week">Última semana</SelectItem>
                    <SelectItem value="month">Último mês</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="failure-change">Aumento Significativo (%)</Label>
                <Input id="failure-change" type="number" placeholder="15" min="0" max="100" />
                <p className="text-xs text-muted-foreground mt-1">
                  Alerta quando o tipo de falha aumentar mais do que esta porcentagem
                </p>
              </div>

              <div className="space-y-2">
                <Label htmlFor="failure-severity">Severidade do Alerta</Label>
                <Select defaultValue="warning">
                  <SelectTrigger id="failure-severity">
                    <SelectValue placeholder="Selecione a severidade" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="info">Informativo</SelectItem>
                    <SelectItem value="warning">Aviso</SelectItem>
                    <SelectItem value="critical">Crítico</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="strategies" className="space-y-6">
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="strategy-name">Estratégia</Label>
                  <Select defaultValue="all">
                    <SelectTrigger id="strategy-name">
                      <SelectValue placeholder="Selecione a estratégia" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Todas as estratégias</SelectItem>
                      <SelectItem value="a">Estratégia A</SelectItem>
                      <SelectItem value="b">Estratégia B</SelectItem>
                      <SelectItem value="c">Estratégia C</SelectItem>
                      <SelectItem value="d">Estratégia D</SelectItem>
                      <SelectItem value="e">Estratégia E</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="strategy-threshold">Limite de Sucesso (%)</Label>
                  <Input id="strategy-threshold" type="number" placeholder="60" min="0" max="100" />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="strategy-period">Período de Análise</Label>
                <Select defaultValue="week">
                  <SelectTrigger id="strategy-period">
                    <SelectValue placeholder="Selecione um período" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="day">Último dia</SelectItem>
                    <SelectItem value="week">Última semana</SelectItem>
                    <SelectItem value="month">Último mês</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="strategy-attempts">Mínimo de Tentativas</Label>
                <Input id="strategy-attempts" type="number" placeholder="50" min="0" />
                <p className="text-xs text-muted-foreground mt-1">
                  Número mínimo de tentativas para considerar a estratégia relevante
                </p>
              </div>

              <div className="space-y-2">
                <Label htmlFor="strategy-severity">Severidade do Alerta</Label>
                <Select defaultValue="warning">
                  <SelectTrigger id="strategy-severity">
                    <SelectValue placeholder="Selecione a severidade" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="info">Informativo</SelectItem>
                    <SelectItem value="warning">Aviso</SelectItem>
                    <SelectItem value="critical">Crítico</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </TabsContent>
        </Tabs>

        <div className="mt-8 space-y-4">
          <h4 className="font-medium">Canais de Notificação</h4>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Mail className="h-4 w-4 text-muted-foreground" />
                <Label htmlFor="email-notifications" className="cursor-pointer">
                  Email
                </Label>
              </div>
              <Switch id="email-notifications" checked={emailEnabled} onCheckedChange={setEmailEnabled} />
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Smartphone className="h-4 w-4 text-muted-foreground" />
                <Label htmlFor="sms-notifications" className="cursor-pointer">
                  SMS
                </Label>
              </div>
              <Switch id="sms-notifications" checked={smsEnabled} onCheckedChange={setSmsEnabled} />
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Bell className="h-4 w-4 text-muted-foreground" />
                <Label htmlFor="push-notifications" className="cursor-pointer">
                  Notificações Push
                </Label>
              </div>
              <Switch id="push-notifications" checked={pushEnabled} onCheckedChange={setPushEnabled} />
            </div>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancelar</Button>
        <Button className="bg-emerald-500 hover:bg-emerald-600">Salvar Configurações</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/recovery/alerts/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { AlertConfigForm } from "@/components/dashboard/alert-config-form"
import { AlertHistory } from "@/components/dashboard/alert-history"

export default function AlertsConfigPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/dashboard/recovery">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar ao Dashboard
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Configuração de Alertas</h1>
          <p className="text-muted-foreground">
            Configure alertas personalizados para monitorar métricas importantes de recuperação de receita
          </p>
        </div>

        <div className="grid grid-cols-1 gap-8">
          <AlertConfigForm />
          <AlertHistory />
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true"
"use client"

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

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

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

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

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/dashboard/ai-recommendations.tsx" isMerged="true"
import { ChartContainer } from "@/components/dashboard/chart-container"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Sparkles, Lightbulb, ArrowRight, Check, Clock } from "lucide-react"

export function AiRecommendations() {
  const recommendations = [
    {
      id: 1,
      title: "Otimizar Estratégia C para transações de alto valor",
      description:
        "Ajustar os parâmetros de retentativa para transações acima de R$1.000, aumentando o intervalo entre tentativas de 24h para 48h com base em padrões históricos de sucesso.",
      impact: "Aumento estimado de 12% na taxa de recuperação para este segmento",
      difficulty: "Média",
      timeframe: "Implementação em 1-2 dias",
      status: "pending",
    },
    {
      id: 2,
      title: "Implementar comunicação proativa para cartões prestes a expirar",
      description:
        "Enviar notificações 15 dias antes da expiração do cartão, permitindo que clientes atualizem informações antes da falha ocorrer.",
      impact: "Redução potencial de 25% em falhas por cartão expirado",
      difficulty: "Baixa",
      timeframe: "Implementação em 3-5 dias",
      status: "pending",
    },
    {
      id: 3,
      title: "Ajustar timing de retentativas para o período de fim de ano",
      description:
        "Modificar a estratégia de retentativa durante dezembro, priorizando tentativas no início do mês e após o dia 20, evitando o período de maior concentração de gastos.",
      impact: "Mitigação da queda sazonal em até 7%",
      difficulty: "Baixa",
      timeframe: "Implementar até 15 de novembro",
      status: "pending",
    },
    {
      id: 4,
      title: "Segmentar estratégias por valor de transação",
      description:
        "Criar estratégias específicas para diferentes faixas de valor, com abordagens personalizadas para transações pequenas, médias e grandes.",
      impact: "Aumento estimado de 8% na taxa geral de recuperação",
      difficulty: "Alta",
      timeframe: "Implementação em 1-2 semanas",
      status: "in_progress",
    },
  ]

  const getDifficultyBadge = (difficulty: string) => {
    switch (difficulty) {
      case "Baixa":
        return (
          <Badge variant="outline" className="bg-emerald-100 text-emerald-800 border-emerald-200">
            Baixa
          </Badge>
        )
      case "Média":
        return (
          <Badge variant="outline" className="bg-amber-100 text-amber-800 border-amber-200">
            Média
          </Badge>
        )
      case "Alta":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 border-red-200">
            Alta
          </Badge>
        )
      default:
        return null
    }
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "pending":
        return (
          <Badge variant="outline" className="bg-blue-100 text-blue-800 border-blue-200">
            Pendente
          </Badge>
        )
      case "in_progress":
        return (
          <Badge variant="outline" className="bg-purple-100 text-purple-800 border-purple-200">
            <Clock className="h-3 w-3 mr-1" />
            Em Progresso
          </Badge>
        )
      case "completed":
        return (
          <Badge variant="outline" className="bg-emerald-100 text-emerald-800 border-emerald-200">
            <Check className="h-3 w-3 mr-1" />
            Implementado
          </Badge>
        )
      default:
        return null
    }
  }

  return (
    <ChartContainer
      title={
        <div className="flex items-center gap-2">
          <span>Recomendações Inteligentes</span>
          <Badge variant="outline" className="bg-purple-100 text-purple-800 border-purple-200">
            <Sparkles className="h-3 w-3 mr-1" />
            IA
          </Badge>
        </div>
      }
      description="Sugestões baseadas em análise preditiva para melhorar a taxa de recuperação"
    >
      <div className="space-y-4">
        {recommendations.map((recommendation) => (
          <Card key={recommendation.id} className="overflow-hidden border-border/20 bg-background/50 backdrop-blur-sm">
            <CardContent className="p-4">
              <div className="flex items-start gap-3">
                <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-2 mt-1 flex-shrink-0">
                  <Lightbulb className="h-4 w-4 text-purple-500" />
                </div>
                <div className="flex-1">
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="font-medium text-sm">{recommendation.title}</h4>
                    {getStatusBadge(recommendation.status)}
                  </div>
                  <p className="text-xs text-muted-foreground mb-3">{recommendation.description}</p>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-3">
                    <div>
                      <span className="text-xs font-medium block">Impacto Estimado</span>
                      <span className="text-xs text-muted-foreground">{recommendation.impact}</span>
                    </div>
                    <div>
                      <span className="text-xs font-medium block">Dificuldade</span>
                      <div>{getDifficultyBadge(recommendation.difficulty)}</div>
                    </div>
                    <div>
                      <span className="text-xs font-medium block">Prazo</span>
                      <span className="text-xs text-muted-foreground">{recommendation.timeframe}</span>
                    </div>
                  </div>
                  <div className="flex justify-end">
                    <Button variant="link" size="sm" className="h-6 p-0 text-purple-500 hover:text-purple-600">
                      Implementar <ArrowRight className="ml-1 h-3 w-3" />
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </ChartContainer>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/anomaly-detection.tsx" isMerged="true"
import { ChartContainer } from "@/components/dashboard/chart-container"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Sparkles, AlertCircle, ArrowRight, Calendar } from "lucide-react"

export function AnomalyDetection() {
  const anomalies = [
    {
      id: 1,
      title: "Aumento súbito em falhas de cartão expirado",
      description:
        "Detectamos um aumento de 35% em falhas por cartão expirado nas últimas 48 horas, significativamente acima do padrão histórico.",
      detectedAt: "22/04/2023 08:15",
      confidence: "Alta (95%)",
      status: "Não resolvido",
      severity: "critical",
    },
    {
      id: 2,
      title: "Queda na eficácia da Estratégia B",
      description:
        "A taxa de sucesso da Estratégia B caiu de 72% para 58% na última semana, sem alterações nos parâmetros de configuração.",
      detectedAt: "21/04/2023 14:30",
      confidence: "Média (82%)",
      status: "Em análise",
      severity: "warning",
    },
    {
      id: 3,
      title: "Padrão atípico em horários de falha",
      description:
        "Identificamos uma concentração anormal de falhas de pagamento entre 2h e 4h da manhã, possivelmente indicando um problema de processamento noturno.",
      detectedAt: "20/04/2023 09:45",
      confidence: "Alta (91%)",
      status: "Resolvido",
      severity: "resolved",
    },
  ]

  const getSeverityIcon = (severity: string) => {
    switch (severity) {
      case "critical":
        return <AlertCircle className="h-4 w-4 text-red-500" />
      case "warning":
        return <AlertCircle className="h-4 w-4 text-amber-500" />
      case "resolved":
        return <AlertCircle className="h-4 w-4 text-emerald-500" />
      default:
        return <AlertCircle className="h-4 w-4 text-blue-500" />
    }
  }

  const getSeverityBadge = (severity: string) => {
    switch (severity) {
      case "critical":
        return (
          <Badge variant="outline" className="bg-red-100 text-red-800 border-red-200">
            Crítico
          </Badge>
        )
      case "warning":
        return (
          <Badge variant="outline" className="bg-amber-100 text-amber-800 border-amber-200">
            Alerta
          </Badge>
        )
      case "resolved":
        return (
          <Badge variant="outline" className="bg-emerald-100 text-emerald-800 border-emerald-200">
            Resolvido
          </Badge>
        )
      default:
        return null
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "Não resolvido":
        return "text-red-500"
      case "Em análise":
        return "text-amber-500"
      case "Resolvido":
        return "text-emerald-500"
      default:
        return "text-muted-foreground"
    }
  }

  return (
    <ChartContainer
      title={
        <div className="flex items-center gap-2">
          <span>Detecção de Anomalias</span>
          <Badge variant="outline" className="bg-purple-100 text-purple-800 border-purple-200">
            <Sparkles className="h-3 w-3 mr-1" />
            IA
          </Badge>
        </div>
      }
      description="Padrões anormais detectados automaticamente pela IA"
    >
      <div className="space-y-4">
        {anomalies.map((anomaly) => (
          <Card
            key={anomaly.id}
            className={`overflow-hidden border-border/20 bg-background/50 backdrop-blur-sm ${
              anomaly.severity === "critical" ? "border-l-4 border-l-red-500" : ""
            }`}
          >
            <CardContent className="p-4">
              <div className="flex items-start gap-3">
                <div
                  className={`rounded-full ${
                    anomaly.severity === "critical"
                      ? "bg-red-100 dark:bg-red-900/30"
                      : anomaly.severity === "warning"
                        ? "bg-amber-100 dark:bg-amber-900/30"
                        : "bg-emerald-100 dark:bg-emerald-900/30"
                  } p-2 mt-1 flex-shrink-0`}
                >
                  {getSeverityIcon(anomaly.severity)}
                </div>
                <div className="flex-1">
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="font-medium text-sm">{anomaly.title}</h4>
                    {getSeverityBadge(anomaly.severity)}
                  </div>
                  <p className="text-xs text-muted-foreground mb-3">{anomaly.description}</p>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-3">
                    <div className="flex items-center gap-1">
                      <Calendar className="h-3 w-3 text-muted-foreground" />
                      <span className="text-xs text-muted-foreground">Detectado: {anomaly.detectedAt}</span>
                    </div>
                    <div>
                      <span className="text-xs text-muted-foreground">Confiança: {anomaly.confidence}</span>
                    </div>
                    <div>
                      <span className={`text-xs font-medium ${getStatusColor(anomaly.status)}`}>
                        Status: {anomaly.status}
                      </span>
                    </div>
                  </div>
                  <div className="flex justify-end">
                    <Button variant="link" size="sm" className="h-6 p-0 text-purple-500 hover:text-purple-600">
                      Investigar <ArrowRight className="ml-1 h-3 w-3" />
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </ChartContainer>
  )
}
[V0_FILE]typescriptreact:file="lib/ai-utils.ts" isMerged="true"
import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

export async function generatePrediction(historicalData: any) {
  try {
    const prompt = `
      Analyze the following historical payment recovery data and predict future trends:
      ${JSON.stringify(historicalData)}
      
      Please provide:
      1. A prediction for the next 6 months
      2. Confidence intervals for the prediction
      3. Key risk factors that might affect recovery rates
      4. Actionable recommendations to improve recovery rates
    `

    const { text } = await generateText({
      model: openai("gpt-4o"),
      prompt,
    })

    return JSON.parse(text)
  } catch (error) {
    console.error("Error generating prediction:", error)
    return {
      prediction: [],
      confidenceIntervals: { upper: [], lower: [] },
      riskFactors: [],
      recommendations: [],
    }
  }
}

export async function detectAnomalies(recentData: any, historicalPatterns: any) {
  try {
    const prompt = `
      Analyze the following recent payment recovery data:
      ${JSON.stringify(recentData)}
      
      Compare it with historical patterns:
      ${JSON.stringify(historicalPatterns)}
      
      Identify any anomalies or unusual patterns that might indicate problems.
      For each anomaly, provide:
      1. A description of the anomaly
      2. Confidence level (percentage)
      3. Potential impact
      4. Recommended actions
    `

    const { text } = await generateText({
      model: openai("gpt-4o"),
      prompt,
    })

    return JSON.parse(text)
  } catch (error) {
    console.error("Error detecting anomalies:", error)
    return { anomalies: [] }
  }
}

export async function generateRecommendations(recoveryData: any, strategies: any) {
  try {
    const prompt = `
      Based on the following recovery data and current strategies:
      Recovery Data: ${JSON.stringify(recoveryData)}
      Current Strategies: ${JSON.stringify(strategies)}
      
      Generate 3-5 specific, actionable recommendations to improve recovery rates.
      For each recommendation, include:
      1. A clear title
      2. Detailed description of the action
      3. Expected impact (quantified if possible)
      4. Implementation difficulty (Low, Medium, High)
      5. Suggested timeframe for implementation
    `

    const { text } = await generateText({
      model: openai("gpt-4o"),
      prompt,
    })

    return JSON.parse(text)
  } catch (error) {
    console.error("Error generating recommendations:", error)
    return { recommendations: [] }
  }
}
[V0_FILE]typescriptreact:file="app/api/predictions/route.ts" isMerged="true"
import { NextResponse } from "next/server"

// Sample historical data - in a real app, this would come from your database
const historicalData = {
  recoveryRates: [62, 65, 68, 64, 60, 58],
  failureTypes: {
    expiredCard: [25, 28, 30, 32, 33, 35],
    insufficientFunds: [35, 32, 30, 28, 27, 25],
    processingError: [20, 20, 20, 20, 20, 20],
    blockedCard: [15, 15, 15, 15, 15, 15],
    other: [5, 5, 5, 5, 5, 5],
  },
  strategies: {
    strategyA: [65, 67, 68, 68, 68, 68],
    strategyB: [70, 72, 72, 72, 72, 72],
    strategyC: [60, 58, 56, 55, 54, 53],
    strategyD: [72, 73, 74, 75, 75, 75],
    strategyE: [62, 62, 62, 62, 62, 62],
  },
}

export async function GET() {
  try {
    // In a real application, you would fetch this data from your database
    // and pass it to the AI functions

    // For demo purposes, we'll return mock data that matches what the AI would generate
    const mockPrediction = {
      prediction: [56, 53, 50, 48, 52, 55],
      confidenceIntervals: {
        upper: [61, 58, 55, 53, 57, 60],
        lower: [51, 48, 45, 43, 47, 50],
      },
      riskFactors: [
        {
          id: 1,
          name: "Aumento em cartões expirados",
          description: "Previsto aumento de 15% em falhas por cartão expirado nos próximos 30 dias",
          impact: 85,
          trend: "increasing",
        },
        {
          id: 2,
          name: "Sazonalidade de fim de ano",
          description: "Padrão histórico mostra queda de 8-12% na recuperação durante dezembro",
          impact: 70,
          trend: "stable",
        },
      ],
      recommendations: [
        {
          id: 1,
          title: "Otimizar Estratégia C para transações de alto valor",
          description:
            "Ajustar os parâmetros de retentativa para transações acima de R$1.000, aumentando o intervalo entre tentativas de 24h para 48h.",
          impact: "Aumento estimado de 12% na taxa de recuperação para este segmento",
          difficulty: "Média",
          timeframe: "Implementação em 1-2 dias",
        },
        {
          id: 2,
          title: "Implementar comunicação proativa para cartões prestes a expirar",
          description:
            "Enviar notificações 15 dias antes da expiração do cartão, permitindo que clientes atualizem informações antes da falha ocorrer.",
          impact: "Redução potencial de 25% em falhas por cartão expirado",
          difficulty: "Baixa",
          timeframe: "Implementação em 3-5 dias",
        },
      ],
      anomalies: [
        {
          id: 1,
          title: "Aumento súbito em falhas de cartão expirado",
          description:
            "Detectamos um aumento de 35% em falhas por cartão expirado nas últimas 48 horas, significativamente acima do padrão histórico.",
          detectedAt: "22/04/2023 08:15",
          confidence: "Alta (95%)",
          status: "Não resolvido",
          severity: "critical",
        },
        {
          id: 2,
          title: "Queda na eficácia da Estratégia B",
          description:
            "A taxa de sucesso da Estratégia B caiu de 72% para 58% na última semana, sem alterações nos parâmetros de configuração.",
          detectedAt: "21/04/2023 14:30",
          confidence: "Média (82%)",
          status: "Em análise",
          severity: "warning",
        },
      ],
    }

    return NextResponse.json(mockPrediction)
  } catch (error) {
    console.error("Error in predictions API:", error)
    return NextResponse.json({ error: "Failed to generate predictions" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/recovery/predictions/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Sparkles } from "lucide-react"
import Link from "next/link"
import { PredictionChart } from "@/components/dashboard/prediction-chart"
import { RiskFactors } from "@/components/dashboard/risk-factors"
import { AiRecommendations } from "@/components/dashboard/ai-recommendations"
import { AnomalyDetection } from "@/components/dashboard/anomaly-detection"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"

export default function PredictionsPage() {
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // Simulate API loading
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1000)

    return () => clearTimeout(timer)
  }, [])

  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/dashboard/recovery">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar ao Dashboard
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <div className="flex items-center gap-2">
            <h1 className="text-3xl font-bold">Análise Preditiva</h1>
            <Badge variant="outline" className="bg-purple-100 text-purple-800 border-purple-200">
              <Sparkles className="h-4 w-4 mr-1" />
              IA
            </Badge>
          </div>
          <p className="text-muted-foreground mt-2">
            Previsões baseadas em IA para antecipar tendências e otimizar a recuperação de receita
          </p>
        </div>

        <Tabs defaultValue="overview" className="mb-8">
          <TabsList className="mb-6">
            <TabsTrigger value="overview">Visão Geral</TabsTrigger>
            <TabsTrigger value="predictions">Previsões</TabsTrigger>
            <TabsTrigger value="risks">Fatores de Risco</TabsTrigger>
            <TabsTrigger value="anomalies">Anomalias</TabsTrigger>
            <TabsTrigger value="recommendations">Recomendações</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
              <PredictionChart />
              <RiskFactors />
            </div>
            <div className="grid grid-cols-1 gap-6">
              <AiRecommendations />
              <AnomalyDetection />
            </div>
          </TabsContent>

          <TabsContent value="predictions">
            <PredictionChart />
          </TabsContent>

          <TabsContent value="risks">
            <RiskFactors />
          </TabsContent>

          <TabsContent value="anomalies">
            <AnomalyDetection />
          </TabsContent>

          <TabsContent value="recommendations">
            <AiRecommendations />
          </TabsContent>
        </Tabs>

        <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-100 dark:border-purple-800/30 rounded-lg p-6 mb-8">
          <div className="flex items-start gap-4">
            <div className="rounded-full bg-purple-100 dark:bg-purple-900/50 p-3 flex-shrink-0">
              <Sparkles className="h-5 w-5 text-purple-500" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-purple-800 dark:text-purple-300 mb-2">
                Como funciona nossa Análise Preditiva
              </h3>
              <p className="text-purple-700 dark:text-purple-400 mb-4">
                Nosso sistema de IA analisa milhares de transações e padrões históricos para prever tendências futuras e
                identificar oportunidades de otimização. Combinamos modelos de machine learning com análise estatística
                avançada para oferecer insights acionáveis.
              </p>
              <div className="grid md:grid-cols-3 gap-4">
                <div className="bg-white dark:bg-background/20 rounded-md p-4">
                  <h4 className="font-medium text-purple-800 dark:text-purple-300 mb-2">Previsão de Tendências</h4>
                  <p className="text-sm text-purple-700 dark:text-purple-400">
                    Modelos de série temporal preveem taxas de recuperação futuras com intervalos de confiança.
                  </p>
                </div>
                <div className="bg-white dark:bg-background/20 rounded-md p-4">
                  <h4 className="font-medium text-purple-800 dark:text-purple-300 mb-2">Detecção de Anomalias</h4>
                  <p className="text-sm text-purple-700 dark:text-purple-400">
                    Algoritmos identificam padrões incomuns que podem indicar problemas emergentes.
                  </p>
                </div>
                <div className="bg-white dark:bg-background/20 rounded-md p-4">
                  <h4 className="font-medium text-purple-800 dark:text-purple-300 mb-2">Recomendações Inteligentes</h4>
                  <p className="text-sm text-purple-700 dark:text-purple-400">
                    Sugestões personalizadas baseadas em análise de causa-raiz e testes A/B históricos.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/region-details.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChartContainer } from "@/components/dashboard/chart-container"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowUpRight, ArrowDownRight, Minus, TrendingUp, AlertTriangle, CheckCircle } from "lucide-react"

// Dados simulados para detalhes da região
const regionDetailData = {
  name: "Sudeste",
  overview: {
    recoveryRate: 75,
    totalValue: 24050000,
    failureTypes: [
      { name: "Cartão Expirado", percentage: 32 },
      { name: "Fundos Insuficientes", percentage: 28 },
      { name: "Erro de Processamento", percentage: 18 },
      { name: "Cartão Bloqueado", percentage: 12 },
      { name: "Outros", percentage: 10 },
    ],
    trends: {
      month: "+2.3%",
      quarter: "+5.1%",
      year: "+8.7%",
    },
  },
  states: [
    {
      code: "SP",
      name: "São Paulo",
      recoveryRate: 78,
      trend: "+3.2%",
      status: "positive",
      value: 12500000,
      topIssue: "Cartão Expirado",
    },
    {
      code: "RJ",
      name: "Rio de Janeiro",
      recoveryRate: 76,
      trend: "+2.8%",
      status: "positive",
      value: 4850000,
      topIssue: "Fundos Insuficientes",
    },
    {
      code: "MG",
      name: "Minas Gerais",
      recoveryRate: 73,
      trend: "-1.5%",
      status: "negative",
      value: 5250000,
      topIssue: "Erro de Processamento",
    },
    {
      code: "ES",
      name: "Espírito Santo",
      recoveryRate: 71,
      trend: "+0.2%",
      status: "neutral",
      value: 1450000,
      topIssue: "Cartão Bloqueado",
    },
  ],
  recommendations: [
    {
      title: "Otimizar estratégia para cartões expirados em SP",
      description: "Implementar notificações proativas 30 dias antes do vencimento",
      impact: "Alto",
      effort: "Médio",
    },
    {
      title: "Revisar fluxo de retry para RJ",
      description: "Ajustar timing das retentativas para horários de maior aprovação",
      impact: "Médio",
      effort: "Baixo",
    },
    {
      title: "Investigar queda em MG",
      description: "Analisar causas da recente queda na taxa de recuperação",
      impact: "Alto",
      effort: "Alto",
    },
  ],
}

// Função para renderizar o indicador de tendência
const TrendIndicator = ({ trend }: { trend: string }) => {
  const value = Number.parseFloat(trend.replace("%", ""))

  if (value > 1) {
    return (
      <div className="flex items-center text-emerald-500">
        <ArrowUpRight className="h-4 w-4 mr-1" />
        <span>{trend}</span>
      </div>
    )
  } else if (value < -1) {
    return (
      <div className="flex items-center text-red-500">
        <ArrowDownRight className="h-4 w-4 mr-1" />
        <span>{trend}</span>
      </div>
    )
  } else {
    return (
      <div className="flex items-center text-muted-foreground">
        <Minus className="h-4 w-4 mr-1" />
        <span>{trend}</span>
      </div>
    )
  }
}

export function RegionDetails({ regionCode = "sudeste" }: { regionCode?: string }) {
  const [activeTab, setActiveTab] = useState("overview")

  // Dados da região (simulados)
  const region = regionDetailData

  return (
    <ChartContainer
      title={`Detalhes da Região ${region.name}`}
      description="Análise detalhada de desempenho de recuperação na região"
    >
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid grid-cols-3 mb-6">
          <TabsTrigger value="overview">Visão Geral</TabsTrigger>
          <TabsTrigger value="states">Estados</TabsTrigger>
          <TabsTrigger value="recommendations">Recomendações</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">Taxa de Recuperação</CardTitle>
                <CardDescription>Média regional</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-end justify-between">
                  <div className="text-3xl font-bold">{region.overview.recoveryRate}%</div>
                  <TrendIndicator trend={region.overview.trends.quarter} />
                </div>
                <div className="mt-4 grid grid-cols-3 gap-2 text-center text-sm">
                  <div>
                    <div className="text-muted-foreground">Mês</div>
                    <TrendIndicator trend={region.overview.trends.month} />
                  </div>
                  <div>
                    <div className="text-muted-foreground">Trimestre</div>
                    <TrendIndicator trend={region.overview.trends.quarter} />
                  </div>
                  <div>
                    <div className="text-muted-foreground">Ano</div>
                    <TrendIndicator trend={region.overview.trends.year} />
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">Valor Recuperado</CardTitle>
                <CardDescription>Total na região</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">R$ {(region.overview.totalValue / 1000000).toFixed(1)}M</div>
                <div className="mt-4 text-sm text-muted-foreground">
                  Distribuído entre {region.states.length} estados
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">Status Regional</CardTitle>
                <CardDescription>Avaliação geral</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-2">
                  {region.overview.recoveryRate >= 70 ? (
                    <>
                      <CheckCircle className="h-5 w-5 text-emerald-500" />
                      <span className="font-medium text-emerald-500">Ótimo</span>
                    </>
                  ) : region.overview.recoveryRate >= 60 ? (
                    <>
                      <TrendingUp className="h-5 w-5 text-amber-500" />
                      <span className="font-medium text-amber-500">Bom</span>
                    </>
                  ) : (
                    <>
                      <AlertTriangle className="h-5 w-5 text-red-500" />
                      <span className="font-medium text-red-500">Atenção Necessária</span>
                    </>
                  )}
                </div>
                <div className="mt-4 text-sm text-muted-foreground">
                  {region.overview.recoveryRate >= 70
                    ? "Desempenho acima da média nacional"
                    : region.overview.recoveryRate >= 60
                      ? "Desempenho próximo à média nacional"
                      : "Desempenho abaixo da média nacional"}
                </div>
              </CardContent>
            </Card>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>Principais Causas de Falha</CardTitle>
              <CardDescription>Distribuição percentual por tipo de falha</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {region.overview.failureTypes.map((type) => (
                  <div key={type.name} className="space-y-1">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium">{type.name}</span>
                      <span className="text-sm text-muted-foreground">{type.percentage}%</span>
                    </div>
                    <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                      <div className="h-full bg-primary rounded-full" style={{ width: `${type.percentage}%` }}></div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="states" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {region.states.map((state) => (
              <Card key={state.code}>
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <CardTitle>{state.name}</CardTitle>
                    <Badge
                      variant={
                        state.recoveryRate >= 75
                          ? "success"
                          : state.recoveryRate >= 65
                            ? "default"
                            : state.recoveryRate >= 55
                              ? "warning"
                              : "destructive"
                      }
                    >
                      {state.recoveryRate}%
                    </Badge>
                  </div>
                  <CardDescription>Código: {state.code}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <div className="text-sm text-muted-foreground">Tendência</div>
                      <TrendIndicator trend={state.trend} />
                    </div>
                    <div>
                      <div className="text-sm text-muted-foreground">Valor</div>
                      <div className="font-medium">R$ {(state.value / 1000000).toFixed(1)}M</div>
                    </div>
                    <div className="col-span-2">
                      <div className="text-sm text-muted-foreground">Principal Problema</div>
                      <div className="font-medium">{state.topIssue}</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

        <TabsContent value="recommendations" className="space-y-4">
          {region.recommendations.map((rec, index) => (
            <Card key={index}>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base">{rec.title}</CardTitle>
                  <div className="flex items-center gap-2">
                    <Badge variant="outline">Impacto: {rec.impact}</Badge>
                    <Badge variant="outline">Esforço: {rec.effort}</Badge>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">{rec.description}</p>
              </CardContent>
            </Card>
          ))}
        </TabsContent>
      </Tabs>
    </ChartContainer>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/recovery/geography/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { RecoveryHeatmap } from "@/components/dashboard/recovery-heatmap"
import { RegionDetails } from "@/components/dashboard/region-details"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function GeographyAnalysisPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/dashboard/recovery">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar ao Dashboard
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Análise Geográfica de Recuperação</h1>
          <p className="text-muted-foreground">Visualize e analise o desempenho de recuperação por região e estado</p>
        </div>

        <div className="grid grid-cols-1 gap-6 mb-6">
          <RecoveryHeatmap />
        </div>

        <div className="grid grid-cols-1 gap-6 mb-6">
          <RegionDetails />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <Card>
            <CardHeader>
              <CardTitle>Comparativo Regional</CardTitle>
              <CardDescription>Análise comparativa entre regiões</CardDescription>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="recovery">
                <TabsList className="mb-4">
                  <TabsTrigger value="recovery">Taxa de Recuperação</TabsTrigger>
                  <TabsTrigger value="value">Valor Recuperado</TabsTrigger>
                </TabsList>
                <TabsContent value="recovery">
                  <div className="space-y-4">
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Sudeste</span>
                        <span className="text-sm text-muted-foreground">75%</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-emerald-500 rounded-full" style={{ width: "75%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Sul</span>
                        <span className="text-sm text-muted-foreground">72%</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-emerald-500 rounded-full" style={{ width: "72%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Centro-Oeste</span>
                        <span className="text-sm text-muted-foreground">68%</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-emerald-400 rounded-full" style={{ width: "68%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Nordeste</span>
                        <span className="text-sm text-muted-foreground">61%</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-emerald-300 rounded-full" style={{ width: "61%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Norte</span>
                        <span className="text-sm text-muted-foreground">52%</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-amber-300 rounded-full" style={{ width: "52%" }}></div>
                      </div>
                    </div>
                  </div>
                </TabsContent>
                <TabsContent value="value">
                  <div className="space-y-4">
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Sudeste</span>
                        <span className="text-sm text-muted-foreground">R$ 24.05M</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-primary rounded-full" style={{ width: "100%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Sul</span>
                        <span className="text-sm text-muted-foreground">R$ 9.25M</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-primary rounded-full" style={{ width: "38%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Nordeste</span>
                        <span className="text-sm text-muted-foreground">R$ 12.94M</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-primary rounded-full" style={{ width: "54%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Centro-Oeste</span>
                        <span className="text-sm text-muted-foreground">R$ 7.40M</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-primary rounded-full" style={{ width: "31%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium">Norte</span>
                        <span className="text-sm text-muted-foreground">R$ 5.95M</span>
                      </div>
                      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
                        <div className="h-full bg-primary rounded-full" style={{ width: "25%" }}></div>
                      </div>
                    </div>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Insights Regionais</CardTitle>
              <CardDescription>Principais observações por região</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="p-3 rounded-md border border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/50">
                <h4 className="font-medium text-emerald-700 dark:text-emerald-400">Sudeste: Desempenho Excepcional</h4>
                <p className="text-sm text-emerald-600 dark:text-emerald-300 mt-1">
                  A região Sudeste mantém a maior taxa de recuperação, com destaque para São Paulo (78%).
                </p>
              </div>

              <div className="p-3 rounded-md border border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/50">
                <h4 className="font-medium text-amber-700 dark:text-amber-400">Norte: Oportunidade de Melhoria</h4>
                <p className="text-sm text-amber-600 dark:text-amber-300 mt-1">
                  A região Norte apresenta a menor taxa de recuperação (52%), indicando necessidade de estratégias
                  específicas.
                </p>
              </div>

              <div className="p-3 rounded-md border border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/50">
                <h4 className="font-medium text-blue-700 dark:text-blue-400">Tendência Emergente</h4>
                <p className="text-sm text-blue-600 dark:text-blue-300 mt-1">
                  O Nordeste mostra a maior taxa de crescimento trimestral (+5.8%), indicando eficácia das novas
                  estratégias.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="flex justify-end mt-8">
          <Button className="bg-emerald-500 hover:bg-emerald-600" asChild>
            <Link href="/dashboard/recovery">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Voltar ao Dashboard
            </Link>
          </Button>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/security/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Shield, AlertTriangle, CheckCircle, ExternalLink } from "lucide-react"
import Link from "next/link"
import { VulnerabilityScope } from "@/components/dashboard/vulnerability-scope"
import { ReportingGuidelines } from "@/components/dashboard/reporting-guidelines"
import { ProgramTerms } from "@/components/dashboard/program-terms"
import { SecurityMetrics } from "@/components/dashboard/security-metrics"
import { HallOfFame } from "@/components/dashboard/hall-of-fame"

export default function SecurityDashboard() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/dashboard">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <Shield className="h-8 w-8 text-emerald-500" />
            <h1 className="text-3xl font-bold">Programa de Divulgação de Vulnerabilidades</h1>
          </div>
          <p className="text-muted-foreground max-w-3xl">
            A segurança do sistema é uma prioridade máxima na EOS Solar Payments. Trabalhamos em conjunto com
            pesquisadores de segurança para identificar e corrigir vulnerabilidades de forma responsável.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          <div className="col-span-2 space-y-6">
            <div className="bg-card rounded-lg border shadow-sm p-6">
              <h2 className="text-xl font-semibold mb-4">Nosso Compromisso</h2>
              <div className="space-y-4">
                <div className="flex gap-3">
                  <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <p>
                    <strong>Reconhecer rapidamente</strong> o recebimento do relatório de vulnerabilidade e trabalhar em
                    conjunto para entender e corrigir o problema com agilidade.
                  </p>
                </div>
                <div className="flex gap-3">
                  <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <p>
                    <strong>Validar, responder e corrigir</strong> vulnerabilidades de acordo com nosso compromisso com
                    a segurança e privacidade.
                  </p>
                </div>
                <div className="flex gap-3">
                  <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <p>
                    <strong>Não tomar medidas legais</strong> contra pesquisadores que denunciem vulnerabilidades de
                    segurança de acordo com esta política.
                  </p>
                </div>
                <div className="flex gap-3">
                  <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <p>
                    <strong>Não suspender ou encerrar o acesso</strong> aos nossos serviços caso você seja um cliente ou
                    represente um cliente.
                  </p>
                </div>
                <div className="flex gap-3">
                  <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <p>
                    <strong>Reconhecer publicamente</strong> sua divulgação responsável em nossa página de Hall da Fama.
                  </p>
                </div>
              </div>
            </div>

            <VulnerabilityScope />
            <ReportingGuidelines />
          </div>

          <div className="space-y-6">
            <SecurityMetrics />

            <div className="bg-card rounded-lg border shadow-sm p-6">
              <h2 className="text-xl font-semibold mb-4">Contato Rápido</h2>
              <div className="space-y-4">
                <div className="flex items-center gap-2">
                  <div className="bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 p-2 rounded-full">
                    <Shield className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="font-medium">E-mail de Segurança</p>
                    <a
                      href="mailto:security@eos-solar-payments.com"
                      className="text-sm text-muted-foreground hover:text-primary"
                    >
                      security@eos-solar-payments.com
                    </a>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <div className="bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 p-2 rounded-full">
                    <ExternalLink className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="font-medium">Repositórios</p>
                    <a
                      href="https://github.com/eos-solar-payments"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-muted-foreground hover:text-primary"
                    >
                      github.com/eos-solar-payments
                    </a>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <div className="bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 p-2 rounded-full">
                    <AlertTriangle className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="font-medium">Reportar Vulnerabilidade</p>
                    <Link
                      href="/dashboard/security/report"
                      className="text-sm text-muted-foreground hover:text-primary"
                    >
                      Formulário de Relatório
                    </Link>
                  </div>
                </div>
              </div>
            </div>

            <HallOfFame />
          </div>
        </div>

        <ProgramTerms />

        <div className="mt-8 flex justify-end gap-4">
          <Button variant="outline" asChild>
            <Link href="/dashboard">Voltar ao Dashboard</Link>
          </Button>
          <Button className="bg-emerald-600 hover:bg-emerald-700" asChild>
            <Link href="/dashboard/security/report">
              <AlertTriangle className="mr-2 h-4 w-4" />
              Reportar Vulnerabilidade
            </Link>
          </Button>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/vulnerability-scope.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ExternalLink, Server, Globe, Code } from "lucide-react"

export function VulnerabilityScope() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Escopo do Programa</CardTitle>
        <CardDescription>Apenas os domínios listados abaixo estão incluídos no escopo deste programa.</CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="api" className="w-full">
          <TabsList className="grid grid-cols-4 mb-4">
            <TabsTrigger value="api">API</TabsTrigger>
            <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
            <TabsTrigger value="website">Website</TabsTrigger>
            <TabsTrigger value="repos">Repositórios</TabsTrigger>
          </TabsList>
          <TabsContent value="api" className="space-y-4">
            <div className="flex items-start gap-4 p-4 rounded-lg border bg-card/50">
              <Server className="h-5 w-5 text-emerald-500 mt-0.5" />
              <div>
                <h3 className="font-medium">Endpoint de API (produção)</h3>
                <p className="text-sm text-muted-foreground mt-1">
                  <code className="text-xs bg-muted px-1 py-0.5 rounded">https://api.eos-solar-payments.com/</code>
                </p>
                <p className="text-sm text-muted-foreground mt-2">
                  Endpoints de API para processamento de pagamentos, autenticação e gerenciamento de transações.
                </p>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="dashboard" className="space-y-4">
            <div className="flex items-start gap-4 p-4 rounded-lg border bg-card/50">
              <Globe className="h-5 w-5 text-emerald-500 mt-0.5" />
              <div>
                <h3 className="font-medium">Endpoint do Painel (dashboard)</h3>
                <p className="text-sm text-muted-foreground mt-1">
                  <code className="text-xs bg-muted px-1 py-0.5 rounded">
                    https://dashboard.eos-solar-payments.com/
                  </code>
                </p>
                <p className="text-sm text-muted-foreground mt-2">
                  Interface de administração para gerenciamento de pagamentos, relatórios e configurações.
                </p>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="website" className="space-y-4">
            <div className="flex items-start gap-4 p-4 rounded-lg border bg-card/50">
              <Globe className="h-5 w-5 text-emerald-500 mt-0.5" />
              <div>
                <h3 className="font-medium">Website</h3>
                <p className="text-sm text-muted-foreground mt-1">
                  <code className="text-xs bg-muted px-1 py-0.5 rounded">https://eos-solar-payments.com/</code>
                </p>
                <p className="text-sm text-muted-foreground mt-2">
                  Site institucional e portal de informações sobre produtos e serviços.
                </p>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="repos" className="space-y-4">
            <div className="flex items-start gap-4 p-4 rounded-lg border bg-card/50">
              <Code className="h-5 w-5 text-emerald-500 mt-0.5" />
              <div>
                <h3 className="font-medium">Repositórios de código aberto</h3>
                <div className="space-y-2 mt-2">
                  <div className="flex items-center">
                    <code className="text-xs bg-muted px-1 py-0.5 rounded flex-1">
                      https://github.com/eos-solar-payments/eos-solar-core
                    </code>
                    <a
                      href="https://github.com/eos-solar-payments/eos-solar-core"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="ml-2 text-muted-foreground hover:text-primary"
                    >
                      <ExternalLink className="h-4 w-4" />
                    </a>
                  </div>
                  <div className="flex items-center">
                    <code className="text-xs bg-muted px-1 py-0.5 rounded flex-1">
                      https://github.com/eos-solar-payments/eos-solar-dashboard
                    </code>
                    <a
                      href="https://github.com/eos-solar-payments/eos-solar-dashboard"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="ml-2 text-muted-foreground hover:text-primary"
                    >
                      <ExternalLink className="h-4 w-4" />
                    </a>
                  </div>
                  <div className="flex items-center">
                    <code className="text-xs bg-muted px-1 py-0.5 rounded flex-1">
                      https://github.com/eos-solar-payments/eos-solar-web
                    </code>
                    <a
                      href="https://github.com/eos-solar-payments/eos-solar-web"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="ml-2 text-muted-foreground hover:text-primary"
                    >
                      <ExternalLink className="h-4 w-4" />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>

        <div className="mt-6 p-4 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 rounded-lg">
          <h3 className="font-medium flex items-center text-amber-800 dark:text-amber-400">
            <AlertTriangle className="h-4 w-4 mr-2" />
            Software de terceiros
          </h3>
          <p className="text-sm text-amber-700 dark:text-amber-300/80 mt-2">
            No fornecimento de serviços aos clientes, a EOS Solar Payments utiliza diversas integrações com softwares de
            terceiros. Este Programa <strong>não</strong> se estende a nenhum software de terceiros, portanto, bugs ou
            vulnerabilidades detectadas em tais softwares não serão consideradas válidas para o Programa.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}

import { AlertTriangle } from "lucide-react"
[V0_FILE]typescriptreact:file="components/dashboard/reporting-guidelines.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, Mail, Shield, XCircle, UserCheck } from "lucide-react"

export function ReportingGuidelines() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Diretrizes para Divulgação Responsável</CardTitle>
        <CardDescription>
          Para que a comunicação de vulnerabilidades ocorra de forma responsável e segura
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-4">
          <div className="flex gap-3">
            <div className="h-8 w-8 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400 flex-shrink-0">
              <Mail className="h-4 w-4" />
            </div>
            <div>
              <p className="font-medium">Notifique-nos imediatamente</p>
              <p className="text-sm text-muted-foreground mt-1">
                Ao encontrar qualquer possível problema de segurança, envie e-mail para:{" "}
                <code className="text-xs bg-muted px-1 py-0.5 rounded">security@eos-solar-payments.com</code>
              </p>
            </div>
          </div>

          <div className="flex gap-3">
            <div className="h-8 w-8 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400 flex-shrink-0">
              <Shield className="h-4 w-4" />
            </div>
            <div>
              <p className="font-medium">Siga esta política</p>
              <p className="text-sm text-muted-foreground mt-1">
                Não divulgue os detalhes da vulnerabilidade a terceiros.
              </p>
            </div>
          </div>

          <div className="flex gap-3">
            <div className="h-8 w-8 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400 flex-shrink-0">
              <UserCheck className="h-4 w-4" />
            </div>
            <div>
              <p className="font-medium">Utilize apenas canais de comunicação oficiais</p>
              <p className="text-sm text-muted-foreground mt-1">
                Não use e-mails pessoais, redes sociais ou meios privados para contatar a equipe de segurança, a menos
                que expressamente instruído a fazê-lo.
              </p>
            </div>
          </div>
        </div>

        <div className="border-t pt-4">
          <h3 className="font-medium mb-3 text-red-600 dark:text-red-400 flex items-center">
            <AlertTriangle className="h-4 w-4 mr-2" />
            Atividades Proibidas
          </h3>

          <div className="space-y-3">
            <div className="flex gap-3">
              <XCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
              <p className="text-sm">
                <strong>Não tente</strong> usar engenharia social, phishing ou ataques físicos contra funcionários ou
                usuários.
              </p>
            </div>

            <div className="flex gap-3">
              <XCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
              <p className="text-sm">
                <strong>Não obtenha acesso não autorizado</strong> ou destrua dados de usuários.
              </p>
            </div>

            <div className="flex gap-3">
              <XCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
              <p className="text-sm">
                <strong>Não explore</strong> as vulnerabilidades encontradas.
              </p>
            </div>

            <div className="flex gap-3">
              <XCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
              <p className="text-sm">
                Faça todo o possível para <strong>evitar violações de privacidade</strong>, degradação da experiência do
                usuário, interrupção de sistemas de produção ou destruição de dados durante os testes de segurança.
              </p>
            </div>
          </div>
        </div>

        <div className="bg-card/50 border rounded-lg p-4">
          <h3 className="font-medium mb-2">Como Relatar</h3>
          <ol className="space-y-2 text-sm text-muted-foreground list-decimal pl-5">
            <li>
              Envie um e-mail para{" "}
              <code className="text-xs bg-muted px-1 py-0.5 rounded">security@eos-solar-payments.com</code> com detalhes
              da vulnerabilidade identificada.
            </li>
            <li>
              Após se registrar, utilize <strong>exclusivamente</strong> o e-mail registrado para se comunicar com a
              equipe de segurança.
            </li>
            <li>
              Inclua descrição e impacto potencial da vulnerabilidade, informações sobre você, produtos afetados, URL ou
              PoC, detalhes técnicos e passos para reproduzir.
            </li>
          </ol>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/program-terms.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CheckCircle, AlertTriangle, Scale, Shield } from "lucide-react"

export function ProgramTerms() {
  return (
    <Card className="mb-6">
      <CardHeader>
        <CardTitle>Termos do Programa</CardTitle>
        <CardDescription>
          Termos e condições que regem a participação no Programa de Divulgação de Vulnerabilidades
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="terms" className="w-full">
          <TabsList className="grid grid-cols-3 mb-4">
            <TabsTrigger value="terms">Termos de Registro</TabsTrigger>
            <TabsTrigger value="exclusions">Exclusões</TabsTrigger>
            <TabsTrigger value="additional">Termos Adicionais</TabsTrigger>
          </TabsList>

          <TabsContent value="terms" className="space-y-4">
            <div className="space-y-3">
              <div className="flex gap-3">
                <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                <p className="text-sm">
                  Ao submeter uma vulnerabilidade por meio deste Programa, você confirma que{" "}
                  <strong>não divulgou</strong> e <strong>não divulgará</strong> o bug ou sua submissão a ninguém,
                  exceto à EOS Solar Payments, sob os termos deste Programa.
                </p>
              </div>

              <div className="flex gap-3">
                <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                <p className="text-sm">
                  Quaisquer informações que você receba ou colete sobre a EOS Solar Payments ao participar do Programa
                  devem ser mantidas em <strong>sigilo</strong> e usadas somente em conexão com o Programa, com o
                  objetivo de solucionar as vulnerabilidades.
                </p>
              </div>

              <div className="flex gap-3">
                <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                <p className="text-sm">
                  Suas atividades de teste <strong>não</strong> devem impactar negativamente a EOS Solar Payments, seus
                  negócios ou desempenho.
                </p>
              </div>

              <div className="flex gap-3">
                <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                <p className="text-sm">
                  Você é responsável por <strong>manter atualizados</strong> seus dados de contato (por exemplo, e-mail)
                  junto à EOS Solar Payments.
                </p>
              </div>

              <div className="flex gap-3">
                <CheckCircle className="h-5 w-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                <p className="text-sm">
                  Somente os <strong>domínios mencionados</strong> no tópico "Escopo do Programa" devem ser incluídos na
                  pesquisa e testes de segurança. Qualquer teste fora desses domínios <strong>não</strong> está
                  contemplado no escopo do Programa.
                </p>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="exclusions" className="space-y-4">
            <div className="p-4 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 rounded-lg mb-4">
              <h3 className="font-medium flex items-center text-amber-800 dark:text-amber-400">
                <AlertTriangle className="h-4 w-4 mr-2" />
                Atividades Excluídas
              </h3>
              <p className="text-sm text-amber-700 dark:text-amber-300/80 mt-2">
                Ao pesquisar vulnerabilidades, <strong>abstenha-se</strong> das seguintes atividades:
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Engenharia social (incluindo phishing)</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Ataques físicos contra propriedade</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>DDoS (Negação de serviço ou Distribuída)</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Relatórios sobre cabeçalhos de segurança ausentes sem impacto</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Exposição de versão sem PoC de exploit funcional</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Listagem de diretórios contendo conteúdo já público</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Erros de ortografia ou problemas de interface sem impacto</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Exploração de serviços de terceiros fora do escopo</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Uso de bibliotecas vulneráveis sem demonstrar exploração</p>
              </div>
              <div className="flex gap-2 items-start">
                <XCircle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
                <p>Testes que resultem em bloqueio de conta</p>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="additional" className="space-y-4">
            <div className="space-y-4">
              <div className="flex gap-3">
                <div className="h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 flex-shrink-0">
                  <Scale className="h-4 w-4" />
                </div>
                <div>
                  <p className="font-medium">Conformidade Legal</p>
                  <p className="text-sm text-muted-foreground mt-1">
                    Você deve <strong>obedecer à lei</strong> ao relatar vulnerabilidades.
                  </p>
                </div>
              </div>

              <div className="flex gap-3">
                <div className="h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 flex-shrink-0">
                  <Shield className="h-4 w-4" />
                </div>
                <div>
                  <p className="font-medium">Licença de Uso</p>
                  <p className="text-sm text-muted-foreground mt-1">
                    Ao submeter informações sobre uma vulnerabilidade, você <strong>concorda</strong> com estes termos e
                    concede à EOS Solar Payments uma{" "}
                    <strong>licença mundial, isenta de royalties e não-exclusiva</strong> para usar sua submissão com o
                    propósito de corrigir a vulnerabilidade.
                  </p>
                </div>
              </div>

              <div className="p-4 bg-card/50 border rounded-lg">
                <h3 className="font-medium mb-2">Lei Aplicável e Foro</h3>
                <p className="text-sm text-muted-foreground">
                  Estes termos serão regidos pelas <strong>Leis do [País de Sede da EOS Solar Payments]</strong> e
                  quaisquer litígios decorrentes deste Programa estarão sujeitos à{" "}
                  <strong>jurisdição exclusiva dos tribunais competentes</strong> na localidade definida pela sede da
                  empresa.
                </p>
              </div>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}

import { XCircle } from "lucide-react"
[V0_FILE]typescriptreact:file="components/dashboard/security-metrics.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Shield, Clock, CheckCircle, AlertTriangle } from "lucide-react"
import { useState, useEffect } from "react"

export function SecurityMetrics() {
  const [progressValues, setProgressValues] = useState({
    responseTime: 0,
    resolutionTime: 0,
    severity: 0,
    bountyPaid: 0,
  })

  useEffect(() => {
    const timer = setTimeout(() => {
      setProgressValues({
        responseTime: 92,
        resolutionTime: 87,
        severity: 65,
        bountyPaid: 78,
      })
    }, 500)

    return () => clearTimeout(timer)
  }, [])

  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-lg font-medium">Métricas do Programa</CardTitle>
        <CardDescription>Desempenho do programa de divulgação de vulnerabilidades</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Clock className="h-4 w-4 text-blue-500" />
              <span className="text-sm font-medium">Tempo de Resposta</span>
            </div>
            <span className="text-sm font-medium">92%</span>
          </div>
          <Progress value={progressValues.responseTime} className="h-2" />
          <p className="text-xs text-muted-foreground">Respondemos a 92% dos relatórios em menos de 24 horas</p>
        </div>

        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <CheckCircle className="h-4 w-4 text-emerald-500" />
              <span className="text-sm font-medium">Tempo de Resolução</span>
            </div>
            <span className="text-sm font-medium">87%</span>
          </div>
          <Progress value={progressValues.resolutionTime} className="h-2" />
          <p className="text-xs text-muted-foreground">87% das vulnerabilidades são resolvidas em até 30 dias</p>
        </div>

        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <AlertTriangle className="h-4 w-4 text-amber-500" />
              <span className="text-sm font-medium">Severidade</span>
            </div>
            <span className="text-sm font-medium">65%</span>
          </div>
          <Progress value={progressValues.severity} className="h-2" />
          <p className="text-xs text-muted-foreground">65% dos relatórios são de severidade média ou alta</p>
        </div>

        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Shield className="h-4 w-4 text-purple-500" />
              <span className="text-sm font-medium">Recompensas Pagas</span>
            </div>
            <span className="text-sm font-medium">78%</span>
          </div>
          <Progress value={progressValues.bountyPaid} className="h-2" />
          <p className="text-xs text-muted-foreground">78% dos relatórios válidos receberam recompensas</p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/hall-of-fame.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Medal, ExternalLink, Star } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"

export function HallOfFame() {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="space-y-1">
            <CardTitle className="text-lg font-medium flex items-center">
              <Medal className="h-4 w-4 mr-2 text-amber-500" />
              Hall da Fama
            </CardTitle>
            <CardDescription>Pesquisadores de destaque</CardDescription>
          </div>
          <Badge variant="outline" className="ml-2">
            <span className="mr-1">Ver todos</span>
            <ExternalLink className="h-3 w-3" />
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center gap-3">
          <Avatar className="h-10 w-10 border">
            <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Pesquisador" />
            <AvatarFallback>JP</AvatarFallback>
          </Avatar>
          <div className="flex-1 space-y-1">
            <div className="flex items-center">
              <p className="text-sm font-medium">João Pedro Silva</p>
              <div className="flex ml-2">
                <Star className="h-3 w-3 fill-amber-500 text-amber-500" />
                <Star className="h-3 w-3 fill-amber-500 text-amber-500" />
                <Star className="h-3 w-3 fill-amber-500 text-amber-500" />
              </div>
            </div>
            <p className="text-xs text-muted-foreground">12 vulnerabilidades reportadas</p>
          </div>
          <Badge className="bg-emerald-500 hover:bg-emerald-600">P1</Badge>
        </div>

        <div className="flex items-center gap-3">
          <Avatar className="h-10 w-10 border">
            <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Pesquisador" />
            <AvatarFallback>MS</AvatarFallback>
          </Avatar>
          <div className="flex-1 space-y-1">
            <div className="flex items-center">
              <p className="text-sm font-medium">Maria Santos</p>
              <div className="flex ml-2">
                <Star className="h-3 w-3 fill-amber-500 text-amber-500" />
                <Star className="h-3 w-3 fill-amber-500 text-amber-500" />
              </div>
            </div>
            <p className="text-xs text-muted-foreground">8 vulnerabilidades reportadas</p>
          </div>
          <Badge className="bg-blue-500 hover:bg-blue-600">P2</Badge>
        </div>

        <div className="flex items-center gap-3">
          <Avatar className="h-10 w-10 border">
            <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Pesquisador" />
            <AvatarFallback>CA</AvatarFallback>
          </Avatar>
          <div className="flex-1 space-y-1">
            <div className="flex items-center">
              <p className="text-sm font-medium">Carlos Almeida</p>
              <div className="flex ml-2">
                <Star className="h-3 w-3 fill-amber-500 text-amber-500" />
                <Star className="h-3 w-3 fill-amber-500 text-amber-500" />
              </div>
            </div>
            <p className="text-xs text-muted-foreground">6 vulnerabilidades reportadas</p>
          </div>
          <Badge className="bg-blue-500 hover:bg-blue-600">P2</Badge>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/security/report/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Shield, Send } from "lucide-react"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardFooter, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function ReportVulnerabilityPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/dashboard/security">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <Shield className="h-8 w-8 text-emerald-500" />
            <h1 className="text-3xl font-bold">Reportar Vulnerabilidade</h1>
          </div>
          <p className="text-muted-foreground max-w-3xl">
            Preencha o formulário abaixo com todos os detalhes da vulnerabilidade encontrada. Quanto mais informações
            você fornecer, mais rápido poderemos avaliar e corrigir o problema.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle>Formulário de Relatório</CardTitle>
                <CardDescription>Forneça detalhes completos sobre a vulnerabilidade encontrada</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="name">Nome Completo</Label>
                    <Input id="name" placeholder="Seu nome completo" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">E-mail de Contato</Label>
                    <Input id="email" type="email" placeholder="seu.email@exemplo.com" />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="severity">Severidade Estimada</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione a severidade" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="critical">Crítica</SelectItem>
                        <SelectItem value="high">Alta</SelectItem>
                        <SelectItem value="medium">Média</SelectItem>
                        <SelectItem value="low">Baixa</SelectItem>
                        <SelectItem value="info">Informativa</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="scope">Escopo Afetado</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o escopo" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="api">API (api.eos-solar-payments.com)</SelectItem>
                        <SelectItem value="dashboard">Dashboard (dashboard.eos-solar-payments.com)</SelectItem>
                        <SelectItem value="website">Website (eos-solar-payments.com)</SelectItem>
                        <SelectItem value="repo-core">Repositório: eos-solar-core</SelectItem>
                        <SelectItem value="repo-dashboard">Repositório: eos-solar-dashboard</SelectItem>
                        <SelectItem value="repo-web">Repositório: eos-solar-web</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="title">Título da Vulnerabilidade</Label>
                  <Input id="title" placeholder="Título descritivo e conciso" />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="description">Descrição Detalhada</Label>
                  <Textarea
                    id="description"
                    placeholder="Descreva a vulnerabilidade em detalhes, incluindo o impacto potencial"
                    className="min-h-[120px]"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="steps">Passos para Reproduzir</Label>
                  <Textarea
                    id="steps"
                    placeholder="Descreva passo a passo como reproduzir a vulnerabilidade"
                    className="min-h-[120px]"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="poc">Prova de Conceito (PoC)</Label>
                  <Textarea
                    id="poc"
                    placeholder="Forneça código, URLs, parâmetros ou qualquer outra informação que demonstre a vulnerabilidade"
                    className="min-h-[120px]"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="attachments">Anexos (Capturas de Tela, Vídeos, etc.)</Label>
                  <Input id="attachments" type="file" multiple className="cursor-pointer" />
                  <p className="text-xs text-muted-foreground mt-1">
                    Você pode anexar múltiplos arquivos (máx. 10MB por arquivo)
                  </p>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" asChild>
                  <Link href="/dashboard/security">Cancelar</Link>
                </Button>
                <Button className="bg-emerald-600 hover:bg-emerald-700">
                  <Send className="mr-2 h-4 w-4" />
                  Enviar Relatório
                </Button>
              </CardFooter>
            </Card>
          </div>

          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Dicas para um Bom Relatório</CardTitle>
                <CardDescription>Como aumentar as chances de seu relatório ser aceito</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Seja Claro e Conciso</h3>
                  <p className="text-sm text-muted-foreground">
                    Forneça um título descritivo e uma explicação clara do problema.
                  </p>
                </div>

                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Inclua Passos Detalhados</h3>
                  <p className="text-sm text-muted-foreground">
                    Descreva exatamente como reproduzir a vulnerabilidade, passo a passo.
                  </p>
                </div>

                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Demonstre o Impacto</h3>
                  <p className="text-sm text-muted-foreground">
                    Explique claramente qual é o impacto real da vulnerabilidade e como ela poderia ser explorada.
                  </p>
                </div>

                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Forneça Evidências Visuais</h3>
                  <p className="text-sm text-muted-foreground">
                    Capturas de tela ou vídeos ajudam a equipe a entender e verificar o problema mais rapidamente.
                  </p>
                </div>

                <div className="space-y-2">
                  <h3 className="font-medium text-sm">Sugira Mitigações</h3>
                  <p className="text-sm text-muted-foreground">
                    Se possível, sugira formas de corrigir ou mitigar a vulnerabilidade encontrada.
                  </p>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-amber-600 dark:text-amber-400 flex items-center">
                  <AlertTriangle className="h-4 w-4 mr-2" />
                  Lembrete Importante
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Ao submeter este relatório, você confirma que leu e concorda com os termos do Programa de Divulgação
                  de Vulnerabilidades da EOS Solar Payments.
                </p>
                <p className="text-sm text-muted-foreground mt-2">
                  Lembre-se de que você não deve divulgar esta vulnerabilidade publicamente ou a terceiros até que nossa
                  equipe tenha tido tempo suficiente para resolver o problema.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}

import { AlertTriangle } from "lucide-react"
[V0_FILE]typescriptreact:file="app/value-chain/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/value-chain/reports/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { AutomaticReportConfig } from "@/components/value-chain/automatic-report-config"
import { ReportTemplates } from "@/components/value-chain/report-templates"
import { ReportHistory } from "@/components/value-chain/report-history"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function ReportsPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/value-chain">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Relatórios Automáticos</h1>
          <p className="text-muted-foreground">
            Configure, agende e gerencie relatórios automáticos da cadeia de valor fotovoltaica solar
          </p>
        </div>

        <Tabs defaultValue="config" className="space-y-6">
          <TabsList className="mb-6">
            <TabsTrigger value="config">Configuração</TabsTrigger>
            <TabsTrigger value="templates">Modelos</TabsTrigger>
            <TabsTrigger value="history">Histórico</TabsTrigger>
          </TabsList>

          <TabsContent value="config">
            <AutomaticReportConfig />
          </TabsContent>

          <TabsContent value="templates">
            <ReportTemplates />
          </TabsContent>

          <TabsContent value="history">
            <ReportHistory />
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/automatic-report-config.tsx" isFixed="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar, Clock, FileText, Mail, Plus, Save, Trash2, Users } from "lucide-react"
import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"

export function AutomaticReportConfig() {
  const [selectedSections, setSelectedSections] = useState<string[]>(["overview", "stages", "risks", "suppliers"])

  const handleSectionChange = (section: string) => {
    if (selectedSections.includes(section)) {
      setSelectedSections(selectedSections.filter((s) => s !== section))
    } else {
      setSelectedSections([...selectedSections, section])
    }
  }

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Configuração de Relatório Automático</CardTitle>
              <CardDescription>Configure relatórios automáticos para distribuição periódica</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <Tabs defaultValue="general">
                <TabsList className="mb-4">
                  <TabsTrigger value="general">Geral</TabsTrigger>
                  <TabsTrigger value="content">Conteúdo</TabsTrigger>
                  <TabsTrigger value="schedule">Agendamento</TabsTrigger>
                  <TabsTrigger value="distribution">Distribuição</TabsTrigger>
                </TabsList>

                <TabsContent value="general" className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="report-name">Nome do Relatório</Label>
                    <Input id="report-name" placeholder="Ex: Análise Mensal da Cadeia de Valor Solar" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="report-description">Descrição</Label>
                    <Input
                      id="report-description"
                      placeholder="Ex: Relatório mensal com análise completa da cadeia de valor fotovoltaica"
                    />
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="report-owner">Responsável</Label>
                      <Input id="report-owner" placeholder="Ex: João Silva" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="report-department">Departamento</Label>
                      <Input id="report-department" placeholder="Ex: Operações" />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Formato do Relatório</Label>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="format-pdf" defaultChecked />
                        <Label htmlFor="format-pdf">PDF</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="format-excel" />
                        <Label htmlFor="format-excel">Excel</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="format-ppt" />
                        <Label htmlFor="format-ppt">PowerPoint</Label>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="content" className="space-y-4">
                  <div className="space-y-2">
                    <Label>Seções do Relatório</Label>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="overview"
                          checked={selectedSections.includes("overview")}
                          onCheckedChange={() => handleSectionChange("overview")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="overview"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Visão Geral da Cadeia de Valor
                          </Label>
                          <p className="text-sm text-muted-foreground">Resumo e KPIs principais da cadeia completa</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="stages"
                          checked={selectedSections.includes("stages")}
                          onCheckedChange={() => handleSectionChange("stages")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="stages"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Análise de Estágios
                          </Label>
                          <p className="text-sm text-muted-foreground">
                            Desempenho detalhado de cada estágio da cadeia
                          </p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="risks"
                          checked={selectedSections.includes("risks")}
                          onCheckedChange={() => handleSectionChange("risks")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="risks"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Avaliação de Riscos
                          </Label>
                          <p className="text-sm text-muted-foreground">Riscos identificados e planos de mitigação</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="suppliers"
                          checked={selectedSections.includes("suppliers")}
                          onCheckedChange={() => handleSectionChange("suppliers")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="suppliers"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Análise de Fornecedores
                          </Label>
                          <p className="text-sm text-muted-foreground">Desempenho e avaliação de fornecedores-chave</p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="costs"
                          checked={selectedSections.includes("costs")}
                          onCheckedChange={() => handleSectionChange("costs")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="costs"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Análise de Custos
                          </Label>
                          <p className="text-sm text-muted-foreground">
                            Detalhamento de custos em cada estágio da cadeia
                          </p>
                        </div>
                      </div>
                      <div className="flex items-start space-x-2">
                        <Checkbox
                          id="sustainability"
                          checked={selectedSections.includes("sustainability")}
                          onCheckedChange={() => handleSectionChange("sustainability")}
                        />
                        <div className="grid gap-1.5 leading-none">
                          <Label
                            htmlFor="sustainability"
                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                          >
                            Métricas de Sustentabilidade
                          </Label>
                          <p className="text-sm text-muted-foreground">Indicadores ambientais e sociais da cadeia</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Período de Análise</Label>
                    <Select defaultValue="last-month">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o período" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="last-week">Última Semana</SelectItem>
                        <SelectItem value="last-month">Último Mês</SelectItem>
                        <SelectItem value="last-quarter">Último Trimestre</SelectItem>
                        <SelectItem value="last-year">Último Ano</SelectItem>
                        <SelectItem value="custom">Período Personalizado</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label>Comparação</Label>
                    <Select defaultValue="previous-period">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o tipo de comparação" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="previous-period">Período Anterior</SelectItem>
                        <SelectItem value="same-period-last-year">Mesmo Período do Ano Anterior</SelectItem>
                        <SelectItem value="target">Meta Definida</SelectItem>
                        <SelectItem value="industry-average">Média do Setor</SelectItem>
                        <SelectItem value="none">Sem Comparação</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label>Opções de Conteúdo</Label>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="include-executive-summary" defaultChecked />
                        <Label htmlFor="include-executive-summary">Incluir Resumo Executivo</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="include-recommendations" defaultChecked />
                        <Label htmlFor="include-recommendations">Incluir Recomendações</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="include-raw-data" />
                        <Label htmlFor="include-raw-data">Incluir Dados Brutos</Label>
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="schedule" className="space-y-4">
                  <div className="space-y-2">
                    <Label>Frequência</Label>
                    <Select defaultValue="monthly">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione a frequência" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="daily">Diário</SelectItem>
                        <SelectItem value="weekly">Semanal</SelectItem>
                        <SelectItem value="monthly">Mensal</SelectItem>
                        <SelectItem value="quarterly">Trimestral</SelectItem>
                        <SelectItem value="yearly">Anual</SelectItem>
                        <SelectItem value="custom">Personalizado</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="start-date">Data de Início</Label>
                      <div className="relative">
                        <Calendar className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                        <Input id="start-date" className="pl-10" placeholder="01/05/2023" />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="time">Horário</Label>
                      <div className="relative">
                        <Clock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                        <Input id="time" className="pl-10" placeholder="08:00" />
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Dia da Semana (para relatórios semanais)</Label>
                    <Select defaultValue="monday">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o dia da semana" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="monday">Segunda-feira</SelectItem>
                        <SelectItem value="tuesday">Terça-feira</SelectItem>
                        <SelectItem value="wednesday">Quarta-feira</SelectItem>
                        <SelectItem value="thursday">Quinta-feira</SelectItem>
                        <SelectItem value="friday">Sexta-feira</SelectItem>
                        <SelectItem value="saturday">Sábado</SelectItem>
                        <SelectItem value="sunday">Domingo</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label>Dia do Mês (para relatórios mensais)</Label>
                    <Select defaultValue="1">
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione o dia do mês" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="1">1</SelectItem>
                        <SelectItem value="5">5</SelectItem>
                        <SelectItem value="10">10</SelectItem>
                        <SelectItem value="15">15</SelectItem>
                        <SelectItem value="20">20</SelectItem>
                        <SelectItem value="25">25</SelectItem>
                        <SelectItem value="last">Último dia</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="active-schedule">Ativar Agendamento</Label>
                      <Switch id="active-schedule" defaultChecked />
                    </div>
                    <p className="text-sm text-muted-foreground">
                      Quando ativado, o relatório será gerado automaticamente conforme a programação
                    </p>
                  </div>
                </TabsContent>

                <TabsContent value="distribution" className="space-y-4">
                  <div className="space-y-2">
                    <Label>Destinatários por Email</Label>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center gap-2">
                          <Mail className="h-4 w-4 text-muted-foreground" />
                          <span>diretor@empresa.com</span>
                        </div>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Remover</span>
                        </Button>
                      </div>
                      <div className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center gap-2">
                          <Mail className="h-4 w-4 text-muted-foreground" />
                          <span>gerente@empresa.com</span>
                        </div>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Remover</span>
                        </Button>
                      </div>
                      <div className="flex gap-2">
                        <div className="relative flex-1">
                          <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                          <Input placeholder="Adicionar email..." className="pl-10" />
                        </div>
                        <Button>
                          <Plus className="h-4 w-4 mr-2" />
                          Adicionar
                        </Button>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Grupos de Distribuição</Label>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center gap-2">
                          <Users className="h-4 w-4 text-muted-foreground" />
                          <span>Equipe de Operações</span>
                        </div>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Remover</span>
                        </Button>
                      </div>
                      <div className="flex items-center justify-between p-2 border rounded-md">
                        <div className="flex items-center gap-2">
                          <Users className="h-4 w-4 text-muted-foreground" />
                          <span>Diretoria</span>
                        </div>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <Trash2 className="h-4 w-4" />
                          <span className="sr-only">Remover</span>
                        </Button>
                      </div>
                      <Button variant="outline">
                        <Plus className="h-4 w-4 mr-2" />
                        Adicionar Grupo
                      </Button>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Opções de Distribuição</Label>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="save-to-system" defaultChecked />
                        <Label htmlFor="save-to-system">Salvar no Sistema</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="send-empty-report" />
                        <Label htmlFor="send-empty-report">Enviar mesmo se não houver dados novos</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="notify-changes" defaultChecked />
                        <Label htmlFor="notify-changes">Notificar apenas mudanças significativas</Label>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email-subject">Assunto do Email</Label>
                    <Input id="email-subject" placeholder="Ex: Relatório Mensal da Cadeia de Valor Solar - {data}" />
                    <p className="text-xs text-muted-foreground">
                      Use {"{data}"} para incluir a data do relatório automaticamente
                    </p>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email-message">Mensagem do Email</Label>
                    <Input id="email-message" placeholder="Ex: Segue o relatório mensal da cadeia de valor solar." />
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Resumo da Configuração</CardTitle>
              <CardDescription>Visão geral das configurações do relatório</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Nome</h3>
                <p className="font-medium">Análise Mensal da Cadeia de Valor Solar</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Frequência</h3>
                <p className="font-medium">Mensal (Dia 1 às 08:00)</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Seções</h3>
                <p className="font-medium">Visão Geral, Estágios, Riscos, Fornecedores</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Destinatários</h3>
                <p className="font-medium">2 emails, 2 grupos</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Formatos</h3>
                <p className="font-medium">PDF</p>
              </div>
              <div>
                <h3 className="text-sm font-medium text-muted-foreground">Status</h3>
                <div className="flex items-center gap-2">
                  <div className="w-3 h-3 rounded-full bg-emerald-500"></div>
                  <p className="font-medium">Ativo</p>
                </div>
              </div>
            </CardContent>
          </Card>

          <div className="flex flex-col gap-2">
            <Button className="w-full">
              <Save className="h-4 w-4 mr-2" />
              Salvar Configuração
            </Button>
            <Button variant="outline" className="w-full">
              <FileText className="h-4 w-4 mr-2" />
              Gerar Relatório Agora
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/command.tsx" isMerged="true"
"use client"

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

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

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

interface CommandDialogProps extends DialogProps {}

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

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

CommandInput.displayName = CommandPrimitive.Input.displayName

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

CommandList.displayName = CommandPrimitive.List.displayName

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

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

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

CommandGroup.displayName = CommandPrimitive.Group.displayName

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

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

CommandItem.displayName = CommandPrimitive.Item.displayName

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

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

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

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

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

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

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

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

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

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

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

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

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

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

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

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

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

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

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

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

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

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

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

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

export { Label }
[V0_FILE]typescriptreact:file="app/solutions/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { SolutionCard } from "@/components/solution-card"

export default function SolutionsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Our Solutions</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Comprehensive payment solutions designed specifically for the solar industry. Build your payment
                infrastructure with our modular, open-source components.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16 md:py-24">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <SolutionCard
                title="Intelligent Routing"
                description="Optimize payment success rates with smart routing algorithms that adapt to your business needs."
                icon="git-branch-plus"
                href="/solutions/intelligent-routing"
              />
              <SolutionCard
                title="Vault"
                description="Secure storage for sensitive payment information with tokenization and encryption."
                icon="shield-check"
                href="/solutions/vault"
              />
              <SolutionCard
                title="Alternative Payment Methods"
                description="Support for diverse payment options beyond cards, including bank transfers and digital wallets."
                icon="credit-card"
                href="/solutions/alternative-payment-methods"
              />
              <SolutionCard
                title="Cost Observability"
                description="Gain visibility into payment processing costs with detailed analytics and reporting."
                icon="bar-chart-3"
                href="/solutions/cost-observability"
              />
              <SolutionCard
                title="Reconciliation"
                description="Automated matching of transactions across systems to ensure accuracy and reduce manual work."
                icon="check-circle-2"
                href="/solutions/reconciliation"
              />
              <SolutionCard
                title="Revenue Recovery"
                description="Recapture failed payments with intelligent retry strategies and customer communication."
                icon="refresh-cw"
                href="/solutions/revenue-recovery"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/50">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to get started?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how Eos Solar Payments can help optimize your payment infrastructure.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/intelligent-routing/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { RoutingStep } from "@/components/routing-step"
import { RoutingAlgorithm } from "@/components/routing-algorithm"
import { ParameterBadge } from "@/components/parameter-badge"

export default function IntelligentRoutingPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Intelligent Routing</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Optimize payment success rates with smart routing algorithms that adapt to your business needs.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">How It Works</h2>
                <p className="text-muted-foreground mb-6">
                  Our intelligent routing system analyzes multiple factors in real-time to determine the optimal payment
                  processor for each transaction, maximizing success rates and minimizing costs.
                </p>
                <div className="space-y-4">
                  <RoutingStep
                    number={1}
                    title="Transaction Analysis"
                    description="Each payment is analyzed based on card type, amount, currency, and other factors."
                  />
                  <RoutingStep
                    number={2}
                    title="Processor Selection"
                    description="Our algorithm selects the optimal processor based on historical performance data."
                  />
                  <RoutingStep
                    number={3}
                    title="Continuous Learning"
                    description="The system learns from each transaction to improve future routing decisions."
                  />
                  <RoutingStep
                    number={4}
                    title="Performance Monitoring"
                    description="Detailed analytics track success rates and costs across processors."
                  />
                </div>
              </div>
              <div className="bg-muted rounded-lg p-6">
                <RoutingAlgorithm />
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Key Parameters</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              <ParameterBadge title="Card Type" description="Routes based on card network and issuing bank" />
              <ParameterBadge
                title="Transaction Amount"
                description="Optimizes routing for different transaction sizes"
              />
              <ParameterBadge title="Geographic Location" description="Considers customer and processor locations" />
              <ParameterBadge
                title="Historical Performance"
                description="Uses past success rates to inform decisions"
              />
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to optimize your payment routing?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how intelligent routing can improve your payment success rates.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/vault/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { VaultFeatureCard } from "@/components/vault-feature-card"

export default function VaultPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Vault</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Secure storage for sensitive payment information with tokenization and encryption.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Key Features</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <VaultFeatureCard
                title="Tokenization"
                description="Replace sensitive data with non-sensitive tokens to reduce PCI scope"
                icon="key"
              />
              <VaultFeatureCard
                title="End-to-End Encryption"
                description="Protect data in transit and at rest with strong encryption"
                icon="lock"
              />
              <VaultFeatureCard
                title="Secure Storage"
                description="Store payment details in a highly secure environment"
                icon="database"
              />
              <VaultFeatureCard
                title="PCI Compliant"
                description="Designed to meet PCI DSS 4.0 requirements"
                icon="shield"
              />
              <VaultFeatureCard
                title="Easy Integration"
                description="Simple API for storing and retrieving payment information"
                icon="code"
              />
              <VaultFeatureCard
                title="Audit Logging"
                description="Comprehensive logs of all access and operations"
                icon="file-text"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">How It Works</h2>
                <p className="text-muted-foreground mb-6">
                  Our vault securely stores sensitive payment information, allowing you to process payments without
                  handling card data directly. This reduces your PCI compliance burden while maintaining a seamless
                  customer experience.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Collect Payment Information</strong>
                      <p className="text-muted-foreground mt-1">
                        Securely collect card details via our client-side libraries
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Tokenize and Store</strong>
                      <p className="text-muted-foreground mt-1">
                        Data is encrypted and stored in our secure vault, returning a token
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Use Tokens for Transactions</strong>
                      <p className="text-muted-foreground mt-1">
                        Process payments using tokens instead of actual card data
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Recurring Payments</strong>
                      <p className="text-muted-foreground mt-1">
                        Easily set up recurring payments without storing card details
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border p-6 shadow-sm">
                <div className="space-y-4">
                  <div className="rounded bg-muted p-3">
                    <p className="text-sm font-mono">POST /v1/vault/tokens</p>
                    <pre className="mt-2 text-xs text-muted-foreground overflow-x-auto">
                      {`{
  "card": {
    "number": "4242424242424242",
    "exp_month": 12,
    "exp_year": 2025,
    "cvc": "123"
  },
  "customer_id": "cust_12345"
}`}
                    </pre>
                  </div>
                  <div className="rounded bg-muted p-3">
                    <p className="text-sm font-mono">Response</p>
                    <pre className="mt-2 text-xs text-muted-foreground overflow-x-auto">
                      {`{
  "token": "tok_1J4pX2EosPayments",
  "last4": "4242",
  "exp_month": 12,
  "exp_year": 2025,
  "card_type": "visa"
}`}
                    </pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to secure your payment data?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how our vault can help you securely manage payment information.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/alternative-payment-methods/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CheckoutFlow } from "@/components/checkout-flow"

export default function AlternativePaymentMethodsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Alternative Payment Methods</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Support for diverse payment options beyond cards, including bank transfers and digital wallets.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Expand Your Payment Options</h2>
                <p className="text-muted-foreground mb-6">
                  Offer your customers more ways to pay for solar installations and services. Our platform supports a
                  wide range of alternative payment methods, helping you increase conversion rates and reach more
                  customers.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Bank Transfers (ACH/SEPA)</strong>
                      <p className="text-muted-foreground mt-1">
                        Support for direct bank transfers at lower processing costs
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Digital Wallets</strong>
                      <p className="text-muted-foreground mt-1">
                        Integration with Apple Pay, Google Pay, and other popular wallets
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Buy Now, Pay Later</strong>
                      <p className="text-muted-foreground mt-1">
                        Support for installment payment options for larger purchases
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Local Payment Methods</strong>
                      <p className="text-muted-foreground mt-1">
                        Support for region-specific payment methods around the world
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border shadow-sm">
                <CheckoutFlow />
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Supported Payment Methods</h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
              {[
                { name: "Bank Transfer", icon: "landmark" },
                { name: "Apple Pay", icon: "credit-card" },
                { name: "Google Pay", icon: "credit-card" },
                { name: "PayPal", icon: "credit-card" },
                { name: "Klarna", icon: "credit-card" },
                { name: "Affirm", icon: "credit-card" },
                { name: "Venmo", icon: "credit-card" },
                { name: "Zelle", icon: "credit-card" },
                { name: "Sofort", icon: "credit-card" },
                { name: "iDEAL", icon: "credit-card" },
                { name: "Bancontact", icon: "credit-card" },
                { name: "Giropay", icon: "credit-card" },
              ].map((method, index) => (
                <div key={index} className="bg-background rounded-lg border p-4 flex flex-col items-center text-center">
                  <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-3">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      {method.icon === "landmark" ? (
                        <path d="M3 22h18M5 8v10M19 8v10M21 8H3a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h18a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2ZM9 2v4M15 2v4"></path>
                      ) : (
                        <rect width="20" height="14" x="2" y="5" rx="2"></rect>
                      )}
                    </svg>
                  </div>
                  <h3 className="font-medium">{method.name}</h3>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to expand your payment options?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how alternative payment methods can help you reach more customers.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/cost-observability/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

export default function CostObservabilityPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Cost Observability</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Gain visibility into payment processing costs with detailed analytics and reporting.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Understand Your Payment Costs</h2>
                <p className="text-muted-foreground mb-6">
                  Our cost observability solution provides complete visibility into your payment processing costs,
                  helping you identify opportunities for optimization and savings.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Detailed Cost Breakdown</strong>
                      <p className="text-muted-foreground mt-1">See exactly what you're paying for each transaction</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Cost Comparison</strong>
                      <p className="text-muted-foreground mt-1">Compare costs across different payment processors</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Trend Analysis</strong>
                      <p className="text-muted-foreground mt-1">Track cost trends over time to identify patterns</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Optimization Recommendations</strong>
                      <p className="text-muted-foreground mt-1">Get actionable insights to reduce costs</p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border shadow-sm p-6">
                <div className="space-y-6">
                  <div>
                    <h3 className="font-medium mb-3">Cost Breakdown by Processor</h3>
                    <div className="h-64 bg-muted rounded-lg flex items-center justify-center">
                      <p className="text-muted-foreground">Cost breakdown chart</p>
                    </div>
                  </div>
                  <div>
                    <h3 className="font-medium mb-3">Monthly Cost Trends</h3>
                    <div className="h-64 bg-muted rounded-lg flex items-center justify-center">
                      <p className="text-muted-foreground">Cost trends chart</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Key Features</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {[
                {
                  title: "Real-time Monitoring",
                  description: "Track costs as they occur with real-time dashboards",
                  icon: "activity",
                },
                {
                  title: "Custom Reports",
                  description: "Create and schedule custom cost reports",
                  icon: "file-text",
                },
                {
                  title: "Cost Alerts",
                  description: "Set up alerts for unusual cost patterns",
                  icon: "bell",
                },
                {
                  title: "Processor Comparison",
                  description: "Compare costs across different payment processors",
                  icon: "bar-chart-2",
                },
                {
                  title: "Export Capabilities",
                  description: "Export data for further analysis in your preferred tools",
                  icon: "download",
                },
                {
                  title: "Integration Options",
                  description: "Connect with your accounting and financial systems",
                  icon: "link",
                },
              ].map((feature, index) => (
                <div key={index} className="bg-background rounded-lg border p-6">
                  <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      {feature.icon === "activity" && <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>}
                      {feature.icon === "file-text" && (
                        <>
                          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                          <polyline points="14 2 14 8 20 8"></polyline>
                          <line x1="16" x2="8" y1="13" y2="13"></line>
                          <line x1="16" x2="8" y1="17" y2="17"></line>
                          <line x1="10" x2="8" y1="9" y2="9"></line>
                        </>
                      )}
                      {feature.icon === "bell" && (
                        <>
                          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
                          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
                        </>
                      )}
                      {feature.icon === "bar-chart-2" && (
                        <>
                          <line x1="18" x2="18" y1="20" y2="10"></line>
                          <line x1="12" x2="12" y1="20" y2="4"></line>
                          <line x1="6" x2="6" y1="20" y2="14"></line>
                        </>
                      )}
                      {feature.icon === "download" && (
                        <>
                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                          <polyline points="7 10 12 15 17 10"></polyline>
                          <line x1="12" x2="12" y1="15" y2="3"></line>
                        </>
                      )}
                      {feature.icon === "link" && (
                        <>
                          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                        </>
                      )}
                    </svg>
                  </div>
                  <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
                  <p className="text-muted-foreground">{feature.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to optimize your payment costs?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how cost observability can help you reduce payment processing expenses.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/reconciliation/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { ReconciliationFeatureCard } from "@/components/reconciliation-feature-card"

export default function ReconciliationPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Reconciliation</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Automated matching of transactions across systems to ensure accuracy and reduce manual work.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Key Features</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <ReconciliationFeatureCard
                title="Automated Matching"
                description="Automatically match transactions across payment processors, banks, and accounting systems"
                icon="check-circle"
              />
              <ReconciliationFeatureCard
                title="Exception Handling"
                description="Identify and resolve discrepancies with guided workflows"
                icon="alert-triangle"
              />
              <ReconciliationFeatureCard
                title="Multi-source Integration"
                description="Connect with payment processors, banks, and accounting systems"
                icon="link"
              />
              <ReconciliationFeatureCard
                title="Customizable Rules"
                description="Create custom matching rules for your specific business needs"
                icon="settings"
              />
              <ReconciliationFeatureCard
                title="Audit Trail"
                description="Maintain a complete record of all reconciliation activities"
                icon="file-text"
              />
              <ReconciliationFeatureCard
                title="Reporting"
                description="Generate detailed reconciliation reports for accounting and compliance"
                icon="bar-chart-2"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">How It Works</h2>
                <p className="text-muted-foreground mb-6">
                  Our reconciliation system automates the process of matching transactions across different systems,
                  reducing manual work and ensuring accuracy.
                </p>
                <ol className="space-y-4">
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      1
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Data Collection</h3>
                      <p className="text-muted-foreground mt-1">
                        Automatically collect transaction data from payment processors, banks, and accounting systems
                      </p>
                    </div>
                  </li>
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      2
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Matching Process</h3>
                      <p className="text-muted-foreground mt-1">
                        Apply matching rules to identify corresponding transactions across systems
                      </p>
                    </div>
                  </li>
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      3
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Exception Identification</h3>
                      <p className="text-muted-foreground mt-1">
                        Flag transactions that cannot be automatically matched for review
                      </p>
                    </div>
                  </li>
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      4
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Resolution</h3>
                      <p className="text-muted-foreground mt-1">
                        Resolve exceptions through guided workflows and manual matching
                      </p>
                    </div>
                  </li>
                  <li className="flex">
                    <div className="mr-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background text-sm font-medium">
                      5
                    </div>
                    <div className="mt-0.5">
                      <h3 className="font-medium">Reporting</h3>
                      <p className="text-muted-foreground mt-1">
                        Generate reconciliation reports for accounting and compliance purposes
                      </p>
                    </div>
                  </li>
                </ol>
              </div>
              <div className="bg-background rounded-lg border shadow-sm p-6">
                <div className="space-y-6">
                  <div>
                    <h3 className="font-medium mb-3">Reconciliation Dashboard</h3>
                    <div className="h-64 bg-muted rounded-lg flex items-center justify-center">
                      <p className="text-muted-foreground">Reconciliation dashboard</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <h4 className="text-sm font-medium mb-2">Matched Transactions</h4>
                      <div className="text-3xl font-bold text-green-500">98.5%</div>
                      <p className="text-xs text-muted-foreground mt-1">+0.5% from last month</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium mb-2">Exceptions</h4>
                      <div className="text-3xl font-bold text-amber-500">1.5%</div>
                      <p className="text-xs text-muted-foreground mt-1">-0.5% from last month</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium mb-2">Processing Time</h4>
                      <div className="text-3xl font-bold">2.3h</div>
                      <p className="text-xs text-muted-foreground mt-1">-1.2h from manual process</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium mb-2">Cost Savings</h4>
                      <div className="text-3xl font-bold text-green-500">85%</div>
                      <p className="text-xs text-muted-foreground mt-1">Compared to manual reconciliation</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to automate your reconciliation process?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how our reconciliation solution can save you time and reduce errors.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/solutions/revenue-recovery/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { MetricCard } from "@/components/metric-card"

export default function RevenueRecoveryPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Revenue Recovery</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Recapture failed payments with intelligent retry strategies and customer communication.
              </p>
              <div className="mt-10">
                <Button size="lg">Get Started</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Recover Lost Revenue</h2>
                <p className="text-muted-foreground mb-6">
                  Our revenue recovery solution helps you recapture failed payments through intelligent retry
                  strategies, reducing revenue leakage and improving customer retention.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Smart Retry Logic</strong>
                      <p className="text-muted-foreground mt-1">Optimize retry timing based on success patterns</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Automated Customer Communication</strong>
                      <p className="text-muted-foreground mt-1">
                        Notify customers of failed payments with actionable next steps
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Failure Analysis</strong>
                      <p className="text-muted-foreground mt-1">
                        Identify patterns in payment failures to address root causes
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Alternative Payment Options</strong>
                      <p className="text-muted-foreground mt-1">
                        Offer alternative payment methods when primary method fails
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="grid grid-cols-2 gap-6">
                <MetricCard title="Average Recovery Rate" value="76%" change="+12%" trend="up" />
                <MetricCard title="Revenue Recovered" value="$1.2M" change="+18%" trend="up" />
                <MetricCard title="Customer Retention" value="94%" change="+5%" trend="up" />
                <MetricCard title="Processing Cost" value="-32%" change="-8%" trend="down" />
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">How It Works</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M2 12h10M9 4v16M22 12h-3M17 8l-2 4 2 4"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Intelligent Detection</h3>
                <p className="text-muted-foreground mb-4">
                  Our system automatically detects failed payments and categorizes them by failure reason.
                </p>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Real-time monitoring
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Failure categorization
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Risk assessment
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                    <path d="m9 12 2 2 4-4"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Smart Recovery</h3>
                <p className="text-muted-foreground mb-4">
                  Our system applies optimized retry strategies based on the failure reason and historical success
                  patterns.
                </p>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Adaptive retry timing
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Multiple retry paths
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Success optimization
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M17 18a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2"></path>
                    <rect width="18" height="18" x="3" y="3" rx="2"></rect>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Customer Engagement</h3>
                <p className="text-muted-foreground mb-4">
                  We engage customers with timely, personalized communications to resolve payment issues.
                </p>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Multi-channel notifications
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Self-service recovery
                  </li>
                  <li className="flex items-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    Alternative payment options
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to recover lost revenue?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how our revenue recovery solution can help you recapture failed payments.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { ComplianceBadge } from "@/components/compliance-badge"

export default function ConformitiesPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Conformities</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to security, compliance, and industry standards.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-background rounded-lg border p-8">
                <h2 className="text-2xl font-bold mb-4">Security First Approach</h2>
                <p className="text-muted-foreground mb-6">
                  At Eos Solar Payments, security is not an afterthought—it's built into everything we do. Our platform
                  is designed with security as a foundational principle, ensuring that your payment data is protected at
                  every step.
                </p>
                <ul className="space-y-3">
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>End-to-end encryption for all sensitive data</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Regular security audits and penetration testing</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Secure development practices and code reviews</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Comprehensive security monitoring and incident response</span>
                  </li>
                </ul>
              </div>
              <div className="bg-background rounded-lg border p-8">
                <h2 className="text-2xl font-bold mb-4">Compliance Commitment</h2>
                <p className="text-muted-foreground mb-6">
                  We maintain compliance with the most stringent industry standards and regulations, ensuring that your
                  payment operations meet all necessary requirements.
                </p>
                <ul className="space-y-3">
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Regular compliance assessments and certifications</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Transparent compliance documentation and reporting</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Continuous monitoring of regulatory changes</span>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-3 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <span>Dedicated compliance team and resources</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Our Certifications</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              <ComplianceBadge
                title="Vulnerability Disclosure"
                description="Transparent security reporting process"
                href="/conformities/vulnerability-disclosure"
              />
              <ComplianceBadge
                title="PCI DSS 4.0"
                description="Payment Card Industry Data Security Standard"
                href="/conformities/pci-dss"
              />
              <ComplianceBadge
                title="ISO 27001:2022"
                description="Information security management"
                href="/conformities/iso-27001"
              />
              <ComplianceBadge
                title="SOC 2 Type 2"
                description="Service Organization Control"
                href="/conformities/soc-2"
              />
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Have questions about our compliance?</h2>
              <p className="mt-4 text-muted-foreground">
                Our team is ready to help you understand our security measures and compliance certifications.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Us</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/vulnerability-disclosure/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

export default function VulnerabilityDisclosurePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Vulnerability Disclosure Program</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to security through transparency and collaboration.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container max-w-4xl">
            <div className="bg-background rounded-lg border p-8">
              <h2 className="text-2xl font-bold mb-6">Program Overview</h2>
              <p className="text-muted-foreground mb-6">
                At Eos Solar Payments, we take security seriously. Our Vulnerability Disclosure Program is designed to
                engage with security researchers and the broader community to identify and address potential security
                vulnerabilities in our systems.
              </p>
              <p className="text-muted-foreground mb-6">
                We believe in the importance of working collaboratively with the security community to ensure the safety
                and integrity of our platform. We welcome responsible disclosure of security vulnerabilities and are
                committed to addressing them promptly.
              </p>
              <div className="mt-8">
                <h3 className="text-xl font-bold mb-4">Program Scope</h3>
                <p className="text-muted-foreground mb-4">
                  The following systems and applications are in scope for our vulnerability disclosure program:
                </p>
                <ul className="list-disc pl-6 space-y-2 text-muted-foreground mb-6">
                  <li>Eos Solar Payments API (api.eossolarpayments.com)</li>
                  <li>Eos Solar Payments Dashboard (dashboard.eossolarpayments.com)</li>
                  <li>Eos Solar Payments Website (www.eossolarpayments.com)</li>
                  <li>Eos Solar Payments Mobile Applications</li>
                </ul>
                <p className="text-muted-foreground">The following are explicitly out of scope:</p>
                <ul className="list-disc pl-6 space-y-2 text-muted-foreground mb-6">
                  <li>Social engineering attacks against our employees</li>
                  <li>Denial of service attacks</li>
                  <li>Physical security attacks on our offices or data centers</li>
                  <li>Third-party services or applications not owned by Eos Solar Payments</li>
                </ul>
              </div>
              <div className="mt-8">
                <h3 className="text-xl font-bold mb-4">Reporting a Vulnerability</h3>
                <p className="text-muted-foreground mb-4">
                  If you believe you've found a security vulnerability in our systems, please submit a report through
                  our secure reporting form. Please include:
                </p>
                <ul className="list-disc pl-6 space-y-2 text-muted-foreground mb-6">
                  <li>A detailed description of the vulnerability</li>
                  <li>Steps to reproduce the issue</li>
                  <li>Any proof-of-concept code, if applicable</li>
                  <li>Impact of the vulnerability</li>
                </ul>
                <div className="mt-6">
                  <Button size="lg">Submit Vulnerability Report</Button>
                </div>
              </div>
              <div className="mt-8">
                <h3 className="text-xl font-bold mb-4">Our Commitment</h3>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Acknowledgment</strong>
                      <p className="text-muted-foreground mt-1">
                        We will acknowledge receipt of your vulnerability report within 24 hours.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Investigation</strong>
                      <p className="text-muted-foreground mt-1">
                        We will investigate all legitimate reports and work to quickly validate and reproduce the issue.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Remediation</strong>
                      <p className="text-muted-foreground mt-1">
                        We will work to address and fix validated vulnerabilities in a timely manner.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Communication</strong>
                      <p className="text-muted-foreground mt-1">
                        We will keep you informed of our progress as we address the issue.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Recognition</strong>
                      <p className="text-muted-foreground mt-1">
                        With your permission, we will publicly acknowledge your contribution to our security.
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Hall of Fame</h2>
              <p className="mt-4 text-muted-foreground">
                We would like to thank the following security researchers for their valuable contributions to our
                security.
              </p>
              <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                {[
                  { name: "Jane Smith", date: "March 2025", finding: "API Authentication Vulnerability" },
                  { name: "John Doe", date: "February 2025", finding: "Cross-Site Scripting (XSS)" },
                  { name: "Alex Johnson", date: "January 2025", finding: "Insecure Direct Object Reference" },
                ].map((researcher, index) => (
                  <div key={index} className="bg-background rounded-lg border p-4">
                    <h3 className="font-bold">{researcher.name}</h3>
                    <p className="text-sm text-muted-foreground">{researcher.date}</p>
                    <p className="mt-2 text-sm">{researcher.finding}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/pci-dss/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CertificationBadge } from "@/components/certification-badge"

export default function PciDssPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">PCI DSS 4.0 Compliance</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to maintaining the highest standards of payment card security.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container max-w-4xl">
            <div className="bg-background rounded-lg border p-8">
              <div className="flex flex-col md:flex-row gap-8 items-center mb-8">
                <div className="flex-shrink-0">
                  <CertificationBadge title="PCI DSS 4.0" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold mb-4">What is PCI DSS?</h2>
                  <p className="text-muted-foreground">
                    The Payment Card Industry Data Security Standard (PCI DSS) is a set of security standards designed
                    to ensure that all companies that accept, process, store, or transmit credit card information
                    maintain a secure environment. PCI DSS 4.0 is the latest version of this standard, with enhanced
                    requirements to address emerging threats and technologies.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Our Compliance</h3>
              <p className="text-muted-foreground mb-6">
                Eos Solar Payments has achieved PCI DSS 4.0 compliance, demonstrating our commitment to maintaining the
                highest standards of payment card security. Our compliance is validated annually through rigorous
                assessments conducted by qualified security assessors.
              </p>

              <h3 className="text-xl font-bold mb-4">Key Compliance Areas</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Network Security</h4>
                  <p className="text-sm text-muted-foreground">
                    We maintain secure network architecture with properly configured firewalls, encryption, and access
                    controls to protect cardholder data.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Data Protection</h4>
                  <p className="text-sm text-muted-foreground">
                    We implement strong encryption for stored and transmitted cardholder data, with strict data
                    retention and disposal policies.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Access Control</h4>
                  <p className="text-sm text-muted-foreground">
                    We enforce strict access control measures, including role-based access, strong authentication, and
                    regular access reviews.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Vulnerability Management</h4>
                  <p className="text-sm text-muted-foreground">
                    We conduct regular security testing, including vulnerability scans and penetration tests, to
                    identify and address potential weaknesses.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Security Monitoring</h4>
                  <p className="text-sm text-muted-foreground">
                    We maintain comprehensive logging and monitoring systems to detect and respond to security
                    incidents.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Security Policy</h4>
                  <p className="text-sm text-muted-foreground">
                    We maintain a comprehensive information security policy that is regularly reviewed and updated.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Benefits for Our Customers</h3>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Reduced Risk</strong>
                    <p className="text-muted-foreground mt-1">
                      Our PCI DSS compliance helps protect your customers' payment card data from breaches and fraud.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Simplified Compliance</strong>
                    <p className="text-muted-foreground mt-1">
                      Using our PCI-compliant services can simplify your own compliance efforts and reduce your PCI
                      scope.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Customer Trust</strong>
                    <p className="text-muted-foreground mt-1">
                      Demonstrate to your customers that you take payment security seriously by partnering with a
                      PCI-compliant provider.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Avoid Penalties</strong>
                    <p className="text-muted-foreground mt-1">
                      Help avoid potential fines and penalties associated with non-compliance and data breaches.
                    </p>
                  </div>
                </li>
              </ul>

              <div className="bg-muted/30 p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">Attestation of Compliance</h3>
                <p className="text-muted-foreground mb-4">
                  Our Attestation of Compliance (AOC) is available to customers and partners upon request. This document
                  verifies our PCI DSS 4.0 compliance status and can be used as part of your own compliance
                  documentation.
                </p>
                <Button>Request AOC Document</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Have questions about our PCI compliance?</h2>
              <p className="mt-4 text-muted-foreground">
                Our security team is ready to help you understand how our PCI DSS 4.0 compliance can benefit your
                business.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Security Team</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/iso-27001/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CertificationBadge } from "@/components/certification-badge"

export default function Iso27001Page() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">ISO 27001:2022 Certification</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to information security management excellence.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container max-w-4xl">
            <div className="bg-background rounded-lg border p-8">
              <div className="flex flex-col md:flex-row gap-8 items-center mb-8">
                <div className="flex-shrink-0">
                  <CertificationBadge title="ISO 27001:2022" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold mb-4">What is ISO 27001?</h2>
                  <p className="text-muted-foreground">
                    ISO 27001 is an internationally recognized standard for information security management systems
                    (ISMS). It provides a framework for establishing, implementing, maintaining, and continually
                    improving an information security management system within the context of the organization.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Our Certification</h3>
              <p className="text-muted-foreground mb-6">
                Eos Solar Payments has achieved ISO 27001:2022 certification, demonstrating our commitment to
                information security best practices. Our certification was awarded following a comprehensive audit by an
                accredited certification body, verifying that our information security management system meets all
                requirements of the standard.
              </p>

              <h3 className="text-xl font-bold mb-4">Key Security Controls</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Information Security Policies</h4>
                  <p className="text-sm text-muted-foreground">
                    Comprehensive policies that define our approach to information security management.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Organization of Information Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Clear roles and responsibilities for information security within our organization.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Human Resource Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Security controls for employees before, during, and after employment.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Asset Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Identification and protection of information assets throughout their lifecycle.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Access Control</h4>
                  <p className="text-sm text-muted-foreground">
                    Strict controls to ensure only authorized access to information and systems.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Cryptography</h4>
                  <p className="text-sm text-muted-foreground">
                    Proper use of encryption to protect sensitive information.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Physical and Environmental Security</h4>
                  <p className="text-sm text-muted-foreground">Protection of physical facilities and equipment.</p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Operations Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Secure operation of information processing facilities.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Communications Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Protection of information in networks and supporting facilities.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">System Acquisition and Development</h4>
                  <p className="text-sm text-muted-foreground">
                    Security requirements integrated into the development lifecycle.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Supplier Relationships</h4>
                  <p className="text-sm text-muted-foreground">
                    Security controls for third-party service providers and suppliers.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Incident Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Processes for detecting, reporting, and responding to security incidents.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Benefits for Our Customers</h3>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Enhanced Data Protection</strong>
                    <p className="text-muted-foreground mt-1">
                      Our ISO 27001 certification ensures that we have robust controls in place to protect your data.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Risk Management</strong>
                    <p className="text-muted-foreground mt-1">
                      We systematically identify and address information security risks that could affect your business.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Compliance Support</strong>
                    <p className="text-muted-foreground mt-1">
                      Our certification can help support your own compliance requirements and due diligence processes.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Continuous Improvement</strong>
                    <p className="text-muted-foreground mt-1">
                      Our ISMS is regularly reviewed and improved to address emerging threats and technologies.
                    </p>
                  </div>
                </li>
              </ul>

              <div className="bg-muted/30 p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">Certification Documentation</h3>
                <p className="text-muted-foreground mb-4">
                  Our ISO 27001:2022 certificate and Statement of Applicability (SoA) are available to customers and
                  partners upon request, subject to appropriate confidentiality agreements.
                </p>
                <Button>Request Certification Documents</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Have questions about our ISO 27001 certification?</h2>
              <p className="mt-4 text-muted-foreground">
                Our security team is ready to help you understand how our information security management system can
                benefit your business.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Security Team</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conformities/soc-2/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CertificationBadge } from "@/components/certification-badge"

export default function Soc2Page() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">SOC 2 Type 2 Compliance</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Our commitment to security, availability, and confidentiality.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container max-w-4xl">
            <div className="bg-background rounded-lg border p-8">
              <div className="flex flex-col md:flex-row gap-8 items-center mb-8">
                <div className="flex-shrink-0">
                  <CertificationBadge title="SOC 2 Type 2" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold mb-4">What is SOC 2?</h2>
                  <p className="text-muted-foreground">
                    SOC 2 (System and Organization Controls 2) is a framework developed by the American Institute of
                    Certified Public Accountants (AICPA) that defines criteria for managing customer data based on five
                    "trust service principles": security, availability, processing integrity, confidentiality, and
                    privacy.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Our Compliance</h3>
              <p className="text-muted-foreground mb-6">
                Eos Solar Payments has successfully completed a SOC 2 Type 2 audit, demonstrating our ongoing commitment
                to security, availability, and confidentiality. The Type 2 report verifies that our controls have been
                tested over a period of time (typically 6-12 months) and are operating effectively.
              </p>

              <h3 className="text-xl font-bold mb-4">Trust Service Principles</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Security</h4>
                  <p className="text-sm text-muted-foreground">
                    Our systems are protected against unauthorized access, both physical and logical, through robust
                    security controls.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Availability</h4>
                  <p className="text-sm text-muted-foreground">
                    Our systems are available for operation and use as committed or agreed, with appropriate monitoring
                    and disaster recovery procedures.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Confidentiality</h4>
                  <p className="text-sm text-muted-foreground">
                    Information designated as confidential is protected as committed or agreed, with strict access
                    controls and data handling procedures.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Key Control Areas</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Organization and Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Clear organizational structure with defined roles and responsibilities for security.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Communications</h4>
                  <p className="text-sm text-muted-foreground">
                    Effective communication of system responsibilities to internal and external users.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Risk Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Processes to identify, assess, and mitigate risks to the system.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Monitoring</h4>
                  <p className="text-sm text-muted-foreground">
                    Continuous monitoring of the system to detect potential security events.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Logical and Physical Access</h4>
                  <p className="text-sm text-muted-foreground">
                    Controls to restrict logical and physical access to authorized individuals.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">System Operations</h4>
                  <p className="text-sm text-muted-foreground">
                    Procedures to manage the operation, maintenance, and changes to the system.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Change Management</h4>
                  <p className="text-sm text-muted-foreground">
                    Processes to manage changes to system components and configurations.
                  </p>
                </div>
                <div className="bg-muted/30 p-4 rounded-lg">
                  <h4 className="font-bold mb-2">Incident Response</h4>
                  <p className="text-sm text-muted-foreground">
                    Procedures to identify, respond to, mitigate, and learn from security incidents.
                  </p>
                </div>
              </div>

              <h3 className="text-xl font-bold mb-4">Benefits for Our Customers</h3>
              <ul className="space-y-4 mb-8">
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Third-Party Validation</strong>
                    <p className="text-muted-foreground mt-1">
                      Independent verification of our security controls by qualified auditors.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Vendor Due Diligence</strong>
                    <p className="text-muted-foreground mt-1">
                      Our SOC 2 report can simplify your vendor assessment process.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Transparency</strong>
                    <p className="text-muted-foreground mt-1">
                      Detailed information about our control environment and its effectiveness.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                  <div>
                    <strong className="font-medium">Continuous Improvement</strong>
                    <p className="text-muted-foreground mt-1">
                      Our annual SOC 2 audits drive ongoing enhancement of our security controls.
                    </p>
                  </div>
                </li>
              </ul>

              <div className="bg-muted/30 p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4">SOC 2 Report Access</h3>
                <p className="text-muted-foreground mb-4">
                  Our SOC 2 Type 2 report is available to customers and prospects under NDA. The report provides
                  detailed information about our control environment, the tests performed by the auditors, and the
                  results of those tests.
                </p>
                <Button>Request SOC 2 Report</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Have questions about our SOC 2 compliance?</h2>
              <p className="mt-4 text-muted-foreground">
                Our security team is ready to help you understand how our SOC 2 Type 2 compliance can benefit your
                business.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Security Team</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { ResourceCard } from "@/components/resource-card"

export default function ResourcesPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Resources</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Explore our resources to learn more about Eos Solar Payments and how we can help your business.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <ResourceCard
                title="Case Studies"
                description="See how other solar companies are using Eos Solar Payments to optimize their payment operations."
                icon="file-text"
                href="/resources/case-studies"
              />
              <ResourceCard
                title="Community"
                description="Join our community of developers and payment professionals to share knowledge and best practices."
                icon="users"
                href="/resources/community"
              />
              <ResourceCard
                title="Blog"
                description="Stay up-to-date with the latest news, insights, and best practices in solar payments."
                icon="newspaper"
                href="/resources/blog"
              />
              <ResourceCard
                title="Integrations"
                description="Explore our integrations with popular solar software, CRMs, and accounting systems."
                icon="puzzle"
                href="/resources/integrations"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Documentation</h2>
                <p className="text-muted-foreground mb-6">
                  Comprehensive documentation to help you get started with Eos Solar Payments and make the most of our
                  platform.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Getting Started Guides</strong>
                      <p className="text-muted-foreground mt-1">
                        Step-by-step guides to help you set up and configure Eos Solar Payments.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">API Reference</strong>
                      <p className="text-muted-foreground mt-1">
                        Detailed documentation of our API endpoints, parameters, and responses.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">SDKs and Libraries</strong>
                      <p className="text-muted-foreground mt-1">
                        Client libraries and SDKs for popular programming languages.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Tutorials</strong>
                      <p className="text-muted-foreground mt-1">
                        Detailed tutorials for common use cases and integrations.
                      </p>
                    </div>
                  </li>
                </ul>
                <div className="mt-8">
                  <Button>View Documentation</Button>
                </div>
              </div>
              <div>
                <h2 className="text-3xl font-bold tracking-tight mb-6">Support</h2>
                <p className="text-muted-foreground mb-6">
                  We're here to help you succeed with Eos Solar Payments. Our support team is available to answer your
                  questions and help you resolve any issues.
                </p>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Knowledge Base</strong>
                      <p className="text-muted-foreground mt-1">
                        Find answers to common questions and troubleshooting guides.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Community Forum</strong>
                      <p className="text-muted-foreground mt-1">
                        Connect with other users and share knowledge and best practices.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Email Support</strong>
                      <p className="text-muted-foreground mt-1">
                        Contact our support team directly for personalized assistance.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Dedicated Account Management</strong>
                      <p className="text-muted-foreground mt-1">
                        Enterprise customers receive dedicated account management and support.
                      </p>
                    </div>
                  </li>
                </ul>
                <div className="mt-8">
                  <Button>Contact Support</Button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to get started?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how Eos Solar Payments can help optimize your payment infrastructure.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/case-studies/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CaseStudyCard } from "@/components/case-study-card"

export default function CaseStudiesPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Case Studies</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                See how solar companies are using Eos Solar Payments to optimize their payment operations.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <CaseStudyCard
                title="SunPower Innovations"
                description="How SunPower Innovations reduced payment processing costs by 35% while improving success rates."
                category="Cost Optimization"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="GreenSolar Solutions"
                description="GreenSolar Solutions implemented intelligent routing to increase payment success rates by 12%."
                category="Payment Optimization"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="SolarEdge Financial"
                description="SolarEdge Financial recovered $1.2M in failed payments using our revenue recovery solution."
                category="Revenue Recovery"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="BrightPath Energy"
                description="How BrightPath Energy streamlined reconciliation and reduced manual work by 85%."
                category="Operational Efficiency"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="SunFlow Systems"
                description="SunFlow Systems implemented our vault solution to enhance security and reduce PCI scope."
                category="Security & Compliance"
                logo="/placeholder.svg?height=80&width=80"
              />
              <CaseStudyCard
                title="EcoSolar Finance"
                description="EcoSolar Finance expanded payment options and increased conversion rates by 18%."
                category="Alternative Payments"
                logo="/placeholder.svg?height=80&width=80"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Featured Case Study</h2>
              <p className="mt-4 text-muted-foreground">
                Learn how SolarMax Technologies transformed their payment operations with Eos Solar Payments.
              </p>
              <div className="mt-10 bg-background rounded-lg border p-8 text-left">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-1/3">
                    <div className="bg-muted rounded-lg h-48 flex items-center justify-center">
                      <p className="text-muted-foreground">Company logo</p>
                    </div>
                    <div className="mt-6 space-y-4">
                      <div>
                        <h4 className="text-sm font-medium text-muted-foreground">Industry</h4>
                        <p>Residential Solar</p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium text-muted-foreground">Company Size</h4>
                        <p>250+ employees</p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium text-muted-foreground">Location</h4>
                        <p>United States</p>
                      </div>
                      <div>
                        <h4 className="text-sm font-medium text-muted-foreground">Solutions Used</h4>
                        <ul className="list-disc list-inside">
                          <li>Intelligent Routing</li>
                          <li>Revenue Recovery</li>
                          <li>Cost Observability</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div className="md:w-2/3">
                    <h3 className="text-2xl font-bold mb-4">SolarMax Technologies: Optimizing Payment Operations</h3>
                    <div className="space-y-4">
                      <p>
                        SolarMax Technologies, a leading residential solar provider, was facing challenges with payment
                        failures, high processing costs, and limited visibility into their payment operations.
                      </p>
                      <h4 className="text-lg font-bold">Challenges</h4>
                      <ul className="list-disc list-inside space-y-2">
                        <li>12% payment failure rate impacting cash flow</li>
                        <li>High payment processing costs eating into margins</li>
                        <li>Limited visibility into payment performance</li>
                        <li>Manual reconciliation processes consuming resources</li>
                      </ul>
                      <h4 className="text-lg font-bold">Solution</h4>
                      <p>
                        SolarMax implemented Eos Solar Payments' intelligent routing, revenue recovery, and cost
                        observability solutions to address these challenges.
                      </p>
                      <h4 className="text-lg font-bold">Results</h4>
                      <ul className="list-disc list-inside space-y-2">
                        <li>Reduced payment failure rate from 12% to 3.5%</li>
                        <li>Decreased processing costs by 28%</li>
                        <li>Recovered $850,000 in previously failed payments</li>
                        <li>Reduced reconciliation time by 75%</li>
                        <li>Improved cash flow predictability</li>
                      </ul>
                    </div>
                    <div className="mt-6">
                      <Button>Read Full Case Study</Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to achieve similar results?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn how Eos Solar Payments can help optimize your payment infrastructure.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Sales</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/community/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

export default function CommunityPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Community</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Join our growing community of developers, payment professionals, and solar industry experts.
              </p>
              <div className="mt-10">
                <Button size="lg">Join Our Community</Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M17 6.1H3M21 12.1H3M15.1 18H3"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Discussion Forum</h3>
                <p className="text-muted-foreground mb-4">
                  Connect with other users, ask questions, share knowledge, and discuss best practices for payment
                  processing in the solar industry.
                </p>
                <Button variant="outline" className="w-full">
                  Visit Forum
                </Button>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">User Groups</h3>
                <p className="text-muted-foreground mb-4">
                  Join regional and virtual user groups to network with peers, share experiences, and learn from other
                  Eos Solar Payments users.
                </p>
                <Button variant="outline" className="w-full">
                  Find User Groups
                </Button>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-primary"
                  >
                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" x2="8" y1="13" y2="13"></line>
                    <line x1="16" x2="8" y1="17" y2="17"></line>
                    <line x1="10" x2="8" y1="9" y2="9"></line>
                  </svg>
                </div>
                <h3 className="text-xl font-bold mb-2">Documentation</h3>
                <p className="text-muted-foreground mb-4">
                  Access comprehensive documentation, including API references, tutorials, and best practices for
                  implementing Eos Solar Payments.
                </p>
                <Button variant="outline" className="w-full">
                  View Documentation
                </Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Upcoming Events</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {[
                {
                  title: "Webinar: Optimizing Payment Routing for Solar Companies",
                  date: "June 15, 2025",
                  time: "11:00 AM - 12:00 PM EDT",
                  type: "Virtual",
                },
                {
                  title: "Workshop: Implementing Revenue Recovery Strategies",
                  date: "July 8, 2025",
                  time: "1:00 PM - 3:00 PM EDT",
                  type: "Virtual",
                },
                {
                  title: "Eos Solar Payments User Conference",
                  date: "September 22-24, 2025",
                  time: "All Day",
                  type: "In-Person (San Francisco, CA)",
                },
                {
                  title: "Developer Office Hours",
                  date: "Every Thursday",
                  time: "2:00 PM - 4:00 PM EDT",
                  type: "Virtual",
                },
                {
                  title: "Regional User Group: Northeast",
                  date: "August 12, 2025",
                  time: "5:30 PM - 7:30 PM EDT",
                  type: "In-Person (Boston, MA)",
                },
                {
                  title: "Webinar: What's New in Eos Solar Payments",
                  date: "July 22, 2025",
                  time: "1:00 PM - 2:00 PM EDT",
                  type: "Virtual",
                },
              ].map((event, index) => (
                <div key={index} className="bg-background rounded-lg border p-6">
                  <div className="flex justify-between items-start mb-4">
                    <h3 className="text-lg font-bold">{event.title}</h3>
                    <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">{event.type}</span>
                  </div>
                  <div className="space-y-2 mb-4">
                    <div className="flex items-center text-sm">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2 text-muted-foreground"
                      >
                        <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
                        <line x1="16" x2="16" y1="2" y2="6"></line>
                        <line x1="8" x2="8" y1="2" y2="6"></line>
                        <line x1="3" x2="21" y1="10" y2="10"></line>
                      </svg>
                      <span>{event.date}</span>
                    </div>
                    <div className="flex items-center text-sm">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2 text-muted-foreground"
                      >
                        <circle cx="12" cy="12" r="10"></circle>
                        <polyline points="12 6 12 12 16 14"></polyline>
                      </svg>
                      <span>{event.time}</span>
                    </div>
                  </div>
                  <Button variant="outline" size="sm" className="w-full">
                    Register
                  </Button>
                </div>
              ))}
            </div>
            <div className="mt-8 text-center">
              <Button>View All Events</Button>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Community Resources</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-background rounded-lg border p-6">
                <h3 className="text-xl font-bold mb-4">Open Source Projects</h3>
                <p className="text-muted-foreground mb-6">
                  Explore and contribute to our open source projects, including client libraries, integrations, and
                  tools.
                </p>
                <ul className="space-y-4 mb-6">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Eos Solar Payments Node.js SDK</strong>
                      <p className="text-muted-foreground mt-1">
                        Official Node.js client library for the Eos Solar Payments API.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Eos Solar Payments Python SDK</strong>
                      <p className="text-muted-foreground mt-1">
                        Official Python client library for the Eos Solar Payments API.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="m8 3 4 8 5-5 5 15H2L8 3z"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Eos Solar Payments React Components</strong>
                      <p className="text-muted-foreground mt-1">
                        React components for integrating Eos Solar Payments into your web applications.
                      </p>
                    </div>
                  </li>
                </ul>
                <Button variant="outline" className="w-full">
                  View GitHub Repository
                </Button>
              </div>
              <div className="bg-background rounded-lg border p-6">
                <h3 className="text-xl font-bold mb-4">Community Contributions</h3>
                <p className="text-muted-foreground mb-6">
                  Explore integrations, tools, and resources created by the Eos Solar Payments community.
                </p>
                <ul className="space-y-4 mb-6">
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                        <path d="m9 12 2 2 4-4"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Salesforce Integration</strong>
                      <p className="text-muted-foreground mt-1">Community-built integration for Salesforce CRM.</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                        <path d="m9 12 2 2 4-4"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">QuickBooks Connector</strong>
                      <p className="text-muted-foreground mt-1">
                        Tool for syncing Eos Solar Payments data with QuickBooks.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="mr-4 mt-1 bg-primary/10 p-1 rounded-full">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="text-primary"
                      >
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                        <path d="m9 12 2 2 4-4"></path>
                      </svg>
                    </div>
                    <div>
                      <strong className="font-medium">Payment Analytics Dashboard</strong>
                      <p className="text-muted-foreground mt-1">Custom dashboard for visualizing payment data.</p>
                    </div>
                  </li>
                </ul>
                <Button variant="outline" className="w-full">
                  Explore Community Contributions
                </Button>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Join Our Community Today</h2>
              <p className="mt-4 text-muted-foreground">
                Connect with other Eos Solar Payments users, share knowledge, and stay up-to-date with the latest
                developments.
              </p>
              <div className="mt-8">
                <Button size="lg">Join Our Community</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/blog/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"

export default function BlogPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Blog</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Stay up-to-date with the latest news, insights, and best practices in solar payments.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="md:col-span-2 space-y-12">
                {[
                  {
                    title: "The Future of Payments in the Solar Industry",
                    excerpt:
                      "Explore the emerging trends and technologies that are shaping the future of payments in the solar industry.",
                    date: "May 15, 2025",
                    author: "Sarah Johnson",
                    category: "Industry Trends",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                  {
                    title: "Optimizing Payment Routing for Higher Success Rates",
                    excerpt:
                      "Learn how intelligent payment routing can help solar companies increase payment success rates and reduce processing costs.",
                    date: "May 8, 2025",
                    author: "Michael Chen",
                    category: "Best Practices",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                  {
                    title: "Implementing Effective Revenue Recovery Strategies",
                    excerpt:
                      "Discover proven strategies for recovering failed payments and reducing revenue leakage in your solar business.",
                    date: "April 29, 2025",
                    author: "David Rodriguez",
                    category: "Revenue Recovery",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                  {
                    title: "The Impact of PCI DSS 4.0 on Solar Payment Processing",
                    excerpt:
                      "Understand the implications of PCI DSS 4.0 for solar companies and how to ensure compliance.",
                    date: "April 22, 2025",
                    author: "Jennifer Lee",
                    category: "Compliance",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                  {
                    title: "Streamlining Payment Reconciliation for Solar Companies",
                    excerpt:
                      "Learn how automated reconciliation can save time, reduce errors, and improve financial accuracy for solar businesses.",
                    date: "April 15, 2025",
                    author: "Robert Williams",
                    category: "Operational Efficiency",
                    image: "/placeholder.svg?height=300&width=600",
                  },
                ].map((post, index) => (
                  <div key={index} className="flex flex-col md:flex-row gap-6">
                    <div className="md:w-1/3">
                      <img src={post.image || "/placeholder.svg"} alt={post.title} className="rounded-lg" />
                    </div>
                    <div className="md:w-2/3">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
                          {post.category}
                        </span>
                        <span className="text-xs text-muted-foreground">{post.date}</span>
                      </div>
                      <h2 className="text-2xl font-bold mb-2">{post.title}</h2>
                      <p className="text-muted-foreground mb-4">{post.excerpt}</p>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div className="h-8 w-8 rounded-full bg-muted mr-2"></div>
                          <span className="text-sm">{post.author}</span>
                        </div>
                        <Button variant="outline" size="sm">
                          Read More
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
                <div className="flex justify-center">
                  <Button>Load More Articles</Button>
                </div>
              </div>
              <div className="space-y-8">
                <div className="bg-background rounded-lg border p-6">
                  <h3 className="text-lg font-bold mb-4">Categories</h3>
                  <ul className="space-y-2">
                    {[
                      "Industry Trends",
                      "Best Practices",
                      "Revenue Recovery",
                      "Compliance",
                      "Operational Efficiency",
                      "Security",
                      "Case Studies",
                      "Product Updates",
                    ].map((category, index) => (
                      <li key={index}>
                        <a href="#" className="text-muted-foreground hover:text-foreground">
                          {category}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="bg-background rounded-lg border p-6">
                  <h3 className="text-lg font-bold mb-4">Popular Posts</h3>
                  <ul className="space-y-4">
                    {[
                      {
                        title: "5 Ways to Reduce Payment Processing Costs",
                        date: "April 10, 2025",
                      },
                      {
                        title: "Understanding Payment Failure Reasons in Solar Financing",
                        date: "March 28, 2025",
                      },
                      {
                        title: "The Role of AI in Payment Optimization",
                        date: "March 15, 2025",
                      },
                      {
                        title: "Implementing a Successful Revenue Recovery Program",
                        date: "February 22, 2025",
                      },
                    ].map((post, index) => (
                      <li key={index}>
                        <a href="#" className="hover:text-primary">
                          <h4 className="font-medium">{post.title}</h4>
                          <p className="text-xs text-muted-foreground">{post.date}</p>
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="bg-background rounded-lg border p-6">
                  <h3 className="text-lg font-bold mb-4">Subscribe to Our Newsletter</h3>
                  <p className="text-muted-foreground mb-4">
                    Stay up-to-date with the latest news, insights, and best practices in solar payments.
                  </p>
                  <div className="space-y-4">
                    <div>
                      <input
                        type="email"
                        placeholder="Enter your email"
                        className="w-full px-3 py-2 border rounded-md"
                      />
                    </div>
                    <Button className="w-full">Subscribe</Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/resources/integrations/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { IntegrationOption } from "@/components/integration-option"

export default function IntegrationsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <main className="flex-1">
        <section className="py-20 md:py-32 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Integrations</h1>
              <p className="mt-6 text-lg text-muted-foreground">
                Connect Eos Solar Payments with your favorite tools and platforms to streamline your payment operations.
              </p>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">CRM & Customer Management</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <IntegrationOption
                title="Salesforce"
                description="Sync payment data with Salesforce CRM for a complete view of your customers."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="HubSpot"
                description="Connect payment information with HubSpot for streamlined customer management."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Zoho CRM"
                description="Integrate payment data with Zoho CRM for enhanced customer insights."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Microsoft Dynamics"
                description="Sync payment information with Microsoft Dynamics for comprehensive customer management."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="SugarCRM"
                description="Connect payment data with SugarCRM for improved customer relationships."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Pipedrive"
                description="Integrate payment information with Pipedrive for streamlined sales processes."
                logo="/placeholder.svg?height=60&width=60"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Accounting & Finance</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <IntegrationOption
                title="QuickBooks"
                description="Sync payment data with QuickBooks for streamlined accounting and financial reporting."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Xero"
                description="Connect payment information with Xero for comprehensive financial management."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Sage"
                description="Integrate payment data with Sage for enhanced financial visibility."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="NetSuite"
                description="Sync payment information with NetSuite for end-to-end financial management."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="FreshBooks"
                description="Connect payment data with FreshBooks for simplified accounting and invoicing."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Wave"
                description="Integrate payment information with Wave for streamlined financial operations."
                logo="/placeholder.svg?height=60&width=60"
              />
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Solar Industry Software</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <IntegrationOption
                title="Aurora Solar"
                description="Connect payment data with Aurora Solar for integrated solar design and sales."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Energy Toolbase"
                description="Integrate payment information with Energy Toolbase for comprehensive project modeling."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="SolarNexus"
                description="Sync payment data with SolarNexus for streamlined solar business operations."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Solargraf"
                description="Connect payment information with Solargraf for enhanced solar proposal generation."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="PVComplete"
                description="Integrate payment data with PVComplete for comprehensive solar design and engineering."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="SolarSuccess"
                description="Sync payment information with SolarSuccess for streamlined solar business management."
                logo="/placeholder.svg?height=60&width=60"
              />
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Analytics & Reporting</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              <IntegrationOption
                title="Tableau"
                description="Connect payment data with Tableau for powerful visual analytics and reporting."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Power BI"
                description="Integrate payment information with Power BI for comprehensive business intelligence."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Looker"
                description="Sync payment data with Looker for advanced analytics and reporting."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Domo"
                description="Connect payment information with Domo for real-time business insights."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Google Data Studio"
                description="Integrate payment data with Google Data Studio for customizable reporting."
                logo="/placeholder.svg?height=60&width=60"
              />
              <IntegrationOption
                title="Sisense"
                description="Sync payment information with Sisense for advanced data analytics."
                logo="/placeholder.svg?height=60&width=60"
              />
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container">
            <div className="mx-auto max-w-3xl">
              <h2 className="text-3xl font-bold tracking-tight text-center mb-6">Custom Integrations</h2>
              <p className="text-center text-muted-foreground mb-8">
                Need to connect Eos Solar Payments with a system not listed here? Our flexible API and developer tools
                make it easy to build custom integrations.
              </p>
              <div className="bg-background rounded-lg border p-8">
                <h3 className="text-xl font-bold mb-4">Integration Options</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <div>
                    <h4 className="font-bold mb-2">API Integration</h4>
                    <p className="text-sm text-muted-foreground">
                      Use our comprehensive REST API to build custom integrations with any system or platform.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">Webhook Integration</h4>
                    <p className="text-sm text-muted-foreground">
                      Set up webhooks to receive real-time notifications of payment events in your systems.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">SDK Integration</h4>
                    <p className="text-sm text-muted-foreground">
                      Use our SDKs for popular programming languages to simplify integration development.
                    </p>
                  </div>
                  <div>
                    <h4 className="font-bold mb-2">Custom Development</h4>
                    <p className="text-sm text-muted-foreground">
                      Work with our professional services team to build custom integrations for your specific needs.
                    </p>
                  </div>
                </div>
                <div className="flex justify-center">
                  <Button>Contact Integration Team</Button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 bg-muted/30">
          <div className="container">
            <div className="mx-auto max-w-3xl text-center">
              <h2 className="text-3xl font-bold tracking-tight">Ready to integrate?</h2>
              <p className="mt-4 text-muted-foreground">
                Contact our team to learn more about our integration options and how we can help you connect Eos Solar
                Payments with your existing systems.
              </p>
              <div className="mt-8">
                <Button size="lg">Contact Integration Team</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
"use client"

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

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

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

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

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

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

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

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

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

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

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

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

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

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ className, ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleContent ref={ref} className={className} {...props} />
))
CollapsibleContent.displayName = "CollapsibleContent"

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

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

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

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

const NavigationMenuItem = NavigationMenuPrimitive.Item

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

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

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

const NavigationMenuLink = NavigationMenuPrimitive.Link

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

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

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/resource-card.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { FileText, Users, Newspaper, Puzzle } from "lucide-react"

interface ResourceCardProps {
  title: string
  description: string
  icon: string
  href: string
  className?: string
}

export function ResourceCard({ title, description, icon, href, className }: ResourceCardProps) {
  // Map de string para componentes de ícone
  const getIcon = () => {
    switch (icon) {
      case "file-text":
        return <FileText className="h-5 w-5 text-accent-foreground" />
      case "users":
        return <Users className="h-5 w-5 text-accent-foreground" />
      case "newspaper":
        return <Newspaper className="h-5 w-5 text-accent-foreground" />
      case "puzzle":
        return <Puzzle className="h-5 w-5 text-accent-foreground" />
      default:
        return <FileText className="h-5 w-5 text-accent-foreground" />
    }
  }

  return (
    <Link href={href} className="block">
      <Card
        className={cn(
          "h-full transition-all duration-200 card-hover",
          "border-border/50 bg-background/50 backdrop-blur-sm",
          "hover:shadow-md dark:hover:shadow-primary/5",
          className,
        )}
      >
        <CardHeader>
          <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-md bg-accent dark:bg-accent/50">
            {getIcon()}
          </div>
          <CardTitle className="text-xl">{title}</CardTitle>
          <CardDescription className="text-muted-foreground">{description}</CardDescription>
        </CardHeader>
        <CardContent></CardContent>
        <CardFooter>
          <div className="flex items-center text-sm text-primary">
            Explore <ArrowRight className="ml-1 h-4 w-4" />
          </div>
        </CardFooter>
      </Card>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/solution-card.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import { GitBranchPlus, ShieldCheck, CreditCard, BarChart3, CheckCircle2, RefreshCw } from "lucide-react"

interface SolutionCardProps {
  title: string
  description: string
  icon: string
  href: string
  className?: string
}

export function SolutionCard({ title, description, icon, href, className }: SolutionCardProps) {
  // Map de string para componentes de ícone
  const getIcon = () => {
    switch (icon) {
      case "git-branch-plus":
        return <GitBranchPlus className="h-5 w-5 text-primary" />
      case "shield-check":
        return <ShieldCheck className="h-5 w-5 text-primary" />
      case "credit-card":
        return <CreditCard className="h-5 w-5 text-primary" />
      case "bar-chart-3":
        return <BarChart3 className="h-5 w-5 text-primary" />
      case "check-circle-2":
        return <CheckCircle2 className="h-5 w-5 text-primary" />
      case "refresh-cw":
        return <RefreshCw className="h-5 w-5 text-primary" />
      default:
        return <GitBranchPlus className="h-5 w-5 text-primary" />
    }
  }

  return (
    <Link href={href} className="block">
      <Card
        className={cn(
          "h-full transition-all duration-200 card-hover",
          "border-border/50 bg-background/50 backdrop-blur-sm",
          "hover:shadow-md dark:hover:shadow-primary/5",
          className,
        )}
      >
        <CardHeader>
          <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 dark:bg-primary/20">
            {getIcon()}
          </div>
          <CardTitle className="text-xl">{title}</CardTitle>
          <CardDescription className="text-muted-foreground">{description}</CardDescription>
        </CardHeader>
        <CardContent></CardContent>
        <CardFooter>
          <div className="flex items-center text-sm text-primary">
            Learn more <ArrowRight className="ml-1 h-4 w-4" />
          </div>
        </CardFooter>
      </Card>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/compliance-badge.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Shield } from "lucide-react"
import { cn } from "@/lib/utils"

interface ComplianceBadgeProps {
  title: string
  href: string
  className?: string
}

export function ComplianceBadge({ title, href, className }: ComplianceBadgeProps) {
  return (
    <Link href={href}>
      <Badge
        variant="outline"
        className={cn(
          "flex items-center gap-1 px-3 py-1 text-xs transition-all",
          "border-border/50 bg-background/50 backdrop-blur-sm",
          "hover:bg-accent/50 hover:text-accent-foreground",
          "dark:hover:bg-accent/30",
          className,
        )}
      >
        <Shield className="h-3 w-3" />
        {title}
      </Badge>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isEdit="true" isMerged="true"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ModeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/supplier-analysis.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

// Dados de exemplo para fornecedores
const supplierData = [
  {
    id: 1,
    name: "SolarTech Industries",
    category: "Painéis Solares",
    reliability: 92,
    costIndex: 85,
    sustainability: 88,
    riskScore: "Baixo",
    location: "Brasil",
  },
  {
    id: 2,
    name: "PowerInverter Co.",
    category: "Inversores",
    reliability: 95,
    costIndex: 78,
    sustainability: 82,
    riskScore: "Baixo",
    location: "Alemanha",
  },
  {
    id: 3,
    name: "MountingSystems Ltd.",
    category: "Estruturas de Montagem",
    reliability: 88,
    costIndex: 92,
    sustainability: 75,
    riskScore: "Médio",
    location: "China",
  },
  {
    id: 4,
    name: "CableWorks Inc.",
    category: "Cabeamento",
    reliability: 90,
    costIndex: 95,
    sustainability: 70,
    riskScore: "Baixo",
    location: "EUA",
  },
  {
    id: 5,
    name: "BatteryStorage Systems",
    category: "Baterias",
    reliability: 87,
    costIndex: 75,
    sustainability: 80,
    riskScore: "Médio",
    location: "Coreia do Sul",
  },
]

// Dados para o gráfico de desempenho de fornecedores
const supplierPerformanceData = supplierData.map((supplier) => ({
  name: supplier.name,
  reliability: supplier.reliability,
  costEfficiency: supplier.costIndex,
  sustainability: supplier.sustainability,
}))

// Componente para análise de fornecedores
export function SupplierAnalysis() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Análise de Fornecedores</CardTitle>
          <CardDescription>
            Avaliação de desempenho e risco dos principais fornecedores na cadeia de valor fotovoltaica
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-6">
            <h3 className="text-lg font-medium mb-2">Desempenho de Fornecedores</h3>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={supplierPerformanceData} margin={{ top: 20, right: 30, left: 20, bottom: 70 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" angle={-45} textAnchor="end" height={70} />
                  <YAxis domain={[0, 100]} />
                  <Tooltip />
                  <Bar dataKey="reliability" name="Confiabilidade" fill="#4f46e5" />
                  <Bar dataKey="costEfficiency" name="Eficiência de Custo" fill="#10b981" />
                  <Bar dataKey="sustainability" name="Sustentabilidade" fill="#f59e0b" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

          <div>
            <h3 className="text-lg font-medium mb-2">Lista de Fornecedores</h3>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Fornecedor</TableHead>
                    <TableHead>Categoria</TableHead>
                    <TableHead>Localização</TableHead>
                    <TableHead>Risco</TableHead>
                    <TableHead>Confiabilidade</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {supplierData.map((supplier) => (
                    <TableRow key={supplier.id}>
                      <TableCell className="font-medium">{supplier.name}</TableCell>
                      <TableCell>{supplier.category}</TableCell>
                      <TableCell>{supplier.location}</TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            supplier.riskScore === "Baixo"
                              ? "success"
                              : supplier.riskScore === "Médio"
                                ? "warning"
                                : "destructive"
                          }
                        >
                          {supplier.riskScore}
                        </Badge>
                      </TableCell>
                      <TableCell>{supplier.reliability}%</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/cost-breakdown.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Dados de exemplo para o breakdown de custos
const costBreakdownData = [
  { name: "Painéis Solares", value: 45, color: "#4f46e5" },
  { name: "Inversores", value: 20, color: "#10b981" },
  { name: "Estruturas de Montagem", value: 15, color: "#f59e0b" },
  { name: "Instalação", value: 10, color: "#ef4444" },
  { name: "Outros Componentes", value: 10, color: "#8b5cf6" },
]

// Dados de exemplo para custos por estágio da cadeia de valor
const valueChainCostData = [
  { stage: "Extração de Matéria-Prima", percentage: 12, cost: "R$ 0,15/W" },
  { stage: "Fabricação de Células", percentage: 25, cost: "R$ 0,32/W" },
  { stage: "Montagem de Módulos", percentage: 18, cost: "R$ 0,23/W" },
  { stage: "Transporte e Logística", percentage: 8, cost: "R$ 0,10/W" },
  { stage: "Distribuição", percentage: 7, cost: "R$ 0,09/W" },
  { stage: "Instalação", percentage: 22, cost: "R$ 0,28/W" },
  { stage: "Operação e Manutenção", percentage: 8, cost: "R$ 0,10/W" },
]

// Dados de tendências de custo ao longo do tempo
const costTrendData = [
  { year: 2018, cost: 2.8 },
  { year: 2019, cost: 2.5 },
  { year: 2020, cost: 2.2 },
  { year: 2021, cost: 1.9 },
  { year: 2022, cost: 1.7 },
  { year: 2023, cost: 1.55 },
  { year: 2024, cost: 1.45 },
]

// Componente para análise de breakdown de custos
export function CostBreakdown() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Análise de Custos</CardTitle>
          <CardDescription>Breakdown detalhado dos custos ao longo da cadeia de valor fotovoltaica</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="components">
            <TabsList className="mb-4">
              <TabsTrigger value="components">Componentes</TabsTrigger>
              <TabsTrigger value="valuechain">Cadeia de Valor</TabsTrigger>
              <TabsTrigger value="trends">Tendências</TabsTrigger>
            </TabsList>

            <TabsContent value="components">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={costBreakdownData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      >
                        {costBreakdownData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip formatter={(value) => `${value}%`} />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                </div>

                <div>
                  <h3 className="text-lg font-medium mb-2">Detalhamento de Custos por Componente</h3>
                  <div className="rounded-md border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Componente</TableHead>
                          <TableHead>Percentual</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {costBreakdownData.map((item, index) => (
                          <TableRow key={index}>
                            <TableCell className="font-medium">{item.name}</TableCell>
                            <TableCell>{item.value}%</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="valuechain">
              <div>
                <h3 className="text-lg font-medium mb-2">Custos por Estágio da Cadeia de Valor</h3>
                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Estágio</TableHead>
                        <TableHead>Percentual</TableHead>
                        <TableHead>Custo Unitário</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {valueChainCostData.map((item, index) => (
                        <TableRow key={index}>
                          <TableCell className="font-medium">{item.stage}</TableCell>
                          <TableCell>{item.percentage}%</TableCell>
                          <TableCell>{item.cost}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="trends">
              <div>
                <h3 className="text-lg font-medium mb-2">Tendência de Custos (R$/W)</h3>
                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={costBreakdownData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                      >
                        {costBreakdownData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip formatter={(value) => `${value}%`} />
                      <Legend />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-4">
                  <p className="text-sm text-muted-foreground">
                    Os custos de sistemas fotovoltaicos têm diminuído consistentemente nos últimos anos, com uma redução
                    média de 10% ao ano. Esta tendência é impulsionada por avanços tecnológicos, economias de escala e
                    melhorias na cadeia de suprimentos.
                  </p>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/sustainability-metrics.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Cell,
  LineChart,
  Line,
} from "recharts"

// Dados de exemplo para métricas de sustentabilidade
const carbonFootprintData = [
  { stage: "Extração de Matéria-Prima", value: 38, unit: "gCO2eq/kWh" },
  { stage: "Fabricação", value: 25, unit: "gCO2eq/kWh" },
  { stage: "Transporte", value: 8, unit: "gCO2eq/kWh" },
  { stage: "Instalação", value: 5, unit: "gCO2eq/kWh" },
  { stage: "Operação", value: 2, unit: "gCO2eq/kWh" },
  { stage: "Fim de Vida", value: 7, unit: "gCO2eq/kWh" },
]

// Dados de exemplo para uso de recursos
const resourceUseData = [
  { resource: "Água", value: 65, benchmark: 80, unit: "L/MWh" },
  { resource: "Alumínio", value: 78, benchmark: 85, unit: "kg/MW" },
  { resource: "Silício", value: 82, benchmark: 80, unit: "kg/MW" },
  { resource: "Vidro", value: 45, benchmark: 60, unit: "kg/MW" },
  { resource: "Cobre", value: 55, benchmark: 70, unit: "kg/MW" },
  { resource: "Plásticos", value: 40, benchmark: 50, unit: "kg/MW" },
]

// Dados de exemplo para reciclabilidade
const recyclabilityData = [
  { component: "Estrutura de Alumínio", percentage: 95 },
  { component: "Vidro", percentage: 90 },
  { component: "Células de Silício", percentage: 70 },
  { component: "Componentes Eletrônicos", percentage: 60 },
  { component: "Plásticos", percentage: 40 },
  { component: "Materiais Compostos", percentage: 25 },
]

// Dados de exemplo para tendências de sustentabilidade
const sustainabilityTrendData = [
  { year: 2018, carbonIntensity: 85, waterUse: 90, recycledContent: 40 },
  { year: 2019, carbonIntensity: 80, waterUse: 85, recycledContent: 45 },
  { year: 2020, carbonIntensity: 75, waterUse: 80, recycledContent: 50 },
  { year: 2021, carbonIntensity: 70, waterUse: 75, recycledContent: 55 },
  { year: 2022, carbonIntensity: 65, waterUse: 70, recycledContent: 60 },
  { year: 2023, carbonIntensity: 60, waterUse: 65, recycledContent: 65 },
  { year: 2024, carbonIntensity: 55, waterUse: 60, recycledContent: 70 },
]

// Componente para métricas de sustentabilidade
export function SustainabilityMetrics() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Métricas de Sustentabilidade</CardTitle>
          <CardDescription>
            Análise de impacto ambiental e social ao longo da cadeia de valor fotovoltaica
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="carbon">
            <TabsList className="mb-4">
              <TabsTrigger value="carbon">Pegada de Carbono</TabsTrigger>
              <TabsTrigger value="resources">Uso de Recursos</TabsTrigger>
              <TabsTrigger value="recyclability">Reciclabilidade</TabsTrigger>
              <TabsTrigger value="trends">Tendências</TabsTrigger>
            </TabsList>

            <TabsContent value="carbon">
              <div>
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-medium">Pegada de Carbono por Estágio</h3>
                  <Badge variant="outline" className="ml-2">
                    Total: 85 gCO2eq/kWh
                  </Badge>
                </div>

                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={carbonFootprintData} margin={{ top: 20, right: 30, left: 20, bottom: 70 }}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="stage" angle={-45} textAnchor="end" height={70} />
                      <YAxis />
                      <Tooltip formatter={(value) => [`${value} gCO2eq/kWh`, "Pegada de Carbono"]} />
                      <Bar dataKey="value" fill="#10b981">
                        {carbonFootprintData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={index % 2 === 0 ? "#10b981" : "#059669"} />
                        ))}
                      </Bar>
                    </BarChart>
                  </ResponsiveContainer>
                </div>

                <div className="mt-4">
                  <p className="text-sm text-muted-foreground">
                    A pegada de carbono total de 85 gCO2eq/kWh é significativamente menor que fontes convencionais de
                    energia (carvão: ~1000 gCO2eq/kWh, gás natural: ~450 gCO2eq/kWh). A maior parte das emissões ocorre
                    nas fases iniciais da cadeia de valor.
                  </p>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="resources">
              <div>
                <h3 className="text-lg font-medium mb-4">Uso de Recursos vs. Benchmark do Setor</h3>

                <div className="space-y-6">
                  {resourceUseData.map((item, index) => (
                    <div key={index}>
                      <div className="flex items-center justify-between mb-1">
                        <span className="text-sm font-medium">{item.resource}</span>
                        <span className="text-sm text-muted-foreground">
                          {item.value}% do benchmark ({item.unit})
                        </span>
                      </div>
                      <div className="flex items-center space-x-4">
                        <div className="w-full">
                          <Progress value={item.value} className="h-2" />
                        </div>
                        <div className="w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center">
                          <div
                            className="w-2 h-2 rounded-full"
                            style={{ backgroundColor: item.value < item.benchmark ? "#10b981" : "#ef4444" }}
                          />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>

                <div className="mt-6">
                  <p className="text-sm text-muted-foreground">
                    Nosso uso de recursos está abaixo do benchmark do setor em todas as categorias principais,
                    refletindo nosso compromisso com a eficiência de recursos e processos de fabricação otimizados.
                  </p>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="recyclability">
              <div>
                <h3 className="text-lg font-medium mb-4">Reciclabilidade por Componente</h3>

                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={recyclabilityData}
                      margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
                      layout="vertical"
                    >
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis type="number" domain={[0, 100]} />
                      <YAxis dataKey="component" type="category" width={150} />
                      <Tooltip formatter={(value) => [`${value}%`, "Reciclabilidade"]} />
                      <Bar dataKey="percentage" fill="#8b5cf6">
                        {recyclabilityData.map((entry, index) => (
                          <Cell
                            key={`cell-${index}`}
                            fill={entry.percentage >= 80 ? "#10b981" : entry.percentage >= 50 ? "#f59e0b" : "#ef4444"}
                          />
                        ))}
                      </Bar>
                    </BarChart>
                  </ResponsiveContainer>
                </div>

                <div className="mt-4">
                  <p className="text-sm text-muted-foreground">
                    A reciclabilidade média dos componentes é de 63%. Estamos trabalhando em iniciativas para melhorar a
                    reciclabilidade dos plásticos e materiais compostos, que atualmente representam nossos maiores
                    desafios de fim de vida.
                  </p>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="trends">
              <div>
                <h3 className="text-lg font-medium mb-4">Tendências de Sustentabilidade (2018-2024)</h3>

                <div className="h-80">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={sustainabilityTrendData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="year" />
                      <YAxis domain={[0, 100]} />
                      <Tooltip />
                      <Line
                        type="monotone"
                        dataKey="carbonIntensity"
                        name="Intensidade de Carbono"
                        stroke="#ef4444"
                        strokeWidth={2}
                      />
                      <Line type="monotone" dataKey="waterUse" name="Uso de Água" stroke="#3b82f6" strokeWidth={2} />
                      <Line
                        type="monotone"
                        dataKey="recycledContent"
                        name="Conteúdo Reciclado"
                        stroke="#10b981"
                        strokeWidth={2}
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </div>

                <div className="mt-4">
                  <p className="text-sm text-muted-foreground">
                    Temos observado melhorias consistentes em todos os indicadores-chave de sustentabilidade desde 2018.
                    A intensidade de carbono e o uso de água diminuíram em aproximadamente 35%, enquanto o conteúdo
                    reciclado em nossos produtos aumentou em 75%.
                  </p>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/report-templates.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { FileText, BarChart2, PieChart, TrendingUp, Download, Copy, Eye } from "lucide-react"

// Tipos para os templates de relatório
interface ReportTemplate {
  id: string
  name: string
  description: string
  type: "dashboard" | "detailed" | "summary" | "custom"
  format: "pdf" | "excel" | "html" | "json"
  sections: string[]
  lastUpdated: string
  popularity: number
}

// Dados de exemplo para templates de relatório
const reportTemplatesData: ReportTemplate[] = [
  {
    id: "template-001",
    name: "Visão Geral da Cadeia de Valor",
    description: "Relatório completo com análise de todos os estágios da cadeia de valor fotovoltaica",
    type: "dashboard",
    format: "pdf",
    sections: ["Visão Geral", "Análise de Fornecedores", "Custos", "Riscos", "Sustentabilidade"],
    lastUpdated: "2024-04-15",
    popularity: 85,
  },
  {
    id: "template-002",
    name: "Análise Detalhada de Fornecedores",
    description: "Relatório detalhado sobre desempenho, riscos e custos de fornecedores",
    type: "detailed",
    format: "excel",
    sections: [
      "Perfil de Fornecedores",
      "Métricas de Desempenho",
      "Análise de Riscos",
      "Comparativo de Custos",
      "Recomendações",
    ],
    lastUpdated: "2024-04-10",
    popularity: 72,
  },
  {
    id: "template-003",
    name: "Resumo Executivo Mensal",
    description: "Resumo de alto nível para executivos com principais KPIs e insights",
    type: "summary",
    format: "pdf",
    sections: ["Resumo Executivo", "KPIs Principais", "Tendências", "Riscos Críticos", "Próximos Passos"],
    lastUpdated: "2024-04-18",
    popularity: 95,
  },
  {
    id: "template-004",
    name: "Análise de Custos e Eficiência",
    description: "Relatório focado em custos, margens e oportunidades de otimização",
    type: "detailed",
    format: "excel",
    sections: ["Breakdown de Custos", "Análise de Margens", "Benchmarks", "Oportunidades de Otimização", "Projeções"],
    lastUpdated: "2024-04-05",
    popularity: 68,
  },
  {
    id: "template-005",
    name: "Relatório de Sustentabilidade",
    description: "Análise de métricas ambientais, sociais e de governança na cadeia de valor",
    type: "custom",
    format: "html",
    sections: ["Pegada de Carbono", "Uso de Recursos", "Conformidade", "Metas ESG", "Iniciativas"],
    lastUpdated: "2024-04-12",
    popularity: 76,
  },
  {
    id: "template-006",
    name: "Análise de Riscos da Cadeia de Suprimentos",
    description: "Identificação e avaliação de riscos em toda a cadeia de suprimentos",
    type: "detailed",
    format: "pdf",
    sections: ["Mapa de Riscos", "Avaliação de Impacto", "Planos de Mitigação", "Monitoramento", "Contingências"],
    lastUpdated: "2024-04-08",
    popularity: 82,
  },
]

// Componente para templates de relatório
export function ReportTemplates() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Templates de Relatório</CardTitle>
          <CardDescription>Modelos pré-configurados para geração de relatórios da cadeia de valor</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Nome do Template</TableHead>
                  <TableHead>Tipo</TableHead>
                  <TableHead>Formato</TableHead>
                  <TableHead>Atualizado</TableHead>
                  <TableHead>Popularidade</TableHead>
                  <TableHead className="text-right">Ações</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {reportTemplatesData.map((template) => (
                  <TableRow key={template.id}>
                    <TableCell>
                      <div className="flex items-center">
                        {template.type === "dashboard" ? (
                          <BarChart2 className="h-4 w-4 mr-2 text-blue-500" />
                        ) : template.type === "detailed" ? (
                          <FileText className="h-4 w-4 mr-2 text-purple-500" />
                        ) : template.type === "summary" ? (
                          <PieChart className="h-4 w-4 mr-2 text-green-500" />
                        ) : (
                          <TrendingUp className="h-4 w-4 mr-2 text-amber-500" />
                        )}
                        <div>
                          <div className="font-medium">{template.name}</div>
                          <div className="text-xs text-muted-foreground">{template.description}</div>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant="outline"
                        className={
                          template.type === "dashboard"
                            ? "bg-blue-50 text-blue-700 dark:bg-blue-900 dark:text-blue-200"
                            : template.type === "detailed"
                              ? "bg-purple-50 text-purple-700 dark:bg-purple-900 dark:text-purple-200"
                              : template.type === "summary"
                                ? "bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-200"
                                : "bg-amber-50 text-amber-700 dark:bg-amber-900 dark:text-amber-200"
                        }
                      >
                        {template.type === "dashboard"
                          ? "Dashboard"
                          : template.type === "detailed"
                            ? "Detalhado"
                            : template.type === "summary"
                              ? "Resumo"
                              : "Personalizado"}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{template.format.toUpperCase()}</Badge>
                    </TableCell>
                    <TableCell>{new Date(template.lastUpdated).toLocaleDateString("pt-BR")}</TableCell>
                    <TableCell>
                      <div className="flex items-center">
                        <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mr-2">
                          <div
                            className="bg-blue-600 h-2.5 rounded-full dark:bg-blue-500"
                            style={{ width: `${template.popularity}%` }}
                          ></div>
                        </div>
                        <span className="text-xs">{template.popularity}%</span>
                      </div>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button variant="ghost" size="icon" title="Visualizar">
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" title="Duplicar">
                          <Copy className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" title="Baixar">
                          <Download className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Criar Novo Template</Button>
          <Button variant="outline">Importar Template</Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/value-chain/report-history.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Download, Eye, RotateCcw, Share2, FileText, BarChart2, PieChart } from "lucide-react"

// Tipos para o histórico de relatórios
interface ReportHistoryItem {
  id: string
  name: string
  template: string
  templateType: "dashboard" | "detailed" | "summary" | "custom"
  format: "pdf" | "excel" | "html" | "json"
  generatedAt: string
  generatedBy: string
  size: string
  status: "completed" | "failed" | "processing"
}

// Dados de exemplo para histórico de relatórios
const reportHistoryData: ReportHistoryItem[] = [
  {
    id: "report-001",
    name: "Análise Mensal da Cadeia de Valor - Abril 2024",
    template: "Visão Geral da Cadeia de Valor",
    templateType: "dashboard",
    format: "pdf",
    generatedAt: "2024-04-20T14:30:00",
    generatedBy: "Sistema (Agendado)",
    size: "4.2 MB",
    status: "completed",
  },
  {
    id: "report-002",
    name: "Relatório de Fornecedores Q1 2024",
    template: "Análise Detalhada de Fornecedores",
    templateType: "detailed",
    format: "excel",
    generatedAt: "2024-04-15T09:45:00",
    generatedBy: "Maria Silva",
    size: "8.7 MB",
    status: "completed",
  },
  {
    id: "report-003",
    name: "Resumo Executivo - Semana 16",
    template: "Resumo Executivo Mensal",
    templateType: "summary",
    format: "pdf",
    generatedAt: "2024-04-19T17:20:00",
    generatedBy: "João Oliveira",
    size: "1.5 MB",
    status: "completed",
  },
  {
    id: "report-004",
    name: "Análise de Custos - Março 2024",
    template: "Análise de Custos e Eficiência",
    templateType: "detailed",
    format: "excel",
    generatedAt: "2024-04-10T11:15:00",
    generatedBy: "Sistema (Agendado)",
    size: "6.3 MB",
    status: "completed",
  },
  {
    id: "report-005",
    name: "Relatório de Sustentabilidade Q1 2024",
    template: "Relatório de Sustentabilidade",
    templateType: "custom",
    format: "html",
    generatedAt: "2024-04-18T10:30:00",
    generatedBy: "Ana Souza",
    size: "3.8 MB",
    status: "processing",
  },
  {
    id: "report-006",
    name: "Análise de Riscos - Abril 2024",
    template: "Análise de Riscos da Cadeia de Suprimentos",
    templateType: "detailed",
    format: "pdf",
    generatedAt: "2024-04-17T16:45:00",
    generatedBy: "Carlos Mendes",
    size: "5.1 MB",
    status: "failed",
  },
  {
    id: "report-007",
    name: "Dashboard Semanal - Semana 15",
    template: "Visão Geral da Cadeia de Valor",
    templateType: "dashboard",
    format: "pdf",
    generatedAt: "2024-04-12T09:00:00",
    generatedBy: "Sistema (Agendado)",
    size: "3.9 MB",
    status: "completed",
  },
]

// Componente para histórico de relatórios
export function ReportHistory() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Histórico de Relatórios</CardTitle>
        <CardDescription>Relatórios gerados recentemente e seu status</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Relatório</TableHead>
                <TableHead>Gerado em</TableHead>
                <TableHead>Gerado por</TableHead>
                <TableHead>Formato</TableHead>
                <TableHead>Tamanho</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {reportHistoryData.map((report) => (
                <TableRow key={report.id}>
                  <TableCell>
                    <div className="flex items-center">
                      {report.templateType === "dashboard" ? (
                        <BarChart2 className="h-4 w-4 mr-2 text-blue-500" />
                      ) : report.templateType === "detailed" ? (
                        <FileText className="h-4 w-4 mr-2 text-purple-500" />
                      ) : report.templateType === "summary" ? (
                        <PieChart className="h-4 w-4 mr-2 text-green-500" />
                      ) : (
                        <FileText className="h-4 w-4 mr-2 text-amber-500" />
                      )}
                      <div>
                        <div className="font-medium">{report.name}</div>
                        <div className="text-xs text-muted-foreground">Template: {report.template}</div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>{new Date(report.generatedAt).toLocaleString("pt-BR")}</TableCell>
                  <TableCell>{report.generatedBy}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{report.format.toUpperCase()}</Badge>
                  </TableCell>
                  <TableCell>{report.size}</TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        report.status === "completed"
                          ? "success"
                          : report.status === "processing"
                            ? "warning"
                            : "destructive"
                      }
                    >
                      {report.status === "completed"
                        ? "Concluído"
                        : report.status === "processing"
                          ? "Processando"
                          : "Falhou"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end space-x-2">
                      {report.status === "completed" ? (
                        <>
                          <Button variant="ghost" size="icon" title="Visualizar">
                            <Eye className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" title="Baixar">
                            <Download className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" title="Compartilhar">
                            <Share2 className="h-4 w-4" />
                          </Button>
                        </>
                      ) : report.status === "failed" ? (
                        <Button variant="ghost" size="icon" title="Tentar novamente">
                          <RotateCcw className="h-4 w-4" />
                        </Button>
                      ) : null}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>

        <div className="mt-4 text-sm text-muted-foreground">
          <p>
            Mostrando os últimos 7 relatórios gerados. Para ver o histórico completo, acesse a página de arquivos de
            relatórios.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescriptreact:file="components/agent-card.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Brain, MessageSquare, Code, Lock, Activity, Zap } from "lucide-react"

interface AgentCardProps {
  name: string
  description: string
  type: "llm" | "vision" | "voice" | "multimodal"
  status: "active" | "inactive" | "training"
  capabilities: string[]
  complianceLevel: "lgpd" | "gdpr" | "both" | "none"
  onDeploy: () => void
  onConfigure: () => void
}

export function AgentCard({
  name,
  description,
  type,
  status,
  capabilities,
  complianceLevel,
  onDeploy,
  onConfigure,
}: AgentCardProps) {
  return (
    <Card className="overflow-hidden">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl">{name}</CardTitle>
          <Badge
            variant={status === "active" ? "success" : status === "training" ? "warning" : "secondary"}
            className="capitalize"
          >
            {status}
          </Badge>
        </div>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center mb-4">
          {type === "llm" && <Brain className="h-8 w-8 text-blue-500 mr-2" />}
          {type === "vision" && <Activity className="h-8 w-8 text-purple-500 mr-2" />}
          {type === "voice" && <MessageSquare className="h-8 w-8 text-green-500 mr-2" />}
          {type === "multimodal" && <Zap className="h-8 w-8 text-amber-500 mr-2" />}
          <div>
            <p className="font-medium capitalize">{type} Agent</p>
            <p className="text-sm text-muted-foreground">
              {type === "llm" && "Natural language processing"}
              {type === "vision" && "Computer vision capabilities"}
              {type === "voice" && "Speech recognition and synthesis"}
              {type === "multimodal" && "Multiple input/output modalities"}
            </p>
          </div>
        </div>

        <div className="space-y-2">
          <div className="flex items-start gap-2">
            <Code className="h-4 w-4 mt-0.5 text-muted-foreground" />
            <div>
              <p className="text-sm font-medium">Capabilities</p>
              <div className="flex flex-wrap gap-1 mt-1">
                {capabilities.map((capability, index) => (
                  <Badge key={index} variant="outline" className="text-xs">
                    {capability}
                  </Badge>
                ))}
              </div>
            </div>
          </div>

          <div className="flex items-start gap-2">
            <Lock className="h-4 w-4 mt-0.5 text-muted-foreground" />
            <div>
              <p className="text-sm font-medium">Compliance</p>
              <p className="text-xs text-muted-foreground">
                {complianceLevel === "lgpd" && "LGPD Compliant"}
                {complianceLevel === "gdpr" && "GDPR Compliant"}
                {complianceLevel === "both" && "LGPD & GDPR Compliant"}
                {complianceLevel === "none" && "No compliance certifications"}
              </p>
            </div>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={onConfigure}>
          Configure
        </Button>
        <Button onClick={onDeploy}>Deploy Agent</Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/mcp-server-list.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Server, Activity, Clock, RefreshCw } from "lucide-react"

interface MCPServer {
  id: string
  name: string
  status: "online" | "offline" | "degraded"
  type: "llm" | "vision" | "voice" | "orchestration"
  location: "cloud" | "on-premise"
  lastPing: string
  load: number
}

interface MCPServerListProps {
  servers: MCPServer[]
  onRefresh: () => void
  onServerClick: (serverId: string) => void
}

export function MCPServerList({ servers, onRefresh, onServerClick }: MCPServerListProps) {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-xl">MCP Servers</CardTitle>
            <CardDescription>Most Critical Path servers for model communication</CardDescription>
          </div>
          <Button variant="outline" size="sm" onClick={onRefresh}>
            <RefreshCw className="h-4 w-4 mr-2" />
            Refresh
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {servers.map((server) => (
            <div
              key={server.id}
              className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent/50 cursor-pointer transition-colors"
              onClick={() => onServerClick(server.id)}
            >
              <div className="flex items-center gap-3">
                <div
                  className={`p-2 rounded-md ${
                    server.type === "llm"
                      ? "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300"
                      : server.type === "vision"
                        ? "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300"
                        : server.type === "voice"
                          ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
                          : "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300"
                  }`}
                >
                  <Server className="h-5 w-5" />
                </div>
                <div>
                  <p className="font-medium">{server.name}</p>
                  <div className="flex items-center text-xs text-muted-foreground">
                    <Badge variant="outline" className="mr-2 capitalize">
                      {server.type}
                    </Badge>
                    <span className="capitalize">{server.location}</span>
                  </div>
                </div>
              </div>
              <div className="flex items-center gap-4">
                <div className="flex flex-col items-end">
                  <div className="flex items-center">
                    <Clock className="h-3 w-3 mr-1 text-muted-foreground" />
                    <span className="text-xs text-muted-foreground">{server.lastPing}</span>
                  </div>
                  <div className="flex items-center mt-1">
                    <Activity className="h-3 w-3 mr-1 text-muted-foreground" />
                    <span className="text-xs text-muted-foreground">Load: {server.load}%</span>
                  </div>
                </div>
                <Badge
                  variant={
                    server.status === "online" ? "success" : server.status === "degraded" ? "warning" : "destructive"
                  }
                  className="capitalize"
                >
                  {server.status}
                </Badge>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/compliance-dashboard.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Shield, AlertTriangle, CheckCircle, XCircle, Info } from "lucide-react"
import { Progress } from "@/components/ui/progress"

interface ComplianceItem {
  id: string
  name: string
  category: "data-privacy" | "security" | "governance" | "documentation"
  status: "compliant" | "non-compliant" | "partial" | "not-applicable"
  regulation: "lgpd" | "gdpr" | "both"
  lastChecked: string
  description: string
}

interface ComplianceDashboardProps {
  items: ComplianceItem[]
  lgpdScore: number
  gdprScore: number
  onRefreshCompliance: () => void
  onItemClick: (itemId: string) => void
}

export function ComplianceDashboard({
  items,
  lgpdScore,
  gdprScore,
  onRefreshCompliance,
  onItemClick,
}: ComplianceDashboardProps) {
  const categoryIcons = {
    "data-privacy": <Shield className="h-5 w-5 text-blue-500" />,
    security: <Shield className="h-5 w-5 text-green-500" />,
    governance: <Shield className="h-5 w-5 text-purple-500" />,
    documentation: <Shield className="h-5 w-5 text-amber-500" />,
  }

  const statusIcons = {
    compliant: <CheckCircle className="h-4 w-4 text-green-500" />,
    "non-compliant": <XCircle className="h-4 w-4 text-red-500" />,
    partial: <AlertTriangle className="h-4 w-4 text-yellow-500" />,
    "not-applicable": <Info className="h-4 w-4 text-gray-500" />,
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Compliance Dashboard</CardTitle>
              <CardDescription>LGPD and GDPR compliance status</CardDescription>
            </div>
            <Button variant="outline" size="sm" onClick={onRefreshCompliance}>
              Refresh Status
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium">LGPD Compliance</h3>
                <span className="text-sm font-medium">{lgpdScore}%</span>
              </div>
              <Progress value={lgpdScore} className="h-2" />
              <p className="text-xs text-muted-foreground">
                {lgpdScore >= 90
                  ? "Excellent compliance level"
                  : lgpdScore >= 70
                    ? "Good compliance level, some improvements needed"
                    : "Significant compliance gaps need to be addressed"}
              </p>
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium">GDPR Compliance</h3>
                <span className="text-sm font-medium">{gdprScore}%</span>
              </div>
              <Progress value={gdprScore} className="h-2" />
              <p className="text-xs text-muted-foreground">
                {gdprScore >= 90
                  ? "Excellent compliance level"
                  : gdprScore >= 70
                    ? "Good compliance level, some improvements needed"
                    : "Significant compliance gaps need to be addressed"}
              </p>
            </div>
          </div>

          <div className="space-y-4">
            <h3 className="text-sm font-medium">Compliance Items</h3>
            {items.map((item) => (
              <div
                key={item.id}
                className="flex items-start justify-between p-3 border rounded-lg hover:bg-accent/50 cursor-pointer transition-colors"
                onClick={() => onItemClick(item.id)}
              >
                <div className="flex items-start gap-3">
                  <div className="mt-0.5">{categoryIcons[item.category]}</div>
                  <div>
                    <p className="font-medium">{item.name}</p>
                    <p className="text-xs text-muted-foreground mt-1">{item.description}</p>
                    <div className="flex items-center mt-2">
                      <Badge
                        variant={
                          item.regulation === "lgpd" ? "default" : item.regulation === "gdpr" ? "secondary" : "outline"
                        }
                        className="mr-2 text-xs"
                      >
                        {item.regulation === "lgpd" ? "LGPD" : item.regulation === "gdpr" ? "GDPR" : "LGPD & GDPR"}
                      </Badge>
                      <span className="text-xs text-muted-foreground">Last checked: {item.lastChecked}</span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center">
                  {statusIcons[item.status]}
                  <span className="ml-1 text-xs capitalize">{item.status.replace("-", " ")}</span>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isEdit="true" isMerged="true"
import * as React from "react"

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

const Progress = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    value?: number
    max?: number
  }
>(({ className, value, max = 100, ...props }, ref) => (
  <div ref={ref} className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...props}>
    <div
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </div>
))
Progress.displayName = "Progress"

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

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

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

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

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

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

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

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

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

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

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

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

export { Alert, AlertTitle, AlertDescription, alertVariants }
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
    --success: 142.1 76.2% 36.3%;
    --success-foreground: 355.7 100% 97.3%;
    --warning: 38 92% 50%;
    --warning-foreground: 48 96% 89%;
    --info: 221.2 83.2% 53.3%;
    --info-foreground: 210 40% 98%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --success: 142.1 70.6% 45.3%;
    --success-foreground: 144.9 80.4% 10%;
    --warning: 48 96% 89%;
    --warning-foreground: 38 92% 50%;
    --info: 217.2 91.2% 59.8%;
    --info-foreground: 222.2 47.4% 11.2%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        success: {
          DEFAULT: "hsl(var(--success))",
          foreground: "hsl(var(--success-foreground))",
        },
        warning: {
          DEFAULT: "hsl(var(--warning))",
          foreground: "hsl(var(--warning-foreground))",
        },
        info: {
          DEFAULT: "hsl(var(--info))",
          foreground: "hsl(var(--info-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isEdit="true" isMerged="true"
"use client"

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

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

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

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

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

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

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

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

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

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

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

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/notifications/notification-center.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Bell, BellOff, Check, Filter, Settings, Trash2, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { ScrollArea } from "@/components/ui/scroll-area"
import { NotificationItem } from "@/components/notifications/notification-item"
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import type { Notification } from "@/types/notifications"

// Mock data for notifications
const mockNotifications: Notification[] = [
  {
    id: "notif-001",
    title: "Agent Offline",
    message: "Credit Analysis Agent has been offline for more than 5 minutes",
    timestamp: new Date(Date.now() - 5 * 60 * 1000).toISOString(),
    type: "error",
    source: "agent",
    sourceId: "agent-001",
    read: false,
    actionUrl: "/agents/agent-001",
    category: "availability",
  },
  {
    id: "notif-002",
    title: "High Latency Detected",
    message: "Customer Support Agent is experiencing response times above threshold (3.5s)",
    timestamp: new Date(Date.now() - 15 * 60 * 1000).toISOString(),
    type: "warning",
    source: "agent",
    sourceId: "agent-002",
    read: false,
    actionUrl: "/agents/agent-002",
    category: "performance",
  },
  {
    id: "notif-003",
    title: "Compliance Check Failed",
    message: "LGPD compliance check failed for Document Processing Agent",
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
    type: "error",
    source: "agent",
    sourceId: "agent-003",
    read: false,
    actionUrl: "/agents/agent-003/compliance",
    category: "compliance",
  },
  {
    id: "notif-004",
    title: "Resource Usage Alert",
    message: "Voice Recognition Agent is using 95% of allocated memory",
    timestamp: new Date(Date.now() - 45 * 60 * 1000).toISOString(),
    type: "warning",
    source: "agent",
    sourceId: "agent-004",
    read: true,
    actionUrl: "/agents/agent-004",
    category: "resources",
  },
  {
    id: "notif-005",
    title: "New Agent Version Available",
    message: "A new version of the LLaMA model is available for your agents",
    timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
    type: "info",
    source: "system",
    sourceId: "model-llama",
    read: true,
    actionUrl: "/models",
    category: "updates",
  },
  {
    id: "notif-006",
    title: "Agent Created Successfully",
    message: "New ESG Analysis Agent has been created and is ready to use",
    timestamp: new Date(Date.now() - 3 * 60 * 60 * 1000).toISOString(),
    type: "success",
    source: "agent",
    sourceId: "agent-005",
    read: true,
    actionUrl: "/agents/agent-005",
    category: "lifecycle",
  },
  {
    id: "notif-007",
    title: "MCP Server Connection Issue",
    message: "Primary MCP server is experiencing connectivity issues",
    timestamp: new Date(Date.now() - 10 * 60 * 1000).toISOString(),
    type: "error",
    source: "system",
    sourceId: "mcp-001",
    read: false,
    actionUrl: "/mcp/servers",
    category: "infrastructure",
  },
  {
    id: "notif-008",
    title: "High Error Rate",
    message: "Government Programs Agent has a 15% error rate in the last hour",
    timestamp: new Date(Date.now() - 55 * 60 * 1000).toISOString(),
    type: "warning",
    source: "agent",
    sourceId: "agent-006",
    read: false,
    actionUrl: "/agents/agent-006",
    category: "performance",
  },
  {
    id: "notif-009",
    title: "Scheduled Maintenance",
    message: "System maintenance scheduled for tomorrow at 02:00 AM",
    timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(),
    type: "info",
    source: "system",
    sourceId: "system",
    read: true,
    actionUrl: "/system/maintenance",
    category: "maintenance",
  },
  {
    id: "notif-010",
    title: "Agent Training Complete",
    message: "Custom model training for Financial Advisor Agent completed successfully",
    timestamp: new Date(Date.now() - 30 * 60 * 1000).toISOString(),
    type: "success",
    source: "agent",
    sourceId: "agent-007",
    read: false,
    actionUrl: "/agents/agent-007",
    category: "training",
  },
]

export function NotificationCenter() {
  const [notifications, setNotifications] = useState<Notification[]>(mockNotifications)
  const [activeFilters, setActiveFilters] = useState<string[]>([])

  const unreadCount = notifications.filter((notif) => !notif.read).length

  const errorCount = notifications.filter((notif) => notif.type === "error" && !notif.read).length
  const warningCount = notifications.filter((notif) => notif.type === "warning" && !notif.read).length
  const infoCount = notifications.filter(
    (notif) => (notif.type === "info" || notif.type === "success") && !notif.read,
  ).length

  const markAsRead = (id: string) => {
    setNotifications(notifications.map((notif) => (notif.id === id ? { ...notif, read: true } : notif)))
  }

  const markAllAsRead = () => {
    setNotifications(notifications.map((notif) => ({ ...notif, read: true })))
  }

  const clearAllNotifications = () => {
    setNotifications([])
  }

  const removeNotification = (id: string) => {
    setNotifications(notifications.filter((notif) => notif.id !== id))
  }

  const toggleFilter = (filter: string) => {
    if (activeFilters.includes(filter)) {
      setActiveFilters(activeFilters.filter((f) => f !== filter))
    } else {
      setActiveFilters([...activeFilters, filter])
    }
  }

  const filteredNotifications = notifications.filter((notif) => {
    if (activeFilters.length === 0) return true
    return activeFilters.includes(notif.type) || activeFilters.includes(notif.category)
  })

  // Group notifications by date
  const today = new Date().toDateString()
  const yesterday = new Date(Date.now() - 86400000).toDateString()

  const groupedNotifications = {
    today: filteredNotifications.filter((notif) => new Date(notif.timestamp).toDateString() === today),
    yesterday: filteredNotifications.filter((notif) => new Date(notif.timestamp).toDateString() === yesterday),
    older: filteredNotifications.filter(
      (notif) =>
        new Date(notif.timestamp).toDateString() !== today && new Date(notif.timestamp).toDateString() !== yesterday,
    ),
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="icon" className="relative">
          {unreadCount > 0 ? (
            <>
              <Bell className="h-5 w-5" />
              <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-xs text-destructive-foreground">
                {unreadCount}
              </span>
            </>
          ) : (
            <Bell className="h-5 w-5" />
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[380px] p-0" align="end">
        <div className="flex items-center justify-between p-4 border-b">
          <h3 className="font-semibold">Notifications</h3>
          <div className="flex items-center gap-2">
            {unreadCount > 0 && (
              <Button variant="ghost" size="sm" onClick={markAllAsRead}>
                <Check className="h-4 w-4 mr-1" />
                Mark all read
              </Button>
            )}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <div className="p-2">
                  <div className="font-medium text-sm mb-2">Filter by Type</div>
                  <div className="flex flex-wrap gap-1 mb-3">
                    <Badge
                      variant={activeFilters.includes("error") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("error")}
                    >
                      Errors
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("warning") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("warning")}
                    >
                      Warnings
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("info") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("info")}
                    >
                      Info
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("success") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("success")}
                    >
                      Success
                    </Badge>
                  </div>

                  <div className="font-medium text-sm mb-2">Filter by Category</div>
                  <div className="flex flex-wrap gap-1">
                    <Badge
                      variant={activeFilters.includes("performance") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("performance")}
                    >
                      Performance
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("availability") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("availability")}
                    >
                      Availability
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("compliance") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("compliance")}
                    >
                      Compliance
                    </Badge>
                    <Badge
                      variant={activeFilters.includes("resources") ? "default" : "outline"}
                      className="cursor-pointer"
                      onClick={() => toggleFilter("resources")}
                    >
                      Resources
                    </Badge>
                  </div>
                </div>
                {activeFilters.length > 0 && (
                  <div className="border-t px-2 py-2">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="w-full justify-start text-xs"
                      onClick={() => setActiveFilters([])}
                    >
                      <X className="h-3 w-3 mr-1" />
                      Clear filters
                    </Button>
                  </div>
                )}
              </DropdownMenuContent>
            </DropdownMenu>
            <Button variant="ghost" size="icon" onClick={clearAllNotifications}>
              <Trash2 className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="/settings/notifications">
                <Settings className="h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>

        <Tabs defaultValue="all">
          <TabsList className="grid grid-cols-4 w-full rounded-none border-b">
            <TabsTrigger value="all" className="text-xs">
              All
              {unreadCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {unreadCount}
                </Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="errors" className="text-xs">
              Errors
              {errorCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {errorCount}
                </Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="warnings" className="text-xs">
              Warnings
              {warningCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {warningCount}
                </Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="info" className="text-xs">
              Info
              {infoCount > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {infoCount}
                </Badge>
              )}
            </TabsTrigger>
          </TabsList>

          <ScrollArea className="h-[400px]">
            <TabsContent value="all" className="m-0">
              {filteredNotifications.length > 0 ? (
                <div>
                  {groupedNotifications.today.length > 0 && (
                    <div>
                      <div className="px-4 py-2 text-xs font-medium text-muted-foreground bg-muted/50">Today</div>
                      {groupedNotifications.today.map((notification) => (
                        <NotificationItem
                          key={notification.id}
                          notification={notification}
                          onMarkAsRead={markAsRead}
                          onRemove={removeNotification}
                        />
                      ))}
                    </div>
                  )}

                  {groupedNotifications.yesterday.length > 0 && (
                    <div>
                      <div className="px-4 py-2 text-xs font-medium text-muted-foreground bg-muted/50">Yesterday</div>
                      {groupedNotifications.yesterday.map((notification) => (
                        <NotificationItem
                          key={notification.id}
                          notification={notification}
                          onMarkAsRead={markAsRead}
                          onRemove={removeNotification}
                        />
                      ))}
                    </div>
                  )}

                  {groupedNotifications.older.length > 0 && (
                    <div>
                      <div className="px-4 py-2 text-xs font-medium text-muted-foreground bg-muted/50">Older</div>
                      {groupedNotifications.older.map((notification) => (
                        <NotificationItem
                          key={notification.id}
                          notification={notification}
                          onMarkAsRead={markAsRead}
                          onRemove={removeNotification}
                        />
                      ))}
                    </div>
                  )}
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center h-[300px] text-center p-4">
                  <BellOff className="h-8 w-8 text-muted-foreground mb-2" />
                  <h4 className="font-medium">No notifications</h4>
                  <p className="text-sm text-muted-foreground mt-1">
                    {activeFilters.length > 0 ? "No notifications match your current filters" : "You're all caught up!"}
                  </p>
                </div>
              )}
            </TabsContent>

            <TabsContent value="errors" className="m-0">
              {filteredNotifications.filter((n) => n.type === "error").length > 0 ? (
                filteredNotifications
                  .filter((n) => n.type === "error")
                  .map((notification) => (
                    <NotificationItem
                      key={notification.id}
                      notification={notification}
                      onMarkAsRead={markAsRead}
                      onRemove={removeNotification}
                    />
                  ))
              ) : (
                <div className="flex flex-col items-center justify-center h-[300px] text-center p-4">
                  <BellOff className="h-8 w-8 text-muted-foreground mb-2" />
                  <h4 className="font-medium">No error notifications</h4>
                  <p className="text-sm text-muted-foreground mt-1">Everything seems to be working correctly</p>
                </div>
              )}
            </TabsContent>

            <TabsContent value="warnings" className="m-0">
              {filteredNotifications.filter((n) => n.type === "warning").length > 0 ? (
                filteredNotifications
                  .filter((n) => n.type === "warning")
                  .map((notification) => (
                    <NotificationItem
                      key={notification.id}
                      notification={notification}
                      onMarkAsRead={markAsRead}
                      onRemove={removeNotification}
                    />
                  ))
              ) : (
                <div className="flex flex-col items-center justify-center h-[300px] text-center p-4">
                  <BellOff className="h-8 w-8 text-muted-foreground mb-2" />
                  <h4 className="font-medium">No warning notifications</h4>
                  <p className="text-sm text-muted-foreground mt-1">No warnings have been detected</p>
                </div>
              )}
            </TabsContent>

            <TabsContent value="info" className="m-0">
              {filteredNotifications.filter((n) => n.type === "info" || n.type === "success").length > 0 ? (
                filteredNotifications
                  .filter((n) => n.type === "info" || n.type === "success")
                  .map((notification) => (
                    <NotificationItem
                      key={notification.id}
                      notification={notification}
                      onMarkAsRead={markAsRead}
                      onRemove={removeNotification}
                    />
                  ))
              ) : (
                <div className="flex flex-col items-center justify-center h-[300px] text-center p-4">
                  <BellOff className="h-8 w-8 text-muted-foreground mb-2" />
                  <h4 className="font-medium">No info notifications</h4>
                  <p className="text-sm text-muted-foreground mt-1">You have no informational notifications</p>
                </div>
              )}
            </TabsContent>
          </ScrollArea>
        </Tabs>

        <div className="p-2 border-t">
          <Button variant="outline" size="sm" className="w-full" asChild>
            <a href="/notifications">View all notifications</a>
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="components/notifications/notification-item.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { AlertCircle, AlertTriangle, Check, CheckCircle, ChevronDown, ChevronUp, Info, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { cn } from "@/lib/utils"
import type { Notification } from "@/types/notifications"

interface NotificationItemProps {
  notification: Notification
  onMarkAsRead: (id: string) => void
  onRemove: (id: string) => void
}

export function NotificationItem({ notification, onMarkAsRead, onRemove }: NotificationItemProps) {
  const [isOpen, setIsOpen] = useState(false)

  const getIcon = () => {
    switch (notification.type) {
      case "error":
        return <AlertCircle className="h-5 w-5 text-destructive" />
      case "warning":
        return <AlertTriangle className="h-5 w-5 text-warning" />
      case "success":
        return <CheckCircle className="h-5 w-5 text-success" />
      case "info":
      default:
        return <Info className="h-5 w-5 text-primary" />
    }
  }

  const getTimeAgo = (timestamp: string) => {
    const now = new Date()
    const notifTime = new Date(timestamp)
    const diffMs = now.getTime() - notifTime.getTime()
    const diffSecs = Math.floor(diffMs / 1000)
    const diffMins = Math.floor(diffSecs / 60)
    const diffHours = Math.floor(diffMins / 60)
    const diffDays = Math.floor(diffHours / 24)

    if (diffSecs < 60) return `${diffSecs}s ago`
    if (diffMins < 60) return `${diffMins}m ago`
    if (diffHours < 24) return `${diffHours}h ago`
    if (diffDays === 1) return `Yesterday`
    return `${diffDays}d ago`
  }

  const getCategoryLabel = (category: string) => {
    return category.charAt(0).toUpperCase() + category.slice(1).replace(/-/g, " ")
  }

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className={cn("border-b transition-colors", !notification.read ? "bg-muted/30" : "", isOpen ? "bg-muted/50" : "")}
    >
      <div className="flex items-start p-4">
        <div className="flex-shrink-0 mr-3 mt-0.5">{getIcon()}</div>
        <div className="flex-grow min-w-0">
          <div className="flex items-start justify-between gap-2">
            <div>
              <h4 className="font-medium text-sm">{notification.title}</h4>
              <p className="text-sm text-muted-foreground line-clamp-2 mt-0.5">{notification.message}</p>
            </div>
            <div className="flex-shrink-0 flex items-center">
              <Button
                variant="ghost"
                size="icon"
                className="h-7 w-7"
                onClick={(e) => {
                  e.stopPropagation()
                  onRemove(notification.id)
                }}
              >
                <Trash2 className="h-4 w-4" />
                <span className="sr-only">Remove</span>
              </Button>
            </div>
          </div>

          <div className="flex items-center justify-between mt-2">
            <div className="flex items-center gap-2">
              <span className="text-xs text-muted-foreground">{getTimeAgo(notification.timestamp)}</span>
              <Badge variant="outline" className="text-xs">
                {getCategoryLabel(notification.category)}
              </Badge>
            </div>

            <div className="flex items-center gap-1">
              {!notification.read && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-7 px-2 text-xs"
                  onClick={(e) => {
                    e.stopPropagation()
                    onMarkAsRead(notification.id)
                  }}
                >
                  <Check className="h-3 w-3 mr-1" />
                  Mark read
                </Button>
              )}

              <CollapsibleTrigger asChild>
                <Button variant="ghost" size="icon" className="h-7 w-7">
                  {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                </Button>
              </CollapsibleTrigger>
            </div>
          </div>
        </div>
      </div>

      <CollapsibleContent>
        <div className="px-4 pb-4 pt-0">
          <div className="bg-background rounded-md p-3 text-sm">
            <div className="grid grid-cols-2 gap-2 mb-3">
              <div>
                <p className="text-xs text-muted-foreground">Source</p>
                <p className="font-medium">{notification.source === "agent" ? "Agent" : "System"}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">ID</p>
                <p className="font-medium font-mono text-xs">{notification.sourceId}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Time</p>
                <p className="font-medium">{new Date(notification.timestamp).toLocaleString()}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">Status</p>
                <p className="font-medium">{notification.read ? "Read" : "Unread"}</p>
              </div>
            </div>

            <Button asChild className="w-full">
              <Link href={notification.actionUrl}>View Details</Link>
            </Button>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}
[V0_FILE]typescriptreact:file="app/settings/notifications/page.tsx" isMerged="true"
import { ModeToggle } from "@/components/mode-toggle"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { NotificationRulesList } from "@/components/notifications/notification-rules-list"

export default function NotificationSettingsPage() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b border-border/10 bg-background/60 backdrop-blur-xl supports-[backdrop-filter]:bg-background/30">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-xl">
              <div className="relative w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-emerald-400 via-pink-400 to-yellow-300">
                <div className="absolute inset-0.5 rounded-[4px] bg-background/80 backdrop-blur-sm flex items-center justify-center">
                  <span className="text-lg font-bold">E</span>
                </div>
              </div>
              <span>Eos Solar Payments</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <ModeToggle />
            <Button
              asChild
              variant="outline"
              className="border-border/50 bg-background/50 backdrop-blur-sm hover:bg-background/80"
            >
              <Link href="/dashboard">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Dashboard
              </Link>
            </Button>
          </div>
        </div>
      </header>

      <main className="container py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Notification Settings</h1>
          <p className="text-muted-foreground">
            Configure how and when you receive notifications about your agents and system events
          </p>
        </div>

        <Tabs defaultValue="channels">
          <TabsList className="mb-6">
            <TabsTrigger value="channels">Notification Channels</TabsTrigger>
            <TabsTrigger value="rules">Notification Rules</TabsTrigger>
            <TabsTrigger value="preferences">Preferences</TabsTrigger>
          </TabsList>

          <TabsContent value="channels">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>In-App Notifications</CardTitle>
                  <CardDescription>Configure notifications within the application</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="in-app-enabled">Enable In-App Notifications</Label>
                      <p className="text-sm text-muted-foreground">Receive notifications in the notification center</p>
                    </div>
                    <Switch id="in-app-enabled" defaultChecked />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="in-app-max">Maximum Notifications</Label>
                    <Select defaultValue="100">
                      <SelectTrigger id="in-app-max">
                        <SelectValue placeholder="Select maximum number" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="50">50 notifications</SelectItem>
                        <SelectItem value="100">100 notifications</SelectItem>
                        <SelectItem value="200">200 notifications</SelectItem>
                        <SelectItem value="500">500 notifications</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      Older notifications will be automatically removed when this limit is reached
                    </p>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="in-app-retention">Retention Period</Label>
                    <Select defaultValue="30">
                      <SelectTrigger id="in-app-retention">
                        <SelectValue placeholder="Select retention period" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="7">7 days</SelectItem>
                        <SelectItem value="14">14 days</SelectItem>
                        <SelectItem value="30">30 days</SelectItem>
                        <SelectItem value="90">90 days</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      Notifications older than this will be automatically removed
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Email Notifications</CardTitle>
                  <CardDescription>Configure email delivery of important notifications</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="email-enabled">Enable Email Notifications</Label>
                      <p className="text-sm text-muted-foreground">Receive important notifications via email</p>
                    </div>
                    <Switch id="email-enabled" defaultChecked />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email-address">Email Address</Label>
                    <Input id="email-address" type="email" placeholder="your@email.com" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email-frequency">Delivery Frequency</Label>
                    <Select defaultValue="immediate">
                      <SelectTrigger id="email-frequency">
                        <SelectValue placeholder="Select frequency" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="immediate">Immediate (as they occur)</SelectItem>
                        <SelectItem value="hourly">Hourly digest</SelectItem>
                        <SelectItem value="daily">Daily digest</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      How frequently you want to receive email notifications
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>SMS Notifications</CardTitle>
                  <CardDescription>Configure SMS alerts for critical notifications</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="sms-enabled">Enable SMS Notifications</Label>
                      <p className="text-sm text-muted-foreground">Receive critical alerts via SMS</p>
                    </div>
                    <Switch id="sms-enabled" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="phone-number">Phone Number</Label>
                    <Input id="phone-number" type="tel" placeholder="+1 (555) 123-4567" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="sms-level">Notification Level</Label>
                    <Select defaultValue="critical">
                      <SelectTrigger id="sms-level">
                        <SelectValue placeholder="Select level" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="critical">Critical only</SelectItem>
                        <SelectItem value="high">High and Critical</SelectItem>
                        <SelectItem value="all">All notifications</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-xs text-muted-foreground">
                      Which severity levels should trigger SMS notifications
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Webhook Notifications</CardTitle>
                  <CardDescription>Send notifications to external systems via webhooks</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label htmlFor="webhook-enabled">Enable Webhook Notifications</Label>
                      <p className="text-sm text-muted-foreground">Send notifications to external systems</p>
                    </div>
                    <Switch id="webhook-enabled" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="webhook-url">Webhook URL</Label>
                    <Input id="webhook-url" type="url" placeholder="https://example.com/webhook" />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="webhook-secret">Webhook Secret</Label>
                    <Input id="webhook-secret" type="password" />
                    <p className="text-xs text-muted-foreground">Used to sign the webhook payload for verification</p>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="webhook-format">Payload Format</Label>
                    <Select defaultValue="json">
                      <SelectTrigger id="webhook-format">
                        <SelectValue placeholder="Select format" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="json">JSON</SelectItem>
                        <SelectItem value="xml">XML</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="rules">
            <Card>
              <CardHeader>
                <CardTitle>Notification Rules</CardTitle>
                <CardDescription>Configure which events trigger notifications</CardDescription>
              </CardHeader>
              <CardContent>
                <NotificationRulesList />
              </CardContent>
              <CardFooter>
                <Button className="ml-auto">Add New Rule</Button>
              </CardFooter>
            </Card>
          </TabsContent>

          <TabsContent value="preferences">
            <Card>
              <CardHeader>
                <CardTitle>General Preferences</CardTitle>
                <CardDescription>Configure your notification preferences</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-4">
                  <h3 className="text-sm font-medium">Notification Types</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="flex items-center space-x-2">
                      <Switch id="error-notifications" defaultChecked />
                      <Label htmlFor="error-notifications">Error Notifications</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="warning-notifications" defaultChecked />
                      <Label htmlFor="warning-notifications">Warning Notifications</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="info-notifications" defaultChecked />
                      <Label htmlFor="info-notifications">Info Notifications</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="success-notifications" defaultChecked />
                      <Label htmlFor="success-notifications">Success Notifications</Label>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h3 className="text-sm font-medium">Notification Categories</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="flex items-center space-x-2">
                      <Switch id="performance-notifications" defaultChecked />
                      <Label htmlFor="performance-notifications">Performance</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="availability-notifications" defaultChecked />
                      <Label htmlFor="availability-notifications">Availability</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="compliance-notifications" defaultChecked />
                      <Label htmlFor="compliance-notifications">Compliance</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="resources-notifications" defaultChecked />
                      <Label htmlFor="resources-notifications">Resources</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="security-notifications" defaultChecked />
                      <Label htmlFor="security-notifications">Security</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Switch id="updates-notifications" defaultChecked />
                      <Label htmlFor="updates-notifications">Updates</Label>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h3 className="text-sm font-medium">Quiet Hours</h3>
                  <p className="text-sm text-muted-foreground">
                    During quiet hours, only critical notifications will be sent via email or SMS
                  </p>
                  <div className="flex items-center space-x-2">
                    <Switch id="quiet-hours-enabled" />
                    <Label htmlFor="quiet-hours-enabled">Enable Quiet Hours</Label>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="quiet-hours-start">Start Time</Label>
                      <Input id="quiet-hours-start" type="time" defaultValue="22:00" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="quiet-hours-end">End Time</Label>
                      <Input id="quiet-hours-end" type="time" defaultValue="07:00" />
                    </div>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline">Reset to Defaults</Button>
                <Button>Save Preferences</Button>
              </CardFooter>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/notifications/notification-rules-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Pencil, Trash2 } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Mock data for notification rules
const initialRules = [
  {
    id: "rule-001",
    name: "Agent Offline Alert",
    description: "Alert when any agent is offline for more than 5 minutes",
    event: "agent.status.offline",
    condition: "duration > 5 minutes",
    channels: ["in-app", "email"],
    severity: "critical",
    enabled: true,
  },
  {
    id: "rule-002",
    name: "High Latency Warning",
    description: "Warning when agent response time exceeds threshold",
    event: "agent.performance.latency",
    condition: "value > 3 seconds",
    channels: ["in-app"],
    severity: "warning",
    enabled: true,
  },
  {
    id: "rule-003",
    name: "Compliance Check Failure",
    description: "Alert when a compliance check fails",
    event: "agent.compliance.check.failed",
    condition: "any",
    channels: ["in-app", "email", "webhook"],
    severity: "critical",
    enabled: true,
  },
  {
    id: "rule-004",
    name: "Resource Usage Alert",
    description: "Alert when agent resource usage is high",
    event: "agent.resources.usage",
    condition: "value > 90%",
    channels: ["in-app"],
    severity: "warning",
    enabled: true,
  },
  {
    id: "rule-005",
    name: "New Model Version",
    description: "Notification when new model versions are available",
    event: "system.model.new_version",
    condition: "any",
    channels: ["in-app"],
    severity: "info",
    enabled: true,
  },
  {
    id: "rule-006",
    name: "Agent Creation Success",
    description: "Notification when a new agent is created",
    event: "agent.lifecycle.created",
    condition: "any",
    channels: ["in-app"],
    severity: "success",
    enabled: false,
  },
  {
    id: "rule-007",
    name: "MCP Server Alert",
    description: "Alert when MCP server has connectivity issues",
    event: "system.mcp.connectivity",
    condition: "status = error",
    channels: ["in-app", "email", "sms"],
    severity: "critical",
    enabled: true,
  },
]

export function NotificationRulesList() {
  const [rules, setRules] = useState(initialRules)

  const toggleRuleStatus = (id: string) => {
    setRules(rules.map((rule) => (rule.id === id ? { ...rule, enabled: !rule.enabled } : rule)))
  }

  const getSeverityBadge = (severity: string) => {
    switch (severity) {
      case "critical":
        return <Badge variant="destructive">Critical</Badge>
      case "warning":
        return <Badge variant="warning">Warning</Badge>
      case "success":
        return <Badge variant="success">Success</Badge>
      case "info":
      default:
        return <Badge variant="secondary">Info</Badge>
    }
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Select defaultValue="all">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by severity" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Severities</SelectItem>
              <SelectItem value="critical">Critical</SelectItem>
              <SelectItem value="warning">Warning</SelectItem>
              <SelectItem value="info">Info</SelectItem>
              <SelectItem value="success">Success</SelectItem>
            </SelectContent>
          </Select>

          <Select defaultValue="all">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filter by channel" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Channels</SelectItem>
              <SelectItem value="in-app">In-App</SelectItem>
              <SelectItem value="email">Email</SelectItem>
              <SelectItem value="sms">SMS</SelectItem>
              <SelectItem value="webhook">Webhook</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm">
            Import Rules
          </Button>
          <Button variant="outline" size="sm">
            Export Rules
          </Button>
        </div>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[50px]">Status</TableHead>
            <TableHead>Rule</TableHead>
            <TableHead>Event</TableHead>
            <TableHead>Severity</TableHead>
            <TableHead>Channels</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rules.map((rule) => (
            <TableRow key={rule.id}>
              <TableCell>
                <Switch checked={rule.enabled} onCheckedChange={() => toggleRuleStatus(rule.id)} />
              </TableCell>
              <TableCell>
                <div>
                  <div className="font-medium">{rule.name}</div>
                  <div className="text-sm text-muted-foreground">{rule.description}</div>
                </div>
              </TableCell>
              <TableCell>
                <div>
                  <div className="font-mono text-xs">{rule.event}</div>
                  <div className="text-xs text-muted-foreground mt-1">Condition: {rule.condition}</div>
                </div>
              </TableCell>
              <TableCell>{getSeverityBadge(rule.severity)}</TableCell>
              <TableCell>
                <div className="flex flex-wrap gap-1">
                  {rule.channels.map((channel) => (
                    <Badge key={channel} variant="outline" className="capitalize">
                      {channel}
                    </Badge>
                  ))}
                </div>
              </TableCell>
              <TableCell className="text-right">
                <div className="flex justify-end gap-2">
                  <Button variant="ghost" size="icon">
                    <Pencil className="h-4 w-4" />
                    <span className="sr-only">Edit</span>
                  </Button>
                  <Button variant="ghost" size="icon">
                    <Trash2 className="h-4 w-4" />
                    <span className="sr-only">Delete</span>
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="types/notifications.ts" isMerged="true"
export interface Notification {
  id: string
  title: string
  message: string
  timestamp: string
  type: "error" | "warning" | "info" | "success"
  source: "agent" | "system"
  sourceId: string
  read: boolean
  actionUrl: string
  category: string
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import { Inter } from "next/font/google"
import type { Metadata } from "next"
import { Toaster } from "@/components/ui/toaster"
import { ThemeProvider } from "@/components/theme-provider"
import { MainNav } from "@/components/main-nav"
import { MobileMenu } from "@/components/mobile-menu"
import { NotificationCenter } from "@/components/notifications/notification-center"
import { ThemeToggle } from "@/components/theme-toggle"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "EOS Solar Payments - Plataforma de Agentic Swarms",
  description: "Plataforma completa para gerenciamento de agentes autônomos com foco em conformidade LGPD/GDPR",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <div className="flex min-h-screen flex-col">
            <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
              <div className="container flex h-16 items-center justify-between">
                <MainNav />
                <div className="flex items-center gap-4">
                  <NotificationCenter />
                  <ThemeToggle />
                  <MobileMenu />
                </div>
              </div>
            </header>
            <main className="flex-1">{children}</main>
            <footer className="border-t py-6 md:py-0">
              <div className="container flex flex-col items-center justify-between gap-4 md:h-16 md:flex-row">
                <p className="text-sm text-muted-foreground">
                  © {new Date().getFullYear()} EOS Solar Payments. Todos os direitos reservados.
                </p>
                <div className="flex items-center gap-4">
                  <a href="/terms" className="text-sm text-muted-foreground hover:underline">
                    Termos
                  </a>
                  <a href="/privacy" className="text-sm text-muted-foreground hover:underline">
                    Privacidade
                  </a>
                </div>
              </div>
            </footer>
          </div>
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { GradientBackground } from "@/components/gradient-background"
import { MarqueeLogos } from "@/components/marquee-logos"
import { FeatureCard } from "@/components/feature-card"
import { StatsCard } from "@/components/stats-card"
import { FeatureHighlight } from "@/components/feature-highlight"
import { TestimonialCard } from "@/components/testimonial-card"
import { FaqItem } from "@/components/faq-item"
import { ContactForm } from "@/components/contact-form"
import { ArrowRight, Bot, Shield, Zap, BarChart3, Globe, Users } from "lucide-react"

export default function HomePage() {
  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative overflow-hidden py-20 md:py-32">
        <GradientBackground />
        <div className="container relative z-10 mx-auto px-4 text-center">
          <h1 className="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
            Plataforma de <span className="text-primary">Agentic Swarms</span> para Energia Solar
          </h1>
          <p className="mx-auto mb-10 max-w-2xl text-xl text-muted-foreground">
            Gerencie agentes autônomos inteligentes para otimizar operações de pagamentos em energia solar com total
            conformidade LGPD/GDPR.
          </p>
          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Button asChild size="lg">
              <Link href="/agents">
                Explorar Plataforma <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
            <Button variant="outline" size="lg" asChild>
              <Link href="/demo">Agendar Demonstração</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Logos Section */}
      <section className="py-12 md:py-16">
        <div className="container">
          <h2 className="mb-8 text-center text-xl font-medium text-muted-foreground">
            Utilizado por empresas líderes em energia solar
          </h2>
          <MarqueeLogos />
        </div>
      </section>

      {/* Features Section */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Recursos Principais</h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              Nossa plataforma oferece ferramentas avançadas para gerenciamento completo de agentes autônomos.
            </p>
          </div>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            <FeatureCard
              icon={<Bot className="h-10 w-10" />}
              title="Gerenciamento de Agentes"
              description="Crie, configure e monitore agentes inteligentes com interface intuitiva."
            />
            <FeatureCard
              icon={<Shield className="h-10 w-10" />}
              title="Conformidade LGPD/GDPR"
              description="Garanta que todos os agentes operem dentro das regulamentações de privacidade."
            />
            <FeatureCard
              icon={<Zap className="h-10 w-10" />}
              title="Orquestração de Swarms"
              description="Coordene múltiplos agentes trabalhando juntos em tarefas complexas."
            />
            <FeatureCard
              icon={<BarChart3 className="h-10 w-10" />}
              title="Análise de Desempenho"
              description="Monitore métricas detalhadas e otimize o desempenho dos agentes."
            />
            <FeatureCard
              icon={<Globe className="h-10 w-10" />}
              title="Integração com APIs"
              description="Conecte-se facilmente com sistemas externos e fontes de dados."
            />
            <FeatureCard
              icon={<Users className="h-10 w-10" />}
              title="Controle de Acesso"
              description="Gerencie permissões granulares para diferentes usuários e equipes."
            />
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="bg-muted py-16">
        <div className="container">
          <div className="grid gap-8 md:grid-cols-3">
            <StatsCard value="99.9%" label="Uptime" description="Disponibilidade garantida para seus agentes" />
            <StatsCard value="45%" label="Economia" description="Redução média de custos operacionais" />
            <StatsCard value="10x" label="Mais rápido" description="Processamento de transações otimizado" />
          </div>
        </div>
      </section>

      {/* Feature Highlight */}
      <section className="py-16 md:py-24">
        <div className="container">
          <FeatureHighlight
            title="Assistente de Criação de Agentes"
            description="Nosso assistente guiado facilita a criação de agentes personalizados para suas necessidades específicas, sem necessidade de conhecimento técnico profundo."
            imageSrc="/placeholder.svg?height=400&width=600"
            imageAlt="Assistente de Criação de Agentes"
          />
        </div>
      </section>

      {/* Testimonials */}
      <section className="bg-muted py-16 md:py-24">
        <div className="container">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">O que Nossos Clientes Dizem</h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              Empresas de energia solar em todo o Brasil confiam em nossa plataforma.
            </p>
          </div>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            <TestimonialCard
              quote="A plataforma revolucionou nossa operação de pagamentos, reduzindo erros em 95% e melhorando a satisfação dos clientes."
              author="Maria Silva"
              role="Diretora de Operações, SolarTech Brasil"
              avatarSrc="/placeholder.svg?height=80&width=80"
            />
            <TestimonialCard
              quote="Os agentes inteligentes nos permitiram escalar operações sem aumentar nossa equipe, com total conformidade regulatória."
              author="João Pereira"
              role="CEO, Energia Solar Sustentável"
              avatarSrc="/placeholder.svg?height=80&width=80"
            />
            <TestimonialCard
              quote="A facilidade de configuração e o dashboard de métricas nos deram visibilidade sem precedentes sobre nossas operações."
              author="Ana Costa"
              role="CTO, GreenPower Solutions"
              avatarSrc="/placeholder.svg?height=80&width=80"
            />
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Perguntas Frequentes</h2>
            <p className="mx-auto max-w-2xl text-muted-foreground">
              Respostas para as dúvidas mais comuns sobre nossa plataforma.
            </p>
          </div>
          <div className="mx-auto max-w-3xl space-y-4">
            <FaqItem
              question="O que são Agentic Swarms?"
              answer="Agentic Swarms são grupos de agentes de IA autônomos que trabalham juntos para realizar tarefas complexas. Cada agente tem uma especialidade e, juntos, podem resolver problemas que seriam difíceis para um único agente."
            />
            <FaqItem
              question="Como a plataforma garante conformidade com LGPD/GDPR?"
              answer="Nossa plataforma implementa princípios de privacidade por design, com controles granulares de acesso a dados, registro de auditoria completo, mecanismos de consentimento e ferramentas de anonimização e exclusão de dados."
            />
            <FaqItem
              question="Quais integrações são suportadas?"
              answer="Suportamos integrações com principais sistemas de pagamento, ERPs, CRMs, e APIs específicas do setor de energia solar. Também oferecemos uma API aberta para integrações personalizadas."
            />
            <FaqItem
              question="Quanto tempo leva para implementar a plataforma?"
              answer="A implementação básica pode ser concluída em 2-4 semanas, dependendo da complexidade das integrações necessárias. Oferecemos suporte completo durante todo o processo."
            />
            <FaqItem
              question="A plataforma funciona para pequenas empresas?"
              answer="Sim, oferecemos planos escaláveis adequados para empresas de todos os tamanhos, desde pequenas instaladoras até grandes distribuidoras de energia solar."
            />
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="bg-muted py-16 md:py-24">
        <div className="container">
          <div className="grid gap-12 md:grid-cols-2">
            <div>
              <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">Entre em Contato</h2>
              <p className="mb-8 text-muted-foreground">
                Estamos prontos para ajudar sua empresa a otimizar operações de pagamentos em energia solar com nossa
                plataforma de agentes inteligentes.
              </p>
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      strokeWidth={1.5}
                      stroke="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
                      />
                    </svg>
                  </div>
                  <span>contato@eossolarpayments.com.br</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      strokeWidth={1.5}
                      stroke="currentColor"
                      className="h-5 w-5"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
                      />
                    </svg>
                  </div>
                  <span>+55 (11) 4321-1234</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      strokeWidth={1.5}
                      stroke="currentColor"
                      className="h-5 w-5"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
                      />
                    </svg>
                  </div>
                  <span>Av. Paulista, 1000, São Paulo - SP</span>
                </div>
              </div>
            </div>
            <ContactForm />
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="rounded-lg bg-primary px-6 py-12 text-center text-primary-foreground md:px-12">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl">
              Pronto para transformar suas operações?
            </h2>
            <p className="mx-auto mb-8 max-w-2xl text-primary-foreground/90">
              Comece hoje mesmo a otimizar seus processos de pagamento em energia solar com nossa plataforma de agentes
              inteligentes.
            </p>
            <Button size="lg" variant="secondary" asChild>
              <Link href="/agents/new">
                Criar Seu Primeiro Agente <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/main-nav.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

export function MainNav() {
  return (
    <div className="flex items-center gap-6 md:gap-10">
      <Link href="/" className="flex items-center space-x-2">
        <span className="hidden font-bold sm:inline-block">EOS Solar Payments</span>
      </Link>
      <NavigationMenu className="hidden md:block">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Plataforma</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-2">
                <li className="row-span-3">
                  <NavigationMenuLink asChild>
                    <a
                      className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                      href="/agents"
                    >
                      <div className="mb-2 mt-4 text-lg font-medium">Agentic Swarms</div>
                      <p className="text-sm leading-tight text-muted-foreground">
                        Plataforma completa para gerenciamento de agentes autônomos com foco em conformidade LGPD/GDPR.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/agents"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Gerenciamento de Agentes</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Crie e gerencie agentes inteligentes para suas necessidades.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/dashboard/recovery"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Dashboard de Recuperação</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Monitore e otimize a recuperação de pagamentos.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/value-chain"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Análise de Cadeia de Valor</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Visualize e otimize toda sua cadeia de valor.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Soluções</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/solutions/intelligent-routing"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Roteamento Inteligente</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Otimize o roteamento de pagamentos para maior taxa de sucesso.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/solutions/vault"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Vault Seguro</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Armazenamento seguro de dados sensíveis com criptografia avançada.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/solutions/alternative-payment-methods"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Métodos Alternativos de Pagamento</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Suporte a múltiplos métodos de pagamento para maior flexibilidade.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/solutions/cost-observability"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Observabilidade de Custos</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Visibilidade completa sobre custos de processamento de pagamentos.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Recursos</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-2">
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/resources/case-studies"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Casos de Estudo</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Histórias de sucesso de clientes que utilizam nossa plataforma.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/resources/blog"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Blog</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Artigos e insights sobre pagamentos em energia solar.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/resources/community"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Comunidade</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Participe de nossa comunidade de usuários e desenvolvedores.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink asChild>
                    <a
                      href="/resources/integrations"
                      className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                    >
                      <div className="text-sm font-medium leading-none">Integrações</div>
                      <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
                        Conecte nossa plataforma com seus sistemas existentes.
                      </p>
                    </a>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <Link href="/about" legacyBehavior passHref>
              <NavigationMenuLink className={navigationMenuTriggerStyle()}>Sobre</NavigationMenuLink>
            </Link>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-menu.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Menu, ChevronDown } from "lucide-react"

export function MobileMenu() {
  const [open, setOpen] = useState(false)
  const [platformOpen, setPlatformOpen] = useState(false)
  const [solutionsOpen, setSolutionsOpen] = useState(false)
  const [resourcesOpen, setResourcesOpen] = useState(false)

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild className="md:hidden">
        <Button variant="ghost" size="icon">
          <Menu className="h-5 w-5" />
          <span className="sr-only">Abrir menu</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="w-[300px] sm:w-[350px]">
        <SheetHeader>
          <SheetTitle>EOS Solar Payments</SheetTitle>
        </SheetHeader>
        <div className="mt-6 flex flex-col space-y-3">
          <Collapsible open={platformOpen} onOpenChange={setPlatformOpen} className="w-full">
            <CollapsibleTrigger asChild>
              <Button variant="ghost" className="flex w-full justify-between">
                <span>Plataforma</span>
                <ChevronDown className={`h-4 w-4 transition-transform ${platformOpen ? "rotate-180" : ""}`} />
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent className="space-y-2 pl-4 pt-2">
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/agents">Gerenciamento de Agentes</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/dashboard/recovery">Dashboard de Recuperação</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/value-chain">Análise de Cadeia de Valor</Link>
              </Button>
            </CollapsibleContent>
          </Collapsible>

          <Collapsible open={solutionsOpen} onOpenChange={setSolutionsOpen} className="w-full">
            <CollapsibleTrigger asChild>
              <Button variant="ghost" className="flex w-full justify-between">
                <span>Soluções</span>
                <ChevronDown className={`h-4 w-4 transition-transform ${solutionsOpen ? "rotate-180" : ""}`} />
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent className="space-y-2 pl-4 pt-2">
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/solutions/intelligent-routing">Roteamento Inteligente</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/solutions/vault">Vault Seguro</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/solutions/alternative-payment-methods">Métodos Alternativos de Pagamento</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/solutions/cost-observability">Observabilidade de Custos</Link>
              </Button>
            </CollapsibleContent>
          </Collapsible>

          <Collapsible open={resourcesOpen} onOpenChange={setResourcesOpen} className="w-full">
            <CollapsibleTrigger asChild>
              <Button variant="ghost" className="flex w-full justify-between">
                <span>Recursos</span>
                <ChevronDown className={`h-4 w-4 transition-transform ${resourcesOpen ? "rotate-180" : ""}`} />
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent className="space-y-2 pl-4 pt-2">
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/resources/case-studies">Casos de Estudo</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/resources/blog">Blog</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/resources/community">Comunidade</Link>
              </Button>
              <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
                <Link href="/resources/integrations">Integrações</Link>
              </Button>
            </CollapsibleContent>
          </Collapsible>

          <Button variant="ghost" className="w-full justify-start" asChild onClick={() => setOpen(false)}>
            <Link href="/about">Sobre</Link>
          </Button>

          <div className="pt-4">
            <Button className="w-full" asChild onClick={() => setOpen(false)}>
              <Link href="/agents/new">Criar Agente</Link>
            </Button>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isMerged="true"
"use client"

import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Moon, Sun } from "lucide-react"

export function ThemeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Alternar tema</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Claro</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Escuro</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>Sistema</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/gradient-background.tsx" isFixed="true" isEdit="true" isMerged="true"
export function GradientBackground() {
  return (
    <div className="absolute inset-0 -z-10 overflow-hidden">
      <div
        className="absolute left-1/2 top-0 -z-10 h-[1000px] w-[1000px] -translate-x-1/2 -translate-y-1/4 rounded-full bg-gradient-to-r from-primary/20 to-primary-foreground/20 blur-3xl"
        aria-hidden="true"
      />
      <div
        className="absolute right-0 top-1/4 -z-10 h-[800px] w-[800px] translate-x-1/3 rounded-full bg-gradient-to-l from-primary/10 to-primary-foreground/10 blur-3xl"
        aria-hidden="true"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/featu</article></body></html>