// Footer.jsx — Mission close, contact, footer
function Testimonial() {
  return (
    <section style={{ background: 'var(--rv-purple-050)', padding: '140px 0', position: 'relative', overflow: 'hidden' }} className="rv-testimonial">
      <div style={{
        position: 'absolute', top: 40, right: -20, fontSize: 340, lineHeight: 0.8,
        fontFamily: 'Georgia, serif', color: 'rgba(159,101,230,0.12)', pointerEvents: 'none',
      }}>"</div>
      <div className="rv-container-narrow" style={{ position: 'relative', textAlign: 'center' }}>
        <div className="rv-eyebrow" style={{ marginBottom: 32, color: 'var(--rv-purple-700)' }}>In our patients' words</div>
        <blockquote className="rv-futura" style={{
          fontSize: 'clamp(26px, 3.2vw, 44px)', fontWeight: 300,
          lineHeight: 1.25, margin: '0 0 40px', color: 'var(--rv-ink)',
          letterSpacing: '-0.005em', maxWidth: 900, marginLeft: 'auto', marginRight: 'auto',
        }}>
          "I've been seeing the team at Reviv for three years. What I appreciate is the <em style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', color: 'var(--rv-purple-700)' }}>measured pace</em> — they build a plan, we adjust over time, and the results still look like me."
        </blockquote>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'linear-gradient(135deg, var(--rv-stone-100), var(--rv-blush))' }}></div>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--rv-ink)' }}>Lauren M.</div>
            <div style={{ fontSize: 12, color: 'var(--rv-muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Patient · Burlingame, CA</div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 600px) {
          .rv-testimonial { padding: 80px 0 !important; }
        }
      `}</style>
    </section>
  );
}

function Contact() {
  return (
    <section style={{ background: 'var(--rv-white)', padding: '140px 0' }} className="rv-contact">
      <div className="rv-container" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start',
      }} id="rv-contact-grid">
        <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>
            Visit
          </div>
          <h2 className="rv-futura" style={{
            fontSize: 'clamp(40px, 5vw, 68px)', fontWeight: 300,
            lineHeight: 1.02, margin: '0 0 48px', letterSpacing: '-0.01em',
          }}>
            Begin a conversation.
          </h2>

          <div style={{ borderTop: '1px solid var(--rv-border)' }}>
            {[
              ['Address', '31 S. El Camino Real\nMillbrae, California 94030'],
              ['Phone', '(650) 697-3339'],
              ['Email', 'reviv@revivmedspa.com'],
              ['Hours', 'Tue–Fri  10am–6pm\nSat  10am–3pm\nSun–Mon  Closed'],
            ].map(([label, value], i) => (
              <div key={i} style={{
                padding: '22px 0', borderBottom: '1px solid var(--rv-border)',
                display: 'grid', gridTemplateColumns: '140px 1fr', gap: 24, alignItems: 'start',
              }}>
                <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--rv-muted)', fontWeight: 500, paddingTop: 2 }}>{label}</div>
                <div style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--rv-ink)', whiteSpace: 'pre-line' }}>{value}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: 'var(--rv-warm-wash)', padding: 48 }}>
          <div className="rv-eyebrow" style={{ marginBottom: 18 }}>Request a consultation</div>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--rv-ink)', margin: '0 0 32px' }}>
            Share a few details and we'll reach out within one business day to schedule.
          </p>
          <div style={{ display: 'grid', gap: 18 }}>
            {[
              { l: 'Name', p: 'Your full name' },
              { l: 'Email', p: 'you@email.com' },
              { l: 'Phone', p: '(650) 555-0100' },
            ].map(f => (
              <label key={f.l} style={{ display: 'block' }}>
                <span style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--rv-muted)', fontWeight: 500 }}>{f.l}</span>
                <input placeholder={f.p} style={{
                  width: '100%', marginTop: 8, padding: '14px 0',
                  background: 'transparent', border: 0, borderBottom: '1px solid var(--rv-border)',
                  fontSize: 16, color: 'var(--rv-ink)', outline: 'none',
                  fontFamily: 'inherit',
                }}
                  onFocus={e => e.currentTarget.style.borderBottomColor = 'var(--rv-purple)'}
                  onBlur={e => e.currentTarget.style.borderBottomColor = 'var(--rv-border)'}
                />
              </label>
            ))}
            <label>
              <span style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--rv-muted)', fontWeight: 500 }}>Interest</span>
              <select style={{
                width: '100%', marginTop: 8, padding: '14px 0',
                background: 'transparent', border: 0, borderBottom: '1px solid var(--rv-border)',
                fontSize: 16, color: 'var(--rv-ink)', outline: 'none', fontFamily: 'inherit',
              }}>
                <option>Select a treatment</option>
                <option>Botox / Dermal Fillers</option>
                <option>Sylfirm X</option>
                <option>MOXI</option>
                <option>CoolSculpting Elite</option>
                <option>Renewal Rituals — Glow Release (Face)</option>
                <option>Renewal Rituals — Sculpt & Detox (Body)</option>
                <option>Renewal Rituals — Total Renewal</option>
                <option>Post-Surgical Lymphatic Drainage</option>
                <option>Membership</option>
                <option>Other</option>
              </select>
            </label>
            <button style={{
              background: 'var(--rv-purple)', color: 'white', border: 0,
              padding: '18px 24px', marginTop: 12,
              fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
              fontWeight: 500, cursor: 'pointer', transition: 'background 200ms',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--rv-purple-700)'}
              onMouseLeave={e => e.currentTarget.style.background = 'var(--rv-purple)'}
            >Request Consultation</button>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .rv-contact { padding: 88px 0 !important; }
          #rv-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          #rv-contact-grid > :last-child { padding: 32px !important; }
          #rv-contact-grid > div > div > div { grid-template-columns: 100px 1fr !important; gap: 14px !important; }
        }
        @media (max-width: 600px) {
          .rv-contact { padding: 64px 0 !important; }
          #rv-contact-grid > :last-child { padding: 28px 24px !important; }
        }
      `}</style>
    </section>
  );
}

