// Hero.jsx — Editorial hero with kinetic promise + layered botanical
function Hero() {
  const words = ['Recover.', 'Reviv.', 'Rejuvenate.'];
  // Each promise word gets its own brand hue — purple → blush → ink
  const wordBg = ['var(--rv-purple)', 'var(--rv-blush)', 'var(--rv-ink)'];
  const [i, setI] = React.useState(0);
  const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.5 });

  React.useEffect(() => {
    const t = setInterval(() => setI(x => (x + 1) % words.length), 2600);
    return () => clearInterval(t);
  }, []);

  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
  };

  // Flying dragonflies
  const dragonflies = [
    { top: '18%', left: '6%', size: 32, rot: -14, delay: 0 },
    { top: '68%', left: '46%', size: 22, rot: 22, delay: 1.4 },
    { top: '32%', left: '48%', size: 18, rot: 8, delay: 2.8 },
  ];

  return (
    <section id="top" onMouseMove={onMove} style={{
      position: 'relative', background: 'var(--rv-white)', overflow: 'hidden',
    }}>
      {/* Ambient background: oversized Futura word as texture */}
      <div aria-hidden="true" className="rv-futura" style={{
        position: 'absolute', top: '8vw', left: '-4vw', right: '-4vw',
        fontSize: 'clamp(220px, 34vw, 520px)',
        fontWeight: 300, lineHeight: 0.82, letterSpacing: '-0.04em',
        color: 'var(--rv-purple-050)',
        pointerEvents: 'none', userSelect: 'none', whiteSpace: 'nowrap',
        textTransform: 'lowercase', zIndex: 0,
        transform: `translateX(${(mouse.x - 0.5) * -30}px)`,
        transition: 'transform 400ms var(--rv-ease)',
      }}>reviv</div>

      <div style={{
        position: 'relative', zIndex: 2,
        maxWidth: 1440, margin: '0 auto', padding: '160px 40px 100px',
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 72, alignItems: 'center',
        minHeight: '92dvh',
      }} className="rv-hero-grid">
        {/* Left: display type */}
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--rv-muted)', marginBottom: 40, fontWeight: 500,
          }}>
            <span style={{
              display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
              background: 'var(--rv-purple)', boxShadow: '0 0 0 4px rgba(159,101,230,0.18)',
              animation: 'rv-pulse 2.4s ease-in-out infinite',
            }}></span>
            Now accepting new patients · Millbrae, CA
          </div>

          {/* Kinetic promise */}
          <div className="rv-futura" style={{
            fontSize: 'clamp(58px, 9.5vw, 148px)',
            fontWeight: 300, lineHeight: 0.95, letterSpacing: '-0.02em',
            marginBottom: 36, color: 'var(--rv-ink)',
            position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.18em', flexWrap: 'wrap' }}>
              <span>Skin</span>
              <em style={{
                fontFamily: 'Georgia, "Times New Roman", serif',
                fontStyle: 'italic', fontWeight: 300,
                color: 'var(--rv-purple-700)',
                letterSpacing: '-0.01em',
              }}>health,</em>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.18em', flexWrap: 'wrap' }}>
              <span>reframed</span>
              <span style={{ position: 'relative', display: 'inline-block' }}>
                <span>as</span>
              </span>
            </div>
            <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'baseline', gap: 18 }}>
              {/* Rotating promise word with purple backplate */}
              <span className="rv-rot-word" style={{
                position: 'relative', display: 'inline-block',
                minWidth: 'clamp(260px, 48vw, 740px)', height: '1.1em',
                overflow: 'hidden', verticalAlign: 'baseline',
              }}>
                {words.map((w, idx) => (
                  <span key={idx} style={{
                    position: 'absolute', left: 0, top: 0,
                    display: 'inline-block', padding: '0.02em 0.18em 0.08em',
                    background: wordBg[idx], color: 'white',
                    transform: i === idx
                      ? 'translateY(0)'
                      : (idx === (i + 1) % words.length ? 'translateY(110%)' : 'translateY(-110%)'),
                    opacity: i === idx ? 1 : 0,
                    transition: 'transform 700ms var(--rv-ease), opacity 400ms var(--rv-ease)',
                    whiteSpace: 'nowrap',
                  }}>{w}</span>
                ))}
              </span>
            </div>
          </div>

          <p style={{
            fontSize: 19, lineHeight: 1.65, color: 'var(--rv-ink)',
            maxWidth: 520, margin: '0 0 44px', fontWeight: 400,
          }}>
            A medical spa in the Bay Area where skin, structure, and whole-body wellness are tended as one continuous ritual. Cutting-edge technology, applied with restraint.
          </p>

          <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', alignItems: 'center' }}>
            <button style={{
              background: 'var(--rv-purple)', color: 'white', border: 0,
              padding: '22px 34px', fontSize: 13, letterSpacing: '0.18em',
              textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
              transition: 'background 240ms var(--rv-ease), transform 240ms',
              position: 'relative', overflow: 'hidden',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--rv-purple-700)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'var(--rv-purple)'; }}
            >Book a Consultation</button>
            <button style={{
              background: 'transparent', border: 0, padding: '22px 8px',
              fontSize: 14, color: 'var(--rv-ink)', cursor: 'pointer',
              letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              <span style={{ borderBottom: '1px solid var(--rv-ink)', paddingBottom: 4 }}>Meet the practice</span>
              <span style={{
                width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--rv-ink)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11,
              }}>↓</span>
            </button>
          </div>
        </div>

        {/* Right: vertical split frame */}
        <div style={{ position: 'relative', aspectRatio: '4/5.2' }}>
          {/* Offset purple frame behind */}
          <div style={{
            position: 'absolute', inset: 0,
            transform: 'translate(18px, 18px)',
            border: '1px solid var(--rv-purple)',
            pointerEvents: 'none',
          }}></div>

          <div style={{
            position: 'absolute', inset: 0,
            display: 'grid', gridTemplateRows: '1.3fr 1fr', gap: 0,
            overflow: 'hidden',
          }}>
            {/* Top: warm portrait panel */}
            <div style={{ position: 'relative', overflow: 'hidden' }}>
              <div style={{
                position: 'absolute', inset: 0,
                background: `radial-gradient(ellipse at 50% 32%, #FFE9D0 0%, #D8B896 48%, #5E4332 100%)`,
                transform: `scale(1.06) translate(${(mouse.x - 0.5) * -10}px, ${(mouse.y - 0.5) * -10}px)`,
                transition: 'transform 800ms var(--rv-ease)',
              }}></div>
              {/* Tuscan arch */}
              <svg viewBox="0 0 400 300" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                <defs>
                  <linearGradient id="archg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="rgba(255,255,255,0.35)"/>
                    <stop offset="1" stopColor="rgba(255,255,255,0)"/>
                  </linearGradient>
                </defs>
                <path d="M 90 300 L 90 160 Q 90 70 200 70 Q 310 70 310 160 L 310 300 Z" fill="none" stroke="url(#archg)" strokeWidth="1.2"/>
                <path d="M 130 300 L 130 170 Q 130 110 200 110 Q 270 110 270 170 L 270 300 Z" fill="none" stroke="rgba(255,255,255,0.22)" strokeWidth="0.8"/>
              </svg>
              <div style={{
                position: 'absolute', top: 20, left: 22,
                fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.78)', fontWeight: 500,
              }}>No. 01 · The Space</div>
              <div className="rv-futura" style={{
                position: 'absolute', bottom: 24, left: 22, right: 22,
                fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: 300, color: 'white',
                letterSpacing: '-0.01em', lineHeight: 1,
                textShadow: '0 2px 20px rgba(40,26,18,0.35)',
              }}>Tuscan light,<br/><em style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic' }}>Bay Area</em> care.</div>
            </div>

            {/* Bottom: purple detail panel — animated wordmark */}
            <div style={{
              position: 'relative', overflow: 'hidden',
              background: 'linear-gradient(135deg, var(--rv-purple-900) 0%, var(--rv-purple-700) 60%, var(--rv-purple) 100%)',
            }}>
              {/* Hairline grid */}
              <svg viewBox="0 0 400 200" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18 }}>
                {Array.from({length: 7}).map((_, k) => (
                  <line key={k} x1={k*60} y1="0" x2={k*60} y2="200" stroke="white" strokeWidth="0.4"/>
                ))}
              </svg>

              {/* Glow halo behind dragonfly */}
              <div style={{
                position: 'absolute', left: '50%', top: '50%',
                width: 280, height: 280, marginLeft: -140, marginTop: -140,
                background: 'radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 60%)',
                animation: 'rv-halo 5s ease-in-out infinite',
                pointerEvents: 'none',
              }}/>

              {/* Top label */}
              <div style={{ position: 'absolute', left: 22, top: 20, right: 22, zIndex: 2 }}>
                <div style={{
                  fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
                  color: 'rgba(255,255,255,0.7)', fontWeight: 500,
                }}>No. 02 · The Mark</div>
              </div>

              {/* Wordmark composition: rev + dragonfly + v */}
              <div style={{
                position: 'absolute', inset: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                paddingTop: 16, paddingBottom: 36, paddingLeft: 24, paddingRight: 24,
              }}>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  gap: 'clamp(2px, 0.6vw, 8px)',
                  width: '100%', maxWidth: 420,
                }}>
                  <img src="assets/wordmark-rev.png" alt="rev" decoding="async" style={{
                    flex: '0 1 auto', width: '38%', height: 'auto', maxHeight: 130,
                    objectFit: 'contain',
                    filter: 'brightness(0) invert(1)',
                    animation: 'rv-rev-in 1.2s var(--rv-ease) both',
                  }}/>
                  <img src="assets/dragonfly-real.png" alt="" decoding="async" style={{
                    flex: '0 0 auto', width: '20%', height: 'auto', maxHeight: 110,
                    objectFit: 'contain',
                    filter: 'brightness(0) invert(1)',
                    transformOrigin: '50% 65%',
                    animation: 'rv-dfly-fly 1.4s var(--rv-ease) both, rv-dfly-hover 4s ease-in-out 1.4s infinite',
                  }}/>
                  <img src="assets/wordmark-v.png" alt="v" decoding="async" style={{
                    flex: '0 1 auto', width: '14%', height: 'auto', maxHeight: 130,
                    objectFit: 'contain',
                    filter: 'brightness(0) invert(1)',
                    animation: 'rv-v-in 1.2s var(--rv-ease) 0.2s both',
                  }}/>
                </div>
              </div>

              {/* Med Spa subtitle */}
              <div style={{
                position: 'absolute', bottom: 18, left: 0, right: 0,
                display: 'flex', justifyContent: 'center',
                animation: 'rv-fade-up 800ms var(--rv-ease) 1.4s both',
              }}>
                <img src="assets/medspa-tag.png" alt="Med Spa" decoding="async" style={{
                  height: 'clamp(18px, 1.8vw, 24px)', width: 'auto',
                  filter: 'brightness(0) invert(1)', opacity: 0.78,
                }}/>
              </div>

              {/* Since 2014 tag */}
              <div style={{
                position: 'absolute', right: 22, top: 20,
                display: 'flex', gap: 10, alignItems: 'center',
                fontSize: 11, color: 'rgba(255,255,255,0.75)', letterSpacing: '0.16em', textTransform: 'uppercase',
                zIndex: 2,
              }}>
                Since 2014
                <span style={{ width: 20, height: 1, background: 'rgba(255,255,255,0.5)' }}></span>
              </div>
            </div>
          </div>

          {/* Floating dragonflies */}
          {dragonflies.map((d, k) => (
            <img key={k} src="assets/dragonfly-real.png" alt="" loading="lazy" decoding="async" style={{
              position: 'absolute', top: d.top, left: d.left,
              width: d.size, height: 'auto', opacity: 0.8,
              transform: `rotate(${d.rot}deg)`,
              animation: `rv-float 6s ease-in-out ${d.delay}s infinite`,
              pointerEvents: 'none',
            }}/>
          ))}
        </div>
      </div>

      {/* Secondary marquee */}
      <div style={{
        background: 'var(--rv-ink)', color: 'white', position: 'relative',
        padding: '26px 0', overflow: 'hidden', whiteSpace: 'nowrap',
        borderTop: '1px solid var(--rv-purple)',
      }}>
        <div style={{
          display: 'flex',
          width: 'max-content',
          flexShrink: 0,
          animation: 'rv-marquee 42s linear infinite',
          fontFamily: 'var(--rv-font-accent)',
          fontSize: 22, letterSpacing: '0.18em',
        }}>
          {Array(3).fill(0).flatMap((_, k) => (
            ['Botox', 'CoolSculpting Elite', 'Sylfirm X', 'MOXI', 'BBL Hero', 'Renewal Rituals', 'Dermal Fillers', 'Exosomes', 'PRP Hair', 'IV Drips', 'Skinvive'].map((t, ti) => (
              <span key={`${k}-${ti}`} style={{ padding: '0 40px', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
                <span style={{ fontWeight: 300 }}>{t}</span>
                <img src="assets/dragonfly-real.png" alt="" loading="lazy" decoding="async" width="14" height="18" style={{
                  width: 14, height: 18, marginLeft: 36,
                  filter: 'none', opacity: 0.85, flexShrink: 0,
                }}/>
              </span>
            ))
          ))}
        </div>
        <style>{`
          @keyframes rv-marquee { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }
          @keyframes rv-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(159,101,230,0.18); } 50% { box-shadow: 0 0 0 10px rgba(159,101,230,0.04); } }
          @keyframes rv-float { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 6deg)); } }
          @keyframes rv-rev-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
          @keyframes rv-v-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
          @keyframes rv-dfly-fly {
            0% { opacity: 0; transform: translate(-30px, -80px) rotate(-12deg) scale(0.6); }
            60% { opacity: 1; transform: translate(8px, 4px) rotate(6deg) scale(1.05); }
            100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
          }
          @keyframes rv-dfly-hover {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-4px) rotate(-1.5deg); }
            50% { transform: translateY(-7px) rotate(0deg); }
            75% { transform: translateY(-3px) rotate(1.5deg); }
          }
          @keyframes rv-halo {
            0%, 100% { opacity: 0.6; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.15); }
          }
          @keyframes rv-fade-up {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 0.78; transform: translateY(0); }
          }
        `}</style>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .rv-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; padding: 110px 24px 64px !important; min-height: auto !important; }
        }
        @media (max-width: 600px) {
          .rv-hero-grid { padding: 96px 20px 48px !important; gap: 36px !important; }
          .rv-hero-grid p { font-size: 16px !important; }
          .rv-hero-grid button { padding: 18px 24px !important; font-size: 12px !important; }
        }
      `}</style>
    </section>
  );
}
window.Hero = Hero;