/* ============================================
   SQUISHY SKIN — HERO VARIANTS
   ============================================ */

/* ===== V1: CLASSIC (current) — split layout, text left, image right ===== */
function HeroClassic({ navigate }) {
  return (
    <div className="hero-section bg-cream" style={{ paddingTop: 60, paddingBottom: 80, minHeight: '92vh', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
      <BlobShape style={{ width: 500, height: 500, top: -100, right: -100 }} />
      <BlobShape style={{ width: 350, height: 350, bottom: -50, left: -80 }} variant={2} />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }} className="hero-grid">
          <div>
            <h1 style={{ fontSize: 64, marginBottom: 24, lineHeight: 1.05 }}>
              Smooth Skin.<br/>
              <span style={{ color: 'var(--pink)' }}>Seriously</span> Good<br/>
              Results.
            </h1>
            <p style={{ fontSize: 17, color: '#666', lineHeight: 1.7, marginBottom: 32, maxWidth: 460 }}>
              Laser hair removal, facials, skin treatments, and wellness powered by the Soprano ICE Platinum Laser. Celebrity trusted.
            </p>
            <div style={{ display: 'flex', gap: 40, marginBottom: 36 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, lineHeight: 1 }}><AnimatedCounter target={7} suffix="+" /></div>
                <div style={{ fontSize: 14, color: '#888', fontWeight: 500, marginTop: 4 }}>Years in Business</div>
              </div>
              <div style={{ width: 1, background: '#ddd' }}></div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700, lineHeight: 1 }}>5★</div>
                <div style={{ fontSize: 14, color: '#888', fontWeight: 500, marginTop: 4 }}>Client Rated</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer" className="btn btn-pink">Book Now</a>
              <button className="btn btn-outline" onClick={() => navigate('Services')}>Our Services</button>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ borderRadius: 28, overflow: 'hidden', aspectRatio: '4/5', background: '#e8e4e0' }}>
              <img src="uploads/pasted-1779887028430-0.png" alt="Laser treatment equipment"
                style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 28 }} />
            </div>
            <div style={{
              position: 'absolute', bottom: 24, left: -20,
              background: 'var(--pink)', color: '#fff',
              padding: '10px 22px', borderRadius: 'var(--radius-pill)',
              fontSize: 13, fontWeight: 700, letterSpacing: '0.03em',
              boxShadow: '0 8px 24px rgba(244,167,187,0.35)',
              whiteSpace: 'nowrap',
            }}>
              ✦ Soprano ICE Platinum
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===== V2: EDITORIAL — Full-bleed image with overlaid headline card ===== */
function HeroEditorial({ navigate, overlayOpacity = 0.62 }) {
  const [loaded, setLoaded] = React.useState(false);
  const parallaxRef = useParallax(0.25);
  React.useEffect(() => { requestAnimationFrame(() => setLoaded(true)); }, []);

  const o = overlayOpacity;

  return (
    <div className="hero-section editorial-hero" style={{ position: 'relative', minHeight: '92vh', overflow: 'hidden', background: 'var(--black)' }}>
      {/* Full-bleed image with ken burns */}
      <div style={{ position: 'absolute', inset: '-10%', zIndex: 0 }} className="editorial-img-wrap">
        <img src="uploads/pexels-shvetsa-4586726 (1).jpg" alt="Laser facial treatment at Squishy Skin"
          ref={parallaxRef}
          className="editorial-hero-img"
          style={{
            width: '100%', height: '120%', objectFit: 'cover',
            transition: 'opacity 1.2s ease',
            transform: 'scale(1.06)',
            opacity: loaded ? 1 : 0,
          }} />
        {/* Gradient overlay — warm cream left, fading to transparent right (opacity tweakable) */}
        <div className="editorial-grad-main" style={{ position: 'absolute', inset: 0, background: `linear-gradient(105deg, rgba(255,249,245,${o}) 0%, rgba(255,249,245,${(o * 0.82).toFixed(3)}) 36%, rgba(255,249,245,${(o * 0.32).toFixed(3)}) 58%, rgba(255,249,245,0) 74%)` }}></div>
        {/* Subtle bottom edge gradient for depth */}
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, transparent 62%, rgba(255,249,245,${(o * 0.45).toFixed(3)}) 100%)` }}></div>
      </div>

      <div className="container editorial-container" style={{ position: 'relative', zIndex: 2, minHeight: '92vh', display: 'flex', alignItems: 'center', paddingTop: 80, paddingBottom: 60 }}>
        <div style={{ maxWidth: 600 }} className="hero-editorial-text">
          <h1 style={{
            fontSize: 84, lineHeight: 0.95, marginBottom: 28, letterSpacing: '-0.03em',
            opacity: loaded ? 1 : 0, transform: loaded ? 'translateY(0)' : 'translateY(30px)',
            transition: 'opacity 0.8s ease 0.35s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s',
          }} className="hero-editorial-h1">
            Smooth skin.<br/>
            <span style={{ color: 'var(--pink)', fontStyle: 'italic', fontWeight: 600 }}>Seriously</span> good<br/>
            results.
          </h1>

          <p style={{
            fontSize: 19, color: '#444', lineHeight: 1.65, marginBottom: 36, maxWidth: 480,
            opacity: loaded ? 1 : 0, transform: loaded ? 'translateY(0)' : 'translateY(20px)',
            transition: 'opacity 0.7s ease 0.55s, transform 0.7s ease 0.55s',
          }}>
            Laser hair removal, facials, peels, and wellness — powered by the Soprano ICE Platinum Laser. Celebrity trusted, locally loved.
          </p>

          <div style={{
            display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 48,
            opacity: loaded ? 1 : 0, transform: loaded ? 'translateY(0)' : 'translateY(16px)',
            transition: 'opacity 0.7s ease 0.7s, transform 0.7s ease 0.7s',
          }}>
            <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer" className="btn btn-pink" style={{ fontSize: 16, padding: '18px 40px' }}>Book Your Visit</a>
            <button className="btn btn-outline" onClick={() => navigate('Services')}>Our Services</button>
          </div>

          {/* Inline stats with dot dividers */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap', fontSize: 14, color: '#666',
            opacity: loaded ? 1 : 0, transform: loaded ? 'translateY(0)' : 'translateY(14px)',
            transition: 'opacity 0.7s ease 0.85s, transform 0.7s ease 0.85s',
          }}>
            <span><b style={{ color: 'var(--black)', fontSize: 18, fontFamily: 'var(--font-display)' }}><AnimatedCounter target={7} suffix="+" /></b> years in business</span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--pink)', flexShrink: 0 }}></span>
            <span><b style={{ color: 'var(--black)', fontSize: 18, fontFamily: 'var(--font-display)' }}>5★</b> client rated</span>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--pink)', flexShrink: 0 }}></span>
            <span>All skin tones</span>
          </div>
        </div>
      </div>

      <style>{`
        .editorial-hero-img { object-position: center 20%; }
        @media (max-width: 900px) {
          .editorial-hero { min-height: 86vh !important; }
          .editorial-img-wrap { position: absolute !important; inset: 0 !important; height: auto !important; }
          .editorial-hero-img { height: 100% !important; transform: none !important; object-position: 60% 32% !important; }
          .editorial-grad-main { background: linear-gradient(180deg, rgba(255,249,245,0.95) 0%, rgba(255,249,245,0.88) 22%, rgba(255,249,245,0.55) 42%, rgba(255,249,245,0.12) 60%, rgba(255,249,245,0) 78%) !important; }
          .editorial-img-wrap::after { display: none !important; }
          .editorial-container { min-height: 86vh !important; display: flex !important; align-items: flex-start !important; padding-top: 52px !important; padding-bottom: 40px !important; }
          .hero-editorial-text { max-width: 100% !important; }
        }
      `}</style>
    </div>
  );
}

/* ===== V3: BOLD TYPE — Asymmetric, oversized typographic statement ===== */
function HeroBoldType({ navigate }) {
  return (
    <div className="hero-section bg-cream" style={{ paddingTop: 100, paddingBottom: 60, minHeight: '92vh', position: 'relative', overflow: 'hidden' }}>
      {/* Decorative pink shape behind text */}
      <div style={{
        position: 'absolute', top: '12%', left: '-8%', width: 600, height: 600,
        background: 'var(--pink)', opacity: 0.12,
        borderRadius: '52% 48% 70% 30% / 40% 60% 40% 60%',
        zIndex: 0, animation: 'blobPulse 12s ease-in-out infinite alternate',
      }}></div>

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        {/* Top label row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 40, justifyContent: 'space-between', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            <span style={{ color: 'var(--pink)' }}>●</span> Squishy Skin Etc. / Surrey, BC
          </span>
          <span style={{ fontSize: 13, color: '#888', fontWeight: 500 }}>Est. 2017</span>
        </div>

        {/* Giant headline */}
        <h1 style={{ fontSize: 'clamp(56px, 11vw, 168px)', lineHeight: 0.88, letterSpacing: '-0.045em', marginBottom: 0 }} className="hero-bold-h1">
          Smooth skin,<br/>
          <span style={{
            color: 'var(--pink)',
            fontStyle: 'italic',
            fontWeight: 600,
            display: 'inline-block',
            transform: 'translateX(8%)',
          }}>seriously</span><br/>
          good results.
        </h1>

        {/* Bottom row: image + description side-by-side */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40, marginTop: 60, alignItems: 'end' }} className="hero-bold-bottom">
          <div>
            <p style={{ fontSize: 18, color: '#444', lineHeight: 1.6, marginBottom: 28, maxWidth: 440 }}>
              Laser hair removal, advanced facials, peels and wellness — powered by the Soprano ICE Platinum Laser. Real results, no fluff.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 28 }}>
              <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer" className="btn btn-pink">Book Now</a>
              <button className="btn btn-outline" onClick={() => navigate('Services')}>Browse Services</button>
            </div>
            <div style={{ display: 'flex', gap: 32, paddingTop: 20, borderTop: '1px solid #e5dcd5' }}>
              <div>
                <div style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: 1 }}>7+</div>
                <div style={{ fontSize: 12, color: '#888', fontWeight: 500, marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Years</div>
              </div>
              <div>
                <div style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: 1 }}>5★</div>
                <div style={{ fontSize: 12, color: '#888', fontWeight: 500, marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Rated</div>
              </div>
              <div>
                <div style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: 1 }}>All</div>
                <div style={{ fontSize: 12, color: '#888', fontWeight: 500, marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Skin Tones</div>
              </div>
            </div>
          </div>
          {/* Right: image with badge */}
          <div style={{ position: 'relative' }}>
            <div style={{
              borderRadius: 'var(--radius-pill)',
              overflow: 'hidden',
              aspectRatio: '3/4',
              boxShadow: '0 24px 60px rgba(0,0,0,0.12)',
            }}>
              <img src="uploads/pasted-1779888455124-0.png" alt="Glowing skin"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{
              position: 'absolute', top: -16, right: -16,
              width: 88, height: 88, borderRadius: '50%',
              background: 'var(--pink)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              textAlign: 'center', fontSize: 11, fontWeight: 700,
              letterSpacing: '0.05em', lineHeight: 1.3,
              boxShadow: '0 8px 24px rgba(244,167,187,0.4)',
              animation: 'badgeSpin 18s linear infinite',
            }}>
              SOPRANO<br/>ICE ✦<br/>PLATINUM
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes badgeSpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
}

/* ===== V4: COLLAGE — Multi-image collage with playful sticker elements ===== */
function HeroCollage({ navigate }) {
  return (
    <div className="hero-section bg-cream" style={{ paddingTop: 60, paddingBottom: 60, minHeight: '92vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center' }}>
      <BlobShape style={{ width: 400, height: 400, top: '-10%', left: '50%', transform: 'translateX(-50%)' }} />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 50, alignItems: 'center' }} className="hero-collage-grid">
          {/* LEFT: text */}
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 28 }}>
              <span style={{ width: 32, height: 2, background: 'var(--pink)' }}></span>
              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--pink)' }}>Surrey's Favourite Skin Studio</span>
            </div>
            <h1 style={{ fontSize: 'clamp(44px, 6vw, 86px)', lineHeight: 1, marginBottom: 28, letterSpacing: '-0.03em' }} className="hero-collage-h1">
              Glow up,<br/>
              the <span style={{
                background: 'linear-gradient(120deg, var(--pink) 0%, var(--pink-hover) 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                fontStyle: 'italic',
              }}>squishy</span><br/>
              way.
            </h1>
            <p style={{ fontSize: 18, color: '#555', lineHeight: 1.65, marginBottom: 32, maxWidth: 460 }}>
              Laser hair removal, facials, peels, and wellness, powered by the Soprano ICE Platinum Laser. Celebrity trusted, locally loved.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 36 }}>
              <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer" className="btn btn-pink">Book Now ✦</a>
              <button className="btn btn-outline" onClick={() => navigate('Services')}>Our Services</button>
            </div>

            {/* Mini-trust row */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              {/* Avatar pile */}
              <div style={{ display: 'flex' }}>
                {['#F4A7BB', '#E8A0C9', '#D4918A', '#B88BA8'].map((c, i) => (
                  <div key={i} style={{
                    width: 36, height: 36, borderRadius: '50%',
                    background: c, marginLeft: i === 0 ? 0 : -12,
                    border: '2px solid #fff', zIndex: 4 - i,
                  }}></div>
                ))}
              </div>
              <div>
                <div style={{ display: 'flex', gap: 2, marginBottom: 2 }}>
                  {Array.from({ length: 5 }).map((_, i) => (
                    <svg key={i} width="14" height="14" viewBox="0 0 20 20" fill="var(--pink)"><path d="M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.33L10 13.28l-4.77 2.44.91-5.33L2.27 6.62l5.34-.78z"/></svg>
                  ))}
                </div>
                <div style={{ fontSize: 13, color: '#666', fontWeight: 500 }}>Loved by clients across Surrey</div>
              </div>
            </div>
          </div>

          {/* RIGHT: 3-image collage */}
          <div style={{ position: 'relative', minHeight: 540 }} className="hero-collage-images">
            {/* Main large image */}
            <div style={{
              position: 'absolute', top: 0, right: 0, width: '78%', aspectRatio: '3/4',
              borderRadius: 28, overflow: 'hidden',
              boxShadow: '0 20px 50px rgba(0,0,0,0.12)',
            }}>
              <img src="uploads/pasted-1779887491049-0.png" alt="Laser hair removal"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            {/* Bottom-left small image */}
            <div style={{
              position: 'absolute', bottom: 0, left: 0, width: '55%', aspectRatio: '1',
              borderRadius: 24, overflow: 'hidden',
              boxShadow: '0 16px 40px rgba(0,0,0,0.14)',
              border: '6px solid var(--cream)',
            }}>
              <img src="uploads/pasted-1779887577113-0.png" alt="Facial"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            {/* Floating pink sticker — top left */}
            <div style={{
              position: 'absolute', top: '20%', left: '-2%',
              background: 'var(--pink)', color: '#fff',
              padding: '14px 18px', borderRadius: 18,
              fontSize: 13, fontWeight: 700, letterSpacing: '0.04em',
              boxShadow: '0 10px 30px rgba(244,167,187,0.4)',
              transform: 'rotate(-8deg)',
              animation: 'gentleWiggle 6s ease-in-out infinite',
              zIndex: 3,
              lineHeight: 1.3,
            }}>
              ✦ Soprano ICE<br/>Platinum
            </div>
            {/* Floating white sticker — middle right */}
            <div style={{
              position: 'absolute', top: '55%', right: '-4%',
              background: '#fff', color: 'var(--black)',
              padding: '12px 16px', borderRadius: 16,
              fontSize: 12, fontWeight: 700,
              boxShadow: '0 10px 30px rgba(0,0,0,0.1)',
              transform: 'rotate(6deg)',
              animation: 'gentleWiggle 7s ease-in-out infinite reverse',
              zIndex: 3,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#4ade80' }}></span>
              Booking open
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes gentleWiggle {
          0%, 100% { transform: rotate(-8deg) translateY(0); }
          50% { transform: rotate(-6deg) translateY(-6px); }
        }
      `}</style>
    </div>
  );
}

