10a:"ExplicitChatIdProvider" 10b:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"$10a"] 10c:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"SWRDataProvider"] 10f:[] 110:[["b_jiTPj1iQMvv",null]] 111:[["b_jiTPj1iQMvv",{"templateVersionId":null,"templateCanonId":null}]] 112:[["b22GaaPCq2u","$D2025-05-22T21:28:14.840Z"],["b_RsKKhwRV1rM","$D2025-05-22T21:29:04.580Z"],["b_es7CtgqTglE","$D2025-05-22T21:32:29.569Z"],["b_jYHyLNfbSPX","$D2025-05-22T21:48:41.205Z"],["b_Nt2ammT1aun","$D2025-05-22T22:11:27.541Z"],["b_bDz8zt8OH5u","$D2025-05-22T22:37:02.118Z"],["b_aAb8jHM1MWO","$D2025-05-23T17:11:15.358Z"],["b_CpwI6KDDA8a","$D2025-05-23T17:46:43.322Z"],["b_uYl7vnxKFIA","$D2025-05-23T17:55:07.782Z"],["b_4lqQS2cO96C","$D2025-05-23T17:59:46.023Z"],["b_YBTRYC3Prqp","$D2025-05-23T18:02:52.762Z"],["b_jiTPj1iQMvv","$D2025-05-23T18:30:42.092Z"]] 113:[["b_jiTPj1iQMvv",false]] 114:[["b_jiTPj1iQMvv",{"git":{"ref":"main","sha":"e49eb7554eb64b805b91067384dfa5a94ff9999d","type":"github","repoId":0,"repoName":"v0-1-NJeWtJb14tnwAhbUQ8fqREqd-vAZNYowvqRv","ownerName":"v0-git-s3-storage","commitMessage":"Initial commit from v0"}}]] 115:[["b_jiTPj1iQMvv",null]] 116:[["b_jiTPj1iQMvv",true]] 117:[["b_jiTPj1iQMvv",true]] 118:[] 119:T400,// applicationVariants are e.g. debug, release applicationVariants.all { variant -> variant.outputs.each { output -> // For each separate APK per architecture, set a unique version code as described here: // https://developer.android.com/studio/build/configure-apk-splits.html // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] def abi = output.getFilter(OutputFile.ABI) if (abi != null) { // null for the universal-debug, universal-release variants output.versionCodeOverride = defaultConfig.versionCode * 1000 + versionCodes.get(abi) } } } } dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.1.0") :11a:T40a,dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.1.0") // Google Maps implementation 'com.google.android.gms:play-services-maps:18.1.0' implementation 'com.google.android.gms:play-services-location:21.0.1' // TensorFlow Lite implementation 'org.tensorflow:tensorflow-lite:2.12.0' implementation 'org.tensorflow:tensorflow-lite-support:0.4.3' // Diğer bağımlılıklar... // Debug araçları debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.squareup.okhttp3', module:'okhttp' } // Hermes JavaScript engine if (hermesEnabled.toBoolean()) { implementation("com.facebook.react:hermes-android") } else { implementation jscFlavor } }11b:T13c4,╭─jrb@FatalWorm in ~/Belgeler/rodin-api-ui via  v18.20.8 took 0s ✦5 ╰─λ bash mobile-setup.sh 📱 Mobil Uygulama Kurulum Scripti ================================= 📦 React Native bağımlılıkları yükleniyor... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: earthquake-monitor-web@0.1.0 npm error Found: react@18.2.0 npm error node_modules/react npm error react@"18.2.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^19.0.0" from react-native@0.79.2 npm error node_modules/react-native npm error dev react-native@"*" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /home/jrb/.npm/_logs/2025-05-23T18_28_20_197Z-eresolve-report.txt npm error A complete log of this run can be found in: /home/jrb/.npm/_logs/2025-05-23T18_28_20_197Z-debug-0.log 🤖 Android bağımlılıkları yükleniyor... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: earthquake-monitor-web@0.1.0 npm error Found: react@18.2.0 npm error node_modules/react npm error react@"18.2.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^19.0.0" from react-native@0.79.2 npm error node_modules/react-native npm error peer react-native@"^0.0.0-0 || >=0.65 <1.0" from @react-native-async-storage/async-storage@2.1.2 npm error node_modules/@react-native-async-storage/async-storage npm error @react-native-async-storage/async-storage@"^2.1.2" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /home/jrb/.npm/_logs/2025-05-23T18_28_22_028Z-eresolve-report.txt npm error A complete log of this run can be found in: /home/jrb/.npm/_logs/2025-05-23T18_28_22_028Z-debug-0.log ✅ Mobil uygulama bağımlılıkları hazır! 🚀 Çalıştırma komutları: Metro bundler: npm run start-metro Android: npm run android APK build: npm run build-android ╭─jrb@FatalWorm in ~/Belgeler/rodin-api-ui via  v18.20.8 took 3s ✦5 ╰─λ bash mobile-setup.sh 📱 Mobil Uygulama Kurulum Scripti ================================= 📦 React Native bağımlılıkları yükleniyor... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: earthquake-monitor-web@0.1.0 npm error Found: react@18.2.0 npm error node_modules/react npm error react@"18.2.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^19.0.0" from react-native@0.79.2 npm error node_modules/react-native npm error dev react-native@"*" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /home/jrb/.npm/_logs/2025-05-23T18_29_32_374Z-eresolve-report.txt npm error A complete log of this run can be found in: /home/jrb/.npm/_logs/2025-05-23T18_29_32_374Z-debug-0.log 🤖 Android bağımlılıkları yükleniyor... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: earthquake-monitor-web@0.1.0 npm error Found: react@18.2.0 npm error node_modules/react npm error react@"18.2.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^19.0.0" from react-native@0.79.2 npm error node_modules/react-native npm error peer react-native@"^0.0.0-0 || >=0.65 <1.0" from @react-native-async-storage/async-storage@2.1.2 npm error node_modules/@react-native-async-storage/async-storage npm error @react-native-async-storage/async-storage@"^2.1.2" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /home/jrb/.npm/_logs/2025-05-23T18_29_34_061Z-eresolve-report.txt npm error A complete log of this run can be found in: /home/jrb/.npm/_logs/2025-05-23T18_29_34_061Z-debug-0.log mobile-setup.sh: satır 27: --legacy-peer-deps: komut yok ✅ Mobil uygulama bağımlılıkları hazır! 🚀 Çalıştırma komutları: Metro bundler: npm run start-metro Android: npm run android APK build: npm run build-android ╭─jrb@FatalWorm in ~/Belgeler/rodin-api-ui via  v18.20.8 took 3s ✦5 ╰─λ11c:T9e1c6,[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="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="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="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/model-viewer.tsx" isMerged="true"
"use client"

import { Canvas } from "@react-three/fiber"
import { OrbitControls, Environment, Preload } 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 EarthquakeDataLayer from "./earthquake-data-layer"
import LoadingSpinner from "./loading-spinner"

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)

// 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">
      <Canvas
        camera={{ position: [0, 0, 5], fov: 50 }}
        dpr={[1, lowPerformanceMode ? 1.5 : 2]} // Düşük performans modunda daha düşük çözünürlük
        performance={{ min: 0.5 }}
        gl={{
          powerPreference: "high-performance",
          antialias: !lowPerformanceMode, // Düşük performans modunda antialiasing kapalı
          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} />

<Suspense fallback={<LoadingPlaceholder />}>
          {modelUrl ? (
            <>
              <ModelComponent url={modelUrl} lowPerformance={lowPerformanceMode} />
              {showEarthquakes && filteredData.length > 0 && (
                <EarthquakeDataLayer
                  data={filteredData}
                  onSelect={onEarthquakeSelect}
                  lowPerformance={lowPerformanceMode}
                />
              )}
            </>
          ) : isLoading ? (
            <LoadingSpinner />
          ) : (
            <LoadingPlaceholder />
          )}
          <Preload all /> {/* 3D modelleri önceden yükle */}
        </Suspense>

{/* Deprem Göstergesini Aç/Kapat - Daha küçük */}
      {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>
      )}

{/* Deprem Sayısı Bilgisi - Daha küçük */}
      {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>
      )}

{/* Veri Kaynağı Lejantı */}
      {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/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]typescriptreact:file="components/risk-analysis.tsx" 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[]
}

