[V0_FILE]png:file="public/images/qingqi-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/photo_2025-09-28_15-57-19-LagluPUX2DpJJM83wdGz01tCYcCYqp.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/features-section.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Code, Smartphone, Bot, Headphones } from "lucide-react" import { useLanguage } from "@/hooks/use-language" const features = [ { icon: Code, titleKey: "customDevelopment" as const, descriptionKey: "customDevelopmentDesc" as const, }, { icon: Smartphone, titleKey: "webAppSolutions" as const, descriptionKey: "webAppSolutionsDesc" as const, }, { icon: Bot, titleKey: "aiIntegration" as const, descriptionKey: "aiIntegrationDesc" as const, }, { icon: Headphones, titleKey: "deliverySupport" as const, descriptionKey: "deliverySupportDesc" as const, }, ] export function FeaturesSection() { const { t } = useLanguage() return (

{t("featuresTitle")}

{t("featuresSubtitle")}

{features.map((feature, index) => (

{t(feature.titleKey)}

{t(feature.descriptionKey)}

))}

) } [V0_FILE]typescriptreact:file="components/portfolio-section.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ExternalLink } from "lucide-react" import { useLanguage } from "@/hooks/use-language" import Link from "next/link" const projects = [ { titleKey: "smartEcommerce" as const, descriptionKey: "smartEcommerceDesc" as const, image: "/modern-ecommerce-platform.png", tags: ["React", "Node.js", "AI", "E-commerce"], slug: "smart-ecommerce-platform", }, { titleKey: "enterpriseManagement" as const, descriptionKey: "enterpriseManagementDesc" as const, image: "/business-management-dashboard.png", tags: ["Vue.js", "Python", "Automation", "Management"], slug: "enterprise-management-system", }, { titleKey: "mobileAppDev" as const, descriptionKey: "mobileAppDevDesc" as const, image: "/mobile-app-interface.png", tags: ["React Native", "Mobile", "Cross-platform"], slug: "mobile-app-development", }, { titleKey: "dataAnalytics" as const, descriptionKey: "dataAnalyticsDesc" as const, image: "/data-analytics-dashboard.png", tags: ["Python", "Data Analysis", "Visualization"], slug: "data-analytics-platform", }, ] export function PortfolioSection() { const { t } = useLanguage() return (

{t("portfolioTitle")}

{t("portfolioSubtitle")}

{projects.map((project, index) => (

{t(project.titleKey)}

{t(project.descriptionKey)}

{project.tags.map((tag, tagIndex) => ( {tag} ))}

))}

) } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Mail, Phone, MapPin, Send } from "lucide-react" import { useLanguage } from "@/hooks/use-language" export function ContactSection() { const { t } = useLanguage() const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission here console.log("Form submitted:", formData) } const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } return (

{t("startYourProject")}

{t("contactSubtitle")}

{/* Contact Form */} {t("sendMessage")}

{t("name")}

{t("email")}

{t("projectRequirements")}

</div>

<Button type="submit" className="w-full neon-glow neon-hover">
                  <Send className="mr-2 h-4 w-4" />
                  {t("sendMessage")}
                </Button>
              </form>
            </CardContent>
          </Card>

{/* Contact Info */}
          <div className="space-y-8">
            <Card className="neon-border bg-card/50 backdrop-blur-sm">
              <CardContent className="p-6">
                <div className="flex items-center space-x-4">
                  <div className="p-3 bg-primary/10 rounded-lg">
                    <Mail className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-semibold">{t("emailContact")}</h3>
                    <p className="text-muted-foreground">contact@qingqi-tech.com</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="neon-border bg-card/50 backdrop-blur-sm">
              <CardContent className="p-6">
                <div className="flex items-center space-x-4">
                  <div className="p-3 bg-primary/10 rounded-lg">
                    <Phone className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-semibold">{t("phoneConsult")}</h3>
                    <p className="text-muted-foreground">+86 138-0000-0000</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="neon-border bg-card/50 backdrop-blur-sm">
              <CardContent className="p-6">
                <div className="flex items-center space-x-4">
                  <div className="p-3 bg-primary/10 rounded-lg">
                    <MapPin className="h-6 w-6 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-semibold">{t("companyAddress")}</h3>
                    <p className="text-muted-foreground">中国 · 深圳 · 南山区</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<div className="bg-gradient-to-r from-primary/10 to-primary/5 p-6 rounded-lg neon-border">
              <h3 className="font-semibold mb-2 text-primary">{t("whyChooseUs")}</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>• 5年以上行业经验</li>
                <li>• 100+ 成功项目案例</li>
                <li>• 7x24小时技术支持</li>
                <li>• 敏捷开发，快速交付</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]png:file="public/modern-ecommerce-platform.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-ecommerce-platform-73DX4UxxRkAz6P6GPhXMplnsnPfgBT.png" isMerged="true"
[V0_FILE]png:file="public/business-management-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/business-management-dashboard-xztmpQee6eE2FHL2TRKPcJT8biSeK5.png" isMerged="true"
[V0_FILE]png:file="public/mobile-app-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-app-interface-2bpxKMiIwjcKLSEVDWDLBXZyhfAKOk.png" isMerged="true"
[V0_FILE]png:file="public/data-analytics-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/data-analytics-dashboard-3crvQsJkGHB6gVvtpErQepenL5EfVw.png" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true" isMerged="true"
"use client"

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

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

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

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

type ChartContextProps = {
  config: ChartConfig
}

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

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

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

return context
}

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

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

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

if (!colorConfig.length) {
    return null
  }

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

const ChartTooltip = RechartsPrimitive.Tooltip

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

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

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

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

if (!value) {
      return null
    }

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

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

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

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

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

const ChartLegend = RechartsPrimitive.Legend

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

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

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

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

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

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

let configLabelKey: string = key

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

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

export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle }
[V0_FILE]typescriptreact:file="hooks/use-language.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, type ReactNode } from "react"

type Language = "en" | "zh"

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
  t: (key: string) => string
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

import { translations } from "@/lib/i18n"

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [language, setLanguage] = useState<Language>("en") // Default to English

const t = (key: string): string => {
    const keys = key.split(".")
    let value: any = translations[language]

for (const k of keys) {
      value = value?.[k]
    }

return value || translations.en[key as keyof typeof translations.en] || key
  }

return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/language-toggle.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { useLanguage } from "@/hooks/use-language"
import { Globe } from "lucide-react"

