// Tours 360°, service detail + sectors grid in one page.
// Uses dynamic animated visuals from tours-360-visuals.jsx for each sector.

// ── Service detail (carried from former Photos 360 page) ──────────────────
const ToursDetail = () => (
  <section style={{padding:'40px 56px 100px',background:v4Theme.bg}}>
    <div style={{maxWidth:1440,margin:'0 auto',display:'grid',
      gridTemplateColumns:'1.4fr 1fr',gap:64,alignItems:'flex-start'}}>
      <div>
        <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:48,fontWeight:600,color:v4Theme.ink,
          margin:0,marginBottom:32,letterSpacing:-1.2,lineHeight:1.1}}>
          Une visite virtuelle <em style={{color:v4Theme.blue,fontStyle:'italic'}}>publiée sur Google.</em>
        </h2>
        <div style={{fontFamily:v4Theme.fontBody,fontSize:17,color:v4Theme.inkSoft,
          lineHeight:1.7,display:'flex',flexDirection:'column',gap:20,marginBottom:40}}>
          <p style={{margin:0}}>
            On débarque chez vous avec une caméra 360° professionnelle. En 1 à 2 heures, on capture chaque pièce, chaque ambiance, chaque détail qui compte. Vos clients pourront ensuite explorer votre commerce directement depuis votre fiche Google, comme s'ils étaient déjà à l'intérieur.
          </p>
          <p style={{margin:0}}>
            On livre aussi <strong style={{color:v4Theme.ink}}>15+ photos HDR</strong> haute qualité, prêtes à publier sur Google, votre site web, vos réseaux sociaux. Une seule visite, des images qui travaillent pour vous pendant des années.
          </p>
        </div>
        <h3 style={{fontFamily:v4Theme.fontDisplay,fontSize:24,fontWeight:600,color:v4Theme.ink,
          margin:0,marginBottom:20,letterSpacing:-0.5}}>Ce qui est inclus</h3>
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          {[
            'Visite 360° publiée directement sur Google Street View',
            '15+ photos HDR commerciales',
            'Optimisation pour Google (taille, métadonnées, ordre)',
            'Hébergement de la visite à vie sur Google',
            'Banque d\'images livrée pour vos réseaux sociaux',
          ].map(t=>(
            <div key={t} style={{display:'flex',gap:12,alignItems:'flex-start'}}>
              <div style={{width:24,height:24,borderRadius:'50%',background:`${v4Theme.blue}15`,
                color:v4Theme.blue,display:'flex',alignItems:'center',justifyContent:'center',
                fontWeight:700,fontSize:13,flexShrink:0,marginTop:2}}>✓</div>
              <div style={{fontFamily:v4Theme.fontBody,fontSize:15,color:v4Theme.ink,lineHeight:1.5}}>{t}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{position:'sticky',top:120}}>
        <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:v4Theme.blue,
            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:v4Theme.blue,
            color:v4Theme.bg,border:'none',borderRadius:999,padding:'16px',
            fontFamily:v4Theme.fontBody,fontWeight:600,fontSize:15,cursor:'pointer',
            textDecoration:'none',textAlign:'center',boxSizing:'border-box',marginBottom:12}}>
            Réserver ma visite
          </a>
          <a href={v4Href('contact.html')} style={{display:'block',width:'100%',background:'transparent',
            color:v4Theme.ink,border:`1px solid ${v4Theme.border}`,borderRadius:999,padding:'16px',
            fontFamily:v4Theme.fontBody,fontWeight:500,fontSize:15,cursor:'pointer',
            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}}>
            Délai moyen : <strong style={{color:v4Theme.ink}}>10 jours</strong> entre la prise de rendez-vous et la mise en ligne.
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── Sectors data ──────────────────────────────────────────────────────────
const sectors = [
  { slug:'restaurants', name:'Restaurants & cafés', color:v4Theme.blue,
    Visual: VisRestaurant,
    tagline:'L\'ambiance vend autant que le menu.',
    body:'Capturer la lumière, la déco, la table d\'hôte. Les clients réservent ce qu\'ils ont déjà vu.' },
  { slug:'hotels', name:'Hôtels & auberges', color:v4Theme.teal,
    Visual: VisHotel,
    tagline:'Une chambre qu\'on voit, c\'est une chambre qu\'on prend.',
    body:'Chambres, salle commune, vue du balcon, spa. Le client choisit son séjour avec confiance.' },
  { slug:'spas', name:'Spas & bien-être', color:v4Theme.purple,
    Visual: VisSpa,
    tagline:'L\'expérience commence avant la porte.',
    body:'Bassins, salles de soin, ambiance feutrée. Le calme se ressent dès la fiche Google.' },
  { slug:'salles-reception', name:'Salles de réception', color:v4Theme.warm,
    Visual: VisEvents,
    tagline:'Choisir un lieu de mariage sans se déplacer.',
    body:'Salles, terrasses, lumière du jour, capacités. Moins de visites pour voir, plus de rencontres utiles.' },
  { slug:'boutiques', name:'Boutiques & détaillants', color:v4Theme.blue,
    Visual: VisBoutique,
    tagline:'Donnez envie de pousser la porte.',
    body:'Vitrine, allées, sélection. Les passants en ligne deviennent des passants en magasin.' },
  { slug:'cliniques', name:'Cliniques médicales & dentaires', color:v4Theme.teal,
    Visual: VisClinique,
    tagline:'Rassurer avant le rendez-vous.',
    body:'Salle d\'attente, salles d\'examen, équipement. Les nouveaux patients arrivent moins anxieux.' },
  { slug:'pourvoiries', name:'Pourvoiries & chalets', color:v4Theme.purple,
    Visual: VisPourvoirie,
    tagline:'Le lac, le chalet, la quiétude, vus de chez eux.',
    body:'Chalets, pourvoirie, ponton, vue sur le lac. Vos locations partent plus tôt en saison.' },
  { slug:'microbrasseries', name:'Microbrasseries & vignobles', color:v4Theme.warm,
    Visual: VisMicrobrasserie,
    tagline:'L\'atelier, c\'est la moitié de l\'histoire.',
    body:'Cuves, fûts, bar de dégustation, terrasse. Les visiteurs prévoient le détour.' },
  { slug:'loisirs', name:'Loisirs et tourisme', color:v4Theme.blue,
    Visual: VisLoisirs,
    tagline:'Le sentier, le départ, le panorama, déjà visibles.',
    body:'Stations, sentiers, départs, points d\'intérêt. Les visiteurs planifient leur journée avant d\'arriver.' },
];