function Footer() {
  // Live "open now" indicator
  const [openStatus, setOpenStatus] = React.useState({ open: false, label: '' });
  React.useEffect(() => {
    const compute = () => {
      const d = new Date();
      const day = d.getDay(); // 0 Sun
      const hr = d.getHours() + d.getMinutes()/60;
      // Tue–Fri 10–18, Sat 10–15, else closed
      let open = false, label = 'Currently Closed';
      if (day >= 2 && day <= 5 && hr >= 10 && hr < 18) { open = true; label = 'Currently Open'; }
      else if (day === 6 && hr >= 10 && hr < 15) { open = true; label = 'Currently Open'; }
      setOpenStatus({ open, label });
    };
    compute();
    const t = setInterval(compute, 60000);
    return () => clearInterval(t);
  }, []);

  const cols = [
    {
      title: 'Treatments',
      items: [
        ['Face', 'Skin · Injectables · Laser'],
        ['Body', 'Contour · Hair · Wellness'],
        ['Featured', 'Sylfirm X · MOXI · BBL'],
        ['Renewal Rituals', 'Lymphatic drainage line'],
        ['Gallery', 'Before & after results'],
      ],
    },
    {
      title: 'Practice',
      items: [
        ['About', 'Our story & philosophy'],
        ['Our Team', 'Physicians & specialists'],
        ['Membership', 'Renew · Reviv'],
        ['Careers', 'Open positions'],
        ['Contact', 'Visit · book · ask'],
      ],
    },
    {
      title: 'Shop',
      items: [
        ['SkinMedica', 'Medical-grade skincare'],
        ['Supplements', 'Wellness essentials'],
        ['Gift Cards', 'For every milestone'],
      ],
    },
  ];

  return (
    <footer style={{ background: 'var(--rv-ink)', color: 'white', position: 'relative', overflow: 'hidden' }} className="rv-footer">
      {/* Ambient purple wash */}
      <div style={{
        position: 'absolute', top: '-30%', right: '-15%', width: '70%', height: '120%',
        background: 'radial-gradient(ellipse at center, rgba(159,101,230,0.14), transparent 65%)',
        pointerEvents: 'none',
      }}></div>
      <div style={{
        position: 'absolute', bottom: '-20%', left: '-10%', width: '50%', height: '80%',
        background: 'radial-gradient(ellipse at center, rgba(230,143,166,0.08), transparent 60%)',
        pointerEvents: 'none',
      }}></div>

      {/* Drifting dragonfly watermarks */}
      <img src="assets/dragonfly-real.png" alt="" aria-hidden="true" loading="lazy" decoding="async" width="64" height="86" style={{
        position: 'absolute', top: 80, right: '8%', width: 64, height: 86,
        opacity: 0.16, filter: 'brightness(0) invert(1)',
        transform: 'rotate(-22deg)', pointerEvents: 'none',
      }} />
      <img src="assets/dragonfly-real.png" alt="" aria-hidden="true" loading="lazy" decoding="async" width="38" height="52" style={{
        position: 'absolute', top: 220, left: '12%', width: 38, height: 52,
        opacity: 0.10, filter: 'brightness(0) invert(1)',
        transform: 'rotate(18deg)', pointerEvents: 'none',
      }} />
      <img src="assets/dragonfly-real.png" alt="" aria-hidden="true" loading="lazy" decoding="async" width="28" height="38" style={{
        position: 'absolute', bottom: 280, right: '32%', width: 28, height: 38,
        opacity: 0.08, filter: 'brightness(0) invert(1)',
        transform: 'rotate(-8deg)', pointerEvents: 'none',
      }} />

      {/* ============ STATEMENT BAND ============ */}
      <div className="rv-container" style={{ paddingTop: 120, paddingBottom: 96, position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80,
          alignItems: 'end', borderBottom: '1px solid rgba(255,255,255,0.14)',
          paddingBottom: 96,
        }} className="rv-foot-statement">
          <div>
            <div className="rv-eyebrow" style={{ color: 'var(--rv-purple-300)', marginBottom: 28 }}>
              <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--rv-purple-300)', verticalAlign: 'middle', marginRight: 12 }}></span>
              A Bay Area Medical Spa
            </div>
            <h2 className="rv-futura" style={{
              fontSize: 'clamp(48px, 6.4vw, 96px)', fontWeight: 300,
              lineHeight: 0.96, margin: 0, letterSpacing: '-0.018em',
              textTransform: 'uppercase',
            }}>
              Recover.<br/>
              <em style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontWeight: 300, color: 'var(--rv-purple-300)', textTransform: 'none' }}>Reviv.</em><br/>
              Rejuvenate.
            </h2>
          </div>

          {/* Letters from the studio */}
          <div style={{ paddingBottom: 8 }}>
            <div className="rv-eyebrow" style={{ color: 'var(--rv-purple-300)', marginBottom: 18, fontSize: 11 }}>Letters from the studio</div>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: '0 0 28px', fontWeight: 300, maxWidth: 460 }}>
              A short, considered note four times a year — new services, seasonal protocols, member-only events. No frequency, no filler.
            </p>
            <form style={{
              display: 'grid', gridTemplateColumns: '1fr auto', gap: 0,
              borderBottom: '1px solid rgba(255,255,255,0.32)',
              transition: 'border-color 200ms',
            }}
              onFocus={e => e.currentTarget.style.borderBottomColor = 'var(--rv-purple-300)'}
              onBlur={e => e.currentTarget.style.borderBottomColor = 'rgba(255,255,255,0.32)'}
              onSubmit={e => e.preventDefault()}
            >
              <input
                type="email"
                placeholder="your@email.com"
                style={{
                  background: 'transparent', border: 0, outline: 'none',
                  color: 'white', fontSize: 17, padding: '14px 0',
                  fontFamily: 'inherit',
                }}
              />
              <button type="submit" style={{
                background: 'transparent', border: 0,
                color: 'var(--rv-purple-300)', fontSize: 12,
                letterSpacing: '0.2em', textTransform: 'uppercase',
                fontWeight: 500, cursor: 'pointer', padding: '14px 0 14px 24px',
                fontFamily: 'inherit',
              }}>Subscribe →</button>
            </form>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.42)', marginTop: 12, letterSpacing: '0.02em' }}>
              ~4 issues per year · unsubscribe in one click
            </div>
          </div>
        </div>

        {/* ============ INFO GRID ============ */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr',
          gap: 56, paddingTop: 80, paddingBottom: 96,
        }} id="rv-foot-grid">
          {/* Studio card */}
          <div>
            <img src="assets/logo-lockup.png" alt="Reviv Med Spa" loading="lazy" decoding="async" width="180" height="56" style={{ height: 56, filter: 'brightness(0) invert(1)', marginBottom: 32 }} />

            {/* Open status pill */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '8px 14px', marginBottom: 28,
              background: openStatus.open ? 'rgba(159,101,230,0.12)' : 'rgba(255,255,255,0.06)',
              border: `1px solid ${openStatus.open ? 'rgba(159,101,230,0.4)' : 'rgba(255,255,255,0.18)'}`,
              borderRadius: 100,
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: '50%',
                background: openStatus.open ? '#7CD992' : 'rgba(255,255,255,0.4)',
                boxShadow: openStatus.open ? '0 0 8px #7CD992' : 'none',
                animation: openStatus.open ? 'rv-pulse 2.4s ease-in-out infinite' : 'none',
              }}></span>
              <span style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: openStatus.open ? 'white' : 'rgba(255,255,255,0.7)', fontWeight: 500 }}>{openStatus.label}</span>
            </div>

            {/* Contact lines */}
            <div style={{ borderTop: '1px solid rgba(255,255,255,0.14)' }}>
              {[
                ['Visit', '31 S. El Camino Real\nMillbrae, CA 94030', 'https://maps.google.com/?q=31+S+El+Camino+Real+Millbrae'],
                ['Call', '(650) 697-3339', 'tel:6506973339'],
                ['Write', 'reviv@revivmedspa.com', 'mailto:reviv@revivmedspa.com'],
              ].map(([l, v, href], i) => (
                <a key={i} href={href} style={{
                  display: 'grid', gridTemplateColumns: '70px 1fr',
                  gap: 20, padding: '16px 0',
                  borderBottom: '1px solid rgba(255,255,255,0.14)',
                  textDecoration: 'none',
                  transition: 'padding 200ms',
                }}
                  onMouseEnter={e => e.currentTarget.style.paddingLeft = '8px'}
                  onMouseLeave={e => e.currentTarget.style.paddingLeft = '0'}
                >
                  <span style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--rv-purple-300)', fontWeight: 500, paddingTop: 3 }}>{l}</span>
                  <span style={{ fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', whiteSpace: 'pre-line' }}>{v}</span>
                </a>
              ))}
            </div>

            {/* Socials */}
            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              {[
                {
                  label: 'Instagram',
                  href: 'https://instagram.com/revivmedspasfbayarea',
                  icon: (
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="3" y="3" width="18" height="18" rx="5" />
                      <circle cx="12" cy="12" r="4" />
                      <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none" />
                    </svg>
                  ),
                },
                {
                  label: 'Facebook',
                  href: '#',
                  icon: (
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                    </svg>
                  ),
                },
                {
                  label: 'TikTok',
                  href: '#',
                  icon: (
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M9 12.5a4 4 0 1 0 4 4V4.5a5.5 5.5 0 0 0 5.5 5.5" />
                    </svg>
                  ),
                },
                {
                  label: 'YouTube',
                  href: '#',
                  icon: (
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="2.5" y="6" width="19" height="12" rx="3" />
                      <path d="M10.5 9.5v5l4.5-2.5z" fill="currentColor" stroke="none" />
                    </svg>
                  ),
                },
                {
                  label: 'Google Reviews',
                  href: 'https://g.page/r/CZeXNqHlGYHnEBE/review',
                  icon: (
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M12 2.5l2.6 6 6.4.6-4.9 4.3 1.5 6.3L12 16.4l-5.6 3.3 1.5-6.3-4.9-4.3 6.4-.6z" />
                    </svg>
                  ),
                },
              ].map(s => (
                <a key={s.label} href={s.href} aria-label={s.label} title={s.label}
                  className="rv-social-link rv-social-link--dark"
                  target={s.href.startsWith('http') ? '_blank' : undefined}
                  rel={s.href.startsWith('http') ? 'noopener noreferrer' : undefined}
                >{s.icon}</a>
              ))}
            </div>
          </div>

          {/* Sitemap columns */}
          {cols.map((col, i) => (
            <div key={i}>
              <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--rv-purple-300)', fontWeight: 500, marginBottom: 28, paddingBottom: 16, borderBottom: '1px solid rgba(255,255,255,0.14)' }}>
                <span style={{ color: 'rgba(255,255,255,0.32)', marginRight: 10 }}>0{i+1}</span>{col.title}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {col.items.map(([n, d]) => (
                  <li key={n} style={{ marginBottom: 18 }}>
                    <a href="#" style={{
                      display: 'block', textDecoration: 'none',
                      transition: 'transform 200ms',
                    }}
                      onMouseEnter={e => e.currentTarget.style.transform = 'translateX(6px)'}
                      onMouseLeave={e => e.currentTarget.style.transform = 'translateX(0)'}
                    >
                      <div style={{ fontSize: 15, color: 'white', fontWeight: 400, marginBottom: 2 }}>{n}</div>
                      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.02em' }}>{d}</div>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Hours mini-grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr auto',
          gap: 40, alignItems: 'center',
          padding: '32px 0',
          borderTop: '1px solid rgba(255,255,255,0.14)',
          borderBottom: '1px solid rgba(255,255,255,0.14)',
          marginBottom: 0,
        }} className="rv-foot-hours">
          <div className="rv-eyebrow" style={{ color: 'var(--rv-purple-300)', fontSize: 11 }}>Studio Hours</div>
          <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }} className="rv-hours-row">
            {[
              ['Tue–Fri', '10–6'],
              ['Sat', '10–3'],
              ['Sun · Mon', 'Closed'],
            ].map(([d, h], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 500, minWidth: 78 }}>{d}</span>
                <span className="rv-futura" style={{ fontSize: 18, fontWeight: 300, color: h === 'Closed' ? 'rgba(255,255,255,0.4)' : 'white', letterSpacing: '0.01em' }}>{h}</span>
              </div>
            ))}
          </div>
          <a href="#" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--rv-purple-300)', borderBottom: '1px solid var(--rv-purple-300)', paddingBottom: 3, fontWeight: 500 }}>
            Get directions →
          </a>
        </div>
      </div>

      {/* ============ GIANT WORDMARK ============ */}
      <div style={{ position: 'relative', overflow: 'hidden', userSelect: 'none' }}>
        <div className="rv-futura" style={{
          fontSize: 'clamp(120px, 22vw, 360px)',
          fontWeight: 300, lineHeight: 0.85,
          letterSpacing: '-0.04em',
          textAlign: 'center', whiteSpace: 'nowrap',
          background: 'linear-gradient(180deg, rgba(159,101,230,0.7) 0%, rgba(159,101,230,0.08) 100%)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text',
          WebkitTextFillColor: 'transparent', color: 'transparent',
          paddingTop: 24, paddingBottom: 4,
        }} aria-hidden="true">REVIV</div>
      </div>

      {/* ============ LEGAL BAR ============ */}
      <div className="rv-container" style={{ position: 'relative', paddingTop: 32, paddingBottom: 32 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto',
          gap: 32, alignItems: 'center',
          paddingTop: 24,
          borderTop: '1px solid rgba(255,255,255,0.14)',
        }} className="rv-foot-legal">
          <div style={{ display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap' }}>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.04em' }}>
              © 2026 Reviv Medical Spa
            </div>
            <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.24)' }}>·</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>Allergan</span>
              <span style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--rv-purple-300)', fontWeight: 500, padding: '3px 8px', border: '1px solid var(--rv-purple-300)', borderRadius: 2 }}>Platinum+ 2026</span>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 28, alignItems: 'center', flexWrap: 'wrap' }} className="rv-foot-legal-links">
            {['Privacy', 'Terms', 'Accessibility', 'HIPAA Notice'].map(l => (
              <a key={l} href="#" style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.04em', textDecoration: 'none', transition: 'color 200ms' }}
                onMouseEnter={e => e.currentTarget.style.color = 'white'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.5)'}
              >{l}</a>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes rv-pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.6; transform: scale(0.85); }
        }
        @media (max-width: 1000px) {
          .rv-foot-statement { grid-template-columns: 1fr !important; gap: 56px !important; padding-bottom: 72px !important; }
          #rv-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 48px !important; padding-top: 56px !important; padding-bottom: 72px !important; }
          #rv-foot-grid > :first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 720px) {
          .rv-footer { padding-top: 0; }
          .rv-foot-hours { grid-template-columns: 1fr !important; gap: 18px !important; align-items: flex-start; }
          .rv-foot-legal { grid-template-columns: 1fr !important; gap: 18px !important; }
        }
        @media (max-width: 600px) {
          #rv-foot-grid { grid-template-columns: 1fr !important; }
          .rv-hours-row { gap: 14px !important; }
          .rv-foot-legal-links { flex-wrap: wrap; gap: 16px !important; }
        }
      `}</style>
    </footer>
  );
}

window.Testimonial = Testimonial;
window.Contact = Contact;
window.Footer = Footer;
