// Dynamic animated SVG visuals, one per sector, in the brand language.
// Inspired by the ski page (animated layers, pulses, drifts) but tailored to
// each business context: restaurants, hotels, spas, events, boutiques,
// clinics, outdoor lodging, breweries, leisure/tourism.

// ── Inject shared keyframes once ───────────────────────────────────────────
if (typeof document !== 'undefined' && !document.getElementById('t360-anim-styles')) {
  const css = document.createElement('style');
  css.id = 't360-anim-styles';
  css.textContent = `
    @keyframes t360-pulse-soft { 0%,100% { transform: scale(1); opacity: var(--o,0.8);} 50% { transform: scale(1.06); opacity: 1; } }
    @keyframes t360-ripple { 0% { transform: scale(0.4); opacity: 0.9;} 100% { transform: scale(2.6); opacity: 0;} }
    @keyframes t360-steam { 0% { transform: translateY(0) scale(1); opacity: 0;} 15% { opacity: 0.55;} 100% { transform: translateY(-50px) scale(1.5); opacity: 0;} }
    @keyframes t360-bubble { 0% { transform: translateY(0); opacity: 0;} 10% { opacity: 0.9;} 100% { transform: translateY(-70px); opacity: 0;} }
    @keyframes t360-twinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
    @keyframes t360-drift { 0% { transform: translateX(-30%);} 100% { transform: translateX(130%);} }
    @keyframes t360-fall { 0% { transform: translate3d(0,-10%,0) rotate(0deg); opacity: 0;} 10% { opacity: 1;} 100% { transform: translate3d(var(--dx,20px),120%,0) rotate(360deg); opacity: 0;} }
    @keyframes t360-glow { 0%,100% { opacity: 0.55;} 50% { opacity: 1;} }
    @keyframes t360-dash { to { stroke-dashoffset: -200; } }
    @keyframes t360-ecg { 0% { stroke-dashoffset: 600;} 100% { stroke-dashoffset: 0;} }
    @keyframes t360-spin { to { transform: rotate(360deg);} }
    @keyframes t360-blink { 0%,40%,100% { opacity: 1;} 45%,55% { opacity: 0.15;} }
    @keyframes t360-walk { 0% { transform: translateX(-10%);} 100% { transform: translateX(110%);} }
    @keyframes t360-wave { 0%,100% { transform: translateX(0);} 50% { transform: translateX(-30px);} }
    @keyframes t360-leaf { 0% { transform: translate3d(0,-10%,0) rotate(0);} 50% { transform: translate3d(20px,50%,0) rotate(180deg);} 100% { transform: translate3d(-20px,120%,0) rotate(360deg);} }
  `;
  document.head.appendChild(css);
}

// ── Card frame ─────────────────────────────────────────────────────────────
const TourVisual = ({ children, bg, height = 200 }) => (
  <div style={{
    position:'relative', height, borderRadius:20, overflow:'hidden',
    background: bg, marginBottom: 24, isolation:'isolate',
  }}>{children}</div>
);