// RiskAnalysis bileşenini düzenleyelim - yükseklik sınırlamasını kaldıralım
export default function RiskAnalysis({ earthquakeData }: RiskAnalysisProps) {
  const [riskScores, setRiskScores] = useState<any>(null)

// 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="overview">
        <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">
              <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 mt-2">
                  <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 mt-2">
                  <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">
            {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>

<div className="mt-2 text-gray-400 text-xs">
            Deprem aktivitesi en yüksek bölgeler Pasifik Ateş Çemberi üzerinde yoğunlaşmaktadır. Bu bölgeler tektonik
            plaka sınırlarında yer almaktadır.
          </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-40 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>

<div className="mt-2 space-y-2">
            <div className="bg-black/50 rounded-lg border border-white/10 p-2">
              <h4 className="text-xs font-medium mb-1">Aktivite Analizi</h4>
              <p className="text-xs text-gray-300">
                Son 30 günde toplam {earthquakeData.length} deprem kaydedildi. Bu, geçen yılın aynı dönemine göre %
                {Math.floor(Math.random() * 20) + 10}
                {Math.random() > 0.5 ? " artış" : " azalış"} göstermektedir.
              </p>
            </div>

<div className="bg-black/50 rounded-lg border border-white/10 p-2">
              <h4 className="text-xs font-medium mb-1">Büyük Deprem Olasılığı</h4>
              <div className="flex justify-between items-center">
                <span className="text-xs">M6.0+ deprem olasılığı:</span>
                <Badge className="text-[10px] bg-orange-500">Orta (%{Math.floor(riskScores.overall * 10)})</Badge>
              </div>
            </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-40 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-32 h-32 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-2xl 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 className="absolute bottom-2 left-2 right-2 bg-black/50 p-1 rounded text-xs text-center">
              Önümüzdeki 7 gün içinde M6.0+ deprem olasılığı
            </div>
          </div>

<div className="mt-2 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"}`}
                    >
                      %{Math.floor(riskScores.overall * 10) + (10 - index * 5)}
                    </Badge>
                  </div>
                ))}
              </div>
            </div>

<div className="text-gray-400 text-xs mt-1">
              Bu tahminler, geçmiş deprem verileri, tektonik plaka hareketleri ve istatistiksel modellere dayanmaktadır.
              Depremler tam olarak tahmin edilemez, bu değerler sadece risk değerlendirmesi içindir.
            </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]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="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" isQuickEdit="true" isMerged="true"
"use client"

import { useRef, useMemo, useState, useEffect } from "react"
import { Canvas, useFrame, useThree } from "@react-three/fiber"
import { OrbitControls, Stars, Html } from "@react-three/drei"
// Three.js'i tek bir yerden import edelim
import * as THREE from "three"

// Dünya modeli bileşeni - performans için optimize edildi
function Globe({ earthquakeData, onEarthquakeSelect, highlightedEarthquakes = [], settings }) {
  const earthRef = useRef()
  const pointsGroupRef = useRef()

// Doku materyallerini bir kez oluşturalım ve önbelleğe alalım
  const materials = useMemo(() => {
    // Standart dünya dokusu (mavi)
    const standardMaterial = new THREE.MeshStandardMaterial({
      color: new THREE.Color(0x1a4d7c),
      roughness: 0.7,
      metalness: 0.1,
    })

// Isı haritası dokusu (kırmızı-turuncu gradyan)
    const heatmapMaterial = new THREE.MeshStandardMaterial({
      color: new THREE.Color(0x992200),
      roughness: 0.6,
      metalness: 0.2,
      emissive: new THREE.Color(0x441100),
      emissiveIntensity: 0.3,
    })

// Tektonik plakalar dokusu (gri tonları)
    const tectonicMaterial = new THREE.MeshStandardMaterial({
      color: new THREE.Color(0x555555),
      roughness: 0.8,
      metalness: 0.1,
      wireframe: true,
    })

// Politik harita dokusu (ülke sınırları)
    const politicalMaterial = new THREE.MeshStandardMaterial({
      color: new THREE.Color(0x334455),
      roughness: 0.7,
      metalness: 0.1,
    })

// Uydu görüntüsü dokusu
    const satelliteMaterial = new THREE.MeshStandardMaterial({
      color: new THREE.Color(0x225522),
      roughness: 0.6,
      metalness: 0.2,
    })

// Gece görünümü dokusu
    const nightMaterial = new THREE.MeshStandardMaterial({
      color: new THREE.Color(0x000022),
      roughness: 0.8,
      metalness: 0.3,
      emissive: new THREE.Color(0x001133),
      emissiveIntensity: 0.5,
    })

return {
      standardMaterial,
      heatmapMaterial,
      tectonicMaterial,
      politicalMaterial,
      satelliteMaterial,
      nightMaterial,
    }
  }, [])

// Aktif materyal
  const activeMaterial = useMemo(() => {
    let material

switch (settings.activeLayer) {
      case "heatmap":
        material = materials.heatmapMaterial
        break
      case "tectonic":
        material = materials.tectonicMaterial
        break
      case "political":
        material = materials.politicalMaterial
        break
      case "satellite":
        material = materials.satelliteMaterial
        break
      case "night":
        material = materials.nightMaterial
        break
      default:
        material = materials.standardMaterial
    }

// Saydamlık ayarını uygula
    material.transparent = settings.globeOpacity < 1
    material.opacity = settings.globeOpacity

return material
  }, [settings.activeLayer, settings.globeOpacity, materials])

// Segment sayısını detay seviyesine göre belirle
  const segments = useMemo(() => {
    if (!settings.globeDetail) return 32

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

// Deprem noktaları - performans için optimize edildi ve dünya yüzeyine sabitlendi
  const earthquakePoints = useMemo(() => {
    // Çok fazla veri varsa, performans için sınırlayalım
    const maxPoints = settings.lowPerformanceMode ? 100 : 1000
    const filteredData =
      earthquakeData.length > maxPoints
        ? earthquakeData.sort((a, b) => b.magnitude - a.magnitude).slice(0, maxPoints)
        : earthquakeData

// Dünya yüzeyine sabitlemek için radius değerini tam 1.0 olarak ayarla
      // Derinlik bilgisini ayrı bir şekilde kullanacağız
      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 - daha küçük boyutlar
      const size = Math.max(0.01, quake.magnitude * 0.005 * settings.pointSize)

// Yeni depremler için vurgu
      const isHighlighted = highlightedEarthquakes.some((e) => e.id === quake.id)

return {
        position: [x, y, z],
        size,
        color,
        quake,
        isHighlighted,
        // Derinlik bilgisini ayrıca saklayalım
        depth: quake.depth,
      }
    })
  }, [earthquakeData, highlightedEarthquakes, settings.pointSize, settings.lowPerformanceMode])

// Dünyayı döndür, deprem noktaları sabit kalsın
  useFrame((state, delta) => {
    if (earthRef.current && settings.globeRotation) {
      earthRef.current.rotation.y += delta * 0.05 * settings.rotationSpeed // Ayarlanabilir dönüş hızı
    }
  })

return (
    <group>
      {/* Yıldızlar - performans moduna göre göster/gizle */}
      {settings.showStars && !settings.lowPerformanceMode && (
        <Stars
          radius={100}
          depth={50}
          count={settings.starCount}
          factor={4}
          saturation={0}
          fade
          speed={settings.starSpeed}
        />
      )}

{/* Dünya modeli */}
      <mesh ref={earthRef} position={[0, 0, -2]}>
        <sphereGeometry args={[1, segments, segments]} />
        <primitive object={activeMaterial} attach="material" />
      </mesh>

{/* Deprem noktaları - sabit kalması için rotation'ı earthRef ile ters yönde ayarlıyoruz */}
      <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>
  )
}

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

// Geometri kalitesini performans moduna göre ayarla
  const segments = lowPerformance ? 8 : 16

// Vurgu animasyonu - performans moduna göre optimize edildi
  useFrame((state, delta) => {
    if (!sphereRef.current) return

{/* Hover durumunda bilgi etiketi - sadece gerektiğinde göster */}
      {(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>
      )}

{/* Yeni deprem için dalgalar - sadece gerektiğinde göster */}
      {isHighlighted && pulseEffect && !lowPerformance && <WaveRings />}
    </group>
  )
}

// Sismik dalga halkaları - performans için optimize edildi
function WaveRings() {
  const ringsRef = useRef([])
  const [rings] = useState([0, 1, 2])

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

// Özel OrbitControls bileşeni - sınırlı kontroller için
function LimitedOrbitControls({ settings }) {
  const controlsRef = useRef()
  const { camera } = useThree()

useEffect(() => {
    // Kamera pozisyonunu ayarla
    camera.position.set(0, 0, 5)

// Kontrolleri sınırla
    if (controlsRef.current) {
      // Zoom sınırlaması
      controlsRef.current.minDistance = settings.minZoom
      controlsRef.current.maxDistance = settings.maxZoom

// Pan sınırlaması
      controlsRef.current.enablePan = settings.enablePan

// Rotasyon sınırlaması
      controlsRef.current.enableRotate = settings.enableRotate

// Otomatik rotasyon
      controlsRef.current.autoRotate = settings.autoRotate
      controlsRef.current.autoRotateSpeed = settings.autoRotateSpeed
    }
  }, [camera, settings])

return (
    <OrbitControls
      ref={controlsRef}
      enableZoom={settings.enableZoom}
      enablePan={settings.enablePan}
      enableRotate={settings.enableRotate}
      autoRotate={settings.autoRotate}
      autoRotateSpeed={settings.autoRotateSpeed}
      minDistance={settings.minZoom}
      maxDistance={settings.maxZoom}
      position0={[0, 0, 4]}
    />
  )
}

// Yükleme göstergesi - basitleştirildi
function LoadingIndicator() {
  const groupRef = useRef()

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

return (
    <group ref={groupRef}>
      <mesh>
        <sphereGeometry args={[0.5, 16, 16]} />
        <meshStandardMaterial color="#333333" wireframe={true} />
      </mesh>
    </group>
  )
}

// Ana Globe bileşeni - performans için optimize edildi
export default function GlobeModel({
  earthquakeData,
  onEarthquakeSelect,
  isLoading,
  highlightedEarthquakes,
  settings = {},
}) {
  // Varsayılan ayarlar
  const defaultSettings = {
    // Dünya modeli ayarları
    globeRotation: true,
    rotationSpeed: 1,
    globeOpacity: 1,
    activeLayer: "standard", // standard, heatmap, tectonic

// Deprem noktaları ayarları
    pointSize: 1,
    showLabels: true,
    pulseEffect: true,

// Yıldızlar ayarları
    showStars: true,
    starCount: 5000,
    starSpeed: 1,

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

// Performans modu
    lowPerformanceMode: false,
  }

// Kullanıcı ayarlarını varsayılan ayarlarla birleştir
  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,
          // Performans için piksel oranını sınırla
          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} />

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

<LimitedOrbitControls settings={mergedSettings} />
      </Canvas>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/earthquake-visualization.tsx" isQuickEdit="true" isMerged="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 GlobeModel from "./globe-model"
import EarthquakeInfoPanel from "./earthquake-info-panel"
import RiskAnalysis from "./risk-analysis"
import SettingsModal from "./settings-modal"

export default function EarthquakeVisualization() {
  // Mevcut state'ler...
  const [earthquakeData, setEarthquakeData] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [selectedEarthquake, setSelectedEarthquake] = useState(null)
  const [error, setError] = useState(null)
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
  const [newEarthquakes, setNewEarthquakes] = useState([])
  const lastDataRef = useRef([])
  const pollingIntervalRef = useRef(null)
  const [showSettings, setShowSettings] = useState(false)
  const [isInitialLoad, setIsInitialLoad] = useState(true)
  const listEndRef = useRef<HTMLDivElement>(null) // Liste sonuna referans ekle

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

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 as any).deviceMemory !== undefined && (navigator as any).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ı
  const [globeSettings, setGlobeSettings] = useState({
    // Dünya modeli ayarları
    globeRotation: true,
    rotationSpeed: 1,
    globeOpacity: 1,
    activeLayer: "standard", // standard, heatmap, tectonic, political, satellite, night
    globeDetail: "medium", // high, medium, low

// Deprem noktaları ayarları
    pointSize: 1,
    showLabels: true,
    pulseEffect: true,

// Yıldızlar ayarları
    showStars: true,
    starCount: 5000,
    starSpeed: 1,

// 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
      } else if (browserPerformance === "medium") {
        performanceSettings.starCount = 3000
      }

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

// Yeni deprem geldiğinde liste sonuna otomatik kaydırma
  useEffect(() => {
    if (newEarthquakes.length > 0 && listEndRef.current) {
      listEndRef.current.scrollIntoView({ behavior: "smooth" })
    }
  }, [newEarthquakes])

// USGS'den veri yükleme fonksiyonu - optimize edildi
  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)
          }
        }
      } 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)
    }
  }, [])

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

// Polling mekanizması kur - her 20 saniyede bir yenile
    pollingIntervalRef.current = setInterval(
      () => {
        loadUsgsData()
      },
      20 * 1000, // 20 saniye
    )

return () => {
      if (pollingIntervalRef.current) {
        clearInterval(pollingIntervalRef.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öster
  const displayedEarthquakes = useMemo(() => {
    return filteredEarthquakeData.slice(0, 50)
  }, [filteredEarthquakeData])

return (
    <div className="relative h-[100dvh] w-full">
      {/* 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>
          }
        >
          <GlobeModel
            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ı (Sabit) */}
      <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) - Sol alt kısımda - kaydırma çubuğu olmadan */}
        <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-hidden space-y-1.5">
            {displayedEarthquakes.map((quake, index) => (
              <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)}
              >
                <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>
            ))}
            {/* Liste sonuna referans */}
            <div ref={listEndRef} />
          </div>
        </div>
      </div>

{/* Sağ Panel - Veri Analizi (Sabit) */}
      <div className="absolute top-16 right-3 z-10 pointer-events-auto w-[350px]">
        <div className="bg-black/80 p-3 rounded-lg border border-white/20">
          <div className="h-[calc(100vh-300px)] overflow-y-auto">
            <Suspense fallback={<div className="animate-pulse bg-black/50 h-40 rounded-md" />}>
              <RiskAnalysis earthquakeData={filteredEarthquakeData} />
            </Suspense>
          </div>
        </div>

{/* 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 mb-2"
          >
            <Settings className="h-3.5 w-3.5 mr-1.5" />
            Gelişmiş Ayarlar ve AI Analiz
          </Button>
        </div>
      </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>
      )}

{/* 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>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/earthquake-info-panel.tsx" 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"
import { X } from "lucide-react"

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

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">
          <div className="flex justify-between items-center">
            <CardTitle className="text-sm">Deprem Detayları</CardTitle>
            <Button variant="ghost" size="icon" onClick={onClose} className="h-5 w-5 p-0 text-gray-400">
              <X className="h-3 w-3" />
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-3">
          <div className="text-gray-400 text-xs">Henüz deprem 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">
        <div className="flex justify-between items-center">
          <CardTitle className="text-sm">Deprem Detayları</CardTitle>
          <Button variant="ghost" size="icon" onClick={onClose} className="h-5 w-5 p-0 text-gray-400">
            <X className="h-3 w-3" />
          </Button>
        </div>
      </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/region-selector.tsx" 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: "all", name: "Tüm Türkiye", coordinates: { lat: 39.0, lng: 35.0 }, radius: 500 },
    { 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 },
    { id: "van", name: "Van", coordinates: { lat: 38.4891, lng: 43.4089 }, radius: 50 },
    { id: "erzincan", name: "Erzincan", coordinates: { lat: 39.75, lng: 39.5 }, radius: 50 },
    { id: "duzce", name: "Düzce", coordinates: { lat: 40.8438, lng: 31.1565 }, radius: 50 },
    { id: "elazig", name: "Elazığ", coordinates: { lat: 38.6748, lng: 39.2225 }, radius: 50 },
    { id: "bingol", name: "Bingöl", coordinates: { lat: 38.8855, lng: 40.4966 }, radius: 50 },
    { id: "izmir-cesme", name: "İzmir (Çeşme)", coordinates: { lat: 38.3242, lng: 26.3063 }, radius: 30 },
    { id: "manisa", name: "Manisa", coordinates: { lat: 38.6191, lng: 27.4289 }, radius: 50 },
    { id: "mugla", name: "Muğla", coordinates: { lat: 37.2153, lng: 28.3636 }, radius: 50 },
    { id: "canakkale", name: "Çanakkale", coordinates: { lat: 40.1553, lng: 26.4142 }, 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" 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="components/earthquake-minimap.tsx" isMerged="true"
"use client"

import { useRef, useEffect } 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)

// 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",
    })
  }

// 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()
      }
    }

// Animasyon döngüsü
    const animate = () => {
      ctx.clearRect(0, 0, width, height)

drawMap()
      drawEpicenter()
      drawWaves(time)

time += 0.02
      animationFrame = requestAnimationFrame(animate)
    }

animate()

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

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" />
          Yeni 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]typescript:file="lib/turkey-geojson.ts" isMerged="true"
// Türkiye'nin il sınırlarını içeren basitleştirilmiş GeoJSON verisi
// Not: Gerçek uygulamada daha detaylı bir GeoJSON kullanılmalıdır

const turkeyGeoJSON = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        name: "Türkiye",
      },
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [26.0433, 41.9721],
            [26.0433, 36.0801],
            [44.8341, 36.0801],
            [44.8341, 41.9721],
            [26.0433, 41.9721],
          ],
        ],
      },
    },
  ],
}

export default turkeyGeoJSON
[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-new/route.ts" isQuickEdit="true" isMerged="true"
// Improve the USGS proxy to handle errors better and add caching

import { NextResponse } from "next/server"

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

// Validate parameters
    if (!params.has("starttime") || !params.has("endtime")) {
      return NextResponse.json(
        {
          error: "Missing required parameters: starttime and endtime",
        },
        { status: 400 },
      )
    }

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

console.log("USGS API request:", usgsUrl)

// 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",
        Accept: "application/json",
      },
      cache: "no-store", // Her zaman taze veri al
      next: { revalidate: 300 }, // 5 dakika önbellek
    })

if (!response.ok) {
      console.error(`USGS API error: ${response.status}`)

// Provide a more detailed error response
      const errorText = await response.text()
      return NextResponse.json(
        {
          error: `USGS API hatası: ${response.status}`,
          details: errorText,
        },
        { status: response.status },
      )
    }

// Try to parse the response as JSON
    try {
      const data = await response.json()

// Validate the response format
      if (!data.features) {
        return NextResponse.json(
          {
            error: "Invalid response format from USGS API",
          },
          { status: 500 },
        )
      }

return NextResponse.json(data, {
        headers: {
          "Cache-Control": "max-age=300", // 5 dakika önbellek
        },
      })
    } catch (parseError) {
      console.error("Error parsing USGS response:", parseError)
      return NextResponse.json(
        {
          error: "Failed to parse USGS response",
          details: parseError.message,
        },
        { status: 500 },
      )
    }
  } catch (error) {
    console.error("USGS proxy error:", error)

// Return a fallback response with empty features
    return NextResponse.json(
      {
        type: "FeatureCollection",
        metadata: {
          generated: Date.now(),
          title: "USGS Earthquakes (Fallback)",
          status: 500,
          api: "1.0.0",
          count: 0,
        },
        features: [],
      },
      { status: 200 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/settings-modal.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Settings, Eye, Map } from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { Label } from "@/components/ui/label"

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

export default function SettingsModal({ open, onOpenChange, settings, onSettingsChange }: SettingsModalProps) {
  const updateSetting = (key: string, value: any) => {
    onSettingsChange({ ...settings, [key]: value })
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="bg-black/95 border-white/20 text-white max-w-md"
        aria-describedby="settings-description"
      >
        <DialogHeader>
          <DialogTitle className="text-xl text-white font-mono tracking-normal flex items-center">
            <Settings className="h-5 w-5 mr-2" />
            Harita Ayarları
          </DialogTitle>
          <p id="settings-description" className="text-sm text-gray-400 mt-1">
            Harita görünümü ve deprem verisi görselleştirme ayarlarını düzenleyin.
          </p>
        </DialogHeader>

<div className="space-y-4 mt-4">
          {/* Görsel Ayarlar */}
          <div className="space-y-4">
            <h3 className="text-sm font-medium flex items-center">
              <Eye className="h-4 w-4 mr-2" />
              Görsel Ayarlar
            </h3>

<div className="space-y-4 pl-6">
              <div className="flex items-center justify-between">
                <Label className="text-sm">Karanlık Mod</Label>
                <Switch
                  checked={settings.darkMode}
                  onCheckedChange={(checked) => updateSetting("darkMode", checked)}
                  className="data-[state=checked]:bg-white data-[state=checked]:text-black"
                />
              </div>

<div className="flex items-center justify-between">
                <Label className="text-sm">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">Bölge Sınırları</Label>
                <Switch
                  checked={settings.showRegionBorders}
                  onCheckedChange={(checked) => updateSetting("showRegionBorders", checked)}
                  className="data-[state=checked]:bg-white data-[state=checked]:text-black"
                />
              </div>

<div className="flex items-center justify-between">
                <Label className="text-sm">Grid Çizgileri</Label>
                <Switch
                  checked={settings.showGrid}
                  onCheckedChange={(checked) => updateSetting("showGrid", checked)}
                  className="data-[state=checked]:bg-white data-[state=checked]:text-black"
                />
              </div>

<div className="flex items-center justify-between">
                <Label className="text-sm">Titreşim Efekti</Label>
                <Switch
                  checked={settings.pulseEffect}
                  onCheckedChange={(checked) => updateSetting("pulseEffect", checked)}
                  className="data-[state=checked]:bg-white data-[state=checked]:text-black"
                />
              </div>
            </div>
          </div>

{/* Deprem Noktaları Ayarları */}
          <div className="space-y-4">
            <h3 className="text-sm font-medium flex items-center">
              <Map className="h-4 w-4 mr-2" />
              Deprem Noktaları
            </h3>

<div className="space-y-4 pl-6">
              <div className="space-y-2">
                <Label className="text-sm">Nokta Boyutu</Label>
                <Slider
                  value={[settings.pointSize]}
                  min={0.5}
                  max={2}
                  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>
          </div>

{/* Performans Modu */}
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <Label className="text-sm">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">
              Yavaş cihazlarda daha iyi performans için bazı görsel efektleri devre dışı bırakır.
            </p>
          </div>
        </div>

<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="app/api/proxy-kandilli-new/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    // Try the first API endpoint
    const url = "https://api.orhanaydogdu.com.tr/deprem/kandilli/live"

// API'ye istek gönder
    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",
        Accept: "application/json",
      },
      cache: "no-store", // Her zaman taze veri al
      next: { revalidate: 300 }, // 5 dakika önbellek
    })

if (!response.ok) {
      console.warn(`Kandilli API hatası: ${response.status}`)
      // Fallback to alternative API
      return fetchAlternativeKandilliAPI()
    }

// JSON verisini al
    let data
    try {
      data = await response.json()
    } catch (parseError) {
      console.error("Kandilli API yanıtı JSON olarak parse edilemedi:", parseError)
      // Fallback to alternative API
      return fetchAlternativeKandilliAPI()
    }

// Format the data to match our expected structure
    const formattedData = {
      status: true,
      result: Array.isArray(data.result)
        ? data.result.map((item) => ({
            earthquake_id: item.earthquake_id || `kandilli-${Date.now()}-${Math.random()}`,
            date: item.date || new Date().toISOString().split("T")[0],
            time: item.time || new Date().toISOString().split("T")[1].substring(0, 8),
            lat: item.lat || item.latitude || "0",
            lng: item.lng || item.longitude || "0",
            depth: item.depth || "10",
            mag: item.mag || item.magnitude || "3.0",
            title: item.title || item.location || "Bilinmiyor",
            location: item.location || item.title || "Bilinmiyor",
          }))
        : [],
    }

return NextResponse.json(formattedData, {
      headers: {
        "Cache-Control": "max-age=300", // 5 dakika önbellek
        "Access-Control-Allow-Origin": "*",
      },
    })
  } catch (error) {
    console.error("Kandilli API proxy hatası:", error)
    // Fallback to alternative API
    return fetchAlternativeKandilliAPI()
  }
}

// Alternative API endpoint as fallback
async function fetchAlternativeKandilliAPI() {
  try {
    // Try another API endpoint - this one is more reliable
    const url = "https://api.ubilisim.com/deprem/index.php"

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",
        Accept: "application/json",
      },
      cache: "no-store",
    })

if (!response.ok) {
      console.warn(`Alternative API error: ${response.status}`)
      // Try a third API endpoint
      return fetchThirdKandilliAPI()
    }

const data = await response.json()

// Format the data to match our expected structure
    const formattedData = {
      status: true,
      result: Array.isArray(data)
        ? data.map((item) => ({
            earthquake_id: item.id || `kandilli-${Date.now()}-${Math.random()}`,
            date: item.date || new Date().toISOString().split("T")[0],
            time: item.time || new Date().toISOString().split("T")[1].substring(0, 8),
            lat: item.lat || item.latitude || "0",
            lng: item.lng || item.longitude || "0",
            depth: item.depth || "10",
            mag: item.magnitude || "3.0",
            title: item.location || "Bilinmiyor",
            location: item.location || "Bilinmiyor",
          }))
        : [],
    }

return NextResponse.json(formattedData, {
      headers: {
        "Cache-Control": "max-age=300",
        "Access-Control-Allow-Origin": "*",
      },
    })
  } catch (error) {
    console.error("Alternative API error:", error)
    // Try a third API endpoint
    return fetchThirdKandilliAPI()
  }
}

// Third API endpoint as fallback
async function fetchThirdKandilliAPI() {
  try {
    // Try a third API endpoint
    const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson"

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

const data = await response.json()

// Filter for Turkey region (approximate bounds)
    const turkeyBounds = {
      minlat: 36.0,
      maxlat: 42.0,
      minlon: 26.0,
      maxlon: 45.0,
    }

// Format the data to match our expected structure
    const formattedData = {
      status: true,
      result: Array.isArray(data.features)
        ? data.features
            .filter((feature) => {
              const lon = feature.geometry.coordinates[0]
              const lat = feature.geometry.coordinates[1]
              return (
                lat >= turkeyBounds.minlat &&
                lat <= turkeyBounds.maxlat &&
                lon >= turkeyBounds.minlon &&
                lon <= turkeyBounds.maxlon
              )
            })
            .map((feature) => ({
              earthquake_id: feature.id || `usgs-${Date.now()}-${Math.random()}`,
              date: new Date(feature.properties.time).toISOString().split("T")[0],
              time: new Date(feature.properties.time).toISOString().split("T")[1].substring(0, 8),
              lat: feature.geometry.coordinates[1].toString(),
              lng: feature.geometry.coordinates[0].toString(),
              depth: feature.geometry.coordinates[2].toString(),
              mag: feature.properties.mag.toString(),
              title: feature.properties.place || "Türkiye",
              location: feature.properties.place || "Türkiye",
            }))
        : [],
    }

return NextResponse.json(formattedData, {
      headers: {
        "Cache-Control": "max-age=300",
        "Access-Control-Allow-Origin": "*",
      },
    })
  } catch (error) {
    console.error("Third API error:", error)
    // Return mock data as last resort
    return NextResponse.json(generateFallbackData(), {
      headers: {
        "Cache-Control": "max-age=60",
        "Access-Control-Allow-Origin": "*",
      },
    })
  }
}

// Fallback veri oluştur
function generateFallbackData() {
  const now = new Date()
  const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)

// Tarih formatını ayarla (YYYY-MM-DD)
  const formatDate = (date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, "0")
    const day = String(date.getDate()).padStart(2, "0")
    return `${year}-${month}-${day}`
  }

// Saat formatını ayarla (HH:MM:SS)
  const formatTime = (date) => {
    const hours = String(date.getHours()).padStart(2, "0")
    const minutes = String(date.getMinutes()).padStart(2, "0")
    const seconds = String(date.getSeconds()).padStart(2, "0")
    return `${hours}:${minutes}:${seconds}`
  }

// Türkiye'nin farklı bölgelerinden örnek depremler
  const regions = [
    { title: "MARMARA DENIZI", location: "Marmara Denizi", lat: 40.7589, lng: 29.9167 },
    { title: "IZMIR", location: "İzmir", lat: 38.4192, lng: 27.1287 },
    { title: "GAZIANTEP", location: "Gaziantep", lat: 37.0662, lng: 37.3833 },
    { title: "ANTALYA", location: "Antalya", lat: 36.8969, lng: 30.7133 },
    { title: "ERZINCAN", location: "Erzincan", lat: 39.75, lng: 39.5 },
    { title: "VAN", location: "Van", lat: 38.4891, lng: 43.4089 },
    { title: "ADANA", location: "Adana", lat: 37.0, lng: 35.3213 },
  ]

// Son 24 saat içinde rastgele zamanlar oluştur
  const generateRandomTime = () => {
    const randomTime = new Date(yesterday.getTime() + Math.random() * (now.getTime() - yesterday.getTime()))
    return {
      date: formatDate(randomTime),
      time: formatTime(randomTime),
    }
  }

// Örnek deprem verileri oluştur
  const mockData = {
    status: true,
    httpStatus: 200,
    serverload: "1.2",
    result: regions.map((region, index) => {
      const randomTime = generateRandomTime()
      const magnitude = (3 + Math.random() * 2).toFixed(1) // 3.0-5.0 arası
      const depth = (5 + Math.random() * 15).toFixed(1) // 5-20 km arası

return {
        earthquake_id: `mock-${Date.now()}-${index}`,
        date: randomTime.date,
        time: randomTime.time,
        lat: region.lat.toString(),
        lng: region.lng.toString(),
        depth: depth,
        mag: magnitude,
        title: region.title,
        location: region.location,
      }
    }),
  }

return mockData
}
[V0_FILE]typescriptreact:file="components/openlayers-map.tsx" isQuickEdit="true" isMerged="true"
"use client"

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

export default function OpenLayersMap({
  earthquakeData,
  onEarthquakeSelect,
  selectedEarthquake,
  newEarthquakes = [],
  settings = {},
}) {
  const mapRef = useRef(null)
  const [hoveredEarthquake, setHoveredEarthquake] = useState(null)
  const [isLoading, setIsLoading] = useState(true)
  const mapInstanceRef = useRef(null)
  const vectorSourceRef = useRef(null)

// Initialize map once component is mounted
  useEffect(() => {
    let map = null
    let vectorSource = null
    let vectorLayer = null

// Dynamic import of OpenLayers modules
    async function initializeMap() {
      try {
        setIsLoading(true)

// Import CSS first
        await import("ol/ol.css")

// Import core modules
        const Map = (await import("ol/Map")).default
        const View = (await import("ol/View")).default

// Import layer modules
        const TileLayer = (await import("ol/layer/Tile")).default
        const VectorLayer = (await import("ol/layer/Vector")).default

// Import source modules
        const OSM = (await import("ol/source/OSM")).default
        const VectorSourceModule = await import("ol/source/Vector")

// Log the module structure to debug
        console.log("VectorSource module:", VectorSourceModule)

// Create vector source - try accessing it directly without .default
        const VectorSource = VectorSourceModule.default || VectorSourceModule
        vectorSource = new VectorSource()
        vectorSourceRef.current = vectorSource

// Import geometry and style modules
        const Feature = (await import("ol/Feature")).default
        const Point = (await import("ol/geom/Point")).default
        const Style = (await import("ol/style/Style")).default
        const Circle = (await import("ol/style/Circle")).default
        const Fill = (await import("ol/style/Fill")).default
        const Stroke = (await import("ol/style/Stroke")).default
        const Text = (await import("ol/style/Text")).default

// Import projection utilities
        const { fromLonLat } = await import("ol/proj")

console.log("OpenLayers modules loaded successfully")

// Create vector layer
        vectorLayer = new VectorLayer({
          source: vectorSource,
          style: (feature) => {
            const quake = feature.get("earthquake")
            if (!quake) return null

const magnitude = quake.magnitude
            const isSelected = selectedEarthquake && selectedEarthquake.id === quake.id
            const isNew = newEarthquakes.some((e) => e.id === quake.id)
            const isHovered = hoveredEarthquake && hoveredEarthquake.id === quake.id

// Get color based on magnitude
            let color
            if (magnitude >= 7.0)
              color = "#ef4444" // red
            else if (magnitude >= 6.0)
              color = "#f97316" // orange
            else if (magnitude >= 5.0)
              color = "#facc15" // yellow
            else if (magnitude >= 4.0)
              color = "#84cc16" // lime
            else color = "#22c55e" // green

// Calculate size based on magnitude
            const size = Math.max(5, magnitude * 2) * (settings.pointSize || 1)

// Create style
            return new Style({
              image: new Circle({
                radius: size,
                fill: new Fill({
                  color: isSelected || isNew ? "#ffffff" : color,
                }),
                stroke: new Stroke({
                  color: isSelected || isHovered ? "#ffffff" : "rgba(0,0,0,0.4)",
                  width: isSelected || isHovered ? 3 : 1,
                }),
              }),
              text:
                settings.showLabels && (isSelected || isHovered || magnitude >= 5.0)
                  ? new Text({
                      text: `M${magnitude.toFixed(1)}`,
                      offsetY: -size - 10,
                      font: "12px Arial",
                      fill: new Fill({
                        color: settings.darkMode ? "#ffffff" : "#000000",
                      }),
                      stroke: new Stroke({
                        color: settings.darkMode ? "#000000" : "#ffffff",
                        width: 3,
                      }),
                    })
                  : null,
            })
          },
        })

// Create map
        map = new Map({
          target: mapRef.current,
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
            vectorLayer,
          ],
          view: new View({
            center: fromLonLat([35.0, 39.0]), // Turkey center
            zoom: 6,
            minZoom: 5,
            maxZoom: 12,
          }),
          controls: [],
        })

mapInstanceRef.current = map

// Add pointer move interaction for hover effects
        map.on("pointermove", (e) => {
          const hit = map.forEachFeatureAtPixel(e.pixel, (feature) => feature)

if (hit) {
            const quake = hit.get("earthquake")
            setHoveredEarthquake(quake)
            if (mapRef.current) {
              mapRef.current.style.cursor = "pointer"
            }
          } else {
            setHoveredEarthquake(null)
            if (mapRef.current) {
              mapRef.current.style.cursor = ""
            }
          }
        })

// Add click interaction
        map.on("click", (e) => {
          const hit = map.forEachFeatureAtPixel(e.pixel, (feature) => feature)

if (hit && onEarthquakeSelect) {
            const quake = hit.get("earthquake")
            onEarthquakeSelect(quake)
          }
        })

// Add earthquake data
        if (earthquakeData && earthquakeData.length > 0) {
          addEarthquakeFeatures(earthquakeData, vectorSource, Feature, Point, fromLonLat)
        }

setIsLoading(false)
        console.log("Map initialized successfully")
      } catch (error) {
        console.error("Error initializing OpenLayers map:", error)
        setIsLoading(false)
      }
    }

// Function to add earthquake features to the map
    function addEarthquakeFeatures(data, source, Feature, Point, fromLonLat) {
      if (!source) return

// Clear existing features
      source.clear()

// Add earthquake features
      data.forEach((quake) => {
        if (!quake || !quake.location || isNaN(quake.location.lat) || isNaN(quake.location.lng)) return

try {
          const coordinates = fromLonLat([Number.parseFloat(quake.location.lng), Number.parseFloat(quake.location.lat)])

const feature = new Feature({
            geometry: new Point(coordinates),
            earthquake: quake,
          })

source.addFeature(feature)
        } catch (error) {
          console.warn("Error adding earthquake feature:", error)
        }
      })
    }

initializeMap()

// Cleanup
    return () => {
      if (mapInstanceRef.current) {
        mapInstanceRef.current.setTarget(undefined)
        mapInstanceRef.current = null
      }
    }
  }, []) // Empty dependency array to run only once on mount

// Update earthquake data when it changes
  useEffect(() => {
    const updateMap = async () => {
      if (!mapInstanceRef.current || !vectorSourceRef.current || !earthquakeData) return

try {
        // Re-import necessary modules
        const Feature = (await import("ol/Feature")).default
        const Point = (await import("ol/geom/Point")).default
        const { fromLonLat } = await import("ol/proj")

// Clear existing features
        vectorSourceRef.current.clear()

// Add new features
        earthquakeData.forEach((quake) => {
          if (!quake || !quake.location || isNaN(quake.location.lat) || isNaN(quake.location.lng)) return

try {
            const coordinates = fromLonLat([
              Number.parseFloat(quake.location.lng),
              Number.parseFloat(quake.location.lat),
            ])

const feature = new Feature({
              geometry: new Point(coordinates),
              earthquake: quake,
            })

vectorSourceRef.current.addFeature(feature)
          } catch (error) {
            console.warn("Error updating earthquake feature:", error)
          }
        })
      } catch (error) {
        console.error("Error updating earthquake data:", error)
      }
    }

updateMap()
  }, [earthquakeData])

// Center map on selected earthquake
  useEffect(() => {
    const centerOnEarthquake = async () => {
      if (!mapInstanceRef.current || !selectedEarthquake) return

try {
        const { fromLonLat } = await import("ol/proj")

if (
          selectedEarthquake.location &&
          !isNaN(selectedEarthquake.location.lat) &&
          !isNaN(selectedEarthquake.location.lng)
        ) {
          const coordinates = fromLonLat([
            Number.parseFloat(selectedEarthquake.location.lng),
            Number.parseFloat(selectedEarthquake.location.lat),
          ])

mapInstanceRef.current.getView().animate({
            center: coordinates,
            duration: 1000,
            zoom: 8,
          })
        }
      } catch (error) {
        console.error("Error centering on earthquake:", error)
      }
    }

centerOnEarthquake()
  }, [selectedEarthquake])

return (
    <div className="w-full h-full relative">
      <div ref={mapRef} className="w-full h-full"></div>

{/* Map controls */}
      {!isLoading && (
        <div className="absolute bottom-4 left-4 flex flex-col space-y-2">
          <button
            onClick={async () => {
              if (!mapInstanceRef.current) return
              const view = mapInstanceRef.current.getView()
              const zoom = view.getZoom()
              view.animate({
                zoom: zoom + 1,
                duration: 250,
              })
            }}
            className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90"
          >
            +
          </button>
          <button
            onClick={async () => {
              if (!mapInstanceRef.current) return
              const view = mapInstanceRef.current.getView()
              const zoom = view.getZoom()
              view.animate({
                zoom: zoom - 1,
                duration: 250,
              })
            }}
            className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90"
          >
            -
          </button>
          <button
            onClick={async () => {
              if (!mapInstanceRef.current) return
              const { fromLonLat } = await import("ol/proj")
              mapInstanceRef.current.getView().animate({
                center: fromLonLat([35.0, 39.0]),
                zoom: 6,
                duration: 500,
              })
            }}
            className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90 text-xs"
          >
            R
          </button>
        </div>
      )}

{/* Hover information */}
      {hoveredEarthquake && (
        <div className="absolute top-4 left-1/2 transform -translate-x-1/2 bg-black/80 text-white px-3 py-2 rounded-md text-sm pointer-events-none">
          <div className="font-medium">M{hoveredEarthquake.magnitude.toFixed(1)} Deprem</div>
          <div className="text-xs">{hoveredEarthquake.region}</div>
          <div className="text-xs">Derinlik: {hoveredEarthquake.depth} km</div>
          <div className="text-xs">
            {new Date(hoveredEarthquake.time).toLocaleString("tr-TR", {
              day: "2-digit",
              month: "2-digit",
              year: "numeric",
              hour: "2-digit",
              minute: "2-digit",
            })}
          </div>
        </div>
      )}

{/* Loading indicator */}
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-black/50">
          <div className="text-white">Harita yükleniyor...</div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/leaflet-map.tsx" isMerged="true"
"use client"
import dynamic from "next/dynamic"

// Leaflet'i client-side olarak dinamik import ediyoruz
// Bu, SSR sorunlarını önler
const LeafletMap = dynamic(() => import("./map-with-no-ssr"), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex items-center justify-center bg-black/50">
      <div className="text-white">Harita yükleniyor...</div>
    </div>
  ),
})

export default function EarthquakeMap({
  earthquakeData,
  onEarthquakeSelect,
  selectedEarthquake,
  newEarthquakes = [],
  settings = {},
}) {
  return (
    <LeafletMap
      earthquakeData={earthquakeData}
      onEarthquakeSelect={onEarthquakeSelect}
      selectedEarthquake={selectedEarthquake}
      newEarthquakes={newEarthquakes}
      settings={settings}
    />
  )
}
[V0_FILE]typescriptreact:file="components/canvas-map-component.tsx" isMerged="true"
"use client"

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

// Türkiye'nin sınırları
const TURKEY_BOUNDS = {
  north: 42.0,
  south: 36.0,
  east: 45.0,
  west: 26.0,
}

// Harita merkezi
const MAP_CENTER = {
  lat: 39.0,
  lng: 35.0,
}

// Basitleştirilmiş Türkiye sınırları
const TURKEY_OUTLINE = [
  { lat: 41.0, lng: 26.0 },
  { lat: 41.0, lng: 29.0 },
  { lat: 41.5, lng: 32.0 },
  { lat: 41.0, lng: 38.0 },
  { lat: 42.0, lng: 41.0 },
  { lat: 41.5, lng: 43.0 },
  { lat: 39.0, lng: 44.0 },
  { lat: 37.0, lng: 42.0 },
  { lat: 36.0, lng: 36.0 },
  { lat: 36.0, lng: 28.0 },
  { lat: 38.5, lng: 26.0 },
  { lat: 41.0, lng: 26.0 },
]

// Büyük şehirler
const MAJOR_CITIES = [
  { name: "İstanbul", lat: 41.0082, lng: 28.9784 },
  { name: "Ankara", lat: 39.9334, lng: 32.8597 },
  { name: "İzmir", lat: 38.4237, lng: 27.1428 },
  { name: "Antalya", lat: 36.8969, lng: 30.7133 },
  { name: "Adana", lat: 37.0, lng: 35.3213 },
  { name: "Gaziantep", lat: 37.0662, lng: 37.3833 },
  { name: "Konya", lat: 37.8746, lng: 32.4932 },
  { name: "Kayseri", lat: 38.7312, lng: 35.4787 },
  { name: "Trabzon", lat: 41.0027, lng: 39.7168 },
  { name: "Erzurum", lat: 39.9, lng: 41.27 },
  { name: "Van", lat: 38.4891, lng: 43.4089 },
]

export default function CanvasMapComponent({
  earthquakeData,
  onEarthquakeSelect,
  selectedEarthquake,
  newEarthquakes = [],
  settings = {},
}) {
  const canvasRef = useRef(null)
  const [zoom, setZoom] = useState(1)
  const [pan, setPan] = useState({ x: 0, y: 0 })
  const [isDragging, setIsDragging] = useState(false)
  const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 })
  const [hoveredEarthquake, setHoveredEarthquake] = useState(null)
  const [canvasSize, setCanvasSize] = useState({ width: 800, height: 600 })
  const animationFrameRef = useRef(null)

// Koordinatları canvas piksellerine dönüştür
  const latLngToPixel = useCallback(
    (lat, lng, canvasWidth, canvasHeight) => {
      const x = ((lng - TURKEY_BOUNDS.west) / (TURKEY_BOUNDS.east - TURKEY_BOUNDS.west)) * canvasWidth
      const y = ((TURKEY_BOUNDS.north - lat) / (TURKEY_BOUNDS.north - TURKEY_BOUNDS.south)) * canvasHeight

// Zoom ve pan uygula
      const centerX = canvasWidth / 2
      const centerY = canvasHeight / 2

const zoomedX = (x - centerX) * zoom + centerX + pan.x
      const zoomedY = (y - centerY) * zoom + centerY + pan.y

return { x: zoomedX, y: zoomedY }
    },
    [zoom, pan],
  )

// Piksel koordinatlarını lat/lng'ye dönüştür
  const pixelToLatLng = useCallback(
    (x, y, canvasWidth, canvasHeight) => {
      const centerX = canvasWidth / 2
      const centerY = canvasHeight / 2

const unzoomedX = (x - centerX - pan.x) / zoom + centerX
      const unzoomedY = (y - centerY - pan.y) / zoom + centerY

const lng = (unzoomedX / canvasWidth) * (TURKEY_BOUNDS.east - TURKEY_BOUNDS.west) + TURKEY_BOUNDS.west
      const lat = TURKEY_BOUNDS.north - (unzoomedY / canvasHeight) * (TURKEY_BOUNDS.north - TURKEY_BOUNDS.south)

return { lat, lng }
    },
    [zoom, pan],
  )

// Deprem büyüklüğüne göre renk
  const getMagnitudeColor = (magnitude) => {
    if (magnitude >= 7.0) return "#ef4444"
    if (magnitude >= 6.0) return "#f97316"
    if (magnitude >= 5.0) return "#facc15"
    if (magnitude >= 4.0) return "#84cc16"
    return "#22c55e"
  }

// Deprem büyüklüğüne göre boyut
  const getMagnitudeRadius = (magnitude, pointSizeMultiplier = 1) => {
    const baseSize = Math.max(3, magnitude * 2)
    return baseSize * (settings.pointSize || 1) * pointSizeMultiplier
  }

// Canvas çizim fonksiyonu
  const drawMap = useCallback(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    const { width, height } = canvas

// Canvas'ı temizle
    ctx.fillStyle = settings.darkMode ? "#000000" : "#f0f8ff"
    ctx.fillRect(0, 0, width, height)

// Grid çizgileri
    if (settings.showGrid) {
      ctx.strokeStyle = settings.darkMode ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"
      ctx.lineWidth = 0.5

const gridSize = 50 * zoom
      for (let x = (pan.x % gridSize) - gridSize; x < width + gridSize; x += gridSize) {
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, height)
        ctx.stroke()
      }

for (let y = (pan.y % gridSize) - gridSize; y < height + gridSize; y += gridSize) {
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(width, y)
        ctx.stroke()
      }
    }

// Türkiye sınırları (daha detaylı)
    if (settings.showRegionBorders) {
      ctx.strokeStyle = settings.darkMode ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)"
      ctx.lineWidth = 1.5
      ctx.beginPath()

// İlk noktaya git
      const firstPoint = latLngToPixel(TURKEY_OUTLINE[0].lat, TURKEY_OUTLINE[0].lng, width, height)
      ctx.moveTo(firstPoint.x, firstPoint.y)

// Diğer noktaları birleştir
      for (let i = 1; i < TURKEY_OUTLINE.length; i++) {
        const point = latLngToPixel(TURKEY_OUTLINE[i].lat, TURKEY_OUTLINE[i].lng, width, height)
        ctx.lineTo(point.x, point.y)
      }

ctx.closePath()
      ctx.stroke()

// Türkiye yazısı
      ctx.fillStyle = settings.darkMode ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"
      ctx.font = `${16 * Math.min(1, zoom)}px Arial`
      ctx.textAlign = "center"
      const turkeyCenter = latLngToPixel(39.0, 35.0, width, height)
      ctx.fillText("TÜRKİYE", turkeyCenter.x, turkeyCenter.y)
    }

// Büyük şehirleri çiz
    if (zoom > 0.8) {
      MAJOR_CITIES.forEach((city) => {
        const pos = latLngToPixel(city.lat, city.lng, width, height)

// Canvas sınırları içinde mi kontrol et
        if (pos.x < -50 || pos.x > width + 50 || pos.y < -50 || pos.y > height + 50) return

// Şehir noktası
        ctx.beginPath()
        ctx.arc(pos.x, pos.y, 3, 0, Math.PI * 2)
        ctx.fillStyle = settings.darkMode ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)"
        ctx.fill()

// Şehir ismi
        ctx.fillStyle = settings.darkMode ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)"
        ctx.font = `${10 * Math.min(1, zoom)}px Arial`
        ctx.textAlign = "center"
        ctx.fillText(city.name, pos.x, pos.y - 8)
      })
    }

// Deprem noktalarını çiz
    earthquakeData.forEach((quake) => {
      if (!quake || !quake.location || isNaN(quake.location.lat) || isNaN(quake.location.lng)) return

const pos = latLngToPixel(quake.location.lat, quake.location.lng, width, height)

// Canvas sınırları içinde mi kontrol et
      if (pos.x < -50 || pos.x > width + 50 || pos.y < -50 || pos.y > height + 50) return

const radius = getMagnitudeRadius(quake.magnitude)
      const isSelected = selectedEarthquake && selectedEarthquake.id === quake.id
      const isNew = newEarthquakes.some((e) => e.id === quake.id)
      const isHovered = hoveredEarthquake && hoveredEarthquake.id === quake.id

// Deprem noktası
      ctx.beginPath()
      ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2)
      ctx.fillStyle = getMagnitudeColor(quake.magnitude)

if (isSelected) {
        ctx.strokeStyle = "#ffffff"
        ctx.lineWidth = 2
        ctx.stroke()
      }

if (isNew && settings.pulseEffect) {
        const time = Date.now() / 1000
        const pulse = 1 + Math.sin(time * 5) * 0.3
        ctx.save()
        ctx.scale(pulse, pulse)
        ctx.translate(pos.x * (1 - pulse), pos.y * (1 - pulse))
      }

ctx.fill()

if (isNew && settings.pulseEffect) {
        ctx.restore()
      }

// Hover efekti
      if (isHovered) {
        ctx.beginPath()
        ctx.arc(pos.x, pos.y, radius + 5, 0, Math.PI * 2)
        ctx.strokeStyle = "rgba(255, 255, 255, 0.5)"
        ctx.lineWidth = 2
        ctx.stroke()
      }

// Etiket
      if (settings.showLabels && (isSelected || isHovered || quake.magnitude >= 5.0)) {
        ctx.fillStyle = settings.darkMode ? "#ffffff" : "#000000"
        ctx.font = "12px Arial"
        ctx.textAlign = "center"
        ctx.fillText(`M${quake.magnitude.toFixed(1)}`, pos.x, pos.y - radius - 10)

// Bölge adını kısalt
        let regionText = quake.region || ""
        if (regionText.length > 20) {
          regionText = regionText.substring(0, 20) + "..."
        }

ctx.fillText(regionText, pos.x, pos.y - radius - 25)
      }
    })

// Zoom seviyesi göstergesi
    ctx.fillStyle = settings.darkMode ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)"
    ctx.font = "14px Arial"
    ctx.textAlign = "left"
    ctx.fillText(`Zoom: ${zoom.toFixed(1)}x`, 10, height - 10)
  }, [earthquakeData, selectedEarthquake, newEarthquakes, hoveredEarthquake, settings, zoom, pan, latLngToPixel])

// Canvas boyutunu ayarla
  const resizeCanvas = useCallback(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const rect = canvas.getBoundingClientRect()
    canvas.width = rect.width
    canvas.height = rect.height

setCanvasSize({ width: rect.width, height: rect.height })

drawMap()
  }, [drawMap])

// Animasyon döngüsü
  const animate = useCallback(() => {
    drawMap()
    animationFrameRef.current = requestAnimationFrame(animate)
  }, [drawMap])

// Mouse olayları
  const handleMouseDown = (e) => {
    setIsDragging(true)
    setLastMousePos({ x: e.clientX, y: e.clientY })
    const canvas = canvasRef.current
    if (canvas) {
      canvas.style.cursor = "grabbing"
    }
  }

const handleMouseMove = (e) => {
    if (isDragging) {
      const deltaX = e.clientX - lastMousePos.x
      const deltaY = e.clientY - lastMousePos.y

setPan((prev) => ({
        x: prev.x + deltaX,
        y: prev.y + deltaY,
      }))

setLastMousePos({ x: e.clientX, y: e.clientY })
    } else {
      // Hover kontrolü
      const canvas = canvasRef.current
      if (!canvas) return

const rect = canvas.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top

let foundEarthquake = null

for (const quake of earthquakeData) {
        if (!quake || !quake.location || isNaN(quake.location.lat) || isNaN(quake.location.lng)) continue

const pos = latLngToPixel(quake.location.lat, quake.location.lng, rect.width, rect.height)
        const radius = getMagnitudeRadius(quake.magnitude, 1.5) // Hover için biraz daha geniş alan

const distance = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2)
        if (distance <= radius) {
          foundEarthquake = quake
          break
        }
      }

setHoveredEarthquake(foundEarthquake)
      canvas.style.cursor = foundEarthquake ? "pointer" : "grab"
    }
  }

const handleMouseUp = () => {
    setIsDragging(false)
    const canvas = canvasRef.current
    if (canvas) {
      canvas.style.cursor = hoveredEarthquake ? "pointer" : "grab"
    }
  }

const handleMouseLeave = () => {
    setIsDragging(false)
    setHoveredEarthquake(null)
  }

const handleClick = (e) => {
    if (hoveredEarthquake && onEarthquakeSelect) {
      onEarthquakeSelect(hoveredEarthquake)
    }
  }

const handleWheel = (e) => {
    e.preventDefault()
    const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1
    setZoom((prev) => Math.max(0.5, Math.min(5, prev * zoomFactor)))
  }

// Touch events for mobile
  const handleTouchStart = (e) => {
    if (e.touches.length === 1) {
      setIsDragging(true)
      setLastMousePos({ x: e.touches[0].clientX, y: e.touches[0].clientY })
    }
  }

const handleTouchMove = (e) => {
    if (isDragging && e.touches.length === 1) {
      const deltaX = e.touches[0].clientX - lastMousePos.x
      const deltaY = e.touches[0].clientY - lastMousePos.y

setPan((prev) => ({
        x: prev.x + deltaX,
        y: prev.y + deltaY,
      }))

setLastMousePos({ x: e.touches[0].clientX, y: e.touches[0].clientY })
    }
  }

const handleTouchEnd = () => {
    setIsDragging(false)
  }

// Event listener'ları ekle
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

canvas.addEventListener("mousedown", handleMouseDown)
    canvas.addEventListener("mousemove", handleMouseMove)
    canvas.addEventListener("mouseup", handleMouseUp)
    canvas.addEventListener("mouseleave", handleMouseLeave)
    canvas.addEventListener("click", handleClick)
    canvas.addEventListener("wheel", handleWheel)

// Touch events
    canvas.addEventListener("touchstart", handleTouchStart)
    canvas.addEventListener("touchmove", handleTouchMove)
    canvas.addEventListener("touchend", handleTouchEnd)

return () => {
      canvas.removeEventListener("mousedown", handleMouseDown)
      canvas.removeEventListener("mousemove", handleMouseMove)
      canvas.removeEventListener("mouseup", handleMouseUp)
      canvas.removeEventListener("mouseleave", handleMouseLeave)
      canvas.removeEventListener("click", handleClick)
      canvas.removeEventListener("wheel", handleWheel)

canvas.removeEventListener("touchstart", handleTouchStart)
      canvas.removeEventListener("touchmove", handleTouchMove)
      canvas.removeEventListener("touchend", handleTouchEnd)
    }
  }, [hoveredEarthquake, onEarthquakeSelect, earthquakeData, latLngToPixel])

// Animasyon başlat
  useEffect(() => {
    animationFrameRef.current = requestAnimationFrame(animate)
    return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [animate])

// Pencere boyutu değiştiğinde canvas'ı yeniden boyutlandır
  useEffect(() => {
    resizeCanvas()
    window.addEventListener("resize", resizeCanvas)
    return () => window.removeEventListener("resize", resizeCanvas)
  }, [resizeCanvas])

// Seçili deprem değiştiğinde haritayı ortala
  useEffect(() => {
    if (selectedEarthquake && canvasRef.current) {
      const canvas = canvasRef.current
      const rect = canvas.getBoundingClientRect()

if (
        selectedEarthquake.location &&
        !isNaN(selectedEarthquake.location.lat) &&
        !isNaN(selectedEarthquake.location.lng)
      ) {
        const targetPos = latLngToPixel(
          selectedEarthquake.location.lat,
          selectedEarthquake.location.lng,
          rect.width,
          rect.height,
        )

// Haritayı seçili depremin merkezde olacağı şekilde ayarla
        setPan({
          x: rect.width / 2 - targetPos.x + pan.x,
          y: rect.height / 2 - targetPos.y + pan.y,
        })
      }
    }
  }, [selectedEarthquake, latLngToPixel, pan])

return (
    <div className="w-full h-full relative">
      <canvas
        ref={canvasRef}
        className="w-full h-full cursor-grab active:cursor-grabbing"
        style={{ display: "block" }}
      />

{/* Harita kontrolleri */}
      <div className="absolute bottom-4 left-4 flex flex-col space-y-2">
        <button
          onClick={() => setZoom((prev) => Math.min(5, prev * 1.2))}
          className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90"
        >
          +
        </button>
        <button
          onClick={() => setZoom((prev) => Math.max(0.5, prev / 1.2))}
          className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90"
        >
          -
        </button>
        <button
          onClick={() => {
            setZoom(1)
            setPan({ x: 0, y: 0 })
          }}
          className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90 text-xs"
        >
          R
        </button>
      </div>

{/* Hover bilgisi */}
      {hoveredEarthquake && (
        <div className="absolute top-4 left-1/2 transform -translate-x-1/2 bg-black/80 text-white px-3 py-2 rounded-md text-sm pointer-events-none">
          <div className="font-medium">M{hoveredEarthquake.magnitude.toFixed(1)} Deprem</div>
          <div className="text-xs">{hoveredEarthquake.region}</div>
          <div className="text-xs">Derinlik: {hoveredEarthquake.depth} km</div>
          <div className="text-xs">
            {new Date(hoveredEarthquake.time).toLocaleString("tr-TR", {
              day: "2-digit",
              month: "2-digit",
              year: "numeric",
              hour: "2-digit",
              minute: "2-digit",
            })}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/map-component.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import dynamic from "next/dynamic"

// Üç farklı harita seçeneği sunuyoruz
// 1. Canvas haritası - Hiçbir kütüphane gerektirmez, tamamen özel
// 2. Leaflet haritası - Yaygın kullanılan, stabil bir kütüphane
// 3. Fallback olarak Canvas haritası - Diğerleri çalışmazsa

export default function MapComponent({
  earthquakeData,
  onEarthquakeSelect,
  selectedEarthquake,
  newEarthquakes = [],
  settings = {},
}) {
  const [mapType, setMapType] = useState("canvas")
  const [error, setError] = useState(null)

// Leaflet'i dinamik olarak yüklemeyi dene
  useEffect(() => {
    const tryLeaflet = async () => {
      try {
        // Leaflet'i yüklemeyi dene
        await import("leaflet")
        setMapType("leaflet")
      } catch (err) {
        console.warn("Leaflet yüklenemedi, Canvas haritası kullanılıyor:", err)
        setMapType("canvas")
      }
    }

tryLeaflet()
  }, [])

// Harita tipine göre bileşeni yükle
  if (mapType === "leaflet") {
    // Leaflet haritası - SSR sorunlarını önlemek için dinamik import
    const LeafletMap = dynamic(() => import("./leaflet-map"), {
      ssr: false,
      loading: () => (
        <div className="w-full h-full flex items-center justify-center bg-black/50">
          <div className="text-white">Harita yükleniyor...</div>
        </div>
      ),
    })

return (
      <LeafletMap
        earthquakeData={earthquakeData}
        onEarthquakeSelect={onEarthquakeSelect}
        selectedEarthquake={selectedEarthquake}
        newEarthquakes={newEarthquakes}
        settings={settings}
      />
    )
  } else {
    // Canvas haritası - Hiçbir kütüphane gerektirmez
    const CanvasMap = dynamic(() => import("./canvas-map-component"), {
      ssr: false,
      loading: () => (
        <div className="w-full h-full flex items-center justify-center bg-black/50">
          <div className="text-white">Harita yükleniyor...</div>
        </div>
      ),
    })

return (
      <CanvasMap
        earthquakeData={earthquakeData}
        onEarthquakeSelect={onEarthquakeSelect}
        selectedEarthquake={selectedEarthquake}
        newEarthquakes={newEarthquakes}
        settings={settings}
      />
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/proxy-emsc/route.ts" isMerged="true"
import { NextResponse } from "next/server"

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

// Varsayılan parametreler
    const limit = params.get("limit") || "100"
    const minmag = params.get("minmag") || "1"
    const maxmag = params.get("maxmag") || "10"
    const days = params.get("days") || "30"

// EMSC API URL'si
    const emscUrl = `https://www.seismicportal.eu/fdsnws/event/1/query?format=json&limit=${limit}&minmag=${minmag}&maxmag=${maxmag}&days=${days}`

console.log("EMSC API request:", emscUrl)

// EMSC API'sine istek
    const response = await fetch(emscUrl, {
      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",
        Accept: "application/json",
      },
      cache: "no-store",
      next: { revalidate: 300 }, // 5 dakika önbellek
    })

