// V1, "Sommet cinématique · de jour" : ciel d'hiver lumineux, sommet enneigé,
// dégradé du ciel d'altitude vers la vallée chaleureuse.

// ── Télésiège du hero ─────────────────────────────────────────────────────
// Même repère que les couches de montagne (viewBox 1000x600, sans ratio fixe),
// pour que pylônes et gare d'arrivée tombent exactement sur le relief.
const SummitLift = ({ ink, warm }) => {
  // Profil de la montagne avant (doit rester identique à la couche « Front big peak »)
  const ridge = [[0,560],[120,520],[240,540],[380,480],[520,240],[560,230],[600,260],[720,380]];
  const groundAt = (x) => {
    for (let i = 0; i < ridge.length - 1; i++) {
      const [x1,y1] = ridge[i], [x2,y2] = ridge[i+1];
      if (x >= x1 && x <= x2) return y1 + (y2 - y1) * (x - x1) / (x2 - x1);
    }
    return ridge[0][1];
  };
  const H = 34;                                   // hauteur des pylônes
  const towers = [70, 175, 290, 395, 460, 505];   // pylônes posés sur le relief
  const top = { x: 540, y: groundAt(540) - 16 };  // gare d'arrivée au sommet
  const up = [[-80, 552], ...towers.map(x => [x, groundAt(x) - H]), [top.x, top.y]];
  const down = up.map(([x, y]) => [x, y - 5]);    // câble de retour, légèrement au-dessus
  const d = (pts) => 'M' + pts.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(' L');
  const upPath = d(up), downPath = d([...down].reverse());
  const N = 8, DUR = 26;

  const Chair = ({ occupied }) => (
    <g>
      <line x1="0" y1="0" x2="0" y2="9" stroke={ink} strokeWidth="1" />
      <rect x="-5" y="9" width="10" height="2.2" rx="0.6" fill={ink} />
      <rect x="-5" y="5.5" width="1.6" height="5.5" rx="0.4" fill={ink} />
      <rect x="-4.4" y="9.4" width="8.8" height="0.6" fill={warm} />
      {occupied && <circle cx="0" cy="6.8" r="1.6" fill={warm} />}
    </g>
  );

  return (
    <svg viewBox="0 0 1000 600" preserveAspectRatio="none" aria-hidden="true"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible', pointerEvents: 'none' }}>
      {/* Pylônes */}
      {towers.map((x) => {
        const g = groundAt(x), t = g - H;
        return (
          <g key={x} stroke="rgba(10,24,64,0.7)" strokeLinecap="round">
            <line x1={x} y1={g + 2} x2={x} y2={t} strokeWidth="2.2" />
            <line x1={x - 7} y1={t - 1} x2={x + 7} y2={t - 1} strokeWidth="2" />
            <line x1={x - 3} y1={g + 2} x2={x + 3} y2={g + 2} strokeWidth="2" />
          </g>
        );
      })}
      {/* Câbles */}
      <path d={upPath} fill="none" stroke="rgba(10,24,64,0.6)" strokeWidth="0.9" />
      <path d={d(down)} fill="none" stroke="rgba(10,24,64,0.45)" strokeWidth="0.9" />
      {/* Plateau de neige sous le chalet : il épouse la pente pour que le chalet repose entièrement sur le sol */}
      <path fill="#f8fafc" d={(() => {
        const cx = 566, by = groundAt(560) + 1;
        const xs = [530 - cx, -30, -24, -18, -12, -6, 0, 6, 12, 18, 26].map(dx => cx + dx);
        return `M530,${groundAt(530).toFixed(1)} L530,${by} L${cx + 20},${by} ` +
          `L${cx + 32},${groundAt(cx + 32).toFixed(1)} ` +
          [...xs].reverse().map(x => `L${x},${(groundAt(x) + 1).toFixed(1)}`).join(' ') + ' Z';
      })()} />
      {/* Gare d'arrivée */}
      <g>
        {/* Le bâtiment descend jusqu'au sol, même du côté bas de la pente */}
        <rect x={top.x - 14} y={top.y - 6} width="26" height={groundAt(top.x - 14) + 2 - (top.y - 6)} rx="1.5" fill="#2a3f5c" />
        <path d={`M${top.x - 17},${top.y - 6} L${top.x - 1},${top.y - 16} L${top.x + 15},${top.y - 6} Z`} fill="#f4f7fb" />
        <circle cx={top.x} cy={top.y} r="5" fill="none" stroke="#f4f7fb" strokeWidth="1.2" />
      </g>
      {/* Chalet du sommet */}
      <g transform={`translate(566 ${groundAt(560)})`}>
        <rect x="-18" y="-16" width="36" height="17" fill="#5a3a22" />
        <path d="M-23,-15 L0,-32 L23,-15 Z" fill="#f4f7fb" />
        <path d="M-23,-15 L0,-32 L23,-15" fill="none" stroke="#3b2414" strokeWidth="1.2" />
        <rect x="-12" y="-11" width="6" height="5" fill={warm} />
        <rect x="6" y="-11" width="6" height="5" fill={warm} />
        <rect x="-3" y="-8" width="6" height="9" fill="#3b2414" />
        <rect x="9" y="-30" width="4" height="9" fill="#3b2414" />
      </g>
      {/* Sièges qui montent (sur le câble principal) et redescendent (câble de retour) */}
      {Array.from({ length: N }).map((_, i) => (
        <g key={'u' + i}>
          <Chair occupied={i % 3 !== 1} />
          <animateMotion dur={`${DUR}s`} repeatCount="indefinite" begin={`${-(i * DUR) / N}s`} path={upPath} />
        </g>
      ))}
      {Array.from({ length: N }).map((_, i) => (
        <g key={'d' + i}>
          <Chair occupied={false} />
          <animateMotion dur={`${DUR}s`} repeatCount="indefinite" begin={`${-(i * DUR) / N - DUR / (2 * N)}s`} path={downPath} />
        </g>
      ))}
    </svg>
  );
};