/* ===== V5: FULL BLEED — Hero image fills entire section, text overlaid ===== */
function HeroFullBleed({ navigate }) {
  return (
    <div className="hero-section" style={{ position: 'relative', minHeight: '92vh', overflow: 'hidden', background: 'var(--black)' }}>
      {/* Full-bleed image */}
      <img src="uploads/pasted-1779887028430-0.png" alt="Laser treatment equipment"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0 }} />
      {/* Dual gradient overlay: dark at bottom + soft on right for legibility */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 35%, rgba(26,26,26,0.4) 70%, rgba(26,26,26,0.85) 100%)',
      }}></div>

      {/* Bottom-aligned content */}
      <div className="container" style={{ position: 'relative', zIndex: 2, minHeight: '92vh', display: 'flex', alignItems: 'flex-end', paddingTop: 100, paddingBottom: 60 }}>
        <div style={{ width: '100%', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 60, alignItems: 'end' }} className="full-bleed-grid">
          <div>
            <h1 style={{ fontSize: 'clamp(48px, 7vw, 104px)', lineHeight: 0.95, marginBottom: 28, color: '#fff', letterSpacing: '-0.035em' }} className="full-bleed-h1">
              Smooth skin,<br/>
              <span style={{ color: 'var(--pink)', fontStyle: 'italic', fontWeight: 600 }}>seriously</span> good<br/>
              results.
            </h1>
            <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.85)', lineHeight: 1.65, marginBottom: 36, maxWidth: 500 }}>
              Laser hair removal, facials, peels, and wellness — powered by the Soprano ICE Platinum Laser. Celebrity trusted, locally loved.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer" className="btn btn-pink" style={{ fontSize: 16, padding: '18px 40px' }}>Book Now</a>
              <button className="btn btn-outline-white" onClick={() => navigate('Services')}>Our Services</button>
            </div>
          </div>

          {/* Right glass stats card */}
          <div style={{
            background: 'rgba(255,255,255,0.12)',
            backdropFilter: 'blur(20px)',
            border: '1px solid rgba(255,255,255,0.2)',
            borderRadius: 'var(--radius-lg)',
            padding: '32px 28px',
            color: '#fff',
          }} className="full-bleed-stats">
            <div style={{ display: 'grid', gap: 24 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 700, lineHeight: 1 }}>7+</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Years in Business</div>
              </div>
              <div style={{ height: 1, background: 'rgba(255,255,255,0.2)' }}></div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 700, lineHeight: 1 }}>5★</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Client Rated</div>
              </div>
              <div style={{ height: 1, background: 'rgba(255,255,255,0.2)' }}></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 24 }}>✦</span>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pink)' }}>Soprano ICE</div>
                  <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>Platinum Laser</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===== V6: POSTER — Zine-style poster with layered cards and tilted stickers ===== */