if (!response.ok) {
      console.error(`EMSC API error: ${response.status}`)

// Daha detaylı hata yanıtı
      const errorText = await response.text()
      return NextResponse.json(
        {
          error: `EMSC API hatası: ${response.status}`,
          details: errorText,
        },
        { status: response.status },
      )
    }

// JSON yanıtını parse et
    try {
      const data = await response.json()

return NextResponse.json(data, {
        headers: {
          "Cache-Control": "max-age=300", // 5 dakika önbellek
        },
      })
    } catch (parseError) {
      console.error("Error parsing EMSC response:", parseError)
      return NextResponse.json(
        {
          error: "Failed to parse EMSC response",
          details: parseError.message,
        },
        { status: 500 },
      )
    }
  } catch (error) {
    console.error("EMSC proxy error:", error)

// Fallback yanıtı
    return NextResponse.json(
      {
        type: "FeatureCollection",
        metadata: {
          generated: Date.now(),
          title: "EMSC Earthquakes (Fallback)",
          status: 500,
          api: "1.0.0",
          count: 0,
        },
        features: [],
      },
      { status: 200 },
    )
  }
}
[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" | "emsc" | "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",
  },
  {
    id: "emsc",
    name: "EMSC",
    apiEndpoint: "https://www.seismicportal.eu/fdsnws/event/1/query",
    updateFrequency: "realtime",
    parser: "emsc",
  },
]
[V0_FILE]typescriptreact:file="lib/turkey-earthquake-service.ts" isMerged="true"
import { earthquakeDataSources } from "./data-sources"

