// Gabarit des sous-pages « Tour virtuel 360° » par secteur.
// Chaque page définit window.V4_BASE = '../../' et window.SECTEUR = '<slug>' avant de charger ce fichier.

const SECTEURS = {
  restaurants: {
    name: 'Restaurants et cafés', accent: 'blue', Visual: 'VisRestaurant',
    title: 'Votre salle à manger,', gradient: 'visible avant la réservation.',
    subtitle: "Ambiance, éclairage, terrasse, bar : un tour virtuel 360° sur votre fiche Google montre l'expérience avant même que le client choisisse sa table.",
    intro: [
      "Quand quelqu'un cherche un restaurant pour ce soir, il compare trois ou quatre fiches Google en quelques secondes. Les photos du menu ne suffisent plus : on veut savoir si l'endroit est intime ou animé, si la terrasse a de l'ombre, si la salle convient à un souper de groupe.",
      "La visite 360° répond à toutes ces questions sans un mot. Le client se promène dans votre salle depuis son téléphone, repère sa table préférée et réserve en confiance.",
    ],
    captures: ['Entrée et vestiaire', 'Salle à manger et banquettes', 'Bar et comptoir', 'Terrasse et vue', 'Salle privée pour les groupes', 'Photos HDR des plats et de la déco'],
    faq: [
      ['Faut-il fermer le restaurant pendant la captation?', "Non. On planifie la séance avant l'ouverture ou pendant une période creuse, en général sur une à deux heures."],
      ['La visite apparaît où, exactement?', "Sur votre fiche Google Maps et dans la recherche Google, et on vous remet un code pour l'intégrer à votre site web."],
      ['Peut-on refaire la terrasse en été?', "Oui. Plusieurs restaurants ajoutent une captation saisonnière pour montrer la terrasse quand elle est ouverte."],
    ],
  },
  hotels: {
    name: 'Hôtels et auberges', accent: 'teal', Visual: 'VisHotel',
    title: 'Une chambre qu\'on a visitée,', gradient: "c'est une chambre qu'on réserve.",
    subtitle: "Chambres, hall, salle à manger, spa, vue du balcon : vos futurs clients parcourent votre établissement en 360° directement depuis Google.",
    intro: [
      "Avant de réserver un séjour, un voyageur veut se projeter : la grandeur de la chambre, la vue, la salle de bain, les aires communes. Les photos retouchées des plateformes de réservation ne disent pas tout, et les gens le savent.",
      "Le tour virtuel 360° montre l'établissement tel qu'il est, pièce par pièce. Il renforce la confiance, réduit les questions avant la réservation et donne plus de raisons de réserver directement chez vous.",
    ],
    captures: ['Chaque type de chambre ou de suite', 'Hall et réception', 'Salle à manger et bar', 'Spa, piscine et aires de détente', 'Salles de réunion ou de réception', 'Extérieurs et accès au terrain'],
    faq: [
      ['Faut-il capter toutes les chambres?', "Non. On capte un exemple de chaque type de chambre; c'est ce que les voyageurs comparent."],
      ['Est-ce compatible avec mon site de réservation?', "Oui. La visite s'intègre sur votre site web avec un simple code, à côté de votre moteur de réservation."],
      ['Combien de temps dure la captation?', "Selon la taille de l'établissement, de quelques heures à une journée, planifiée selon vos départs et arrivées."],
    ],
  },
  spas: {
    name: 'Spas et bien-être', accent: 'purple', Visual: 'VisSpa',
    title: "L'expérience commence", gradient: 'avant la porte.',
    subtitle: "Bassins, saunas, salles de soin, aires de repos : le tour virtuel 360° transmet le calme de votre spa dès la fiche Google.",
    intro: [
      "Un spa se choisit à l'ambiance. Le client veut sentir l'espace, voir les bassins extérieurs, comprendre le parcours thermique et savoir à quoi ressemblent les salles de soin.",
      "La visite 360° permet de vivre ce parcours à l'écran. Elle aide aussi les clients qui offrent une carte-cadeau à savoir exactement ce qu'ils offrent.",
    ],
    captures: ['Accueil et vestiaires', 'Bassins chauds et froids', 'Saunas et bains vapeur', 'Aires de repos intérieures et extérieures', 'Salles de massage et de soins', 'Photos HDR pour vos réseaux sociaux'],
    faq: [
      ['Les clients seront-ils dans les images?', "Non. On capte avant l'ouverture ou dans des zones fermées pour respecter l'intimité de votre clientèle."],
      ['Peut-on montrer le spa en hiver et en été?', "Oui. Deux captations saisonnières donnent une vue juste de l'expérience toute l'année."],
      ['La visite peut-elle aller sur notre site?', "Oui, on vous remet un code d'intégration en plus de la publication sur Google."],
    ],
  },
  'salles-reception': {
    name: 'Salles de réception', accent: 'warm', Visual: 'VisEvents',
    title: 'Choisir sa salle', gradient: 'sans se déplacer.',
    subtitle: "Mariages, événements d'entreprise, fêtes de famille : vos clients visitent vos salles en 360° et arrivent à la rencontre déjà convaincus.",
    intro: [
      "Organiser un événement, c'est comparer plusieurs salles. Chaque visite sur place prend du temps, pour vous comme pour eux, et plusieurs n'aboutissent pas.",
      "Avec un tour virtuel 360°, les organisateurs voient la configuration, la lumière, les accès et la terrasse avant de vous appeler. Les rencontres en personne se font avec des clients qui ont déjà choisi votre salle.",
    ],
    captures: ['Chaque salle, vide ou aménagée', 'Terrasses et jardins', 'Entrée, vestiaire et accès', 'Bar et zones de cocktail', 'Cuisine ou espace traiteur', 'Photos HDR pour vos brochures'],
    faq: [
      ['Peut-on capter une salle décorée?', "Oui. Une salle montée pour un mariage aide beaucoup les futurs mariés à se projeter."],
      ['Est-ce utile si on a plusieurs salles?', "Oui, c'est même là que la visite rend le plus service : on passe d'une salle à l'autre en un clic."],
      ['La visite remplace-t-elle les visites en personne?', "Elle les rend plus efficaces : moins de visites pour voir, plus de rencontres avec des clients prêts à réserver."],
    ],
  },
  boutiques: {
    name: 'Boutiques et détaillants', accent: 'blue', Visual: 'VisBoutique',
    title: 'Donnez envie', gradient: 'de pousser la porte.',
    subtitle: "Vitrine, allées, sélection de produits : le tour virtuel 360° transforme les passants en ligne en visiteurs en magasin.",
    intro: [
      "Avant de se déplacer, les gens vérifient : est-ce que la boutique a ce que je cherche? Est-ce facile de se garer? L'endroit a-t-il du style?",
      "Une visite 360° sur votre fiche Google répond à ces questions et met en valeur ce qu'un site transactionnel ne montre pas : l'expérience de magasiner chez vous.",
    ],
    captures: ['Façade et vitrine', 'Allées et présentoirs', 'Sections clés de votre sélection', 'Cabines ou zones d\'essai', 'Caisse et service', 'Stationnement et accès'],
    faq: [
      ['Faut-il refaire la visite quand les produits changent?', "Pas forcément. La visite montre l'espace; les nouveautés se communiquent avec des publications Google."],
      ['Combien de temps dure la captation?', "En général une à deux heures, avant l'ouverture."],
      ['Est-ce utile pour une petite boutique?', "Oui. Une petite boutique soignée gagne souvent le plus à être vue de l'intérieur."],
    ],
  },
  cliniques: {
    name: 'Cliniques médicales et dentaires', accent: 'teal', Visual: 'VisClinique',
    title: 'Rassurer', gradient: 'avant le rendez-vous.',
    subtitle: "Salle d'attente, salles d'examen, accès : les nouveaux patients découvrent votre clinique en 360° et arrivent plus sereins.",
    intro: [
      "Pour un nouveau patient, l'inconnu crée de l'inquiétude : où se stationner, par quelle porte entrer, à quoi ressemble la salle d'attente.",
      "Un tour virtuel 360° répond à ces questions avant la visite. Il montre aussi la propreté et la modernité de vos installations, deux critères qui pèsent dans le choix d'une clinique.",
    ],
    captures: ['Entrée et accès, y compris adaptés', 'Réception et salle d\'attente', 'Salles d\'examen ou de traitement', 'Équipements à mettre en valeur', 'Stationnement', 'Photos HDR de l\'équipe et des lieux'],
    faq: [
      ['La confidentialité des patients est-elle respectée?', "Oui. La captation se fait hors des heures de consultation, sans patient ni dossier visible."],
      ['Peut-on exclure certaines pièces?', "Oui. Vous choisissez ce qui est montré; les zones privées restent fermées."],
      ['Combien de temps faut-il prévoir?', "Une à deux heures pour une clinique de taille moyenne."],
    ],
  },
  pourvoiries: {
    name: 'Pourvoiries et chalets', accent: 'purple', Visual: 'VisPourvoirie',
    title: 'Le lac, le chalet, la quiétude,', gradient: 'vus de chez eux.',
    subtitle: "Chalets, quai, sentiers, vue sur le lac : le tour virtuel 360° aide vos clients à réserver plus tôt, et plus souvent en direct.",
    intro: [
      "Louer un chalet ou réserver un séjour en pourvoirie se décide des mois à l'avance, souvent en comparant plusieurs options sur des sites différents.",
      "Avec une visite 360° de chaque chalet et des lieux communs, vos clients savent exactement ce qu'ils réservent. Moins de questions, moins de surprises à l'arrivée, et plus de réservations directes.",
    ],
    captures: ['Chaque modèle de chalet, intérieur et extérieur', 'Quai, plage et embarcations', 'Accueil et dépanneur', 'Départ des sentiers', 'Vue sur le lac', 'Photos HDR pour vos plateformes de location'],
    faq: [
      ['Vous déplacez-vous en région éloignée?', "Oui. Les frais de déplacement sont calculés dans la soumission selon la distance."],
      ['Peut-on capter en saison et hors saison?', "Oui, et c'est souvent utile pour montrer à la fois l'été et l'hiver."],
      ['La visite fonctionne-t-elle sur les plateformes de location?', "On vous remet un lien et des photos HDR utilisables sur vos annonces, en plus de la publication sur Google."],
    ],
  },
  microbrasseries: {
    name: 'Microbrasseries et vignobles', accent: 'warm', Visual: 'VisMicrobrasserie',
    title: "L'atelier,", gradient: "c'est la moitié de l'histoire.",
    subtitle: "Salle de brassage, chai, bar de dégustation, terrasse : la visite 360° donne envie de faire le détour.",
    intro: [
      "Les visiteurs choisissent une microbrasserie ou un vignoble autant pour l'expérience que pour le produit. Ils veulent voir les cuves, les barriques, la terrasse et savoir s'il y a de la place pour un groupe.",
      "Un tour virtuel 360° raconte votre histoire en images et aide les touristes à planifier leur route, notamment sur les circuits gourmands des Laurentides.",
    ],
    captures: ['Salle de brassage ou chai', 'Bar et salle de dégustation', 'Boutique', 'Terrasse et vignes', 'Salle privée pour groupes', 'Photos HDR pour vos étiquettes et réseaux'],
    faq: [
      ['Peut-on capter pendant la production?', "Oui, si c'est sécuritaire. Une salle de brassage en activité rend la visite plus vivante."],
      ['Faut-il une captation par saison?', "C'est utile pour un vignoble : les vignes en été et en vendanges racontent deux histoires différentes."],
      ['La visite aide-t-elle pour les groupes?', "Oui. Les organisateurs de groupes voient d'avance l'espace disponible."],
    ],
  },
  loisirs: {
    name: 'Loisirs et tourisme', accent: 'blue', Visual: 'VisLoisirs',
    title: 'Le sentier, le départ, le panorama,', gradient: 'déjà visibles.',
    subtitle: "Parcs, sentiers, attractions, centres de plein air : on capte en 360° là où Google Street View n'est jamais allé.",
    intro: [
      "Google Street View s'arrête souvent au stationnement. Pourtant, ce que les visiteurs veulent voir, c'est le départ du sentier, le belvédère, la plage, le parcours.",
      "On capte vos sentiers et vos installations à pied, en raquette ou à vélo, puis on publie les images sur Google Maps. Les visiteurs planifient leur journée avant d'arriver et choisissent votre site plutôt qu'un autre.",
    ],
    captures: ['Sentiers et parcours, de bout en bout', 'Belvédères et points de vue', 'Accueil, chalets et services', 'Aires de pique-nique et plages', 'Départs d\'activités', 'Photos HDR pour vos cartes et brochures'],
    faq: [
      ['Pouvez-vous capter un sentier de plusieurs kilomètres?', "Oui. Le sentier est capté en continu, puis publié comme un parcours Street View navigable."],
      ['La météo peut-elle retarder la captation?', "Oui. On planifie une date et une date de rechange pour avoir de belles conditions."],
      ['Et pour une station de ski?', "On a une offre dédiée aux montagnes et aux stations de ski, voir la page Montagnes et ski."],
    ],
  },
};