function HeroPoster({ navigate }) {
  return (
    <div className="hero-section bg-cream" style={{ paddingTop: 80, paddingBottom: 80, minHeight: '92vh', position: 'relative', overflow: 'hidden' }}>
      {/* Background pattern */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.08, zIndex: 0,
        backgroundImage: `radial-gradient(circle, var(--pink) 1.5px, transparent 1.5px)`,
        backgroundSize: '24px 24px',
      }}></div>

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        {/* Top horizontal info bar */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '16px 24px', background: 'var(--black)', color: '#fff',
          borderRadius: 'var(--radius-pill)', marginBottom: 48, flexWrap: 'wrap', gap: 12,
        }} className="poster-bar">
          <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            ✦ Squishy Skin Etc.
          </span>
          <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--pink)' }}>
            Now Booking · 5★ Rated
          </span>
        </div>

        {/* Main poster grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48, alignItems: 'stretch' }} className="poster-grid">
          {/* LEFT: tilted image stack */}
          <div style={{ position: 'relative', minHeight: 580 }} className="poster-images">
            {/* Back image — tilted left (men's laser) */}
            <div style={{
              position: 'absolute', top: 20, left: 0, width: '70%', aspectRatio: '3/4',
              borderRadius: 24, overflow: 'hidden',
              transform: 'rotate(-5deg)',
              boxShadow: '0 20px 50px rgba(0,0,0,0.15)',
              border: '8px solid #fff',
              zIndex: 1,
            }}>
              <img src="uploads/pasted-1779887520916-1.png" alt="Men's laser treatment"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            {/* Front image — tilted right (women's laser, on top) */}
            <div style={{
              position: 'absolute', bottom: 0, right: 0, width: '68%', aspectRatio: '3/4',
              borderRadius: 24, overflow: 'hidden',
              transform: 'rotate(4deg)',
              boxShadow: '0 24px 60px rgba(0,0,0,0.18)',
              border: '8px solid #fff',
              zIndex: 2,
            }}>
              <img src="uploads/pasted-1779887491049-0.png" alt="Women's laser treatment"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            {/* Pink star sticker — top right */}
            <div style={{
              position: 'absolute', top: '-2%', right: '8%', zIndex: 3,
              width: 110, height: 110,
              animation: 'slowSpin 14s linear infinite',
            }}>
              <svg viewBox="0 0 100 100" width="100%" height="100%">
                <path fill="var(--pink)" d="M50 0 L58 35 L95 32 L66 55 L80 90 L50 70 L20 90 L34 55 L5 32 L42 35 Z" />
                <text x="50" y="48" textAnchor="middle" fill="#fff" fontSize="9" fontWeight="700" letterSpacing="0.5">
                  <tspan x="50" dy="0">SINCE</tspan>
                  <tspan x="50" dy="11">2017</tspan>
                </text>
              </svg>
            </div>
            {/* Yellow tape — bottom */}
            <div style={{
              position: 'absolute', bottom: '8%', left: '-2%', zIndex: 3,
              background: 'var(--black)', color: 'var(--pink)',
              padding: '10px 18px', borderRadius: 12,
              fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
              transform: 'rotate(-6deg)',
              boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
            }}>
              Celebrity Trusted ✓
            </div>
          </div>

          {/* RIGHT: oversized type */}
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <h1 style={{ fontSize: 'clamp(56px, 9vw, 132px)', lineHeight: 0.88, marginBottom: 32, letterSpacing: '-0.04em' }} className="poster-h1">
              Smooth.<br/>
              <span style={{
                background: 'var(--pink)', color: '#fff',
                display: 'inline-block', padding: '0 18px',
                transform: 'rotate(-1.5deg)',
                borderRadius: 12,
                fontStyle: 'italic',
              }}>Squishy.</span><br/>
              <span style={{
                textDecoration: 'underline',
                textDecorationColor: 'var(--pink)',
                textDecorationThickness: '6px',
                textUnderlineOffset: '6px',
              }}>Serious.</span>
            </h1>
            <p style={{ fontSize: 18, color: '#444', lineHeight: 1.65, marginBottom: 32, maxWidth: 460 }}>
              Laser hair removal, advanced facials, peels, and wellness — powered by the Soprano ICE Platinum Laser. The studio Surrey trusts.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 28 }}>
              <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer" className="btn btn-pink" style={{ fontSize: 16, padding: '18px 36px' }}>Book Now →</a>
              <button className="btn btn-outline" onClick={() => navigate('Services')}>Our Services</button>
            </div>
            {/* Inline mini stats */}
            <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 32, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--pink)' }}>7+</span>
                <span style={{ fontSize: 13, color: '#666', maxWidth: 80, lineHeight: 1.3 }}>years in business</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 32, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--pink)' }}>5★</span>
                <span style={{ fontSize: 13, color: '#666', maxWidth: 80, lineHeight: 1.3 }}>client rated</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 32, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--pink)' }}>All</span>
                <span style={{ fontSize: 13, color: '#666', maxWidth: 80, lineHeight: 1.3 }}>skin tones welcome</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