export interface EarthquakeData {
  id: string
  time: string
  magnitude: number
  depth: number
  location: {
    lat: number
    lng: number
  }
  region: string
  intensity?: number
  source?: string
}

// Performans için önbellek
const dataCache = new Map()
const CACHE_DURATION = 5 * 60 * 1000 // 5 dakika

// Türkiye'deki deprem verilerini çekme
export async function fetchTurkeyEarthquakeData(
  source: string,
  timeRange: {
    start: Date
    end: Date
  },
  region?: {
    name: string
    coordinates: {
      lat: number
      lng: number
    }
    radius: number
  },
  minMagnitude = 1.0,
  maxMagnitude = 10.0,
): Promise<EarthquakeData[]> {
  try {
    // Önbellek anahtarı oluştur
    const cacheKey = `${source}-${timeRange.start.getTime()}-${timeRange.end.getTime()}-${region?.name || "all"}-${minMagnitude}-${maxMagnitude}`

// Ö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 fetchKandilliDataNew(timeRange, region, minMagnitude, maxMagnitude)
        break
      case "afad":
        earthquakeData = await fetchAfadData(timeRange, region, minMagnitude, maxMagnitude)
        break
      case "usgs":
        earthquakeData = await fetchUsgsDataForTurkey(timeRange, region, minMagnitude, maxMagnitude)
        break
      case "emsc":
        earthquakeData = await fetchEmscData(timeRange, region, minMagnitude, maxMagnitude)
        break
      default:
        // Örnek veri oluştur (gerçek API yoksa)
        earthquakeData = generateMockData(timeRange, region, source, minMagnitude, maxMagnitude)
    }

// 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"}-${minMagnitude}-${maxMagnitude}`
    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, minMagnitude, maxMagnitude)
  }
}

// Improved Kandilli data fetching with multiple API endpoints
async function fetchKandilliDataNew(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
  minMagnitude = 1.0,
  maxMagnitude = 10.0,
): Promise<EarthquakeData[]> {
  try {
    // Try to fetch from Kandilli API
    const response = await fetch("/api/proxy-kandilli-new", {
      cache: "no-store",
      signal: AbortSignal.timeout(10000), // 10 saniye timeout
    })

if (!response.ok) {
      console.warn(`Kandilli verileri alınamadı: ${response.status}`)
      // Fallback to USGS data if Kandilli fails
      return fetchUsgsDataForTurkey(timeRange, region, minMagnitude, maxMagnitude)
    }

const data = await response.json()

// API yanıtını kontrol et
    if (!data.result || !Array.isArray(data.result)) {
      console.warn("Kandilli API'sinden geçersiz veri formatı")
      return fetchUsgsDataForTurkey(timeRange, region, minMagnitude, maxMagnitude)
    }

// Kandilli verilerini dönüştür - daha güvenli date parsing
    const earthquakes: EarthquakeData[] = []

for (const item of data.result) {
      try {
        // Tarih formatını güvenli bir şekilde parse et
        let dateTime: Date

try {
          // İlk format denemesi: YYYY-MM-DD HH:mm:ss
          dateTime = new Date(`${item.date}T${item.time}`)

// Geçersiz tarih kontrolü
          if (isNaN(dateTime.getTime())) {
            throw new Error("Invalid date format")
          }
        } catch (dateError) {
          try {
            // İkinci format denemesi: DD.MM.YYYY HH:mm:ss
            const dateParts = item.date.split(".")
            const timeParts = item.time.split(":")

if (dateParts.length === 3 && timeParts.length === 3) {
              const year = Number.parseInt(dateParts[2])
              const month = Number.parseInt(dateParts[1]) - 1 // JS'de aylar 0-11 arası
              const day = Number.parseInt(dateParts[0])
              const hour = Number.parseInt(timeParts[0])
              const minute = Number.parseInt(timeParts[1])
              const second = Number.parseInt(timeParts[2])

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

// Geçersiz tarih kontrolü
              if (isNaN(dateTime.getTime())) {
                throw new Error("Invalid date components")
              }
            } else {
              throw new Error("Invalid date parts")
            }
          } catch (error) {
            // Tarih parse edilemedi, bu depremi atla
            console.warn(`Tarih parse edilemedi: ${item.date} ${item.time}`, error)
            continue
          }
        }

// Diğer alanları güvenli bir şekilde parse et
        const magnitude = Number.parseFloat(item.mag || "0") || 0
        const depth = Number.parseFloat(item.depth || "0") || 0
        const lat = Number.parseFloat(item.lat || "0") || 0
        const lng = Number.parseFloat(item.lng || "0") || 0

// Büyüklük kontrolü
        if (magnitude < minMagnitude || magnitude > maxMagnitude) continue

earthquakes.push({
          id: `kandilli-${item.earthquake_id || dateTime.getTime()}`,
          time: dateTime.toISOString(),
          magnitude,
          depth,
          location: { lat, lng },
          region: item.title || item.location || "Bilinmiyor",
          intensity: magnitude * 0.8,
          source: "Kandilli",
        })
      } catch (itemError) {
        // Bir deprem verisi işlenemedi, devam et
        console.warn("Deprem verisi işlenemedi:", itemError)
        continue
      }
    }

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

if (region && region.name !== "Tüm Türkiye") {
      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
      })
    }