// ── 1. Restaurants & cafés ─────────────────────────────────────────────────
const VisRestaurant = () => {
  const bulbs = [{x:25,d:0},{x:50,d:0.6},{x:75,d:1.2}];
  return (
    <TourVisual bg={`linear-gradient(180deg, #0d1a3d 0%, #1e3a8a 50%, #2a4d99 100%)`}>
      {/* warm haze */}
      <div style={{position:'absolute',inset:0,
        background:`radial-gradient(ellipse at 50% 80%, ${v4Theme.warm}55, transparent 60%)`}}/>
      {/* pendant lights */}
      {bulbs.map((b,i)=>(
        <div key={i} style={{position:'absolute',top:0,left:`${b.x}%`,
          display:'flex',flexDirection:'column',alignItems:'center'}}>
          <div style={{width:1,height:55,background:'rgba(255,255,255,0.25)'}}/>
          <div style={{width:18,height:22,borderRadius:'50% 50% 40% 40%',
            background:`radial-gradient(circle at 50% 35%, #fff5d4, ${v4Theme.warm} 60%, #b8741a)`,
            boxShadow:`0 0 30px ${v4Theme.warm}b0, 0 0 60px ${v4Theme.warm}60`,
            animation:`t360-pulse-soft 3.2s ease-in-out ${b.d}s infinite`,'--o':0.85}}/>
        </div>
      ))}
      {/* table silhouette */}
      <div style={{position:'absolute',bottom:0,left:'10%',right:'10%',height:32,
        background:'rgba(0,0,0,0.5)',
        clipPath:'polygon(0 100%, 100% 100%, 92% 30%, 8% 30%)'}}/>
      {/* dishes on table */}
      {[28,50,72].map((x,i)=>(
        <div key={i} style={{position:'absolute',bottom:24,left:`${x}%`,
          width:18,height:5,borderRadius:'50%',background:'rgba(255,255,255,0.85)',
          marginLeft:-9}}/>
      ))}
      {/* rising steam */}
      {[30,52,72].map((x,i)=>(
        <div key={i} style={{position:'absolute',bottom:30,left:`${x}%`,
          width:14,height:14,borderRadius:'50%',background:'rgba(255,255,255,0.45)',
          filter:'blur(4px)',marginLeft:-7,
          animation:`t360-steam 3.5s ease-out ${i*0.7}s infinite`}}/>
      ))}
    </TourVisual>
  );
};

// ── 2. Hôtels & auberges ───────────────────────────────────────────────────
const VisHotel = () => (
  <TourVisual bg={`linear-gradient(180deg, #b8e6e8 0%, #7dc8d4 35%, ${v4Theme.teal} 75%, #1a6470 100%)`}>
    {/* moon */}
    <div style={{position:'absolute',top:22,right:36,width:46,height:46,borderRadius:'50%',
      background:'radial-gradient(circle at 35% 35%, #fff, #fff8e0 60%, #e8d4a0)',
      boxShadow:'0 0 30px rgba(255,255,240,0.5)'}}/>
    {/* drifting cloud */}
    <div style={{position:'absolute',top:30,left:0,width:'100%',height:30,
      animation:'t360-drift 18s linear infinite'}}>
      <div style={{width:80,height:18,borderRadius:30,background:'rgba(255,255,255,0.55)',
        filter:'blur(2px)'}}/>
    </div>
    {/* mountains */}
    <svg style={{position:'absolute',bottom:0,left:0,width:'100%',height:'60%'}}
      viewBox="0 0 400 130" preserveAspectRatio="none">
      <path d="M0,130 L70,55 L140,80 L240,30 L340,65 L400,50 L400,130 Z"
        fill={v4Theme.blue} opacity="0.45"/>
      <path d="M0,130 L80,70 L180,90 L280,55 L400,75 L400,130 Z"
        fill={v4Theme.blue} opacity="0.85"/>
    </svg>
    {/* hotel building */}
    <div style={{position:'absolute',bottom:8,right:30,
      width:54,height:60,background:'#0a1840',borderRadius:'4px 4px 0 0'}}>
      {/* windows */}
      <div style={{position:'absolute',inset:'8px 6px',display:'grid',
        gridTemplateColumns:'1fr 1fr 1fr',gridTemplateRows:'1fr 1fr 1fr',gap:3}}>
        {[0,1,2,3,4,5,6,7,8].map(i=>(
          <div key={i} style={{background:v4Theme.warm,
            opacity: i===4 ? 1 : 0.35,
            animation: i===4 ? 't360-glow 2.4s ease-in-out infinite' : undefined,
            boxShadow: i===4 ? `0 0 10px ${v4Theme.warm}` : undefined}}/>
        ))}
      </div>
    </div>
  </TourVisual>
);