/* ===== V7: VERTICAL SPLIT — Image bottom, text top, like a fashion campaign poster ===== */
function HeroVerticalSplit({ navigate }) {
  return (
    <div className="hero-section bg-cream" style={{ position: 'relative', overflow: 'hidden', minHeight: '92vh', display: 'flex', flexDirection: 'column' }}>
      {/* TOP: text block */}
      <div style={{ padding: '60px 0 40px', position: 'relative', zIndex: 1 }}>
        <div className="container">
          {/* Top label row */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32, flexWrap: 'wrap', gap: 12 }}>
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--pink)' }}>
              ✦ Squishy Skin Etc.
            </span>

          </div>

          {/* Headline */}
          <h1 style={{ fontSize: 'clamp(48px, 8.5vw, 132px)', lineHeight: 0.92, letterSpacing: '-0.04em', textAlign: 'center', marginBottom: 28 }} className="vsplit-h1">
            Smooth skin, <span style={{ color: 'var(--pink)', fontStyle: 'italic', fontWeight: 600 }}>seriously</span> good results.
          </h1>

          {/* Sub + CTAs */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24 }}>
            <p style={{ fontSize: 17, color: '#555', lineHeight: 1.6, textAlign: 'center', maxWidth: 560 }}>
              Laser hair removal, facials, peels, and wellness — powered by the Soprano ICE Platinum Laser.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
              <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer" className="btn btn-pink">Book Now</a>
              <button className="btn btn-outline" onClick={() => navigate('Services')}>Our Services</button>
            </div>
          </div>
        </div>
      </div>

      {/* BOTTOM: full-width image strip with overlaid stats */}
      <div style={{ position: 'relative', flex: 1, minHeight: 380, overflow: 'hidden' }} className="vsplit-image">
        <img src="uploads/pasted-1779887491049-0.png" alt="Laser hair removal at Squishy Skin"
          style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
        {/* Subtle gradient bottom for legibility */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%)',
        }}></div>

        {/* Floating stats strip bottom */}
        <div style={{
          position: 'absolute', bottom: 32, left: 32, right: 32,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          flexWrap: 'wrap', gap: 20,
        }} className="vsplit-bottom-row">
          {/* Pink Soprano badge */}
          <div style={{
            background: 'var(--pink)', color: '#fff',
            padding: '14px 22px', borderRadius: 'var(--radius-pill)',
            fontSize: 13, fontWeight: 700, letterSpacing: '0.04em',
            boxShadow: '0 10px 30px rgba(244,167,187,0.45)',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ fontSize: 16 }}>✦</span>
            Powered by Soprano ICE Platinum
          </div>

          {/* Stats trio */}
          <div style={{ display: 'flex', gap: 24, color: '#fff', alignItems: 'center' }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: 1, textShadow: '0 2px 8px rgba(0,0,0,0.3)' }}>7+</div>
              <div style={{ fontSize: 11, opacity: 0.9, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 4 }}>Years</div>
            </div>
            <div style={{ width: 1, height: 32, background: 'rgba(255,255,255,0.4)' }}></div>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: 1, textShadow: '0 2px 8px rgba(0,0,0,0.3)' }}>5★</div>
              <div style={{ fontSize: 11, opacity: 0.9, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 4 }}>Rated</div>
            </div>
            <div style={{ width: 1, height: 32, background: 'rgba(255,255,255,0.4)' }}></div>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 700, lineHeight: 1, textShadow: '0 2px 8px rgba(0,0,0,0.3)' }}>All</div>
              <div style={{ fontSize: 11, opacity: 0.9, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 4 }}>Skin Tones</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroClassic, HeroEditorial, HeroBoldType, HeroCollage, HeroFullBleed, HeroPoster, HeroVerticalSplit });