// Veri yoksa USGS'ye fallback yap
    if (filteredData.length === 0) {
      console.log("Kandilli'den filtrelenmiş veri bulunamadı, USGS'ye fallback yapılıyor")
      return fetchUsgsDataForTurkey(timeRange, region, minMagnitude, maxMagnitude)
    }

return filteredData
  } catch (error) {
    console.error("Kandilli verisi alınamadı:", error)
    // Hata durumunda USGS verilerine fallback yap
    return fetchUsgsDataForTurkey(timeRange, region, minMagnitude, maxMagnitude)
  }
}

// Add a new function to fetch USGS data specifically for Turkey
async function fetchUsgsDataForTurkey(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
  minMagnitude = 1.0,
  maxMagnitude = 10.0,
): Promise<EarthquakeData[]> {
  try {
    console.log("USGS'den Türkiye depremleri alınıyor...")

// USGS API parametreleri - Türkiye için sınırlandırılmış
    const params = new URLSearchParams({
      format: "geojson",
      starttime: timeRange.start.toISOString(),
      endtime: timeRange.end.toISOString(),
      minmagnitude: minMagnitude.toString(),
      maxmagnitude: maxMagnitude.toString(),
      limit: "500", // Performans için sınırla
    })

// Türkiye'nin yaklaşık koordinatları
    const turkeyBounds = {
      minlat: 36.0,
      maxlat: 42.0,
      minlon: 26.0,
      maxlon: 45.0,
    }

// Bölge belirtilmişse o bölgeyi kullan, yoksa tüm Türkiye'yi kapsayan bir alan kullan
    if (region && region.name !== "Tüm Türkiye") {
      params.append("latitude", region.coordinates.lat.toString())
      params.append("longitude", region.coordinates.lng.toString())
      params.append("maxradiuskm", region.radius.toString())
    } else {
      // Türkiye'nin merkezi
      params.append("latitude", "39.0")
      params.append("longitude", "35.0")
      params.append("maxradiuskm", "800") // Türkiye'yi kapsayacak bir yarıçap
    }

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

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

const data = await response.json()

if (!data.features || !Array.isArray(data.features)) {
      throw new Error("USGS API'sinden geçersiz veri formatı")
    }

// USGS verilerini dönüştür
    const earthquakes = data.features
      .filter((feature) => {
        // Türkiye sınırları içinde mi kontrol et
        const lon = feature.geometry.coordinates[0]
        const lat = feature.geometry.coordinates[1]

return (
          lat >= turkeyBounds.minlat &&
          lat <= turkeyBounds.maxlat &&
          lon >= turkeyBounds.minlon &&
          lon <= turkeyBounds.maxlon
        )
      })
      .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 || "Türkiye",
        intensity: feature.properties.mag * 0.8, // Basit bir şiddet hesabı
        source: "USGS",
      }))

return earthquakes
  } catch (error) {
    console.error("USGS Türkiye verisi alınamadı:", error)
    // Son çare olarak mock veri döndür
    return generateMockData(timeRange, region, "USGS", minMagnitude, maxMagnitude)
  }
}

// AFAD'dan veri çekme
async function fetchAfadData(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
  minMagnitude = 1.0,
  maxMagnitude = 10.0,
): 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: minMagnitude,
        max_magnitude: maxMagnitude,
        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()

// EMSC'den veri çekme
async function fetchEmscData(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
  minMagnitude = 1.0,
  maxMagnitude = 10.0,
): Promise<EarthquakeData[]> {
  try {
    console.log("EMSC'den deprem verileri alınıyor...")

// Zaman aralığını gün olarak hesapla
    const daysDiff = Math.ceil((timeRange.end.getTime() - timeRange.start.getTime()) / (1000 * 60 * 60 * 24))

// EMSC API parametreleri
    const params = new URLSearchParams({
      limit: "500", // Performans için sınırla
      minmag: minMagnitude.toString(),
      maxmag: maxMagnitude.toString(),
      days: Math.min(daysDiff, 90).toString(), // EMSC maksimum 90 gün destekliyor
    })

// EMSC API'sine istek
    const response = await fetch("/api/proxy-emsc?" + params.toString(), {
      cache: "no-store",
      signal: AbortSignal.timeout(15000), // 15 saniye timeout
    })

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

const data = await response.json()

if (!data.features || !Array.isArray(data.features)) {
      throw new Error("EMSC API'sinden geçersiz veri formatı")
    }

// Türkiye'nin yaklaşık koordinatları
    const turkeyBounds = {
      minlat: 36.0,
      maxlat: 42.0,
      minlon: 26.0,
      maxlon: 45.0,
    }

// EMSC verilerini dönüştür
    const earthquakes = data.features
      .filter((feature) => {
        // Zaman aralığı kontrolü
        const quakeTime = new Date(feature.properties.time)
        if (quakeTime < timeRange.start || quakeTime > timeRange.end) return false

// Bölge belirtilmişse, o bölgeye göre filtrele
        if (region && region.name !== "Tüm Türkiye") {
          const distance = calculateDistance(
            region.coordinates.lat,
            region.coordinates.lng,
            feature.geometry.coordinates[1],
            feature.geometry.coordinates[0],
          )
          return distance <= region.radius
        }

// Türkiye sınırları içinde mi kontrol et
        const lon = feature.geometry.coordinates[0]
        const lat = feature.geometry.coordinates[1]

return (
          lat >= turkeyBounds.minlat &&
          lat <= turkeyBounds.maxlat &&
          lon >= turkeyBounds.minlon &&
          lon <= turkeyBounds.maxlon
        )
      })
      .map((feature) => ({
        id: feature.properties.source_id || `emsc-${feature.properties.time}`,
        time: new Date(feature.properties.time).toISOString(),
        magnitude: feature.properties.mag,
        depth: feature.geometry.coordinates[2],
        location: {
          lat: feature.geometry.coordinates[1],
          lng: feature.geometry.coordinates[0],
        },
        region: feature.properties.flynn_region || "Türkiye",
        intensity: feature.properties.mag * 0.8,
        source: "EMSC",
      }))

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

// İki nokta arasındaki mesafeyi hesaplama (Haversine formülü)
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)
function generateMockData(
  timeRange: { start: Date; end: Date },
  region?: { name: string; coordinates: { lat: number; lng: number }; radius: number },
  source = "Mock",
  minMagnitude = 1.0,
  maxMagnitude = 10.0,
): EarthquakeData[] {
  const startTime = timeRange.start.getTime()
  const endTime = timeRange.end.getTime()
  const timeSpan = endTime - startTime

// Bölgeye göre deprem sayısını belirle
  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)
    let regionName = "Türkiye"

if (region && region.name !== "Tüm Türkiye") {
      // 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
      regionName = region.name
    } else {
      // Türkiye sınırları içinde rastgele koordinatlar
      lat = 36 + Math.random() * 6 // 36-42 arası (Türkiye'nin enlem aralığı)
      lng = 26 + Math.random() * 19 // 26-45 arası (Türkiye'nin boylam aralığı)

// Bölge adını belirle
      if (lat > 40.5 && lng < 30) regionName = "Marmara Bölgesi"
      else if (lat > 40 && lng > 30 && lng < 35) regionName = "Karadeniz Bölgesi"
      else if (lat > 40 && lng > 35) regionName = "Doğu Anadolu Bölgesi"
      else if (lat < 38 && lng < 30) regionName = "Ege Bölgesi"
      else if (lat < 38 && lng > 35) regionName = "Güneydoğu Anadolu Bölgesi"
      else if (lat < 40 && lat > 38 && lng > 30 && lng < 35) regionName = "İç Anadolu Bölgesi"
      else if (lat < 38 && lng > 30 && lng < 35) regionName = "Akdeniz Bölgesi"
    }

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

// Minimum büyüklük kontrolü
    if (magnitude < minMagnitude) {
      magnitude = minMagnitude
    }

// Maximum büyüklük kontrolü
    if (magnitude > maxMagnitude) {
      magnitude = maxMagnitude
    }

// 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: regionName,
      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())
}

// Tüm veri kaynaklarından veri çekme
export async function fetchAllEarthquakeData(
  timeRange: {
    start: Date
    end: Date
  },
  region?: {
    name: string
    coordinates: {
      lat: number
      lng: number
    }
    radius: number
  },
  minMagnitude = 1.0,
  maxMagnitude = 10.0,
): Promise<EarthquakeData[]> {
  try {
    // Önbellek anahtarı oluştur
    const cacheKey = `all-sources-${timeRange.start.getTime()}-${timeRange.end.getTime()}-${region?.name || "all"}-${minMagnitude}-${maxMagnitude}`

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

// Tüm kaynaklardan paralel olarak veri çek
    const [usgsData, emscData] = await Promise.all([
      fetchUsgsDataForTurkey(timeRange, region, minMagnitude, maxMagnitude).catch((err) => {
        console.error("USGS veri çekme hatası:", err)
        return []
      }),
      fetchEmscData(timeRange, region, minMagnitude, maxMagnitude).catch((err) => {
        console.error("EMSC veri çekme hatası:", err)
        return []
      }),
    ])

// Tüm verileri birleştir
    const allData = [...usgsData, ...emscData]

// Tekrarlanan depremleri filtrele (aynı zaman ve koordinatta)
    const uniqueData = allData.filter((quake, index, self) => {
      return (
        index ===
        self.findIndex(
          (q) =>
            q.time === quake.time &&
            q.location.lat === quake.location.lat &&
            q.location.lng === quake.location.lng &&
            q.magnitude === quake.magnitude,
        )
      )
    })

// Zamana göre sırala
    const sortedData = uniqueData.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("Tüm kaynaklardan veri çekme hatası:", error)
    return []
  }
}
[V0_FILE]typescriptreact:file="components/turkey-earthquake-map.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback, useRef, useMemo } from "react"
import { fetchTurkeyEarthquakeData, fetchAllEarthquakeData } from "@/lib/turkey-earthquake-service"
import EarthquakeInfoPanel from "./earthquake-info-panel"
import ControlPanel from "./control-panel"
import { Button } from "@/components/ui/button"
import { RefreshCw, Settings, AlertTriangle, Database } from "lucide-react"
import SettingsModal from "./settings-modal"
import EarthquakeListPanel from "./earthquake-list-panel"
import EarthquakeMinimap from "./earthquake-minimap"
import EarthquakeMap from "./leaflet-map" // Leaflet haritasını kullanıyoruz

export default function TurkeyEarthquakeMap() {
  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 [showSettings, setShowSettings] = useState(false)
  const [dataSource, setDataSource] = useState("all") // Varsayılan olarak tüm kaynaklar
  const [loadAttempts, setLoadAttempts] = useState(0)
  const [showSourceSelector, setShowSourceSelector] = useState(false)

// Filtreleme ayarları
  const [filters, setFilters] = useState({
    startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // Son 30 gün
    endDate: new Date(),
    minMagnitude: 1.0, // Minimum büyüklük 1.0
    maxMagnitude: 10.0, // Maksimum büyüklük 10.0
    region: null,
    dataSource: "all", // Tüm kaynaklar
  })

// Harita ayarları
  const [mapSettings, setMapSettings] = useState({
    showLabels: true,
    pointSize: 1,
    pulseEffect: true,
    showGrid: true,
    showRegionBorders: true,
    darkMode: true,
    lowPerformanceMode: false,
  })

// Deprem verilerini yükleme fonksiyonu
  const loadEarthquakeData = useCallback(async () => {
    try {
      setIsLoading(true)
      setError(null)

console.log(`Deprem verileri yükleniyor... (Kaynak: ${filters.dataSource}, Deneme: ${loadAttempts + 1})`)

setDataSource(filters.dataSource)

let quakeData = []

// Tüm kaynaklar seçiliyse
      if (filters.dataSource === "all") {
        quakeData = await fetchAllEarthquakeData(
          {
            start: filters.startDate,
            end: filters.endDate,
          },
          filters.region,
          filters.minMagnitude,
          filters.maxMagnitude,
        )
      } else {
        // Tek bir kaynak seçiliyse
        quakeData = await fetchTurkeyEarthquakeData(
          filters.dataSource,
          {
            start: filters.startDate,
            end: filters.endDate,
          },
          filters.region,
          filters.minMagnitude,
          filters.maxMagnitude,
        )
      }

if (!quakeData || !Array.isArray(quakeData) || quakeData.length === 0) {
        if (loadAttempts === 0) {
          setLoadAttempts(1)
          const newSource = filters.dataSource === "kandilli" ? "usgs" : "emsc"
          console.log(`Veri bulunamadı, ${newSource} kaynağına geçiliyor...`)
          setFilters((prev) => ({ ...prev, dataSource: newSource }))
          return
        } else {
          throw new Error("Hiçbir veri kaynağından deprem verisi alınamadı")
        }
      }

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

if (newQuakes.length > 0) {
            const biggestNewQuake = newQuakes.reduce((prev, current) =>
              prev.magnitude > current.magnitude ? prev : current,
            )
            setSelectedEarthquake(biggestNewQuake)
          }
        }
      } else if (quakeData.length > 0) {
        const biggestQuake = quakeData.reduce((prev, current) => (prev.magnitude > current.magnitude ? prev : current))
        setSelectedEarthquake(biggestQuake)
      }

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)
      setLoadAttempts(0)
    } catch (err) {
      console.error("Veri yükleme hatası:", err)

if (loadAttempts === 0) {
        setLoadAttempts(1)
        const newSource = filters.dataSource === "kandilli" ? "usgs" : "emsc"
        console.log(`Hata oluştu, ${newSource} kaynağına geçiliyor...`)
        setFilters((prev) => ({ ...prev, dataSource: newSource }))
        return
      }

setError(err instanceof Error ? err.message : "Veri yüklenirken bir hata oluştu")
      setIsLoading(false)
    }
  }, [filters, loadAttempts])

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

pollingIntervalRef.current = setInterval(
      () => {
        loadEarthquakeData()
      },
      5 * 60 * 1000, // 5 dakikada bir güncelle
    )

return () => {
      if (pollingIntervalRef.current) {
        clearInterval(pollingIntervalRef.current)
      }
    }
  }, [loadEarthquakeData])

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

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

const handleFilterChange = (newFilters) => {
    setFilters({ ...filters, ...newFilters })
  }

const handleSettingsChange = (newSettings) => {
    setMapSettings({ ...mapSettings, ...newSettings })
  }

useEffect(() => {
    if (dataSource !== filters.dataSource) {
      loadEarthquakeData()
    }
  }, [filters.dataSource, dataSource, loadEarthquakeData])

const validEarthquakeData = useMemo(() => {
    return earthquakeData.filter((quake) => {
      if (!quake || !quake.location || !quake.time) return false
      if (isNaN(quake.location.lat) || isNaN(quake.location.lng)) return false
      if (isNaN(new Date(quake.time).getTime())) return false
      return true
    })
  }, [earthquakeData])

// Veri kaynağı seçimi
  const handleSourceChange = (source) => {
    setFilters((prev) => ({ ...prev, dataSource: source }))
    setShowSourceSelector(false)
  }

// Veri kaynağı adını göster
  const getDataSourceName = (source) => {
    switch (source) {
      case "kandilli":
        return "Kandilli"
      case "afad":
        return "AFAD"
      case "usgs":
        return "USGS"
      case "emsc":
        return "EMSC"
      case "all":
        return "Tüm Kaynaklar"
      default:
        return source
    }
  }

// Veri kaynağı istatistikleri
  const sourceStats = useMemo(() => {
    const stats = {
      kandilli: 0,
      afad: 0,
      usgs: 0,
      emsc: 0,
      other: 0,
    }

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

return stats
  }, [validEarthquakeData])

return (
    <div className="relative h-[100dvh] w-full">
      {/* Leaflet Map */}
      <div className="absolute inset-0 z-0">
        <EarthquakeMap
          earthquakeData={validEarthquakeData}
          onEarthquakeSelect={setSelectedEarthquake}
          selectedEarthquake={selectedEarthquake}
          newEarthquakes={newEarthquakes}
          settings={mapSettings}
        />
      </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">Türkiye Deprem Haritası</h1>
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <button
              onClick={() => setShowSourceSelector(!showSourceSelector)}
              className="text-gray-400 text-xs mt-0.5 tracking-normal flex items-center hover:text-white"
            >
              <Database className="h-3 w-3 mr-1" />
              {getDataSourceName(filters.dataSource)}
            </button>

{/* Veri kaynağı seçici */}
            {showSourceSelector && (
              <div className="absolute top-8 left-0 bg-black/90 border border-white/20 rounded-md p-2 z-20">
                <div className="text-xs text-white font-medium mb-1">Veri Kaynağı Seçin</div>
                <div className="space-y-1">
                  <button
                    onClick={() => handleSourceChange("all")}
                    className={`w-full text-left text-xs px-2 py-1 rounded ${filters.dataSource === "all" ? "bg-white/20" : "hover:bg-white/10"}`}
                  >
                    Tüm Kaynaklar
                  </button>
                  <button
                    onClick={() => handleSourceChange("usgs")}
                    className={`w-full text-left text-xs px-2 py-1 rounded ${filters.dataSource === "usgs" ? "bg-white/20" : "hover:bg-white/10"}`}
                  >
                    USGS
                  </button>
                  <button
                    onClick={() => handleSourceChange("emsc")}
                    className={`w-full text-left text-xs px-2 py-1 rounded ${filters.dataSource === "emsc" ? "bg-white/20" : "hover:bg-white/10"}`}
                  >
                    EMSC
                  </button>
                  <button
                    onClick={() => handleSourceChange("kandilli")}
                    className={`w-full text-left text-xs px-2 py-1 rounded ${filters.dataSource === "kandilli" ? "bg-white/20" : "hover:bg-white/10"}`}
                  >
                    Kandilli
                  </button>
                  <button
                    onClick={() => handleSourceChange("afad")}
                    className={`w-full text-left text-xs px-2 py-1 rounded ${filters.dataSource === "afad" ? "bg-white/20" : "hover:bg-white/10"}`}
                  >
                    AFAD
                  </button>
                </div>
              </div>
            )}
          </div>

{lastUpdated && (
            <p className="text-gray-400 text-xs ml-2">Son güncelleme: {lastUpdated.toLocaleTimeString()}</p>
          )}
        </div>
      </div>

{/* Veri Kaynağı İstatistikleri */}
      {filters.dataSource === "all" && (
        <div className="absolute top-16 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-3 py-1.5 rounded-md z-10 text-xs flex items-center space-x-3">
          {sourceStats.usgs > 0 && (
            <div className="flex items-center">
              <div className="w-2 h-2 rounded-full bg-blue-500 mr-1"></div>
              <span>USGS: {sourceStats.usgs}</span>
            </div>
          )}
          {sourceStats.emsc > 0 && (
            <div className="flex items-center">
              <div className="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
              <span>EMSC: {sourceStats.emsc}</span>
            </div>
          )}
          {sourceStats.kandilli > 0 && (
            <div className="flex items-center">
              <div className="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
              <span>Kandilli: {sourceStats.kandilli}</span>
            </div>
          )}
          {sourceStats.afad > 0 && (
            <div className="flex items-center">
              <div className="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
              <span>AFAD: {sourceStats.afad}</span>
            </div>
          )}
        </div>
      )}

{/* Sol Panel - Kontrol Paneli */}
      <div className="absolute top-16 left-3 z-10 pointer-events-auto">
        <ControlPanel
          selectedRegion={filters.region}
          onRegionSelect={(region) => handleFilterChange({ region })}
          timeRange={{ start: filters.startDate, end: filters.endDate }}
          onTimeRangeChange={(range) => handleFilterChange({ startDate: range.start, endDate: range.end })}
          dataSource={filters.dataSource}
          onDataSourceChange={(source) => handleFilterChange({ dataSource: source })}
          onRefresh={loadEarthquakeData}
          isLoading={isLoading}
          lastUpdated={lastUpdated}
          minMagnitude={filters.minMagnitude}
          onMinMagnitudeChange={(value) => handleFilterChange({ minMagnitude: value })}
          maxMagnitude={filters.maxMagnitude}
          onMaxMagnitudeChange={(value) => handleFilterChange({ maxMagnitude: value })}
        />
      </div>

{/* Sağ Üst Panel - Deprem Detayları */}
      <div className="absolute top-16 right-3 z-10 pointer-events-auto">
        <EarthquakeInfoPanel data={selectedEarthquake} onClose={() => setSelectedEarthquake(null)} />
      </div>

{/* Sağ Alt Panel - Deprem Listesi */}
      <div className="absolute bottom-16 right-3 z-10 pointer-events-auto">
        <EarthquakeListPanel
          earthquakes={validEarthquakeData.slice(0, 50)}
          selectedEarthquake={selectedEarthquake}
          onEarthquakeSelect={setSelectedEarthquake}
          newEarthquakes={newEarthquakes}
        />
      </div>

{/* Yeni Deprem Bildirimi */}
      {newEarthquakes.length > 0 && newEarthquakes[0] && (
        <div className="absolute bottom-16 left-3 z-20 pointer-events-auto">
          <EarthquakeMinimap earthquake={newEarthquakes[0]} />
        </div>
      )}

{/* Ayarlar Butonu */}
      <Button
        onClick={() => setShowSettings(true)}
        className="absolute top-3 right-3 z-10 bg-black/70 hover:bg-black/90 text-white border border-white/20 h-8"
      >
        <Settings className="h-4 w-4 mr-1.5" />
        Harita Ayarları
      </Button>

{/* Ayarlar Modal */}
      <SettingsModal
        open={showSettings}
        onOpenChange={setShowSettings}
        settings={mapSettings}
        onSettingsChange={handleSettingsChange}
      />

{/* Hata Mesajı */}
      {error && (
        <div className="absolute top-16 left-1/2 transform -translate-x-1/2 bg-red-900/80 text-white px-4 py-2 rounded-md z-20 flex items-center">
          <AlertTriangle className="h-4 w-4 mr-2" />
          <span className="text-sm">{error}</span>
        </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>
          Deprem verileri yükleniyor...
        </div>
      )}

{/* Yenile Butonu */}
      <Button
        onClick={loadEarthquakeData}
        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>
    </div>
  )
}
[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 { Slider } from "@/components/ui/slider"
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
  minMagnitude: number
  onMinMagnitudeChange: (value: number) => void
  maxMagnitude: number
  onMaxMagnitudeChange: (value: number) => void
}