// ── 3. Spas & bien-être ────────────────────────────────────────────────────
const VisSpa = () => (
  <TourVisual bg={`linear-gradient(135deg, #d9c1f5 0%, #b687e6 50%, ${v4Theme.purple} 100%)`}>
    {/* ripples */}
    {[0,1.2,2.4].map((d,i)=>(
      <div key={i} style={{position:'absolute',top:'50%',left:'50%',
        width:50,height:50,marginLeft:-25,marginTop:-25,borderRadius:'50%',
        border:'2px solid rgba(255,255,255,0.65)',
        animation:`t360-ripple 4s ease-out ${d}s infinite`}}/>
    ))}
    {/* center bead */}
    <div style={{position:'absolute',top:'50%',left:'50%',
      width:26,height:26,marginLeft:-13,marginTop:-13,borderRadius:'50%',
      background:'radial-gradient(circle at 35% 35%, #fff, #f0e4ff)',
      boxShadow:'0 0 30px rgba(255,255,255,0.7)',
      animation:'t360-pulse-soft 3s ease-in-out infinite','--o':0.95}}/>
    {/* falling droplets */}
    {[20,35,68,82].map((x,i)=>(
      <div key={i} style={{position:'absolute',top:-10,left:`${x}%`,
        width:4,height:10,borderRadius:'0 0 50% 50% / 0 0 60% 60%',
        background:'rgba(255,255,255,0.85)',
        animation:`t360-fall 3.6s linear ${i*0.7}s infinite`,'--dx':'4px'}}/>
    ))}
    {/* base water glow */}
    <div style={{position:'absolute',bottom:0,left:0,right:0,height:40,
      background:'linear-gradient(180deg, transparent, rgba(255,255,255,0.18))'}}/>
  </TourVisual>
);

// ── 4. Salles de réception ────────────────────────────────────────────────
const VisEvents = () => (
  <TourVisual bg={`linear-gradient(160deg, #fff3d6 0%, ${v4Theme.warm} 55%, #e89834 100%)`}>
    {/* arch silhouette */}
    <svg style={{position:'absolute',bottom:0,left:0,width:'100%',height:'100%'}}
      viewBox="0 0 400 200" preserveAspectRatio="none">
      <path d="M40,200 L40,90 Q200,20 360,90 L360,200 Z" fill="rgba(255,255,255,0.25)"/>
      <path d="M70,200 L70,110 Q200,55 330,110 L330,200 Z" fill="rgba(255,255,255,0.35)"/>
    </svg>
    {/* string of lights */}
    <svg style={{position:'absolute',top:0,left:0,width:'100%',height:80}}
      viewBox="0 0 400 80" preserveAspectRatio="none">
      <path d="M0,20 Q200,75 400,20" stroke="rgba(0,0,0,0.25)" strokeWidth="1" fill="none"/>
    </svg>
    {[10,22,34,46,58,70,82,94].map((x,i)=>{
      const y = 20 + Math.sin((x/100)*Math.PI)*55;
      return (
        <div key={i} style={{position:'absolute',top:y,left:`${x}%`,
          width:8,height:8,borderRadius:'50%',marginLeft:-4,
          background:'#fff5d4',boxShadow:'0 0 10px #fff5d4, 0 0 20px #fff5d480',
          animation:`t360-twinkle 1.8s ease-in-out ${i*0.2}s infinite`}}/>
      );
    })}
    {/* confetti */}
    {[15,28,42,55,68,80,90].map((x,i)=>(
      <div key={i} style={{position:'absolute',top:0,left:`${x}%`,
        width:6,height:8,
        background: i%3===0 ? v4Theme.purple : i%3===1 ? v4Theme.teal : '#fff',
        animation:`t360-fall ${3+i*0.3}s linear ${i*0.5}s infinite`,
        '--dx': `${(i%2===0 ? 30 : -30)}px`}}/>
    ))}
  </TourVisual>
);

