/* ============================================
   SQUISHY SKIN — HOME PAGE
   ============================================ */

function HomePage({ setCurrentPage, heroVariant = 'classic', heroOverlay = 0.62 }) {
  const navigate = (page) => { setCurrentPage(page); window.scrollTo({ top: 0 }); };

  const HeroComponent = {
    classic: HeroClassic,
    editorial: HeroEditorial,
    bold: HeroBoldType,
    collage: HeroCollage,
    fullbleed: HeroFullBleed,
    poster: HeroPoster,
    vsplit: HeroVerticalSplit,
  }[heroVariant] || HeroClassic;

  return (
    <div>
      {/* ===== HERO ===== */}
      <HeroComponent navigate={navigate} overlayOpacity={heroOverlay} />

      {/* ===== WHY CHOOSE US ===== */}
      <div className="section bg-pink-light" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="container">
          <AnimatedSection>
            <span className="label" style={{ textAlign: 'center', display: 'block' }}>WHY SQUISHY SKIN</span>
            <h2 style={{ fontSize: 42, textAlign: 'center', marginBottom: 56 }}>Why Choose Squishy Skin?</h2>
          </AnimatedSection>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }} className="trust-grid">
            {[
              { title: 'Soprano ICE Platinum Laser', desc: 'The gold standard in laser technology. Painless, effective, and safe for all skin types and tones.', img: 'uploads/pasted-1779888304785-0.png' },
              { title: 'Celebrity Trusted', desc: 'The trusted choice for clients who expect the best. Proven results that speak for themselves.', img: 'uploads/pasted-1779889029331-0.png' },
              { title: '7+ Years of Experience', desc: 'Serving Surrey since 2017 with thousands of successful treatments and counting.', img: 'uploads/pasted-1779887028430-0.png' },
              { title: 'Safe for All Skin Tones', desc: 'Advanced technology designed to work beautifully and safely on every skin tone and type.', img: 'uploads/pasted-1779888455124-0.png' },
            ].map((item, i) => (
              <AnimatedSection key={i} delay={i % 2 === 0 ? 1 : 2}>
                <div style={{
                  background: '#fff', borderRadius: 'var(--radius-lg)', padding: 0, overflow: 'hidden',
                  display: 'flex', flexDirection: 'column', height: '100%',
                  boxShadow: '0 4px 20px rgba(0,0,0,0.04)',
                }} className="trust-card">
                  <div style={{ overflow: 'hidden', height: 280, flexShrink: 0 }} className="trust-card-img-wrap">
                    <img src={item.img} alt={item.title} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  </div>
                  <div style={{ padding: '28px 28px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                    <h4 style={{ fontSize: 22, fontWeight: 700, marginBottom: 12, lineHeight: 1.25 }}>{item.title}</h4>
                    <p style={{ fontSize: 15, color: '#666', lineHeight: 1.65 }}>{item.desc}</p>
                  </div>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </div>

      {/* ===== SERVICES PREVIEW ===== */}
      <div className="section bg-white">
        <div className="container">
          <AnimatedSection>
            <h2 style={{ fontSize: 42, marginBottom: 40 }}>What We Do</h2>
          </AnimatedSection>
          <div style={{ display: 'flex', gap: 20, overflowX: 'auto', paddingBottom: 16, scrollSnapType: 'x mandatory' }}
            className="services-scroll">
            {[
              { name: "Women's Laser", price: '$35', img: 'uploads/pasted-1779887491049-0.png' },
              { name: "Men's Laser", price: '$25', img: 'uploads/pasted-1779887520916-1.png' },
              { name: 'Facials & Skin', price: '$150', img: 'uploads/pasted-1779887577113-0.png' },
              { name: 'Peels', price: '$150', img: 'uploads/pasted-1779887623360-0.png' },
              { name: 'Brows & Lashes', price: '$25', img: 'uploads/pasted-1779887676102-0.png' },
              { name: 'Body & Wellness', price: '$195', img: null },
              { name: 'Extras', price: '$40', img: 'uploads/pasted-1779889108806-0.png' },
            ].map((s, i) => (
              <div key={i} className="service-card" onClick={() => navigate('Services')}
                style={{ minWidth: 300, scrollSnapAlign: 'start' }}>
                <div style={{ height: 280, background: 'linear-gradient(145deg, #f5e6de, #edd5ca)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                  {s.img ? (
                    <img src={s.img} alt={s.name} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  ) : (
                    <span style={{ fontSize: 13, color: '#b8a090' }}>{s.name} Image</span>
                  )}
                </div>
                <div style={{ padding: '22px 24px' }}>
                  <h4 style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>{s.name}</h4>
                  <p style={{ fontSize: 15, color: 'var(--pink)', fontWeight: 600 }}>From {s.price}</p>
                </div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <button className="btn btn-pink" onClick={() => navigate('Services')}>View All Services</button>
          </div>
        </div>
      </div>

      {/* ===== FOUNDER TEASER ===== */}
      <div className="section bg-black">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }} className="founder-grid">
            <AnimatedSection>
              <div style={{ borderRadius: 28, overflow: 'hidden', aspectRatio: '4/5' }}>
                <img src="uploads/pasted-1779885746738-0.png" alt="Komal Mann" loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 28 }} />
              </div>
            </AnimatedSection>
            <AnimatedSection delay={1}>
              <span className="label">THE FOUNDER</span>
              <h2 style={{ fontSize: 44, color: '#fff', marginBottom: 20 }}>Komal Mann</h2>
              <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, marginBottom: 12 }}>
                Komal founded Squishy Skin in 2017 with a clear mission: make professional laser and skin treatments accessible, effective, and genuinely enjoyable.
              </p>
              <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, marginBottom: 32 }}>
                With deep expertise in the Soprano ICE Platinum Laser and a commitment to creating a space where everyone feels welcome, she has built Surrey's go-to destination for serious skin results.
              </p>
              <button className="btn btn-outline-pink" onClick={() => navigate('About')}>Her Story</button>
            </AnimatedSection>
          </div>
        </div>
      </div>

      {/* ===== RESULTS / SOCIAL PROOF ===== */}
      <div className="section bg-white">
        <div className="container">
          <AnimatedSection>
            <h2 style={{ fontSize: 42, marginBottom: 40 }}>Real Results</h2>
          </AnimatedSection>
          {/* Before/After Scroll */}
          <div style={{ display: 'flex', gap: 20, overflowX: 'auto', paddingBottom: 16, marginBottom: 48 }}>
            {['Before/After: Legs', 'Before/After: Underarms', 'Before/After: Face', 'Before/After: Brazilian', 'Before/After: Arms'].map((label, i) => (
              <div key={i} className="gallery-placeholder" style={{ minWidth: 260, height: 200, flexShrink: 0 }}>
                {label}
              </div>
            ))}
          </div>
          {/* Testimonial */}
          <AnimatedSection>
            <div style={{
              background: 'var(--cream)', borderRadius: 'var(--radius-lg)', padding: '40px 48px',
              maxWidth: 640, margin: '0 auto', textAlign: 'center',
            }}>
              <StarRating />
              <p style={{ fontSize: 18, lineHeight: 1.7, margin: '20px 0 16px', fontStyle: 'italic', color: '#444' }}>
                "I have been coming to Squishy Skin for over a year and the results are amazing. Komal is so professional and makes every session comfortable. Best decision I have ever made for my skin!"
              </p>
              <p style={{ fontWeight: 700, fontSize: 15 }}>Sarah M.</p>
              <p style={{ fontSize: 13, color: '#888' }}>Surrey, BC</p>
            </div>
          </AnimatedSection>
        </div>
      </div>

      {/* ===== ACADEMY ===== */}
      <div className="section bg-pink-light">
        <div className="container" style={{ textAlign: 'center' }}>
          <AnimatedSection>
            <span className="label">TRAINING</span>
            <h2 style={{ fontSize: 42, marginBottom: 16 }}>Want to Learn Laser?</h2>
            <p style={{ fontSize: 17, color: '#666', lineHeight: 1.7, maxWidth: 560, margin: '0 auto 36px' }}>
              We train the next generation of laser techs. Our 2-day intensive course covers everything you need to get started.
            </p>
            <a href="https://www.instagram.com/squishyskinacademy" target="_blank" rel="noopener noreferrer"
              className="btn btn-pink">Learn More</a>
          </AnimatedSection>
        </div>
      </div>

      {/* ===== CTA ===== */}
      <CTASection />

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .hero-collage-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .hero-collage-images { min-height: 480px !important; }
          .hero-bold-bottom { grid-template-columns: 1fr !important; gap: 32px !important; }
          .hero-editorial-h1 { font-size: 56px !important; }
          .hero-bold-h1 { font-size: clamp(48px, 13vw, 96px) !important; }
          .hero-collage-h1 { font-size: clamp(40px, 9vw, 72px) !important; }
          .full-bleed-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .full-bleed-h1 { font-size: clamp(40px, 11vw, 72px) !important; }
          .full-bleed-stats { padding: 24px !important; }
          .poster-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .poster-images { min-height: 460px !important; }
          .poster-h1 { font-size: clamp(48px, 13vw, 96px) !important; }
          .vsplit-h1 { font-size: clamp(40px, 11vw, 80px) !important; }
          .trust-grid { grid-template-columns: 1fr !important; }
          .founder-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 600px) {
          .hero-grid { gap: 28px !important; }
          .hero-collage-images { min-height: 400px !important; }
          .hero-editorial-h1 { font-size: 44px !important; }
          .hero-editorial-badge { bottom: 16px !important; right: 16px !important; padding: 12px 16px !important; }
          .full-bleed-chip { top: 16px !important; right: 16px !important; padding: 8px 14px !important; font-size: 10px !important; }
          .poster-bar { padding: 12px 18px !important; flex-direction: column !important; gap: 6px !important; }
          .poster-images { min-height: 380px !important; }
          .vsplit-image { min-height: 320px !important; }
          .vsplit-bottom-row { left: 16px !important; right: 16px !important; bottom: 16px !important; flex-direction: column !important; align-items: flex-start !important; }
          .trust-card-img-wrap { height: 280px !important; }
          .service-card { min-width: 85vw !important; }
          .service-card > div:first-child { height: 320px !important; }
          .gallery-placeholder { min-width: 85vw !important; height: 240px !important; }
        }
        .services-scroll::-webkit-scrollbar { display: none; }
        .services-scroll { scrollbar-width: none; }
      `}</style>
    </div>
  );
}

Object.assign(window, { HomePage });