// ────────────────────────────────────────────────────────────────────────
//  logo.jsx — transparent VR emblem, separately-animated names, Ganesha
//             line-art. Nothing sits in a visible box; everything blends.
// ────────────────────────────────────────────────────────────────────────

// Lotus-bud ornamental divider
function OrnamentalDivider({ width = 220, color = '#b58a32', opacity = 1, reveal = 1 }) {
  const len = 86 * reveal;
  return (
    <svg width={width} height="22" viewBox="0 0 220 22" style={{ opacity }}>
      <g stroke={color} strokeWidth="1.2" fill="none">
        <line x1={92 - len} y1="11" x2="92" y2="11" strokeOpacity="0.85" />
        <line x1="128" y1="11" x2={128 + len} y2="11" strokeOpacity="0.85" />
      </g>
      <g transform="translate(110,11)" stroke={color} strokeWidth="1.3" fill="none"
         style={{ opacity: reveal }}>
        <path d="M0 -8 C 5 -2 5 4 0 8 C -5 4 -5 -2 0 -8 Z" />
        <circle cx="-14" cy="0" r="1.6" fill={color} stroke="none" />
        <circle cx="14" cy="0" r="1.6" fill={color} stroke="none" />
      </g>
    </svg>
  );
}

// VR emblem — transparent PNG, soft gold glow + travelling shimmer clipped
// to the gold itself. No background plate.
function WeddingEmblem({ glow = 1 }) {
  return (
    <div style={{ position: 'relative', width: '100%', animation: 'floaty 7s ease-in-out infinite' }}>
      {/* soft gold glow behind the emblem */}
      <div style={{
        position: 'absolute', left: '50%', top: '52%', width: '86%', height: '86%',
        transform: 'translate(-50%,-50%)', borderRadius: '50%', opacity: 0.55 * glow,
        background: 'radial-gradient(circle, rgba(245,205,128,0.6) 0%, rgba(245,205,128,0) 66%)',
        animation: 'glowpulse 5.5s ease-in-out infinite', pointerEvents: 'none',
      }} />

      <img src={(window.asset?window.asset('assets/emblem2.png'):'assets/emblem2.png')} alt="Vyshnavan & Rathusaigini" draggable="false"
           style={{ position: 'relative', display: 'block', width: '100%', height: 'auto' }} />

      {/* shimmer sweep, masked to the emblem shape so only the gold glints */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none',
        WebkitMaskImage: `url(${window.asset?window.asset('assets/emblem2.png'):'assets/emblem2.png'})`, maskImage: `url(${window.asset?window.asset('assets/emblem2.png'):'assets/emblem2.png'})`,
        WebkitMaskSize: '100% 100%', maskSize: '100% 100%',
        WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
      }}>
        <div style={{
          position: 'absolute', top: '-20%', left: 0, width: '34%', height: '140%',
          background: 'linear-gradient(100deg, transparent, rgba(255,250,228,0.95), transparent)',
          filter: 'blur(5px)', mixBlendMode: 'screen', animation: 'sweep 7.5s ease-in-out infinite',
        }} />
      </div>
    </div>
  );
}

// Names revealed letter-by-letter in engraved antique gold.
function NamesReveal({ progress = 0 }) {
  const words = ['VYSHNAVAN', '&', 'RATHUSAIGINI'];
  const n = words.reduce((s, w) => s + w.length, 0);
  let idx = 0;
  return (
    <div style={{ position: 'relative', display: 'inline-flex', justifyContent: 'center',
                  padding: '0.2em 0.6em' }}>
      {/* soft warm halo so the gold lettering reads on bright ivory & on the scene */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: '-40% -8%', pointerEvents: 'none',
        opacity: progress > 0.02 ? 1 : 0, transition: 'opacity .3s linear',
        background: 'radial-gradient(ellipse 62% 130% at 50% 50%, rgba(66,34,8,0.42) 0%, rgba(66,34,8,0.20) 44%, rgba(66,34,8,0) 74%)' }} />
      <div style={{
      position: 'relative',
      display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'baseline',
      columnGap: '0.34em', rowGap: '0.1em',
      fontFamily: '"Cormorant Garamond", serif', fontWeight: 700,
      fontSize: 'clamp(21px, 6.9vw, 43px)', letterSpacing: '0.14em',
      lineHeight: 1.12, textAlign: 'center', maxWidth: '94vw',
    }}>
      {words.map((w, wi) => (
        // each word is an unbreakable unit — wrapping only happens between words
        <span key={wi} style={{ display: 'inline-flex', whiteSpace: 'nowrap' }}>
          {[...w].map((ch, ci) => {
            const k = idx++;
            const lp = Math.max(0, Math.min(1, progress * (n + 6) - k));
            const e = lp * lp * (3 - 2 * lp);
            return (
              <span key={ci} className="gold-text gold-shimmer"
                style={{
                  display: 'inline-block',
                  opacity: e, transform: `translateY(${(1 - e) * 9}px)`,
                  filter: `blur(${(1 - e) * 2}px)`,
                  transition: 'opacity .15s linear, transform .15s linear, filter .15s linear',
                }}>{ch}</span>
            );
          })}
        </span>
      ))}
      </div>
    </div>
  );
}

// Ganesha — transparent gold line-art, gentle glow, no box.
function GaneshaBlessing({ style }) {
  return (
    <img src={(window.asset?window.asset('assets/ganesha2.png'):'assets/ganesha2.png')} alt="Ganesha blessing" draggable="false"
      style={{
        display: 'block', width: '100%', height: 'auto',
        filter: 'drop-shadow(0 0 22px rgba(247,206,120,0.85)) drop-shadow(0 0 46px rgba(247,196,110,0.5))',
        ...style,
      }} />
  );
}

Object.assign(window, { WeddingEmblem, NamesReveal, GaneshaBlessing, OrnamentalDivider });