<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"  @class(['dark' => ($appearance ?? 'system') == 'dark'])>
    <head>
        <meta charset="utf-8">
  	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  	<meta http-equiv="x-ua-compatible" content="ie=edge">
  	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  	<meta id="format-detection" name="format-detection" content="telephone=no">
  	<meta id="site-name" name="site-name" content="PIPOPA">
  	<meta http-equiv="Content-Language" content="ja">
  	<meta name="google-site-verification" content=""/>
  	<meta name="google" content="notranslate">
        <meta name="csrf-token" content="{{ csrf_token() }}">

  {{-- Inline script to detect system dark mode preference and apply it immediately --}}
  <script>
		(function () {
			const appearance = '{{ $appearance ?? "system" }}';

			if (appearance === 'system') {
				const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

				if (prefersDark) {
					document.documentElement.classList.add('dark');
				}
			}
		})();
  </script>

  {{-- Inline style to set the HTML background color based on our theme in app.css --}}
  <style>
		html {
			background-color: oklch(1 0 0);
		}

		html.dark {
			background-color: oklch(0.145 0 0);
		}
  </style>

  @php
    $isPipopaSite = str_contains(request()->path(), 'ai-chatbot');
  @endphp

  <title inertia>{{ $isPipopaSite ? 'pipopa（ピポパ）| 企業専用AIチャットボット - 24時間365日対応' : 'Mattock - AI時代のベトナムオフショア開発パートナー | 開発コスト最大60%削減' }}</title>

  @if($isPipopaSite)
    <link rel="icon" href="/favicon-pipopa.ico" sizes="any">
    <link rel="icon" href="/favicon-pipopa.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-pipopa-icon.png">
  @else
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  @endif

  <link rel="preconnect" href="https://fonts.bunny.net">
  <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet"/>

  @routes
  @vite(['resources/js/app.ts', "resources/js/pages/{$page['component']}.vue"])
  @inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