// ── Sectors intro ─────────────────────────────────────────────────────────
const SectorsIntro = () => (
  <section id="secteurs" style={{padding:'120px 56px 40px',background:v4Theme.bg2,
    borderTop:`1px solid ${v4Theme.border}`,scrollMarginTop:80}}>
    <div style={{maxWidth:1440,margin:'0 auto',display:'grid',
      gridTemplateColumns:'1fr 1fr',gap:64,alignItems:'flex-end'}}>
      <div>
        <div style={{fontFamily:v4Theme.fontBody,fontSize:11,letterSpacing:1.5,
          textTransform:'uppercase',color:v4Theme.muted,fontWeight:600,marginBottom:16}}>
          Par secteur · Approche sur mesure
        </div>
        <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:64,fontWeight:700,
          color:v4Theme.ink,margin:0,letterSpacing:-2,lineHeight:1.05,textWrap:'balance'}}>
          Tous les commerces y gagnent. <em style={{
            background:`linear-gradient(135deg, ${v4Theme.blue}, ${v4Theme.purple})`,
            WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
            fontStyle:'italic',fontWeight:600,display:'inline-block',paddingRight:'0.08em'}}>
            Pas de la même façon.</em>
        </h2>
      </div>
      <div style={{fontFamily:v4Theme.fontBody,fontSize:17,color:v4Theme.inkSoft,
        lineHeight:1.7,display:'flex',flexDirection:'column',gap:16}}>
        <p style={{margin:0}}>
          Un restaurant ne se photographie pas comme une clinique. Une auberge ne se vend pas comme un vignoble. Chaque secteur a ses moments de vérité.
        </p>
        <p style={{margin:0}}>
          Voici les <strong style={{color:v4Theme.ink}}>secteurs pour lesquels on a une approche dédiée</strong> : ce qu'on capte, dans quel ordre, et ce que vos clients veulent voir avant de venir.
        </p>
      </div>
    </div>
  </section>
);

