[V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 100%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 100%; --accent-foreground: 0 0% 0%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 15.9%; --input: 0 0% 15.9%; --ring: 0 0% 100%; --radius: 0.5rem; } * { @apply border-border; } html, body { height: 100dvh; width: 100%; overflow: hidden; touch-action: none; position: fixed; } body { @apply bg-background text-foreground; font-family: "Geist Mono", monospace; background-color: black; } [V0_FILE]typescriptreact:file="app/api/rodin/route.ts" isMerged="true" import { NextResponse } from "next/server" const API_KEY = "vibecoding" // Public API key export async function POST(request: Request) { try { // Get the form data from the request const formData = await request.formData() // Forward the request to the Hyper3D API const response = await fetch("https://hyperhuman.deemos.com/api/v2/rodin", { method: "POST", headers: { Authorization: `Bearer ${API_KEY}`, }, body: formData, }) if (!response.ok) { const errorText = await response.text() return NextResponse.json( { error: `API request failed: ${response.status}`, details: errorText }, { status: response.status }, ) } const data = await response.json() return NextResponse.json(data) } catch (error) { console.error("Error in Rodin API route:", error) return NextResponse.json({ error: "Failed to process request" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/status/route.ts" isMerged="true" import { NextResponse } from "next/server" const API_KEY = "vibecoding" // Public API key export async function POST(request: Request) { try { const body = await request.json() const { subscription_key } = body if (!subscription_key) { return NextResponse.json({ error: "Missing subscription_key" }, { status: 400 }) } const response = await fetch("https://hyperhuman.deemos.com/api/v2/status", { method: "POST", headers: { Authorization: `Bearer ${API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ subscription_key }), }) if (!response.ok) { const errorText = await response.text() return NextResponse.json( { error: `Status check failed: ${response.status}`, details: errorText }, { status: response.status }, ) } const data = await response.json() return NextResponse.json(data) } catch (error) { console.error("Error in Status API route:", error) return NextResponse.json({ error: "Failed to check status" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/download/route.ts" isMerged="true" import { NextResponse } from "next/server" const API_KEY = "vibecoding" // Public API key export async function POST(request: Request) { try { const body = await request.json() const { task_uuid } = body if (!task_uuid) { return NextResponse.json({ error: "Missing task_uuid" }, { status: 400 }) } const response = await fetch("https://hyperhuman.deemos.com/api/v2/download", { method: "POST", headers: { Authorization: `Bearer ${API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ task_uuid }), }) if (!response.ok) { const errorText = await response.text() return NextResponse.json( { error: `Download failed: ${response.status}`, details: errorText }, { status: response.status }, ) } const data = await response.json() return NextResponse.json(data) } catch (error) { console.error("Error in Download API route:", error) return NextResponse.json({ error: "Failed to download model" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/proxy-download/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET(request: Request) { try { const url = new URL(request.url) const fileUrl = url.searchParams.get("url") if (!fileUrl) { return NextResponse.json({ error: "Missing url parameter" }, { status: 400 }) } // Fetch the file from the original URL const response = await fetch(fileUrl) if (!response.ok) { return NextResponse.json({ error: `Failed to fetch file: ${response.status}` }, { status: response.status }) } // Get the file content and content type const fileContent = await response.arrayBuffer() const contentType = response.headers.get("content-type") || "application/octet-stream" // Create a new response with the file content and appropriate headers return new NextResponse(fileContent, { headers: { "Content-Type": contentType, "Content-Disposition": `attachment; filename="${fileUrl.split("/").pop()}"`, "Access-Control-Allow-Origin": "*", "Cache-Control": "no-cache", }, }) } catch (error) { console.error("Error in proxy download route:", error) return NextResponse.json({ error: "Failed to proxy download" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/auto-resize-textarea.tsx" isMerged="true" "use client" import React, { useEffect, useRef } from "react" import { Textarea } from "@/components/ui/textarea" import { cn } from "@/lib/utils" interface AutoResizeTextareaProps extends React.TextareaHTMLAttributes { className?: string } const AutoResizeTextarea = React.forwardRef( ({ className, ...props }, ref) => { const textareaRef = useRef(null) // Combine the forwarded ref with our local ref const setRefs = (element: HTMLTextAreaElement) => { textareaRef.current = element if (typeof ref === "function") { ref(element) } else if (ref) { ref.current = element } } const resizeTextarea = () => { if (textareaRef.current) { // Reset height to auto to get the correct scrollHeight textareaRef.current.style.height = "auto" // Set the height to the scrollHeight, but ensure it's at least the line height const scrollHeight = textareaRef.current.scrollHeight textareaRef.current.style.height = `${scrollHeight}px` } } // Resize on initial render useEffect(() => { if (textareaRef.current) { // Start with single line height const lineHeight = Number.parseInt(getComputedStyle(textareaRef.current).lineHeight) textareaRef.current.style.height = `${lineHeight}px` // Then adjust if there's content if (textareaRef.current.value) { resizeTextarea() } } }, []) // Handle input changes const handleInput = (e: React.ChangeEvent) => { resizeTextarea() if (props.onChange) { props.onChange(e) } } return (

)
  },
)

AutoResizeTextarea.displayName = "AutoResizeTextarea"

export default AutoResizeTextarea

[V0_FILE]typescriptreact:file="components/progress-bar.tsx" isMerged="true"
"use client"

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

interface ProgressBarProps {
  totalTasks: number
  completedTasks: number
  className?: string
  isIndeterminate?: boolean
}