const ORDRE = ['restaurants','hotels','spas','salles-reception','boutiques','cliniques','pourvoiries','microbrasseries','loisirs'];

const Check = ({color}) => (
  <div style={{width:24,height:24,borderRadius:'50%',background:`${color}15`,color,display:'flex',
    alignItems:'center',justifyContent:'center',fontWeight:700,fontSize:13,flexShrink:0,marginTop:2}}>✓</div>
);

const SecteurDetail = ({s, color}) => {
  const Visual = window[s.Visual];
  return (
    <section style={{padding:'40px 56px 100px',background:v4Theme.bg}}>
      <div style={{maxWidth:1440,margin:'0 auto',display:'flex',flexWrap:'wrap',gap:64,alignItems:'flex-start'}}>
        <div style={{flex:'1.4 1 560px',minWidth:0}}>
          <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:48,fontWeight:600,color:v4Theme.ink,
            margin:0,marginBottom:32,letterSpacing:-1.2,lineHeight:1.1}}>
            Pourquoi un tour virtuel pour <em style={{color,fontStyle:'italic'}}>{s.name.toLowerCase()}</em>
          </h2>
          <div style={{fontFamily:v4Theme.fontBody,fontSize:17,color:v4Theme.inkSoft,lineHeight:1.7,
            display:'flex',flexDirection:'column',gap:20,marginBottom:40}}>
            {s.intro.map((p,i)=>(<p key={i} style={{margin:0}}>{p}</p>))}
          </div>
          <h3 style={{fontFamily:v4Theme.fontDisplay,fontSize:24,fontWeight:600,color:v4Theme.ink,
            margin:0,marginBottom:20,letterSpacing:-0.5}}>Ce qu'on capte chez vous</h3>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))',gap:12}}>
            {s.captures.map(t=>(
              <div key={t} style={{display:'flex',gap:12,alignItems:'flex-start'}}>
                <Check color={color}/>
                <div style={{fontFamily:v4Theme.fontBody,fontSize:15,color:v4Theme.ink,lineHeight:1.5}}>{t}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{flex:'1 1 360px',minWidth:0,position:'sticky',top:120}}>
          {Visual && <div style={{marginBottom:20}}><Visual/></div>}
          <div style={{background:v4Theme.surface,borderRadius:28,padding:32,
            border:`1px solid ${v4Theme.border}`,boxShadow:'0 4px 20px rgba(10,24,64,0.05)'}}>
            <div style={{fontFamily:v4Theme.fontBody,fontSize:11,color:v4Theme.muted,
              letterSpacing:1.5,textTransform:'uppercase',fontWeight:600,marginBottom:8}}>À partir de</div>
            <div style={{fontFamily:v4Theme.fontDisplay,fontSize:64,fontWeight:700,color,
              letterSpacing:-2,lineHeight:1,marginBottom:8}}>
              495<span style={{fontSize:28,color:v4Theme.muted,fontWeight:500}}>$</span></div>
            <div style={{fontFamily:v4Theme.fontBody,fontSize:14,color:v4Theme.muted,marginBottom:24}}>
              tout inclus, prix unique selon la superficie
            </div>
            <a href={v4Href('contact.html')} style={{display:'block',width:'100%',background:color,
              color:'#fff',borderRadius:999,padding:'16px',fontFamily:v4Theme.fontBody,fontWeight:600,
              fontSize:15,textDecoration:'none',textAlign:'center',boxSizing:'border-box',marginBottom:12}}>
              Réserver ma visite
            </a>
            <a href={v4Href('contact.html')} style={{display:'block',width:'100%',color:v4Theme.ink,
              border:`1px solid ${v4Theme.border}`,borderRadius:999,padding:'16px',fontFamily:v4Theme.fontBody,
              fontWeight:500,fontSize:15,textDecoration:'none',textAlign:'center',boxSizing:'border-box'}}>
              Demander un devis
            </a>
            <div style={{marginTop:24,paddingTop:24,borderTop:`1px solid ${v4Theme.border}`,
              fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.muted,lineHeight:1.5}}>
              Visite publiée sur Google Maps, code d'intégration pour votre site et photos HDR incluses.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const SecteurEtapes = ({color}) => (
  <section style={{padding:'100px 56px',background:v4Theme.bg2,borderTop:`1px solid ${v4Theme.border}`}}>
    <div style={{maxWidth:1440,margin:'0 auto'}}>
      <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:48,fontWeight:700,color:v4Theme.ink,
        margin:0,marginBottom:48,letterSpacing:-1.5}}>Comment ça se passe</h2>
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:24}}>
        {[
          ['01','Appel de 15 minutes',"On cible les pièces et les lieux qui convainquent le plus vos clients."],
          ['02','Captation sur place',"Caméra 360° professionnelle, à un moment qui ne dérange pas vos activités."],
          ['03','Publication sur Google',"La visite est liée à votre fiche Google Maps, avec les photos HDR."],
          ['04','Intégration et suivi',"Code pour votre site web et suivi des vues de votre fiche."],
        ].map(([n,t,d])=>(
          <div key={n} style={{background:v4Theme.surface,borderRadius:24,padding:28,border:`1px solid ${v4Theme.border}`}}>
            <div style={{fontFamily:v4Theme.fontDisplay,fontSize:32,fontWeight:700,color,marginBottom:12}}>{n}</div>
            <div style={{fontFamily:v4Theme.fontDisplay,fontSize:20,fontWeight:600,color:v4Theme.ink,marginBottom:8}}>{t}</div>
            <div style={{fontFamily:v4Theme.fontBody,fontSize:15,color:v4Theme.inkSoft,lineHeight:1.6}}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const SecteurFAQ = ({s, color}) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{padding:'100px 56px',background:v4Theme.bg}}>
      <div style={{maxWidth:900,margin:'0 auto'}}>
        <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:48,fontWeight:700,color:v4Theme.ink,
          margin:0,marginBottom:40,letterSpacing:-1.5,textAlign:'center'}}>Questions fréquentes</h2>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          {s.faq.map(([q,a],i)=>(
            <div key={q} style={{background:v4Theme.surface,borderRadius:20,border:`1px solid ${v4Theme.border}`}}>
              <button type="button" aria-expanded={open===i} onClick={()=>setOpen(open===i?-1:i)}
                style={{width:'100%',display:'flex',justifyContent:'space-between',alignItems:'center',gap:16,
                  background:'none',border:0,textAlign:'left',padding:'22px 26px',cursor:'pointer',
                  fontFamily:v4Theme.fontDisplay,fontSize:19,fontWeight:600,color:v4Theme.ink}}>
                <span>{q}</span>
                <span aria-hidden="true" style={{color,fontSize:24}}>{open===i?'−':'+'}</span>
              </button>
              {open===i && (
                <p style={{margin:0,padding:'0 26px 22px',fontFamily:v4Theme.fontBody,fontSize:16,
                  color:v4Theme.inkSoft,lineHeight:1.65}}>{a}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AutresSecteurs = ({slug}) => (
  <section style={{padding:'0 56px 100px',background:v4Theme.bg}}>
    <div style={{maxWidth:1440,margin:'0 auto'}}>
      <div style={{fontFamily:v4Theme.fontBody,fontSize:12,letterSpacing:1.5,textTransform:'uppercase',
        color:v4Theme.muted,fontWeight:600,marginBottom:16}}>Autres secteurs</div>
      <div style={{display:'flex',flexWrap:'wrap',gap:10}}>
        {ORDRE.filter(k=>k!==slug).map(k=>(
          <a key={k} href={v4Href(`tour-virtuel-360/${k}/index.html`)} style={{padding:'12px 18px',borderRadius:999,
            background:v4Theme.surface,border:`1px solid ${v4Theme.border}`,fontFamily:v4Theme.fontBody,
            fontSize:14,fontWeight:500,color:v4Theme.ink,textDecoration:'none'}}>{SECTEURS[k].name}</a>
        ))}
        <a href={v4Href('tour-virtuel-360/montagne-ski/index.html')} style={{padding:'12px 18px',borderRadius:999,
          background:v4Theme.ink,color:v4Theme.bg,fontFamily:v4Theme.fontBody,fontSize:14,fontWeight:600,
          textDecoration:'none'}}>Montagnes et ski</a>
      </div>
    </div>
  </section>
);

const Fil = ({s}) => (
  <nav aria-label="Fil d'Ariane" style={{padding:'24px 56px 0',background:v4Theme.bg}}>
    <div style={{maxWidth:1440,margin:'0 auto',fontFamily:v4Theme.fontBody,fontSize:13,color:v4Theme.muted}}>
      <a href={v4Href('index.html')} style={{color:v4Theme.muted}}>Accueil</a>{' / '}
      <a href={v4Href('tour-virtuel-360/index.html')} style={{color:v4Theme.muted}}>Tours virtuels 360°</a>{' / '}
      <span style={{color:v4Theme.ink}}>{s.name}</span>
    </div>
  </nav>
);

const SecteurApp = () => {
  const slug = window.SECTEUR;
  const s = SECTEURS[slug];
  const color = v4Theme[s.accent];
  return (
    <div style={{background:v4Theme.bg,color:v4Theme.ink,fontFamily:v4Theme.fontBody}}>
      <V4Nav active="tours"/>
      <Fil s={s}/>
      <V4PageHero eyebrow={`Tour virtuel 360° · ${s.name}`} title={s.title} gradient={s.gradient}
        subtitle={s.subtitle} accent={color}/>
      <SecteurDetail s={s} color={color}/>
      <SecteurEtapes color={color}/>
      <SecteurFAQ s={s} color={color}/>
      <AutresSecteurs slug={slug}/>
      <V4FinalCTA title="On capte votre établissement" gradientPart="ce mois-ci ?"/>
      <V4Footer/>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<SecteurApp/>);