// Rituals.jsx — Renewal Rituals editorial feature
function Rituals() {
  const rituals = [
    {
      name: 'The Glow Release Ritual',
      area: 'Face',
      duration: '45 min',
      tagline: 'Depuff · Lift · Illuminate',
      single: '$225', series4: '$860', series4Unit: '$215/session',
      series8: '$1,640', series8Unit: '$205/session',
    },
    {
      name: 'The Sculpt & Detox Ritual',
      area: 'Body',
      duration: '60 min',
      tagline: 'Drain · Contour · Refine',
      single: '$275', series4: '$1,040', series4Unit: '$260/session',
      series8: '$2,000', series8Unit: '$250/session',
    },
    {
      name: 'The Total Renewal Ritual',
      area: 'Face + Body',
      duration: '90 min',
      tagline: 'Full Reset · Deep Detox · Ultimate Sculpt',
      single: '$395', series4: '$1,520', series4Unit: '$380/session',
      series8: '—', series8Unit: '',
    },
  ];

  return (
    <section style={{ background: 'var(--rv-ink)', color: 'white', padding: '140px 0', position: 'relative', overflow: 'hidden' }} className="rv-rituals rv-grain">
      {/* Faint purple wash */}
      <div style={{
        position: 'absolute', top: '-20%', right: '-10%', width: '60%', height: '140%',
        background: 'radial-gradient(ellipse at center, rgba(159,101,230,0.22), transparent 65%)',
        pointerEvents: 'none',
      }}></div>

      <div className="rv-container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 72 }} className="rv-rit-head">
          <div>
            <div className="rv-eyebrow" style={{ marginBottom: 28, color: 'var(--rv-purple-300)' }}>
              <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--rv-purple-300)', verticalAlign: 'middle', marginRight: 12 }}></span>
              New Service Line
            </div>
            <h2 className="rv-futura" style={{
              fontSize: 'clamp(44px, 6vw, 92px)', fontWeight: 300,
              lineHeight: 0.98, margin: 0, letterSpacing: '-0.015em',
              textTransform: 'uppercase',
            }}>
              The Reviv<br />
              <em style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontWeight: 300, color: 'var(--rv-purple-300)', textTransform: 'none' }}>Renewal</em> Rituals
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 19, lineHeight: 1.6, margin: 0, color: 'rgba(255,255,255,0.84)', maxWidth: 520 }}>
              Wellness as a lifelong ritual. Whether you're looking to glow, sculpt, detox, or restore, our Renewal Rituals are designed to support you at every stage — gentle, non-invasive lymphatic drainage that leaves you lighter, refreshed, and visibly revitalized.
            </p>
          </div>
        </div>

        {/* Rituals rows */}
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.14)' }}>
          {rituals.map((r, i) => (
            <div key={i} style={{
              padding: '44px 0',
              borderBottom: '1px solid rgba(255,255,255,0.14)',
              display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr auto', gap: 36, alignItems: 'center',
            }} className="rv-rit-row">
              <div>
                <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--rv-purple-300)', marginBottom: 10 }}>
                  0{i+1} · {r.area} · {r.duration}
                </div>
                <h3 className="rv-futura" style={{ fontSize: 32, fontWeight: 300, margin: '0 0 8px', lineHeight: 1.1 }}>{r.name}</h3>
                <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.06em' }}>{r.tagline}</div>
              </div>
              <div className="rv-price-cell">
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>Single</div>
                <div className="rv-futura" style={{ fontSize: 28, fontWeight: 300, color: 'var(--rv-purple-300)' }}>{r.single}</div>
              </div>
              <div className="rv-price-cell">
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>Series of 4</div>
                <div className="rv-futura" style={{ fontSize: 28, fontWeight: 300, color: 'var(--rv-purple-300)' }}>{r.series4}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>{r.series4Unit}</div>
              </div>
              <div className="rv-price-cell">
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>Series of 8</div>
                <div className="rv-futura" style={{ fontSize: 28, fontWeight: 300, color: 'var(--rv-purple-300)' }}>{r.series8}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 4 }}>{r.series8Unit}</div>
              </div>
              <button style={{
                background: 'transparent', color: 'white', border: '1px solid rgba(255,255,255,0.32)',
                padding: '14px 22px', fontSize: 12, letterSpacing: '0.18em',
                textTransform: 'uppercase', cursor: 'pointer', whiteSpace: 'nowrap',
                transition: 'all 200ms',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--rv-purple)'; e.currentTarget.style.borderColor = 'var(--rv-purple)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.32)'; }}
              >Book Ritual</button>
            </div>
          ))}
        </div>

        {/* Add-ons */}
        <div style={{ marginTop: 72 }}>
          <div className="rv-eyebrow" style={{ color: 'var(--rv-purple-300)', marginBottom: 32 }}>Enhance Your Ritual</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="rv-addons">
            {[
              ['Radiance Infusion', '+$85', 'Red Light Therapy + HA Mask. Supports collagen, hydration, and skin rejuvenation.'],
              ['Sculpting Lift', '+$60', 'Lymphatic Facial Cupping. Enhances contour, circulation, and natural lift.'],
              ['Tightening Energy', '+$125', 'NuEra Tight Radio Frequency. Firms and smooths while stimulating collagen.'],
            ].map(([n, p, d], i) => (
              <div key={i} style={{
                padding: '32px 28px', background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(255,255,255,0.12)',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
                  <h4 className="rv-futura" style={{ fontSize: 22, fontWeight: 300, margin: 0 }}>{n}</h4>
                  <span className="rv-futura" style={{ fontSize: 22, fontWeight: 300, color: 'var(--rv-purple-300)' }}>{p}</span>
                </div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .rv-rituals { padding: 88px 0 !important; }
          .rv-rit-head { grid-template-columns: 1fr !important; gap: 28px !important; margin-bottom: 48px !important; }
          .rv-rit-row { grid-template-columns: 1fr 1fr !important; gap: 18px 14px !important; padding: 28px 0 !important; }
          .rv-rit-row > :first-child { grid-column: 1 / -1; }
          .rv-rit-row > :last-child { grid-column: 1 / -1; width: 100%; }
          .rv-addons { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 600px) {
          .rv-rituals { padding: 64px 0 !important; }
        }
      `}</style>
    </section>
  );
}
window.Rituals = Rituals;