// ── Sector card ───────────────────────────────────────────────────────────
const SectorCard = ({ sector }) => {
  const { slug, name, color, Visual, tagline, body } = sector;
  return (
    <a href={v4Href(`tour-virtuel-360/${slug}/index.html`)} style={{
      textDecoration:'none',background:v4Theme.surface,borderRadius:28,padding:24,
      border:`1px solid ${v4Theme.border}`,
      boxShadow:'0 4px 20px rgba(10,24,64,0.04)',
      display:'flex',flexDirection:'column',color:v4Theme.ink,
    }}>
      <Visual/>
      <div style={{display:'inline-flex',alignItems:'center',gap:8,marginBottom:14,
        padding:'5px 10px',borderRadius:999,background:`${color}12`,alignSelf:'flex-start'}}>
        <span style={{width:6,height:6,borderRadius:'50%',background:color}}/>
        <span style={{fontFamily:v4Theme.fontBody,fontSize:12,color,fontWeight:600,letterSpacing:0.3}}>
          Secteur
        </span>
      </div>
      <h3 style={{fontFamily:v4Theme.fontDisplay,fontSize:26,fontWeight:600,
        color:v4Theme.ink,margin:0,marginBottom:8,letterSpacing:-0.5,lineHeight:1.15}}>
        {name}
      </h3>
      <div style={{fontFamily:v4Theme.fontDisplay,fontSize:18,fontStyle:'italic',
        color,fontWeight:500,marginBottom:14,lineHeight:1.3,letterSpacing:-0.3}}>
        {tagline}
      </div>
      <p style={{fontFamily:v4Theme.fontBody,fontSize:14,color:v4Theme.inkSoft,
        lineHeight:1.6,margin:0,marginBottom:20}}>{body}</p>
      <div style={{marginTop:'auto',paddingTop:20,borderTop:`1px solid ${v4Theme.border}`,
        display:'flex',alignItems:'center',justifyContent:'flex-end',gap:16}}>
        <span style={{fontFamily:v4Theme.fontBody,fontSize:13,fontWeight:600,color,
          whiteSpace:'nowrap'}}>Voir le secteur →</span>
      </div>
    </a>
  );
};

