// Philosophy.jsx — Signature heading + mission + kinetic marquee ticker
function Philosophy() {
  const beliefs = [
    ['01', 'Inside out', 'Skin, structure, and the body that supports both are one system.'],
    ['02', 'Plan, then adjust', 'A protocol is a starting point — we calibrate to how you respond.'],
    ['03', 'Restraint', 'The measure of a treatment is that you still look like yourself.'],
    ['04', 'Time', 'The best outcomes unfold across months and years, not minutes.'],
  ];
  return (
    <>
    <section style={{ background: 'var(--rv-white)', padding: '140px 0 100px', position: 'relative' }} className="rv-philosophy">
      <div className="rv-container rv-philosophy-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 96, alignItems: 'start',
      }}>
        <div>
          <div className="rv-eyebrow" style={{ marginBottom: 32 }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--rv-purple)', verticalAlign: 'middle', marginRight: 12 }}></span>
            Our Practice · Est. 2014
          </div>
          <h2 className="rv-futura" style={{
            fontSize: 'clamp(42px, 5.4vw, 76px)', fontWeight: 300,
            lineHeight: 1.02, textTransform: 'uppercase', letterSpacing: '0.01em',
            margin: 0,
          }}>
            <span style={{
              display: 'inline-block', background: 'var(--rv-purple)',
              color: 'white', padding: '6px 18px 10px',
              WebkitBoxDecorationBreak: 'clone', boxDecorationBreak: 'clone',
            }}>A leading medical spa</span>
            <br />
            <span style={{ color: 'var(--rv-ink)', display: 'inline-block', marginTop: 14 }}>
              in Millbrae, <em style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', color: 'var(--rv-purple-700)', fontWeight: 300 }}>CA.</em>
            </span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--rv-muted)', margin: '40px 0 0', maxWidth: 440 }}>
            Our mission is to provide patients with the safest cutting-edge technology for skin rejuvenation and aesthetic improvement. We believe ultimate health requires treating the individual from the inside out.
          </p>
        </div>

        <div>
          {/* Four beliefs, editorial list */}
          {beliefs.map(([n, t, d], i) => (
            <div key={i} className="rv-belief-row" style={{
              display: 'grid', gridTemplateColumns: '52px 1fr 1fr', gap: 24,
              padding: '28px 0',
              borderTop: i === 0 ? '1px solid var(--rv-ink)' : '1px solid var(--rv-border)',
              transition: 'background 240ms var(--rv-ease), padding 240ms var(--rv-ease)',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--rv-blush-100)'; e.currentTarget.style.paddingLeft = '12px'; e.currentTarget.style.paddingRight = '12px'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; e.currentTarget.style.paddingRight = '0'; }}
            >
              <div className="rv-futura" style={{ fontSize: 14, color: 'var(--rv-purple)', letterSpacing: '0.1em', paddingTop: 4 }}>{n}</div>
              <div className="rv-futura" style={{ fontSize: 28, fontWeight: 300, color: 'var(--rv-ink)', lineHeight: 1.1, letterSpacing: '-0.005em' }}>{t}</div>
              <div style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--rv-muted)', paddingTop: 6 }}>{d}</div>
            </div>
          ))}
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 36 }}>
            <img src="assets/dragonfly-real.png" alt="" loading="lazy" decoding="async" width="22" height="30" style={{ width: 22, height: 30 }}/>
            <span style={{ fontSize: 13, color: 'var(--rv-muted)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>The Reviv Philosophy</span>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .rv-philosophy { padding: 88px 0 64px !important; }
          .rv-philosophy-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 600px) {
          .rv-philosophy { padding: 72px 0 56px !important; }
          .rv-belief-row { grid-template-columns: 36px 1fr !important; gap: 14px !important; padding: 22px 0 !important; }
          .rv-belief-row > :last-child { grid-column: 1 / -1; padding-left: 50px; padding-top: 0 !important; }
        }
      `}</style>
    </section>

    {/* Kinetic belief band */}
    <div style={{
      background: 'var(--rv-purple-050)', padding: '36px 0', overflow: 'hidden',
      borderTop: '1px solid var(--rv-border)', borderBottom: '1px solid var(--rv-border)',
    }}>
      <div className="rv-futura" style={{
        display: 'inline-block', whiteSpace: 'nowrap', animation: 'rv-belt 48s linear infinite',
        fontSize: 'clamp(40px, 6vw, 80px)', fontWeight: 300, letterSpacing: '-0.01em',
        color: 'var(--rv-ink)', lineHeight: 1,
      }}>
        {Array(3).fill(0).map((_, k) => (
          <span key={k}>
            <span style={{ padding: '0 40px' }}>Recover.</span>
            <em style={{ padding: '0 40px', fontFamily: 'Georgia, serif', fontStyle: 'italic', color: 'var(--rv-purple-700)' }}>Reviv.</em>
            <span style={{ padding: '0 40px' }}>Rejuvenate.</span>
            <span style={{ padding: '0 40px', color: 'var(--rv-purple)' }}>✦</span>
          </span>
        ))}
      </div>
      <style>{`@keyframes rv-belt { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }`}</style>
    </div>
    </>
  );
}
window.Philosophy = Philosophy;