import React from "react";
import {
  Image,
  SafeAreaView,
  StatusBar,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

export default function NotFoundScreen() {
  return (
    <SafeAreaView className="flex-1 bg-white">
      <StatusBar barStyle="dark-content" />

      {/* Back Button Area */}
      <View className="p-4 absolute top-11 left-0 z-10">
        <Text className="text-2xl text-gray-300">⟨</Text>
      </View>

      {/* Main Content */}
      <View className="flex-1 items-center justify-center px-5">
        {/* Magnifying Glass Image */}
        <Image
          source={{
            uri: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Capture%20d%E2%80%99e%CC%81cran%202025-01-21%20a%CC%80%2008.21.49-5FFPPKCnwJH2QV30OeJup36tsu0CGA.png",
          }}
          className="w-[200px] h-[200px] mb-10"
          resizeMode="contain"
        />

        {/* Error Text */}
        <Text className="text-4xl font-bold text-gray-800 mb-4">Not Found</Text>

        {/* Error Message */}
        <Text className="text-lg text-gray-600 text-center mb-6">
          Whoops! Coach S can't find this page :(
        </Text>

        {/* Status Code */}
        <View className="bg-red-100/20 py-2 px-4 rounded-lg flex-row items-center mb-10">
          <Text className="text-red-400 text-base">
            :warning: Status Code: 404
          </Text>
        </View>

        {/* Home Button */}
        <TouchableOpacity className="bg-[#F4804F] py-4 px-8 rounded-full flex-row items-center absolute bottom-10 left-5 right-5">
          <Text className="text-white text-lg font-semibold text-center flex-1">
            Take Me Home
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}