const SectorsGrid = () => (
  <section style={{padding:'40px 56px 60px',background:v4Theme.bg2}}>
    <div style={{maxWidth:1440,margin:'0 auto',
      display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
      {sectors.map(s=>(<SectorCard key={s.slug} sector={s}/>))}
    </div>
  </section>
);

// ── Mountain teaser, pointer to dedicated ski-resort page ───────────────
const MountainTeaser = () => (
  <section style={{padding:'0 56px 100px',background:v4Theme.bg2}}>
    <a href={v4Href('tour-virtuel-360/montagne-ski/index.html')} style={{
      display:'flex',alignItems:'center',justifyContent:'space-between',gap:32,
      maxWidth:1440,margin:'0 auto',padding:'28px 36px',
      background:`linear-gradient(135deg, #0a1840 0%, ${v4Theme.blue} 50%, ${v4Theme.purple} 100%)`,
      borderRadius:24,textDecoration:'none',color:'#fff',flexWrap:'wrap',
      boxShadow:'0 12px 40px rgba(10,24,64,0.2)'}}>
      <div style={{display:'flex',alignItems:'center',gap:20,minWidth:0,flex:'1 1 480px'}}>
        <svg width="48" height="48" viewBox="0 0 48 48" style={{flexShrink:0}}>
          <path d="M4,42 L18,18 L26,28 L34,14 L44,42 Z" fill="#fff" opacity="0.95"/>
          <path d="M18,18 L22,24 L26,28 L18,18 Z" fill={v4Theme.warm}/>
          <path d="M34,14 L38,22 L34,14 Z" fill={v4Theme.teal}/>
        </svg>
        <div style={{minWidth:0}}>
          <div style={{fontFamily:v4Theme.fontBody,fontSize:11,letterSpacing:1.5,
            textTransform:'uppercase',color:'rgba(255,255,255,0.7)',fontWeight:600,marginBottom:6}}>
            Service spécialisé
          </div>
          <div style={{fontFamily:v4Theme.fontDisplay,fontSize:26,fontWeight:600,
            letterSpacing:-0.5,lineHeight:1.2}}>
            Stations de ski, sentiers et grands domaines : voir <em style={{color:v4Theme.warm,fontStyle:'italic'}}>Montagnes et ski →</em>
          </div>
        </div>
      </div>
      <div style={{fontFamily:v4Theme.fontBody,fontSize:14,color:'rgba(255,255,255,0.85)',
        fontWeight:500,flexShrink:0}}>
        Captation en hiver · 2 jours sur place · forfait dédié
      </div>
    </a>
  </section>
);

// ── Bloc "vous n'êtes pas listé" ──────────────────────────────────────────
const SectorsNotListed = () => (
  <section style={{padding:'80px 56px',background:v4Theme.bg,
    borderTop:`1px solid ${v4Theme.border}`}}>
    <div style={{maxWidth:1100,margin:'0 auto',padding:'56px 64px',
      background:v4Theme.surface,borderRadius:32,border:`1px solid ${v4Theme.border}`,
      boxShadow:'0 4px 20px rgba(10,24,64,0.04)',
      display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48,alignItems:'center'}}>
      <div>
        <div style={{fontFamily:v4Theme.fontBody,fontSize:11,letterSpacing:1.5,
          textTransform:'uppercase',color:v4Theme.muted,fontWeight:600,marginBottom:14}}>
          Vous ne vous reconnaissez pas ?
        </div>
        <h2 style={{fontFamily:v4Theme.fontDisplay,fontSize:40,fontWeight:600,
          color:v4Theme.ink,margin:0,marginBottom:18,letterSpacing:-1,lineHeight:1.15,textWrap:'balance'}}>
          On a aussi capturé des écoles, garderies, salles de sport, concessionnaires, bureaux pro.
        </h2>
        <p style={{fontFamily:v4Theme.fontBody,fontSize:16,color:v4Theme.inkSoft,
          margin:0,lineHeight:1.6,maxWidth:560}}>
          Si on peut entrer chez vous avec une caméra, on peut faire entrer vos clients dessus depuis Google. Décrivez-nous votre commerce, on vous dit honnêtement si ça vaut le coup.
        </p>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        <V4Button primary href="contact.html">Parler à un humain · gratuit →</V4Button>
        <V4Button href="services-avis.html">Voir les autres services</V4Button>
      </div>
    </div>
  </section>
);

// ── App ───────────────────────────────────────────────────────────────────
const Tours360App = () => (
  <div style={{background:v4Theme.bg,color:v4Theme.ink,fontFamily:v4Theme.fontBody}}>
    <V4Nav active="tours"/>
    <V4PageHero
      eyebrow="Service · Tours virtuels 360° et Google Street View"
      title="Vos clients entrent"
      gradient="avant d'arriver."
      subtitle="Visite virtuelle Google Street View + 15+ photos HDR professionnelles. Une seule visite sur place. Vos images publiées sur Google sous 10 jours."
      accent={v4Theme.blue}/>
    <ToursDetail/>
    <SectorsIntro/>
    <SectorsGrid/>
    <MountainTeaser/>
    <SectorsNotListed/>
    <V4FinalCTA title="On capture votre commerce" gradientPart="cette semaine ?"/>
    <V4Footer/>
  </div>
);

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