/* ============================================
   SQUISHY SKIN — SERVICES PAGE
   ============================================ */

const SERVICE_CATEGORIES = [
  {
    id: 'womens-laser', name: "Women's Laser Hair Removal",
    desc: "Permanent hair reduction using the Soprano ICE Platinum Laser. Safe, painless, and effective on all skin tones. Results from your very first session.",
    img: 'uploads/pasted-1779887491049-0.png',
    imgLabel: "Woman's smooth skin or laser treatment",
    treatments: [
      { name: 'Full Body', duration: '1 hr', price: '$350' },
      { name: 'Face', duration: '20 mins', price: '$60' },
      { name: 'Arms', duration: '20 mins', price: '$105' },
      { name: 'Legs', duration: '20 mins', price: '$135' },
      { name: 'Full Brazilian', duration: '20 mins', price: '$85' },
      { name: 'Upper Lip', duration: '20 mins', price: '$35' },
      { name: 'Underarms', duration: '20 mins', price: '$50' },
      { name: 'Abdomen', duration: '20 mins', price: '$80' },
      { name: 'Chest', duration: '20 mins', price: '$70' },
      { name: 'Back', duration: '20 mins', price: '$135' },
      { name: 'Bikini', duration: '20 mins', price: '$55' },
      { name: 'Buttocks', duration: '30 mins', price: '$95' },
      { name: '4 Full Body Sessions (Package)', duration: '1 hr each', price: '$900' },
    ]
  },
  {
    id: 'mens-laser', name: "Men's Laser Hair Removal",
    desc: "Advanced laser hair removal designed for men. From full body to precision beard shaping, we have you covered.",
    img: 'uploads/pasted-1779887520916-1.png',
    imgLabel: "Men's grooming or laser treatment",
    treatments: [
      { name: 'Full Body', duration: '1 hr', price: '$410' },
      { name: 'Upper Body', duration: '45 mins', price: '$200' },
      { name: 'Legs', duration: '30 mins', price: '$140' },
      { name: 'Arms', duration: '30 mins', price: '$120' },
      { name: 'Back', duration: '20 mins', price: '$140' },
      { name: 'Abdomen', duration: '20 mins', price: '$100' },
      { name: 'Chest', duration: '20 mins', price: '$85' },
      { name: 'Beard Line Up (Cheeks)', duration: '20 mins', price: '$55' },
      { name: 'Neck', duration: '20 mins', price: '$40' },
      { name: 'Beard Line Up (Face & Neck)', duration: '20 mins', price: '$70' },
      { name: 'Unibrow', duration: '20 mins', price: '$25' },
      { name: 'Ear', duration: '10 mins', price: '$35' },
    ]
  },
  {
    id: 'facials', name: 'Facials & Skin Treatments',
    desc: "Advanced skin treatments to rejuvenate, hydrate, and transform your complexion. Each treatment is tailored to your skin's unique needs.",
    img: 'uploads/pasted-1779887577113-0.png',
    imgLabel: "Facial treatment in progress",
    treatments: [
      { name: 'OxyGeneo Facial', duration: '1 hr', price: '$195' },
      { name: 'Microdermabrasion Facial', duration: '1 hr 30 mins', price: '$150' },
      { name: 'Microneedling + Peptides', duration: '1 hr 30 mins', price: '$250' },
    ]
  },
  {
    id: 'peels', name: 'Peels (Zena Algae)',
    desc: "The Zena Algae Peel is a powerful skin resurfacing treatment that targets pigmentation, texture, and dullness across the face and body.",
    img: 'uploads/pasted-1779887623360-0.png',
    imgLabel: "Peel treatment or glowing skin result",
    treatments: [
      { name: 'Face', duration: '1 hr 30 mins', price: '$150' },
      { name: 'Back', duration: '1 hr 30 mins', price: '$300' },
      { name: 'Buttocks', duration: '1 hr 30 mins', price: '$300' },
      { name: 'Underarms', duration: '1 hr', price: '$150' },
    ]
  },
  {
    id: 'brows', name: 'Brows & Lashes',
    desc: "Perfectly shaped brows and lifted lashes to frame your face. No fuss, just clean, defined results.",
    img: 'uploads/pasted-1779887676102-0.png',
    imgLabel: "Eyebrow treatment or lash lift",
    treatments: [
      { name: 'Lash Lift', duration: '1 hr', price: '$70' },
      { name: 'Eyebrow Lamination', duration: '1 hr', price: '$70' },
      { name: 'Eyebrow Threading + Shaping + Mapping', duration: '20 mins', price: '$25' },
      { name: 'Eyebrow Laminate + Grooming + Mapping', duration: '45 mins', price: '$90' },
      { name: 'Eyebrow Tint + Grooming + Mapping', duration: '35 mins', price: '$35' },
    ]
  },
  {
    id: 'body', name: 'Body & Wellness',
    desc: "Targeted body treatments for skin tightening, rejuvenation, and hair restoration using advanced technology and your body's own healing power.",
    img: null,
    imgLabel: "Body treatment or wellness therapy",
    treatments: [
      { name: 'Tripollar RF Skin Tightening', duration: '1 hr', price: '$195' },
      { name: 'PRP Hair/Skin', duration: '1 hr', price: '$350' },
    ]
  },
  {
    id: 'extras', name: 'Extras',
    desc: "Additional services to complete your glow-up, from brightening your smile to getting expert skin advice.",
    img: 'uploads/pasted-1779889108806-0.png',
    imgLabel: "Teeth whitening or consultation",
    treatments: [
      { name: 'Teeth Whitening', duration: '30 mins', price: '$80' },
      { name: 'Consultation', duration: '30 mins', price: '$40' },
      { name: '2 Day Laser Hair Removal Training', duration: '8 hrs', price: '$10,000' },
    ]
  },
];