export function LanguageToggle() {
  const { language, setLanguage } = useLanguage()

return (
    <Button
      variant="ghost"
      size="sm"
      onClick={() => setLanguage(language === "en" ? "zh" : "en")}
      className="flex items-center gap-2 text-muted-foreground hover:text-primary"
    >
      <Globe className="h-4 w-4" />
      {language === "en" ? "中文" : "EN"}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { LanguageProvider } from "@/hooks/use-language"
import { Suspense } from "react"
import "./globals.css"

export const metadata: Metadata = {
  title: "QingQi Tech - Intelligent Software Solutions",
  description: "Professional software outsourcing services, from custom development to AI integration",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <Suspense fallback={<div>Loading...</div>}>
          <LanguageProvider>{children}</LanguageProvider>
        </Suspense>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { LanguageToggle } from "@/components/language-toggle"
import { useLanguage } from "@/hooks/use-language"
import { Menu, X } from "lucide-react"

export function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const { t } = useLanguage()

return (
    <nav className="fixed top-0 w-full z-50 bg-background/95 backdrop-blur-md border-b border-border/50 shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <div className="flex items-center space-x-3">
            <img src="/images/qingqi-logo.png" alt={t("companyName")} className="h-8 w-8" />
            <span className="text-xl font-bold neon-text">{t("companyName")}</span>
          </div>

{/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            <a href="#features" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              {t("services")}
            </a>
            <a href="#process" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              {t("process")}
            </a>
            <a href="#portfolio" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              {t("portfolio")}
            </a>
            <a href="#contact" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              {t("contact")}
            </a>
            <LanguageToggle />
            <Button className="neon-glow neon-hover font-semibold">{t("contactUs")}</Button>
          </div>

{/* Mobile menu button */}
          <div className="md:hidden flex items-center space-x-2">
            <LanguageToggle />
            <Button variant="ghost" size="icon" onClick={() => setIsOpen(!isOpen)}>
              {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </Button>
          </div>
        </div>

{/* Mobile Navigation */}
        {isOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 bg-card/95 backdrop-blur-md border border-border rounded-lg mt-2 shadow-lg">
              <a href="#features" className="block px-3 py-2 text-muted-foreground hover:text-primary font-medium">
                {t("services")}
              </a>
              <a href="#process" className="block px-3 py-2 text-muted-foreground hover:text-primary font-medium">
                {t("process")}
              </a>
              <a href="#portfolio" className="block px-3 py-2 text-muted-foreground hover:text-primary font-medium">
                {t("portfolio")}
              </a>
              <a href="#contact" className="block px-3 py-2 text-muted-foreground hover:text-primary font-medium">
                {t("contact")}
              </a>
              <div className="px-3 py-2">
                <Button className="w-full neon-glow font-semibold">{t("contactUs")}</Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { useLanguage } from "@/hooks/use-language"
import { ArrowRight, Sparkles } from "lucide-react"

export function HeroSection() {
  const { t } = useLanguage()

return (
    <section className="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-background via-background to-slate-50/30 dark:to-slate-900/30">
      {/* Background grid pattern */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#1f1f1f_1px,transparent_1px),linear-gradient(to_bottom,#1f1f1f_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)] opacity-20" />

{/* Main heading */}
        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 text-balance leading-tight">
          <span className="neon-text block mb-2">{t("companyName")}</span>
          <span className="text-primary block">{t("heroTitle")}</span>
        </h1>

{/* Subtitle */}
        <p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-4xl mx-auto text-balance leading-relaxed">
          {t("heroSubtitle")}
        </p>

{/* CTA Buttons */}
        <div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
          <Button size="lg" className="neon-glow neon-hover text-lg px-8 py-6 font-semibold shadow-lg">
            <Sparkles className="mr-2 h-5 w-5" />
            {t("contactUsNow")}
            <ArrowRight className="ml-2 h-5 w-5" />
          </Button>
          <Button
            variant="outline"
            size="lg"
            className="text-lg px-8 py-6 neon-border neon-hover bg-transparent font-semibold"
          >
            {t("viewPortfolio")}
          </Button>
        </div>

{/* Floating elements with different colors */}
        <div className="absolute top-1/4 left-1/4 w-3 h-3 bg-primary rounded-full animate-pulse shadow-lg" />
        <div className="absolute top-1/3 right-1/4 w-2 h-2 bg-secondary rounded-full animate-pulse delay-1000 shadow-lg" />
        <div className="absolute bottom-1/4 left-1/3 w-2.5 h-2.5 bg-tertiary rounded-full animate-pulse delay-500 shadow-lg" />
        <div className="absolute top-1/2 right-1/3 w-1.5 h-1.5 bg-primary rounded-full animate-pulse delay-700 shadow-lg" />
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Navbar } from "@/components/navbar"
import { TrustBar } from "@/components/trust-bar"
import { HeroSection } from "@/components/hero-section"
import { FeaturesSection } from "@/components/features-section"
import { ProcessSection } from "@/components/process-section"
import { PortfolioSection } from "@/components/portfolio-section"
import { ContactSection } from "@/components/contact-section"
import { Footer } from "@/components/footer"

export default function Home() {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <main>
        <HeroSection />
        <TrustBar />
        <div className="section-separator">
          <FeaturesSection />
        </div>
        <div className="section-separator">
          <ProcessSection />
        </div>
        <div className="section-separator">
          <PortfolioSection />
        </div>
        <div className="section-separator">
          <ContactSection />
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]png:file="public/nextjs-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/nextjs-logo-YFLiH8emRGHJFzKFfK1jiJ7V85vvdO.png" isMerged="true"
[V0_FILE]png:file="public/tailwind-css-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tailwind-css-logo-BXtZstE3DSWxAi6R30mWVt6Kos8Ff1.png" isMerged="true"
[V0_FILE]jpg:file="public/n8n-automation-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/n8n-automation-logo-WokKoUA5swecAnDbn0YIxTpXSVxBUI.jpg" isMerged="true"
[V0_FILE]jpg:file="public/make-automation-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/make-automation-logo-6G6O2fprSluoco0B3TtRJu7nHefvES.jpg" isMerged="true"
[V0_FILE]jpg:file="public/pipedream-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pipedream-logo-mhBMubsCmjyW4U0G5ZO8sqi3XvmMq1.jpg" isMerged="true"
[V0_FILE]png:file="public/google-sheets-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/google-sheets-logo-WPxo8rk6WTyLAYhvrQiCqq16NwF0pS.png" isMerged="true"
[V0_FILE]jpg:file="public/retool-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/retool-logo-FaucefDl6f6mbcd5K9j3tmuJNxTEFy.jpg" isMerged="true"
[V0_FILE]jpg:file="public/e-commerce-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/e-commerce-icon-68eNo3bKIYVqRhm4FJEORA9waUNXwC.jpg" isMerged="true"
[V0_FILE]jpg:file="public/finance-industry-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/finance-industry-icon-0IhFWgJ4RVfK4nccRs4fgIyJe5G7jb.jpg" isMerged="true"
[V0_FILE]jpg:file="public/healthcare-industry-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/healthcare-industry-icon-zJ2tu10e7dgQtlHD4hqQiDl9HTgr7d.jpg" isMerged="true"
[V0_FILE]jpg:file="public/manufacturing-industry-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manufacturing-industry-icon-gR4LLkIBLKe8pNMJrzZ9W0EN3INVTj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/business-requirements-analysis-meeting.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/business-requirements-analysis-meeting-QhiMbjwpkc1IkSVczyz2pNWkBunn3e.jpg" isMerged="true"
[V0_FILE]jpg:file="public/software-development-team-coding.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/software-development-team-coding-GfryrDEd6vkUgCWTeoO2bHdyUoXEY7.jpg" isMerged="true"
[V0_FILE]jpg:file="public/software-deployment-and-launch.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/software-deployment-and-launch-9Ur7zUkCVDITzRbjAxOKqaJBS64ugA.jpg" isMerged="true"
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  /* Primary neon green */
  --primary: oklch(0.75 0.25 145);
  --primary-foreground: oklch(0.145 0 0);
  /* Added auxiliary colors for better design */
  --secondary: oklch(0.85 0.15 280); /* Purple accent */
  --secondary-foreground: oklch(0.145 0 0);
  --tertiary: oklch(0.8 0.2 60); /* Orange accent */
  --tertiary-foreground: oklch(0.145 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.75 0.25 145);
  --sidebar-primary-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.75 0.25 145);
  --primary-foreground: oklch(0.145 0 0);
  /* Added dark mode auxiliary colors */
  --secondary: oklch(0.6 0.2 280);
  --secondary-foreground: oklch(0.985 0 0);
  --tertiary: oklch(0.65 0.25 60);
  --tertiary-foreground: oklch(0.145 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.75 0.25 145);
  --sidebar-primary-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  /* Added tertiary color to theme */
  --color-tertiary: var(--tertiary);
  --color-tertiary-foreground: var(--tertiary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Enhanced neon effects and added new utility classes */
@layer utilities {
  .neon-glow {
    box-shadow: 0 0 5px #00ff66, 0 0 10px #00ff66, 0 0 15px #00ff66;
  }

.neon-text {
    text-shadow: 0 0 5px #00ff66, 0 0 10px #00ff66;
  }

.neon-border {
    border: 1px solid #00ff66;
    box-shadow: 0 0 5px rgba(0, 255, 102, 0.5);
  }

.neon-hover:hover {
    box-shadow: 0 0 10px #00ff66, 0 0 20px #00ff66, 0 0 30px #00ff66;
    transition: box-shadow 0.3s ease;
  }

.purple-glow {
    box-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 15px #a855f7;
  }

.orange-glow {
    box-shadow: 0 0 5px #f97316, 0 0 10px #f97316, 0 0 15px #f97316;
  }

.section-separator {
    position: relative;
  }

.section-separator::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ff66, transparent);
  }

/* Added infinite scroll animation for trust bar */
  .animate-scroll {
    animation: scroll 30s linear infinite;
  }

@keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}
[V0_FILE]typescriptreact:file="components/process-section.tsx" isEdit="true" isMerged="true"
"use client"

import { FileText, Code, Rocket } from "lucide-react"
import { useLanguage } from "@/hooks/use-language"

const steps = [
  {
    icon: FileText,
    titleKey: "submitRequirements" as const,
    descriptionKey: "submitRequirementsDesc" as const,
    image: "/business-requirements-analysis-meeting.jpg",
  },
  {
    icon: Code,
    titleKey: "projectDevelopment" as const,
    descriptionKey: "projectDevelopmentDesc" as const,
    image: "/software-development-team-coding.jpg",
  },
  {
    icon: Rocket,
    titleKey: "acceptanceOnline" as const,
    descriptionKey: "acceptanceOnlineDesc" as const,
    image: "/software-deployment-and-launch.jpg",
  },
]

export function ProcessSection() {
  const { t } = useLanguage()

return (
    <section id="process" className="py-24 bg-gradient-to-b from-background to-secondary/10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            <span className="text-foreground">{t("processTitle")}</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{t("processSubtitle")}</p>
        </div>

<div className="relative">
          {/* Timeline line */}
          <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-primary/20 via-primary to-primary/20 transform -translate-y-1/2 hidden lg:block" />

<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {steps.map((step, index) => (
              <div key={index} className="relative">
                <div className="bg-card/80 backdrop-blur-sm rounded-2xl p-8 border-2 border-slate-200 dark:border-slate-800 hover:border-primary/50 transition-all duration-300 hover:shadow-xl">
                  {/* Step image */}
                  <div className="mb-6 rounded-xl overflow-hidden">
                    <img
                      src={step.image || "/placeholder.svg"}
                      alt={t(step.titleKey)}
                      className="w-full h-48 object-cover"
                    />
                  </div>

{/* Step number and icon */}
                  <div className="flex items-center justify-center mb-6">
                    <div className="relative">
                      <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center border-2 border-primary/20">
                        <step.icon className="h-8 w-8 text-primary" />
                      </div>
                      <div className="absolute -top-2 -right-2 w-8 h-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-bold text-sm shadow-lg">
                        {index + 1}
                      </div>
                    </div>
                  </div>

<div className="text-center">
                    <h3 className="text-xl font-bold mb-4">{t(step.titleKey)}</h3>
                    <p className="text-muted-foreground leading-relaxed">{t(step.descriptionKey)}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/case-study/[slug]/page.tsx" isMerged="true"
"use client"

import { useParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, ExternalLink, Calendar, Users, Target } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/hooks/use-language"

const caseStudies = {
  "smart-ecommerce-platform": {
    titleKey: "smartEcommerce" as const,
    descriptionKey: "smartEcommerceDesc" as const,
    image: "/modern-ecommerce-platform.png",
    tags: ["React", "Node.js", "AI", "E-commerce"],
    duration: "6 months",
    teamSize: "8 developers",
    results: "30% increase in user experience",
    challenge: "Building a scalable e-commerce platform with AI-powered recommendations",
    solution: "Implemented microservices architecture with machine learning recommendation engine",
    technologies: ["React", "Node.js", "MongoDB", "TensorFlow", "AWS"],
  },
  "enterprise-management-system": {
    titleKey: "enterpriseManagement" as const,
    descriptionKey: "enterpriseManagementDesc" as const,
    image: "/business-management-dashboard.png",
    tags: ["Vue.js", "Python", "Automation", "Management"],
    duration: "8 months",
    teamSize: "10 developers",
    results: "50% improvement in work efficiency",
    challenge: "Automating complex business processes for large enterprise",
    solution: "Custom ERP system with workflow automation and real-time analytics",
    technologies: ["Vue.js", "Python", "PostgreSQL", "Redis", "Docker"],
  },
  "mobile-app-development": {
    titleKey: "mobileAppDev" as const,
    descriptionKey: "mobileAppDevDesc" as const,
    image: "/mobile-app-interface.png",
    tags: ["React Native", "Mobile", "Cross-platform"],
    duration: "4 months",
    teamSize: "6 developers",
    results: "85%+ user activity rate",
    challenge: "Creating cross-platform mobile app with native performance",
    solution: "React Native with optimized native modules for performance-critical features",
    technologies: ["React Native", "TypeScript", "Firebase", "Redux", "Expo"],
  },
  "data-analytics-platform": {
    titleKey: "dataAnalytics" as const,
    descriptionKey: "dataAnalyticsDesc" as const,
    image: "/data-analytics-dashboard.png",
    tags: ["Python", "Data Analysis", "Visualization"],
    duration: "5 months",
    teamSize: "7 developers",
    results: "Real-time business insights",
    challenge: "Processing and visualizing large datasets for business intelligence",
    solution: "Scalable data pipeline with interactive visualization dashboard",
    technologies: ["Python", "Apache Spark", "D3.js", "Elasticsearch", "Kubernetes"],
  },
}

export default function CaseStudyPage() {
  const params = useParams()
  const { t } = useLanguage()
  const slug = params.slug as string
  const caseStudy = caseStudies[slug as keyof typeof caseStudies]

if (!caseStudy) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Case Study Not Found</h1>
          <Link href="/">
            <Button>
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Home
            </Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <Link href="/">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Home
            </Button>
          </Link>
        </div>
      </header>

{/* Hero Section */}
      <section className="py-16 bg-gradient-to-b from-secondary/10 to-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-4xl md:text-5xl font-bold mb-6">{t(caseStudy.titleKey)}</h1>
              <p className="text-xl text-muted-foreground mb-8">{t(caseStudy.descriptionKey)}</p>
              <div className="flex flex-wrap gap-2 mb-8">
                {caseStudy.tags.map((tag, index) => (
                  <Badge key={index} variant="secondary" className="bg-primary/10 text-primary border-primary/20">
                    {tag}
                  </Badge>
                ))}
              </div>
              <div className="grid grid-cols-3 gap-6">
                <div className="text-center">
                  <Calendar className="h-8 w-8 text-primary mx-auto mb-2" />
                  <p className="text-sm text-muted-foreground">Duration</p>
                  <p className="font-semibold">{caseStudy.duration}</p>
                </div>
                <div className="text-center">
                  <Users className="h-8 w-8 text-primary mx-auto mb-2" />
                  <p className="text-sm text-muted-foreground">Team Size</p>
                  <p className="font-semibold">{caseStudy.teamSize}</p>
                </div>
                <div className="text-center">
                  <Target className="h-8 w-8 text-primary mx-auto mb-2" />
                  <p className="text-sm text-muted-foreground">Results</p>
                  <p className="font-semibold">{caseStudy.results}</p>
                </div>
              </div>
            </div>
            <div className="relative">
              <img
                src={caseStudy.image || "/placeholder.svg"}
                alt={t(caseStudy.titleKey)}
                className="w-full rounded-2xl shadow-2xl"
              />
            </div>
          </div>
        </div>
      </section>

{/* Details Section */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-2xl font-bold mb-4">Challenge</h2>
              <p className="text-muted-foreground mb-8 leading-relaxed">{caseStudy.challenge}</p>

<h2 className="text-2xl font-bold mb-4">Solution</h2>
              <p className="text-muted-foreground leading-relaxed">{caseStudy.solution}</p>
            </div>

<div>
              <h2 className="text-2xl font-bold mb-4">Technologies Used</h2>
              <div className="grid grid-cols-2 gap-4">
                {caseStudy.technologies.map((tech, index) => (
                  <div key={index} className="bg-card/50 p-4 rounded-lg border">
                    <p className="font-medium">{tech}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-16 bg-primary/5">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Start Your Project?</h2>
          <p className="text-xl text-muted-foreground mb-8">
            Let's discuss how we can help transform your business with custom software solutions.
          </p>
          <Link href="/#contact">
            <Button size="lg" className="neon-glow neon-hover">
              <ExternalLink className="mr-2 h-5 w-5" />
              Get In Touch
            </Button>
          </Link>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { useLanguage } from "@/hooks/use-language"
import { getTranslation } from "@/lib/i18n"

export function Footer() {
  const { language } = useLanguage()
  const t = (key: keyof typeof import("@/lib/i18n").translations.en) => getTranslation(language, key)

const serviceItems = [
    { key: "customSoftwareDev" as const, href: "/services/custom-software" },
    { key: "webAppDev" as const, href: "/services/web-development" },
    { key: "mobileAppDev" as const, href: "/services/mobile-development" },
    { key: "aiTechIntegration" as const, href: "/services/ai-integration" },
    { key: "systemMaintenance" as const, href: "/services/maintenance" },
  ]

return (
    <footer className="bg-secondary/20 border-t border-border py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Company Info */}
          <div className="col-span-1 md:col-span-2">
            <div className="flex items-center space-x-3 mb-4">
              <img src="/images/qingqi-logo.png" alt={t("companyName")} className="h-8 w-8" />
              <span className="text-xl font-bold neon-text">{t("companyName")}</span>
            </div>
            <p className="text-muted-foreground mb-4 max-w-md">{t("footerText")}</p>
            <p className="text-sm text-muted-foreground">
              © 2025 {t("companyName")}. {t("allRightsReserved")}
            </p>
          </div>

{/* Services */}
          <div>
            <h3 className="font-semibold mb-4 text-primary">{t("servicesTitle")}</h3>
            <ul className="space-y-2 text-sm text-muted-foreground">
              {serviceItems.map((item) => (
                <li key={item.key}>
                  <Link href={item.href} className="hover:text-primary transition-colors duration-200 cursor-pointer">
                    {t(item.key)}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

{/* Contact */}
          <div>
            <h3 className="font-semibold mb-4 text-primary">{t("contactInfo")}</h3>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>
                {t("emailLabel")}: {t("emailAddress")}
              </li>
              <li>
                {t("phoneLabel")}: {t("phoneNumber")}
              </li>
              <li>
                {t("addressLabel")}: {t("companyAddressText")}
              </li>
              <li>
                {t("workingHours")}: {t("workingHoursText")}
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-border mt-8 pt-8 text-center">
          <p className="text-sm text-muted-foreground">{t("builtWithLove")}</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/trust-bar.tsx" isEdit="true" isMerged="true"
"use client"

export function TrustBar() {
  const companies = [
    { name: "Next.js", logo: "/nextjs-logo.png" },
    { name: "Tailwind CSS", logo: "/tailwind-css-logo.png" },
    { name: "n8n", logo: "/n8n-automation-logo.jpg" },
    { name: "Make", logo: "/make-automation-logo.jpg" },
    { name: "Pipedream", logo: "/pipedream-logo.jpg" },
    { name: "Google Sheets", logo: "/google-sheets-logo.png" },
    { name: "Retool", logo: "/retool-logo.jpg" },
    { name: "E-commerce", logo: "/e-commerce-icon.jpg" },
    { name: "Finance", logo: "/finance-industry-icon.jpg" },
    { name: "Healthcare", logo: "/healthcare-industry-icon.jpg" },
    { name: "Manufacturing", logo: "/manufacturing-industry-icon.jpg" },
  ]

return (
    <div className="bg-slate-50/80 dark:bg-slate-900/50 border-y border-slate-200 dark:border-slate-800 py-8 overflow-hidden">
      <div className="relative">
        <div className="flex animate-scroll">
          {/* First set of logos */}
          <div className="flex items-center space-x-16 px-8">
            {companies.map((company, index) => (
              <div key={index} className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity">
                <div className="bg-white rounded-lg p-4 shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-300">
                  <img
                    src={company.logo || "/placeholder.svg"}
                    alt={company.name}
                    className="h-12 w-auto max-w-[120px] object-contain grayscale hover:grayscale-0 transition-all duration-300"
                  />
                </div>
              </div>
            ))}
          </div>
          {/* Duplicate set for seamless loop */}
          <div className="flex items-center space-x-16 px-8">
            {companies.map((company, index) => (
              <div key={`duplicate-${index}`} className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity">
                <div className="bg-white rounded-lg p-4 shadow-sm border border-gray-100 hover:shadow-md transition-shadow duration-300">
                  <img
                    src={company.logo || "/placeholder.svg"}
                    alt={company.name}
                    className="h-12 w-auto max-w-[120px] object-contain grayscale hover:grayscale-0 transition-all duration-300"
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/services/[slug]/page.tsx" isMerged="true"
"use client"

import { useParams } from "next/navigation"
import { useLanguage } from "@/hooks/use-language"
import { getTranslation } from "@/lib/i18n"
import { Button } from "@/components/ui/button"
import Link from "next/link"

const serviceDetails = {
  "custom-software": {
    titleKey: "customSoftwareDev" as const,
    description:
      "We specialize in creating tailored software solutions that perfectly align with your business processes and requirements.",
    features: [
      "Requirements Analysis & Planning",
      "Custom Architecture Design",
      "Full-Stack Development",
      "Quality Assurance & Testing",
      "Deployment & Integration",
      "Ongoing Support & Maintenance",
    ],
    technologies: ["React", "Node.js", "Python", "PostgreSQL", "AWS", "Docker"],
    timeline: "4-12 weeks",
    price: "Starting from $15,000",
  },
  "web-development": {
    titleKey: "webAppDev" as const,
    description:
      "Modern, responsive web applications built with cutting-edge technologies for optimal performance and user experience.",
    features: [
      "Responsive Design",
      "Progressive Web Apps",
      "E-commerce Solutions",
      "Content Management Systems",
      "API Integration",
      "Performance Optimization",
    ],
    technologies: ["Next.js", "React", "Tailwind CSS", "TypeScript", "Vercel", "Supabase"],
    timeline: "2-8 weeks",
    price: "Starting from $8,000",
  },
  "mobile-development": {
    titleKey: "mobileAppDev" as const,
    description: "Cross-platform mobile applications that deliver native performance across iOS and Android devices.",
    features: [
      "Cross-Platform Development",
      "Native Performance",
      "Push Notifications",
      "Offline Functionality",
      "App Store Optimization",
      "Analytics Integration",
    ],
    technologies: ["React Native", "Flutter", "Firebase", "Redux", "GraphQL", "Jest"],
    timeline: "6-16 weeks",
    price: "Starting from $20,000",
  },
  "ai-integration": {
    titleKey: "aiTechIntegration" as const,
    description:
      "Integrate cutting-edge AI technologies into your existing systems to automate processes and enhance decision-making.",
    features: [
      "Machine Learning Models",
      "Natural Language Processing",
      "Computer Vision",
      "Predictive Analytics",
      "Chatbot Development",
      "Process Automation",
    ],
    technologies: ["Python", "TensorFlow", "OpenAI", "Langchain", "FastAPI", "Docker"],
    timeline: "8-20 weeks",
    price: "Starting from $25,000",
  },
  maintenance: {
    titleKey: "systemMaintenance" as const,
    description:
      "Comprehensive maintenance and support services to ensure your software systems run smoothly and stay up-to-date.",
    features: [
      "24/7 System Monitoring",
      "Regular Updates & Patches",
      "Performance Optimization",
      "Security Audits",
      "Bug Fixes & Troubleshooting",
      "Technical Support",
    ],
    technologies: ["Monitoring Tools", "CI/CD", "Security Scanners", "Performance Tools"],
    timeline: "Ongoing",
    price: "Starting from $2,000/month",
  },
}

export default function ServicePage() {
  const params = useParams()
  const { language } = useLanguage()
  const t = (key: keyof typeof import("@/lib/i18n").translations.en) => getTranslation(language, key)

const slug = params.slug as string
  const service = serviceDetails[slug as keyof typeof serviceDetails]

if (!service) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4">Service Not Found</h1>
          <Link href="/">
            <Button>Back to Home</Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <div className="max-w-4xl mx-auto px-4 py-16">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4 neon-text">{t(service.titleKey)}</h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">{service.description}</p>
        </div>

<div className="grid md:grid-cols-2 gap-8 mb-12">
          <div className="bg-card rounded-lg p-6 border">
            <h2 className="text-2xl font-semibold mb-4 text-primary">Key Features</h2>
            <ul className="space-y-2">
              {service.features.map((feature, index) => (
                <li key={index} className="flex items-center">
                  <div className="w-2 h-2 bg-primary rounded-full mr-3"></div>
                  {feature}
                </li>
              ))}
            </ul>
          </div>

<div className="bg-card rounded-lg p-6 border">
            <h2 className="text-2xl font-semibold mb-4 text-primary">Technologies</h2>
            <div className="flex flex-wrap gap-2 mb-6">
              {service.technologies.map((tech, index) => (
                <span key={index} className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">
                  {tech}
                </span>
              ))}
            </div>
            <div className="space-y-2">
              <p>
                <strong>Timeline:</strong> {service.timeline}
              </p>
              <p>
                <strong>Investment:</strong> {service.price}
              </p>
            </div>
          </div>
        </div>

<div className="text-center">
          <Link href="/#contact">
            <Button size="lg" className="bg-primary hover:bg-primary/90">
              {t("contactUsNow")}
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/i18n.ts" isEdit="true" isQuickEdit="true"
export type Language = "en" | "zh"

export const translations = {
  en: {
    // Navigation
    services: "Services",
    process: "Process",
    portfolio: "Portfolio",
    contact: "Contact",
    contactUs: "Book a 30 Minutes Assessment",

// Hero Section
    companyName: "QingQi Tech",
    heroTitle: "Intelligent Software Solutions for Enterprises",
    heroSubtitle:
      "Professional software outsourcing services, from custom development to AI integration, empowering your digital transformation",
    contactUsNow: "Book a 30 Minutes Assessment",
    viewPortfolio: "View Portfolio",

// Trust Bar
    trustBarText:
      "Trusted by industries: E-commerce, Finance, Healthcare, Manufacturing | Tech Stack: Next.js / Tailwind / n8n / Make / Pipedream / GSheet / Retool",

// Features
    featuresTitle: "Core Services",
    featuresSubtitle:
      "Professional team, cutting-edge technology, providing comprehensive software development services",

// Feature items
    customDevelopment: "Custom Software Development",
    customDevelopmentDesc:
      "Tailored high-quality software solutions based on your business needs, ensuring perfect alignment with your workflow.",
    webAppSolutions: "Web & App Outsourcing Solutions",
    webAppSolutionsDesc:
      "Professional frontend and mobile app development team, creating modern, responsive digital products for you.",
    aiIntegration: "Automation & AI Integration",
    aiIntegrationDesc:
      "Leveraging the latest AI technology to inject intelligent elements into your business processes, enhancing efficiency and competitiveness.",
    deliverySupport: "Efficient Delivery & Long-term Support",
    deliverySupportDesc:
      "Agile development process ensures rapid delivery, comprehensive after-sales service system safeguards your project.",

// Process
    processTitle: "Collaboration Process",
    processSubtitle: "Simple three steps to start your digital transformation journey",

// Process steps
    submitRequirements: "Submit Requirements",
    submitRequirementsDesc:
      "Understand your project requirements in detail and develop the most suitable technical solution",
    projectDevelopment: "Project Development",
    projectDevelopmentDesc:
      "Professional team follows agile development process to efficiently complete project development",
    acceptanceOnline: "Acceptance & Launch",
    acceptanceOnlineDesc:
      "Rigorous testing and acceptance to ensure project quality, assist with deployment and launch",

// Portfolio
    portfolioTitle: "Success Stories",
    portfolioSubtitle: "We provide quality software solutions for clients across various industries",

// Portfolio projects
    smartEcommerce: "Smart E-commerce Platform",
    smartEcommerceDesc:
      "Full-stack e-commerce solution for a renowned brand, integrated with AI recommendation system, improving user experience by 30%",
    enterpriseManagement: "Enterprise Management System",
    enterpriseManagementDesc:
      "Customized enterprise resource management system, achieving business process automation, improving work efficiency by 50%",
    mobileAppDev: "Mobile Application Development",
    mobileAppDevDesc:
      "Cross-platform mobile application supporting iOS and Android, with user activity rate reaching over 85%",
    dataAnalytics: "Data Analytics Platform",
    dataAnalyticsDesc: "Big data visualization analytics platform helping enterprises make smarter business decisions",

// Contact
    contactTitle: "Get In Touch",
    contactSubtitle: "Ready to transform your business? Let's discuss your project",
    startYourProject: "Start Your Project",
    sendMessage: "Send Message",
    name: "Name",
    email: "Email",
    projectRequirements: "Project Requirements",
    enterYourName: "Please enter your name",
    enterYourEmail: "Please enter your email address",
    describeYourProject: "Please describe your project requirements in detail...",
    emailContact: "Email Contact",
    phoneConsult: "Phone Consultation",
    companyAddress: "Company Address",
    whyChooseUs: "Why Choose Us?",

// Footer
    footerText:
      "Professional software outsourcing services, committed to providing high-quality customized software solutions for enterprises, empowering digital transformation.",
    servicesTitle: "Services",
    customSoftwareDev: "Custom Software Development",
    webAppDev: "Web Application Development",
    mobileAppDev: "Mobile Application Development",
    aiTechIntegration: "AI Technology Integration",
    systemMaintenance: "System Maintenance & Support",
    contactInfo: "Contact Information",
    emailLabel: "Email",
    phoneLabel: "Phone",
    addressLabel: "Address",
    workingHours: "Working Hours",
    emailAddress: "contact@qingqi-tech.com",
    phoneNumber: "+86 138-0000-0000",
    companyAddressText: "Shenzhen, Nanshan District, China",
    workingHoursText: "Monday to Friday 9:00-18:00",
    allRightsReserved: "All rights reserved.",
    builtWithLove: "Built with ❤️ by QingQi Tech | Technology Creates Value",

// Assessment Booking
    assessmentTitle: "Book Your 30-Minute Assessment",
    assessmentSubtitle: "Let's discuss your project requirements and explore how we can help transform your business",
    outsourcingType: "Outsourcing Type",
    selectOutsourcingType: "Select your outsourcing type",
    customSoftware: "Custom Software Development",
    webApplication: "Web Application",
    mobileApplication: "Mobile Application",
    aiIntegration: "AI Integration & Automation",
    systemMaintenance: "System Maintenance & Support",
    budgetRange: "Budget Range",
    selectBudgetRange: "Select your budget range",
    budget5k: "$5,000 - $15,000",
    budget15k: "$15,000 - $50,000",
    budget50k: "$50,000 - $100,000",
    budget100k: "$100,000+",
    describeRequirements: "Please describe your project requirements, goals, and any specific features you need...",
    preferredDate: "Preferred Meeting Date",
    selectDate: "Select your preferred date",
    preferredTime: "Preferred Time",
    selectTime: "Select your preferred time",
    morning: "Morning (9:00 - 12:00)",
    afternoon: "Afternoon (13:00 - 17:00)",
    evening: "Evening (18:00 - 21:00)",
    contactMethod: "Preferred Contact Method",
    selectContactMethod: "How would you like us to contact you?",
    videoCall: "Video Call (Zoom/Teams)",
    phoneCall: "Phone Call",
    inPerson: "In-Person Meeting",
    enterCompanyName: "Enter your company name (optional)",
    enterPhoneNumber: "Enter your phone number",
    additionalNotes: "Additional Notes",
    additionalNotesPlaceholder: "Any additional information or questions you'd like to discuss...",
    scheduleAssessment: "Schedule Assessment",
    requiredField: "This field is required",
    invalidEmail: "Please enter a valid email address",
    bookingSuccess: "Assessment Booked Successfully!",
    bookingSuccessMessage: "We'll contact you within 24 hours to confirm your assessment appointment.",
  },
  zh: {
    // Navigation
    services: "服务",
    process: "流程",
    portfolio: "案例",
    contact: "联系",
    contactUs: "预约30分钟评估",

// Hero Section
    companyName: "轻启科技",
    heroTitle: "为企业打造智能软件解决方案",
    heroSubtitle: "专业的软件外包服务，从定制开发到AI集成，助力您的业务数字化转型",
    contactUsNow: "预约30分钟评估",
    viewPortfolio: "查看案例",

// Trust Bar
    trustBarText:
      "服务行业：电商、金融、医疗、制造业 | 技术栈：Next.js / Tailwind / n8n / Make / Pipedream / GSheet / Retool",

// Features
    featuresTitle: "核心服务",
    featuresSubtitle: "专业团队，前沿技术，为您提供全方位的软件开发服务",

// Feature items
    customDevelopment: "定制化软件开发",
    customDevelopmentDesc: "根据您的业务需求，量身定制高质量的软件解决方案，确保完美契合您的工作流程。",
    webAppSolutions: "Web & App 外包解决方案",
    webAppSolutionsDesc: "专业的前端和移动应用开发团队，为您打造现代化、响应式的数字化产品。",
    aiIntegration: "自动化与AI集成",
    aiIntegrationDesc: "利用最新的人工智能技术，为您的业务流程注入智能化元素，提升效率和竞争力。",
    deliverySupport: "高效交付与长期支持",
    deliverySupportDesc: "敏捷开发流程确保快速交付，完善的售后服务体系为您的项目保驾护航。",

// Process
    processTitle: "合作流程",
    processSubtitle: "简单三步，开启您的数字化转型之旅",

// Process steps
    submitRequirements: "提交需求",
    submitRequirementsDesc: "详细了解您的项目需求，制定最适合的技术方案",
    projectDevelopment: "项目开发",
    projectDevelopmentDesc: "专业团队按照敏捷开发流程，高效完成项目开发",
    acceptanceOnline: "验收上线",
    acceptanceOnlineDesc: "严格测试验收，确保项目质量，协助部署上线",

// Portfolio
    portfolioTitle: "成功案例",
    portfolioSubtitle: "我们为各行各业的客户提供了优质的软件解决方案",

// Portfolio projects
    smartEcommerce: "智能电商平台",
    smartEcommerceDesc: "为某知名品牌打造的全栈电商解决方案，集成AI推荐系统，提升用户体验30%",
    enterpriseManagement: "企业管理系统",
    enterpriseManagementDesc: "定制化的企业资源管理系统，实现业务流程自动化，提高工作效率50%",
    mobileAppDev: "移动应用开发",
    mobileAppDevDesc: "跨平台移动应用，支持iOS和Android，用户活跃度达到85%以上",
    dataAnalytics: "数据分析平台",
    dataAnalyticsDesc: "大数据可视化分析平台，帮助企业做出更明智的商业决策",

// Contact
    contactTitle: "联系我们",
    contactSubtitle: "准备好转型您的业务了吗？让我们讨论您的项目",
    startYourProject: "开启你的项目",
    sendMessage: "发送消息",
    name: "姓名",
    email: "邮箱",
    projectRequirements: "项目需求",
    enterYourName: "请输入您的姓名",
    enterYourEmail: "请输入您的邮箱地址",
    describeYourProject: "请详细描述您的项目需求...",
    emailContact: "邮箱联系",
    phoneConsult: "电话咨询",
    companyAddress: "公司地址",
    whyChooseUs: "为什么选择我们？",

// Footer
    footerText: "专业的软件外包服务商，致力于为企业提供高质量的定制化软件解决方案，助力数字化转型。",
    servicesTitle: "服务项目",
    customSoftwareDev: "定制软件开发",
    webAppDev: "Web应用开发",
    mobileAppDev: "移动应用开发",
    aiTechIntegration: "AI技术集成",
    systemMaintenance: "系统维护支持",
    contactInfo: "联系方式",
    emailLabel: "邮箱",
    phoneLabel: "电话",
    addressLabel: "地址",
    workingHours: "工作时间",
    emailAddress: "contact@qingqi-tech.com",
    phoneNumber: "+86 138-0000-0000",
    companyAddressText: "中国 · 深圳 · 南山区",
    workingHoursText: "周一至周五 9:00-18:00",
    allRightsReserved: "保留所有权利.",
    builtWithLove: "Built with ❤️ by 轻启科技 | 让技术创造价值",

// Assessment Booking
    assessmentTitle: "预约您的30分钟评估",
    assessmentSubtitle: "让我们讨论您的项目需求，探索如何帮助您的业务转型",
    outsourcingType: "外包类型",
    selectOutsourcingType: "选择您的外包类型",
    customSoftware: "定制软件开发",
    webApplication: "Web应用开发",
    mobileApplication: "移动应用开发",
    aiIntegration: "AI集成与自动化",
    systemMaintenance: "系统维护与支持",
    budgetRange: "预算范围",
    selectBudgetRange: "选择您的预算范围",
    budget5k: "5万 - 15万人民币",
    budget15k: "15万 - 50万人民币",
    budget50k: "50万 - 100万人民币",
    budget100k: "100万人民币以上",
    describeRequirements: "请描述您的项目需求、目标以及所需的具体功能...",
    preferredDate: "首选会议日期",
    selectDate: "选择您的首选日期",
    preferredTime: "首选时间",
    selectTime: "选择您的首选时间",
    morning: "上午 (9:00 - 12:00)",
    afternoon: "下午 (13:00 - 17:00)",
    evening: "晚上 (18:00 - 21:00)",
    contactMethod: "首选联系方式",
    selectContactMethod: "您希望我们如何联系您？",
    videoCall: "视频通话 (Zoom/Teams)",
    phoneCall: "电话通话",
    inPerson: "面对面会议",
    enterCompanyName: "输入您的公司名称（可选）",
    enterPhoneNumber: "输入您的电话号码",
    additionalNotes: "附加说明",
    additionalNotesPlaceholder: "您想讨论的任何附加信息或问题...",
    scheduleAssessment: "预约评估",
    requiredField: "此字段为必填项",
    invalidEmail: "请输入有效的邮箱地址",
    bookingSuccess: "评估预约成功！",
    bookingSuccessMessage: "我们将在24小时内联系您确认评估预约。",
  },
}

export function getTranslation(language: Language, key: keyof typeof translations.en): string {
  return translations[language][key] || translations.en[key]
}
[V0_FILE]typescriptreact:file="app/assessment/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useLanguage } from "@/hooks/use-language"
import { getTranslation } from "@/lib/i18n"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Calendar, Clock, Users, Zap, CheckCircle } from "lucide-react"

interface FormData {
  name: string
  email: string
  companyName: string
  phoneNumber: string
  outsourcingType: string
  budgetRange: string
  projectRequirements: string
  preferredDate: string
  preferredTime: string
  contactMethod: string
  additionalNotes: string
}

export default function AssessmentPage() {
  const { language } = useLanguage()
  const t = (key: string) => getTranslation(language, key as any)

const [formData, setFormData] = useState<FormData>({
    name: "",
    email: "",
    companyName: "",
    phoneNumber: "",
    outsourcingType: "",
    budgetRange: "",
    projectRequirements: "",
    preferredDate: "",
    preferredTime: "",
    contactMethod: "",
    additionalNotes: "",
  })

const [isSubmitted, setIsSubmitted] = useState(false)
  const [errors, setErrors] = useState<Partial<FormData>>({})

const validateForm = () => {
    const newErrors: Partial<FormData> = {}

if (!formData.name.trim()) newErrors.name = t("requiredField")
    if (!formData.email.trim()) newErrors.email = t("requiredField")
    else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = t("invalidEmail")
    if (!formData.phoneNumber.trim()) newErrors.phoneNumber = t("requiredField")
    if (!formData.outsourcingType) newErrors.outsourcingType = t("requiredField")
    if (!formData.budgetRange) newErrors.budgetRange = t("requiredField")
    if (!formData.projectRequirements.trim()) newErrors.projectRequirements = t("requiredField")
    if (!formData.preferredDate) newErrors.preferredDate = t("requiredField")
    if (!formData.preferredTime) newErrors.preferredTime = t("requiredField")
    if (!formData.contactMethod) newErrors.contactMethod = t("requiredField")

setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (validateForm()) {
      // Here you would typically send the data to your backend
      console.log("Assessment booking submitted:", formData)
      setIsSubmitted(true)
    }
  }

const handleInputChange = (field: keyof FormData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: undefined }))
    }
  }

if (isSubmitted) {
    return (
      <div className="min-h-screen bg-black text-white flex items-center justify-center p-4">
        <Card className="w-full max-w-md bg-gray-900 border-green-500/20">
          <CardContent className="p-8 text-center">
            <CheckCircle className="w-16 h-16 text-green-400 mx-auto mb-4 neon-glow" />
            <h2 className="text-2xl font-bold text-green-400 mb-2 neon-text">{t("bookingSuccess")}</h2>
            <p className="text-gray-300 mb-6">{t("bookingSuccessMessage")}</p>
            <Button
              onClick={() => (window.location.href = "/")}
              className="neon-glow neon-hover bg-green-600 hover:bg-green-700"
            >
              Back to Home
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-black text-white">
      {/* Hero Section */}
      <section className="relative py-20 px-4 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-green-900/20 to-black"></div>
        <div className="absolute inset-0">
          <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-green-500/10 rounded-full blur-3xl"></div>
          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
        </div>

<div className="relative max-w-4xl mx-auto text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-6 neon-text text-green-400">{t("assessmentTitle")}</h1>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">{t("assessmentSubtitle")}</p>
        </div>
      </section>

{/* Assessment Form */}
      <section className="py-16 px-4">
        <div className="max-w-4xl mx-auto">
          <Card className="bg-gray-900/50 border-green-500/20 backdrop-blur-sm">
            <CardHeader className="text-center pb-8">
              <div className="flex items-center justify-center gap-4 mb-4">
                <Calendar className="w-8 h-8 text-green-400" />
                <Clock className="w-8 h-8 text-green-400" />
                <Users className="w-8 h-8 text-green-400" />
              </div>
              <CardTitle className="text-2xl text-green-400">Assessment Details</CardTitle>
              <CardDescription className="text-gray-300">
                Fill out the form below to schedule your personalized assessment
              </CardDescription>
            </CardHeader>

<CardContent>
              <form onSubmit={handleSubmit} className="space-y-8">
                {/* Personal Information */}
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="name" className="text-green-400 font-semibold">
                      {t("name")} *
                    </Label>
                    <Input
                      id="name"
                      value={formData.name}
                      onChange={(e) => handleInputChange("name", e.target.value)}
                      placeholder={t("enterYourName")}
                      className="bg-gray-800 border-gray-700 text-white focus:border-green-500 focus:ring-green-500/20"
                    />
                    {errors.name && <p className="text-red-400 text-sm">{errors.name}</p>}
                  </div>

<div className="space-y-2">
                    <Label htmlFor="email" className="text-green-400 font-semibold">
                      {t("email")} *
                    </Label>
                    <Input
                      id="email"
                      type="email"
                      value={formData.email}
                      onChange={(e) => handleInputChange("email", e.target.value)}
                      placeholder={t("enterYourEmail")}
                      className="bg-gray-800 border-gray-700 text-white focus:border-green-500 focus:ring-green-500/20"
                    />
                    {errors.email && <p className="text-red-400 text-sm">{errors.email}</p>}
                  </div>
                </div>

<div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="companyName" className="text-green-400 font-semibold">
                      {t("companyName")}
                    </Label>
                    <Input
                      id="companyName"
                      value={formData.companyName}
                      onChange={(e) => handleInputChange("companyName", e.target.value)}
                      placeholder={t("enterCompanyName")}
                      className="bg-gray-800 border-gray-700 text-white focus:border-green-500 focus:ring-green-500/20"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="phoneNumber" className="text-green-400 font-semibold">
                      {t("phoneNumber")} *
                    </Label>
                    <Input
                      id="phoneNumber"
                      value={formData.phoneNumber}
                      onChange={(e) => handleInputChange("phoneNumber", e.target.value)}
                      placeholder={t("enterPhoneNumber")}
                      className="bg-gray-800 border-gray-700 text-white focus:border-green-500 focus:ring-green-500/20"
                    />
                    {errors.phoneNumber && <p className="text-red-400 text-sm">{errors.phoneNumber}</p>}
                  </div>
                </div>

{/* Project Details */}
                <div className="space-y-6 p-6 bg-gray-800/30 rounded-lg border border-green-500/10">
                  <h3 className="text-xl font-semibold text-green-400 flex items-center gap-2">
                    <Zap className="w-5 h-5" />
                    Project Information
                  </h3>

<div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label className="text-green-400 font-semibold">{t("outsourcingType")} *</Label>
                      <Select
                        value={formData.outsourcingType}
                        onValueChange={(value) => handleInputChange("outsourcingType", value)}
                      >
                        <SelectTrigger className="bg-gray-800 border-gray-700 text-white focus:border-green-500">
                          <SelectValue placeholder={t("selectOutsourcingType")} />
                        </SelectTrigger>
                        <SelectContent className="bg-gray-800 border-gray-700">
                          <SelectItem value="custom-software">{t("customSoftware")}</SelectItem>
                          <SelectItem value="web-application">{t("webApplication")}</SelectItem>
                          <SelectItem value="mobile-application">{t("mobileApplication")}</SelectItem>
                          <SelectItem value="ai-integration">{t("aiIntegration")}</SelectItem>
                          <SelectItem value="system-maintenance">{t("systemMaintenance")}</SelectItem>
                        </SelectContent>
                      </Select>
                      {errors.outsourcingType && <p className="text-red-400 text-sm">{errors.outsourcingType}</p>}
                    </div>

<div className="space-y-2">
                      <Label className="text-green-400 font-semibold">{t("budgetRange")} *</Label>
                      <Select
                        value={formData.budgetRange}
                        onValueChange={(value) => handleInputChange("budgetRange", value)}
                      >
                        <SelectTrigger className="bg-gray-800 border-gray-700 text-white focus:border-green-500">
                          <SelectValue placeholder={t("selectBudgetRange")} />
                        </SelectTrigger>
                        <SelectContent className="bg-gray-800 border-gray-700">
                          <SelectItem value="5k-15k">{t("budget5k")}</SelectItem>
                          <SelectItem value="15k-50k">{t("budget15k")}</SelectItem>
                          <SelectItem value="50k-100k">{t("budget50k")}</SelectItem>
                          <SelectItem value="100k+">{t("budget100k")}</SelectItem>
                        </SelectContent>
                      </Select>
                      {errors.budgetRange && <p className="text-red-400 text-sm">{errors.budgetRange}</p>}
                    </div>
                  </div>

<div className="space-y-2">
                    <Label className="text-green-400 font-semibold">{t("projectRequirements")} *</Label>
                    <Textarea
                      value={formData.projectRequirements}
                      onChange={(e) => handleInputChange("projectRequirements", e.target.value)}
                      placeholder={t("describeRequirements")}
                      rows={4}
                      className="bg-gray-800 border-gray-700 text-white focus:border-green-500 focus:ring-green-500/20"
                    />
                    {errors.projectRequirements && <p className="text-red-400 text-sm">{errors.projectRequirements}</p>}
                  </div>
                </div>

{/* Scheduling */}
                <div className="space-y-6 p-6 bg-gray-800/30 rounded-lg border border-green-500/10">
                  <h3 className="text-xl font-semibold text-green-400 flex items-center gap-2">
                    <Calendar className="w-5 h-5" />
                    Scheduling Preferences
                  </h3>

<div className="grid md:grid-cols-3 gap-6">
                    <div className="space-y-2">
                      <Label className="text-green-400 font-semibold">{t("preferredDate")} *</Label>
                      <Input
                        type="date"
                        value={formData.preferredDate}
                        onChange={(e) => handleInputChange("preferredDate", e.target.value)}
                        min={new Date().toISOString().split("T")[0]}
                        className="bg-gray-800 border-gray-700 text-white focus:border-green-500 focus:ring-green-500/20"
                      />
                      {errors.preferredDate && <p className="text-red-400 text-sm">{errors.preferredDate}</p>}
                    </div>

<div className="space-y-2">
                      <Label className="text-green-400 font-semibold">{t("preferredTime")} *</Label>
                      <Select
                        value={formData.preferredTime}
                        onValueChange={(value) => handleInputChange("preferredTime", value)}
                      >
                        <SelectTrigger className="bg-gray-800 border-gray-700 text-white focus:border-green-500">
                          <SelectValue placeholder={t("selectTime")} />
                        </SelectTrigger>
                        <SelectContent className="bg-gray-800 border-gray-700">
                          <SelectItem value="morning">{t("morning")}</SelectItem>
                          <SelectItem value="afternoon">{t("afternoon")}</SelectItem>
                          <SelectItem value="evening">{t("evening")}</SelectItem>
                        </SelectContent>
                      </Select>
                      {errors.preferredTime && <p className="text-red-400 text-sm">{errors.preferredTime}</p>}
                    </div>

<div className="space-y-2">
                      <Label className="text-green-400 font-semibold">{t("contactMethod")} *</Label>
                      <Select
                        value={formData.contactMethod}
                        onValueChange={(value) => handleInputChange("contactMethod", value)}
                      >
                        <SelectTrigger className="bg-gray-800 border-gray-700 text-white focus:border-green-500">
                          <SelectValue placeholder={t("selectContactMethod")} />
                        </SelectTrigger>
                        <SelectContent className="bg-gray-800 border-gray-700">
                          <SelectItem value="video-call">{t("videoCall")}</SelectItem>
                          <SelectItem value="phone-call">{t("phoneCall")}</SelectItem>
                          <SelectItem value="in-person">{t("inPerson")}</SelectItem>
                        </SelectContent>
                      </Select>
                      {errors.contactMethod && <p className="text-red-400 text-sm">{errors.contactMethod}</p>}
                    </div>
                  </div>
                </div>

{/* Additional Notes */}
                <div className="space-y-2">
                  <Label className="text-green-400 font-semibold">{t("additionalNotes")}</Label>
                  <Textarea
                    value={formData.additionalNotes}
                    onChange={(e) => handleInputChange("additionalNotes", e.target.value)}
                    placeholder={t("additionalNotesPlaceholder")}
                    rows={3}
                    className="bg-gray-800 border-gray-700 text-white focus:border-green-500 focus:ring-green-500/20"
                  />
                </div>

{/* Submit Button */}
                <div className="text-center pt-6">
                  <Button
                    type="submit"
                    size="lg"
                    className="neon-glow neon-hover bg-green-600 hover:bg-green-700 text-white font-semibold px-12 py-4 text-lg"
                  >
                    {t("scheduleAssessment")}
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  )
}</article></body></html>