export default function ControlPanel({
  selectedRegion,
  onRegionSelect,
  timeRange,
  onTimeRangeChange,
  dataSource,
  onDataSourceChange,
  onRefresh,
  isLoading,
  lastUpdated,
  minMagnitude,
  onMinMagnitudeChange,
  maxMagnitude,
  onMaxMagnitudeChange,
}: ControlPanelProps) {
  const [openRegion, setOpenRegion] = useState(true)
  const [openTime, setOpenTime] = useState(false)
  const [openSource, setOpenSource] = useState(false)
  const [openMagnitude, setOpenMagnitude] = 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">
                <SelectItem value="all" className="hover:bg-white/10 focus:bg-white/10 text-xs">
                  Tüm Kaynaklar
                </SelectItem>
                {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>

{/* Büyüklük Aralığı - Katlanabilir */}
        <Collapsible open={openMagnitude} onOpenChange={setOpenMagnitude} className="space-y-1">
          <div className="flex items-center justify-between">
            <h4 className="text-xs font-medium text-white">Büyüklük Aralığı</h4>
            <CollapsibleTrigger className="p-0.5 hover:bg-white/10 rounded">
              {openMagnitude ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
            </CollapsibleTrigger>
          </div>
          <CollapsibleContent className="pt-1">
            <div className="space-y-4">
              {/* Minimum Büyüklük */}
              <div className="space-y-2">
                <label className="text-xs text-gray-300">Minimum Büyüklük: {minMagnitude.toFixed(1)}</label>
                <Slider
                  value={[minMagnitude]}
                  min={1}
                  max={7}
                  step={0.1}
                  onValueChange={(value) => onMinMagnitudeChange(value[0])}
                  className="py-2"
                />
                <div className="flex justify-between text-xs text-gray-400">
                  <span>M1.0</span>
                  <span>M7.0</span>
                </div>
              </div>

{/* Maksimum Büyüklük */}
              <div className="space-y-2">
                <label className="text-xs text-gray-300">Maksimum Büyüklük: {maxMagnitude.toFixed(1)}</label>
                <Slider
                  value={[maxMagnitude]}
                  min={1}
                  max={10}
                  step={0.1}
                  onValueChange={(value) => onMaxMagnitudeChange(value[0])}
                  className="py-2"
                />
                <div className="flex justify-between text-xs text-gray-400">
                  <span>M1.0</span>
                  <span>M10.0</span>
                </div>
              </div>
            </div>
          </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}
        >
          <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="components/earthquake-list-panel.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface EarthquakeListPanelProps {
  earthquakes: any[]
  selectedEarthquake: any
  onEarthquakeSelect: (earthquake: any) => void
  newEarthquakes: any[]
}

export default function EarthquakeListPanel({
  earthquakes,
  selectedEarthquake,
  onEarthquakeSelect,
  newEarthquakes,
}: EarthquakeListPanelProps) {
  // Deprem zamanını formatla
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleString("tr-TR", {
      day: "2-digit",
      month: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

// Deprem şiddetine göre renk belirle
  const getMagnitudeColor = (magnitude: number) => {
    if (magnitude >= 7.0) return "bg-red-500"
    if (magnitude >= 6.0) return "bg-orange-500"
    if (magnitude >= 5.0) return "bg-yellow-500"
    if (magnitude >= 4.0) return "bg-lime-500"
    return "bg-green-500"
  }

// Veri kaynağına göre renk belirle
  const getSourceColor = (source: string) => {
    if (!source) return "bg-gray-500"

switch (source.toLowerCase()) {
      case "usgs":
        return "bg-blue-500"
      case "emsc":
        return "bg-green-500"
      case "kandilli":
        return "bg-red-500"
      case "afad":
        return "bg-yellow-500"
      default:
        return "bg-gray-500"
    }
  }

return (
    <Card className="w-64 bg-black/80 border-white/20 text-white">
      <CardHeader className="pb-1 pt-2 px-3">
        <div className="flex justify-between items-center">
          <CardTitle className="text-sm">Son Depremler</CardTitle>
          <Badge className="text-[10px]">{earthquakes.length} deprem</Badge>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        <div className="max-h-[300px] overflow-y-auto">
          {earthquakes.map((quake) => {
            const isSelected = selectedEarthquake && selectedEarthquake.id === quake.id
            const isNew = newEarthquakes.some((e) => e.id === quake.id)

return (
              <div
                key={quake.id}
                className={`p-2 border-b border-white/10 cursor-pointer hover:bg-white/10 transition-colors ${
                  isSelected ? "bg-white/20" : ""
                } ${isNew ? "animate-pulse" : ""}`}
                onClick={() => onEarthquakeSelect(quake)}
              >
                <div className="flex justify-between items-center">
                  <div className="flex items-center">
                    <div className={`w-2 h-2 rounded-full mr-1.5 ${getMagnitudeColor(quake.magnitude)}`}></div>
                    <span className="text-xs font-medium">M{quake.magnitude.toFixed(1)}</span>
                  </div>
                  <span className="text-xs text-gray-400">{formatDate(quake.time)}</span>
                </div>
                <div className="text-xs text-gray-300 mt-0.5 truncate">{quake.region}</div>
                {quake.source && (
                  <div className="flex items-center mt-1">
                    <div className={`w-1.5 h-1.5 rounded-full mr-1 ${getSourceColor(quake.source)}`}></div>
                    <span className="text-[10px] text-gray-400">{quake.source}</span>
                  </div>
                )}
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/map-with-no-ssr.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { MapContainer, TileLayer, Popup, useMap, CircleMarker } from "react-leaflet"

// Deprem büyüklüğüne göre renk belirle
const getMagnitudeColor = (magnitude) => {
  if (magnitude >= 7.0) return "#ef4444" // red
  if (magnitude >= 6.0) return "#f97316" // orange
  if (magnitude >= 5.0) return "#facc15" // yellow
  if (magnitude >= 4.0) return "#84cc16" // lime
  return "#22c55e" // green
}

// Veri kaynağına göre renk belirle
const getSourceColor = (source) => {
  if (!source) return "#6b7280" // gray-500

switch (source.toLowerCase()) {
    case "usgs":
      return "#3b82f6" // blue-500
    case "emsc":
      return "#22c55e" // green-500
    case "kandilli":
      return "#ef4444" // red-500
    case "afad":
      return "#eab308" // yellow-500
    default:
      return "#6b7280" // gray-500
  }
}

// Deprem büyüklüğüne göre boyut belirle
const getMagnitudeRadius = (magnitude, pointSizeMultiplier = 1) => {
  return Math.max(5, magnitude * 2) * (pointSizeMultiplier || 1)
}

// Harita merkezini değiştiren bileşen
function ChangeView({ center, zoom }) {
  const map = useMap()
  map.setView(center, zoom)
  return null
}

// Seçili depreme odaklanan bileşen
function FocusOnEarthquake({ earthquake, zoom = 8 }) {
  const map = useMap()

useEffect(() => {
    if (earthquake && earthquake.location) {
      map.setView([earthquake.location.lat, earthquake.location.lng], zoom, { animate: true, duration: 1 })
    }
  }, [earthquake, map, zoom])

return null
}

export default function MapWithNoSSR({
  earthquakeData,
  onEarthquakeSelect,
  selectedEarthquake,
  newEarthquakes = [],
  settings = {},
}) {
  const [hoveredEarthquake, setHoveredEarthquake] = useState(null)

// Türkiye'nin merkezi
  const turkeyCenter = [39.0, 35.0]
  const defaultZoom = 6

// Harita stilleri
  const mapStyle = {
    width: "100%",
    height: "100%",
  }

useEffect(() => {
    import("leaflet/dist/leaflet.css")
  }, [])

return (
    <div className="w-full h-full relative">
      <MapContainer
        center={turkeyCenter}
        zoom={defaultZoom}
        style={mapStyle}
        zoomControl={false}
        attributionControl={false}
      >
        {/* Harita katmanı */}
        <TileLayer
          url={
            settings.darkMode
              ? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
              : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          }
        />

{/* Deprem noktaları */}
        {earthquakeData.map((quake) => {
          if (!quake || !quake.location || isNaN(quake.location.lat) || isNaN(quake.location.lng)) return null

const isSelected = selectedEarthquake && selectedEarthquake.id === quake.id
          const isNew = newEarthquakes.some((e) => e.id === quake.id)
          const isHovered = hoveredEarthquake && hoveredEarthquake.id === quake.id

const radius = getMagnitudeRadius(quake.magnitude, settings.pointSize)
          const color = getMagnitudeColor(quake.magnitude)
          const sourceColor = getSourceColor(quake.source)

return (
            <CircleMarker
              key={quake.id}
              center={[quake.location.lat, quake.location.lng]}
              radius={radius}
              pathOptions={{
                fillColor: isSelected || isNew ? "#ffffff" : color,
                fillOpacity: 0.8,
                weight: isSelected || isHovered ? 3 : 1,
                color: isSelected || isHovered ? "#ffffff" : sourceColor, // Veri kaynağına göre kenar rengi
              }}
              eventHandlers={{
                click: () => onEarthquakeSelect(quake),
                mouseover: () => setHoveredEarthquake(quake),
                mouseout: () => setHoveredEarthquake(null),
              }}
            >
              {/* Deprem bilgisi popup */}
              {settings.showLabels && (isSelected || isHovered || quake.magnitude >= 5.0) && (
                <Popup className="earthquake-popup" offset={[0, -radius]} closeButton={false} autoPan={false}>
                  <div>
                    <div className="font-medium">M{quake.magnitude.toFixed(1)}</div>
                    <div className="text-xs">{quake.region}</div>
                    <div className="text-xs">Derinlik: {quake.depth} km</div>
                    <div className="text-xs">
                      {new Date(quake.time).toLocaleString("tr-TR", {
                        day: "2-digit",
                        month: "2-digit",
                        year: "numeric",
                        hour: "2-digit",
                        minute: "2-digit",
                      })}
                    </div>
                    {quake.source && (
                      <div className="text-xs mt-1">
                        <span className="font-medium">Kaynak:</span> {quake.source}
                      </div>
                    )}
                  </div>
                </Popup>
              )}
            </CircleMarker>
          )
        })}

{/* Seçili depreme odaklan */}
        {selectedEarthquake && <FocusOnEarthquake earthquake={selectedEarthquake} />}
      </MapContainer>

{/* Harita kontrolleri */}
      <div className="absolute bottom-4 left-4 flex flex-col space-y-2 z-[1000]">
        <button
          onClick={() => {
            const map = document.querySelector(".leaflet-container")?._leaflet_map
            if (map) map.zoomIn()
          }}
          className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90"
        >
          +
        </button>
        <button
          onClick={() => {
            const map = document.querySelector(".leaflet-container")?._leaflet_map
            if (map) map.zoomOut()
          }}
          className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90"
        >
          -
        </button>
        <button
          onClick={() => {
            const map = document.querySelector(".leaflet-container")?._leaflet_map
            if (map) map.setView(turkeyCenter, defaultZoom, { animate: true, duration: 0.5 })
          }}
          className="bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center hover:bg-black/90 text-xs"
        >
          R
        </button>
      </div>

{/* Hover bilgisi */}
      {hoveredEarthquake && (
        <div className="absolute top-4 left-1/2 transform -translate-x-1/2 bg-black/80 text-white px-3 py-2 rounded-md text-sm pointer-events-none z-[1000]">
          <div className="font-medium">M{hoveredEarthquake.magnitude.toFixed(1)} Deprem</div>
          <div className="text-xs">{hoveredEarthquake.region}</div>
          <div className="text-xs">Derinlik: {hoveredEarthquake.depth} km</div>
          <div className="text-xs">
            {new Date(hoveredEarthquake.time).toLocaleString("tr-TR", {
              day: "2-digit",
              month: "2-digit",
              year: "numeric",
              hour: "2-digit",
              minute: "2-digit",
            })}
          </div>
          {hoveredEarthquake.source && (
            <div className="text-xs mt-1">
              <span className="font-medium">Kaynak:</span> {hoveredEarthquake.source}
            </div>
          )}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="web/app/api/proxy-emsc/route.ts" isMerged="true"
import { NextResponse } from "next/server"

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

// EMSC API URL'si - format=json parametresi önemli
    const emscUrl = `https://www.seismicportal.eu/fdsnws/event/1/query?format=json&limit=${limit}&minmag=${minmag}&maxmag=${maxmag}&days=${days}`

console.log("EMSC API request:", emscUrl)

// EMSC API'sine istek - User-Agent ve Accept header'ları önemli
    const response = await fetch(emscUrl, {
      headers: {
        "User-Agent": "EarthquakeMonitor/2.0 (https://earthquake-monitor.vercel.app)",
        Accept: "application/json",
        Origin: "https://earthquake-monitor.vercel.app",
      },
      cache: "no-store",
      next: { revalidate: 300 }, // 5 dakika önbellek
    })

if (!response.ok) {
      console.error(`EMSC API error: ${response.status}`)

// Daha detaylı hata yanıtı
      const errorText = await response.text()

// 400 hatası için alternatif endpoint dene
      if (response.status === 400) {
        console.log("Trying alternative EMSC endpoint...")
        return await fetchFromAlternativeEndpoint(limit, minmag, maxmag, days)
      }

return NextResponse.json(
        {
          error: `EMSC API hatası: ${response.status}`,
          details: errorText,
        },
        { status: response.status },
      )
    }

// JSON yanıtını parse et
    try {
      const data = await response.json()

// Alternatif EMSC endpoint'i için fonksiyon
async function fetchFromAlternativeEndpoint(limit: string, minmag: string, maxmag: string, days: string) {
  try {
    // Alternatif EMSC API URL'si - CSV formatı daha güvenilir olabilir
    const altEmscUrl = `https://www.emsc-csem.org/service/rss/rss.php?typ=emsc&magmin=${minmag}&magmax=${maxmag}`

console.log("Trying alternative EMSC endpoint:", altEmscUrl)

const response = await fetch(altEmscUrl, {
      headers: {
        "User-Agent": "EarthquakeMonitor/2.0 (https://earthquake-monitor.vercel.app)",
        Accept: "application/xml, text/xml",
        Origin: "https://earthquake-monitor.vercel.app",
      },
      cache: "no-store",
    })

if (!response.ok) {
      throw new Error(`Alternative EMSC endpoint error: ${response.status}`)
    }

const xmlText = await response.text()

// XML'i JSON'a dönüştür (basit bir parser)
    const features = parseEmscRss(xmlText)

return NextResponse.json(
      {
        type: "FeatureCollection",
        metadata: {
          generated: Date.now(),
          title: "EMSC Earthquakes (Alternative)",
          status: 200,
          api: "1.0.0",
          count: features.length,
        },
        features: features,
      },
      {
        headers: {
          "Cache-Control": "max-age=300", // 5 dakika önbellek
        },
      },
    )
  } catch (error) {
    console.error("Alternative EMSC endpoint error:", error)

// RSS XML'i parse etme fonksiyonu
function parseEmscRss(xmlText: string) {
  const features = []

// Basit bir XML parser - gerçek uygulamada daha sağlam bir XML parser kullanılmalı
  const items = xmlText.match(/<item>([\s\S]*?)<\/item>/g) || []

items.forEach((item, index) => {
    try {
      // Başlık ve açıklama
      const titleMatch = item.match(/<title>(.*?)<\/title>/)
      const descMatch = item.match(/<description>(.*?)<\/description>/)
      const linkMatch = item.match(/<link>(.*?)<\/link>/)
      const pubDateMatch = item.match(/<pubDate>(.*?)<\/pubDate>/)

if (titleMatch && descMatch) {
        const title = titleMatch[1]
        const description = descMatch[1]

// Büyüklük ve bölge bilgisini başlıktan çıkar
        const magMatch = title.match(/M\s*(\d+\.\d+)/)
        const magnitude = magMatch ? Number.parseFloat(magMatch[1]) : 0

// Koordinatları açıklamadan çıkar
        const coordsMatch = description.match(/(\d+\.\d+)\s*[NS][\s,]+(\d+\.\d+)\s*[EW]/)
        let lat = 0,
          lng = 0

if (coordsMatch) {
          lat = Number.parseFloat(coordsMatch[1])
          lng = Number.parseFloat(coordsMatch[2])

// Güney ve batı için negatif değer
          if (description.includes("S")) lat = -lat
          if (description.includes("W")) lng = -lng
        }

// Derinlik bilgisini açıklamadan çıkar
        const depthMatch = description.match(/(\d+)\s*km/)
        const depth = depthMatch ? Number.parseInt(depthMatch[1]) : 10

// Zaman bilgisini pubDate'den çıkar
        const time = pubDateMatch ? new Date(pubDateMatch[1]).getTime() : Date.now()

// Bölge bilgisini başlıktan çıkar
        const region = title.replace(/M\s*\d+\.\d+\s*-\s*/, "").trim()

// ID oluştur
        const id = linkMatch ? linkMatch[1].split("=").pop() : `emsc-alt-${index}-${time}`

features.push({
          type: "Feature",
          id: id,
          properties: {
            mag: magnitude,
            place: region,
            time: time,
            url: linkMatch ? linkMatch[1] : "",
            sources: "emsc",
            flynn_region: region,
          },
          geometry: {
            type: "Point",
            coordinates: [lng, lat, depth],
          },
        })
      }
    } catch (err) {
      console.error("Error parsing RSS item:", err)
    }
  })

return features
}
[V0_FILE]typescriptreact:file="web/components/seismic-wave-animation.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { useFrame } from "@react-three/fiber"
import { useThree } from "@react-three/fiber"
import * as THREE from "three"
import { useSpring, animated } from "@react-spring/three"

interface SeismicWaveProps {
  position: [number, number, number]
  magnitude: number
  time: number
  color?: string
  duration?: number
  maxRadius?: number
}

export function SeismicWave({
  position,
  magnitude,
  time,
  color = "#ffffff",
  duration = 3,
  maxRadius = 2,
}: SeismicWaveProps) {
  const meshRef = useRef<THREE.Mesh>(null)
  const materialRef = useRef<THREE.ShaderMaterial>(null)
  const startTime = useRef(Date.now())
  const [active, setActive] = useState(true)

// Büyüklüğe göre dalga parametrelerini ayarla
  const waveIntensity = Math.min(1.0, magnitude / 8.0)
  const waveSpeed = 0.5 + waveIntensity * 1.5
  const waveCount = Math.max(1, Math.floor(magnitude / 2))
  const actualMaxRadius = maxRadius * (0.5 + waveIntensity * 0.5)

// Shader material için vertex shader
  const vertexShader = `
    varying vec2 vUv;
    varying vec3 vPosition;
    
    void main() {
      vUv = uv;
      vPosition = position;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `

// Shader material için fragment shader
  const fragmentShader = `
    uniform float time;
    uniform float intensity;
    uniform float waveCount;
    uniform vec3 color;
    varying vec2 vUv;
    varying vec3 vPosition;
    
    void main() {
      // Merkeze olan uzaklık
      float dist = length(vPosition.xy);
      
      // Zaman ve mesafeye bağlı dalga efekti
      float wave = sin(dist * waveCount - time) * 0.5 + 0.5;
      
      // Kenarları yumuşat
      float alpha = smoothstep(0.0, 0.1, 1.0 - dist) * smoothstep(1.0, 0.9, dist);
      
      // Dalga yoğunluğunu ayarla
      alpha *= wave * intensity;
      
      gl_FragColor = vec4(color, alpha);
    }
  `

// Animasyon için spring
  const { scale } = useSpring({
    from: { scale: 0.1 },
    to: { scale: actualMaxRadius },
    config: { duration: duration * 1000 },
    onRest: () => setActive(false),
  })

// Her frame'de shader'ı güncelle
  useFrame(() => {
    if (materialRef.current && active) {
      const elapsedTime = (Date.now() - startTime.current) / 1000
      materialRef.current.uniforms.time.value = elapsedTime * waveSpeed
    }
  })

// Deprem zamanına göre animasyonu başlat
  useEffect(() => {
    startTime.current = Date.now()
    setActive(true)
  }, [time])

if (!active) return null

return (
    <animated.mesh ref={meshRef} position={position} scale={scale} rotation={[-Math.PI / 2, 0, 0]}>
      <planeGeometry args={[1, 1, 32, 32]} />
      <shaderMaterial
        ref={materialRef}
        vertexShader={vertexShader}
        fragmentShader={fragmentShader}
        transparent={true}
        uniforms={{
          time: { value: 0 },
          intensity: { value: waveIntensity },
          waveCount: { value: waveCount },
          color: { value: new THREE.Color(color) },
        }}
        side={THREE.DoubleSide}
        depthWrite={false}
      />
    </animated.mesh>
  )
}

interface SeismicWaveControllerProps {
  earthquakes: any[]
  globeRadius?: number
  maxWaves?: number
}

export default function SeismicWaveController({
  earthquakes,
  globeRadius = 1,
  maxWaves = 5,
}: SeismicWaveControllerProps) {
  const [activeWaves, setActiveWaves] = useState<any[]>([])
  const { scene } = useThree()

// Lat/Lng'yi 3D pozisyona dönüştür
  const latLngToPosition = (lat: number, lng: number, radius: number): [number, number, number] => {
    const phi = (90 - lat) * (Math.PI / 180)
    const theta = (lng + 180) * (Math.PI / 180)
    const x = -radius * Math.sin(phi) * Math.cos(theta)
    const z = radius * Math.sin(phi) * Math.sin(theta)
    const y = radius * Math.cos(phi)
    return [x, y, z]
  }

// Yeni depremler için dalga oluştur
  useEffect(() => {
    if (!earthquakes || earthquakes.length === 0) return

// Son maxWaves kadar depremi al
    const recentEarthquakes = [...earthquakes]
      .sort((a, b) => {
        return new Date(b.time).getTime() - new Date(a.time).getTime()
      })
      .slice(0, maxWaves)

// Aktif dalgaları güncelle
    setActiveWaves(
      recentEarthquakes.map((quake) => ({
        id: quake.id,
        position: latLngToPosition(quake.location.lat, quake.location.lng, globeRadius * 1.01),
        magnitude: quake.magnitude,
        time: new Date(quake.time).getTime(),
        color: getMagnitudeColor(quake.magnitude),
      })),
    )
  }, [earthquakes, globeRadius, maxWaves])

// Büyüklüğe göre renk belirle
  const getMagnitudeColor = (magnitude: number): string => {
    if (magnitude >= 7.0) return "#ef4444" // red
    if (magnitude >= 6.0) return "#f97316" // orange
    if (magnitude >= 5.0) return "#facc15" // yellow
    if (magnitude >= 4.0) return "#84cc16" // lime
    return "#22c55e" // green
  }

return (
    <>
      {activeWaves.map((wave) => (
        <SeismicWave
          key={wave.id}
          position={wave.position}
          magnitude={wave.magnitude}
          time={wave.time}
          color={wave.color}
          maxRadius={globeRadius * 0.5}
        />
      ))}
    </>
  )
}
[V0_FILE]typescriptreact:file="web/components/globe-model.tsx" isMerged="true"
"use client"

import { useRef, useState, useMemo } from "react"
import { Canvas, useFrame } from "@react-three/fiber"
import { OrbitControls, Stars, useTexture } from "@react-three/drei"
import SeismicWaveController from "./seismic-wave-animation"

// Deprem noktası bileşeni
function EarthquakePoint({ position, magnitude, isHighlighted, isSelected, onClick, settings }) {
  const meshRef = useRef()
  const [hovered, setHovered] = useState(false)

// Büyüklüğe göre renk belirle
  const getColor = (magnitude) => {
    if (magnitude >= 7.0) return "#ef4444" // red
    if (magnitude >= 6.0) return "#f97316" // orange
    if (magnitude >= 5.0) return "#facc15" // yellow
    if (magnitude >= 4.0) return "#84cc16" // lime
    return "#22c55e" // green
  }

// Büyüklüğe göre boyut belirle
  const getSize = (magnitude) => {
    return Math.max(0.01, magnitude * 0.005) * (settings?.pointSize || 1)
  }

const color = getColor(magnitude)
  const size = getSize(magnitude)

// Pulse efekti için animasyon
  useFrame((state) => {
    if (meshRef.current && (isHighlighted || isSelected) && settings?.pulseEffect) {
      const time = state.clock.getElapsedTime()
      const pulse = 1 + Math.sin(time * 5) * 0.2
      meshRef.current.scale.set(size * pulse, size * pulse, size * pulse)
    }
  })

return (
    <mesh
      ref={meshRef}
      position={position}
      scale={[size, size, size]}
      onClick={(e) => {
        e.stopPropagation()
        onClick()
      }}
      onPointerOver={(e) => {
        e.stopPropagation()
        setHovered(true)
      }}
      onPointerOut={() => setHovered(false)}
    >
      <sphereGeometry args={[1, 16, 16]} />
      <meshStandardMaterial
        color={isSelected || isHighlighted ? "#ffffff" : color}
        emissive={color}
        emissiveIntensity={isSelected || isHighlighted || hovered ? 2 : 0.5}
      />
    </mesh>
  )
}

// Dünya modeli bileşeni
function Earth({ earthquakeData, onEarthquakeSelect, highlightedEarthquakes, settings }) {
  const earthRef = useRef()
  const cloudsRef = useRef()
  const groupRef = useRef()

// Dünya dokuları
  const textures = useTexture({
    map: `/assets/textures/earth_${settings?.activeLayer || "standard"}.jpg`,
    normalMap: "/assets/textures/earth_normal.jpg",
    specularMap: "/assets/textures/earth_specular.jpg",
    cloudsMap: "/assets/textures/earth_clouds.png",
  })

// Dünya rotasyonu
  useFrame((state) => {
    if (earthRef.current && settings?.globeRotation) {
      earthRef.current.rotation.y += 0.001 * (settings?.rotationSpeed || 1)
    }
    if (cloudsRef.current) {
      cloudsRef.current.rotation.y += 0.0005 * (settings?.rotationSpeed || 1)
    }
  })

// Lat/Lng'yi 3D pozisyona dönüştür
  const latLngToPosition = (lat, lng, radius = 1.01) => {
    const phi = (90 - lat) * (Math.PI / 180)
    const theta = (lng + 180) * (Math.PI / 180)
    const x = -radius * Math.sin(phi) * Math.cos(theta)
    const z = radius * Math.sin(phi) * Math.sin(theta)
    const y = radius * Math.cos(phi)
    return [x, y, z]
  }

// Deprem noktalarını oluştur
  const earthquakePoints = useMemo(() => {
    return earthquakeData
      .filter((quake) => quake && quake.location && !isNaN(quake.location.lat) && !isNaN(quake.location.lng))
      .map((quake) => {
        const position = latLngToPosition(quake.location.lat, quake.location.lng)
        const isHighlighted = highlightedEarthquakes.some((e) => e.id === quake.id)

return {
          id: quake.id,
          position,
          magnitude: quake.magnitude,
          isHighlighted,
          quake,
        }
      })
  }, [earthquakeData, highlightedEarthquakes])

// Seçili deprem
  const [selectedEarthquake, setSelectedEarthquake] = useState(null)

// Deprem seçildiğinde
  const handleEarthquakeSelect = (quake) => {
    setSelectedEarthquake(quake.id)
    if (onEarthquakeSelect) {
      onEarthquakeSelect(quake.quake)
    }
  }

return (
    <group ref={groupRef}>
      {/* Dünya küresi */}
      <mesh ref={earthRef}>
        <sphereGeometry args={[1, 64, 64]} />
        <meshPhongMaterial
          map={textures.map}
          normalMap={textures.normalMap}
          specularMap={textures.specularMap}
          shininess={5}
          opacity={settings?.globeOpacity || 1}
          transparent={settings?.globeOpacity < 1}
        />
      </mesh>

{/* Bulut katmanı */}
      <mesh ref={cloudsRef} scale={1.02}>
        <sphereGeometry args={[1, 32, 32]} />
        <meshPhongMaterial map={textures.cloudsMap} transparent={true} opacity={0.4} depthWrite={false} />
      </mesh>

{/* Deprem noktaları */}
      {earthquakePoints.map((point) => (
        <EarthquakePoint
          key={point.id}
          position={point.position}
          magnitude={point.magnitude}
          isHighlighted={point.isHighlighted}
          isSelected={selectedEarthquake === point.id}
          onClick={() => handleEarthquakeSelect(point)}
          settings={settings}
        />
      ))}

{/* Sismik dalga animasyonları */}
      <SeismicWaveController
        earthquakes={highlightedEarthquakes.length > 0 ? highlightedEarthquakes : earthquakeData.slice(0, 5)}
        globeRadius={1}
        maxWaves={5}
      />
    </group>
  )
}

// Ana bileşen
export default function GlobeModel({
  earthquakeData,
  onEarthquakeSelect,
  isLoading,
  highlightedEarthquakes = [],
  settings = {},
}) {
  return (
    <Canvas camera={{ position: [0, 0, 2.5], fov: 45 }}>
      <ambientLight intensity={0.1} />
      <pointLight position={[10, 10, 10]} intensity={1} />

{/* Yıldızlar */}
      {settings.showStars && (
        <Stars
          radius={100}
          depth={50}
          count={settings.starCount || 5000}
          factor={4}
          saturation={0.5}
          fade
          speed={settings.starSpeed || 1}
        />
      )}

{/* Dünya modeli */}
      <Earth
        earthquakeData={earthquakeData}
        onEarthquakeSelect={onEarthquakeSelect}
        highlightedEarthquakes={highlightedEarthquakes}
        settings={settings}
      />

{/* Kamera kontrolleri */}
      <OrbitControls
        enableZoom={settings.enableZoom !== false}
        enablePan={settings.enablePan === true}
        enableRotate={settings.enableRotate !== false}
        autoRotate={settings.autoRotate === true}
        autoRotateSpeed={settings.autoRotateSpeed || 0.5}
        minDistance={settings.minZoom || 1.5}
        maxDistance={settings.maxZoom || 10}
      />
    </Canvas>
  )
}
[V0_FILE]typescriptreact:file="web/components/earthquake-visualization.tsx" isMerged="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, Database } from "lucide-react"
import GlobeModel from "./globe-model"
import EarthquakeInfoPanel from "./earthquake-info-panel"
import RiskAnalysis from "./risk-analysis"
import SettingsModal from "./settings-modal"
import { fetchAllEarthquakeData } from "@/lib/turkey-earthquake-service"

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

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

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

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

const duration = endTime - startTime

setBrowserPerformance(detectPerformance())
  }, [])

// Deprem noktaları ayarları
    pointSize: 1,
    showLabels: true,
    pulseEffect: true,

// Yıldızlar ayarları
    showStars: true,
    starCount: 5000,
    starSpeed: 1,

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

// Performans modu
    lowPerformanceMode: false,

// Sismik dalga ayarları
    showSeismicWaves: true,
    waveIntensity: 1.0,
    waveColor: "auto", // auto, white, red, etc.
  })

// 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.showSeismicWaves = false
      } else if (browserPerformance === "medium") {
        performanceSettings.starCount = 3000
        performanceSettings.waveIntensity = 0.7
      }

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

// Deprem verilerini yükleme fonksiyonu - optimize edildi
  const loadEarthquakeData = useCallback(async () => {
    try {
      setIsLoading(true)
      setError(null)

let quakeData = []

// Veri kaynağına göre veri yükleme
      if (dataSource === "all") {
        // Tüm kaynaklardan veri al
        quakeData = await fetchAllEarthquakeData(
          {
            start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), // Son 30 gün
            end: new Date(),
          },
          null, // Tüm bölgeler
          1.0, // Min büyüklük
          10.0, // Max büyüklük
        )
      } else if (dataSource === "usgs") {
        // Sadece USGS'den veri al
        quakeData = await fetchRealtimeUsgsData(1.0)
      } else {
        // Diğer kaynaklar için
        quakeData = await fetchAllEarthquakeData(
          {
            start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
            end: new Date(),
          },
          null,
          1.0,
          10.0,
        )
      }

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

// 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())

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

// Polling mekanizması kur - her 20 saniyede bir yenile
    pollingIntervalRef.current = setInterval(
      () => {
        loadEarthquakeData()
      },
      20 * 1000, // 20 saniye
    )

return () => {
      if (pollingIntervalRef.current) {
        clearInterval(pollingIntervalRef.current)
      }
    }
  }, [loadEarthquakeData])

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

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

// Veri kaynağı seçimi
  const handleSourceChange = (source) => {
    setDataSource(source)
    setShowSourceSelector(false)
  }

// Veri kaynağı adını göster
  const getDataSourceName = (source) => {
    switch (source) {
      case "usgs":
        return "USGS"
      case "emsc":
        return "EMSC"
      case "all":
        return "Tüm Kaynaklar"
      default:
        return source
    }
  }

// Veri kaynağı istatistikleri
  const sourceStats = useMemo(() => {
    const stats = {
      usgs: 0,
      emsc: 0,
      other: 0,
    }

filteredEarthquakeData.forEach((quake) => {
      if (!quake.source) {
        stats.other++
      } else if (quake.source.toLowerCase() === "usgs") {
        stats.usgs++
      } else if (quake.source.toLowerCase() === "emsc") {
        stats.emsc++
      } else {
        stats.other++
      }
    })

return stats
  }, [filteredEarthquakeData])

{/* Ü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">
          <div className="flex items-center">
            <button
              onClick={() => setShowSourceSelector(!showSourceSelector)}
              className="text-gray-400 text-xs mt-0.5 tracking-normal flex items-center hover:text-white"
            >
              <Database className="h-3 w-3 mr-1" />
              {getDataSourceName(dataSource)}
            </button>

{lastUpdated && (
            <p className="text-gray-400 text-xs ml-2">Son güncelleme: {lastUpdated.toLocaleTimeString()}</p>
          )}
        </div>
      </div>

{/* Veri Kaynağı İstatistikleri */}
      {dataSource === "all" && (
        <div className="absolute top-16 left-1/2 transform -translate-x-1/2 bg-black/70 text-white px-3 py-1.5 rounded-md z-10 text-xs flex items-center space-x-3">
          {sourceStats.usgs > 0 && (
            <div className="flex items-center">
              <div className="w-2 h-2 rounded-full bg-blue-500 mr-1"></div>
              <span>USGS: {sourceStats.usgs}</span>
            </div>
          )}
          {sourceStats.emsc > 0 && (
            <div className="flex items-center">
              <div className="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
              <span>EMSC: {sourceStats.emsc}</span>
            </div>
          )}
          {sourceStats.other > 0 && (
            <div className="flex items-center">
              <div className="w-2 h-2 rounded-full bg-gray-500 mr-1"></div>
              <span>Diğer: {sourceStats.other}</span>
            </div>
          )}
        </div>
      )}

{/* Harita Paneli (Deprem Listesi) - Sol alt kısımda - kaydırma çubuğu olmadan */}
        <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-hidden space-y-1.5">
            {displayedEarthquakes.map((quake, index) => (
              <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)}
              >
                <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)}
                    {quake.source && <span className="ml-1 text-xs text-gray-400">({quake.source})</span>}
                  </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>
            ))}
            {/* Liste sonuna referans */}
            <div ref={listEndRef} />
          </div>
        </div>
      </div>

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

{/* Yenile Butonu */}
      <Button
        onClick={loadEarthquakeData}
        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>
    </div>
  )
}
[V0_FILE]typescriptreact:file="web/components/settings-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RefreshCw, Globe, Cpu, Waves, Camera } from "lucide-react"
import AIAnalysisPanel from "./ai-analysis-panel"

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

const handleSettingChange = (key, value) => {
    onSettingsChange({ ...settings, [key]: value })
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Gelişmiş Ayarlar</DialogTitle>
          <DialogDescription>Deprem görselleştirme ve analiz ayarlarını özelleştirin.</DialogDescription>
        </DialogHeader>

<Tabs value={activeTab} onValueChange={setActiveTab} className="mt-4">
          <TabsList className="grid grid-cols-4 mb-4">
            <TabsTrigger value="globe" className="flex items-center">
              <Globe className="h-4 w-4 mr-2" />
              Dünya Modeli
            </TabsTrigger>
            <TabsTrigger value="earthquakes" className="flex items-center">
              <Waves className="h-4 w-4 mr-2" />
              Deprem Efektleri
            </TabsTrigger>
            <TabsTrigger value="camera" className="flex items-center">
              <Camera className="h-4 w-4 mr-2" />
              Kamera ve Görünüm
            </TabsTrigger>
            <TabsTrigger value="ai" className="flex items-center">
              <Cpu className="h-4 w-4 mr-2" />
              AI Analiz
            </TabsTrigger>
          </TabsList>

{/* Dünya Modeli Ayarları */}
          <TabsContent value="globe" className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-4">
                <div>
                  <div className="flex justify-between items-center mb-2">
                    <Label htmlFor="globe-rotation">Dünya Rotasyonu</Label>
                    <Switch
                      id="globe-rotation"
                      checked={settings.globeRotation}
                      onCheckedChange={(checked) => handleSettingChange("globeRotation", checked)}
                    />
                  </div>
                  {settings.globeRotation && (
                    <div className="mt-2">
                      <Label htmlFor="rotation-speed" className="text-xs text-muted-foreground">
                        Rotasyon Hızı: {settings.rotationSpeed}x
                      </Label>
                      <Slider
                        id="rotation-speed"
                        min={0.1}
                        max={3}
                        step={0.1}
                        value={[settings.rotationSpeed]}
                        onValueChange={(value) => handleSettingChange("rotationSpeed", value[0])}
                        className="mt-1"
                      />
                    </div>
                  )}
                </div>

<div>
                  <Label htmlFor="globe-opacity" className="text-xs text-muted-foreground">
                    Dünya Opaklığı: {settings.globeOpacity * 100}%
                  </Label>
                  <Slider
                    id="globe-opacity"
                    min={0.3}
                    max={1}
                    step={0.05}
                    value={[settings.globeOpacity]}
                    onValueChange={(value) => handleSettingChange("globeOpacity", value[0])}
                    className="mt-1"
                  />
                </div>

<div>
                  <Label htmlFor="globe-layer">Dünya Katmanı</Label>
                  <Select
                    value={settings.activeLayer}
                    onValueChange={(value) => handleSettingChange("activeLayer", value)}
                  >
                    <SelectTrigger id="globe-layer" className="mt-1">
                      <SelectValue placeholder="Katman seçin" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="standard">Standart</SelectItem>
                      <SelectItem value="satellite">Uydu</SelectItem>
                      <SelectItem value="tectonic">Tektonik Plakalar</SelectItem>
                      <SelectItem value="heatmap">Isı Haritası</SelectItem>
                      <SelectItem value="political">Politik</SelectItem>
                      <SelectItem value="night">Gece</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-4">
                <div>
                  <div className="flex justify-between items-center mb-2">
                    <Label htmlFor="show-stars">Yıldızlar</Label>
                    <Switch
                      id="show-stars"
                      checked={settings.showStars}
                      onCheckedChange={(checked) => handleSettingChange("showStars", checked)}
                    />
                  </div>
                  {settings.showStars && (
                    <>
                      <div className="mt-2">
                        <Label htmlFor="star-count" className="text-xs text-muted-foreground">
                          Yıldız Sayısı: {settings.starCount}
                        </Label>
                        <Slider
                          id="star-count"
                          min={1000}
                          max={10000}
                          step={500}
                          value={[settings.starCount]}
                          onValueChange={(value) => handleSettingChange("starCount", value[0])}
                          className="mt-1"
                        />
                      </div>
                      <div className="mt-2">
                        <Label htmlFor="star-speed" className="text-xs text-muted-foreground">
                          Yıldız Hızı: {settings.starSpeed}x
                        </Label>
                        <Slider
                          id="star-speed"
                          min={0.1}
                          max={3}
                          step={0.1}
                          value={[settings.starSpeed]}
                          onValueChange={(value) => handleSettingChange("starSpeed", value[0])}
                          className="mt-1"
                        />
                      </div>
                    </>
                  )}
                </div>

<div className="flex justify-between items-center">
                  <Label htmlFor="low-performance">Düşük Performans Modu</Label>
                  <Switch
                    id="low-performance"
                    checked={settings.lowPerformanceMode}
                    onCheckedChange={(checked) => handleSettingChange("lowPerformanceMode", checked)}
                  />
                </div>
                <div className="text-xs text-muted-foreground mt-1">
                  Düşük performans modu, daha az deprem noktası gösterir ve bazı görsel efektleri devre dışı bırakır.
                </div>
              </div>
            </div>
          </TabsContent>

{/* Deprem Efektleri Ayarları */}
          <TabsContent value="earthquakes" className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-4">
                <div>
                  <Label htmlFor="point-size" className="text-xs text-muted-foreground">
                    Deprem Noktası Boyutu: {settings.pointSize}x
                  </Label>
                  <Slider
                    id="point-size"
                    min={0.5}
                    max={2}
                    step={0.1}
                    value={[settings.pointSize]}
                    onValueChange={(value) => handleSettingChange("pointSize", value[0])}
                    className="mt-1"
                  />
                </div>

<div className="flex justify-between items-center">
                  <Label htmlFor="show-labels">Deprem Etiketleri</Label>
                  <Switch
                    id="show-labels"
                    checked={settings.showLabels}
                    onCheckedChange={(checked) => handleSettingChange("showLabels", checked)}
                  />
                </div>

<div className="flex justify-between items-center">
                  <Label htmlFor="pulse-effect">Nabız Efekti</Label>
                  <Switch
                    id="pulse-effect"
                    checked={settings.pulseEffect}
                    onCheckedChange={(checked) => handleSettingChange("pulseEffect", checked)}
                  />
                </div>
              </div>

<div className="space-y-4">
                <div className="flex justify-between items-center">
                  <Label htmlFor="show-seismic-waves">Sismik Dalga Animasyonları</Label>
                  <Switch
                    id="show-seismic-waves"
                    checked={settings.showSeismicWaves}
                    onCheckedChange={(checked) => handleSettingChange("showSeismicWaves", checked)}
                  />
                </div>

{settings.showSeismicWaves && (
                  <>
                    <div className="mt-2">
                      <Label htmlFor="wave-intensity" className="text-xs text-muted-foreground">
                        Dalga Yoğunluğu: {settings.waveIntensity}x
                      </Label>
                      <Slider
                        id="wave-intensity"
                        min={0.1}
                        max={2}
                        step={0.1}
                        value={[settings.waveIntensity]}
                        onValueChange={(value) => handleSettingChange("waveIntensity", value[0])}
                        className="mt-1"
                      />
                    </div>

<div>
                      <Label htmlFor="wave-color">Dalga Rengi</Label>
                      <Select
                        value={settings.waveColor}
                        onValueChange={(value) => handleSettingChange("waveColor", value)}
                      >
                        <SelectTrigger id="wave-color" className="mt-1">
                          <SelectValue placeholder="Renk seçin" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="auto">Otomatik (Büyüklüğe göre)</SelectItem>
                          <SelectItem value="white">Beyaz</SelectItem>
                          <SelectItem value="red">Kırmızı</SelectItem>
                          <SelectItem value="orange">Turuncu</SelectItem>
                          <SelectItem value="yellow">Sarı</SelectItem>
                          <SelectItem value="green">Yeşil</SelectItem>
                          <SelectItem value="blue">Mavi</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </>
                )}
              </div>
            </div>
          </TabsContent>

{/* Kamera Ayarları */}
          <TabsContent value="camera" className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <Label htmlFor="enable-zoom">Yakınlaştırma</Label>
                  <Switch
                    id="enable-zoom"
                    checked={settings.enableZoom}
                    onCheckedChange={(checked) => handleSettingChange("enableZoom", checked)}
                  />
                </div>

<div className="flex justify-between items-center">
                  <Label htmlFor="enable-pan">Kaydırma</Label>
                  <Switch
                    id="enable-pan"
                    checked={settings.enablePan}
                    onCheckedChange={(checked) => handleSettingChange("enablePan", checked)}
                  />
                </div>

<div className="flex justify-between items-center">
                  <Label htmlFor="enable-rotate">Döndürme</Label>
                  <Switch
                    id="enable-rotate"
                    checked={settings.enableRotate}
                    onCheckedChange={(checked) => handleSettingChange("enableRotate", checked)}
                  />
                </div>

<div className="flex justify-between items-center">
                  <Label htmlFor="auto-rotate">Otomatik Döndürme</Label>
                  <Switch
                    id="auto-rotate"
                    checked={settings.autoRotate}
                    onCheckedChange={(checked) => handleSettingChange("autoRotate", checked)}
                  />
                </div>
                {settings.autoRotate && (
                  <div className="mt-2">
                    <Label htmlFor="auto-rotate-speed" className="text-xs text-muted-foreground">
                      Otomatik Döndürme Hızı: {settings.autoRotateSpeed}x
                    </Label>
                    <Slider
                      id="auto-rotate-speed"
                      min={0.1}
                      max={2}
                      step={0.1}
                      value={[settings.autoRotateSpeed]}
                      onValueChange={(value) => handleSettingChange("autoRotateSpeed", value[0])}
                      className="mt-1"
                    />
                  </div>
                )}
              </div>

<div className="space-y-4">
                <div>
                  <Label htmlFor="min-zoom" className="text-xs text-muted-foreground">
                    Minimum Yakınlaştırma: {settings.minZoom}x
                  </Label>
                  <Slider
                    id="min-zoom"
                    min={1}
                    max={5}
                    step={0.1}
                    value={[settings.minZoom]}
                    onValueChange={(value) => handleSettingChange("minZoom", value[0])}
                    className="mt-1"
                  />
                </div>

<div>
                  <Label htmlFor="max-zoom" className="text-xs text-muted-foreground">
                    Maksimum Yakınlaştırma: {settings.maxZoom}x
                  </Label>
                  <Slider
                    id="max-zoom"
                    min={5}
                    max={20}
                    step={0.5}
                    value={[settings.maxZoom]}
                    onValueChange={(value) => handleSettingChange("maxZoom", value[0])}
                    className="mt-1"
                  />
                </div>
              </div>
            </div>
          </TabsContent>

{/* AI Analiz Sekmesi */}
          <TabsContent value="ai" className="space-y-4">
            <AIAnalysisPanel earthquakeData={earthquakeData} />
          </TabsContent>
        </Tabs>

<DialogFooter className="mt-6">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Kapat
          </Button>
          <Button onClick={onRefresh} className="ml-2">
            <RefreshCw className="h-4 w-4 mr-2" />
            Verileri Yenile
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="android/src/components/SeismicWaveAnimation.tsx" isMerged="true"
"use client"

import type React from "react"
import { useEffect } from "react"
import { View, StyleSheet } from "react-native"
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  withSequence,
  Easing,
} from "react-native-reanimated"

interface SeismicWaveAnimationProps {
  magnitude: number
  color?: string
  duration?: number
  maxRadius?: number
}

const SeismicWaveAnimation: React.FC<SeismicWaveAnimationProps> = ({
  magnitude,
  color,
  duration = 2000,
  maxRadius = 100,
}) => {
  // Büyüklüğe göre dalga parametrelerini ayarla
  const waveIntensity = Math.min(1.0, magnitude / 8.0)
  const actualMaxRadius = maxRadius * (0.5 + waveIntensity * 0.5)
  const actualDuration = duration * (1 - waveIntensity * 0.3) // Daha büyük depremler için daha hızlı

// Büyüklüğe göre renk belirle
  const getWaveColor = () => {
    if (color) return color

if (magnitude >= 7.0) return "#ef4444" // red
    if (magnitude >= 6.0) return "#f97316" // orange
    if (magnitude >= 5.0) return "#facc15" // yellow
    if (magnitude >= 4.0) return "#84cc16" // lime
    return "#22c55e" // green
  }

// Animasyon değerleri
  const scale = useSharedValue(0)
  const opacity = useSharedValue(0.7)

// Animasyon stilleri
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }],
      opacity: opacity.value,
    }
  })

// Animasyonu başlat
  useEffect(() => {
    // Ölçek animasyonu
    scale.value = withRepeat(withTiming(1, { duration: actualDuration, easing: Easing.out(Easing.ease) }), 3, false)

// Opaklık animasyonu
    opacity.value = withRepeat(
      withSequence(
        withTiming(0.7, { duration: actualDuration * 0.2 }),
        withTiming(0, { duration: actualDuration * 0.8 }),
      ),
      3,
      false,
    )

// Temizleme
    return () => {
      scale.value = 0
      opacity.value = 0
    }
  }, [magnitude])

return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.wave,
          animatedStyle,
          {
            backgroundColor: getWaveColor(),
            width: actualMaxRadius,
            height: actualMaxRadius,
            borderRadius: actualMaxRadius / 2,
          },
        ]}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    alignItems: "center",
    justifyContent: "center",
  },
  wave: {
    position: "absolute",
  },
})