function ServicesPage() {
  const [activeTab, setActiveTab] = React.useState(0);
  const cat = SERVICE_CATEGORIES[activeTab];

  return (
    <div>
      {/* Hero */}
      <div className="section bg-cream" style={{ paddingTop: 60, paddingBottom: 60, textAlign: 'center' }}>
        <div className="container">
          <span className="label">OUR SERVICES</span>
          <h1 style={{ fontSize: 56, marginBottom: 16 }}>Everything Your Skin Needs</h1>
          <p style={{ fontSize: 18, color: '#666', maxWidth: 560, margin: '0 auto' }}>
            From laser hair removal to facials, peels, and beyond. Book online and let us take care of the rest.
          </p>
        </div>
      </div>

      {/* Category Tabs + Content */}
      <div className="section bg-white" style={{ paddingTop: 0 }}>
        <div className="container">
          {/* Tabs */}
          <div className="category-tabs" style={{ marginBottom: 48, paddingTop: 10 }}>
            {SERVICE_CATEGORIES.map((c, i) => (
              <button key={c.id} className={`category-tab ${i === activeTab ? 'active' : ''}`}
                onClick={() => setActiveTab(i)}>
                {c.name.replace("Women's Laser Hair Removal", "Women's Laser")
                  .replace("Men's Laser Hair Removal", "Men's Laser")
                  .replace("Facials & Skin Treatments", "Facials & Skin")
                  .replace("Peels (Zena Algae)", "Peels")}
              </button>
            ))}
          </div>

          {/* Active Category Content */}
          <div key={cat.id} style={{ animation: 'fadeSlideIn 0.35s ease' }}>
            {/* Image + Description */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginBottom: 48, alignItems: 'center' }}
              className="service-detail-grid">
              {cat.img ? (
                <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', height: 420, boxShadow: '0 8px 30px rgba(0,0,0,0.08)' }} className="service-detail-img">
                  <img src={cat.img} alt={cat.name} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
              ) : (
                <PlaceholderImage label={cat.imgLabel} height={420} />
              )}
              <div>
                <h2 style={{ fontSize: 34, marginBottom: 16 }}>{cat.name}</h2>
                <p style={{ fontSize: 16, color: '#666', lineHeight: 1.7 }}>{cat.desc}</p>
              </div>
            </div>

            {/* Price Table */}
            <div style={{ background: 'var(--cream)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
              <table className="price-table">
                <thead>
                  <tr>
                    <th>Treatment</th>
                    <th>Duration</th>
                    <th>Price</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {cat.treatments.map((t, i) => (
                    <tr key={i} style={{ transition: 'background 0.2s' }}
                      onMouseEnter={e => e.currentTarget.style.background = 'rgba(244,167,187,0.06)'}
                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <td className="treatment-name">{t.name}</td>
                      <td style={{ color: '#888' }}>{t.duration}</td>
                      <td className="price">{t.price}</td>
                      <td style={{ textAlign: 'right' }}>
                        <a href="https://squishyskin.setmore.com/" target="_blank" rel="noopener noreferrer"
                          className="book-link">Book</a>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {/* CTA */}
      <CTASection heading="Ready to book?" subtext="Secure your spot online in just a few clicks." />

      <style>{`
        @keyframes fadeSlideIn {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 900px) {
          .service-detail-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
        @media (max-width: 600px) {
          .price-table th:nth-child(2), .price-table td:nth-child(2) { display: none; }
          .service-detail-grid img { height: 280px !important; }
          .service-detail-img { height: 280px !important; }
          .category-tabs { padding-bottom: 12px !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ServicesPage });