import {
  Page,
  Layout,
  Card,
  BlockStack,
  Text,
  DescriptionList,
  Banner,
  FooterHelp,
  InlineStack,
} from "@shopify/polaris";

const FAQ_APP = [
  {
    term: "Comment activer CleanSerp sur mon thème ?",
    description:
      "Allez dans Boutique en ligne > Thèmes > Personnaliser. Dans le panneau de gauche, cliquez sur App embeds et activez CleanSerp SEO. Sauvegardez votre thème. L'extension doit rester activée pour que les règles SEO s'appliquent.",
  },
  {
    term: "Combien de temps pour que les changements prennent effet ?",
    description:
      "Après avoir sauvegardé vos règles dans le dashboard, les changements peuvent prendre jusqu'à 5 minutes pour apparaître sur votre boutique. C'est dû au cache CDN de Shopify qui se rafraîchit automatiquement.",
  },
  {
    term: "Pourquoi certaines règles affichent un badge STANDARD ou PRO ?",
    description:
      "La règle Collection \"All\" est gratuite. Les règles natives (sécurité, contenu dupliqué, technique) nécessitent le plan Standard à 9,99€/mois. Les règles personnalisées (handles, chemins, paramètres) nécessitent le plan Pro à 19,99€/mois. Vous bénéficiez de 14 jours d'essai gratuit.",
  },
  {
    term: "CleanSerp fonctionne-t-il avec d'autres apps SEO ?",
    description:
      "Techniquement oui. Google combine les directives meta robots de plusieurs sources et applique la plus restrictive. Cependant, pour éviter tout conflit, nous recommandons de désactiver les autres apps SEO qui injectent des balises meta robots.",
  },
  {
    term: "Les chemins d'URL personnalisés bloquent-ils les sous-pages ?",
    description:
      "Oui. Si vous ajoutez /blogs/news dans les chemins personnalisés, toutes les pages sous ce chemin seront également désindexées (par exemple /blogs/news/mon-article). Le trailing slash est géré automatiquement.",
  },
  {
    term: "Que fait la balise canonical ?",
    description:
      "La balise canonical indique à Google quelle URL est la version principale d'une page quand plusieurs URLs affichent le même contenu. CleanSerp ajoute automatiquement les canonicals pour les collections tagguées, les tris, les vendors et les pages de recherche.",
  },
  {
    term: "Comment désinstaller CleanSerp proprement ?",
    description:
      "Avant de désinstaller l'app, allez dans Thèmes > Personnaliser > App embeds et désactivez CleanSerp SEO. Ensuite, désinstallez l'app depuis Settings > Apps and sales channels. Cela garantit qu'aucune balise résiduelle ne reste dans votre thème.",
  },
];

const FAQ_SEO = [
  {
    term: "Qu'est-ce que la balise noindex et pourquoi devrais-je l'utiliser ?",
    description:
      "La balise noindex est une instruction donnée aux moteurs de recherche pour ne pas afficher une page dans les résultats. Elle permet de cacher les pages de faible valeur (recherche interne, tags), éviter le contenu dupliqué, et optimiser le budget de crawl pour que Google se concentre sur vos pages importantes (produits, collections).",
  },
  {
    term: "Quelle est la différence entre noindex et nofollow ?",
    description:
      "noindex indique à Google de ne pas afficher la page dans les résultats. nofollow indique à Google de ne pas suivre les liens présents sur cette page. La combinaison noindex, follow masque la page des résultats tout en permettant à Google de découvrir les produits qui y sont liés — parfait pour les pages de filtres ou de tags.",
  },
  {
    term: "Quelles pages de ma boutique devrais-je mettre en noindex ?",
    description:
      "Pour la plupart des boutiques : les résultats de recherche interne (/search), les pages de tags et filtres de collection, les pages de pagination (page 2, 3, 4...), et les pages de compte client, panier et paiement. Important : vérifiez toujours qu'une page ne génère pas déjà du trafic ou des ventes avant de la désindexer.",
  },
  {
    term: "Comment vérifier si une page est bien en noindex ?",
    description:
      "La méthode la plus fiable est l'Outil d'inspection d'URL dans Google Search Console. Vous pouvez aussi faire un clic droit sur la page, choisir \"Afficher le code source\" et chercher la balise <meta name=\"robots\" content=\"noindex\">. Des extensions Chrome comme SEO META in 1 CLICK permettent aussi de vérifier rapidement.",
  },
  {
    term: "Ma page est en noindex mais apparaît toujours sur Google. Pourquoi ?",
    description:
      "Deux causes possibles : 1) Google n'a pas encore re-visité votre page — soyez patient ou demandez une nouvelle exploration via Google Search Console. 2) La page est bloquée dans votre fichier robots.txt — si Google ne peut pas visiter la page, il ne verra jamais l'instruction noindex. Autorisez l'exploration pour que la désindexation fonctionne.",
  },
  {
    term: "Combien de temps faut-il pour qu'une page soit retirée de Google ?",
    description:
      "Il n'y a pas de délai fixe, cela peut prendre de quelques jours à plusieurs semaines selon la fréquence d'exploration de Google. Pour les suppressions urgentes, utilisez l'Outil de suppression de Google Search Console qui peut masquer une URL en quelques heures de manière temporaire.",
  },
  {
    term: "Faut-il utiliser la balise noindex ou le fichier robots.txt ?",
    description:
      "La méthode correcte est la balise meta noindex. Le fichier robots.txt empêche le crawl mais ne retire PAS de l'index. Si une page est déjà indexée, la bloquer dans robots.txt ne la fera pas disparaître. Pire : si Google ne peut pas crawler la page, il ne verra jamais votre directive noindex. Règle d'or : ne bloquez PAS la page dans robots.txt et ajoutez-y une balise noindex.",
  },
  {
    term: "Quelles fonctionnalités de Shopify créent ces pages problématiques ?",
    description:
      "Le fonctionnement natif de Shopify génère automatiquement de nombreuses URL indexables : navigation à facettes (filtres par couleur, taille, prix), pages de tags (/collections/all/votre-tag), résultats de recherche interne (/search?q=...), et pages de pagination. CleanSerp gère tous ces cas automatiquement.",
  },
  {
    term: "Comment cela se traduit-il en résultats commerciaux ?",
    description:
      "La correction de l'index bloat a un impact direct : indexation plus rapide des produits rentables, meilleur classement pour les mots-clés transactionnels, et augmentation du ROI SEO. En concentrant les efforts de Google sur les pages qui convertissent, vous améliorez directement vos revenus organiques.",
  },
];

