import React, { useState, useEffect } from "react";
import ServicePageTemplate from "../ServicePageTemplate";
import { getPageById } from "../../wordpress";

const ServiceCinq = () => {
  const [acfData, setAcfData] = useState(null);
  const [loading, setLoading] = useState(true);
  const pageId = 612; // 🔥 Remplace par l'ID réel de la page WordPress

  useEffect(() => {
    const fetchACFData = async () => {
      try {
        const pageData = await getPageById(pageId);
        setAcfData(pageData.acf);
      } catch (error) {
        console.error("❌ Erreur récupération des champs ACF :", error);
      } finally {
        setLoading(false);
      }
    };

    fetchACFData();
  }, []);

  // ✅ Affichage du chargement en attendant les données ACF
  if (loading) {
    return <p>Chargement...</p>;
  }

  const getStoredValue = (key) =>
    typeof window !== "undefined" ? window.localStorage.getItem(key) : null;

  const storedHeroBackground = getStoredValue(`hero_bg_${pageId}`);
  const storedHeroImage = getStoredValue(`hero_img_${pageId}`);

  const heroBackground =
    acfData?.hero_background ||
    acfData?.background_hero ||
    acfData?.hero_bg ||
    storedHeroBackground ||
    "linear-gradient(135deg, #050d1f 0%, #02050d 85%)";

  const heroImage =
    acfData?.hero_background_image ||
    acfData?.hero_background_image_url ||
    acfData?.hero_image_url ||
    acfData?.hero_image ||
    acfData?.image_hero ||
    acfData?.img_hero_url ||
    acfData?.img_hero ||
    storedHeroImage ||
    "https://picsum.photos/id/1026/1920/1080.webp";

  const serviceDetails = {
    // Hero
    title: acfData?.titre_principal_tce || "Titre héros !", // ✅ Modifiable individuellement
    subtitle:
      acfData?.description_principal_tce ||
      "<p>Description, héros</p>",

    image: heroImage,
    heroBackground,
    ctaText: "En savoir plus",
    ctaLink: "/contact",

    // section 1
    interestTitle: acfData?.second_titre_tce || "Titre interet", // ✅ Modifiable individuellement
    description:
      acfData?.second_description_tce || "<p>Description interet</p>",
    // section 2
    desirTitle: "Titre", // ✅ Modifiable individuellement

    features: [
      {
        title: acfData?.titre_carte_one_tce || "Titre !",
        description: acfData?.description_carte_one_tce || "Description.",
        modalText: acfData?.description_carte_one_tce || "Description Modal.",
        modalImage: "https://picsum.photos/id/300/800/400.webp",
      },
      {
        title: acfData?.titre_carte_two_tce || "Titre !",
        description: acfData?.description_carte_two_tce || "Description.",
        modalText: acfData?.description_carte_two_tce || "Description Modal.",
        modalImage: "https://picsum.photos/id/301/800/400.webp",
      },
      {
        title: acfData?.titre_carte_tree || "Titre !",
        description: acfData?.description_carte_tree || "Description.",
        modalText: acfData?.description_carte_tree || "Description Modal.",
        modalImage: "https://picsum.photos/id/302/800/400.webp",
      },
    ],

    carouselItems: [
      {
        title: "Portfolio Modern",
        description: "Montrez vos compétences avec un portfolio unique.",
        image: "https://picsum.photos/id/305/800/400.webp",
      },
      {
        title: "Blog SEO",
        description: "Optimisez vos articles pour le référencement.",
        image: "https://picsum.photos/id/306/800/400.webp",
      },
    ],
  };

  return <ServicePageTemplate {...serviceDetails} />;
};

export default ServiceCinq;