import { useState, useEffect } from 'react';
import Head from 'next/head';

const PWA_MANIFEST = {
  name: 'AIFootball',
  short_name: 'AIFootball',
  description: 'Professional AI Football Predictions Platform',
  start_url: '/',
  display: 'standalone',
  background_color: '#1e40af',
  theme_color: '#3b82f6',
  icons: [
    {
      src: '/icons/icon-192x192.png',
      sizes: '192x192',
      type: 'image/png'
    }
  ],
  categories: ['sports', 'football', 'predictions'],
  screenshots: [
    {
      src: '/screenshots/home.png',
      sizes: '1280x720',
      type: 'image/png',
      label: 'Home Page'
    }
  ],
  related_applications: [],
  prefer_related_applications: []
};

export default function Manifest() {
  return (
    <Head>
      <link rel="manifest" href="/manifest.json" />
    <title>AIFootball - PWA Manifest</title>
    <meta name="theme-color" content="#3b82f6" />
      <meta name="background-color" content="#1e40af" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-TapHighlight" content="no" />
    <meta name="msapplication-navbutton-color" content="#3b82f6" />
    <meta name="msapplication-window" content="#1e40af" />
      <meta name="msapplication-TileColor" content="#3b82f6" />
    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png" />
    <meta name="msapplication-config" content="/browserconfig.xml" />
    <meta name="msapplication-notification" content="enabled" />
    <meta name="msapplication-badge" content="frequency=30;polling-interval=3600000" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192x192.png" />
    <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512x512.png" />
    <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#3b82f6" />
    <meta name="mobile-web-app-status-bar-style" content="default" />
  </Head>
  );
}