export default function HelpPage() {
  return (
    <Page title="Aide">
      <Layout>
        <Layout.Section>
          <Card>
            <BlockStack gap="400">
              <Text as="h2" variant="headingMd">
                Questions au sujet de l'app
              </Text>
              <DescriptionList items={FAQ_APP} />
            </BlockStack>
          </Card>
        </Layout.Section>

        <Layout.Section>
          <Card>
            <BlockStack gap="400">
              <Text as="h2" variant="headingMd">
                Questions au sujet de la désindexation
              </Text>
              <DescriptionList items={FAQ_SEO} />
            </BlockStack>
          </Card>
        </Layout.Section>

        <Layout.Section>
          <Card>
            <BlockStack gap="400">
              <Text as="h2" variant="headingMd">
                Support
              </Text>
              <Banner tone="info">
                <p>
                  Notre équipe est disponible pour vous aider. Nous répondons
                  généralement en moins de 24 heures.
                </p>
              </Banner>
              <BlockStack gap="200">
                <InlineStack gap="200" blockAlign="center">
                  <Text as="span" variant="bodyMd" fontWeight="semibold">
                    Email :
                  </Text>
                  <span onClick={() => window.open("mailto:support@cleanserp.com")} style={{ color: "#2c6ecb", cursor: "pointer", textDecoration: "underline" }}>
                    support@cleanserp.com
                  </span>
                </InlineStack>
                <InlineStack gap="200" blockAlign="center">
                  <Text as="span" variant="bodyMd" fontWeight="semibold">
                    Délai de réponse :
                  </Text>
                  <Text as="span" variant="bodyMd">
                    Moins de 24 heures (jours ouvrés)
                  </Text>
                </InlineStack>
              </BlockStack>
            </BlockStack>
          </Card>
        </Layout.Section>


        <Layout.Section>
          <Card>
            <BlockStack gap="300">
              <Text as="h2" variant="headingMd">
                À propos de Kalys
              </Text>
              <Text as="p" variant="bodyMd" tone="subdued">
                Kalys est une agence spécialisée en référencement naturel pour les boutiques e-commerce. Nous avons conçu Cleanserp pour répondre à un besoin concret : réduire le nombre d'URLs sans intérêt d'indexation dans votre boutique Shopify. Les "pages zombies" nuisent à la perception de qualité de l'ensemble de votre site par Google. Cleanserp vous permet de gérer facilement les directives noindex et canonical, sans toucher au code de votre thème. Notre engagement est de fournir un outil fiable, simple et conforme aux bonnes pratiques SEO recommandées par Google.
              </Text>
              <span onClick={() => window.open("https://kalys.fr", "_blank")} style={{ color: "#2c6ecb", cursor: "pointer", textDecoration: "underline" }}>
                kalys.fr
              </span>
            </BlockStack>
          </Card>
        </Layout.Section>
      </Layout>

      <FooterHelp>
        Besoin d'aide supplémentaire ?{" "}
        <span onClick={() => window.open("mailto:support@cleanserp.com")} style={{ color: "#2c6ecb", cursor: "pointer", textDecoration: "underline" }}>Contactez notre équipe</span>
      </FooterHelp>
    </Page>
  );
}