export default function ProgressBar({
  totalTasks,
  completedTasks,
  className,
  isIndeterminate = false,
}: ProgressBarProps) {
  // Calculate percentage
  const percentage = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0

return (
    <div className={cn("w-full bg-black rounded-full h-2 overflow-hidden border border-white p-[1px]", className)}>
      {isIndeterminate ? (
        <div className="h-full relative w-full">
          <div className="h-full bg-white absolute w-[40%] animate-progress-indeterminate rounded-full" />
        </div>
      ) : (
        <div className="h-full bg-white transition-all duration-500 rounded-full" style={{ width: `${percentage}%` }} />
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-media-query.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

useEffect(() => {
    const media = window.matchMedia(query)

// Update the state initially
    setMatches(media.matches)

// Define a callback function to handle changes
    const listener = (e: MediaQueryListEvent) => {
      setMatches(e.matches)
    }

// Add the callback as a listener for changes to the media query
    media.addEventListener("change", listener)

// Clean up
    return () => {
      media.removeEventListener("change", listener)
    }
  }, [query])

return matches
}

[V0_FILE]typescriptreact:file="components/status-indicator.tsx" isMerged="true"
"use client"

import ProgressBar from "./progress-bar"

interface StatusIndicatorProps {
  isLoading: boolean
  jobStatuses: Array<{ uuid: string; status: string }>
}

export default function StatusIndicator({ isLoading, jobStatuses }: StatusIndicatorProps) {
  if (!isLoading) {
    return null
  }

// Add one additional task to the total count
  const actualTasks = jobStatuses.length
  const totalTasks = actualTasks > 0 ? actualTasks + 1 : 0

// Count the first task (initial request) as completed when we have job statuses
  const completedJobTasks = jobStatuses.filter((job) => job.status === "Done").length
  const initialRequestComplete = actualTasks > 0 ? 1 : 0
  const completedTasks = completedJobTasks + initialRequestComplete

const showProgress = actualTasks > 0
  const isIndeterminate = actualTasks === 0

return (
    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
      <div className="w-64">
        <ProgressBar totalTasks={totalTasks} completedTasks={completedTasks} isIndeterminate={isIndeterminate} />
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="lib/form-schema.ts" isMerged="true"
import * as z from "zod"

export const formSchema = z
  .object({
    images: z.array(z.instanceof(File)).optional(),
    prompt: z.string().optional(),
    condition_mode: z.enum(["concat", "fuse"]).default("concat"),
    quality: z.enum(["high", "medium", "low", "extra-low"]).default("medium"),
    geometry_file_format: z.enum(["glb", "usdz", "fbx", "obj", "stl"]).default("glb"),
    use_hyper: z.boolean().default(false),
    tier: z.enum(["Regular", "Sketch"]).default("Regular"),
    TAPose: z.boolean().default(false),
    material: z.enum(["PBR", "Shaded"]).default("PBR"),
  })
  .refine(
    (data) => {
      // Require at least one of images or prompt
      return (data.images && data.images.length > 0) || (data.prompt && data.prompt.length > 0)
    },
    {
      message: "You must provide either images or a prompt",
      path: ["prompt"],
    },
  )

export type FormValues = z.infer<typeof formSchema>

[V0_FILE]typescriptreact:file="lib/api-service.ts" isMerged="true"
export async function submitRodinJob(formData: FormData) {
  const response = await fetch("/api/rodin", {
    method: "POST",
    body: formData,
  })

if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`)
  }

return await response.json()
}

export async function checkJobStatus(subscriptionKey: string) {
  const response = await fetch(`/api/status`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      subscription_key: subscriptionKey,
    }),
  })

if (!response.ok) {
    throw new Error(`Status check failed: ${response.status}`)
  }

return await response.json()
}

export async function downloadModel(taskUuid: string) {
  const response = await fetch(`/api/download`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      task_uuid: taskUuid,
    }),
  })

if (!response.ok) {
    throw new Error(`Download failed: ${response.status}`)
  }

return await response.json()
}

[V0_FILE]typescriptreact:file="components/model-component.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useThree } from "@react-three/fiber"
import { useGLTF, Center } from "@react-three/drei"
import LoadingSpinner from "./loading-spinner"

export default function ModelComponent({ url }: { url: string }) {
  const [isLoading, setIsLoading] = useState(true)
  const { scene } = useGLTF(url, undefined, undefined, (error) => {
    //console.error("Error loading model:", error)
  })
  const { camera } = useThree()

useEffect(() => {
    // Reset camera position when model changes - position higher to account for prompt container
    camera.position.set(0, 0, 5)

// Set loading to false when scene is loaded
    if (scene) {
      setIsLoading(false)
    }

return () => {
      setIsLoading(true)
    }
  }, [url, camera, scene])

if (isLoading) {
    return <LoadingSpinner />
  }

return (
    <Center>
      <primitive object={scene} scale={1.5} />
    </Center>
  )
}

[V0_FILE]typescriptreact:file="components/loading-placeholder.tsx" isMerged="true"
"use client"

export default function LoadingPlaceholder() {
  return (
    <>
      <mesh>
        <boxGeometry args={[1.5, 1.5, 1.5]} />
        <meshStandardMaterial color="#cccccc" wireframe={true} transparent opacity={0.5} />
      </mesh>

<mesh>
        <sphereGeometry args={[0.75, 32, 32]} />
        <meshStandardMaterial color="#aaaaaa" wireframe={true} transparent opacity={0.5} />
      </mesh>
    </>
  )
}

[V0_FILE]typescriptreact:file="components/scene-setup.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { useThree } from "@react-three/fiber"

export default function SceneSetup() {
  const { scene } = useThree()

useEffect(() => {
    // Set background to transparent to show the CSS background
    scene.background = null
  }, [scene])

return null
}

[V0_FILE]typescriptreact:file="components/image-upload-area.tsx" isMerged="true"
"use client"

import { X } from "lucide-react"

interface ImageUploadAreaProps {
  previewUrls: string[]
  onRemoveImage: (index: number) => void
  isLoading?: boolean
}

export default function ImageUploadArea({ previewUrls, onRemoveImage, isLoading = false }: ImageUploadAreaProps) {
  if (previewUrls.length === 0) {
    return null
  }

return (
    <div className="flex flex-wrap gap-2 px-4 pt-3 pointer-events-auto">
      {previewUrls.map((url, index) => (
        <div key={index} className="relative h-16 w-16">
          <img
            src={url || "/placeholder.svg"}
            alt={`Preview ${index + 1}`}
            className="h-full w-full object-cover rounded-full"
          />
          {!isLoading && (
            <button type="button" onClick={() => onRemoveImage(index)} className="absolute -top-1 -right-1">
              <X className="h-3 w-3 text-white" />
            </button>
          )}
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import { Geist } from "next/font/google"
import "./globals.css"

const geist = Geist({
  subsets: ["latin"],
  display: "swap",
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <head>
        <title>3D Model Generator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      </head>
      <body className="bg-black text-white">{children}</body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/options-dialog.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerFooter } from "@/components/ui/drawer"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { useMediaQuery } from "@/hooks/use-media-query"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface OptionsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  options: {
    condition_mode: "concat" | "fuse"
    quality: "high" | "medium" | "low" | "extra-low"
    geometry_file_format: "glb" | "usdz" | "fbx" | "obj" | "stl"
    use_hyper: boolean
    tier: "Regular" | "Sketch"
    TAPose: boolean
    material: "PBR" | "Shaded"
  }
  onOptionsChange: (options: any) => void
}

export default function OptionsDialog({ open, onOpenChange, options, onOptionsChange }: OptionsDialogProps) {
  const [localOptions, setLocalOptions] = useState(options)
  const isDesktop = useMediaQuery("(min-width: 768px)")

// Update local options when props change
  useEffect(() => {
    setLocalOptions(options)
  }, [options])

const handleChange = (key: string, value: any) => {
    setLocalOptions((prev) => {
      const updated = { ...prev, [key]: value }
      onOptionsChange(updated)
      return updated
    })
  }

const content = (
    <div className="py-2">
      <Tabs defaultValue="basic" className="w-full">
        <TabsList className="grid grid-cols-2 mb-4">
          <TabsTrigger value="basic" className="tracking-normal">
            Basic Settings
          </TabsTrigger>
          <TabsTrigger value="advanced" className="tracking-normal">
            Advanced
          </TabsTrigger>
        </TabsList>

<TabsContent value="basic" className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-white font-mono tracking-normal">Quality</Label>
              <Select value={localOptions.quality} onValueChange={(value) => handleChange("quality", value)}>
                <SelectTrigger className="bg-black border-[rgba(255,255,255,0.12)] text-white tracking-normal">
                  <SelectValue placeholder="Select quality" />
                </SelectTrigger>
                <SelectContent className="bg-black border-[rgba(255,255,255,0.12)] text-white">
                  <SelectItem value="high" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    High (50k)
                  </SelectItem>
                  <SelectItem value="medium" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    Medium (18k)
                  </SelectItem>
                  <SelectItem value="low" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    Low (8k)
                  </SelectItem>
                  <SelectItem value="extra-low" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    Extra Low (4k)
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label className="text-white font-mono tracking-normal">Format</Label>
              <Select
                value={localOptions.geometry_file_format}
                onValueChange={(value) => handleChange("geometry_file_format", value)}
              >
                <SelectTrigger className="bg-black border-[rgba(255,255,255,0.12)] text-white tracking-normal">
                  <SelectValue placeholder="Select format" />
                </SelectTrigger>
                <SelectContent className="bg-black border-[rgba(255,255,255,0.12)] text-white">
                  <SelectItem value="glb" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    GLB
                  </SelectItem>
                  <SelectItem value="usdz" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    USDZ
                  </SelectItem>
                  <SelectItem value="fbx" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    FBX
                  </SelectItem>
                  <SelectItem value="obj" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    OBJ
                  </SelectItem>
                  <SelectItem value="stl" className="tracking-normal hover:bg-[#111111] focus:bg-[#111111]">
                    STL
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm border-[rgba(255,255,255,0.12)] bg-black/50">
              <div>
                <Label className="text-white font-mono tracking-normal">Use Hyper</Label>
                <p className="text-gray-400 text-xs tracking-normal">Better details</p>
              </div>
              <Switch
                checked={localOptions.use_hyper}
                onCheckedChange={(checked) => handleChange("use_hyper", checked)}
              />
            </div>

<div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm border-[rgba(255,255,255,0.12)] bg-black/50">
              <div>
                <Label className="text-white font-mono tracking-normal">T/A Pose</Label>
                <p className="text-gray-400 text-xs tracking-normal">For humans</p>
              </div>
              <Switch checked={localOptions.TAPose} onCheckedChange={(checked) => handleChange("TAPose", checked)} />
            </div>
          </div>
        </TabsContent>

<TabsContent value="advanced" className="space-y-4">
          <div className="space-y-2">
            <Label className="text-white font-mono tracking-normal">Condition Mode</Label>
            <RadioGroup
              value={localOptions.condition_mode}
              onValueChange={(value) => handleChange("condition_mode", value)}
              className="flex flex-col space-y-1"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="concat" id="concat" className="border-white text-white" />
                <Label htmlFor="concat" className="text-white tracking-normal">
                  Concat (Single object, multiple views)
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="fuse" id="fuse" className="border-white text-white" />
                <Label htmlFor="fuse" className="text-white tracking-normal">
                  Fuse (Multiple objects)
                </Label>
              </div>
            </RadioGroup>
          </div>

<div className="space-y-2">
            <Label className="text-white font-mono tracking-normal">Material</Label>
            <RadioGroup
              value={localOptions.material}
              onValueChange={(value) => handleChange("material", value)}
              className="flex space-x-4"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="PBR" id="pbr" className="border-white text-white" />
                <Label htmlFor="pbr" className="text-white tracking-normal">
                  PBR
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="Shaded" id="shaded" className="border-white text-white" />
                <Label htmlFor="shaded" className="text-white tracking-normal">
                  Shaded
                </Label>
              </div>
            </RadioGroup>
          </div>

<div className="space-y-2">
            <Label className="text-white font-mono tracking-normal">Generation Tier</Label>
            <RadioGroup
              value={localOptions.tier}
              onValueChange={(value) => handleChange("tier", value)}
              className="flex space-x-4"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="Regular" id="regular" className="border-white text-white" />
                <Label htmlFor="regular" className="text-white tracking-normal">
                  Regular (Quality)
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="Sketch" id="sketch" className="border-white text-white" />
                <Label htmlFor="sketch" className="text-white tracking-normal">
                  Sketch (Speed)
                </Label>
              </div>
            </RadioGroup>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )

if (isDesktop) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="bg-black border-[rgba(255,255,255,0.12)] text-white max-w-md">
          <DialogHeader>
            <DialogTitle className="text-xl text-white font-mono tracking-normal">Options</DialogTitle>
          </DialogHeader>
          {content}
        </DialogContent>
      </Dialog>
    )
  }

return (
    <Drawer open={open} onOpenChange={onOpenChange}>
      <DrawerContent className="bg-black border-t border-[rgba(255,255,255,0.12)] text-white">
        <div className="mx-auto w-full max-w-md">
          <DrawerHeader>
            <DrawerTitle className="text-xl text-white font-mono tracking-normal">Options</DrawerTitle>
          </DrawerHeader>
          <div className="px-4">{content}</div>
          <DrawerFooter>
            <Button
              onClick={() => onOpenChange(false)}
              className="bg-gray-800 hover:bg-gray-700 text-white tracking-normal"
            >
              Apply Settings
            </Button>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

[V0_FILE]typescriptreact:file="components/form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import type * as z from "zod"
import { Form as UIForm } from "@/components/ui/form"
import { Button } from "@/components/ui/button"
import { ImageIcon, SlidersHorizontal, ArrowUp } from "lucide-react"
import AutoResizeTextarea from "./auto-resize-textarea"
import ImageUploadArea from "./image-upload-area"
import { formSchema } from "@/lib/form-schema"
import { useMediaQuery } from "@/hooks/use-media-query"
import { cn } from "@/lib/utils"

interface FormProps {
  isLoading: boolean
  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>
  onOpenOptions: () => void
}

export default function Form({ isLoading, onSubmit, onOpenOptions }: FormProps) {
  const [previewUrls, setPreviewUrls] = useState<string[]>([])
  const [isDragging, setIsDragging] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [isFocused, setIsFocused] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const dropAreaRef = useRef<HTMLDivElement>(null)
  const formRef = useRef<HTMLFormElement>(null)
  const dragCounter = useRef(0)
  const isMobile = useMediaQuery("(max-width: 768px)")

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      prompt: "",
      images: [],
      condition_mode: "concat",
      quality: "medium",
      geometry_file_format: "glb",
      use_hyper: false,
      tier: "Regular",
      TAPose: false,
      material: "PBR",
    },
  })

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || [])
    addImages(files)
  }

const addImages = (files: File[]) => {
    if (files.length === 0) return

// Limit to 5 images total
    const currentImages = form.getValues("images") || []
    const totalImages = currentImages.length + files.length

if (totalImages > 5) {
      setError("You can upload a maximum of 5 images")
      const allowedNewImages = 5 - currentImages.length
      files = files.slice(0, allowedNewImages)

if (files.length === 0) return
    }

const newPreviewUrls = files.map((file) => URL.createObjectURL(file))
    const updatedImages = [...currentImages, ...files]

setPreviewUrls([...previewUrls, ...newPreviewUrls])
    form.setValue("images", updatedImages)
  }

const removeImage = (index: number) => {
    const currentImages = form.getValues("images") || []
    const newImages = [...currentImages]
    newImages.splice(index, 1)

const newPreviewUrls = [...previewUrls]
    URL.revokeObjectURL(newPreviewUrls[index])
    newPreviewUrls.splice(index, 1)

setPreviewUrls(newPreviewUrls)
    form.setValue("images", newImages)
  }

const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

// Drag and drop handlers
  const handleDragEnter = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter.current += 1
    setIsDragging(true)
  }

const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter.current -= 1
    if (dragCounter.current === 0) {
      setIsDragging(false)
    }
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
  }

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter.current = 0
    setIsDragging(false)

if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      const files = Array.from(e.dataTransfer.files).filter((file) => file.type.startsWith("image/"))
      addImages(files)
    }
  }

const handleFocus = () => {
    setIsFocused(true)
  }

const handleBlur = () => {
    setIsFocused(false)
  }

const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    // On desktop, Enter submits the form unless Shift is pressed
    // On mobile, Enter creates a new line
    if (e.key === "Enter") {
      if (!isMobile && !e.shiftKey) {
        e.preventDefault()
        formRef.current?.requestSubmit()
      }
    }
  }

return (
    <UIForm {...form}>
      <form ref={formRef} onSubmit={form.handleSubmit(onSubmit)} className="relative">
        <div
          ref={dropAreaRef}
          className={cn(
            "relative bg-black/60 backdrop-blur-md rounded-[24px] overflow-hidden transition-all shadow-lg border border-[rgba(255,255,255,0.12)]",
            isDragging ? "ring-2 ring-white" : isFocused ? "ring-2 ring-white" : "",
            isLoading && "animate-pulse-loading pointer-events-none opacity-70",
          )}
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
        >
          {/* Image previews */}
          <ImageUploadArea previewUrls={previewUrls} onRemoveImage={removeImage} isLoading={isLoading} />

{isDragging && (
            <div className="absolute inset-0 bg-black/80 flex items-center justify-center pointer-events-none z-10">
              <p className="text-white font-medium tracking-normal text-lg">Drop images here</p>
            </div>
          )}
        </div>

{error && <div className="mt-2 text-red-400 text-sm tracking-normal">{error}</div>}
      </form>
    </UIForm>
  )
}

[V0_FILE]typescriptreact:file="components/loading-spinner.tsx" isMerged="true"
"use client"

import { useFrame } from "@react-three/fiber"
import { useRef } from "react"
import type * as THREE from "three"

export default function LoadingSpinner() {
  const groupRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (groupRef.current) {
      groupRef.current.rotation.y = clock.getElapsedTime() * 0.5
    }
  })

return (
    <group ref={groupRef}>
      <mesh>
        <torusGeometry args={[1, 0.1, 16, 32]} />
        <meshStandardMaterial color="#ffffff" wireframe={true} />
      </mesh>
      <mesh rotation={[Math.PI / 2, 0, 0]}>
        <torusGeometry args={[1, 0.1, 16, 32]} />
        <meshStandardMaterial color="#ffffff" wireframe={true} />
      </mesh>
    </group>
  )
}

[V0_FILE]typescriptreact:file="components/rodin.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ExternalLink, Download, ArrowLeft } from "lucide-react"
import type { FormValues } from "@/lib/form-schema"
import { submitRodinJob, checkJobStatus, downloadModel } from "@/lib/api-service"
import ModelViewer from "./model-viewer"
import Form from "./form"
import StatusIndicator from "./status-indicator"
import OptionsDialog from "./options-dialog"
import { Button } from "@/components/ui/button"
import { useMediaQuery } from "@/hooks/use-media-query"

export default function Rodin() {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [result, setResult] = useState<any>(null)
  const [isPolling, setIsPolling] = useState(false)
  const [modelUrl, setModelUrl] = useState<string | null>(null)
  const [downloadUrl, setDownloadUrl] = useState<string | null>(null)
  const [jobStatuses, setJobStatuses] = useState<Array<{ uuid: string; status: string }>>([])
  const [showOptions, setShowOptions] = useState(false)
  const [showPromptContainer, setShowPromptContainer] = useState(true)
  const isMobile = useMediaQuery("(max-width: 768px)")
  const [options, setOptions] = useState({
    condition_mode: "concat" as const,
    quality: "medium" as const,
    geometry_file_format: "glb" as const,
    use_hyper: false,
    tier: "Regular" as const,
    TAPose: false,
    material: "PBR" as const,
  })

// Prevent body scroll on mobile
  useEffect(() => {
    if (isMobile) {
      document.body.style.overflow = "hidden"
      document.documentElement.style.overflow = "hidden"

return () => {
        document.body.style.overflow = ""
        document.documentElement.style.overflow = ""
      }
    }
  }, [isMobile])

const handleOptionsChange = (newOptions: any) => {
    setOptions(newOptions)
  }

async function handleStatusCheck(subscriptionKey: string, taskUuid: string) {
    try {
      setIsPolling(true)

const data = await checkJobStatus(subscriptionKey)
      console.log("Status response:", data)

// Check if jobs array exists
      if (!data.jobs || !Array.isArray(data.jobs) || data.jobs.length === 0) {
        throw new Error("No jobs found in status response")
      }

// Update job statuses
      setJobStatuses(data.jobs)

// Check status of all jobs
      const allJobsDone = data.jobs.every((job: any) => job.status === "Done")
      const anyJobFailed = data.jobs.some((job: any) => job.status === "Failed")

if (allJobsDone) {
        setIsPolling(false)

// Get the download URL using the task UUID
        try {
          const downloadData = await downloadModel(taskUuid)
          console.log("Download response:", downloadData)

// Check if there's an error in the download response
          if (downloadData.error && downloadData.error !== "OK") {
            throw new Error(`Download error: ${downloadData.error}`)
          }

// Find the first GLB file to display in the 3D viewer
          if (downloadData.list && downloadData.list.length > 0) {
            const glbFile = downloadData.list.find((file: { name: string }) => file.name.toLowerCase().endsWith(".glb"))

if (glbFile) {
              const proxyUrl = `/api/proxy-download?url=${encodeURIComponent(glbFile.url)}`
              setModelUrl(proxyUrl)
              setDownloadUrl(glbFile.url)
              setIsLoading(false)
              setShowPromptContainer(false)
            } else {
              setError("No GLB file found in the results")
              setIsLoading(false)
            }
          } else {
            setError("No files available for download")
            setIsLoading(false)
          }
        } catch (downloadErr) {
          setError(`Failed to download model: ${downloadErr instanceof Error ? downloadErr.message : "Unknown error"}`)
          setIsLoading(false)
        }
      } else if (anyJobFailed) {
        setIsPolling(false)
        setError("Generation task failed")
        setIsLoading(false)
      } else {
        // Still processing, poll again after a delay
        setTimeout(() => handleStatusCheck(subscriptionKey, taskUuid), 3000)
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to check status")
      setIsPolling(false)
      setIsLoading(false)
    }
  }

async function handleSubmit(values: FormValues) {
    setIsLoading(true)
    setError(null)
    setResult(null)
    setModelUrl(null)
    setDownloadUrl(null)
    setJobStatuses([])

try {
      const formData = new FormData()

if (values.images && values.images.length > 0) {
        values.images.forEach((image) => {
          formData.append("images", image)
        })
      }

if (values.prompt) {
        formData.append("prompt", values.prompt)
      }

// Add all the advanced options
      formData.append("condition_mode", options.condition_mode)
      formData.append("geometry_file_format", options.geometry_file_format)
      formData.append("material", options.material)
      formData.append("quality", options.quality)
      formData.append("use_hyper", options.use_hyper.toString())
      formData.append("tier", options.tier)
      formData.append("TAPose", options.TAPose.toString())
      formData.append("mesh_mode", "Quad")
      formData.append("mesh_simplify", "true")
      formData.append("mesh_smooth", "true")

// Make the API call through our server route
      const data = await submitRodinJob(formData)
      console.log("Generation response:", data)

setResult(data)

// Start polling for status
      if (data.jobs && data.jobs.subscription_key && data.uuid) {
        handleStatusCheck(data.jobs.subscription_key, data.uuid)
      } else {
        setError("Missing required data for status checking")
        setIsLoading(false)
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "An unknown error occurred")
      setIsLoading(false)
    }
  }

const handleDownload = () => {
    if (downloadUrl) {
      window.open(downloadUrl, "_blank")
    }
  }

const handleBack = () => {
    setShowPromptContainer(true)
  }

const ExternalLinks = () => (
    <div className="flex items-center space-x-6">
      <a
        href="https://hyper3d.ai"
        target="_blank"
        rel="noopener noreferrer"
        className="flex items-center text-white hover:text-gray-300 transition-colors tracking-normal"
      >
        <span className="mr-1">Website</span>
        <ExternalLink className="h-4 w-4" />
      </a>
      <a
        href="https://developer.hyper3d.ai"
        target="_blank"
        rel="noopener noreferrer"
        className="flex items-center text-white hover:text-gray-300 transition-colors tracking-normal"
      >
        <span className="mr-1">API Docs</span>
        <ExternalLink className="h-4 w-4" />
      </a>
    </div>
  )

return (
    <div className="relative h-[100dvh] w-full">
      {/* Full-screen canvas */}
      <div className="absolute inset-0 z-0">
        <ModelViewer modelUrl={isLoading ? null : modelUrl} />
      </div>

{/* Overlay UI */}
      <div className="absolute inset-0 z-10 pointer-events-none">
        {/* Logo in top left */}
        <div className="absolute top-6 left-6 pointer-events-auto">
          <h1 className="text-3xl text-white font-normal tracking-normal">3D Model Generator</h1>
          <p className="text-gray-400 text-sm mt-1 tracking-normal">Powered by Hyper3D Rodin</p>
        </div>

{/* Links in top right - desktop only */}
        {!isMobile && (
          <div className="absolute top-6 right-6 pointer-events-auto">
            <ExternalLinks />
          </div>
        )}

{/* Loading indicator */}
        <StatusIndicator isLoading={isLoading} jobStatuses={jobStatuses} />

{/* Error message */}
        {error && (
          <div className="absolute top-20 left-1/2 transform -translate-x-1/2 bg-gray-900/80 text-white px-4 py-2 rounded-md tracking-normal">
            {error}
          </div>
        )}

{/* Model controls when model is loaded */}
        {!isLoading && modelUrl && !showPromptContainer && (
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex items-center gap-4 pointer-events-auto">
            <Button
              onClick={handleBack}
              className="bg-black hover:bg-gray-900 text-white border border-white/20 rounded-full px-4 py-2 flex items-center gap-2"
            >
              <ArrowLeft className="h-4 w-4" />
              <span className="tracking-normal">Back</span>
            </Button>

<Button
              onClick={handleDownload}
              className="bg-white hover:bg-gray-200 text-black rounded-full px-4 py-2 flex items-center gap-2"
            >
              <Download className="h-4 w-4" />
              <span className="tracking-normal">Download</span>
            </Button>
          </div>
        )}

{/* Input field at bottom */}
        {showPromptContainer && (
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 w-full max-w-3xl px-4 sm:px-0 pointer-events-auto">
            <Form isLoading={isLoading} onSubmit={handleSubmit} onOpenOptions={() => setShowOptions(true)} />

{/* Links below prompt on mobile */}
            {isMobile && (
              <div className="mt-4 flex justify-center pointer-events-auto">
                <ExternalLinks />
              </div>
            )}
          </div>
        )}
      </div>

{/* Options Dialog/Drawer */}
      <OptionsDialog
        open={showOptions}
        onOpenChange={setShowOptions}
        options={options}
        onOptionsChange={handleOptionsChange}
      />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/api/earthquake-data/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { earthquakeDataSources } from "@/lib/data-sources"
import { fetchEarthquakeData } from "@/lib/earthquake-data-service"

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { source, timeRange, region } = body

// Veri kaynağını bul
    const dataSource = earthquakeDataSources.find((ds) => ds.id === source)
    if (!dataSource) {
      return NextResponse.json({ error: "Geçersiz veri kaynağı" }, { status: 400 })
    }

// Deprem verilerini al (şimdilik mock veri)
    const earthquakeData = await fetchEarthquakeData(
      source,
      {
        start: new Date(timeRange.start),
        end: new Date(timeRange.end),
      },
      region,
    )

return NextResponse.json(earthquakeData)
  } catch (error) {
    console.error("Deprem verisi API hatası:", error)
    return NextResponse.json({ error: "Deprem verisi işlenirken hata oluştu" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" 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))",
        },
        // Deprem risk renkleri
        risk: {
          low: "#4ade80",
          medium: "#facc15",
          high: "#f97316",
          critical: "#ef4444",
        },
      },
      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" },
        },
        "pulse-glow": {
          "0%, 100%": {
            boxShadow: "0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2)",
          },
          "50%": {
            boxShadow: "0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3)",
          },
        },
        "pulse-earthquake": {
          "0%": { transform: "scale(1)", opacity: "0.8" },
          "50%": { transform: "scale(1.5)", opacity: "0.4" },
          "100%": { transform: "scale(1)", opacity: "0.8" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "pulse-glow": "pulse-glow 2s infinite",
        "pulse-earthquake": "pulse-earthquake 2s infinite",
      },
      backgroundImage: {
        "radial-gradient": "radial-gradient(circle at center, #222222 0%, #050505 100%)",
        "earthquake-grid":
          "linear-gradient(rgba(255, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 0, 0, 0.05) 1px, transparent 1px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="components/region-selector.tsx" isQuickEdit="true" isMerged="true"
"use client"

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

interface RegionSelectorProps {
  onRegionSelect: (region: any) => void
}

export default function RegionSelector({ onRegionSelect }: RegionSelectorProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedRegion, setSelectedRegion] = useState("")
  const [regions] = useState([
    { id: "istanbul", name: "İstanbul", coordinates: { lat: 41.0082, lng: 28.9784 }, radius: 50 },
    { id: "ankara", name: "Ankara", coordinates: { lat: 39.9334, lng: 32.8597 }, radius: 50 },
    { id: "izmir", name: "İzmir", coordinates: { lat: 38.4237, lng: 27.1428 }, radius: 50 },
    { id: "adana", name: "Adana", coordinates: { lat: 37.0, lng: 35.3213 }, radius: 50 },
    { id: "antalya", name: "Antalya", coordinates: { lat: 36.8969, lng: 30.7133 }, radius: 50 },
    { id: "bursa", name: "Bursa", coordinates: { lat: 40.1885, lng: 29.061 }, radius: 50 },
    { id: "konya", name: "Konya", coordinates: { lat: 37.8746, lng: 32.4932 }, radius: 50 },
    { id: "gaziantep", name: "Gaziantep", coordinates: { lat: 37.0662, lng: 37.3833 }, radius: 50 },
    { id: "hatay", name: "Hatay", coordinates: { lat: 36.2023, lng: 36.1613 }, radius: 50 },
    { id: "maras", name: "Kahramanmaraş", coordinates: { lat: 37.5753, lng: 36.9228 }, radius: 50 },
  ])

const filteredRegions = regions.filter((region) => region.name.toLowerCase().includes(searchTerm.toLowerCase()))

const handleRegionChange = (regionId: string) => {
    setSelectedRegion(regionId)
    const region = regions.find((r) => r.id === regionId)
    if (region) {
      onRegionSelect(region)
    }
  }

const handleSearch = () => {
    if (searchTerm.trim() === "") return

const matchedRegion = regions.find((region) => region.name.toLowerCase().includes(searchTerm.toLowerCase()))

if (matchedRegion) {
      setSelectedRegion(matchedRegion.id)
      onRegionSelect(matchedRegion)
    }
  }

return (
    <div className="space-y-1">
      <div className="flex space-x-1">
        <Input
          placeholder="Bölge ara..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="bg-black border-white/20 text-white h-7 text-xs"
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              handleSearch()
            }
          }}
        />
        <Button onClick={handleSearch} variant="outline" className="border-white/20 text-white h-7 w-7 p-0">
          <Search className="h-3 w-3" />
        </Button>
      </div>

<Select value={selectedRegion} onValueChange={handleRegionChange}>
        <SelectTrigger className="bg-black border-white/20 text-white h-7 text-xs">
          <SelectValue placeholder="Bölge seçin" />
        </SelectTrigger>
        <SelectContent className="bg-black border-white/20 text-white">
          {filteredRegions.map((region) => (
            <SelectItem key={region.id} value={region.id} className="hover:bg-white/10 focus:bg-white/10 text-xs">
              {region.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/time-range-selector.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon } from "lucide-react"
import { format } from "date-fns"
import { tr } from "date-fns/locale"

interface TimeRangeSelectorProps {
  value: {
    start: Date
    end: Date
  }
  onChange: (value: { start: Date; end: Date }) => void
}

export default function TimeRangeSelector({ value, onChange }: TimeRangeSelectorProps) {
  const [startDate, setStartDate] = useState<Date | undefined>(value.start)
  const [endDate, setEndDate] = useState<Date | undefined>(value.end)

const handleStartDateChange = (date: Date | undefined) => {
    if (!date) return

setStartDate(date)

if (endDate && date > endDate) {
      setEndDate(date)
      onChange({ start: date, end: date })
    } else {
      onChange({ start: date, end: endDate || new Date() })
    }
  }

const handleEndDateChange = (date: Date | undefined) => {
    if (!date) return

setEndDate(date)

if (startDate && date < startDate) {
      setStartDate(date)
      onChange({ start: date, end: date })
    } else {
      onChange({ start: startDate || new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), end: date })
    }
  }

const handleQuickSelect = (days: number) => {
    const end = new Date()
    const start = new Date(end.getTime() - days * 24 * 60 * 60 * 1000)

setStartDate(start)
    setEndDate(end)
    onChange({ start, end })
  }

return (
    <div className="space-y-1">
      <div className="flex space-x-1">
        <Popover>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              className="w-full justify-start text-left font-normal bg-black border-white/20 text-white h-7 text-xs"
            >
              <CalendarIcon className="mr-1 h-3 w-3" />
              {startDate ? format(startDate, "dd MMM yy", { locale: tr }) : "Başlangıç"}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0 bg-black border-white/20">
            <Calendar
              mode="single"
              selected={startDate}
              onSelect={handleStartDateChange}
              initialFocus
              className="bg-black text-white"
            />
          </PopoverContent>
        </Popover>

<Popover>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              className="w-full justify-start text-left font-normal bg-black border-white/20 text-white h-7 text-xs"
            >
              <CalendarIcon className="mr-1 h-3 w-3" />
              {endDate ? format(endDate, "dd MMM yy", { locale: tr }) : "Bitiş"}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0 bg-black border-white/20">
            <Calendar
              mode="single"
              selected={endDate}
              onSelect={handleEndDateChange}
              initialFocus
              className="bg-black text-white"
            />
          </PopoverContent>
        </Popover>
      </div>

<div className="flex space-x-1">
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleQuickSelect(7)}
          className="flex-1 bg-black border-white/20 text-white hover:bg-white/10 h-6 text-xs"
        >
          7 gün
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleQuickSelect(30)}
          className="flex-1 bg-black border-white/20 text-white hover:bg-white/10 h-6 text-xs"
        >
          30 gün
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleQuickSelect(365)}
          className="flex-1 bg-black border-white/20 text-white hover:bg-white/10 h-6 text-xs"
        >
          1 yıl
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/geo-model-service.ts" isQuickEdit="true" isMerged="true"
import { submitRodinJob } from "./api-service"

// Performans için önbellek
const modelCache = new Map()

export async function generateRegionalModel(
  region: {
    name: string
    coordinates: {
      lat: number
      lng: number
    }
    radius: number // km cinsinden
  },
  options: {
    detailLevel: "high" | "medium" | "low"
    includeBuildings: boolean
    includeTopography: boolean
  },
) {
  // Önbellek anahtarı oluştur
  const cacheKey = `${region.name}-${options.detailLevel}`

// Önbellekte varsa, önbellekten döndür
  if (modelCache.has(cacheKey)) {
    return modelCache.get(cacheKey)
  }

// Bölge verilerini alıp formData oluştur
  const formData = new FormData()

// Bölge koordinatlarını ve ayarları ekle
  formData.append("region_name", region.name)
  formData.append("lat", region.coordinates.lat.toString())
  formData.append("lng", region.coordinates.lng.toString())
  formData.append("radius", region.radius.toString())

// Detay seviyesini kalite parametresine dönüştür
  let quality = "medium"
  switch (options.detailLevel) {
    case "high":
      quality = "high"
      break
    case "medium":
      quality = "medium"
      break
    case "low":
      quality = "low"
      break
  }

// Performans için düşük kalite kullan
  if (region.radius > 30) {
    quality = "low" // Büyük bölgeler için düşük kalite
  }

// Rodin API parametrelerini ekle
  formData.append("quality", quality)
  formData.append("geometry_file_format", "glb")
  formData.append("use_hyper", "false") // Performans için hyper kapalı
  formData.append("tier", "Sketch") // Performans için Sketch tier kullan
  formData.append("material", "PBR")

// Prompt oluştur - bölge adını ve koordinatları içeren bir prompt
  const prompt = `3D model of ${region.name} region, centered at coordinates ${region.coordinates.lat}, ${region.coordinates.lng}. Include terrain and buildings. This is a geographical visualization for earthquake data analysis.`
  formData.append("prompt", prompt)

// Rodin API'yi kullanarak 3D model oluştur
  const result = await submitRodinJob(formData)

// Önbelleğe ekle
  modelCache.set(cacheKey, result)

return result
}

[V0_FILE]typescriptreact:file="lib/data-sources.ts" isMerged="true"
export interface GeoDataSource {
  id: string
  name: string
  apiEndpoint: string
  apiKey?: string
}

export interface EarthquakeDataSource {
  id: string
  name: string
  apiEndpoint: string
  updateFrequency: "realtime" | "daily" | "weekly"
  apiKey?: string
  parser: "kandilli" | "afad" | "usgs" | "generic"
}

// Türkiye için gerçek veri kaynakları
export const geoDataSources: GeoDataSource[] = [
  {
    id: "harita-genel",
    name: "Harita Genel Müdürlüğü",
    apiEndpoint: "https://api.harita.gov.tr/v1",
  },
  {
    id: "openstreetmap",
    name: "OpenStreetMap",
    apiEndpoint: "https://api.openstreetmap.org/v1",
  },
]

export const earthquakeDataSources: EarthquakeDataSource[] = [
  {
    id: "kandilli",
    name: "Kandilli Rasathanesi",
    apiEndpoint: "https://deprem.afad.gov.tr/apiv2/event/filter",
    updateFrequency: "realtime",
    parser: "kandilli",
  },
  {
    id: "afad",
    name: "AFAD",
    apiEndpoint: "https://deprem.afad.gov.tr/apiv2/event/filter",
    updateFrequency: "realtime",
    parser: "afad",
  },
  {
    id: "usgs",
    name: "USGS",
    apiEndpoint: "https://earthquake.usgs.gov/fdsnws/event/1/query",
    updateFrequency: "realtime",
    parser: "usgs",
  },
]

[V0_FILE]typescriptreact:file="app/api/proxy-kandilli/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    // Kandilli Rasathanesi'nin son depremler sayfası
    // Not: Bu URL değişebilir, güncel URL kontrol edilmeli
    const url = "http://www.koeri.boun.edu.tr/scripts/lst0.asp"

// CORS sorunlarını aşmak için proxy olarak çalış
    const response = await fetch(url, {
      headers: {
        "User-Agent":
          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
      },
      cache: "no-store", // Her zaman taze veri al
    })

if (!response.ok) {
      throw new Error(`Kandilli verileri alınamadı: ${response.status}`)
    }

// HTML içeriğini al
    const html = await response.text()

// HTML içeriğini doğrudan döndür, parsing işlemi client tarafında yapılacak
    return new NextResponse(html, {
      headers: {
        "Content-Type": "text/html; charset=utf-8",
        "Cache-Control": "max-age=300", // 5 dakika önbellek
      },
    })
  } catch (error) {
    console.error("Kandilli proxy hatası:", error)
    return NextResponse.json({ error: "Kandilli verilerine erişilemedi" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="app/api/proxy-afad/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const body = await request.json()

// AFAD API'sine istek parametreleri
    const { start_date, end_date, min_magnitude = 1.0, max_magnitude = 10.0, latitude, longitude, radius = 500 } = body

// AFAD API URL'si
    const url = "https://deprem.afad.gov.tr/apiv2/event/filter"

// AFAD API'sine istek
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "User-Agent":
          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
      },
      body: JSON.stringify({
        start_date,
        end_date,
        min_mag: min_magnitude,
        max_mag: max_magnitude,
        lat: latitude,
        lon: longitude,
        radius,
      }),
      cache: "no-store", // Her zaman taze veri al
    })

if (!response.ok) {
      throw new Error(`AFAD API hatası: ${response.status}`)
    }

const data = await response.json()

return NextResponse.json(data, {
      headers: {
        "Cache-Control": "max-age=300", // 5 dakika önbellek
      },
    })
  } catch (error) {
    console.error("AFAD proxy hatası:", error)
    return NextResponse.json({ error: "AFAD verilerine erişilemedi" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="app/api/proxy-usgs/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { url } = body

if (!url) {
      return NextResponse.json({ error: "URL parametresi gerekli" }, { status: 400 })
    }

// USGS API'sine istek
    const response = await fetch(url, {
      headers: {
        "User-Agent":
          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
      },
      cache: "no-store", // Her zaman taze veri al
    })

if (!response.ok) {
      throw new Error(`USGS API hatası: ${response.status}`)
    }

const data = await response.json()

return NextResponse.json(data, {
      headers: {
        "Cache-Control": "max-age=300", // 5 dakika önbellek
      },
    })
  } catch (error) {
    console.error("USGS proxy hatası:", error)
    return NextResponse.json({ error: "USGS verilerine erişilemedi" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="components/control-panel.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react"
import { useState } from "react"
import RegionSelector from "./region-selector"
import TimeRangeSelector from "./time-range-selector"
import { earthquakeDataSources } from "@/lib/data-sources"

interface ControlPanelProps {
  selectedRegion: any
  onRegionSelect: (region: any) => void
  timeRange: {
    start: Date
    end: Date
  }
  onTimeRangeChange: (range: { start: Date; end: Date }) => void
  dataSource: string
  onDataSourceChange: (source: string) => void
  onRefresh: () => void
  isLoading: boolean
  lastUpdated?: Date
}

export default function ControlPanel({
  selectedRegion,
  onRegionSelect,
  timeRange,
  onTimeRangeChange,
  dataSource,
  onDataSourceChange,
  onRefresh,
  isLoading,
  lastUpdated,
}: ControlPanelProps) {
  const [openRegion, setOpenRegion] = useState(true)
  const [openTime, setOpenTime] = useState(false)
  const [openSource, setOpenSource] = useState(false)

// Son güncelleme zamanını formatla
  const formatLastUpdated = (date?: Date) => {
    if (!date) return "Henüz güncellenmedi"

return date.toLocaleTimeString("tr-TR", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    })
  }

return (
    <Card className="w-72 bg-black/70 border-white/20 text-white">
      <CardHeader className="pb-1 pt-2 px-3">
        <div className="flex justify-between items-center">
          <CardTitle className="text-sm">Deprem Veri Kontrolleri</CardTitle>
          {lastUpdated && (
            <div className="text-[10px] text-gray-400">Son güncelleme: {formatLastUpdated(lastUpdated)}</div>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-2 p-3">
        {/* Bölge Seçimi - Katlanabilir */}
        <Collapsible open={openRegion} onOpenChange={setOpenRegion} className="space-y-1">
          <div className="flex items-center justify-between">
            <h4 className="text-xs font-medium text-white">Bölge Seçimi</h4>
            <CollapsibleTrigger className="p-0.5 hover:bg-white/10 rounded">
              {openRegion ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
            </CollapsibleTrigger>
          </div>
          <CollapsibleContent className="pt-1">
            <RegionSelector onRegionSelect={onRegionSelect} />
          </CollapsibleContent>
        </Collapsible>

{/* Veri Kaynağı - Katlanabilir */}
        <Collapsible open={openSource} onOpenChange={setOpenSource} className="space-y-1">
          <div className="flex items-center justify-between">
            <h4 className="text-xs font-medium text-white">Veri Kaynağı</h4>
            <CollapsibleTrigger className="p-0.5 hover:bg-white/10 rounded">
              {openSource ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
            </CollapsibleTrigger>
          </div>
          <CollapsibleContent className="pt-1">
            <Select value={dataSource} onValueChange={onDataSourceChange} disabled={isLoading}>
              <SelectTrigger className="bg-black border-white/20 text-white h-7 text-xs">
                <SelectValue placeholder="Veri kaynağı seçin" />
              </SelectTrigger>
              <SelectContent className="bg-black border-white/20 text-white">
                {earthquakeDataSources.map((source) => (
                  <SelectItem key={source.id} value={source.id} className="hover:bg-white/10 focus:bg-white/10 text-xs">
                    {source.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </CollapsibleContent>
        </Collapsible>

{/* Zaman Aralığı - Katlanabilir */}
        <Collapsible open={openTime} onOpenChange={setOpenTime} className="space-y-1">
          <div className="flex items-center justify-between">
            <h4 className="text-xs font-medium text-white">Zaman Aralığı</h4>
            <CollapsibleTrigger className="p-0.5 hover:bg-white/10 rounded">
              {openTime ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
            </CollapsibleTrigger>
          </div>
          <CollapsibleContent className="pt-1">
            <TimeRangeSelector value={timeRange} onChange={onTimeRangeChange} />
          </CollapsibleContent>
        </Collapsible>

{/* Yenile Butonu */}
        <Button
          onClick={onRefresh}
          className="w-full bg-white text-black hover:bg-gray-200 h-7 text-xs mt-1 flex items-center justify-center gap-1"
          disabled={isLoading || !selectedRegion}
        >
          <RefreshCw className="h-3 w-3" />
          {isLoading ? "Yükleniyor..." : "Verileri Güncelle"}
        </Button>

{/* Otomatik Yenileme Bilgisi */}
        <div className="text-[10px] text-center text-gray-400 mt-1">Veriler 5 dakikada bir otomatik güncellenir</div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import EarthquakeVisualization from "@/components/earthquake-visualization"

export default function Home() {
  return (
    <main className="h-[100dvh] w-screen overflow-hidden bg-black bg-radial-gradient">
      <EarthquakeVisualization />
    </main>
  )
}

[V0_FILE]typescript:file="app/api/proxy-usgs-new/route.ts" isQuickEdit="true" isMerged="true"
// Yeni bir proxy route ekleyelim
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  try {
    const url = new URL(request.url)
    const params = url.searchParams

// USGS API URL'sini oluştur
    const usgsUrl = `https://earthquake.usgs.gov/fdsnws/event/1/query?${params.toString()}`

// USGS API'sine istek
    const response = await fetch(usgsUrl, {
      headers: {
        "User-Agent":
          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
      },
      cache: "no-store", // Her zaman taze veri al
    })

if (!response.ok) {
      throw new Error(`USGS API hatası: ${response.status}`)
    }

const data = await response.json()

[V0_FILE]typescriptreact:file="components/earthquake-info-panel.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

interface EarthquakeInfoPanelProps {
  data: any
  onClose: () => void
  className?: string
}

// Deprem bilgi panelini güncelleyelim - kapatma butonu kaldırıldı ve başlık değiştirildi
export default function EarthquakeInfoPanel({ data, onClose, className }: EarthquakeInfoPanelProps) {
  // Veri yoksa boş bir panel göster
  if (!data) {
    return (
      <Card className={`w-64 bg-black/80 border-white/20 text-white ${className}`}>
        <CardHeader className="pb-1 pt-2 px-3">
          <CardTitle className="text-sm">Deprem Detayları</CardTitle>
        </CardHeader>
        <CardContent className="p-3">
          <div className="text-gray-400 text-xs">Henüz deprem verisi seçilmedi</div>
        </CardContent>
      </Card>
    )
  }

// Deprem şiddetine göre renk belirle
  const getMagnitudeColor = (magnitude: number) => {
    if (magnitude >= 7) return "text-red-500"
    if (magnitude >= 5) return "text-orange-500"
    if (magnitude >= 4) return "text-yellow-500"
    return "text-green-500"
  }

// Deprem zamanını formatla
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleString("tr-TR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    })
  }

// Deprem zamanından bu yana geçen süreyi hesapla
  const getTimeAgo = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()

const diffSecs = Math.floor(diffMs / 1000)
    if (diffSecs < 60) return `${diffSecs} saniye önce`

const diffMins = Math.floor(diffSecs / 60)
    if (diffMins < 60) return `${diffMins} dakika önce`

const diffHours = Math.floor(diffMins / 60)
    if (diffHours < 24) return `${diffHours} saat önce`

const diffDays = Math.floor(diffHours / 24)
    if (diffDays < 30) return `${diffDays} gün önce`

const diffMonths = Math.floor(diffDays / 30)
    if (diffMonths < 12) return `${diffMonths} ay önce`

const diffYears = Math.floor(diffMonths / 12)
    return `${diffYears} yıl önce`
  }

return (
    <Card className={`w-64 bg-black/80 border-white/20 text-white ${className}`}>
      <CardHeader className="pb-1 pt-2 px-3">
        <CardTitle className="text-sm">Son Seçilen Deprem</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2 p-3">
        <div className="flex justify-between items-center">
          <span className="text-gray-300 text-xs">Büyüklük:</span>
          <span className={`text-sm font-bold ${getMagnitudeColor(data.magnitude)}`}>{data.magnitude.toFixed(1)}</span>
        </div>

<div className="flex justify-between">
          <span className="text-gray-300 text-xs">Derinlik:</span>
          <span className="text-white text-xs">{data.depth} km</span>
        </div>

<div className="flex justify-between">
          <span className="text-gray-300 text-xs">Zaman:</span>
          <span className="text-white text-xs">{formatDate(data.time)}</span>
        </div>

<div className="flex justify-between">
          <span className="text-gray-300 text-xs">Geçen süre:</span>
          <span className="text-white text-xs">{getTimeAgo(data.time)}</span>
        </div>

<div className="flex justify-between">
          <span className="text-gray-300 text-xs">Bölge:</span>
          <span className="text-white text-xs">{data.region}</span>
        </div>

<div className="flex justify-between">
          <span className="text-gray-300 text-xs">Koordinatlar:</span>
          <span className="text-white text-xs">
            {data.location.lat.toFixed(4)}, {data.location.lng.toFixed(4)}
          </span>
        </div>

{data.source && (
          <div className="flex justify-between items-center">
            <span className="text-gray-300 text-xs">Veri Kaynağı:</span>
            <Badge className="text-[8px] bg-blue-500">{data.source}</Badge>
          </div>
        )}

<div className="pt-1">
          <Button
            className="w-full bg-white text-black hover:bg-gray-200 h-7 text-xs"
            onClick={() => {
              window.open(`https://www.google.com/maps?q=${data.location.lat},${data.location.lng}`, "_blank")
            }}
          >
            Haritada Göster
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/earthquake-data-layer.tsx" isQuickEdit="true" isMerged="true"
"use client"

import React from "react"

import { useRef, useMemo, useState } from "react"
import { useFrame, useThree } from "@react-three/fiber"
import { Html, Instance, Instances } from "@react-three/drei"
import * as THREE from "three"

interface EarthquakeDataLayerProps {
  data: any[]
  onSelect: (earthquake: any) => void
  lowPerformance?: boolean
  timeFilter?: {
    start: Date
    end: Date
  }
}

// Deprem noktalarının boyutunu küçültelim
// Performans optimizasyonu için memo kullanımı
export default function EarthquakeDataLayer({
  data,
  onSelect,
  lowPerformance = false,
  timeFilter,
}: EarthquakeDataLayerProps) {
  const groupRef = useRef<THREE.Group>(null)
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
  const { camera } = useThree()

// Zaman filtresine göre verileri filtrele
  const filteredData = useMemo(() => {
    if (!timeFilter) return data

return data.filter((quake) => {
      const quakeTime = new Date(quake.time)
      return quakeTime >= timeFilter.start && quakeTime <= timeFilter.end
    })
  }, [data, timeFilter])

// Performans için memoize edilmiş değerler
  const earthquakeData = useMemo(() => {
    return filteredData.map((quake, index) => {
      // Koordinatları 3D uzaya dönüştür
      const scaleFactor = 0.1
      const x = (quake.location.lng - 30) * scaleFactor
      const y = (quake.location.lat - 40) * scaleFactor
      const z = -quake.depth / 50

// Büyüklüğe göre boyut hesapla - daha küçük boyutlar
      const size = Math.max(0.02, quake.magnitude * 0.02) // Boyutu küçülttük

// Derinliğe göre renk hesapla (daha derin = daha kırmızı)
      const depthFactor = Math.min(1, quake.depth / 100)

// Veri kaynağına göre renk değiştir
      let color
      if (quake.source === "Kandilli") {
        color = new THREE.Color(1, Math.max(0, 1 - depthFactor), 0) // Kırmızı-sarı
      } else if (quake.source === "AFAD") {
        color = new THREE.Color(0, Math.max(0, 1 - depthFactor), 1) // Mavi-turkuaz
      } else if (quake.source === "USGS") {
        color = new THREE.Color(0, 1, Math.max(0, 1 - depthFactor)) // Yeşil-turkuaz
      } else {
        color = new THREE.Color(
          1, // R
          Math.max(0, 1 - depthFactor), // G
          0, // B
        )
      }

// Zaman faktörü - yeni depremler daha parlak
      const now = Date.now()
      const quakeTime = new Date(quake.time).getTime()
      const daysDiff = (now - quakeTime) / (1000 * 60 * 60 * 24)
      const timeFactor = Math.max(0.5, 1 - daysDiff / 30) // 30 günden eski depremler %50 parlaklıkta

return {
        id: quake.id,
        position: [x, y, z],
        size,
        color,
        magnitude: quake.magnitude,
        depth: quake.depth,
        data: quake,
        index,
        timeFactor,
      }
    })
  }, [filteredData])

// Animasyon için zaman değişkeni
  const time = useRef(0)

useFrame((state) => {
    time.current = state.clock.getElapsedTime()
  })

// Performans için optimize edilmiş render
  return (
    <group ref={groupRef}>
      <Instances limit={filteredData.length}>
        <sphereGeometry args={[1, lowPerformance ? 8 : 16, lowPerformance ? 8 : 16]} />
        <meshStandardMaterial transparent opacity={0.8} />

{earthquakeData.map((quake) => (
          <EarthquakePoint
            key={quake.id}
            position={quake.position}
            size={quake.size}
            color={quake.color}
            data={quake.data}
            time={time}
            onClick={() => onSelect(quake.data)}
            isHovered={hoveredIndex === quake.index}
            onHover={() => setHoveredIndex(quake.index)}
            onUnhover={() => setHoveredIndex(null)}
            showLabel={!lowPerformance && (hoveredIndex === quake.index || quake.magnitude > 5.5)} // Sadece 5.5+ depremlerde etiket göster
            camera={camera}
            timeFactor={quake.timeFactor}
          />
        ))}
      </Instances>
    </group>
  )
}

// Performans için memo kullanımı
const EarthquakePoint = React.memo(
  ({ position, size, color, data, time, onClick, isHovered, onHover, onUnhover, showLabel, camera, timeFactor }) => {
    const ref = useRef()
    const pulseScale = useMemo(() => {
      return 1 + Math.sin(time.current * 2 + data.magnitude) * 0.1
    }, [time.current, data.magnitude])

// Sadece hover durumunda veya büyük depremler için etiket göster
    const showLabelNow = useMemo(() => {
      return showLabel && (isHovered || data.magnitude > 5.5)
    }, [showLabel, isHovered, data.magnitude])

// Kamera mesafesine göre etiket görünürlüğünü kontrol et
    const [visible, setVisible] = useState(false)

useFrame(() => {
      if (ref.current) {
        // @ts-ignore
        ref.current.scale.setScalar(size * (isHovered ? pulseScale * 1.5 : pulseScale))

// Zaman faktörüne göre parlaklığı ayarla
        const adjustedColor = color.clone().multiplyScalar(isHovered ? 1.5 : timeFactor)
        // @ts-ignore
        ref.current.color.set(isHovered ? new THREE.Color(1, 1, 0) : adjustedColor)

// Kameraya olan mesafeyi kontrol et
        if (camera && ref.current) {
          // @ts-ignore
          const distance = camera.position.distanceTo(ref.current.position)
          setVisible(distance < 15) // Sadece yakındayken etiketleri göster
        }
      }
    })

return (
      <Instance
        ref={ref}
        position={position}
        scale={size}
        color={color}
        onClick={(e) => {
          e.stopPropagation()
          onClick()
        }}
        onPointerOver={(e) => {
          e.stopPropagation()
          onHover()
        }}
        onPointerOut={onUnhover}
      >
        {showLabelNow && visible && (
          <Html position={[0, size * 2, 0]} center distanceFactor={10} sprite zIndexRange={[100, 0]} occlude>
            <div className="bg-black/80 text-white px-1.5 py-0.5 text-[8px] rounded whitespace-nowrap pointer-events-none">
              M{data.magnitude.toFixed(1)} | {data.depth}km
              {data.source && <span className="ml-1">({data.source})</span>}
            </div>
          </Html>
        )}
      </Instance>
    )
  },
  (prev, next) => {
    // Sadece gerekli olduğunda yeniden render et
    return (
      prev.isHovered === next.isHovered && prev.showLabel === next.showLabel && prev.time.current === next.time.current
    )
  },
)

[V0_FILE]plaintext:file="public/assets/3d/texture_earth.jpg" url="https://v0.blob.com/Ym9Ym9Ym9.jpg" isMerged="true"

[V0_FILE]plaintext:file="public/assets/3d/texture_earth_heatmap.jpg" url="https://v0.blob.com/Ym9Ym9Ym9.jpg" isMerged="true"

[V0_FILE]plaintext:file="public/assets/3d/texture_earth_tectonic.jpg" url="https://v0.blob.com/Ym9Ym9Ym9.jpg" isMerged="true"

[V0_FILE]typescriptreact:file="components/settings-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Settings, Globe, Waves, Eye, Camera, Brain } from "lucide-react"
import GlobeSettingsPanel from "./globe-settings-panel"
import AIAnalysisPanel from "./ai-analysis-panel"

interface SettingsModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  settings: any
  onSettingsChange: (settings: any) => void
  onRefresh: () => void
  earthquakeData: any[]
}

export default function SettingsModal({
  open,
  onOpenChange,
  settings,
  onSettingsChange,
  onRefresh,
  earthquakeData,
}: SettingsModalProps) {
  const [activeTab, setActiveTab] = useState("globe")

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="bg-black/95 border-white/20 text-white max-w-3xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-xl text-white font-mono tracking-normal flex items-center">
            <Settings className="h-5 w-5 mr-2" />
            Gelişmiş Ayarlar ve Analiz
          </DialogTitle>
        </DialogHeader>

<Tabs defaultValue="globe" value={activeTab} onValueChange={setActiveTab} className="w-full mt-2">
          <TabsList className="bg-black/50 border border-white/20 h-10 w-full grid grid-cols-5">
            <TabsTrigger value="globe" className="text-sm h-8 flex items-center">
              <Globe className="h-4 w-4 mr-2" />
              Dünya
            </TabsTrigger>
            <TabsTrigger value="earthquake" className="text-sm h-8 flex items-center">
              <Waves className="h-4 w-4 mr-2" />
              Deprem
            </TabsTrigger>
            <TabsTrigger value="visual" className="text-sm h-8 flex items-center">
              <Eye className="h-4 w-4 mr-2" />
              Görsel
            </TabsTrigger>
            <TabsTrigger value="camera" className="text-sm h-8 flex items-center">
              <Camera className="h-4 w-4 mr-2" />
              Kamera
            </TabsTrigger>
            <TabsTrigger value="ai" className="text-sm h-8 flex items-center">
              <Brain className="h-4 w-4 mr-2" />
              AI Analiz
            </TabsTrigger>
          </TabsList>

<div className="mt-4">
            {/* Globe, Earthquake, Visual ve Camera sekmeleri için GlobeSettingsPanel */}
            {(activeTab === "globe" ||
              activeTab === "earthquake" ||
              activeTab === "visual" ||
              activeTab === "camera") && (
              <GlobeSettingsPanel
                settings={settings}
                onSettingsChange={onSettingsChange}
                onRefresh={onRefresh}
                activeTab={activeTab}
              />
            )}

{/* AI Analiz sekmesi */}
            {activeTab === "ai" && <AIAnalysisPanel earthquakeData={earthquakeData} />}
          </div>
        </Tabs>

<div className="flex justify-end mt-4">
          <Button onClick={() => onOpenChange(false)} className="bg-white text-black hover:bg-gray-200">
            Kapat
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="lib/earthquake-data-service.ts" isQuickEdit="true" isMerged="true"
export interface EarthquakeData {
  id: string
  time: string
  magnitude: number
  depth: number
  location: {
    lat: number
    lng: number
  }
  region: string
  intensity?: number
  source?: string
}

// Veri kaynakları tanımla
const earthquakeDataSources = [
  { id: "kandilli", name: "Kandilli Rasathanesi" },
  { id: "afad", name: "AFAD" },
  { id: "usgs", name: "USGS" },
]

// Performans için önbellek - daha uzun süre önbellekte tutalım
const dataCache = new Map()
const CACHE_DURATION = 15 * 60 * 1000 // 15 dakika

// Deprem verilerini zamana göre sıralama
export async function fetchEarthquakeData(
  source: string,
  timeRange: {
    start: Date
    end: Date
  },
  region?: {
    name: string
    coordinates: {
      lat: number
      lng: number
    }
    radius: number
  },
): Promise<EarthquakeData[]> {
  try {
    // Önbellek anahtarı oluştur
    const cacheKey = `${source}-${timeRange.start.getTime()}-${timeRange.end.getTime()}-${region?.name || "all"}`

// Önbellekte varsa, önbellekten döndür
    if (dataCache.has(cacheKey)) {
      const cachedData = dataCache.get(cacheKey)
      const cacheTime = cachedData.timestamp
      const now = Date.now()

// Önbellek süresi dolmadıysa önbellekten döndür
      if (now - cacheTime < CACHE_DURATION) {
        return cachedData.data
      }
    }

// Veri kaynağını bul
    const dataSource = earthquakeDataSources.find((ds) => ds.id === source)
    if (!dataSource) {
      throw new Error("Geçersiz veri kaynağı")
    }

// Gerçek veri çekme işlemi
    let earthquakeData: EarthquakeData[] = []

switch (dataSource.id) {
      case "kandilli":
        earthquakeData = await fetchKandilliData(timeRange, region)
        break
      case "afad":
        earthquakeData = await fetchAfadData(timeRange, region)
        break
      case "usgs":
        earthquakeData = await fetchUsgsDataWrapper(timeRange, region)
        break
      default:
        // Örnek veri oluştur (gerçek API yoksa)
        earthquakeData = generateMockData(timeRange, region)
    }

// Depremleri zamana göre sırala (en yeni en üstte)
    earthquakeData = earthquakeData.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())

// Önbelleğe ekle
    dataCache.set(cacheKey, {
      data: earthquakeData,
      timestamp: Date.now(),
    })

return earthquakeData
  } catch (error) {
    console.error("Deprem verisi alınamadı:", error)

// Hata durumunda önbellekte veri varsa onu kullan
    const cacheKey = `${source}-${timeRange.start.getTime()}-${timeRange.end.getTime()}-${region?.name || "all"}`
    if (dataCache.has(cacheKey)) {
      console.log("Hata durumunda önbellekteki veri kullanılıyor")
      return dataCache.get(cacheKey).data
    }

// Önbellekte de yoksa örnek veri döndür
    return generateMockData(timeRange, region, source)
  }
}

// Kandilli Rasathanesi'nden veri çekme - optimize edildi
async function fetchKandilliData(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
): Promise<EarthquakeData[]> {
  try {
    // Kandilli Rasathanesi'nin web sayfasından veri çekme
    const response = await fetch("/api/proxy-kandilli", {
      cache: "no-store",
      signal: AbortSignal.timeout(10000), // 10 saniye timeout
    })

if (!response.ok) {
      throw new Error(`Kandilli verileri alınamadı: ${response.status}`)
    }

const html = await response.text()

// HTML içeriğini parse et
    const earthquakes = parseKandilliHtml(html)

// Zaman aralığına göre filtrele
    const filteredByTime = earthquakes.filter((quake) => {
      const quakeTime = new Date(quake.time)
      return quakeTime >= timeRange.start && quakeTime <= timeRange.end
    })

// Bölgeye göre filtrele (eğer belirtilmişse)
    let filteredData = filteredByTime

if (region) {
      filteredData = filteredData.filter((quake) => {
        // Haversine formülü ile iki nokta arasındaki mesafeyi hesapla
        const distance = calculateDistance(
          region.coordinates.lat,
          region.coordinates.lng,
          quake.location.lat,
          quake.location.lng,
        )

return distance <= region.radius
      })
    }

return filteredData
  } catch (error) {
    console.error("Kandilli verisi alınamadı:", error)
    // Hata durumunda örnek veri döndür
    return generateMockData(timeRange, region, "Kandilli")
  }
}

// AFAD'dan veri çekme - optimize edildi
async function fetchAfadData(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
): Promise<EarthquakeData[]> {
  try {
    // AFAD API parametreleri
    const startDate = timeRange.start.toISOString().split("T")[0]
    const endDate = timeRange.end.toISOString().split("T")[0]

// AFAD API'sine istek
    const response = await fetch("/api/proxy-afad", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        start_date: startDate,
        end_date: endDate,
        min_magnitude: 1.0, // En düşük 1 şiddetindeki depremleri al
        max_magnitude: 10.0,
        latitude: region?.coordinates.lat,
        longitude: region?.coordinates.lng,
        radius: region?.radius || 500, // km cinsinden
      }),
      cache: "no-store",
      signal: AbortSignal.timeout(10000), // 10 saniye timeout
    })

if (!response.ok) {
      throw new Error(`AFAD verileri alınamadı: ${response.status}`)
    }

const data = await response.json()

// AFAD verilerini dönüştür
    return data.map((item) => ({
      id: item.eventID || `afad-${item.date}-${item.time}`,
      time: new Date(`${item.date}T${item.time}`).toISOString(),
      magnitude: Number.parseFloat(item.magnitude),
      depth: Number.parseFloat(item.depth),
      location: {
        lat: Number.parseFloat(item.latitude),
        lng: Number.parseFloat(item.longitude),
      },
      region: item.location || "Bilinmiyor",
      intensity: Number.parseFloat(item.magnitude) * 0.8, // Basit bir şiddet hesabı
      source: "AFAD",
    }))
  } catch (error) {
    console.error("AFAD verisi alınamadı:", error)
    // Hata durumunda örnek veri döndür
    return generateMockData(timeRange, region, "AFAD")
  }
}

// USGS'den veri çekme fonksiyonu - optimize edildi
async function fetchUsgsData({
  startTime,
  endTime,
  minMagnitude = 1.0, // En düşük 1 şiddetindeki depremleri al
  maxRadius = null,
  latitude = null,
  longitude = null,
}: {
  startTime: Date
  endTime: Date
  minMagnitude?: number
  maxRadius?: number | null
  latitude?: number | null
  longitude?: number | null
}) {
  try {
    // USGS API parametreleri
    const params = new URLSearchParams({
      format: "geojson",
      starttime: startTime.toISOString(),
      endtime: endTime.toISOString(),
      minmagnitude: minMagnitude.toString(),
      limit: "500", // Performans için sınırla
    })

// Bölge belirtilmişse ekle
    if (latitude !== null && longitude !== null && maxRadius !== null) {
      params.append("latitude", latitude.toString())
      params.append("longitude", longitude.toString())
      params.append("maxradiuskm", maxRadius.toString())
    }

// USGS API'sine istek
    const response = await fetch("/api/proxy-usgs-new?" + params.toString(), {
      cache: "no-store",
      signal: AbortSignal.timeout(10000), // 10 saniye timeout
    })

if (!response.ok) {
      throw new Error(`USGS API hatası: ${response.status}`)
    }

const data = await response.json()

// USGS verilerini dönüştür
    return data.features.map((feature) => ({
      id: feature.id,
      time: new Date(feature.properties.time).toISOString(),
      magnitude: feature.properties.mag,
      depth: feature.geometry.coordinates[2], // USGS'de derinlik 3. koordinat
      location: {
        lat: feature.geometry.coordinates[1],
        lng: feature.geometry.coordinates[0],
      },
      region: feature.properties.place || "Bilinmiyor",
      intensity: feature.properties.mag * 0.8, // Basit bir şiddet hesabı
      source: "USGS",
    }))
  } catch (error) {
    console.error("USGS veri çekme hatası:", error)
    throw error
  }
}

// Gerçek zamanlı USGS verilerini çekme - optimize edildi ve sıralanmış
export async function fetchRealtimeUsgsData(minMagnitude = 1.0) {
  // En düşük 1 şiddetindeki depremleri al
  // Önbellek anahtarı
  const cacheKey = `usgs-realtime-${minMagnitude}`

// Önbellekte varsa ve süresi dolmadıysa kullan
  if (dataCache.has(cacheKey)) {
    const cachedData = dataCache.get(cacheKey)
    const now = Date.now()

if (now - cachedData.timestamp < CACHE_DURATION) {
      console.log("Önbellekten USGS verileri kullanılıyor")
      return cachedData.data
    }
  }

try {
    // Son 30 gündeki depremleri al
    const endTime = new Date()
    const startTime = new Date(endTime.getTime() - 30 * 24 * 60 * 60 * 1000)

const data = await fetchUsgsData({
      startTime,
      endTime,
      minMagnitude,
    })

// Depremleri zamana göre sırala (en yeni en üstte)
    const sortedData = data.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())

// Önbelleğe ekle
    dataCache.set(cacheKey, {
      data: sortedData,
      timestamp: Date.now(),
    })

return sortedData
  } catch (error) {
    console.error("Gerçek zamanlı USGS verisi alınamadı:", error)

// Hata durumunda önbellekte veri varsa onu kullan
    if (dataCache.has(cacheKey)) {
      console.log("Hata durumunda önbellekteki USGS verileri kullanılıyor")
      return dataCache.get(cacheKey).data
    }

// Önbellekte de yoksa örnek veri döndür
    const endTime = new Date()
    const startTime = new Date(endTime.getTime() - 30 * 24 * 60 * 60 * 1000)
    return generateMockData({ start: startTime, end: endTime }, undefined, "USGS")
  }
}

async function fetchUsgsDataWrapper(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
): Promise<EarthquakeData[]> {
  try {
    const { start, end } = timeRange
    let latitude = null
    let longitude = null
    let maxRadius = null

if (region) {
      latitude = region.coordinates.lat
      longitude = region.coordinates.lng
      maxRadius = region.radius
    }

return await fetchUsgsData({
      startTime: start,
      endTime: end,
      minMagnitude: 1.0, // En düşük 1 şiddetindeki depremleri al
      latitude: latitude,
      longitude: longitude,
      maxRadius: maxRadius,
    })
  } catch (error) {
    console.error("USGS verisi alınamadı:", error)
    // Hata durumunda örnek veri döndür
    return generateMockData(timeRange, region, "USGS")
  }
}

// Kandilli HTML içeriğini parse etme - optimize edildi
function parseKandilliHtml(html: string): EarthquakeData[] {
  try {
    // Basit bir HTML parser (gerçek uygulamada daha güçlü bir parser kullanılmalı)
    const earthquakes: EarthquakeData[] = []

// Deprem tablosunu bul
    const tableRegex = /<table[^>]*>([\s\S]*?)<\/table>/gi
    const tableMatch = tableRegex.exec(html)

if (!tableMatch) {
      throw new Error("Deprem tablosu bulunamadı")
    }

// Tablo satırlarını bul
    const rowRegex = /<tr[^>]*>([\s\S]*?)<\/tr>/gi
    let rowMatch

// Performans için maksimum satır sayısını sınırla
    let rowCount = 0
    const MAX_ROWS = 500

while ((rowMatch = rowRegex.exec(tableMatch[1])) !== null && rowCount < MAX_ROWS) {
      rowCount++

// Başlık satırını atla
      if (rowMatch[1].includes("<th")) continue

// Hücreleri bul
      const cellRegex = /<td[^>]*>([\s\S]*?)<\/td>/gi
      const cells = []
      let cellMatch

while ((cellMatch = cellRegex.exec(rowMatch[1])) !== null) {
        cells.push(cellMatch[1].trim())
      }

// Hücre sayısı doğru mu kontrol et
      if (cells.length < 6) continue

// Tarih ve saat formatını parse et (örn: 2023.04.04 12:34:56)
      const dateTimeParts = cells[0].split(" ")
      if (dateTimeParts.length !== 2) continue

const dateParts = dateTimeParts[0].split(".")
      const timeParts = dateTimeParts[1].split(":")

if (dateParts.length !== 3 || timeParts.length !== 3) continue

const year = Number.parseInt(dateParts[0])
      const month = Number.parseInt(dateParts[1]) - 1 // JavaScript'te aylar 0-11 arası
      const day = Number.parseInt(dateParts[2])
      const hour = Number.parseInt(timeParts[0])
      const minute = Number.parseInt(timeParts[1])
      const second = Number.parseInt(timeParts[2])

const date = new Date(year, month, day, hour, minute, second)

// Koordinatları parse et
      const lat = Number.parseFloat(cells[1])
      const lng = Number.parseFloat(cells[2])

// Derinlik ve büyüklüğü parse et
      const depth = Number.parseFloat(cells[3])
      const magnitude = Number.parseFloat(cells[4])

// Sadece 1 ve üzeri şiddetindeki depremleri al
      if (magnitude < 1.0) continue

// Bölge adını al
      const region = cells[5]

// Deprem verisini oluştur
      earthquakes.push({
        id: `kandilli-${date.getTime()}`,
        time: date.toISOString(),
        magnitude,
        depth,
        location: { lat, lng },
        region,
        intensity: magnitude * 0.8, // Basit bir şiddet hesabı
        source: "Kandilli",
      })
    }

return earthquakes
  } catch (error) {
    console.error("Kandilli HTML parse hatası:", error)
    return []
  }
}

// İki nokta arasındaki mesafeyi hesaplama (Haversine formülü) - optimize edildi
function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
  const R = 6371 // Dünya'nın yarıçapı (km)
  const dLat = ((lat2 - lat1) * Math.PI) / 180
  const dLon = ((lon2 - lon1) * Math.PI) / 180
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
  return R * c
}

// Örnek veri oluşturma (API'ler çalışmadığında) - optimize edildi
function generateMockData(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
  source = "Mock",
): EarthquakeData[] {
  const startTime = timeRange.start.getTime()
  const endTime = timeRange.end.getTime()
  const timeSpan = endTime - startTime

// Bölgeye göre deprem sayısını belirle - performans için sınırla
  let earthquakeCount = Math.min(50, Math.floor(Math.random() * 30) + 30)

if (region) {
    // Bölgeye göre deprem sayısını ayarla
    switch (region.name.toLowerCase()) {
      case "istanbul":
        earthquakeCount = Math.min(30, Math.floor(Math.random() * 20) + 20)
        break
      case "izmir":
        earthquakeCount = Math.min(40, Math.floor(Math.random() * 20) + 30)
        break
      case "ankara":
        earthquakeCount = Math.min(20, Math.floor(Math.random() * 10) + 15)
        break
      case "adana":
        earthquakeCount = Math.min(25, Math.floor(Math.random() * 15) + 15)
        break
      case "hatay":
      case "kahramanmaraş":
        earthquakeCount = Math.min(60, Math.floor(Math.random() * 30) + 40)
        break
      default:
        earthquakeCount = Math.min(40, Math.floor(Math.random() * 20) + 30)
    }
  }

// Örnek deprem verileri oluştur
  const earthquakes: EarthquakeData[] = []

for (let i = 0; i < earthquakeCount; i++) {
    // Rastgele zaman oluştur
    const randomTime = new Date(startTime + Math.random() * timeSpan)

// Bölgeye göre koordinat oluştur
    let lat = 39 + (Math.random() * 2 - 1)
    let lng = 35 + (Math.random() * 2 - 1)

if (region) {
      // Bölge merkezine yakın koordinatlar oluştur
      const randomOffset = ((Math.random() * region.radius) / 111) * (Math.random() > 0.5 ? 1 : -1)
      lat = region.coordinates.lat + randomOffset
      lng = region.coordinates.lng + randomOffset
    }

// Büyüklük dağılımı - 1.0 ve üzeri
    let magnitude
    const rand = Math.random()
    if (rand > 0.98) {
      magnitude = 5 + Math.random() * 2 // %2 olasılıkla 5-7 arası
    } else if (rand > 0.9) {
      magnitude = 4 + Math.random() // %8 olasılıkla 4-5 arası
    } else if (rand > 0.7) {
      magnitude = 3 + Math.random() // %20 olasılıkla 3-4 arası
    } else if (rand > 0.4) {
      magnitude = 2 + Math.random() // %30 olasılıkla 2-3 arası
    } else {
      magnitude = 1 + Math.random() // %40 olasılıkla 1-2 arası
    }

// Derinlik
    const depth =
      Math.random() > 0.8
        ? 20 + Math.random() * 30
        : // %20 olasılıkla 20-50km
          5 + Math.random() * 15 // %80 olasılıkla 5-20km

earthquakes.push({
      id: `mock-${i}-${randomTime.getTime()}`,
      time: randomTime.toISOString(),
      magnitude,
      depth,
      location: { lat, lng },
      region: region ? region.name : "Türkiye",
      intensity: magnitude * 0.8,
      source,
    })
  }

// Zamana göre sırala (en yeni en üstte)
  return earthquakes.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
}

export function mapEarthquakeDataToModel(modelData: any, earthquakeData: EarthquakeData[]) {
  // Deprem verilerini 3D model üzerine eşle
  return {
    ...modelData,
    earthquakePoints: earthquakeData.map((quake) => ({
      position: [quake.location.lng, quake.location.lat, -quake.depth / 10],
      magnitude: quake.magnitude,
      intensity: quake.intensity || quake.magnitude * 0.8,
      time: new Date(quake.time),
      id: quake.id,
      source: quake.source,
    })),
  }
}

[V0_FILE]typescriptreact:file="app/api/gemini/route.ts" isQuickEdit="true" isMerged="true"
// Eski Gemini API route'unu kaldırıp, çoklu AI model desteği olan yeni bir route oluşturalım
import { NextResponse } from "next/server"

// API anahtarları - Gerçek uygulamada bunlar environment variable olarak saklanmalıdır
const API_KEYS = {
  openai:
    "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",
  openrouter: "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",
  groq: "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",
  xai: "xai-y6UOrqIafkXMJnYHMVApxYBcBiqXhAJ5A2mmkLm84W611MQ0Ia8vD8Zu561b8Ic8zflWZIBDJ7yOfY6L",
  deepseek: "sk-a57166e2de3846168ad6716bf07fef5d",
}

// API endpoint'leri
const API_ENDPOINTS = {
  openai: "https://api.openai.com/v1/chat/completions",
  openrouter: "https://openrouter.ai/api/v1/chat/completions",
  groq: "https://api.groq.com/openai/v1/chat/completions",
  xai: "https://api.console.x.ai/v1/chat/completions",
  deepseek: "https://api.deepseek.com/v1/chat/completions",
}

// Model isimleri
const MODELS = {
  openai: "gpt-3.5-turbo", // gpt-4o yerine daha güvenilir bir model kullanıyoruz
  openrouter: "mistralai/mistral-7b-instruct", // Daha hafif bir model
  groq: "mixtral-8x7b-32768", // Daha hafif bir model
  xai: "x.ai/grok-1",
  deepseek: "deepseek-coder",
}

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { prompt, earthquakeData, provider = "openai" } = body

// Geçerli bir provider mı kontrol et
    if (!API_KEYS[provider]) {
      return NextResponse.json({ error: `Geçersiz AI sağlayıcısı: ${provider}` }, { status: 400 })
    }

// Veri boyutunu sınırla (API limitleri için)
    const limitedData = earthquakeData.slice(0, 5).map((quake) => ({
      id: quake.id,
      time: quake.time,
      magnitude: quake.magnitude,
      depth: quake.depth,
      location: quake.location,
      region: quake.region,
      source: quake.source,
    }))

// API isteği için mesaj formatı
    const messages = [
      {
        role: "system",
        content:
          "Sen bir deprem analiz uzmanısın. Verilen deprem verilerini analiz et ve sonuçları Türkçe olarak açıkla.",
      },
      {
        role: "user",
        content: `${prompt}\n\nDeprem Verileri: ${JSON.stringify(limitedData, null, 2)}`,
      },
    ]

// API isteği için headers
    const headers = {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEYS[provider]}`,
    }

// Provider'a özel ek headers
    if (provider === "openrouter") {
      headers["HTTP-Referer"] = "https://deprem-analiz.vercel.app"
      headers["X-Title"] = "Deprem Analiz Uygulaması"
    }

// API isteği gönder
    console.log(`${provider} API'sine istek gönderiliyor...`)

try {
      const response = await fetch(API_ENDPOINTS[provider], {
        method: "POST",
        headers,
        body: JSON.stringify({
          model: MODELS[provider],
          messages,
          temperature: 0.7,
          max_tokens: 500, // Token sayısını azalttık
        }),
      })

if (!response.ok) {
        const errorText = await response.text()
        console.error(`${provider} API hatası:`, errorText)
        throw new Error(`API hatası: ${response.status} - ${errorText}`)
      }

const data = await response.json()

// API yanıtını standart formata dönüştür
      let result

if (
        provider === "openai" ||
        provider === "openrouter" ||
        provider === "groq" ||
        provider === "xai" ||
        provider === "deepseek"
      ) {
        result = data.choices[0].message.content
      } else {
        result = "API yanıtı işlenemedi."
      }

return NextResponse.json({ result, provider })
    } catch (apiError) {
      console.error(`${provider} API hatası:`, apiError)

// Basit bir mock yanıt döndür
      const mockResponse = `Bu bir örnek deprem analizi yanıtıdır. Gerçek API yanıtı alınamadı. 
      
Verilen deprem verilerine göre, en yüksek risk taşıyan bölgeler genellikle tektonik plaka sınırlarında yer alan alanlardır. Özellikle Pasifik Ateş Çemberi üzerindeki bölgeler yüksek risk altındadır.

Son dönemde kaydedilen en büyük deprem ${limitedData[0]?.magnitude || 6.5} büyüklüğünde olup, ${limitedData[0]?.region || "belirli bir bölgede"} meydana gelmiştir.

Deprem aktivitesi açısından dikkat edilmesi gereken bölgeler arasında Japonya, Endonezya, Şili ve Türkiye bulunmaktadır.`

return NextResponse.json({
        result: mockResponse,
        provider: provider,
        isMock: true,
      })
    }
  } catch (error) {
    console.error("AI analiz hatası:", error)
    return NextResponse.json({
      result: "Deprem verisi analiz edilirken bir hata oluştu. Lütfen daha sonra tekrar deneyin.",
      provider: "fallback",
      error: error instanceof Error ? error.message : "Bilinmeyen hata",
    })
  }
}