// ── 5. Boutiques & détaillants ────────────────────────────────────────────
const VisBoutique = () => (
  <TourVisual bg={`linear-gradient(180deg, #c8d8ee 0%, #e8d4a0 60%, ${v4Theme.bg2} 100%)`}>
    {/* storefront */}
    <div style={{position:'absolute',bottom:0,left:'15%',right:'15%',top:50,
      background:'#fff',borderRadius:'4px 4px 0 0',
      boxShadow:'0 -2px 0 rgba(0,0,0,0.1) inset'}}/>
    {/* awning */}
    <svg style={{position:'absolute',top:30,left:'13%',width:'74%',height:30}}
      viewBox="0 0 280 30" preserveAspectRatio="none">
      <path d="M0,0 L280,0 L290,30 L-10,30 Z" fill={v4Theme.blue}/>
      {[0,1,2,3,4,5,6].map(i=>(
        <rect key={i} x={i*40} y="0" width="20" height="30" fill={v4Theme.teal} opacity="0.85"/>
      ))}
    </svg>
    {/* OPEN sign */}
    <div style={{position:'absolute',top:75,left:'52%',
      padding:'3px 8px',background:v4Theme.warm,color:'#fff',
      fontFamily:'"Bricolage Grotesque",sans-serif',fontSize:9,fontWeight:700,
      letterSpacing:1,borderRadius:3,
      animation:'t360-blink 3s ease-in-out infinite'}}>OPEN</div>
    {/* window items */}
    <div style={{position:'absolute',bottom:0,left:'22%',width:50,height:60,
      background:v4Theme.teal,opacity:0.35,borderRadius:'4px 4px 0 0'}}/>
    <div style={{position:'absolute',bottom:0,right:'22%',width:50,height:60,
      background:v4Theme.warm,opacity:0.45,borderRadius:'4px 4px 0 0'}}/>
    <div style={{position:'absolute',bottom:0,left:'45%',width:34,height:80,
      background:v4Theme.blue,opacity:0.25,borderRadius:'4px 4px 0 0'}}/>
    {/* walking customer silhouette */}
    <div style={{position:'absolute',bottom:6,width:'10%',height:24,
      animation:'t360-walk 9s linear infinite'}}>
      <div style={{width:8,height:8,borderRadius:'50%',background:'#0a1840',marginBottom:1}}/>
      <div style={{width:10,height:14,background:'#0a1840',borderRadius:2,marginLeft:-1}}/>
    </div>
  </TourVisual>
);

// ── 6. Cliniques médicales & dentaires ────────────────────────────────────
const VisClinique = () => (
  <TourVisual bg={`linear-gradient(135deg, #e8f8f8 0%, #b8e6e8 100%)`}>
    {/* grid */}
    <div style={{position:'absolute',inset:0,
      backgroundImage:`linear-gradient(${v4Theme.teal}20 1px, transparent 1px), linear-gradient(90deg, ${v4Theme.teal}20 1px, transparent 1px)`,
      backgroundSize:'24px 24px'}}/>
    {/* ECG line */}
    <svg style={{position:'absolute',top:'50%',left:0,width:'100%',height:60,marginTop:-30}}
      viewBox="0 0 400 60" preserveAspectRatio="none">
      <path d="M0,30 L80,30 L100,30 L110,10 L120,50 L130,15 L140,30 L220,30 L240,30 L250,10 L260,50 L270,15 L280,30 L400,30"
        stroke={v4Theme.teal} strokeWidth="2.5" fill="none" strokeLinecap="round"
        strokeDasharray="600"
        style={{animation:'t360-ecg 2.5s linear infinite'}}/>
    </svg>
    {/* center card */}
    <div style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',
      width:72,height:72,borderRadius:20,background:'#fff',
      boxShadow:`0 10px 30px ${v4Theme.teal}55`,
      display:'flex',alignItems:'center',justifyContent:'center',
      animation:'t360-pulse-soft 2.5s ease-in-out infinite','--o':1}}>
      <svg width="36" height="36" viewBox="0 0 40 40">
        <rect x="16" y="6" width="8" height="28" fill={v4Theme.teal} rx="2"/>
        <rect x="6" y="16" width="28" height="8" fill={v4Theme.teal} rx="2"/>
      </svg>
    </div>
  </TourVisual>
);

