// Team.jsx — Meet our staff, membership, partners, footer
function Team() {
  const team = [
    { name: 'Dr. Gayle Misle, MD', role: 'Founder & Medical Director', bio: 'Board-certified physician leading protocol design across face, body, and wellness.', tint: '#E7DDD0', img: 'assets/team-misle.webp' },
    { name: 'Megan Sosnick, MSN, RN', role: 'Practice Manager & Aesthetic Nurse', bio: 'Oversees injectables and patient care with fifteen years of aesthetic nursing experience.', tint: '#E0D4E6', img: 'assets/team-megan.jpg' },
    { name: 'Hanadi Al Ramahi', role: 'Medical Aesthetician', bio: 'Skin health, lasers, and pre- and post-treatment recovery protocols.', tint: '#D9D5CF' },
    { name: 'Kelly Guevarra, LVN', role: 'Aesthetic Technician', bio: 'CoolSculpting Elite, body contouring, and laser hair removal specialist.', tint: '#E4DEEA' },
    { name: 'Anna Simos, MPH, CDCES', role: 'Health & Wellness Specialist', bio: 'Nutrition, weight management, and whole-body wellness alongside aesthetic care.', tint: '#EDE4DB' },
  ];

  return (
    <section style={{ background: 'var(--rv-white)', padding: '140px 0' }} className="rv-team-section">
      <div className="rv-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'start', marginBottom: 72 }} className="rv-team-head">
          <div>
            <div className="rv-eyebrow" style={{ marginBottom: 28 }}>
              <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--rv-purple)', verticalAlign: 'middle', marginRight: 12 }}></span>
              Our Team
            </div>
            <h2 className="rv-futura" style={{
              fontSize: 'clamp(44px, 5.6vw, 84px)', fontWeight: 300,
              lineHeight: 0.98, margin: 0, letterSpacing: '-0.01em',
              textTransform: 'uppercase', display: 'flex', alignItems: 'flex-start', gap: 18, flexWrap: 'wrap',
            }}>
              <span>Meet our staff</span>
              <img src="assets/dragonfly-real.png" alt="" loading="lazy" decoding="async" width="32" height="44" style={{ width: 32, height: 44, marginTop: 18 }} />
            </h2>
          </div>
          <p style={{ fontSize: 20, lineHeight: 1.6, color: 'var(--rv-ink)', margin: 0, maxWidth: 560, fontWeight: 300, paddingTop: 18 }}>
            A multidisciplinary team of physicians, nurses, aestheticians, and wellness specialists. Every treatment plan is built by the practitioners who will deliver it — considered, collaborative, and adjusted over time.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24 }} className="rv-team-grid">
          {team.map((m, i) => (
            <div key={i} style={{ cursor: 'pointer' }}
              onMouseEnter={e => e.currentTarget.querySelector('.rv-port').style.transform = 'scale(1.02)'}
              onMouseLeave={e => e.currentTarget.querySelector('.rv-port').style.transform = 'scale(1)'}
            >
              <div style={{
                position: 'relative', aspectRatio: '3/4', overflow: 'hidden', marginBottom: 20,
                background: m.tint,
              }}>
                {m.img ? (
                  <img className="rv-port" src={m.img} alt={m.name} loading="lazy" decoding="async" style={{
                    position: 'absolute', inset: 0, width: '100%', height: '100%',
                    objectFit: 'cover', objectPosition: 'center 18%',
                    transition: 'transform 600ms var(--rv-ease)',
                  }}/>
                ) : (
                  <div className="rv-port" style={{
                    position: 'absolute', inset: 0,
                    background: `radial-gradient(ellipse at 50% 30%, rgba(255,245,230,0.8), transparent 60%), ${m.tint}`,
                    transition: 'transform 600ms var(--rv-ease)',
                  }}></div>
                )}
                {/* Arch mask impression — only for placeholders */}
                {!m.img && (
                  <div style={{
                    position: 'absolute', top: '12%', left: '16%', right: '16%', bottom: 0,
                    borderTopLeftRadius: '50% 30%', borderTopRightRadius: '50% 30%',
                    border: '1px solid rgba(255,255,255,0.35)', borderBottom: 'none',
                    pointerEvents: 'none',
                  }}></div>
                )}
                <div style={{
                  position: 'absolute', bottom: 12, left: 14, fontSize: 10,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: m.img ? 'rgba(255,255,255,0.85)' : 'rgba(26,22,37,0.55)',
                  textShadow: m.img ? '0 1px 4px rgba(0,0,0,0.4)' : 'none',
                }}>0{i+1}</div>
              </div>
              <h4 style={{ fontSize: 15, fontWeight: 600, margin: '0 0 4px', color: 'var(--rv-ink)' }}>{m.name}</h4>
              <div style={{ fontSize: 12, color: 'var(--rv-purple-700)', letterSpacing: '0.06em', marginBottom: 10, textTransform: 'uppercase' }}>{m.role}</div>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--rv-muted)', margin: 0 }}>{m.bio}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .rv-team-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 900px) { .rv-team-section { padding: 88px 0 !important; } }
        @media (max-width: 700px) {
          .rv-team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
          .rv-team-head { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 48px !important; }
          .rv-team-head p { font-size: 17px !important; padding-top: 0 !important; }
        }
        @media (max-width: 480px) {
          .rv-team-section { padding: 64px 0 !important; }
        }
      `}</style>
    </section>
  );
}

function Membership() {
  // Editorial teaser highlights — a curated subset of the full benefits list.
  // The complete comparison lives on Membership.html.
  const highlights = [
    { name: 'Neurotoxin',                    cat: 'Botox & Dysport',         renew: '20–30%', reviv: '20–30%' },
    { name: 'Filler',                        cat: 'Juvederm · Radiesse',     renew: null,     reviv: '10%'    },
    { name: 'CoolSculpting',                 cat: 'Body contouring',         renew: null,     reviv: '20–25%' },
    { name: 'Sylfirm X RF Microneedling',    cat: 'Skin tightening',         renew: 'incl.',  reviv: 'incl.'  },
    { name: 'NuEra Tight RF',                cat: 'Skin tightening',         renew: null,     reviv: '28%'    },
    { name: 'Reviv Skincare',                cat: 'Medical-grade product',   renew: '25%',    reviv: '25%'    },
  ];

  return (
    <section style={{ background: 'var(--rv-warm-wash)', padding: '140px 0', position: 'relative', overflow: 'hidden' }} className="rv-membership">
      {/* Decorative L-bracket frame */}
      <div className="rv-container">
        <div style={{
          display: 'grid', gridTemplateColumns: '0.95fr 1.1fr', gap: 80,
          alignItems: 'start',
        }} className="rv-mem-grid">

          {/* LEFT — pitch */}
          <div className="rv-mem-pitch">
            <div className="rv-eyebrow" style={{ marginBottom: 28 }}>
              <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--rv-purple)', verticalAlign: 'middle', marginRight: 12 }}></span>
              Annual Membership · Two Tiers
            </div>
            <h2 className="rv-futura" style={{
              fontSize: 'clamp(42px, 5vw, 76px)', fontWeight: 300,
              lineHeight: 0.98, margin: '0 0 32px', letterSpacing: '-0.012em',
              textTransform: 'uppercase',
            }}>
              The cost of<br/>
              <em style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontWeight: 300, color: 'var(--rv-purple-700)', textTransform: 'none' }}>looking like yourself,</em><br/>
              reduced.
            </h2>
            <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--rv-ink)', maxWidth: 480, margin: '0 0 40px', fontWeight: 300 }}>
              Two annual memberships — <strong style={{ fontWeight: 500 }}>Renew</strong> and <strong style={{ fontWeight: 500 }}>Reviv</strong> — that pay for themselves on the second visit. Member pricing on neurotoxin, filler, lasers, body contouring, and the products you already buy.
            </p>

            {/* Pricing strip */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1px 1fr',
              border: '1px solid var(--rv-border)', background: 'white',
              marginBottom: 32,
            }} className="rv-pricing-strip">
              <div style={{ padding: '28px 32px' }}>
                <div className="rv-eyebrow" style={{ fontSize: 10, marginBottom: 10 }}>Renew</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span className="rv-futura" style={{ fontSize: 38, fontWeight: 300, color: 'var(--rv-ink)', letterSpacing: '-0.01em' }}>$99</span>
                  <span style={{ fontSize: 13, color: 'var(--rv-muted)', letterSpacing: '0.04em' }}>/year</span>
                </div>
                <div style={{ fontSize: 13, color: 'var(--rv-muted)', marginTop: 6 }}>5 core benefits</div>
              </div>
              <div style={{ background: 'var(--rv-border)' }}></div>
              <div style={{ padding: '28px 32px', background: 'var(--rv-ink)', color: 'white', position: 'relative' }}>
                <div className="rv-eyebrow" style={{ fontSize: 10, marginBottom: 10, color: 'var(--rv-purple-300)' }}>Reviv · Recommended</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span className="rv-futura" style={{ fontSize: 38, fontWeight: 300, color: 'var(--rv-purple-300)', letterSpacing: '-0.01em' }}>$299</span>
                  <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.04em' }}>/year</span>
                </div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>All 12 benefits</div>
              </div>
            </div>

            {/* CTAs */}
            <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }} className="rv-mem-ctas">
              <a href="Membership.html" style={{
                display: 'inline-flex', alignItems: 'center', gap: 12,
                background: 'var(--rv-purple)', color: 'white',
                padding: '18px 28px', fontSize: 12, letterSpacing: '0.2em',
                textTransform: 'uppercase', fontWeight: 500, textDecoration: 'none',
                transition: 'background 200ms',
              }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--rv-purple-700)'}
                onMouseLeave={e => e.currentTarget.style.background = 'var(--rv-purple)'}
              >
                Compare Benefits & Pricing
                <span style={{ fontSize: 14 }}>→</span>
              </a>
              <a href="Membership.html#faq" style={{
                fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: 'var(--rv-ink)', borderBottom: '1px solid var(--rv-ink)',
                paddingBottom: 3, fontWeight: 500,
              }}>How it works</a>
            </div>
          </div>

          {/* RIGHT — benefits preview */}
          <div className="rv-mem-preview">
            <div style={{
              background: 'white', border: '1px solid var(--rv-border)',
              padding: '36px 40px 32px', position: 'relative',
            }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                paddingBottom: 18, borderBottom: '1px solid var(--rv-border)', marginBottom: 6,
              }}>
                <div className="rv-eyebrow" style={{ fontSize: 10 }}>A preview of member benefits</div>
                <div style={{ display: 'flex', gap: 36, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--rv-muted)' }} className="rv-pre-cols">
                  <span style={{ width: 56, textAlign: 'center' }}>Renew</span>
                  <span style={{ width: 56, textAlign: 'center', color: 'var(--rv-purple-700)' }}>Reviv</span>
                </div>
              </div>

              {highlights.map((h, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto',
                  alignItems: 'center', gap: 24,
                  padding: '18px 0',
                  borderBottom: i < highlights.length - 1 ? '1px solid var(--rv-purple-100)' : 'none',
                }} className="rv-pre-row">
                  <div>
                    <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--rv-ink)', marginBottom: 2 }}>{h.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--rv-muted)', letterSpacing: '0.04em' }}>{h.cat}</div>
                  </div>
                  <div style={{ display: 'flex', gap: 36 }} className="rv-pre-cells">
                    <BenefitCell value={h.renew} />
                    <BenefitCell value={h.reviv} highlighted />
                  </div>
                </div>
              ))}

              <div style={{
                marginTop: 20, paddingTop: 20, borderTop: '1px solid var(--rv-border)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 13, color: 'var(--rv-muted)',
              }}>
                <span>+ 6 additional treatment categories</span>
                <a href="Membership.html" style={{
                  color: 'var(--rv-purple-700)', fontWeight: 500,
                  letterSpacing: '0.04em',
                }}>See full list →</a>
              </div>
            </div>

            <div style={{
              fontSize: 12, color: 'var(--rv-muted)', marginTop: 18,
              letterSpacing: '0.04em', lineHeight: 1.5,
            }}>
              Members typically recoup their annual fee within two visits. Discounts shown apply to standard service pricing; additional perks include priority booking and member-only event access.
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) {
          .rv-mem-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
        }
        @media (max-width: 900px) { .rv-membership { padding: 88px 0 !important; } }
        @media (max-width: 600px) {
          .rv-membership { padding: 64px 0 !important; }
          .rv-pricing-strip { grid-template-columns: 1fr !important; }
          .rv-pricing-strip > div:nth-child(2) { display: none; }
          .rv-pre-cols { gap: 18px !important; }
          .rv-pre-cells { gap: 18px !important; }
          .rv-pre-cols span, .rv-pre-cells > * { width: 48px !important; }
          .rv-mem-preview > div:first-child { padding: 24px 22px !important; }
        }
      `}</style>
    </section>
  );
}

