// Spotlight.jsx — Treatment Spotlight tabbed module
function Spotlight() {
  const treatments = [
    {
      name: 'Sylfirm X',
      kicker: 'RF Microneedling',
      blurb: 'One-of-its-kind radiofrequency microneedling for tone, texture, and pigment. Twelve benefits across a single protocol, customized to your skin.',
      meta: ['45 min', 'Series of 3–4', 'Minimal downtime'],
      tag: 'Signature',
    },
    {
      name: 'MOXI',
      kicker: 'Gentle Laser Resurfacing',
      blurb: 'Pre-juvenation for early pigment and texture concerns. Low downtime, visible luminosity — ideal for patients in their late 30s and 40s.',
      meta: ['30 min', 'Series of 3', 'Low downtime'],
      tag: 'Featured',
    },
    {
      name: 'CoolSculpting Elite',
      kicker: 'Body Contouring',
      blurb: 'Non-invasive fat reduction that freezes treated cells so the body clears them naturally. Refinement, not transformation.',
      meta: ['35–70 min', '1–3 cycles', 'No downtime'],
      tag: 'Body',
    },
    {
      name: 'BBL Hero / Heroic',
      kicker: 'BroadBand Light',
      blurb: 'The fastest, most versatile BBL device for skin quality, pigment, and redness. Cumulative results; kinder to the biological clock.',
      meta: ['20–45 min', 'Series of 3', 'Minimal downtime'],
      tag: 'Face + Body',
    },
    {
      name: 'Renewal Rituals',
      kicker: 'Lymphatic Drainage',
      blurb: 'Our elevated lymphatic line — Glow Release, Sculpt & Detox, Total Renewal. For every stage of your wellness journey.',
      meta: ['45 / 60 / 90 min', 'Single or series', 'Restorative'],
      tag: 'New',
    },
    {
      name: 'Skinvive',
      kicker: 'Microdroplet Hydrator',
      blurb: 'An injectable hydrator that improves smoothness and glow from within. Not a filler — a skin-quality treatment.',
      meta: ['20 min', 'Every 6 months', 'No downtime'],
      tag: 'Face',
    },
  ];

  const [active, setActive] = React.useState(0);
  const t = treatments[active];

  return (
    <section style={{ background: 'var(--rv-warm-wash)', padding: '140px 0' }} className="rv-spotlight">
      <div className="rv-container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div className="rv-eyebrow" style={{ marginBottom: 24 }}>Treatment Spotlight</div>
            <h2 className="rv-futura" style={{
              fontSize: 'clamp(40px, 5vw, 68px)', fontWeight: 300,
              lineHeight: 1.02, margin: 0, letterSpacing: '-0.01em',
              color: 'var(--rv-ink)', maxWidth: 720,
            }}>
              Advanced technology, <em style={{ fontStyle: 'italic', fontFamily: 'Georgia, serif', fontWeight: 300, color: 'var(--rv-purple-700)' }}>restrained</em> in how we use it.
            </h2>
          </div>
          <a href="#" style={{ fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--rv-ink)', borderBottom: '1px solid var(--rv-ink)', paddingBottom: 4 }}>All Treatments →</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 64, alignItems: 'start' }} className="rv-spot-grid">
          {/* Tabs */}
          <div className="rv-spot-tabs" style={{ borderLeft: '1px solid var(--rv-border)' }}>
            {treatments.map((tr, i) => (
              <button key={i} onClick={() => setActive(i)} data-active={active === i} style={{
                display: 'block', width: '100%', textAlign: 'left',
                background: 'none', border: 0, cursor: 'pointer',
                padding: '18px 0 18px 24px', marginLeft: -1,
                borderLeft: active === i ? '2px solid var(--rv-purple)' : '1px solid transparent',
                transition: 'all 240ms var(--rv-ease)',
              }}>
                <div style={{
                  fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: active === i ? 'var(--rv-purple)' : 'var(--rv-muted)',
                  marginBottom: 6, fontWeight: 500,
                }}>0{i+1} · {tr.tag}</div>
                <div className="rv-futura" style={{
                  fontSize: 22, fontWeight: 300, color: active === i ? 'var(--rv-ink)' : 'var(--rv-muted)',
                  transition: 'color 240ms',
                }}>{tr.name}</div>
              </button>
            ))}
          </div>

          {/* Content */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start' }} className="rv-spot-inner">
            <div style={{ position: 'relative', aspectRatio: '4/5' }}>
              <div style={{
                position: 'absolute', inset: 0,
                background: `linear-gradient(135deg, var(--rv-purple-100) 0%, var(--rv-purple-300) 100%)`,
                boxShadow: 'var(--rv-shadow-brand-sm)',
                overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'radial-gradient(circle at 60% 40%, rgba(255,255,255,0.6), transparent 60%)',
                }}></div>
                <div className="rv-futura" style={{
                  position: 'absolute', bottom: 28, left: 28,
                  fontSize: 48, fontWeight: 300, color: 'white',
                  letterSpacing: '-0.01em', lineHeight: 0.95,
                  textShadow: '0 2px 20px rgba(62,31,107,0.4)',
                }}>{t.name}</div>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--rv-purple-700)', marginBottom: 16, fontWeight: 500 }}>{t.kicker}</div>
              <h3 className="rv-futura" style={{
                fontSize: 40, fontWeight: 300, lineHeight: 1.05,
                color: 'var(--rv-ink)', margin: '0 0 24px', letterSpacing: '-0.01em',
              }}>{t.name}</h3>
              <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--rv-ink)', margin: '0 0 32px' }}>
                {t.blurb}
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--rv-border)', marginBottom: 36 }}>
                {t.meta.map((m, i) => (
                  <div key={i} style={{
                    padding: '16px 0',
                    borderRight: i < 2 ? '1px solid var(--rv-border)' : 'none',
                    paddingLeft: i > 0 ? 16 : 0,
                    fontSize: 13, color: 'var(--rv-muted)', letterSpacing: '0.04em',
                  }}>{m}</div>
                ))}
              </div>
              <button style={{
                background: 'var(--rv-purple)', color: 'white', border: 0,
                padding: '18px 28px', fontSize: 12, letterSpacing: '0.18em',
                textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
              }}>Learn More</button>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .rv-spotlight { padding: 88px 0 !important; }
          .rv-spot-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .rv-spot-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
          .rv-spot-tabs { display: flex !important; overflow-x: auto !important; border-left: 0 !important; border-bottom: 1px solid var(--rv-border) !important; gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
          .rv-spot-tabs::-webkit-scrollbar { display: none; }
          .rv-spot-tabs button { flex-shrink: 0 !important; padding: 12px 18px !important; margin-left: 0 !important; border-left: 0 !important; border-bottom: 2px solid transparent !important; }
          .rv-spot-tabs button[data-active="true"] { border-bottom-color: var(--rv-purple) !important; }
        }
        @media (max-width: 600px) {
          .rv-spotlight { padding: 64px 0 !important; }
        }
      `}</style>
    </section>
  );
}
window.Spotlight = Spotlight;