// ── 7. Pourvoiries & chalets ──────────────────────────────────────────────
const VisPourvoirie = () => (
  <TourVisual bg={`linear-gradient(180deg, #2a1f4a 0%, #5a3d8a 35%, ${v4Theme.purple} 65%, #c9a8ee 100%)`}>
    {/* moon */}
    <div style={{position:'absolute',top:24,right:'25%',width:32,height:32,borderRadius:'50%',
      background:'#fff',boxShadow:'0 0 40px rgba(255,255,255,0.6)'}}/>
    {/* pine trees */}
    <svg style={{position:'absolute',bottom:'42%',left:0,width:'100%',height:60}}
      viewBox="0 0 400 60" preserveAspectRatio="none">
      {[20,50,90,140,210,260,310,360,385].map((x,i)=>{
        const h = 22 + (i%3)*8;
        return (
          <polygon key={i}
            points={`${x},${60-h} ${x-h*0.4},60 ${x+h*0.4},60`}
            fill="#1a0f3a" opacity={0.85}/>
        );
      })}
    </svg>
    {/* lake reflection */}
    <div style={{position:'absolute',bottom:0,left:0,right:0,height:'42%',
      background:`linear-gradient(180deg, ${v4Theme.purple}90, #3a2e6b 80%)`,
      overflow:'hidden'}}>
      {/* moon reflection */}
      <div style={{position:'absolute',top:10,right:'25%',width:18,height:34,
        background:'radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.7), transparent 70%)',
        marginLeft:-9,animation:'t360-wave 4s ease-in-out infinite'}}/>
      {/* horizontal ripples */}
      {[15,35,55,75].map((y,i)=>(
        <div key={i} style={{position:'absolute',top:`${y}%`,left:0,right:0,height:1,
          background:'rgba(255,255,255,0.25)',
          animation:`t360-wave ${4+i}s ease-in-out ${i*0.4}s infinite`}}/>
      ))}
    </div>
    {/* fireflies */}
    {[15,35,55,75].map((x,i)=>(
      <div key={i} style={{position:'absolute',top:`${20+(i%3)*15}%`,left:`${x}%`,
        width:3,height:3,borderRadius:'50%',background:'#fff5d4',
        boxShadow:'0 0 8px #fff5d4',
        animation:`t360-twinkle ${1.5+i*0.3}s ease-in-out ${i*0.4}s infinite`}}/>
    ))}
  </TourVisual>
);

// ── 8. Microbrasseries & vignobles ────────────────────────────────────────
const VisMicrobrasserie = () => (
  <TourVisual bg={`linear-gradient(135deg, #2a1f10 0%, #5a3a18 50%, ${v4Theme.warm} 100%)`}>
    {/* glass */}
    <div style={{position:'absolute',top:30,left:'50%',transform:'translateX(-50%)',
      width:80,height:130,
      background:`linear-gradient(180deg, #f5b85c00 0%, #f5b85c40 15%, ${v4Theme.warm}d0 100%)`,
      borderRadius:'4px 4px 12px 12px',
      border:'1.5px solid rgba(255,255,255,0.4)',
      overflow:'hidden'}}>
      {/* foam */}
      <div style={{position:'absolute',top:0,left:0,right:0,height:14,
        background:'#fff5d4',borderRadius:'4px 4px 50% 50% / 4px 4px 100% 100%'}}/>
      <div style={{position:'absolute',top:10,left:-2,width:18,height:10,borderRadius:'50%',
        background:'#fff5d4'}}/>
      <div style={{position:'absolute',top:8,right:0,width:22,height:12,borderRadius:'50%',
        background:'#fff5d4'}}/>
      {/* bubbles */}
      {[15,38,55,72,28,60].map((x,i)=>(
        <div key={i} style={{position:'absolute',bottom:0,left:`${x}%`,
          width:4+(i%3)*2,height:4+(i%3)*2,borderRadius:'50%',
          background:'rgba(255,245,212,0.85)',
          animation:`t360-bubble ${2.5+(i%3)}s ease-in ${i*0.5}s infinite`}}/>
      ))}
      {/* highlight */}
      <div style={{position:'absolute',top:18,left:6,width:6,height:60,
        background:'rgba(255,255,255,0.4)',borderRadius:3}}/>
    </div>
    {/* wheat sprig */}
    <svg style={{position:'absolute',bottom:10,left:30,width:34,height:80}} viewBox="0 0 34 80">
      <line x1="17" y1="80" x2="17" y2="20" stroke={v4Theme.warm} strokeWidth="1.5"/>
      {[60,48,36,24].map((y,i)=>(
        <g key={i}>
          <ellipse cx={17-6} cy={y} rx="4" ry="6" fill={v4Theme.warm} transform={`rotate(-30 ${17-6} ${y})`}/>
          <ellipse cx={17+6} cy={y} rx="4" ry="6" fill={v4Theme.warm} transform={`rotate(30 ${17+6} ${y})`}/>
        </g>
      ))}
    </svg>
    {/* grape cluster */}
    <svg style={{position:'absolute',bottom:10,right:24,width:36,height:50}} viewBox="0 0 36 50">
      {[[18,12],[12,20],[24,20],[8,28],[18,28],[28,28],[14,36],[22,36],[18,44]].map(([x,y],i)=>(
        <circle key={i} cx={x} cy={y} r="4" fill={v4Theme.purple} opacity="0.9"/>
      ))}
      <path d="M16,8 Q22,4 28,8" stroke="#7a5028" strokeWidth="1.5" fill="none"/>
    </svg>
  </TourVisual>
);