[V0_FILE]typescriptreact:file="components/ai-analysis-panel.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { analyzeEarthquakeData, predefinedQueries, aiProviders } from "@/lib/ai-service"
import { Brain, Send, RefreshCw, AlertCircle, Zap } from "lucide-react"

interface AIAnalysisPanelProps {
  earthquakeData: any[]
  className?: string
}

export default function AIAnalysisPanel({ earthquakeData, className = "" }: AIAnalysisPanelProps) {
  const [prompt, setPrompt] = useState("")
  const [analysis, setAnalysis] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [selectedQuery, setSelectedQuery] = useState("")
  const [selectedProvider, setSelectedProvider] = useState("openai")
  const [aiHistory, setAiHistory] = useState<Array<{ prompt: string; response: string; provider: string }>>([])
  const [error, setError] = useState<string | null>(null)
  const [currentProvider, setCurrentProvider] = useState<string | null>(null)

// Seçilen sorguyu değiştirdiğimizde prompt'u güncelle
  useEffect(() => {
    if (selectedQuery) {
      const query = predefinedQueries.find((q) => q.id === selectedQuery)
      if (query) {
        setPrompt(query.prompt)
      }
    }
  }, [selectedQuery])

// Deprem verilerini analiz et
  const handleAnalyze = async () => {
    if (!prompt.trim()) return

setIsLoading(true)
    setAnalysis("Analiz yapılıyor...")
    setError(null)
    setCurrentProvider(selectedProvider)

try {
      const result = await analyzeEarthquakeData(prompt, earthquakeData, selectedProvider)
      setAnalysis(result)

// Geçmişe ekle
      setAiHistory((prev) => [...prev, { prompt, response: result, provider: selectedProvider }])
    } catch (error) {
      console.error("Analiz hatası:", error)
      setError("Analiz sırasında bir hata oluştu: " + (error instanceof Error ? error.message : String(error)))
      setAnalysis("Analiz yapılamadı. Lütfen başka bir AI modeli seçin veya daha sonra tekrar deneyin.")
    } finally {
      setIsLoading(false)
    }
  }

// Sağlayıcı adını görüntüle
  const getProviderName = (providerId: string) => {
    const provider = aiProviders.find((p) => p.id === providerId)
    return provider ? provider.name : providerId
  }

return (
    <Card className={`bg-black/80 border-white/20 text-white ${className}`}>
      <CardHeader className="pb-2 pt-3 px-3">
        <CardTitle className="text-sm flex items-center">
          <Brain className="h-3.5 w-3.5 mr-1.5" />
          Deprem AI Analizi
        </CardTitle>
      </CardHeader>
      <CardContent className="p-3 space-y-3">
        <div className="space-y-2">
          <div className="text-xs text-gray-400">AI Modeli</div>
          <Select value={selectedProvider} onValueChange={setSelectedProvider}>
            <SelectTrigger className="h-8 text-xs bg-black border-white/20">
              <SelectValue placeholder="AI modeli seçin" />
            </SelectTrigger>
            <SelectContent className="bg-black border-white/20 text-white">
              {aiProviders.map((provider) => (
                <SelectItem key={provider.id} value={provider.id} className="text-xs">
                  {provider.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <div className="text-xs text-gray-400">Hazır Sorgular</div>
          <Select value={selectedQuery} onValueChange={setSelectedQuery}>
            <SelectTrigger className="h-8 text-xs bg-black border-white/20">
              <SelectValue placeholder="Sorgu seçin" />
            </SelectTrigger>
            <SelectContent className="bg-black border-white/20 text-white">
              {predefinedQueries.map((query) => (
                <SelectItem key={query.id} value={query.id} className="text-xs">
                  {query.title}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <div className="text-xs text-gray-400">Sorgu</div>
          <Textarea
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            placeholder="Deprem verileri hakkında bir soru sorun..."
            className="bg-black border-white/20 text-white h-20 text-xs resize-none"
          />
        </div>

<Button
          onClick={handleAnalyze}
          className="w-full bg-white text-black hover:bg-gray-200 text-xs h-8"
          disabled={isLoading || !prompt.trim()}
        >
          {isLoading ? (
            <>
              <RefreshCw className="h-3 w-3 mr-1.5 animate-spin" />
              Analiz Yapılıyor...
            </>
          ) : (
            <>
              <Send className="h-3 w-3 mr-1.5" />
              Analiz Et
            </>
          )}
        </Button>

{error && (
          <div className="bg-red-900/30 border border-red-500/50 rounded-md p-2 text-xs flex items-start">
            <AlertCircle className="h-3 w-3 mr-1.5 mt-0.5 flex-shrink-0" />
            <span>{error}</span>
          </div>
        )}

{analysis && (
          <div className="space-y-2 mt-3">
            <div className="text-xs text-gray-400 flex items-center justify-between">
              <span>Analiz Sonucu</span>
              {currentProvider && (
                <div className="flex items-center text-[10px] bg-blue-900/30 px-1.5 py-0.5 rounded">
                  <Zap className="h-2.5 w-2.5 mr-1" />
                  {getProviderName(currentProvider)}
                </div>
              )}
            </div>
            <div className="bg-black/50 border border-white/10 rounded-md p-2 text-xs overflow-y-auto max-h-60">
              {analysis.split("\n").map((line, i) => (
                <p key={i} className={i === 0 ? "font-medium" : ""}>
                  {line}
                </p>
              ))}
            </div>
          </div>
        )}

{aiHistory.length > 0 && (
          <div className="space-y-2 mt-3">
            <div className="text-xs text-gray-400 flex justify-between items-center">
              <span>Önceki Analizler</span>
              <Button
                variant="ghost"
                size="sm"
                className="h-6 text-[10px] hover:bg-white/10 p-1"
                onClick={() => setAiHistory([])}
              >
                Temizle
              </Button>
            </div>
            <div className="space-y-2 max-h-40 overflow-y-auto pr-1">
              {aiHistory
                .slice()
                .reverse()
                .map((item, index) => (
                  <div key={index} className="bg-black/30 border border-white/10 rounded-md p-2 text-[10px]">
                    <div className="flex justify-between items-center mb-1">
                      <div className="font-medium text-gray-300">{item.prompt.substring(0, 50)}...</div>
                      <div className="text-[8px] bg-blue-900/30 px-1 py-0.5 rounded">
                        {getProviderName(item.provider)}
                      </div>
                    </div>
                    <div className="text-gray-400">{item.response.substring(0, 100)}...</div>
                  </div>
                ))}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="lib/ai-service.ts" isQuickEdit="true" isMerged="true"
// Gemini API ile iletişim kuran servis

// Güncellenmiş yanıt arayüzü
interface AIResponse {
  result: string
  provider?: string
}

export async function analyzeEarthquakeData(prompt: string, earthquakeData: any[], provider = "openai") {
  try {
    // Veri boyutunu sınırla (API limitleri için)
    const limitedData = earthquakeData.slice(0, 5).map((quake) => ({
      id: quake.id,
      time: quake.time,
      magnitude: quake.magnitude,
      depth: quake.depth,
      location: quake.location,
      region: quake.region,
      source: quake.source,
    }))

const response = await fetch("/api/gemini", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt,
        earthquakeData: limitedData,
        provider,
      }),
      // Timeout ekleyelim
      signal: AbortSignal.timeout(15000), // 15 saniye timeout
    })

if (!response.ok) {
      const errorData = await response.json()
      throw new Error(errorData.error || `API isteği başarısız: ${response.status}`)
    }

const data: AIResponse = await response.json()

// Yanıtı döndür
    return data.result || "Analiz sonucu alınamadı."
  } catch (error) {
    console.error("Deprem verisi analiz hatası:", error)

// Timeout hatası için özel mesaj
    if (error.name === "AbortError") {
      return "Analiz zaman aşımına uğradı. Lütfen daha sonra tekrar deneyin veya başka bir AI modeli seçin."
    }

return "Deprem verisi analiz edilirken bir hata oluştu. Lütfen başka bir AI modeli deneyin."
  }
}

// Önceden tanımlanmış sorgular
export const predefinedQueries = [
  {
    id: "risk-analysis",
    title: "Risk Analizi",
    prompt:
      "Bu deprem verilerini analiz et ve en yüksek risk taşıyan bölgeleri belirle. Analiz sonucunu Türkçe olarak kısa ve öz bir şekilde açıkla.",
  },
  {
    id: "pattern-detection",
    title: "Deprem Desenleri",
    prompt:
      "Bu deprem verilerindeki desenleri analiz et. Belirli bölgelerde veya zaman dilimlerinde tekrarlayan deprem aktiviteleri var mı? Sonuçları Türkçe olarak açıkla.",
  },
  {
    id: "magnitude-prediction",
    title: "Büyüklük Tahmini",
    prompt:
      "Bu deprem verilerine dayanarak, önümüzdeki hafta içinde olabilecek depremlerin muhtemel büyüklüğünü tahmin et. Tahminini Türkçe olarak açıkla ve neden bu sonuca vardığını belirt.",
  },
  {
    id: "aftershock-analysis",
    title: "Artçı Şok Analizi",
    prompt:
      "Bu deprem verilerini kullanarak artçı şok desenlerini analiz et. Büyük depremlerden sonra ne tür artçı şok desenleri görülüyor? Sonuçları Türkçe olarak açıkla.",
  },
  {
    id: "historical-comparison",
    title: "Tarihsel Karşılaştırma",
    prompt:
      "Bu deprem verilerini geçmiş yıllardaki deprem aktiviteleriyle karşılaştır. Deprem aktivitesinde bir artış veya azalış trendi var mı? Sonuçları Türkçe olarak açıkla.",
  },
]

// Kullanılabilir AI sağlayıcıları
export const aiProviders = [
  { id: "openai", name: "OpenAI GPT-4o" },
  { id: "openrouter", name: "Anthropic Claude-3" },
  { id: "groq", name: "Groq Llama-3" },
  { id: "xai", name: "X.AI Grok-1.5" },
  { id: "deepseek", name: "DeepSeek Chat" },
]

[V0_FILE]typescriptreact:file="components/globe-settings-panel.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { Layers, Star, RotateCcw, Maximize, RefreshCw, Eye, Zap, Cpu, Map } from "lucide-react"

interface GlobeSettingsPanelProps {
  settings: any
  onSettingsChange: (settings: any) => void
  onRefresh: () => void
  className?: string
  activeTab?: string
}

export default function GlobeSettingsPanel({
  settings,
  onSettingsChange,
  onRefresh,
  className = "",
  activeTab = "globe",
}: GlobeSettingsPanelProps) {
  const updateSetting = (key: string, value: any) => {
    onSettingsChange({ ...settings, [key]: value })
  }

// Performans modu switch'i - her zaman görünür
  const PerformanceSwitch = () => (
    <div className="mb-4 p-3 bg-black/50 rounded-md border border-white/10">
      <div className="flex items-center justify-between">
        <label className="text-sm flex items-center font-medium">
          <Cpu className="h-4 w-4 mr-2" />
          Düşük Performans Modu
        </label>
        <Switch
          checked={settings.lowPerformanceMode}
          onCheckedChange={(checked) => updateSetting("lowPerformanceMode", checked)}
          className="data-[state=checked]:bg-white data-[state=checked]:text-black"
        />
      </div>
      <p className="text-xs text-gray-400 mt-1">
        Yavaş cihazlarda daha iyi performans için bazı görsel efektleri devre dışı bırakır.
      </p>
    </div>
  )

// Dünya Ayarları
  const GlobeSettings = () => (
    <div className="space-y-4">
      <PerformanceSwitch />

<div className="space-y-4">
        <div className="flex items-center justify-between">
          <label className="text-sm flex items-center">
            <RotateCcw className="h-4 w-4 mr-2" />
            Dünya Dönüşü
          </label>
          <Switch
            checked={settings.globeRotation}
            onCheckedChange={(checked) => updateSetting("globeRotation", checked)}
            className="data-[state=checked]:bg-white data-[state=checked]:text-black"
          />
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <RefreshCw className="h-4 w-4 mr-2" />
            Dönüş Hızı
          </label>
          <Slider
            value={[settings.rotationSpeed]}
            min={0.1}
            max={3}
            step={0.1}
            onValueChange={(value) => updateSetting("rotationSpeed", value[0])}
            disabled={!settings.globeRotation}
            className="py-2"
          />
          <div className="flex justify-between text-xs text-gray-400">
            <span>Yavaş</span>
            <span>Hızlı</span>
          </div>
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <Layers className="h-4 w-4 mr-2" />
            Dünya Katmanı
          </label>
          <Select value={settings.activeLayer} onValueChange={(value) => updateSetting("activeLayer", value)}>
            <SelectTrigger className="h-9 text-sm bg-black border-white/20">
              <SelectValue placeholder="Katman seçin" />
            </SelectTrigger>
            <SelectContent className="bg-black border-white/20 text-white">
              <SelectItem value="standard" className="text-sm">
                Standart (Mavi)
              </SelectItem>
              <SelectItem value="heatmap" className="text-sm">
                Isı Haritası (Kırmızı)
              </SelectItem>
              <SelectItem value="tectonic" className="text-sm">
                Tektonik Plakalar (Wireframe)
              </SelectItem>
              <SelectItem value="satellite" className="text-sm">
                Uydu Görüntüsü
              </SelectItem>
              <SelectItem value="political" className="text-sm">
                Politik Harita (Ülkeler)
              </SelectItem>
              <SelectItem value="night" className="text-sm">
                Gece Görünümü
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <Eye className="h-4 w-4 mr-2" />
            Dünya Saydamlığı
          </label>
          <Slider
            value={[settings.globeOpacity * 100]}
            min={10}
            max={100}
            step={5}
            onValueChange={(value) => updateSetting("globeOpacity", value[0] / 100)}
            className="py-2"
          />
          <div className="flex justify-between text-xs text-gray-400">
            <span>Saydam</span>
            <span>Opak</span>
          </div>
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <Map className="h-4 w-4 mr-2" />
            Dünya Detay Seviyesi
          </label>
          <Select value={settings.globeDetail} onValueChange={(value) => updateSetting("globeDetail", value)}>
            <SelectTrigger className="h-9 text-sm bg-black border-white/20">
              <SelectValue placeholder="Detay seviyesi" />
            </SelectTrigger>
            <SelectContent className="bg-black border-white/20 text-white">
              <SelectItem value="high" className="text-sm">
                Yüksek (64 segment)
              </SelectItem>
              <SelectItem value="medium" className="text-sm">
                Orta (32 segment)
              </SelectItem>
              <SelectItem value="low" className="text-sm">
                Düşük (16 segment)
              </SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  )

// Deprem Ayarları
  const EarthquakeSettings = () => (
    <div className="space-y-4">
      <PerformanceSwitch />

<div className="space-y-4">
        <div className="space-y-2">
          <label className="text-sm flex items-center">
            <Maximize className="h-4 w-4 mr-2" />
            Deprem Noktası Boyutu
          </label>
          <Slider
            value={[settings.pointSize]}
            min={0.5}
            max={3}
            step={0.1}
            onValueChange={(value) => updateSetting("pointSize", value[0])}
            className="py-2"
          />
          <div className="flex justify-between text-xs text-gray-400">
            <span>Küçük</span>
            <span>Büyük</span>
          </div>
        </div>

<div className="flex items-center justify-between">
          <label className="text-sm flex items-center">
            <Eye className="h-4 w-4 mr-2" />
            Deprem Etiketleri
          </label>
          <Switch
            checked={settings.showLabels}
            onCheckedChange={(checked) => updateSetting("showLabels", checked)}
            className="data-[state=checked]:bg-white data-[state=checked]:text-black"
          />
        </div>

<div className="flex items-center justify-between">
          <label className="text-sm flex items-center">
            <Zap className="h-4 w-4 mr-2" />
            Titreşim Efekti
          </label>
          <Switch
            checked={settings.pulseEffect}
            onCheckedChange={(checked) => updateSetting("pulseEffect", checked)}
            className="data-[state=checked]:bg-white data-[state=checked]:text-black"
            disabled={settings.lowPerformanceMode}
          />
        </div>
      </div>
    </div>
  )

// Görsel Ayarlar
  const VisualSettings = () => (
    <div className="space-y-4">
      <PerformanceSwitch />

<div className="space-y-4">
        <div className="flex items-center justify-between">
          <label className="text-sm flex items-center">
            <Star className="h-4 w-4 mr-2" />
            Yıldızlar
          </label>
          <Switch
            checked={settings.showStars}
            onCheckedChange={(checked) => updateSetting("showStars", checked)}
            className="data-[state=checked]:bg-white data-[state=checked]:text-black"
            disabled={settings.lowPerformanceMode}
          />
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <Star className="h-4 w-4 mr-2" />
            Yıldız Sayısı
          </label>
          <Slider
            value={[settings.starCount]}
            min={1000}
            max={10000}
            step={500}
            onValueChange={(value) => updateSetting("starCount", value[0])}
            disabled={!settings.showStars || settings.lowPerformanceMode}
            className="py-2"
          />
          <div className="flex justify-between text-xs text-gray-400">
            <span>Az</span>
            <span>Çok</span>
          </div>
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <RefreshCw className="h-4 w-4 mr-2" />
            Yıldız Hızı
          </label>
          <Slider
            value={[settings.starSpeed]}
            min={0.1}
            max={3}
            step={0.1}
            onValueChange={(value) => updateSetting("starSpeed", value[0])}
            disabled={!settings.showStars || settings.lowPerformanceMode}
            className="py-2"
          />
          <div className="flex justify-between text-xs text-gray-400">
            <span>Yavaş</span>
            <span>Hızlı</span>
          </div>
        </div>
      </div>
    </div>
  )

// Kamera Ayarları
  const CameraSettings = () => (
    <div className="space-y-4">
      <PerformanceSwitch />

<div className="space-y-4">
        <div className="flex items-center justify-between">
          <label className="text-sm flex items-center">
            <Maximize className="h-4 w-4 mr-2" />
            Yakınlaştırma
          </label>
          <Switch
            checked={settings.enableZoom}
            onCheckedChange={(checked) => updateSetting("enableZoom", checked)}
            className="data-[state=checked]:bg-white data-[state=checked]:text-black"
          />
        </div>

<div className="flex items-center justify-between">
          <label className="text-sm flex items-center">
            <RotateCcw className="h-4 w-4 mr-2" />
            Döndürme
          </label>
          <Switch
            checked={settings.enableRotate}
            onCheckedChange={(checked) => updateSetting("enableRotate", checked)}
            className="data-[state=checked]:bg-white data-[state=checked]:text-black"
          />
        </div>

<div className="flex items-center justify-between">
          <label className="text-sm flex items-center">
            <RefreshCw className="h-4 w-4 mr-2" />
            Otomatik Döndürme
          </label>
          <Switch
            checked={settings.autoRotate}
            onCheckedChange={(checked) => updateSetting("autoRotate", checked)}
            className="data-[state=checked]:bg-white data-[state=checked]:text-black"
          />
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <RefreshCw className="h-4 w-4 mr-2" />
            Otomatik Döndürme Hızı
          </label>
          <Slider
            value={[settings.autoRotateSpeed]}
            min={0.1}
            max={5}
            step={0.1}
            onValueChange={(value) => updateSetting("autoRotateSpeed", value[0])}
            disabled={!settings.autoRotate}
            className="py-2"
          />
          <div className="flex justify-between text-xs text-gray-400">
            <span>Yavaş</span>
            <span>Hızlı</span>
          </div>
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <Maximize className="h-4 w-4 mr-2" />
            Min. Yakınlaştırma
          </label>
          <Slider
            value={[settings.minZoom]}
            min={2}
            max={5}
            step={0.1}
            onValueChange={(value) => updateSetting("minZoom", value[0])}
            disabled={!settings.enableZoom}
            className="py-2"
          />
        </div>

<div className="space-y-2">
          <label className="text-sm flex items-center">
            <Maximize className="h-4 w-4 mr-2" />
            Max. Yakınlaştırma
          </label>
          <Slider
            value={[settings.maxZoom]}
            min={5}
            max={15}
            step={0.5}
            onValueChange={(value) => updateSetting("maxZoom", value[0])}
            disabled={!settings.enableZoom}
            className="py-2"
          />
        </div>
      </div>
    </div>
  )

// Aktif sekmeye göre içeriği göster
  const renderContent = () => {
    switch (activeTab) {
      case "globe":
        return <GlobeSettings />
      case "earthquake":
        return <EarthquakeSettings />
      case "visual":
        return <VisualSettings />
      case "camera":
        return <CameraSettings />
      default:
        return <GlobeSettings />
    }
  }

return (
    <div className={className}>
      {renderContent()}

<Button onClick={onRefresh} className="w-full mt-4 bg-white text-black hover:bg-gray-200 text-sm h-9">
        <RefreshCw className="h-4 w-4 mr-2" />
        Verileri Güncelle
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/globe.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef, useMemo, useState } from "react"
import { useFrame } from "@react-three/fiber"
import { useTexture, Html } from "@react-three/drei"
import * as THREE from "three"

// Dünya bileşeni - dünya modeli ve deprem noktalarını içerir
export default function Globe({ earthquakeData, onEarthquakeSelect, highlightedEarthquakes = [], settings }) {
  const earthRef = useRef()
  const cloudsRef = useRef()

// Dünya dokuları
  const textures = useTexture({
    standard: "/assets/textures/earth_standard.jpg",
    heatmap: "/assets/textures/earth_heatmap.jpg",
    tectonic: "/assets/textures/earth_tectonic.jpg",
    satellite: "/assets/textures/earth_satellite.jpg",
    political: "/assets/textures/earth_political.jpg",
    night: "/assets/textures/earth_night.jpg",
    clouds: "/assets/textures/earth_clouds.png",
    normal: "/assets/textures/earth_normal.jpg",
    specular: "/assets/textures/earth_specular.jpg",
  })

// Dünya materyalleri
  const materials = useMemo(() => {
    // Tüm dokuları hazırla
    const createMaterial = (map, emissive = false) => {
      return new THREE.MeshPhysicalMaterial({
        map,
        normalMap: textures.normal,
        roughnessMap: textures.specular,
        roughness: 0.7,
        metalness: 0.1,
        emissive: emissive ? new THREE.Color(0x222222) : null,
        emissiveIntensity: emissive ? 0.2 : 0,
        transparent: settings.globeOpacity < 1,
        opacity: settings.globeOpacity,
      })
    }

return {
      standard: createMaterial(textures.standard),
      heatmap: createMaterial(textures.heatmap, true),
      tectonic: createMaterial(textures.tectonic),
      satellite: createMaterial(textures.satellite),
      political: createMaterial(textures.political),
      night: createMaterial(textures.night, true),
      clouds: new THREE.MeshStandardMaterial({
        map: textures.clouds,
        transparent: true,
        opacity: 0.4,
        side: THREE.DoubleSide,
      }),
    }
  }, [textures, settings.globeOpacity])

// Aktif materyal
  const activeMaterial = useMemo(() => {
    return materials[settings.activeLayer] || materials.standard
  }, [materials, settings.activeLayer])

// Segment sayısını detay seviyesine göre belirle
  const segments = useMemo(() => {
    switch (settings.globeDetail) {
      case "high":
        return 64
      case "medium":
        return 32
      case "low":
        return 16
      default:
        return 32
    }
  }, [settings.globeDetail])

// Deprem noktaları - dünya yüzeyine sabitlenmiş
  const earthquakePoints = useMemo(() => {
    // Performans için sınırla
    const maxPoints = settings.lowPerformanceMode ? 100 : 1000
    const filteredData =
      earthquakeData.length > maxPoints
        ? earthquakeData.sort((a, b) => b.magnitude - a.magnitude).slice(0, maxPoints)
        : earthquakeData

return filteredData.map((quake) => {
      // Coğrafi koordinatları 3D küre koordinatlarına dönüştür
      const lat = quake.location.lat * (Math.PI / 180)
      const lng = -quake.location.lng * (Math.PI / 180)

// Dünya yüzeyine sabitlemek için radius değeri
      const radius = 1.0

// Küre üzerindeki konumu hesapla
      const x = radius * Math.cos(lat) * Math.sin(lng)
      const y = radius * Math.sin(lat)
      const z = radius * Math.cos(lat) * Math.cos(lng)

// Büyüklüğe göre boyut hesapla
      const size = Math.max(0.01, quake.magnitude * 0.005 * settings.pointSize)

// Büyüklüğe göre renk hesapla
      let color
      if (quake.magnitude >= 7.0) {
        color = new THREE.Color(0.9, 0.1, 0.1) // Kırmızı
      } else if (quake.magnitude >= 6.0) {
        color = new THREE.Color(0.9, 0.4, 0.1) // Turuncu
      } else if (quake.magnitude >= 5.0) {
        color = new THREE.Color(0.9, 0.7, 0.1) // Sarı
      } else if (quake.magnitude >= 3.0) {
        color = new THREE.Color(0.1, 0.9, 0.1) // Yeşil
      } else {
        color = new THREE.Color(0.1, 0.7, 0.9) // Mavi
      }

// Vurgu kontrolü
      const isHighlighted = highlightedEarthquakes.some((e) => e.id === quake.id)

return {
        position: [x, y, z],
        size,
        color,
        quake,
        isHighlighted,
        depth: quake.depth,
      }
    })
  }, [earthquakeData, highlightedEarthquakes, settings.pointSize, settings.lowPerformanceMode])

// Dünya ve bulutları döndür
  useFrame((state, delta) => {
    if (earthRef.current && settings.globeRotation) {
      earthRef.current.rotation.y += delta * 0.05 * settings.rotationSpeed
    }

if (cloudsRef.current && settings.globeRotation) {
      // Bulutlar biraz daha hızlı dönsün
      cloudsRef.current.rotation.y += delta * 0.06 * settings.rotationSpeed
    }
  })

return (
    <group>
      {/* Dünya modeli */}
      <mesh ref={earthRef}>
        <sphereGeometry args={[1, segments, segments]} />
        <primitive object={activeMaterial} attach="material" />
      </mesh>

{/* Bulutlar (sadece standart ve uydu görünümünde) */}
      {(settings.activeLayer === "standard" || settings.activeLayer === "satellite") &&
        !settings.lowPerformanceMode && (
          <mesh ref={cloudsRef} scale={1.01}>
            <sphereGeometry args={[1, segments / 2, segments / 2]} />
            <primitive object={materials.clouds} attach="material" />
          </mesh>
        )}

{/* Deprem noktaları */}
      {earthquakePoints.map((point, index) => (
        <EarthquakePoint
          key={index}
          position={point.position}
          size={point.size}
          color={point.color}
          quake={point.quake}
          depth={point.depth}
          onSelect={onEarthquakeSelect}
          isHighlighted={point.isHighlighted}
          showLabels={settings.showLabels}
          pulseEffect={settings.pulseEffect && !settings.lowPerformanceMode}
          lowPerformance={settings.lowPerformanceMode}
        />
      ))}
    </group>
  )
}

// Deprem noktası bileşeni
function EarthquakePoint({
  position,
  size,
  color,
  quake,
  depth,
  onSelect,
  isHighlighted,
  showLabels,
  pulseEffect,
  lowPerformance,
}) {
  const [hovered, setHovered] = useState(false)
  const sphereRef = useRef()

// Geometri kalitesi
  const segments = lowPerformance ? 8 : 16

// Vurgu animasyonu
  useFrame((state, delta) => {
    if (!sphereRef.current) return

if (isHighlighted && pulseEffect) {
      // Yanıp sönme efekti
      sphereRef.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.5
      sphereRef.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.5
      sphereRef.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.5
    } else if (hovered) {
      // Hover efekti
      sphereRef.current.scale.set(1.5, 1.5, 1.5)
    } else {
      // Normal durum
      sphereRef.current.scale.set(1, 1, 1)
    }
  })

return (
    <group position={position}>
      <mesh
        ref={sphereRef}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
        onClick={() => onSelect(quake)}
      >
        <sphereGeometry args={[size, segments, segments]} />
        <meshBasicMaterial color={isHighlighted ? new THREE.Color(1, 1, 1) : color} />
      </mesh>

{/* Bilgi etiketi */}
      {(hovered || isHighlighted) && showLabels && !lowPerformance && (
        <Html position={[0, size * 2, 0]} center>
          <div className="bg-black/80 text-white px-2 py-1 text-xs rounded whitespace-nowrap pointer-events-none">
            M{quake.magnitude.toFixed(1)} | {depth} km | {quake.region}
          </div>
        </Html>
      )}

{/* Sismik dalgalar */}
      {isHighlighted && pulseEffect && !lowPerformance && <WaveRings />}
    </group>
  )
}

// Sismik dalga halkaları
function WaveRings() {
  const ringsRef = useRef([])
  const [rings] = useState([0, 1, 2])

useFrame((state, delta) => {
    ringsRef.current.forEach((ring, i) => {
      if (ring) {
        // Halkaları büyüt ve saydamlığını azalt
        ring.scale.x += delta * 0.8
        ring.scale.y += delta * 0.8
        ring.scale.z += delta * 0.8
        ring.material.opacity -= delta * 0.5

// Halka tamamen saydamlaştığında yeniden başlat
        if (ring.material.opacity <= 0) {
          ring.scale.set(1, 1, 1)
          ring.material.opacity = 0.5
        }
      }
    })
  })

return (
    <>
      {rings.map((_, i) => (
        <mesh key={i} ref={(el) => (ringsRef.current[i] = el)} scale={[1 + i * 0.5, 1 + i * 0.5, 1 + i * 0.5]}>
          <ringGeometry args={[0.05, 0.06, 16]} />
          <meshBasicMaterial color="white" transparent opacity={0.5 - i * 0.15} side={THREE.DoubleSide} />
        </mesh>
      ))}
    </>
  )
}

[V0_FILE]plaintext:file="public/assets/textures/earth_standard.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/assets/textures/earth_heatmap.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/assets/textures/earth_tectonic.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/assets/textures/earth_satellite.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/assets/textures/earth_political.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/assets/textures/earth_night.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/assets/textures/earth_clouds.png" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/assets/textures/earth_normal.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]plaintext:file="public/assets/textures/earth_specular.jpg" url="https://v0.blob.com/pjtmy8OGJ.png" isMerged="true"

[V0_FILE]typescriptreact:file="components/globe-model.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

// Update the Globe component to use a more realistic Earth model with proper textures
// and better earthquake visualization based on the provided code

import { useRef, useMemo, useState, useEffect } from "react"
import { Canvas, useFrame } from "@react-three/fiber"
import { OrbitControls, Stars, Html } from "@react-three/drei"
import * as THREE from "three"
import { Suspense } from "react"

// Earth component with realistic textures and earthquake visualization
function Globe({ earthquakeData, onEarthquakeSelect, highlightedEarthquakes = [], settings }) {
  const earthRef = useRef()
  const cloudsRef = useRef()
  const pointsGroupRef = useRef()

// Earth textures - we'll use these for a more realistic Earth
  const textures = useMemo(() => {
    const textureLoader = new THREE.TextureLoader()

return {
      // Default textures that will be replaced when actual textures load
      map: new THREE.Texture(),
      bumpMap: new THREE.Texture(),
      specularMap: new THREE.Texture(),
      cloudsMap: new THREE.Texture(),
    }
  }, [])

// Load Earth textures
  useEffect(() => {
    const textureLoader = new THREE.TextureLoader()

// Load Earth textures based on the active layer
    const textureMap = {
      standard: "/assets/textures/earth_standard.jpg",
      heatmap: "/assets/textures/earth_heatmap.jpg",
      tectonic: "/assets/textures/earth_tectonic.jpg",
      night: "/assets/textures/earth_night.jpg",
    }

const textureUrl = textureMap[settings.activeLayer] || textureMap.standard

// Load the main texture
    textureLoader.load(textureUrl, (texture) => {
      textures.map = texture
      textures.map.needsUpdate = true
    })

// Load bump map for terrain
    textureLoader.load("/assets/textures/earth_normal.jpg", (texture) => {
      textures.bumpMap = texture
      textures.bumpMap.needsUpdate = true
    })

// Load specular map for oceans
    textureLoader.load("/assets/textures/earth_specular.jpg", (texture) => {
      textures.specularMap = texture
      textures.specularMap.needsUpdate = true
    })

// Load clouds texture
    textureLoader.load("/assets/textures/earth_clouds.png", (texture) => {
      textures.cloudsMap = texture
      textures.cloudsMap.needsUpdate = true
    })
  }, [textures, settings.activeLayer])

// Earth materials
  const materials = useMemo(() => {
    // Earth material
    const earthMaterial = new THREE.MeshPhongMaterial({
      map: textures.map,
      bumpMap: textures.bumpMap,
      bumpScale: 0.05,
      specularMap: textures.specularMap,
      specular: new THREE.Color(0x333333),
      shininess: 15,
      transparent: settings.globeOpacity < 1,
      opacity: settings.globeOpacity,
    })

// Clouds material
    const cloudsMaterial = new THREE.MeshPhongMaterial({
      map: textures.cloudsMap,
      transparent: true,
      opacity: 0.4,
    })

return { earthMaterial, cloudsMaterial }
  }, [textures, settings.globeOpacity])

// Segment count based on detail level
  const segments = useMemo(() => {
    switch (settings.globeDetail) {
      case "high":
        return 64
      case "medium":
        return 32
      case "low":
        return 16
      default:
        return 32
    }
  }, [settings.globeDetail])

// Process earthquake data for visualization
  const earthquakePoints = useMemo(() => {
    // Limit points for performance
    const maxPoints = settings.lowPerformanceMode ? 100 : 1000
    const filteredData =
      earthquakeData.length > maxPoints
        ? earthquakeData.sort((a, b) => b.magnitude - a.magnitude).slice(0, maxPoints)
        : earthquakeData

return filteredData.map((quake) => {
      // Convert geographic coordinates to 3D sphere coordinates
      const lat = quake.location.lat * (Math.PI / 180)
      const lng = -quake.location.lng * (Math.PI / 180)

// Calculate position on globe surface
      const radius = 1.0
      const x = radius * Math.cos(lat) * Math.sin(lng)
      const y = radius * Math.sin(lat)
      const z = radius * Math.cos(lat) * Math.cos(lng)

// Size based on magnitude
      const size = Math.max(0.01, quake.magnitude * 0.005 * settings.pointSize)

// Color based on magnitude
      let color
      if (quake.magnitude >= 7.0) {
        color = new THREE.Color(0.9, 0.1, 0.1) // Red
      } else if (quake.magnitude >= 6.0) {
        color = new THREE.Color(0.9, 0.4, 0.1) // Orange
      } else if (quake.magnitude >= 5.0) {
        color = new THREE.Color(0.9, 0.7, 0.1) // Yellow
      } else if (quake.magnitude >= 3.0) {
        color = new THREE.Color(0.1, 0.9, 0.1) // Green
      } else {
        color = new THREE.Color(0.1, 0.7, 0.9) // Blue
      }

// Check if this earthquake is highlighted
      const isHighlighted = highlightedEarthquakes.some((e) => e.id === quake.id)

// Rotate Earth
  useFrame((state, delta) => {
    if (earthRef.current && settings.globeRotation) {
      earthRef.current.rotation.y += delta * 0.05 * settings.rotationSpeed
    }

if (cloudsRef.current && settings.globeRotation) {
      // Clouds rotate slightly faster than Earth
      cloudsRef.current.rotation.y += delta * 0.06 * settings.rotationSpeed
    }
  })

return (
    <group>
      {/* Stars background */}
      {settings.showStars && !settings.lowPerformanceMode && (
        <Stars
          radius={100}
          depth={50}
          count={settings.starCount}
          factor={4}
          saturation={0}
          fade
          speed={settings.starSpeed}
        />
      )}

{/* Earth sphere */}
      <mesh ref={earthRef}>
        <sphereGeometry args={[1, segments, segments]} />
        <primitive object={materials.earthMaterial} attach="material" />
      </mesh>

{/* Clouds layer */}
      {(settings.activeLayer === "standard" || settings.activeLayer === "satellite") &&
        !settings.lowPerformanceMode && (
          <mesh ref={cloudsRef} scale={1.01}>
            <sphereGeometry args={[1, segments / 2, segments / 2]} />
            <primitive object={materials.cloudsMaterial} attach="material" />
          </mesh>
        )}

{/* Earthquake points */}
      <group ref={pointsGroupRef}>
        {earthquakePoints.map((point, index) => (
          <EarthquakePoint
            key={index}
            position={point.position}
            size={point.size}
            color={point.color}
            quake={point.quake}
            depth={point.depth}
            onSelect={onEarthquakeSelect}
            isHighlighted={point.isHighlighted}
            showLabels={settings.showLabels}
            pulseEffect={settings.pulseEffect && !settings.lowPerformanceMode}
            lowPerformance={settings.lowPerformanceMode}
          />
        ))}
      </group>
    </group>
  )
}

// Individual earthquake point component
function EarthquakePoint({
  position,
  size,
  color,
  quake,
  depth,
  onSelect,
  isHighlighted,
  showLabels,
  pulseEffect,
  lowPerformance,
}) {
  const [hovered, setHovered] = useState(false)
  const sphereRef = useRef()

// Geometry quality based on performance setting
  const segments = lowPerformance ? 8 : 16

// Animation effects
  useFrame((state, delta) => {
    if (!sphereRef.current) return

if (isHighlighted && pulseEffect) {
      // Pulsing animation for highlighted earthquakes
      sphereRef.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.5
      sphereRef.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.5
      sphereRef.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.5
    } else if (hovered) {
      // Hover effect
      sphereRef.current.scale.set(1.5, 1.5, 1.5)
    } else {
      // Normal state
      sphereRef.current.scale.set(1, 1, 1)
    }
  })

{/* Information label */}
      {(hovered || isHighlighted) && showLabels && !lowPerformance && (
        <Html position={[0, size * 2, 0]} center>
          <div className="bg-black/80 text-white px-2 py-1 text-xs rounded whitespace-nowrap pointer-events-none">
            M{quake.magnitude.toFixed(1)} | {depth} km | {quake.region}
          </div>
        </Html>
      )}

{/* Seismic wave rings for highlighted earthquakes */}
      {isHighlighted && pulseEffect && !lowPerformance && <WaveRings />}
    </group>
  )
}

// Seismic wave rings component
function WaveRings() {
  const ringsRef = useRef([])
  const [rings] = useState([0, 1, 2]) // 3 rings

useFrame((state, delta) => {
    ringsRef.current.forEach((ring, i) => {
      if (ring) {
        // Expand rings and fade out
        ring.scale.x += delta * 0.8
        ring.scale.y += delta * 0.8
        ring.scale.z += delta * 0.8
        ring.material.opacity -= delta * 0.5

// Reset when fully transparent
        if (ring.material.opacity <= 0) {
          ring.scale.set(1, 1, 1)
          ring.material.opacity = 0.5
        }
      }
    })
  })

// Loading indicator
function LoadingIndicator() {
  const groupRef = useRef()

useFrame(({ clock }) => {
    if (groupRef.current) {
      groupRef.current.rotation.y = clock.getElapsedTime() * 0.5
    }
  })

// Main component with camera controls
export default function GlobeModel({
  earthquakeData,
  onEarthquakeSelect,
  isLoading,
  highlightedEarthquakes,
  settings = {},
}) {
  // Default settings
  const defaultSettings = {
    // Globe settings
    globeRotation: true,
    rotationSpeed: 1,
    globeOpacity: 1,
    activeLayer: "standard", // standard, heatmap, tectonic, night
    globeDetail: "medium", // high, medium, low

// Earthquake points settings
    pointSize: 1,
    showLabels: true,
    pulseEffect: true,

// Stars settings
    showStars: true,
    starCount: 5000,
    starSpeed: 1,

// Camera controls
    enableZoom: true,
    enablePan: false,
    enableRotate: true,
    autoRotate: false,
    autoRotateSpeed: 0.5,
    minZoom: 2.5,
    maxZoom: 10,

// Performance mode
    lowPerformanceMode: false,
  }

// Merge user settings with defaults
  const mergedSettings = { ...defaultSettings, ...settings }

return (
    <div className="w-full h-full">
      <Canvas
        camera={{ position: [0, 0, 5], fov: 45 }}
        gl={{
          antialias: !mergedSettings.lowPerformanceMode,
          powerPreference: "high-performance",
          alpha: false,
          depth: true,
          stencil: false,
          pixelRatio: Math.min(2, window.devicePixelRatio),
        }}
        performance={{ min: 0.5 }}
        dpr={[1, mergedSettings.lowPerformanceMode ? 1 : 2]}
      >
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} intensity={1} />

<Suspense fallback={<LoadingIndicator />}>
          {isLoading ? (
            <LoadingIndicator />
          ) : (
            <Globe
              earthquakeData={earthquakeData}
              onEarthquakeSelect={onEarthquakeSelect}
              highlightedEarthquakes={highlightedEarthquakes}
              settings={mergedSettings}
            />
          )}
        </Suspense>

<OrbitControls
          enableZoom={mergedSettings.enableZoom}
          enablePan={mergedSettings.enablePan}
          enableRotate={mergedSettings.enableRotate}
          autoRotate={mergedSettings.autoRotate}
          autoRotateSpeed={mergedSettings.autoRotateSpeed}
          minDistance={mergedSettings.minZoom}
          maxDistance={mergedSettings.maxZoom}
        />
      </Canvas>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/model-viewer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Canvas } from "@react-three/fiber"
import { OrbitControls, Environment } from "@react-three/drei"
import { Suspense, useState, useCallback, useMemo } from "react"
import SceneSetup from "./scene-setup"
import ModelComponent from "./model-component"
import LoadingPlaceholder from "./loading-placeholder"
import GlobeModel from "./globe-model"

interface ModelViewerProps {
  modelUrl: string | null
  earthquakeData: any[]
  onEarthquakeSelect: (earthquake: any) => void
  isLoading: boolean
}

export default function ModelViewer({ modelUrl, earthquakeData, onEarthquakeSelect, isLoading }: ModelViewerProps) {
  const [showEarthquakes, setShowEarthquakes] = useState(true)
  const [lowPerformanceMode, setLowPerformanceMode] = useState(false)
  const [showLegend, setShowLegend] = useState(true)
  const [highlightedEarthquakes, setHighlightedEarthquakes] = useState<any[]>([])
  const [showLabels, setShowLabels] = useState(true)
  const [pulseEffect, setPulseEffect] = useState(true)

// Performans optimizasyonu için memoize edilmiş değerler
  const filteredData = useMemo(() => {
    // Düşük performans modunda daha az deprem göster
    if (lowPerformanceMode && earthquakeData.length > 20) {
      return earthquakeData.sort((a, b) => b.magnitude - a.magnitude).slice(0, 20)
    }
    return earthquakeData
  }, [earthquakeData, lowPerformanceMode])

// Performans modunu değiştir
  const togglePerformanceMode = useCallback(() => {
    setLowPerformanceMode(!lowPerformanceMode)
  }, [lowPerformanceMode])

// Veri kaynağı sayılarını hesapla
  const sourceCounts = useMemo(() => {
    const counts = {
      kandilli: 0,
      afad: 0,
      usgs: 0,
      other: 0,
    }

earthquakeData.forEach((quake) => {
      if (!quake.source) {
        counts.other++
      } else if (quake.source.toLowerCase() === "kandilli") {
        counts.kandilli++
      } else if (quake.source.toLowerCase() === "afad") {
        counts.afad++
      } else if (quake.source.toLowerCase() === "usgs") {
        counts.usgs++
      } else {
        counts.other++
      }
    })

return counts
  }, [earthquakeData])

return (
    <div className="w-full h-[100dvh] bg-black bg-radial-gradient">
      {modelUrl ? (
        <Canvas
          camera={{ position: [0, 0, 5], fov: 50 }}
          dpr={[1, lowPerformanceMode ? 1.5 : 2]}
          performance={{ min: 0.5 }}
          gl={{
            powerPreference: "high-performance",
            antialias: !lowPerformanceMode,
            depth: true,
            stencil: false,
            alpha: false,
          }}
        >
          <SceneSetup />
          <ambientLight intensity={0.3} />
          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} castShadow intensity={1} />
          <pointLight position={[-10, -10, -10]} intensity={0.5} />

<OrbitControls
            minDistance={3}
            maxDistance={50}
            enableZoom={true}
            enablePan={true}
            autoRotate={false}
            enableDamping={!lowPerformanceMode}
            dampingFactor={0.05}
            rotateSpeed={0.8}
          />
          <Environment preset="night" />
        </Canvas>
      ) : (
        <GlobeModel
          earthquakeData={earthquakeData}
          onEarthquakeSelect={onEarthquakeSelect}
          isLoading={isLoading}
          highlightedEarthquakes={highlightedEarthquakes}
          settings={{
            globeRotation: true,
            rotationSpeed: 1,
            globeOpacity: 1,
            activeLayer: "standard",
            pointSize: 1,
            showLabels: showLabels,
            pulseEffect: pulseEffect,
            showStars: true,
            starCount: 5000,
            starSpeed: 1,
            enableZoom: true,
            enablePan: false,
            enableRotate: true,
            autoRotate: false,
            minZoom: 2.5,
            maxZoom: 10,
            lowPerformanceMode: lowPerformanceMode,
          }}
        />
      )}

{/* Earthquake Visualization Controls - keep these as they are */}
      {earthquakeData.length > 0 && (
        <div className="absolute bottom-14 right-3 z-10 flex flex-col space-y-1">
          <button
            className="bg-black/70 text-white px-2 py-1 rounded-md border border-white/20 text-xs"
            onClick={() => setShowEarthquakes(!showEarthquakes)}
          >
            {showEarthquakes ? "Depremleri Gizle" : "Depremleri Göster"}
          </button>

<button
            className="bg-black/70 text-white px-2 py-1 rounded-md border border-white/20 text-xs"
            onClick={togglePerformanceMode}
          >
            {lowPerformanceMode ? "Yüksek Kalite" : "Düşük Kalite"}
          </button>

<button
            className="bg-black/70 text-white px-2 py-1 rounded-md border border-white/20 text-xs"
            onClick={() => setShowLegend(!showLegend)}
          >
            {showLegend ? "Lejantı Gizle" : "Lejantı Göster"}
          </button>
        </div>
      )}

{/* Earthquake Count Info - keep this as it is */}
      {earthquakeData.length > 0 && (
        <div className="absolute top-16 left-3 z-10 bg-black/70 text-white px-2 py-1 rounded-md border border-white/20 text-xs">
          {earthquakeData.length} deprem bulundu
          {lowPerformanceMode && earthquakeData.length > 20 && " (20 tanesi gösteriliyor)"}
        </div>
      )}

{/* Data Source Legend - keep this as it is */}
      {showLegend && earthquakeData.length > 0 && (
        <div className="absolute top-24 left-3 z-10 bg-black/70 text-white p-2 rounded-md border border-white/20 text-xs">
          <div className="text-xs font-medium mb-1">Veri Kaynakları:</div>
          <div className="space-y-1">
            {sourceCounts.kandilli > 0 && (
              <div className="flex items-center">
                <div className="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                <span>Kandilli: {sourceCounts.kandilli}</span>
              </div>
            )}
            {sourceCounts.afad > 0 && (
              <div className="flex items-center">
                <div className="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                <span>AFAD: {sourceCounts.afad}</span>
              </div>
            )}
            {sourceCounts.usgs > 0 && (
              <div className="flex items-center">
                <div className="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                <span>USGS: {sourceCounts.usgs}</span>
              </div>
            )}
            {sourceCounts.other > 0 && (
              <div className="flex items-center">
                <div className="w-3 h-3 rounded-full bg-gray-500 mr-2"></div>
                <span>Diğer: {sourceCounts.other}</span>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/earth-model.tsx" isMerged="true"
"use client"

import { useRef, useMemo, useState } from "react"
import { Canvas, useFrame } from "@react-three/fiber"
import { OrbitControls } from "@react-three/drei"
import * as THREE from "three"

// Earth component with earthquake visualization
function Earth({ earthquakeData, onEarthquakeSelect, highlightedEarthquakes = [] }) {
  const earthRef = useRef()

// Earth rotation
  useFrame((state, delta) => {
    if (earthRef.current) {
      earthRef.current.rotation.y += delta * 0.1
    }
  })

// Create a simple Earth material
  const earthMaterial = useMemo(() => {
    return new THREE.MeshPhongMaterial({
      color: new THREE.Color(0x2233aa),
      emissive: new THREE.Color(0x112244),
      specular: new THREE.Color(0x111111),
      shininess: 30,
    })
  }, [])

// Process earthquake data for visualization
  const earthquakePoints = useMemo(() => {
    return earthquakeData.map((quake) => {
      // Convert geographic coordinates to 3D sphere coordinates
      const lat = quake.location.lat * (Math.PI / 180)
      const lng = -quake.location.lng * (Math.PI / 180)

// Size based on magnitude
      const size = Math.max(0.01, quake.magnitude * 0.01)

// Check if this earthquake is highlighted
      const isHighlighted = highlightedEarthquakes.some((e) => e.id === quake.id)

return {
        position: [x, y, z],
        size,
        color,
        quake,
        isHighlighted,
      }
    })
  }, [earthquakeData, highlightedEarthquakes])

return (
    <group>
      {/* Earth sphere */}
      <mesh ref={earthRef}>
        <sphereGeometry args={[1, 32, 32]} />
        <primitive object={earthMaterial} attach="material" />
      </mesh>

// Individual earthquake point component
function EarthquakePoint({ position, size, color, quake, onSelect, isHighlighted }) {
  const [hovered, setHovered] = useState(false)
  const sphereRef = useRef()

// Animation effects
  useFrame(() => {
    if (sphereRef.current) {
      if (isHighlighted) {
        // Highlighted effect
        sphereRef.current.scale.set(1.5, 1.5, 1.5)
      } else if (hovered) {
        // Hover effect
        sphereRef.current.scale.set(1.2, 1.2, 1.2)
      } else {
        // Normal state
        sphereRef.current.scale.set(1, 1, 1)
      }
    }
  })

return (
    <mesh
      ref={sphereRef}
      position={position}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
      onClick={() => onSelect(quake)}
    >
      <sphereGeometry args={[size, 8, 8]} />
      <meshBasicMaterial color={isHighlighted ? new THREE.Color(1, 1, 1) : color} />
    </mesh>
  )
}

// Main component
export default function EarthModel({ earthquakeData, onEarthquakeSelect, highlightedEarthquakes = [] }) {
  return (
    <div className="w-full h-full">
      <Canvas camera={{ position: [0, 0, 3], fov: 60 }}>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} intensity={1} />

<OrbitControls enableZoom={true} enablePan={true} enableRotate={true} minDistance={1.5} maxDistance={10} />
      </Canvas>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/risk-analysis.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useMemo } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { AlertTriangle, Activity, Map, TrendingUp, Globe, BarChart3 } from "lucide-react"

interface RiskAnalysisProps {
  earthquakeData: any[]
  defaultTab?: string
}

// RiskAnalysis bileşenini düzenleyelim - varsayılan sekme olarak tahmin sekmesini ayarlayalım
export default function RiskAnalysis({ earthquakeData, defaultTab = "forecast" }: RiskAnalysisProps) {
  const [riskScores, setRiskScores] = useState<any>(null)
  const [activeTab, setActiveTab] = useState(defaultTab)

// Deprem verilerini büyüklüklerine göre grupla
  const magnitudeGroups = useMemo(() => {
    const groups = {
      small: 0, // 0-2.9
      medium: 0, // 3.0-4.9
      large: 0, // 5.0-5.9
      major: 0, // 6.0+
    }

earthquakeData.forEach((quake) => {
      const mag = quake.magnitude
      if (mag >= 6.0) groups.major++
      else if (mag >= 5.0) groups.large++
      else if (mag >= 3.0) groups.medium++
      else groups.small++
    })

return groups
  }, [earthquakeData])

// Son 7 gün içindeki depremler
  const recentEarthquakes = useMemo(() => {
    const sevenDaysAgo = new Date()
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)

return earthquakeData.filter((quake) => new Date(quake.time) >= sevenDaysAgo)
  }, [earthquakeData])

// Bölgelere göre deprem dağılımı
  const regionDistribution = useMemo(() => {
    const regions = {}

earthquakeData.forEach((quake) => {
      // Bölge adını basitleştir
      let region = "Diğer"

if (quake.region.includes("Japan")) region = "Japonya"
      else if (quake.region.includes("Indonesia") || quake.region.includes("Java")) region = "Endonezya"
      else if (quake.region.includes("Chile") || quake.region.includes("Peru")) region = "Güney Amerika"
      else if (quake.region.includes("Mexico") || quake.region.includes("California")) region = "Kuzey Amerika"
      else if (quake.region.includes("Turkey") || quake.region.includes("Greece")) region = "Türkiye ve Çevresi"
      else if (quake.region.includes("Iran") || quake.region.includes("Iraq")) region = "Orta Doğu"
      else if (quake.region.includes("Philippines")) region = "Filipinler"
      else if (quake.region.includes("New Zealand")) region = "Yeni Zelanda"
      else if (quake.region.includes("Alaska")) region = "Alaska"
      else if (quake.region.includes("Hawaii")) region = "Hawaii"

regions[region] = (regions[region] || 0) + 1
    })

// En çok deprem olan 5 bölgeyi al
    return Object.entries(regions)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5)
      .map(([name, count]) => ({ name, count }))
  }, [earthquakeData])

useEffect(() => {
    if (!earthquakeData || earthquakeData.length === 0) return

// Risk skorlarını hesapla
    const scores = calculateGlobalRiskScores(earthquakeData)
    setRiskScores(scores)
  }, [earthquakeData])

if (!riskScores) {
    return <div className="text-white text-xs">Yükleniyor...</div>
  }

return (
    <div className="space-y-2">
      <Card className="bg-gradient-to-r from-black/80 to-black/60 border-white/20 text-white overflow-hidden">
        <CardContent className="p-3">
          <div className="grid grid-cols-3 gap-2">
            <div className="bg-gradient-to-br from-black/70 to-black/40 p-2 rounded-lg border border-white/10 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-16 h-16 opacity-10">
                <AlertTriangle className="w-full h-full" />
              </div>
              <h3 className="text-xs font-medium mb-1 flex items-center">
                <AlertTriangle className="h-3 w-3 mr-1" />
                Küresel Risk
              </h3>
              <div className="text-xl font-bold">{riskScores.overall.toFixed(1)}/10</div>
              <div className={`text-xs mt-1 ${getRiskColorClass(riskScores.overall)}`}>
                {getRiskDescription(riskScores.overall)}
              </div>
            </div>

<div className="bg-gradient-to-br from-black/70 to-black/40 p-2 rounded-lg border border-white/10 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-16 h-16 opacity-10">
                <Activity className="w-full h-full" />
              </div>
              <h3 className="text-xs font-medium mb-1 flex items-center">
                <Activity className="h-3 w-3 mr-1" />
                Sismik Aktivite
              </h3>
              <div className="text-xl font-bold">{riskScores.seismicActivity.toFixed(1)}/10</div>
              <div className="text-xs text-gray-400 mt-1">Son 30 günde {earthquakeData.length} deprem</div>
            </div>

<div className="bg-gradient-to-br from-black/70 to-black/40 p-2 rounded-lg border border-white/10 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-16 h-16 opacity-10">
                <Globe className="w-full h-full" />
              </div>
              <h3 className="text-xs font-medium mb-1 flex items-center">
                <Globe className="h-3 w-3 mr-1" />
                Aktif Bölgeler
              </h3>
              <div className="text-xl font-bold">{riskScores.activeRegions.toFixed(1)}/10</div>
              <div className="text-xs text-gray-400 mt-1">{regionDistribution[0]?.name || "Veri yok"}</div>
            </div>
          </div>
        </CardContent>
      </Card>

<Tabs defaultValue={defaultTab} value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="bg-black/50 border border-white/20 h-7 w-full">
          <TabsTrigger value="overview" className="text-xs h-5 px-2">
            Genel Bakış
          </TabsTrigger>
          <TabsTrigger value="regions" className="text-xs h-5 px-2">
            Bölgeler
          </TabsTrigger>
          <TabsTrigger value="trends" className="text-xs h-5 px-2">
            Trendler
          </TabsTrigger>
          <TabsTrigger value="forecast" className="text-xs h-5 px-2">
            Tahmin
          </TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="bg-black/80 border border-white/20 rounded-lg p-2 mt-1">
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <h3 className="text-xs text-white font-medium flex items-center">
                <BarChart3 className="h-3 w-3 mr-1" />
                Küresel Deprem Özeti
              </h3>
              <Badge className={`text-[10px] ${getRiskColorClass(riskScores.overall)}`}>
                {getRiskDescription(riskScores.overall)}
              </Badge>
            </div>

<div className="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto">
              <div className="bg-black/50 rounded-lg border border-white/10 p-2">
                <h4 className="text-xs font-medium mb-1">Deprem Dağılımı</h4>
                <div className="space-y-1">
                  <div className="flex justify-between items-center">
                    <div className="flex items-center">
                      <div className="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
                      <span className="text-xs">Küçük (0-2.9)</span>
                    </div>
                    <span className="text-xs">{magnitudeGroups.small}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <div className="flex items-center">
                      <div className="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
                      <span className="text-xs">Orta (3.0-4.9)</span>
                    </div>
                    <span className="text-xs">{magnitudeGroups.medium}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <div className="flex items-center">
                      <div className="w-2 h-2 rounded-full bg-orange-500 mr-1"></div>
                      <span className="text-xs">Büyük (5.0-5.9)</span>
                    </div>
                    <span className="text-xs">{magnitudeGroups.large}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <div className="flex items-center">
                      <div className="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                      <span className="text-xs">Majör (6.0+)</span>
                    </div>
                    <span className="text-xs">{magnitudeGroups.major}</span>
                  </div>
                </div>
              </div>

<div className="bg-black/50 rounded-lg border border-white/10 p-2">
                <h4 className="text-xs font-medium mb-1">Son Aktivite</h4>
                <div className="text-xs text-gray-300 mb-1">Son 7 gün: {recentEarthquakes.length} deprem</div>

<div className="space-y-1">
                  <div className="flex justify-between items-center">
                    <span className="text-xs">En büyük deprem:</span>
                    <Badge className="text-[10px]">
                      M{Math.max(...earthquakeData.map((q) => q.magnitude)).toFixed(1)}
                    </Badge>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Ortalama derinlik:</span>
                    <span className="text-xs">
                      {(earthquakeData.reduce((sum, q) => sum + q.depth, 0) / earthquakeData.length).toFixed(1)} km
                    </span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-xs">Aktivite trendi:</span>
                    <div className="flex items-center">
                      <TrendingUp className="h-3 w-3 mr-1 text-yellow-500" />
                      <span className="text-xs text-yellow-500">Orta</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="regions" className="bg-black/80 border border-white/20 rounded-lg p-2 mt-1">
          <h3 className="text-xs text-white mb-2 font-medium flex items-center">
            <Map className="h-3 w-3 mr-1" />
            Bölgesel Deprem Dağılımı
          </h3>

<div className="space-y-2 max-h-40 overflow-y-auto">
            {regionDistribution.map((region, index) => (
              <div key={index} className="bg-black/50 rounded-lg border border-white/10 p-2">
                <div className="flex justify-between items-center">
                  <span className="text-xs font-medium">{region.name}</span>
                  <Badge className="text-[10px]">{region.count} deprem</Badge>
                </div>
                <div className="mt-1 w-full bg-black/50 rounded-full h-1.5">
                  <div
                    className={`${index === 0 ? "bg-red-500" : index === 1 ? "bg-orange-500" : "bg-yellow-500"} h-1.5 rounded-full`}
                    style={{ width: `${(region.count / earthquakeData.length) * 100}%` }}
                  ></div>
                </div>
              </div>
            ))}
          </div>
        </TabsContent>

<TabsContent value="trends" className="bg-black/80 border border-white/20 rounded-lg p-2 mt-1">
          <h3 className="text-xs text-white mb-2 font-medium flex items-center">
            <TrendingUp className="h-3 w-3 mr-1" />
            Deprem Aktivite Trendleri
          </h3>

<div className="h-32 bg-gradient-to-br from-black/70 to-black/40 rounded-lg border border-white/10 p-2 relative overflow-hidden">
            <div className="absolute inset-0 flex items-end px-2 pb-2">
              {/* Basit bir trend grafiği gösterimi */}
              {Array.from({ length: 30 }).map((_, i) => {
                const height = Math.random() * 40 + 5
                const color =
                  height > 35
                    ? "bg-red-500"
                    : height > 25
                      ? "bg-orange-500"
                      : height > 15
                        ? "bg-yellow-500"
                        : "bg-green-500"
                return (
                  <div key={i} className={`w-1 mx-0.5 ${color} rounded-t-sm`} style={{ height: `${height}%` }}></div>
                )
              })}
            </div>
            <div className="absolute top-2 left-2 text-white text-xs font-medium">Son 30 Gün Deprem Trendi</div>
          </div>
        </TabsContent>

<TabsContent value="forecast" className="bg-black/80 border border-white/20 rounded-lg p-2 mt-1">
          <h3 className="text-xs text-white mb-2 font-medium">Deprem Tahmin Modeli</h3>
          <div className="h-32 bg-gradient-to-br from-black/70 to-black/40 rounded-lg border border-white/10 p-2 relative overflow-hidden">
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-24 h-24 rounded-full border-4 border-white/20 flex items-center justify-center relative">
                <div className="absolute inset-0 rounded-full border-t-4 border-red-500 animate-spin"></div>
                <div className="text-center">
                  <div className="text-xl font-bold text-white">{(riskScores.overall * 10).toFixed(1)}%</div>
                  <div className="text-xs text-gray-300">Risk Olasılığı</div>
                </div>
              </div>
            </div>
          </div>

<div className="mt-3 space-y-2">
            <div className="bg-black/50 rounded-lg border border-white/10 p-2">
              <h4 className="text-xs font-medium mb-1">Yüksek Riskli Bölgeler</h4>
              <div className="space-y-1">
                {regionDistribution.slice(0, 3).map((region, index) => (
                  <div key={index} className="flex justify-between items-center">
                    <span className="text-xs">{region.name}</span>
                    <Badge
                      className={`text-[10px] ${index === 0 ? "bg-red-500" : index === 1 ? "bg-orange-500" : "bg-yellow-500"}`}
                    >
                      {index === 0 ? "Yüksek" : index === 1 ? "Orta" : "Düşük"} Risk
                    </Badge>
                  </div>
                ))}
              </div>
            </div>

<div className="bg-black/50 rounded-lg border border-white/10 p-2">
              <h4 className="text-xs font-medium mb-1">Tahmin Edilen Aktivite</h4>
              <div className="text-xs text-gray-300">
                Önümüzdeki 7 gün içinde {Math.round(riskScores.overall * 2)} adet M4.0+ deprem bekleniyor.
              </div>
              <div className="mt-1 text-xs text-gray-300">
                {riskScores.overall > 7
                  ? "Büyük deprem riski yüksek!"
                  : riskScores.overall > 5
                    ? "Orta şiddette depremler olabilir."
                    : "Düşük şiddette depremler bekleniyor."}
              </div>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}

// Yardımcı fonksiyonlar
function calculateGlobalRiskScores(earthquakeData) {
  // Küresel risk skorları hesaplama

// Son 30 gündeki depremler
  const recentQuakes = earthquakeData.filter((q) => new Date(q.time) > new Date(Date.now() - 30 * 24 * 60 * 60 * 1000))

// Sismik aktivite skoru (depremlerin sıklığı ve büyüklüğüne göre)
  const magnitudeSum = recentQuakes.reduce((sum, q) => sum + q.magnitude, 0)
  const seismicActivity = Math.min(10, (magnitudeSum / Math.max(1, recentQuakes.length)) * 0.4)

// Büyük deprem sayısı
  const largeEarthquakes = recentQuakes.filter((q) => q.magnitude >= 6.0).length
  const largeEarthquakeScore = Math.min(10, largeEarthquakes * 2)

// Bölgesel yoğunluk
  const regions = {}
  recentQuakes.forEach((quake) => {
    // Bölge adını basitleştir
    let region = "Diğer"

regions[region] = (regions[region] || 0) + 1
  })

// En aktif bölgelerin sayısı
  const activeRegionsCount = Object.values(regions).filter((count) => count >= 3).length
  const activeRegions = Math.min(10, activeRegionsCount * 1.5)

// Genel risk skoru
  const overall = seismicActivity * 0.4 + largeEarthquakeScore * 0.4 + activeRegions * 0.2

return {
    overall,
    seismicActivity,
    largeEarthquakeScore,
    activeRegions,
  }
}

function getRiskDescription(score) {
  if (score >= 8) return "Çok Yüksek Risk"
  if (score >= 6) return "Yüksek Risk"
  if (score >= 4) return "Orta Risk"
  if (score >= 2) return "Düşük Risk"
  return "Çok Düşük Risk"
}

function getRiskColorClass(score) {
  if (score >= 8) return "text-red-500"
  if (score >= 6) return "text-orange-500"
  if (score >= 4) return "text-yellow-500"
  if (score >= 2) return "text-green-500"
  return "text-blue-500"
}

[V0_FILE]typescriptreact:file="components/world-model.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

// Earth component with realistic textures and earthquake visualization
function Earth({ earthquakeData, onEarthquakeSelect, highlightedEarthquakes = [], settings }) {
  const earthRef = useRef()
  const atmosphereRef = useRef()
  const starsRef = useRef()

// Earth textures
  const textures = useMemo(() => {
    const textureLoader = new THREE.TextureLoader()

// Load Earth textures
  useEffect(() => {
    const textureLoader = new THREE.TextureLoader()

// Load night map texture (dark map with visible city lights)
    textureLoader.load("/assets/textures/earth_night.jpg", (texture) => {
      textures.nightMap = texture
      textures.nightMap.needsUpdate = true
    })

// Load political map texture (country borders)
    textureLoader.load("/assets/textures/earth_political.jpg", (texture) => {
      textures.map = texture
      textures.map.needsUpdate = true
    })

// Load bump map for terrain
    textureLoader.load("/assets/textures/earth_normal.jpg", (texture) => {
      textures.bumpMap = texture
      textures.bumpMap.needsUpdate = true
    })

// Load specular map for oceans
    textureLoader.load("/assets/textures/earth_specular.jpg", (texture) => {
      textures.specularMap = texture
      textures.specularMap.needsUpdate = true
    })
  }, [textures])

// Earth materials
  const materials = useMemo(() => {
    // Earth material - dark with visible borders
    const earthMaterial = new THREE.MeshPhongMaterial({
      map: textures.map,
      bumpMap: textures.bumpMap,
      bumpScale: 0.05,
      specularMap: textures.specularMap,
      specular: new THREE.Color(0x333333),
      shininess: 15,
      transparent: settings?.globeOpacity < 1,
      opacity: settings?.globeOpacity || 1,
    })

// Atmosphere material - blue glow
    const atmosphereMaterial = new THREE.MeshPhongMaterial({
      color: new THREE.Color(0x0077ff),
      side: THREE.BackSide,
      transparent: true,
      opacity: 0.3,
    })

return { earthMaterial, atmosphereMaterial }
  }, [textures, settings?.globeOpacity])

// Segment count based on detail level
  const segments = useMemo(() => {
    if (!settings) return 32

switch (settings.globeDetail) {
      case "high":
        return 64
      case "medium":
        return 32
      case "low":
        return 16
      default:
        return 32
    }
  }, [settings])

// Process earthquake data for visualization
  const earthquakePoints = useMemo(() => {
    // Limit points for performance
    const maxPoints = settings?.lowPerformanceMode ? 100 : 1000
    const filteredData =
      earthquakeData.length > maxPoints
        ? earthquakeData.sort((a, b) => b.magnitude - a.magnitude).slice(0, maxPoints)
        : earthquakeData

// Size based on magnitude
      const pointSize = settings?.pointSize || 1
      const size = Math.max(0.02, quake.magnitude * 0.01 * pointSize)

// Color based on magnitude
      let color
      if (quake.magnitude >= 7.0) {
        color = new THREE.Color(0.9, 0.4, 0.1) // Orange-red
      } else if (quake.magnitude >= 6.0) {
        color = new THREE.Color(0.9, 0.7, 0.1) // Orange-yellow
      } else if (quake.magnitude >= 5.0) {
        color = new THREE.Color(0.9, 0.9, 0.1) // Yellow
      } else if (quake.magnitude >= 3.0) {
        color = new THREE.Color(0.7, 0.9, 0.1) // Yellow-green
      } else {
        color = new THREE.Color(0.5, 0.9, 0.1) // Green
      }

// Check if this earthquake is highlighted
      const isHighlighted = highlightedEarthquakes.some((e) => e.id === quake.id)

return {
        position: [x, y, z],
        size,
        color,
        quake,
        isHighlighted,
        depth: quake.depth,
      }
    })
  }, [earthquakeData, highlightedEarthquakes, settings])

// Rotate Earth
  useFrame((state, delta) => {
    if (earthRef.current && settings?.globeRotation) {
      earthRef.current.rotation.y += delta * 0.05 * (settings.rotationSpeed || 1)
    }

if (atmosphereRef.current && settings?.globeRotation) {
      atmosphereRef.current.rotation.y += delta * 0.05 * (settings.rotationSpeed || 1)
    }
  })

return (
    <group>
      {/* Stars background */}
      {settings?.showStars && !settings?.lowPerformanceMode && (
        <Stars
          ref={starsRef}
          radius={100}
          depth={50}
          count={settings.starCount || 5000}
          factor={4}
          saturation={0}
          fade
          speed={settings.starSpeed || 1}
        />
      )}

{/* Earth sphere */}
      <mesh ref={earthRef}>
        <sphereGeometry args={[1, segments, segments]} />
        <primitive object={materials.earthMaterial} attach="material" />
      </mesh>

{/* Atmosphere glow */}
      <mesh ref={atmosphereRef} scale={1.025}>
        <sphereGeometry args={[1, segments / 2, segments / 2]} />
        <primitive object={materials.atmosphereMaterial} attach="material" />
      </mesh>

{/* Earthquake points */}
      {earthquakePoints.map((point, index) => (
        <EarthquakePoint
          key={index}
          position={point.position}
          size={point.size}
          color={point.color}
          quake={point.quake}
          depth={point.depth}
          onSelect={onEarthquakeSelect}
          isHighlighted={point.isHighlighted}
          showLabels={settings?.showLabels}
          pulseEffect={settings?.pulseEffect && !settings?.lowPerformanceMode}
          lowPerformance={settings?.lowPerformanceMode}
        />
      ))}
    </group>
  )
}

// Geometry quality based on performance setting
  const segments = lowPerformance ? 8 : 16

// Animation effects
  useFrame((state, delta) => {
    if (!sphereRef.current) return

if (glowRef.current) {
        glowRef.current.scale.x = 1.2 + Math.sin(state.clock.elapsedTime * 5) * 0.5
        glowRef.current.scale.y = 1.2 + Math.sin(state.clock.elapsedTime * 5) * 0.5
        glowRef.current.scale.z = 1.2 + Math.sin(state.clock.elapsedTime * 5) * 0.5
      }
    } else if (hovered) {
      // Hover effect
      sphereRef.current.scale.set(1.5, 1.5, 1.5)
      if (glowRef.current) {
        glowRef.current.scale.set(1.8, 1.8, 1.8)
      }
    } else {
      // Normal state
      sphereRef.current.scale.set(1, 1, 1)
      if (glowRef.current) {
        glowRef.current.scale.set(1.2, 1.2, 1.2)
      }
    }
  })

return (
    <group position={position}>
      {/* Glow effect for earthquake points */}
      {!lowPerformance && (
        <mesh ref={glowRef} scale={1.2}>
          <sphereGeometry args={[size, segments, segments]} />
          <meshBasicMaterial color={color} transparent opacity={0.3} />
        </mesh>
      )}

{/* Main earthquake point */}
      <mesh
        ref={sphereRef}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
        onClick={() => onSelect(quake)}
      >
        <sphereGeometry args={[size, segments, segments]} />
        <meshBasicMaterial color={isHighlighted ? new THREE.Color(1, 1, 0) : color} />
      </mesh>

{/* Information label - using drei's Html component */}
      {(hovered || isHighlighted) && showLabels && !lowPerformance && (
        <Html position={[0, size * 2, 0]} center distanceFactor={10}>
          <div className="bg-black/80 text-white px-2 py-1 text-xs rounded whitespace-nowrap pointer-events-none">
            M{quake.magnitude.toFixed(1)} | {depth} km | {quake.region}
          </div>
        </Html>
      )}

{/* Seismic wave rings for highlighted earthquakes */}
      {isHighlighted && pulseEffect && !lowPerformance && <WaveRings />}
    </group>
  )
}

// Seismic wave rings component
function WaveRings() {
  const ringsRef = useRef([])
  const [rings] = useState([0, 1, 2]) // 3 rings

// Reset when fully transparent
        if (ring.material.opacity <= 0) {
          ring.scale.set(1, 1, 1)
          ring.material.opacity = 0.5
        }
      }
    })
  })

// Loading indicator
function LoadingIndicator() {
  const groupRef = useRef()

useFrame(({ clock }) => {
    if (groupRef.current) {
      groupRef.current.rotation.y = clock.getElapsedTime() * 0.5
    }
  })

// Main component with camera controls
export default function WorldModel({
  earthquakeData,
  onEarthquakeSelect,
  isLoading,
  highlightedEarthquakes,
  settings = {},
}) {
  // Default settings
  const defaultSettings = {
    // Globe settings
    globeRotation: true,
    rotationSpeed: 1,
    globeOpacity: 1,
    activeLayer: "night", // Use night layer for dark appearance
    globeDetail: "medium", // high, medium, low

// Earthquake points settings
    pointSize: 1.5, // Increased point size for better visibility
    showLabels: true,
    pulseEffect: true,

// Stars settings
    showStars: true,
    starCount: 5000,
    starSpeed: 1,

// Camera controls
    enableZoom: true,
    enablePan: false,
    enableRotate: true,
    autoRotate: false,
    autoRotateSpeed: 0.5,
    minZoom: 2.5,
    maxZoom: 10,

// Performance mode
    lowPerformanceMode: false,
  }

// Merge user settings with defaults
  const mergedSettings = { ...defaultSettings, ...settings }

return (
    <div className="w-full h-full">
      <Canvas
        camera={{ position: [0, 0, 5], fov: 45 }}
        gl={{
          antialias: !mergedSettings.lowPerformanceMode,
          powerPreference: "high-performance",
          alpha: false,
          depth: true,
          stencil: false,
          pixelRatio: Math.min(2, window.devicePixelRatio),
        }}
        performance={{ min: 0.5 }}
        dpr={[1, mergedSettings.lowPerformanceMode ? 1 : 2]}
      >
        {/* Ambient light for overall illumination */}
        <ambientLight intensity={0.3} />

{/* Main directional light - positioned to create the blue edge glow effect */}
        <directionalLight position={[5, 3, 5]} intensity={1} color="#ffffff" />

{/* Subtle blue light for atmosphere effect */}
        <pointLight position={[-10, -10, -10]} intensity={0.2} color="#0077ff" />

{isLoading ? (
          <LoadingIndicator />
        ) : (
          <Earth
            earthquakeData={earthquakeData}
            onEarthquakeSelect={onEarthquakeSelect}
            highlightedEarthquakes={highlightedEarthquakes}
            settings={mergedSettings}
          />
        )}

[V0_FILE]plaintext:file="public/assets/sounds/sonar-background.mp3" url="https://v0.blob.com/Ym9Ub3JvZGluLWFwaS11aXNvbmFyLWJhY2tncm91bmQubXAz.mp3" isMerged="true"

[V0_FILE]plaintext:file="public/assets/sounds/sonar-alert.mp3" url="https://v0.blob.com/Ym9Ub3JvZGluLWFwaS11aXNvbmFyLWFsZXJ0Lm1wMw==.mp3" isMerged="true"

[V0_FILE]plaintext:file="public/assets/sounds/earthquake-alert.mp3" url="https://v0.blob.com/Ym9Ub3JvZGluLWFwaS11aWVhcnRocXVha2UtYWxlcnQubXAz.mp3" isMerged="true"

[V0_FILE]typescriptreact:file="components/earthquake-minimap.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useRef, useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { AlertTriangle } from "lucide-react"

export default function EarthquakeMinimap({ earthquake }) {
  const canvasRef = useRef(null)
  const [animationActive, setAnimationActive] = useState(true)

// Deprem şiddetine göre renk belirle
  const getMagnitudeColor = (magnitude) => {
    if (magnitude >= 7) return "#ef4444" // red-500
    if (magnitude >= 6) return "#f97316" // orange-500
    if (magnitude >= 5) return "#facc15" // yellow-500
    return "#4ade80" // green-500
  }

// Deprem zamanını formatla
  const formatDate = (dateString) => {
    const date = new Date(dateString)
    return date.toLocaleString("tr-TR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    })
  }

// Deprem zamanından bu yana geçen süreyi hesapla
  const getTimeAgo = (dateString) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffMs = now.getTime() - date.getTime()

const diffSecs = Math.floor(diffMs / 1000)
    if (diffSecs < 60) return `${diffSecs} saniye önce`

const diffMins = Math.floor(diffSecs / 60)
    if (diffMins < 60) return `${diffMins} dakika önce`

const diffHours = Math.floor(diffMins / 60)
    if (diffHours < 24) return `${diffHours} saat önce`

const diffDays = Math.floor(diffHours / 24)
    return `${diffDays} gün önce`
  }

// Canvas üzerinde sismik dalga animasyonu
  useEffect(() => {
    if (!canvasRef.current || !earthquake) return

const canvas = canvasRef.current
    const ctx = canvas.getContext("2d")
    const width = canvas.width
    const height = canvas.height
    const centerX = width / 2
    const centerY = height / 2

let animationFrame
    let time = 0

// Harita arka planı çiz
    const drawMap = () => {
      // Basit bir harita arka planı
      ctx.fillStyle = "#111"
      ctx.fillRect(0, 0, width, height)

// Grid çizgileri
      ctx.strokeStyle = "rgba(255, 255, 255, 0.1)"
      ctx.lineWidth = 0.5

// Yatay grid çizgileri
      for (let y = 0; y < height; y += 20) {
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(width, y)
        ctx.stroke()
      }

// Dikey grid çizgileri
      for (let x = 0; x < width; x += 20) {
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, height)
        ctx.stroke()
      }
    }

// Deprem merkezi çiz
    const drawEpicenter = () => {
      const magnitude = earthquake.magnitude
      const size = Math.max(5, magnitude * 2)

// Deprem merkezi
      ctx.fillStyle = getMagnitudeColor(magnitude)
      ctx.beginPath()
      ctx.arc(centerX, centerY, size, 0, Math.PI * 2)
      ctx.fill()

// Parlama efekti
      ctx.fillStyle = "rgba(255, 255, 255, 0.7)"
      ctx.beginPath()
      ctx.arc(centerX - size / 3, centerY - size / 3, size / 4, 0, Math.PI * 2)
      ctx.fill()
    }

// Sismik dalgalar çiz
    const drawWaves = (time) => {
      const magnitude = earthquake.magnitude
      const waveCount = Math.floor(magnitude)

for (let i = 0; i < waveCount; i++) {
        const waveTime = time - i * 0.5
        if (waveTime <= 0) continue

const radius = waveTime * 50
        const opacity = Math.max(0, 1 - waveTime / 3)

ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`
        ctx.lineWidth = 2

ctx.beginPath()
        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2)
        ctx.stroke()
      }
    }

// Bölge adını çiz
    const drawRegionName = () => {
      ctx.fillStyle = "rgba(255, 255, 255, 0.7)"
      ctx.font = "10px Arial"
      ctx.textAlign = "center"

// Bölge adını kısalt
      let regionName = earthquake.region
      if (regionName.length > 25) {
        regionName = regionName.substring(0, 22) + "..."
      }

ctx.fillText(regionName, centerX, height - 10)
    }

// Animasyon döngüsü
    const animate = () => {
      if (!animationActive) return

ctx.clearRect(0, 0, width, height)

drawMap()
      drawEpicenter()
      drawWaves(time)
      drawRegionName()

time += 0.02
      animationFrame = requestAnimationFrame(animate)
    }

animate()

// Temizleme işlemi
    return () => {
      cancelAnimationFrame(animationFrame)
      setAnimationActive(false)
    }
  }, [earthquake, animationActive])

// Deprem mini haritasına ses efekti ekleyelim - daha güvenli hale getirelim
  useEffect(() => {
    // Deprem mini haritası gösterildiğinde ses çal
    if (earthquake && canvasRef.current && typeof window !== "undefined") {
      let audioContext

try {
        // AudioContext'i güvenli bir şekilde oluştur
        const AudioContextClass = window.AudioContext || window.webkitAudioContext
        if (!AudioContextClass) {
          console.log("AudioContext desteklenmiyor")
          return
        }

audioContext = new AudioContextClass()

// Deprem büyüklüğüne göre ses frekansını ayarla
        const playPulseSound = () => {
          if (!animationActive || !audioContext) return

try {
            const oscillator = audioContext.createOscillator()
            const gainNode = audioContext.createGain()

// Deprem büyüklüğüne göre frekans ayarla (büyük deprem = düşük frekans)
            const baseFreq = 440 - earthquake.magnitude * 30
            oscillator.frequency.value = baseFreq
            oscillator.type = "sine"

// Ses seviyesini ayarla
            gainNode.gain.value = 0.05 // Daha düşük ses seviyesi

// Bağlantıları kur
            oscillator.connect(gainNode)
            gainNode.connect(audioContext.destination)

// Sesi başlat ve durdur
            oscillator.start()
            gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5)
            oscillator.stop(audioContext.currentTime + 0.5)

// Animasyon aktifse tekrar çal
            if (animationActive) {
              setTimeout(playPulseSound, 2000) // 2 saniyede bir tekrarla (daha seyrek)
            }
          } catch (error) {
            console.error("Ses oluşturulurken hata:", error)
          }
        }

// Kullanıcı etkileşimi sonrası ses çalmayı dene
        const handleUserInteraction = () => {
          // AudioContext'i başlat
          if (audioContext.state === "suspended") {
            audioContext
              .resume()
              .then(() => {
                playPulseSound()
              })
              .catch((e) => {
                console.error("AudioContext başlatılamadı:", e)
              })
          } else {
            playPulseSound()
          }

// Etkileşim dinleyicilerini kaldır
          document.removeEventListener("click", handleUserInteraction)
          document.removeEventListener("touchstart", handleUserInteraction)
        }

// Kullanıcı etkileşimini dinle
        document.addEventListener("click", handleUserInteraction)
        document.addEventListener("touchstart", handleUserInteraction)

// Temizleme işlemi
        return () => {
          if (audioContext) {
            audioContext.close().catch((e) => console.error("AudioContext kapatılamadı:", e))
          }

// Etkileşim dinleyicilerini kaldır
          document.removeEventListener("click", handleUserInteraction)
          document.removeEventListener("touchstart", handleUserInteraction)
        }
      } catch (error) {
        console.error("AudioContext oluşturulurken hata:", error)
      }
    }
  }, [earthquake, animationActive])

if (!earthquake) return null

return (
    <Card className="w-80 bg-black/80 border-white/20 text-white animate-pulse-earthquake">
      <CardHeader className="pb-1 pt-2 px-3 flex flex-row items-center justify-between">
        <CardTitle className="text-sm flex items-center">
          <AlertTriangle className="h-4 w-4 mr-1 text-red-500" />
          Deprem Tespit Edildi!
        </CardTitle>
        <Badge
          className={`text-[10px] ${
            earthquake.magnitude >= 7
              ? "bg-red-500"
              : earthquake.magnitude >= 6
                ? "bg-orange-500"
                : earthquake.magnitude >= 5
                  ? "bg-yellow-500"
                  : "bg-green-500"
          }`}
        >
          M{earthquake.magnitude.toFixed(1)}
        </Badge>
      </CardHeader>
      <CardContent className="p-3 space-y-2">
        <div className="w-full h-40 rounded-md overflow-hidden">
          <canvas ref={canvasRef} width={300} height={150} className="w-full h-full" />
        </div>

<div className="space-y-1">
          <div className="flex justify-between items-center">
            <span className="text-gray-300 text-xs">Bölge:</span>
            <span className="text-white text-xs font-medium">{earthquake.region}</span>
          </div>

<div className="flex justify-between items-center">
            <span className="text-gray-300 text-xs">Zaman:</span>
            <span className="text-white text-xs">{formatDate(earthquake.time)}</span>
          </div>

<div className="flex justify-between items-center">
            <span className="text-gray-300 text-xs">Derinlik:</span>
            <span className="text-white text-xs">{earthquake.depth} km</span>
          </div>

<div className="flex justify-between items-center">
            <span className="text-gray-300 text-xs">Koordinatlar:</span>
            <span className="text-white text-xs">
              {earthquake.location.lat.toFixed(2)}, {earthquake.location.lng.toFixed(2)}
            </span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/earthquake-notification.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
// Yeni bir bileşen oluşturalım - deprem bildirimi için
"use client"

import { useEffect, useRef } from "react"
import { AlertTriangle } from "lucide-react"

export default function EarthquakeNotification({ earthquake, onClose }) {
  const audioRef = useRef(null)

useEffect(() => {
    // Bildirim gösterildiğinde ses çal - daha güvenli hale getirelim
    // Bildirim gösterildiğinde ses çal
    if (earthquake && typeof window !== "undefined") {
      let handleUserInteraction // Declare handleUserInteraction here

try {
        const audio = new Audio()
        audio.src = "/assets/sounds/earthquake-alert.mp3"
        audio.volume = Math.min(1.0, Math.max(0.3, earthquake.magnitude / 10))
        audioRef.current = audio

// Kullanıcı etkileşimi sonrası ses çalmayı dene
        handleUserInteraction = () => {
          if (audioRef.current) {
            audioRef.current.play().catch((e) => {
              console.log("Bildirim sesi oynatılamadı:", e)
            })
          }

// Etkileşim dinleyicilerini kaldır
          document.removeEventListener("click", handleUserInteraction)
          document.removeEventListener("touchstart", handleUserInteraction)
        }

// Kullanıcı etkileşimini dinle
        document.addEventListener("click", handleUserInteraction)
        document.addEventListener("touchstart", handleUserInteraction)

// Otomatik çalmayı dene (kullanıcı etkileşimi varsa çalışacak)
        audio.play().catch((e) => {
          console.log("Bildirim sesi otomatik oynatılamadı, kullanıcı etkileşimi bekleniyor:", e)
        })
      } catch (error) {
        console.error("Bildirim sesi oluşturulurken hata:", error)
      }

// Temizleme işlemi
      return () => {
        if (audioRef.current) {
          audioRef.current.pause()
          audioRef.current.src = ""
        }

if (!earthquake) return null

return (
    <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black/90 border-2 border-red-500 text-white p-4 rounded-lg z-50 animate-pulse-earthquake">
      <div className="flex items-center gap-3">
        <AlertTriangle className="h-8 w-8 text-red-500" />
        <div>
          <h3 className="text-xl font-bold">Deprem Bildirimi!</h3>
          <p className="text-lg">
            M{earthquake.magnitude.toFixed(1)} - {earthquake.region}
          </p>
          <p className="text-sm text-gray-300">Derinlik: {earthquake.depth} km</p>
        </div>
      </div>
      <button onClick={onClose} className="mt-3 bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded w-full">
        Kapat
      </button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/audio-controller.tsx"
"use client"

import { useState, useEffect, useRef } from "react"

interface AudioControllerProps {
  enabled: boolean
  onToggle: () => void
}

export default function AudioController({ enabled, onToggle }: AudioControllerProps) {
  const backgroundAudioRef = useRef<HTMLAudioElement | null>(null)
  const [isReady, setIsReady] = useState(false)

useEffect(() => {
    // Ses dosyasını yükle
    if (typeof window !== "undefined") {
      try {
        const audio = new Audio()
        audio.src = "/assets/sounds/sonar-background.mp3"
        audio.loop = true
        audio.volume = 0.1
        audio.preload = "auto"

// Ses dosyası yüklendiğinde hazır olduğunu bildir
        audio.oncanplaythrough = () => {
          setIsReady(true)
        }

// Hata durumunda
        audio.onerror = (e) => {
          console.error("Ses dosyası yüklenemedi:", e)
          setIsReady(false)
        }

backgroundAudioRef.current = audio

// Temizleme işlemi
        return () => {
          if (backgroundAudioRef.current) {
            backgroundAudioRef.current.pause()
            backgroundAudioRef.current.src = ""
          }
        }
      } catch (error) {
        console.error("Ses kontrolörü oluşturulurken hata:", error)
      }
    }
  }, [])

// Ses durumunu kontrol et
  useEffect(() => {
    if (!backgroundAudioRef.current || !isReady) return

if (enabled) {
      // Kullanıcı etkileşimi sonrası ses çalmayı dene
      const playAudio = () => {
        backgroundAudioRef.current?.play().catch((e) => {
          console.log("Ses otomatik oynatılamadı:", e)
        })
      }

// Kullanıcı etkileşimini bekle
      const handleUserInteraction = () => {
        playAudio()
        // Etkileşim dinleyicilerini kaldır
        document.removeEventListener("click", handleUserInteraction)
        document.removeEventListener("touchstart", handleUserInteraction)
      }

// Kullanıcı etkileşimini dinle
      document.addEventListener("click", handleUserInteraction)
      document.addEventListener("touchstart", handleUserInteraction)

// Otomatik çalmayı dene (kullanıcı etkileşimi varsa çalışacak)
      playAudio()

return () => {
        document.removeEventListener("click", handleUserInteraction)
        document.removeEventListener("touchstart", handleUserInteraction)
      }
    } else {
      // Sesi durdur
      backgroundAudioRef.current.pause()
    }
  }, [enabled, isReady])

return (
    <button
      onClick={onToggle}
      className="bg-black/70 border border-white/20 text-white hover:bg-black/90 text-xs py-1.5 px-3 h-auto flex items-center gap-1 rounded"
    >
      {enabled ? (
        <>
          <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"
          >
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
          </svg>
          Ses Açık
        </>
      ) : (
        <>
          <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"
          >
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <line x1="23" y1="9" x2="17" y2="15"></line>
            <line x1="17" y1="9" x2="23" y2="15"></line>
          </svg>
          Ses Kapalı
        </>
      )}
    </button>
  )
}

[V0_FILE]typescriptreact:file="components/sound-effects.tsx"
"use client"

import { useEffect, useRef } from "react"

interface SoundEffectsProps {
  enabled: boolean
  newEarthquakes: any[]
  onEarthquakeDetected?: (magnitude: number) => void
}

export default function SoundEffects({ enabled, newEarthquakes, onEarthquakeDetected }: SoundEffectsProps) {
  const alertAudioRef = useRef<HTMLAudioElement | null>(null)
  const lastPlayedRef = useRef<string | null>(null)

// Deprem uyarı sesi için hazırlık
  useEffect(() => {
    if (typeof window === "undefined" || !enabled) return

try {
      const audio = new Audio()
      audio.src = "/assets/sounds/sonar-alert.mp3"
      audio.preload = "auto"
      alertAudioRef.current = audio

return () => {
        if (alertAudioRef.current) {
          alertAudioRef.current.pause()
          alertAudioRef.current.src = ""
        }
      }
    } catch (error) {
      console.error("Uyarı sesi oluşturulurken hata:", error)
    }
  }, [enabled])

// Yeni deprem tespit edildiğinde ses çal
  useEffect(() => {
    if (!enabled || !alertAudioRef.current || newEarthquakes.length === 0) return

// En büyük depremi bul
    const biggestQuake = newEarthquakes.reduce(
      (prev, current) => (prev.magnitude > current.magnitude ? prev : current),
      newEarthquakes[0],
    )

// Aynı depremi tekrar çalma
    if (lastPlayedRef.current === biggestQuake.id) return
    lastPlayedRef.current = biggestQuake.id

try {
      // Büyüklüğe göre ses seviyesini ayarla
      const normalizedVolume = Math.min(1.0, Math.max(0.3, biggestQuake.magnitude / 10))
      alertAudioRef.current.volume = normalizedVolume

// Kullanıcı etkileşimi sonrası ses çalmayı dene
      const playSound = () => {
        if (!alertAudioRef.current) return

alertAudioRef.current.currentTime = 0
        alertAudioRef.current.play().catch((e) => {
          console.log("Uyarı sesi oynatılamadı:", e)
        })

// Callback'i çağır
        if (onEarthquakeDetected) {
          onEarthquakeDetected(biggestQuake.magnitude)
        }
      }

// Kullanıcı etkileşimini bekle
      const handleUserInteraction = () => {
        playSound()
        // Etkileşim dinleyicilerini kaldır
        document.removeEventListener("click", handleUserInteraction)
        document.removeEventListener("touchstart", handleUserInteraction)
      }

// Kullanıcı etkileşimini dinle
      document.addEventListener("click", handleUserInteraction)
      document.addEventListener("touchstart", handleUserInteraction)

// Otomatik çalmayı dene (kullanıcı etkileşimi varsa çalışacak)
      playSound()

return () => {
        document.removeEventListener("click", handleUserInteraction)
        document.removeEventListener("touchstart", handleUserInteraction)
      }
    } catch (error) {
      console.error("Uyarı sesi çalınırken hata:", error)
    }
  }, [enabled, newEarthquakes, onEarthquakeDetected])

// Görünür bir bileşen döndürmüyoruz, sadece ses efektlerini yönetiyoruz
  return null
}

[V0_FILE]typescriptreact:file="components/earthquake-visualization.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect, Suspense, useCallback, useRef, useMemo } from "react"
import { Button } from "@/components/ui/button"
import { fetchRealtimeUsgsData } from "@/lib/earthquake-data-service"
import { AlertCircle, RefreshCw, Settings, Cpu } from "lucide-react"
import WorldModel from "./world-model"
import EarthquakeInfoPanel from "./earthquake-info-panel"
import RiskAnalysis from "./risk-analysis"
import SettingsModal from "./settings-modal"
import EarthquakeMinimap from "./earthquake-minimap"
import EarthquakeNotification from "./earthquake-notification"
import AudioController from "./audio-controller"
import SoundEffects from "./sound-effects"

export default function EarthquakeVisualization() {
  // State for earthquake data
  const [earthquakeData, setEarthquakeData] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [selectedEarthquake, setSelectedEarthquake] = useState(null)
  const [error, setError] = useState(null)
  const [lastUpdated, setLastUpdated] = useState(null)
  const [newEarthquakes, setNewEarthquakes] = useState([])
  const lastDataRef = useRef([])
  const pollingIntervalRef = useRef(null)
  const minimapTimerRef = useRef(null)

// UI state
  const [showSettings, setShowSettings] = useState(false)
  const [isInitialLoad, setIsInitialLoad] = useState(true)
  const [showMinimap, setShowMinimap] = useState(false)
  const [minimapEarthquake, setMinimapEarthquake] = useState(null)
  const [activeTab, setActiveTab] = useState("forecast") // Varsayılan olarak tahmin sekmesi aktif

// Region and time range state
  const [selectedRegion, setSelectedRegion] = useState(null)
  const [timeRange, setTimeRange] = useState({
    start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // 30 days ago
    end: new Date(),
  })
  const [dataSource, setDataSource] = useState("usgs")

// Tarayıcı performansını otomatik algıla
  const [browserPerformance, setBrowserPerformance] = useState("medium")

// Ses kontrolü için state ekleyelim
  const [audioEnabled, setAudioEnabled] = useState(true)

// State ekleyelim
  const [showNotification, setShowNotification] = useState(false)
  const [notificationEarthquake, setNotificationEarthquake] = useState(null)

useEffect(() => {
    // Tarayıcı performansını algıla
    const detectPerformance = () => {
      try {
        // Mobil cihaz kontrolü
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

// Düşük RAM kontrolü (bazı tarayıcılar destekler)
        const lowMemory = navigator.deviceMemory !== undefined && navigator.deviceMemory < 4

// Düşük CPU çekirdek sayısı kontrolü
        const lowCPU = navigator.hardwareConcurrency !== undefined && navigator.hardwareConcurrency < 4

if (isMobile || lowMemory || lowCPU) {
          return "low"
        }

// Yüksek performans testi
        const startTime = performance.now()
        let result = 0
        for (let i = 0; i < 1000000; i++) {
          result += Math.sqrt(i)
        }
        const endTime = performance.now()

const duration = endTime - startTime

if (duration < 50) {
          return "high"
        } else if (duration < 200) {
          return "medium"
        } else {
          return "low"
        }
      } catch (e) {
        console.error("Performans testi hatası:", e)
        return "medium" // Hata durumunda orta performans varsay
      }
    }

setBrowserPerformance(detectPerformance())
  }, [])

// Dünya modeli ve deprem görselleştirme ayarları - istenen görünüme göre güncellendi
  const [globeSettings, setGlobeSettings] = useState({
    // Dünya modeli ayarları
    globeRotation: true,
    rotationSpeed: 0.5, // Daha yavaş dönüş
    globeOpacity: 1,
    activeLayer: "night", // Koyu görünüm için gece katmanı
    globeDetail: "medium", // high, medium, low

// Deprem noktaları ayarları
    pointSize: 1.5, // Daha büyük noktalar
    showLabels: true,
    pulseEffect: true,

// Yıldızlar ayarları
    showStars: true,
    starCount: 3000,
    starSpeed: 0.5,

// Kamera kontrolleri
    enableZoom: true,
    enablePan: false,
    enableRotate: true,
    autoRotate: false,
    autoRotateSpeed: 0.5,
    minZoom: 2.5,
    maxZoom: 10,

// Performans modu
    lowPerformanceMode: false,
  })

// Tarayıcı performansına göre ayarları güncelle
  useEffect(() => {
    if (isInitialLoad && browserPerformance) {
      const performanceSettings = { ...globeSettings }

if (browserPerformance === "low") {
        performanceSettings.lowPerformanceMode = true
        performanceSettings.showStars = false
        performanceSettings.pulseEffect = false
        performanceSettings.showLabels = false
        performanceSettings.globeDetail = "low"
      } else if (browserPerformance === "medium") {
        performanceSettings.starCount = 2000
        performanceSettings.globeDetail = "medium"
      }

setGlobeSettings(performanceSettings)
      setIsInitialLoad(false)
    }
  }, [browserPerformance, isInitialLoad, globeSettings])

// Deprem tespit edildiğinde bildirim göster
  const handleEarthquakeDetected = useCallback(
    (magnitude) => {
      // Sadece belirli büyüklükteki depremler için bildirim göster (örn. 4.5+)
      if (magnitude >= 4.5 && newEarthquakes.length > 0) {
        // En büyük depremi bul
        const biggestQuake = newEarthquakes.reduce(
          (prev, current) => (prev.magnitude > current.magnitude ? prev : current),
          newEarthquakes[0],
        )

setNotificationEarthquake(biggestQuake)
        setShowNotification(true)
      }
    },
    [newEarthquakes],
  )

// USGS'den veri yükleme fonksiyonu
  const loadUsgsData = useCallback(async () => {
    try {
      setIsLoading(true)
      setError(null)

// Son 30 gündeki tüm dünya depremlerini al (magnitude 1.0+)
      const quakeData = await fetchRealtimeUsgsData(1.0)

// Yeni depremler var mı kontrol et
      if (lastDataRef.current.length > 0) {
        const existingIds = new Set(lastDataRef.current.map((q) => q.id))
        const newQuakes = quakeData.filter((quake) => !existingIds.has(quake.id))

if (newQuakes.length > 0) {
          console.log(`${newQuakes.length} yeni deprem tespit edildi`)
          setNewEarthquakes(newQuakes)

// En büyük yeni depremi seçili deprem olarak ayarla
          if (newQuakes.length > 0) {
            const biggestNewQuake = newQuakes.reduce((prev, current) =>
              prev.magnitude > current.magnitude ? prev : current,
            )
            setSelectedEarthquake(biggestNewQuake)

// Mini haritayı göster
            showEarthquakeMinimap(biggestNewQuake)
          }
        }
      } else if (quakeData.length > 0) {
        // İlk yüklemede en büyük depremi seçili olarak ayarla
        const biggestQuake = quakeData.reduce((prev, current) => (prev.magnitude > current.magnitude ? prev : current))
        setSelectedEarthquake(biggestQuake)
      }

// Depremleri zamana göre sırala (en yeni en üstte)
      const sortedData = quakeData.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())

setEarthquakeData(sortedData)
      lastDataRef.current = sortedData
      setLastUpdated(new Date())
      setIsLoading(false)
    } catch (err) {
      console.error("Veri yükleme hatası:", err)
      setError(err instanceof Error ? err.message : "Veri yüklenirken bir hata oluştu")
      setIsLoading(false)
    }
  }, [])

// Mini haritayı göster
  const showEarthquakeMinimap = useCallback((earthquake) => {
    // Önceki zamanlayıcıyı temizle
    if (minimapTimerRef.current) {
      clearTimeout(minimapTimerRef.current)
    }

setMinimapEarthquake(earthquake)
    setShowMinimap(true)

// 30 saniye sonra mini haritayı gizle
    minimapTimerRef.current = setTimeout(() => {
      setShowMinimap(false)
    }, 30000)
  }, [])

// İlk yükleme
  useEffect(() => {
    loadUsgsData()

// Polling mekanizması kur - her 5 dakikada bir yenile
    pollingIntervalRef.current = setInterval(loadUsgsData, 5 * 60 * 1000)

return () => {
      if (pollingIntervalRef.current) {
        clearInterval(pollingIntervalRef.current)
      }
      if (minimapTimerRef.current) {
        clearTimeout(minimapTimerRef.current)
      }
    }
  }, [loadUsgsData])

// Yeni deprem bildirimi efekti
  useEffect(() => {
    if (newEarthquakes.length > 0) {
      // 10 saniye sonra yeni deprem bildirimini temizle
      const timer = setTimeout(() => {
        setNewEarthquakes([])
      }, 10000)

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

// Filtrelenmiş deprem verisi - performans için
  const filteredEarthquakeData = useMemo(() => {
    if (globeSettings.lowPerformanceMode && earthquakeData.length > 100) {
      // Düşük performans modunda daha az veri göster
      return earthquakeData.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()).slice(0, 100)
    }
    return earthquakeData
  }, [earthquakeData, globeSettings.lowPerformanceMode])

// Deprem listesi için son 50 depremi gösterer
  const displayedEarthquakes = useMemo(() => {
    return filteredEarthquakeData.slice(0, 50)
  }, [filteredEarthquakeData])

// Veri kaynağını değiştir
  const handleDataSourceChange = (source) => {
    setDataSource(source)
    // Veri kaynağı değiştiğinde verileri yeniden yükle
    loadUsgsData()
  }

// Zaman aralığını değiştir
  const handleTimeRangeChange = (range) => {
    setTimeRange(range)
    // Zaman aralığı değiştiğinde verileri yeniden yükle
    loadUsgsData()
  }

return (
    <div className="relative h-[100dvh] w-full">
      {/* Ses efektleri bileşeni */}
      <SoundEffects
        enabled={audioEnabled}
        newEarthquakes={newEarthquakes}
        onEarthquakeDetected={handleEarthquakeDetected}
      />

{/* 3D Dünya Modeli */}
      <div className="absolute inset-0 z-0">
        <Suspense
          fallback={
            <div className="w-full h-full bg-black flex items-center justify-center">
              <p className="text-white text-sm">Dünya modeli yükleniyor...</p>
            </div>
          }
        >
          <WorldModel
            earthquakeData={filteredEarthquakeData}
            onEarthquakeSelect={setSelectedEarthquake}
            isLoading={isLoading}
            highlightedEarthquakes={newEarthquakes}
            settings={globeSettings}
          />
        </Suspense>
      </div>

{/* Üst Başlık */}
      <div className="absolute top-3 left-3 z-10 pointer-events-auto">
        <h1 className="text-xl text-white font-normal tracking-normal">Küresel Deprem İzleme</h1>
        <div className="flex items-center justify-between">
          <p className="text-gray-400 text-xs mt-0.5 tracking-normal">USGS Gerçek Zamanlı Veri</p>
          {lastUpdated && (
            <p className="text-gray-400 text-xs ml-2">Son güncelleme: {lastUpdated.toLocaleTimeString()}</p>
          )}
        </div>
      </div>

{/* Performans Modu Göstergesi */}
      {globeSettings.lowPerformanceMode && (
        <div className="absolute top-3 right-3 z-10 pointer-events-auto flex items-center bg-black/70 px-2 py-1 rounded-md">
          <Cpu className="h-3 w-3 mr-1.5 text-yellow-500" />
          <span className="text-yellow-500 text-xs">Düşük Performans Modu</span>
        </div>
      )}

{/* Sol Panel - Deprem Detayları */}
      <div className="absolute top-16 left-3 z-10 pointer-events-auto w-64">
        <Suspense fallback={<div className="bg-black/70 p-3 rounded-md animate-pulse w-full h-48" />}>
          <EarthquakeInfoPanel
            data={selectedEarthquake}
            onClose={() => {}} // Kapatma işlevi yok, panel sabit
            className="w-full"
          />
        </Suspense>

{/* Harita Paneli (Deprem Listesi) */}
        <div className="mt-3 bg-black/80 p-3 rounded-lg border border-white/20 h-[calc(100vh-300px)]">
          <div className="flex justify-between items-center mb-2">
            <h3 className="text-sm text-white font-medium">Son Depremler</h3>
            <div className="text-xs text-gray-400">{earthquakeData.length} deprem</div>
          </div>
          <div className="h-[calc(100%-30px)] overflow-auto space-y-1.5">
            {displayedEarthquakes.map((quake) => (
              <div
                key={quake.id}
                className={`bg-black/50 p-2 rounded-md border border-white/10 flex items-center justify-between cursor-pointer hover:bg-white/10 transition-colors ${
                  selectedEarthquake && selectedEarthquake.id === quake.id ? "border-white" : ""
                } ${newEarthquakes.some((e) => e.id === quake.id) ? "animate-pulse border-yellow-500" : ""}`}
                onClick={() => {
                  setSelectedEarthquake(quake)
                  showEarthquakeMinimap(quake) // Depreme tıklandığında mini haritayı göster
                }}
              >
                <div>
                  <div className="text-white text-xs font-medium flex items-center">
                    <span
                      className={`inline-block w-2 h-2 rounded-full mr-1.5 ${
                        quake.magnitude >= 6.0
                          ? "bg-red-500"
                          : quake.magnitude >= 5.0
                            ? "bg-orange-500"
                            : quake.magnitude >= 3.0
                              ? "bg-yellow-500"
                              : "bg-green-500"
                      }`}
                    ></span>
                    M{quake.magnitude.toFixed(1)}
                  </div>
                  <div className="text-gray-400 text-xs truncate max-w-[120px]">{quake.region}</div>
                </div>
                <div className="text-white text-xs">{quake.depth} km</div>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Sağ Panel - Risk Analizi */}
      <div className="absolute top-16 right-3 z-10 pointer-events-auto w-72">
        {/* Risk Analizi Paneli - Varsayılan olarak tahmin sekmesi aktif */}
        <Suspense fallback={<div className="bg-black/70 p-3 rounded-md animate-pulse w-full h-48" />}>
          <RiskAnalysis earthquakeData={filteredEarthquakeData} defaultTab="forecast" />
        </Suspense>

{/* Ayarlar Butonu */}
        <div className="mt-3">
          <Button
            onClick={() => setShowSettings(true)}
            className="w-full bg-white text-black hover:bg-gray-200 text-xs h-8"
          >
            <Settings className="h-3.5 w-3.5 mr-1.5" />
            Gelişmiş Ayarlar ve AI Analiz
          </Button>
        </div>
      </div>

{/* Deprem Mini Haritası - Yeni deprem olduğunda veya depreme tıklandığında gösterilir */}
      {showMinimap && minimapEarthquake && (
        <div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 z-10 pointer-events-auto">
          <EarthquakeMinimap earthquake={minimapEarthquake} />
        </div>
      )}

{/* Ayarlar Modal */}
      <SettingsModal
        open={showSettings}
        onOpenChange={setShowSettings}
        settings={globeSettings}
        onSettingsChange={setGlobeSettings}
        onRefresh={loadUsgsData}
        earthquakeData={filteredEarthquakeData}
      />

{/* Yeni Deprem Bildirimi */}
      {newEarthquakes.length > 0 && (
        <div className="absolute top-16 left-1/2 transform -translate-x-1/2 bg-yellow-900/80 text-white px-4 py-2 rounded-md z-20 flex items-center animate-pulse">
          <AlertCircle className="h-4 w-4 mr-2" />
          <span className="text-sm">{newEarthquakes.length} yeni deprem tespit edildi!</span>
        </div>
      )}

{/* Hata Mesajı */}
      {error && (
        <div className="absolute top-16 left-1/2 transform -translate-x-1/2 bg-red-900/80 text-white px-3 py-1.5 rounded-md z-20 text-xs">
          {error}
        </div>
      )}

{/* Veri Yükleme Göstergesi */}
      {isLoading && (
        <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-3 py-1.5 rounded-md z-20 text-xs flex items-center">
          <div className="animate-spin h-3 w-3 border-2 border-white border-t-transparent rounded-full mr-2"></div>
          USGS'den veriler yükleniyor...
        </div>
      )}

{/* Ses Kontrolü */}
      <div className="absolute bottom-4 left-4 z-10 pointer-events-auto">
        <AudioController enabled={audioEnabled} onToggle={() => setAudioEnabled(!audioEnabled)} />
      </div>

{/* Yenile Butonu */}
      <Button
        onClick={loadUsgsData}
        className="absolute bottom-4 right-4 z-10 bg-white text-black hover:bg-gray-200 text-xs py-1.5 px-3 h-auto flex items-center gap-1"
        disabled={isLoading}
      >
        <RefreshCw className="h-3 w-3" />
        {isLoading ? "Yükleniyor..." : "Verileri Güncelle"}
      </Button>

{/* Deprem Bildirimi */}
      {showNotification && (
        <EarthquakeNotification earthquake={notificationEarthquake} onClose={() => setShowNotification(false)} />
      )}
    </div>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This