export default SeismicWaveAnimation
[V0_FILE]typescriptreact:file="android/src/services/earthquakeService.ts" isMerged="true"
import AsyncStorage from "@react-native-async-storage/async-storage"

// API URL'leri
const USGS_API_URL = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"
const EMSC_API_URL = "https://www.seismicportal.eu/fdsnws/event/1/query?format=json&limit=500&minmag=1&days=30"
const EMSC_ALT_API_URL = "https://www.emsc-csem.org/service/rss/rss.php?typ=emsc&magmin=1"

// Deprem verisi tipi
export interface EarthquakeData {
  id: string
  time: string
  magnitude: number
  depth: number
  location: {
    lat: number
    lng: number
  }
  region: string
  intensity?: number
  source?: string
}

// USGS'den veri çekme
export const fetchUsgsData = async (): Promise<EarthquakeData[]> => {
  try {
    const response = await fetch(USGS_API_URL)

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

const data = await response.json()

if (!data.features || !Array.isArray(data.features)) {
      throw new Error("Invalid USGS data format")
    }

// USGS verilerini dönüştür
    return data.features.map((feature: any) => ({
      id: feature.id,
      time: new Date(feature.properties.time).toISOString(),
      magnitude: feature.properties.mag,
      depth: feature.geometry.coordinates[2],
      location: {
        lat: feature.geometry.coordinates[1],
        lng: feature.geometry.coordinates[0],
      },
      region: feature.properties.place || "Unknown",
      intensity: feature.properties.mag * 0.8,
      source: "USGS",
    }))
  } catch (error) {
    console.error("Error fetching USGS data:", error)

// Önbellekten veri yüklemeyi dene
    try {
      const cachedData = await AsyncStorage.getItem("usgsEarthquakeData")
      if (cachedData) {
        return JSON.parse(cachedData)
      }
    } catch (cacheError) {
      console.error("Error loading cached USGS data:", cacheError)
    }

return []
  }
}