// ── 9. Loisirs et tourisme ────────────────────────────────────────────────
const VisLoisirs = () => (
  <TourVisual bg={`linear-gradient(160deg, #d8e8ff 0%, #a8c5ee 50%, ${v4Theme.blue} 100%)`}>
    {/* topo lines */}
    <svg style={{position:'absolute',inset:0,width:'100%',height:'100%'}}
      viewBox="0 0 400 200" preserveAspectRatio="none">
      {[0,1,2,3,4,5].map(i=>{
        const r = 30 + i*30;
        return (
          <ellipse key={i} cx="200" cy="120" rx={r*1.5} ry={r*0.7}
            fill="none" stroke="#fff" strokeWidth="1" opacity={0.18 - i*0.02}/>
        );
      })}
    </svg>
    {/* dotted route */}
    <svg style={{position:'absolute',inset:0,width:'100%',height:'100%'}}
      viewBox="0 0 400 200" preserveAspectRatio="none">
      <path d="M40,160 Q120,80 200,110 T360,50" stroke="#fff" strokeWidth="2.5"
        fill="none" strokeDasharray="6 8" strokeLinecap="round"
        style={{animation:'t360-dash 4s linear infinite'}}/>
    </svg>
    {/* start pin */}
    <div style={{position:'absolute',bottom:30,left:'8%',
      width:14,height:14,borderRadius:'50%',background:'#fff',
      border:`3px solid ${v4Theme.warm}`,
      boxShadow:`0 0 0 4px ${v4Theme.warm}40`}}/>
    {/* end pin (animated) */}
    <div style={{position:'absolute',top:36,right:'8%'}}>
      <div style={{width:22,height:22,borderRadius:'50% 50% 50% 0',
        background:v4Theme.warm,transform:'rotate(-45deg)',
        boxShadow:`0 4px 12px ${v4Theme.blue}80`}}/>
      <div style={{position:'absolute',top:-4,left:-4,width:30,height:30,borderRadius:'50%',
        border:`2px solid ${v4Theme.warm}`,
        animation:'t360-ripple 2.4s ease-out infinite'}}/>
    </div>
    {/* compass top-left */}
    <svg style={{position:'absolute',top:14,left:14,width:30,height:30,
      animation:'t360-spin 18s linear infinite'}} viewBox="0 0 30 30">
      <circle cx="15" cy="15" r="13" fill="rgba(255,255,255,0.85)"/>
      <polygon points="15,5 12,16 15,14 18,16" fill={v4Theme.warm}/>
      <polygon points="15,25 12,14 15,16 18,14" fill={v4Theme.blue}/>
    </svg>
  </TourVisual>
);

// Expose globally so the page can compose them
window.VisRestaurant = VisRestaurant;
window.VisHotel = VisHotel;
window.VisSpa = VisSpa;
window.VisEvents = VisEvents;
window.VisBoutique = VisBoutique;
window.VisClinique = VisClinique;
window.VisPourvoirie = VisPourvoirie;
window.VisMicrobrasserie = VisMicrobrasserie;
window.VisLoisirs = VisLoisirs;
