/* ============================================
   SQUISHY SKIN — ABOUT PAGE
   ============================================ */

function AboutPage() {
  return (
    <div>
      {/* Hero */}
      <div className="section bg-pink-light" style={{ paddingTop: 60, paddingBottom: 60, textAlign: 'center' }}>
        <BlobShape style={{ width: 400, height: 400, top: -80, left: -60 }} />
        <div className="container" style={{ position: 'relative', zIndex: 1 }}>
          <span className="label">OUR STORY</span>
          <h1 style={{ fontSize: 56, marginBottom: 16 }}>About Squishy Skin</h1>
          <p style={{ fontSize: 18, color: '#666', maxWidth: 480, margin: '0 auto' }}>
            The story behind Surrey's favorite skin studio.
          </p>
        </div>
      </div>

      {/* Story Section */}
      <div className="section bg-white">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }} className="about-grid">
            <AnimatedSection>
              <img src="uploads/pasted-1779887028430-0.png" alt="Squishy Skin Studio" loading="lazy"
                style={{ width: '100%', height: 420, objectFit: 'cover', borderRadius: 'var(--radius-lg)' }} />
            </AnimatedSection>
            <AnimatedSection delay={1}>
              <h2 style={{ fontSize: 38, marginBottom: 20 }}>How It Started</h2>
              <p style={{ fontSize: 16, color: '#555', lineHeight: 1.8, marginBottom: 16 }}>
                Squishy Skin was born in 2017 from a simple belief: professional skin treatments should be accessible, effective, and actually enjoyable. Founder Komal Mann saw a gap in Surrey's beauty landscape and set out to create something different.
              </p>
              <p style={{ fontSize: 16, color: '#555', lineHeight: 1.8 }}>
                What started as a small studio has grown into Surrey's trusted destination for laser hair removal, advanced facials, and wellness treatments. Powered by the Soprano ICE Platinum Laser and a genuine love for helping people feel confident in their skin, Squishy Skin continues to raise the bar for what a skin studio can be.
              </p>
            </AnimatedSection>
          </div>
        </div>
      </div>

      {/* Founder Section */}
      <div className="section bg-black">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }} className="about-grid">
            <AnimatedSection>
              <div style={{ borderRadius: 28, overflow: 'hidden', aspectRatio: '4/5' }}>
                <img src="uploads/pasted-1779885746738-0.png" alt="Komal Mann, Founder" loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 28 }} />
              </div>
            </AnimatedSection>
            <AnimatedSection delay={1}>
              <span className="label">FOUNDER</span>
              <h2 style={{ fontSize: 44, color: '#fff', marginBottom: 8 }}>Komal Mann</h2>
              <p style={{ fontSize: 16, color: 'var(--pink)', fontWeight: 600, marginBottom: 24 }}>Founder & Lead Laser Technician</p>
              <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.8, marginBottom: 16 }}>
                Komal brings years of hands-on expertise with the Soprano ICE Platinum Laser, combining technical precision with a warm, client-first approach. Her training background spans advanced laser protocols, skin analysis, and the latest in non-invasive aesthetic technology.
              </p>
              <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.8, marginBottom: 16 }}>
                Her philosophy is straightforward: great results and a great experience should always come together. Every treatment at Squishy Skin reflects that standard.
              </p>
              <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.8 }}>
                Looking ahead, Komal has expanded her vision with the launch of Squishy Skin Academy, a training program for aspiring laser technicians who want to learn from someone who has done the work firsthand.
              </p>
            </AnimatedSection>
          </div>
        </div>
      </div>

      {/* Technology Section */}
      <div className="section bg-cream">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }} className="about-grid">
            <AnimatedSection>
              <div>
                <span className="label">OUR TECHNOLOGY</span>
                <h2 style={{ fontSize: 38, marginBottom: 20 }}>Soprano ICE Platinum</h2>
                <p style={{ fontSize: 16, color: '#555', lineHeight: 1.8, marginBottom: 16 }}>
                  We use the Soprano ICE Platinum Laser, widely recognized as the gold standard in laser hair removal. It combines three wavelengths for maximum coverage and effectiveness.
                </p>
                <p style={{ fontSize: 16, color: '#555', lineHeight: 1.8 }}>
                  What makes it different? Virtually painless treatments, fast sessions, proven results on all skin tones, and the trust of top clinics worldwide. It is the technology serious professionals choose.
                </p>
              </div>
            </AnimatedSection>
            <AnimatedSection delay={1}>
              <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                <img src="uploads/pasted-1779888304785-0.png" alt="Soprano ICE Platinum Laser" loading="lazy"
                  style={{ width: '100%', height: 380, objectFit: 'cover', borderRadius: 'var(--radius-lg)' }} />
              </div>
            </AnimatedSection>
          </div>
        </div>
      </div>

      {/* Values Section */}
      <div className="section bg-white">
        <div className="container">
          <AnimatedSection>
            <h2 style={{ fontSize: 38, textAlign: 'center', marginBottom: 48 }}>What We Stand For</h2>
          </AnimatedSection>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="values-grid">
            {[
              { title: 'Real Results', desc: 'Measurable, visible outcomes from every treatment. We let the results do the talking.' },
              { title: 'All Skin Welcome', desc: 'Technology that works on every skin tone and type, safely and effectively. No exceptions.' },
              { title: 'Good Vibes Only', desc: 'A studio atmosphere that makes every visit feel comfortable, fun, and genuinely enjoyable.' },
            ].map((v, i) => (
              <AnimatedSection key={i} delay={i + 1}>
                <div style={{
                  background: 'var(--cream)', borderRadius: 'var(--radius-lg)', padding: '36px 28px',
                  borderTop: '4px solid var(--pink)', textAlign: 'center',
                }}>
                  <h3 style={{ fontSize: 22, marginBottom: 12 }}>{v.title}</h3>
                  <p style={{ fontSize: 15, color: '#666', lineHeight: 1.7 }}>{v.desc}</p>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </div>

      {/* Academy Section */}
      <div className="section bg-pink-light" style={{ textAlign: 'center' }}>
        <BlobShape style={{ width: 350, height: 350, bottom: -80, right: -60 }} variant={2} />
        <div className="container" style={{ position: 'relative', zIndex: 1 }}>
          <AnimatedSection>
            <span className="label">TRAINING PROGRAM</span>
            <h2 style={{ fontSize: 42, marginBottom: 16 }}>Squishy Skin Academy</h2>
            <p style={{ fontSize: 17, color: '#555', lineHeight: 1.7, maxWidth: 560, margin: '0 auto 36px' }}>
              Ready to start your career in laser? Our intensive training program covers everything from safety protocols to hands-on technique, taught by Komal herself.
            </p>
            <a href="https://www.instagram.com/squishyskinacademy" target="_blank" rel="noopener noreferrer"
              className="btn btn-pink">Follow @squishyskinacademy</a>
          </AnimatedSection>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .values-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 600px) {
          .about-grid img { height: 280px !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { AboutPage });