function BenefitCell({ value, highlighted }) {
  // null = not included, 'incl.' = included no discount, anything else = % discount
  const isIncluded = value !== null && value !== undefined;
  const color = highlighted ? 'var(--rv-purple-700)' : 'var(--rv-ink)';
  const dimColor = 'var(--rv-border)';

  if (!isIncluded) {
    return (
      <div style={{
        width: 56, textAlign: 'center', fontSize: 18,
        color: dimColor, fontWeight: 300,
      }}>—</div>
    );
  }

  if (value === 'incl.') {
    return (
      <div style={{
        width: 56, textAlign: 'center', color,
        display: 'flex', justifyContent: 'center', alignItems: 'center',
      }}>
        <svg width="14" height="11" viewBox="0 0 14 11" fill="none">
          <path d="M1 5.5L5 9.5L13 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
        </svg>
      </div>
    );
  }

  return (
    <div style={{
      width: 56, textAlign: 'center', color,
      fontSize: 13, fontWeight: 500, letterSpacing: '-0.01em',
      fontFamily: 'var(--rv-font-head)',
    }}>{value}</div>
  );
}

function Partners() {
  return (
    <section style={{ background: 'var(--rv-white)', padding: '96px 0', borderTop: '1px solid var(--rv-border)', borderBottom: '1px solid var(--rv-border)' }} className="rv-partners">
      <div className="rv-container rv-partners-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 64, alignItems: 'center',
      }}>
        <div>
          <div className="rv-eyebrow" style={{ marginBottom: 12 }}>Recognized by</div>
          <h3 className="rv-futura" style={{ fontSize: 28, fontWeight: 300, margin: 0, color: 'var(--rv-ink)', maxWidth: 380, lineHeight: 1.2 }}>
            Allergan Platinum Plus Partner 2023
          </h3>
        </div>
        {/* Badge placeholder */}
        <div style={{
          width: 140, height: 140, borderRadius: '50%',
          background: 'conic-gradient(from 0deg, var(--rv-purple-100), var(--rv-purple-300), var(--rv-purple-100))',
          display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: 8, borderRadius: '50%', background: 'white',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            border: '1px solid var(--rv-border)',
          }}>
            <div className="rv-futura" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--rv-purple-700)' }}>ALLERGAN</div>
            <div className="rv-futura" style={{ fontSize: 18, fontWeight: 400, color: 'var(--rv-ink)', marginTop: 2 }}>PLATINUM+</div>
            <div style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--rv-muted)', marginTop: 4 }}>2023</div>
          </div>
        </div>
        <div style={{ textAlign: 'right' }} className="rv-partners-right">
          <div style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--rv-muted)', marginBottom: 18 }}>
            A high-volume, trusted provider of Allergan products — Botox, Juvederm, and SkinMedica — in the San Francisco Bay Area.
          </div>
          <a href="#" style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--rv-ink)', borderBottom: '1px solid var(--rv-ink)', paddingBottom: 3 }}>See our credentials →</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .rv-partners { padding: 64px 0 !important; }
          .rv-partners-grid { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center; justify-items: center; }
          .rv-partners-right { text-align: center !important; }
        }
      `}</style>
    </section>
  );
}
window.Team = Team;
window.Membership = Membership;
window.Partners = Partners;