const SkiV1 = () => {
  // Daylight alpine palette
  const skyHigh = '#cfe9f8'; // bright high-altitude sky
  const skyMid = '#9cc8e2';
  const skyLow = '#6ea2c6';
  const valleyMid = '#a8c5db';
  const valleyLow = '#dfe9f1';
  const ink = '#0a1840'; // dark text on bright sky
  const inkSoft = '#3a4868';
  const snow = '#ffffff';
  const teal = v4Theme.teal;
  const purple = v4Theme.purple;
  const warm = v4Theme.warm;
  const blue = v4Theme.blue;

  return (
    <div style={{ background: skyHigh, color: ink, fontFamily: v4Theme.fontBody, position: 'relative', overflow: 'hidden' }}>

      {/* =============== NAV (shared) =============== */}
      <V4Nav active="montagne" />

      {/* =============================================================
            HERO, sommet enneigé, ciel d'hiver lumineux, télésiège animé
            ============================================================= */}
      <section style={{
        position: 'relative', height: 920, overflow: 'hidden',
        background: `linear-gradient(180deg, ${skyHigh} 0%, ${skyMid} 50%, ${skyLow} 100%)`
      }}>
        {/* Soft cloud wisps */}
        <svg viewBox="0 0 1000 600" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.55 }} preserveAspectRatio="xMidYMid slice">
          <ellipse cx="180" cy="100" rx="140" ry="14" fill="#ffffff" opacity="0.6" />
          <ellipse cx="200" cy="110" rx="80" ry="9" fill="#ffffff" opacity="0.5" />
          <ellipse cx="780" cy="80" rx="120" ry="11" fill="#ffffff" opacity="0.55" />
          <ellipse cx="650" cy="160" rx="180" ry="14" fill="#ffffff" opacity="0.4" />
          <ellipse cx="900" cy="220" rx="100" ry="10" fill="#ffffff" opacity="0.5" />
          <ellipse cx="100" cy="240" rx="140" ry="12" fill="#ffffff" opacity="0.45" />
          <ellipse cx="450" cy="60" rx="100" ry="8" fill="#ffffff" opacity="0.5" />
        </svg>

        {/* Warm sun glow */}
        <div style={{ position: 'absolute', top: '10%', right: '14%', width: 140, height: 140, borderRadius: '50%',
          background: `radial-gradient(circle at 35% 35%, #fff7d6, ${warm} 45%, ${warm}90 70%, transparent 85%)`,
          boxShadow: `0 0 120px ${warm}cc, 0 0 240px ${warm}66, 0 0 400px ${warm}33`,
          animation: 'ski-float-slow 8s ease-in-out infinite' }} />
        {/* sun rays */}
        <div style={{ position: 'absolute', top: '5%', right: '8%', width: 280, height: 280,
          background: `radial-gradient(circle, ${warm}40, transparent 60%)`,
          filter: 'blur(30px)' }} />

        {/* Distant haze layer to add depth */}
        <div style={{ position: 'absolute', bottom: '30%', left: 0, right: 0, height: '30%',
          background: `linear-gradient(180deg, transparent, ${snow}30)`, pointerEvents: 'none' }} />

        {/* Mountain layers, keep dark-ish silhouettes for contrast against bright sky */}
        <div className="v4-ski-layer" style={{ position: 'absolute', inset: 0 }}>
          <MountainLayers layers={[
          // Far range, bluish haze
          { color: '#7ba6c6', opacity: 0.5, blur: 1.5, points: [
            { x: 0, y: 380 }, { x: 80, y: 330 }, { x: 170, y: 380 }, { x: 260, y: 300 }, { x: 360, y: 360 },
            { x: 460, y: 280 }, { x: 560, y: 340 }, { x: 660, y: 260 }, { x: 760, y: 330 }, { x: 870, y: 300 }, { x: 1000, y: 360 }]
          },
          // Mid range, slate blue
          { color: '#4d7796', opacity: 0.85, points: [
            { x: 0, y: 460 }, { x: 90, y: 420 }, { x: 180, y: 470 }, { x: 280, y: 380 }, { x: 380, y: 440 },
            { x: 480, y: 330 }, { x: 580, y: 410 }, { x: 680, y: 340 }, { x: 780, y: 420 }, { x: 880, y: 380 }, { x: 1000, y: 430 }]
          },
          // Front big peak, deep navy
          { color: '#1f3858', points: [
            { x: 0, y: 560 }, { x: 120, y: 520 }, { x: 240, y: 540 }, { x: 380, y: 480 },
            { x: 520, y: 240 }, // big peak
            { x: 560, y: 230 }, // summit
            { x: 600, y: 260 },
            { x: 720, y: 380 }, { x: 840, y: 440 }, { x: 1000, y: 500 }]
          }]
          } />
        </div>

        {/* Snow caps on the front peak */}
        <svg className="v4-ski-layer" viewBox="0 0 1000 600" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} preserveAspectRatio="none">
          <path d="M380,480 L450,420 L520,240 L560,230 L600,260 L640,310 L600,330 L560,290 L520,310 L480,360 L440,400 L400,440 Z" fill={snow} opacity="0.98" />
          <path d="M520,240 L560,230 L600,260 L580,275 L560,245 L540,265 Z" fill="#f8fafc" />
          {/* mid-range caps */}
          <path d="M460,310 L480,330 L500,310 Z" fill={snow} opacity="0.85" />
          <path d="M660,260 L680,290 L700,260 Z" fill={snow} opacity="0.75" />
          {/* snow on side ridges */}
          <path d="M380,480 L420,490 L400,500 Z" fill={snow} opacity="0.7" />
          <path d="M640,310 L680,360 L660,370 L630,335 Z" fill={snow} opacity="0.6" />
        </svg>

        {/* Télésiège : part hors cadre à gauche, suit le relief sur ses pylônes, arrive à la gare du sommet près du chalet */}
        <div className="v4-ski-layer" style={{ position: 'absolute', inset: 0 }}>
          <SummitLift ink={ink} warm={warm} />
        </div>

        {/* Pines on lower slopes, dark green */}
        <div className="v4-ski-layer" style={{ position: 'absolute', inset: 0 }}>
          <Pines color="#0f2a1d" opacity={0.95} trees={[
          { x: 60, y: 540, w: 10, h: 24 }, { x: 120, y: 560, w: 12, h: 30 }, { x: 200, y: 570, w: 9, h: 22 },
          { x: 280, y: 560, w: 11, h: 26 }, { x: 340, y: 580, w: 14, h: 34 }, { x: 420, y: 570, w: 10, h: 24 },
          { x: 740, y: 540, w: 11, h: 28 }, { x: 820, y: 560, w: 13, h: 32 }, { x: 900, y: 570, w: 10, h: 24 },
          { x: 960, y: 580, w: 12, h: 30 }, { x: 660, y: 550, w: 9, h: 22 }, { x: 880, y: 540, w: 8, h: 20 }]
          } />
        </div>

        {/* Snow falling, slightly less intense for daytime feel */}
        <SnowField count={100} color="#ffffff" sizeRange={[1.5, 4]} speedRange={[8, 18]} areaHeight={920} blur />

        {/* HERO CONTENT */}
        <div style={{ position: 'relative', zIndex: 5, maxWidth: 1440, margin: '0 auto', padding: '90px 56px 0', height: '100%', boxSizing: 'border-box' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '10px 18px', borderRadius: 999,
            background: 'rgba(255,255,255,0.7)', border: '1px solid rgba(10,24,64,0.15)', backdropFilter: 'blur(10px)',
            fontFamily: v4Theme.fontBody, fontSize: 13, color: ink, fontWeight: 500, letterSpacing: 0.2,
            boxShadow: '0 4px 20px rgba(10,24,64,0.05)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: teal,
              boxShadow: `0 0 0 4px ${teal}30` }} />
            Nouveau · Stations de ski et plein air · Hiver
          </div>
          <h1 style={{
            fontFamily: v4Theme.fontDisplay, fontWeight: 700, fontSize: 128, lineHeight: 0.96,
            letterSpacing: -4.5, color: ink, margin: '40px 0 0', textWrap: 'balance', maxWidth: 1100,
            textShadow: '0 2px 30px rgba(255,255,255,0.5)'
          }}>
            Le sommet,<br />
            <span style={{
              background: `linear-gradient(135deg, ${blue} 0%, ${purple} 55%, ${v4Theme.pink} 100%)`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
              fontStyle: 'italic', fontWeight: 600, display: 'inline-block', paddingRight: '0.06em'
            }}>déjà visité</span><br />
            <span style={{ color: inkSoft, fontWeight: 600 }}>avant la première<br />descente.</span>
          </h1>

          <div style={{ display: 'flex', gap: 48, marginTop: 72, alignItems: 'flex-end', flexWrap: 'wrap' }}>
            <p className="v4-ski-lead" style={{ ...{ fontFamily: v4Theme.fontBody, fontSize: 19, lineHeight: 1.55,
                color: inkSoft, maxWidth: 480, margin: 0, textWrap: 'pretty' }, color: "rgb(255, 255, 255)" }}>
              Un tour virtuel complet de votre montagne. Du sommet de chaque télésiège jusqu'au pied des pistes, capté en 360° en pleine saison et publié sur Google Maps.
            </p>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <a href="#cta" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: ink, color: snow, border: 'none', borderRadius: 999,
                padding: '18px 28px', fontFamily: v4Theme.fontBody, fontWeight: 600, fontSize: 15,
                textDecoration: 'none', boxShadow: '0 8px 24px rgba(10,24,64,0.25)'
              }}>Captons votre montagne →</a>
              <a href="#capture" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: 'rgba(255,255,255,0.7)', color: ink,
                border: '1px solid rgba(10,24,64,0.15)', borderRadius: 999,
                padding: '18px 28px', fontFamily: v4Theme.fontBody, fontWeight: 500, fontSize: 15,
                textDecoration: 'none', backdropFilter: 'blur(10px)'
              }}>Voir ce qu'on capte</a>
            </div>
          </div>

          {/* Floating elevation card */}
          <div className="v4-hide-mobile" style={{ position: 'absolute', top: 140, right: 56,
            background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(20px)',
            border: '1px solid rgba(10,24,64,0.1)', borderRadius: 18,
            padding: '18px 22px', fontFamily: v4Theme.fontBody, minWidth: 200,
            boxShadow: '0 12px 40px rgba(10,24,64,0.1)',
            animation: 'ski-float-slow 6s ease-in-out infinite' }}>
            <div style={{ fontSize: 11, color: inkSoft, letterSpacing: 1.5,
              textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>Exemple de point 360°</div>
            <div style={{ fontFamily: v4Theme.fontDisplay, fontSize: 34, fontWeight: 700,
              color: ink, letterSpacing: -1, lineHeight: 1 }}>
              875<span style={{ fontSize: 18, color: inkSoft, fontWeight: 500 }}> m</span>
            </div>
            <div style={{ fontSize: 12, color: inkSoft, marginTop: 4 }}>Sommet · Télésiège #4 · -8°C</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
              {[1, 1, 1, 0.5, 0.3].map((o, i) =>
              <div key={i} style={{ height: 4, flex: 1, borderRadius: 2, background: `rgba(59,185,187,${o})` }} />
              )}
            </div>
            <div style={{ fontSize: 11, color: 'rgba(10,24,64,0.5)', marginTop: 8 }}>3 pistes · 12 points 360°</div>
          </div>
        </div>

        {/* Bottom fade, transitions to next section */}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 140,
          background: `linear-gradient(180deg, transparent, ${skyLow})`, pointerEvents: 'none' }} />
      </section>

      {/* =============================================================
            STATS, la promesse en chiffres
            ============================================================= */}
      <section style={{ position: 'relative', padding: '100px 56px 100px',
        background: `linear-gradient(180deg, ${skyLow} 0%, ${valleyMid} 100%)`, overflow: 'hidden' }}>

        {/* light snow continues */}
        <SnowField count={40} color="#ffffff" sizeRange={[1, 3]} speedRange={[14, 22]} areaHeight={600} />

        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-end', marginBottom: 64 }}>
            <div>
              <div style={{ fontFamily: v4Theme.fontBody, fontSize: 12, letterSpacing: 2, color: blue,
                textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>01 · La promesse</div>
              <h2 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 64, fontWeight: 700,
                color: ink, margin: 0, lineHeight: 1.05, letterSpacing: -2 }}>
                Vos skieurs<br />
                <em style={{ color: blue, fontWeight: 600 }}>arrivent décidés.</em>
              </h2>
            </div>
            <p style={{ fontFamily: v4Theme.fontBody, fontSize: 18, lineHeight: 1.65,
              color: 'rgba(10,24,64,0.75)', maxWidth: 520, margin: 0 }}>
              Avant d'acheter un billet, les skieurs regardent la station en ligne. Trop souvent, ils tombent sur quelques photos prises l'été, un PDF de carte de pistes et une vieille vidéo. <strong style={{ color: ink, fontWeight: 600 }}>On peut faire infiniment mieux.</strong>
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
            {[
            { n: '85 %', l: "des consommateurs sont plus enclins à choisir un commerce après avoir lu des avis positifs", s: 'BrightLocal 2026' },
            { n: '+520 %', l: "d'appels pour les fiches Google de plus de 100 photos, par rapport à la fiche médiane", s: 'Étude BrightLocal' },
            { n: '1 fois', l: "par hiver. Vue360 capte tout en 2-3 jours, livré sous 4 semaines", s: 'Promesse Vue360' }].
            map((s, i) =>
            <div key={i} style={{
              padding: '40px 32px', borderRadius: 24,
              background: 'rgba(255,255,255,0.55)',
              border: '1px solid rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)',
              boxShadow: '0 8px 30px rgba(10,24,64,0.06)'
            }}>
                <div style={{ fontFamily: v4Theme.fontDisplay, fontSize: 88, fontWeight: 700,
                letterSpacing: -3, lineHeight: 1,
                background: `linear-gradient(180deg, ${ink} 0%, ${blue} 120%)`,
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                  {s.n}
                </div>
                <div style={{ fontFamily: v4Theme.fontBody, fontSize: 15, color: inkSoft,
                lineHeight: 1.5, marginTop: 20, minHeight: 65 }}>{s.l}</div>
                <div style={{ fontFamily: v4Theme.fontBody, fontSize: 11, color: 'rgba(10,24,64,0.5)',
                letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600, marginTop: 16,
                paddingTop: 16, borderTop: '1px solid rgba(10,24,64,0.1)' }}>{s.s}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* =============================================================
            CE QU'ON CAPTE, grille des éléments
            ============================================================= */}
      <section id="capture" style={{ position: 'relative', padding: '120px 56px',
        background: `linear-gradient(180deg, ${valleyMid} 0%, ${valleyLow} 100%)`, overflow: 'hidden' }}>
        {/* trail line décor */}
        <SkierTrail color={ink}
        d="M -50,40 Q 200,100 250,200 T 500,350 T 850,500 T 1100,580"
        width={3} dashed glow={false} />

        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 32 }}>
            <div>
              <div style={{ fontFamily: v4Theme.fontBody, fontSize: 12, letterSpacing: 2, color: blue,
                textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>02 · Ce qu'on capte</div>
              <h2 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 64, fontWeight: 700,
                color: ink, margin: 0, lineHeight: 1.05, letterSpacing: -2, maxWidth: 780 }}>
                Du sommet du <em style={{ color: blue, fontWeight: 600 }}>plus haut télésiège</em><br />
                jusqu'au bar du <em style={{ color: purple, fontWeight: 600 }}>chalet de base.</em>
              </h2>
            </div>
            <p style={{ fontFamily: v4Theme.fontBody, fontSize: 17, lineHeight: 1.6,
              color: inkSoft, maxWidth: 380, margin: 0 }}>
              Chaque télésiège, chaque sommet, chaque vue qui rend votre montagne unique. Capté sur place en plein hiver, pas en septembre sur de l'herbe jaune.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
            {[
            { icon: 'peak', title: 'Sommets panoramiques', body: "Le point de vue à 360° depuis chaque sommet de télésiège. La vue qu'on n'a que si on monte.", tag: '8-15 points' },
            { icon: 'lift', title: 'Télésièges & remontées', body: "Stations de départ et d'arrivée, salles d'embarquement, vue depuis la chaise pendant la montée.", tag: 'Chaque remontée' },
            { icon: 'run', title: 'Haut de chaque piste', body: "On photographie ce que voit le skieur en haut de chaque piste, avec la pente, le balisage, la difficulté.", tag: 'Toutes pistes' },
            { icon: 'lodge', title: 'Refuges & restaurants', body: "Bistros au sommet, micro-brasseries, chalets de mi-montagne. L'ambiance et le menu intégrés.", tag: 'Tous lieux' },
            { icon: 'base', title: 'Village & chalet de base', body: "Billetterie, location, école de ski, garderie. La logistique des premiers 30 minutes d'une visite.", tag: 'Plan complet' },
            { icon: 'run', title: 'Pistes en continu', body: "Une descente captée de bout en bout, navigable comme dans Street View. Le skieur choisit sa piste avant même d'arriver.", tag: 'Parcours Street View' }].
            map((c, i) =>
            <div key={i} style={{
              padding: '32px 28px', borderRadius: 24,
              background: 'rgba(255,255,255,0.7)',
              border: '1px solid rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)',
              display: 'flex', flexDirection: 'column', gap: 16, minHeight: 280,
              boxShadow: '0 8px 24px rgba(10,24,64,0.06)'
            }}>
                <div style={{ width: 56, height: 56, borderRadius: 14,
                background: `linear-gradient(135deg, ${teal}25, ${purple}25)`,
                border: `1px solid ${teal}40`,
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <CaptureIcon kind={c.icon} color={blue} />
                </div>
                <div style={{ flex: 1 }}>
                  <h3 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 22, fontWeight: 600,
                  color: ink, margin: 0, letterSpacing: -0.4, lineHeight: 1.2 }}>{c.title}</h3>
                  <p style={{ fontFamily: v4Theme.fontBody, fontSize: 14.5, lineHeight: 1.55,
                  color: inkSoft, margin: '12px 0 0' }}>{c.body}</p>
                </div>
                <div style={{ display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 6,
                padding: '5px 12px', borderRadius: 999,
                background: `${blue}10`, border: `1px solid ${blue}30`,
                fontFamily: v4Theme.fontBody, fontSize: 11.5, color: blue,
                letterSpacing: 0.5, fontWeight: 600, textTransform: 'uppercase' }}>{c.tag}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* =============================================================
            COMMENT ÇA MARCHE, 4 étapes avec trail qui descend
            ============================================================= */}
      <section style={{ position: 'relative', padding: '120px 56px',
        background: `linear-gradient(180deg, ${valleyLow} 0%, ${v4Theme.bg2} 100%)`, overflow: 'hidden' }}>
        {/* decorative pine line at top */}
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 60, opacity: 0.4 }}>
          <Pines color="#1a3a2a" trees={[
          { x: 80, y: 20, w: 10, h: 36 }, { x: 160, y: 30, w: 11, h: 30 }, { x: 240, y: 10, w: 13, h: 46 },
          { x: 380, y: 25, w: 10, h: 34 }, { x: 520, y: 8, w: 12, h: 48 }, { x: 660, y: 24, w: 11, h: 34 },
          { x: 780, y: 6, w: 13, h: 50 }, { x: 900, y: 22, w: 10, h: 36 }]
          } />
        </div>

        <SnowField count={30} color="#ffffff" sizeRange={[1, 3]} speedRange={[12, 22]} areaHeight={900} />

        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
          <div style={{ textAlign: 'center', marginBottom: 80 }}>
            <div style={{ fontFamily: v4Theme.fontBody, fontSize: 12, letterSpacing: 2, color: blue,
              textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>03 · Comment ça marche</div>
            <h2 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 72, fontWeight: 700,
              color: ink, margin: 0, lineHeight: 1.05, letterSpacing: -2.5, textWrap: 'balance' }}>
              Quatre étapes.<br />
              <em style={{ color: blue, fontWeight: 600 }}>Une seule saison.</em>
            </h2>
          </div>

          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 }}>
            {/* connecting line */}
            <div style={{ position: 'absolute', top: 40, left: '12%', right: '12%', height: 2,
              backgroundImage: `repeating-linear-gradient(90deg, ${blue}60 0 6px, transparent 6px 14px)`
            }} />
            {[
            { n: '01', t: 'Repérage', body: "Visio d'une heure avec votre équipe d'opération. On bâtit ensemble la liste des points à capter, sommets, pistes, refuges, ambiances.", d: '1 semaine' },
            { n: '02', t: 'Captation hiver', body: "On arrive sur place pour 2 à 3 jours, caméra 360° en main. On skie, on monte, on capte.", d: '2-3 jours sur place' },
            { n: '03', t: 'Production', body: "Post-traitement, assemblage du tour interactif, intégration des points d'intérêt, écriture des légendes, validation avec vous.", d: '3 semaines' },
            { n: '04', t: 'Mise en ligne', body: "Tour publié sur votre site, votre fiche Google, vos réseaux. Lien partageable, embed sur n'importe quelle page. Hébergé chez Google.", d: 'En continu' }].
            map((s, i) =>
            <div key={i} style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ width: 80, height: 80, borderRadius: '50%',
                background: `radial-gradient(circle at 30% 30%, ${snow}, ${snow} 60%, #cfe9f8)`,
                border: `3px solid ${ink}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: v4Theme.fontDisplay, fontWeight: 700, fontSize: 28, color: ink,
                letterSpacing: -0.5, margin: '0 auto', position: 'relative', zIndex: 2,
                boxShadow: `0 8px 30px rgba(10,24,64,0.15), 0 0 0 8px rgba(59,185,187,0.1)`
              }}>{s.n}</div>
                <h3 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 24, fontWeight: 600,
                color: ink, margin: 0, letterSpacing: -0.5, textAlign: 'center' }}>{s.t}</h3>
                <p style={{ fontFamily: v4Theme.fontBody, fontSize: 14.5, lineHeight: 1.6,
                color: inkSoft, margin: 0, textAlign: 'center' }}>{s.body}</p>
                <div style={{ textAlign: 'center', marginTop: 'auto' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '5px 12px', borderRadius: 999,
                  background: 'rgba(255,255,255,0.7)', border: '1px solid rgba(10,24,64,0.12)',
                  fontFamily: v4Theme.fontBody, fontSize: 11, color: inkSoft,
                  letterSpacing: 0.5, fontWeight: 500 }}>{s.d}</span>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* =============================================================
            POURQUOI VUE360, credentials
            ============================================================= */}
      <section style={{ position: 'relative', padding: '120px 56px', background: v4Theme.bg2, overflow: 'hidden' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'flex-start' }}>
            <div style={{ position: 'sticky', top: 120 }}>
              <div style={{ fontFamily: v4Theme.fontBody, fontSize: 12, letterSpacing: 2, color: blue,
                textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>04 · Pourquoi Vue360</div>
              <h2 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 56, fontWeight: 700,
                color: ink, margin: 0, lineHeight: 1.05, letterSpacing: -1.8 }}>
                Des tours complets de montagne, <em style={{ color: blue, fontWeight: 600 }}>faits dans les Laurentides</em> par des skieurs.
              </h2>
              <p style={{ fontFamily: v4Theme.fontBody, fontSize: 17, lineHeight: 1.6,
                color: inkSoft, margin: '32px 0 0' }}>
                Seize ans en référencement local, une connaissance fine des stations de la région, et des images captées sur place, en saison.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
              { h: 'Publié sur Google Maps', b: "Vos tours sont publiés directement sur Google Maps et votre fiche Google Business, pas un simple iframe maison qu'un visiteur sur deux ne charge jamais." },
              { h: 'Captation hivernale, vraie', b: "Pas des photos d'été retouchées. On vient quand la neige est là, quand les pistes sont ouvertes, quand vos skieurs y sont déjà." },
              { h: 'Intégration sur tous vos canaux', b: "Site web, fiche Google, Facebook, Instagram, infolettre. Un seul tour, partout, sans frais récurrents." },
              { h: 'Hébergé à vie chez Google', b: "Pas de serveur, pas de bande passante, pas de coût mensuel. Vos tours restent en ligne tant que Google existe." }].
              map((r, i) =>
              <div key={i} style={{
                padding: '28px 32px', borderRadius: 20,
                background: v4Theme.surface,
                border: `1px solid ${v4Theme.border}`,
                display: 'flex', gap: 24, alignItems: 'flex-start',
                boxShadow: '0 4px 20px rgba(10,24,64,0.05)'
              }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
                  background: `linear-gradient(135deg, ${blue}, ${purple})`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: v4Theme.fontDisplay, fontWeight: 700, fontSize: 14, color: snow }}>{i + 1}</div>
                  <div>
                    <h4 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 21, fontWeight: 600,
                    color: ink, margin: 0, letterSpacing: -0.4, lineHeight: 1.2 }}>{r.h}</h4>
                    <p style={{ fontFamily: v4Theme.fontBody, fontSize: 15, lineHeight: 1.6,
                    color: inkSoft, margin: '10px 0 0' }}>{r.b}</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* =============================================================
            MOCKUP, comment ça apparaît sur le site de la station
            ============================================================= */}
      <section style={{ position: 'relative', padding: '140px 56px 120px',
        background: `linear-gradient(180deg, ${v4Theme.bg2} 0%, ${v4Theme.bg} 100%)`, overflow: 'hidden' }}>

        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ fontFamily: v4Theme.fontBody, fontSize: 12, letterSpacing: 2, color: blue,
              textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>05 · Sur votre site</div>
            <h2 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 64, fontWeight: 700,
              color: ink, margin: 0, lineHeight: 1.05, letterSpacing: -2, maxWidth: 900, marginInline: 'auto', textWrap: 'balance' }}>
              Intégré en une ligne de code.<br />
              <em style={{ color: blue, fontWeight: 600 }}>Visible partout.</em>
            </h2>
          </div>

          {/* Browser mockup */}
          <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
            <div style={{
              borderRadius: 20, overflow: 'hidden',
              background: '#ffffff',
              boxShadow: `0 40px 100px -20px rgba(10,24,64,0.25), 0 0 0 1px ${v4Theme.border}`
            }}>
              {/* browser chrome */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px',
                background: '#f1f3f6', borderBottom: '1px solid #e2e6ec' }}>
                <div style={{ display: 'flex', gap: 6 }}>
                  <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }} />
                  <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }} />
                  <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c840' }} />
                </div>
                <div style={{ flex: 1, background: '#fff', border: '1px solid #e2e6ec', borderRadius: 8,
                  padding: '6px 12px', fontFamily: 'monospace', fontSize: 12, color: '#6b7280' }}>
                  https://votrestation.ca/decouvrir
                </div>
              </div>
              {/* page content mockup */}
              <div style={{ padding: '40px 48px', background: '#fbfaf6', color: ink }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 36, alignItems: 'center' }}>
                  <div>
                    <div style={{ fontFamily: v4Theme.fontBody, fontSize: 11, letterSpacing: 1.5,
                      color: '#94a3b8', textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}>Découvrez votre montagne</div>
                    <h3 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 36, fontWeight: 700,
                      color: ink, margin: 0, letterSpacing: -1.2, lineHeight: 1.1 }}>
                      Explorez<br />
                      <em style={{ color: blue, fontWeight: 600 }}>chaque piste</em><br />
                      avant d'y skier.
                    </h3>
                    <p style={{ fontFamily: v4Theme.fontBody, fontSize: 13.5, lineHeight: 1.6,
                      color: '#475569', margin: '14px 0 0' }}>Tour 360° du domaine. Cliquez pour monter au sommet, descendre une piste, visiter le chalet.</p>
                  </div>
                  <div style={{ aspectRatio: '16/10', borderRadius: 14, overflow: 'hidden', position: 'relative',
                    background: `linear-gradient(180deg, ${skyHigh} 0%, ${skyMid} 50%, ${snow} 100%)`,
                    boxShadow: '0 12px 40px rgba(10,24,64,0.2)' }}>
                    {/* mini scene */}
                    <svg viewBox="0 0 400 250" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                      <path d="M0,250 L0,150 L80,100 L150,140 L220,80 L280,120 L360,90 L400,130 L400,250 Z" fill="#1f3858" />
                      <path d="M0,250 L0,180 L60,160 L130,180 L200,150 L260,170 L320,150 L400,170 L400,250 Z" fill="#4d7796" />
                      <path d="M150,140 L220,80 L260,100 L240,110 L220,95 L195,115 Z" fill="#ffffff" />
                    </svg>
                    <div style={{ position: 'absolute', top: '40%', left: '45%', width: 48, height: 48,
                      borderRadius: '50%', background: 'rgba(255,255,255,0.95)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      boxShadow: '0 8px 24px rgba(0,0,0,0.3)' }}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M8 5v14l11-7z" fill={blue} />
                      </svg>
                    </div>
                    <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', gap: 6, alignItems: 'center',
                      background: 'rgba(255,255,255,0.92)', padding: '5px 10px', borderRadius: 999,
                      fontFamily: v4Theme.fontBody, fontSize: 10, fontWeight: 600, color: ink }}>
                      <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#22c55e' }} />
                      TOUR 360° INTERACTIF
                    </div>
                    <div style={{ position: 'absolute', bottom: 14, right: 14, display: 'flex', gap: 6 }}>
                      {[1, 2, 3, 4, 5].map((n) =>
                      <div key={n} style={{ width: 24, height: 4, borderRadius: 2,
                        background: n <= 3 ? '#ffffff' : 'rgba(255,255,255,0.4)' }} />
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Floating badge, Google */}
            <div style={{ position: 'absolute', top: -30, right: -30,
              background: snow, borderRadius: 16, padding: '16px 20px',
              boxShadow: '0 16px 40px rgba(10,24,64,0.2)', display: 'flex', alignItems: 'center', gap: 12,
              animation: 'ski-float-slow 5s ease-in-out infinite' }}>
              <div style={{ width: 36, height: 36, borderRadius: 8,
                background: 'linear-gradient(135deg, #4285F4, #34A853)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: v4Theme.fontDisplay, color: '#fff', fontWeight: 700, fontSize: 18 }}>G</div>
              <div>
                <div style={{ fontFamily: v4Theme.fontBody, fontSize: 11, color: '#64748b', fontWeight: 600, letterSpacing: 0.4 }}>AUSSI SUR</div>
                <div style={{ fontFamily: v4Theme.fontDisplay, fontSize: 15, fontWeight: 700, color: ink }}>Google Maps & Search</div>
              </div>
            </div>

            {/* Embed code badge */}
            <div style={{ position: 'absolute', bottom: -24, left: -30,
              background: '#0f172a', borderRadius: 14, padding: '14px 18px',
              fontFamily: 'monospace', fontSize: 12, color: '#a5b4fc',
              boxShadow: '0 16px 40px rgba(10,24,64,0.3)',
              border: `1px solid ${teal}40`,
              maxWidth: 340 }}>
              <span style={{ color: '#64748b' }}>&lt;</span>
              <span style={{ color: teal }}>iframe</span>
              <span style={{ color: '#cbd5e1' }}> src=</span>
              <span style={{ color: warm }}>"vue360.ca/votre-station"</span>
              <span style={{ color: '#64748b' }}>/&gt;</span>
            </div>
          </div>
        </div>
      </section>

      {/* =============================================================
            INVESTISSEMENT, pricing tier
            ============================================================= */}
      <section style={{ position: 'relative', padding: '120px 56px', background: v4Theme.bg, overflow: 'hidden' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: v4Theme.fontBody, fontSize: 12, letterSpacing: 2, color: blue,
                textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}>06 · Investissement</div>
              <h2 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 56, fontWeight: 700,
                color: ink, margin: 0, lineHeight: 1.05, letterSpacing: -1.8 }}>
                Une fois. <em style={{ color: blue, fontWeight: 600 }}>Pour des années.</em>
              </h2>
              <p style={{ fontFamily: v4Theme.fontBody, fontSize: 17, lineHeight: 1.6,
                color: inkSoft, margin: '24px 0 0', maxWidth: 440 }}>
                Le tour vit chez Google et ne coûte rien à maintenir. Pas d'abonnement, pas de frais de bande passante, pas de paiement annuel.
              </p>
              <div style={{ marginTop: 32, padding: '20px 24px', borderRadius: 16,
                background: 'rgba(10,24,64,0.04)', border: '1px solid rgba(10,24,64,0.1)', maxWidth: 440 }}>
                <div style={{ fontFamily: v4Theme.fontBody, fontSize: 13, color: inkSoft, lineHeight: 1.55 }}>
                  <strong style={{ color: ink }}>Captation en saison.</strong> On planifie les journées de tournage avec votre équipe, selon la météo et l'achalandage.
                </div>
              </div>
            </div>

            <div style={{
              background: '#ffffff', borderRadius: 32, padding: '48px 44px',
              boxShadow: '0 30px 80px -20px rgba(10,24,64,0.25), 0 0 0 1px rgba(10,24,64,0.06)',
              position: 'relative', overflow: 'hidden'
            }}>
              <div style={{ position: 'absolute', top: -50, right: -50, width: 200, height: 200, borderRadius: '50%',
                background: `radial-gradient(circle, ${teal}30, transparent 70%)`, filter: 'blur(20px)' }} />
              <div style={{ position: 'relative' }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '6px 12px', borderRadius: 999,
                  background: `${blue}10`, border: `1px solid ${blue}30`,
                  fontFamily: v4Theme.fontBody, fontSize: 11.5, color: blue,
                  fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 20 }}>
                  Tour complet de montagne
                </div>
                <div style={{ fontFamily: v4Theme.fontBody, fontSize: 13, color: '#94a3b8', letterSpacing: 1.5,
                  textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>À partir de</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
                  <div style={{ fontFamily: v4Theme.fontDisplay, fontSize: 96, fontWeight: 700, color: blue,
                    letterSpacing: -3, lineHeight: 1 }}>
                    4 950<span style={{ fontSize: 36, color: '#94a3b8', fontWeight: 500 }}> $</span>
                  </div>
                </div>
                <div style={{ fontFamily: v4Theme.fontBody, fontSize: 14, color: '#64748b', marginBottom: 32 }}>
                  Devis final selon la taille du domaine
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
                  {[
                  '2-3 jours de captation hiver sur place',
                  'Tour 360° complet : sommets, télésièges, pistes, refuges',
                  'Parcours en continu (ligne bleue) du pied des pistes au sommet',
                  'Images 360° réutilisables pour vos réseaux sociaux',
                  'Intégration Google + embed pour votre site',
                  'Hébergement à vie chez Google · sans frais'].
                  map((t, i) =>
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                      <div style={{ width: 22, height: 22, borderRadius: '50%', background: `${blue}15`,
                      color: blue, display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 700, fontSize: 12, flexShrink: 0, marginTop: 2 }}>✓</div>
                      <div style={{ fontFamily: v4Theme.fontBody, fontSize: 14.5, color: ink, lineHeight: 1.5 }}>{t}</div>
                    </div>
                  )}
                </div>
                <a href="#cta" style={{ display: 'block', width: '100%', background: blue,
                  color: '#fff', border: 'none', borderRadius: 999, padding: '18px',
                  fontFamily: v4Theme.fontBody, fontWeight: 600, fontSize: 16,
                  textDecoration: 'none', textAlign: 'center', boxSizing: 'border-box' }}>
                  Réserver pour l'hiver 2026-2027 →
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* =============================================================
            FINAL CTA, brand gradient
            ============================================================= */}
      <section id="cta" style={{ position: 'relative', padding: '140px 56px',
        background: `linear-gradient(135deg, ${blue} 0%, ${purple} 55%, ${teal} 100%)`, overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -150, right: '10%', width: 500, height: 500, borderRadius: '50%',
          background: `radial-gradient(circle, ${warm}80, transparent 65%)`, filter: 'blur(30px)' }} />
        <div style={{ position: 'absolute', bottom: -100, left: '5%', width: 400, height: 400, borderRadius: '50%',
          background: `radial-gradient(circle, ${snow}30, transparent 65%)`, filter: 'blur(30px)' }} />

        {/* gentle snow lingering */}
        <SnowField count={30} color="#ffffff" sizeRange={[1, 2.5]} speedRange={[16, 26]} areaHeight={700} />

        <div style={{ maxWidth: 1440, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '10px 18px', borderRadius: 999,
            background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)',
            backdropFilter: 'blur(10px)',
            fontFamily: v4Theme.fontBody, fontSize: 13, color: '#fff', fontWeight: 600, marginBottom: 32 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: warm,
              boxShadow: `0 0 0 4px ${warm}40` }} />
            Calendrier hiver 2026-2027 ouvert
          </div>
          <h2 style={{ fontFamily: v4Theme.fontDisplay, fontSize: 104, fontWeight: 700, letterSpacing: -3.5,
            color: '#fff', margin: 0, lineHeight: 1, marginBottom: 32, textWrap: 'balance', maxWidth: 1100, marginInline: 'auto' }}>
            Captons votre montagne<br />
            <em style={{ fontWeight: 600, color: warm, fontStyle: 'italic' }}>avant la prochaine bordée.</em>
          </h2>
          <p style={{ fontFamily: v4Theme.fontBody, fontSize: 20, color: 'rgba(255,255,255,0.88)', maxWidth: 640,
            margin: '0 auto 48px', lineHeight: 1.55, textWrap: 'pretty' }}>
            45 minutes en visio avec votre direction marketing. On regarde votre domaine, on identifie les points-clés à capter, on chiffre un devis ferme. Gratuit, sans engagement.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 48 }}>
            <a href={v4Href('contact.html')} style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
              background: '#fff', color: ink, border: 'none', borderRadius: 999,
              padding: '22px 38px', fontFamily: v4Theme.fontBody, fontWeight: 700, fontSize: 17,
              textDecoration: 'none' }}>
              Réserver mon appel découverte →
            </a>
            <a href="mailto:info@vue360.ca" style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'rgba(255,255,255,0.12)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.3)', borderRadius: 999,
              padding: '22px 38px', fontFamily: v4Theme.fontBody, fontWeight: 500, fontSize: 17,
              textDecoration: 'none', backdropFilter: 'blur(10px)' }}>
              info@vue360.ca
            </a>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 24, flexWrap: 'wrap', justifyContent: 'center',
            fontFamily: v4Theme.fontBody, fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>
            <span>✓ Publié sur Google Maps</span>
            <span>✓ Captation en saison</span>
            <span>✓ Partout au Québec · 100 % québécois</span>
          </div>
        </div>
      </section>

      {/* Footer (V4) */}
      <V4Footer />
    </div>);

};

// Small inline icons for the capture grid
const CaptureIcon = ({ kind, color }) => {
  const stroke = color;
  const props = { fill: 'none', stroke, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'peak':return (
        <svg width="28" height="28" viewBox="0 0 24 24" {...props}>
        <path d="M3 19 L9 9 L13 14 L17 7 L21 19 Z" />
        <path d="M9 9 L11 12" stroke="#fff" strokeWidth="1.4" />
        <path d="M17 7 L18.5 9.5" stroke="#fff" strokeWidth="1.4" />
      </svg>);

    case 'lift':return (
        <svg width="28" height="28" viewBox="0 0 24 24" {...props}>
        <line x1="3" y1="6" x2="21" y2="14" />
        <rect x="8" y="11" width="5" height="3" rx="0.6" />
        <line x1="10.5" y1="9.4" x2="10.5" y2="11" />
        <rect x="14.5" y="13.4" width="5" height="3" rx="0.6" />
        <line x1="17" y1="11.8" x2="17" y2="13.4" />
      </svg>);

    case 'run':return (
        <svg width="28" height="28" viewBox="0 0 24 24" {...props}>
        <path d="M4 4 Q 8 12 12 14 T 20 20" />
        <circle cx="6" cy="6" r="1.2" />
        <circle cx="11" cy="13" r="1.2" />
        <circle cx="17" cy="18" r="1.2" />
      </svg>);

    case 'lodge':return (
        <svg width="28" height="28" viewBox="0 0 24 24" {...props}>
        <path d="M3 10 L12 4 L21 10 V20 H3 Z" />
        <line x1="3" y1="14" x2="21" y2="14" />
        <rect x="10" y="14" width="4" height="6" />
      </svg>);

    case 'base':return (
        <svg width="28" height="28" viewBox="0 0 24 24" {...props}>
        <rect x="3" y="10" width="6" height="10" />
        <rect x="11" y="6" width="5" height="14" />
        <rect x="18" y="12" width="3" height="8" />
        <line x1="3" y1="20" x2="22" y2="20" />
      </svg>);

    case 'drone':return (
        <svg width="28" height="28" viewBox="0 0 24 24" {...props}>
        <rect x="9" y="9" width="6" height="6" rx="1" />
        <line x1="9" y1="9" x2="5" y2="5" /><circle cx="5" cy="5" r="2" />
        <line x1="15" y1="9" x2="19" y2="5" /><circle cx="19" cy="5" r="2" />
        <line x1="9" y1="15" x2="5" y2="19" /><circle cx="5" cy="19" r="2" />
        <line x1="15" y1="15" x2="19" y2="19" /><circle cx="19" cy="19" r="2" />
      </svg>);

    default:return null;
  }
};

window.SkiV1 = SkiV1;