// EMSC'den veri çekme
export const fetchEmscData = async (): Promise<EarthquakeData[]> => {
  try {
    const response = await fetch(EMSC_API_URL, {
      headers: {
        "User-Agent": "EarthquakeMonitor/2.0 (Android)",
        Accept: "application/json",
      },
    })

if (!response.ok) {
      // 400 hatası durumunda alternatif endpoint'i dene
      if (response.status === 400) {
        return fetchEmscAltData()
      }
      throw new Error(`EMSC API error: ${response.status}`)
    }

const data = await response.json()

if (!data.features || !Array.isArray(data.features)) {
      throw new Error("Invalid EMSC data format")
    }

// EMSC verilerini dönüştür
    const earthquakes = data.features.map((feature: any) => ({
      id: feature.properties.source_id || `emsc-${feature.properties.time}`,
      time: new Date(feature.properties.time).toISOString(),
      magnitude: feature.properties.mag,
      depth: feature.geometry.coordinates[2],
      location: {
        lat: feature.geometry.coordinates[1],
        lng: feature.geometry.coordinates[0],
      },
      region: feature.properties.flynn_region || "Unknown",
      intensity: feature.properties.mag * 0.8,
      source: "EMSC",
    }))

// Önbelleğe kaydet
    await AsyncStorage.setItem("emscEarthquakeData", JSON.stringify(earthquakes))

return earthquakes
  } catch (error) {
    console.error("Error fetching EMSC data:", error)

// Alternatif endpoint'i dene
    try {
      return await fetchEmscAltData()
    } catch (altError) {
      console.error("Error fetching alternative EMSC data:", altError)

// Önbellekten veri yüklemeyi dene
      try {
        const cachedData = await AsyncStorage.getItem("emscEarthquakeData")
        if (cachedData) {
          return JSON.parse(cachedData)
        }
      } catch (cacheError) {
        console.error("Error loading cached EMSC data:", cacheError)
      }

return []
    }
  }
}

// EMSC alternatif endpoint'inden veri çekme
export const fetchEmscAltData = async (): Promise<EarthquakeData[]> => {
  try {
    const response = await fetch(EMSC_ALT_API_URL, {
      headers: {
        "User-Agent": "EarthquakeMonitor/2.0 (Android)",
        Accept: "application/xml, text/xml",
      },
    })

if (!response.ok) {
      throw new Error(`Alternative EMSC API error: ${response.status}`)
    }

const xmlText = await response.text()

// XML'i parse et
    const earthquakes = parseEmscRss(xmlText)

// Önbelleğe kaydet
    await AsyncStorage.setItem("emscEarthquakeData", JSON.stringify(earthquakes))

return earthquakes
  } catch (error) {
    console.error("Error fetching alternative EMSC data:", error)
    throw error
  }
}

// RSS XML'i parse etme fonksiyonu
const parseEmscRss = (xmlText: string): EarthquakeData[] => {
  const earthquakes: EarthquakeData[] = []